ngwr 14.8.0 → 14.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"ngwr-lightbox-testing.mjs","sources":["../../../projects/lib/lightbox/testing/wr-lightbox-harness.ts","../../../projects/lib/lightbox/testing/ngwr-lightbox-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, HarnessPredicate, TestKey, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrLightboxHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-lightbox>` — the thumbnail, and the full-size viewer it\n * opens.\n *\n * The thumbnail is an element in your fixture and the viewer is a portal in the NGWR\n * overlay container, so this is loaded from the normal fixture loader and reaches\n * across for you — scoped by the id the trigger publishes as `aria-controls`, never\n * by `.wr-lightbox-viewer`, which would answer with whichever lightbox opened first.\n *\n * **A closed lightbox has no viewer at all**, unlike the collapse or the speed dial:\n * the overlay is created on open and disposed on close, so every viewer read here\n * throws while it is shut rather than answering about a stale element.\n *\n * **`disablePreview` removes the button, not just its behaviour.** The thumbnail is\n * then a bare `<img>` with nothing to click and nothing in the tab order, which is\n * why {@link isInteractive} exists and why {@link open} explains itself rather than\n * timing out on a missing element.\n *\n * @example\n * ```ts\n * const lightbox = await loader.getHarness(WrLightboxHarness.with({ alt: 'Mountain' }));\n *\n * await lightbox.open();\n * expect(await lightbox.getFullSrc()).toBe('/photo.jpg');\n *\n * await lightbox.sendEscape();\n * expect(await lightbox.isOpen()).toBe(false);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrLightboxHarness extends ComponentHarness {\n  static hostSelector = 'wr-lightbox';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrLightboxHarnessFilters = {}): HarnessPredicate<WrLightboxHarness> {\n    return new HarnessPredicate(WrLightboxHarness, options)\n      .addOption('alt', options.alt, (harness, alt) => HarnessPredicate.stringMatches(harness.getAlt(), alt))\n      .addOption('caption', options.caption, (harness, caption) =>\n        HarnessPredicate.stringMatches(harness.readCaption(), caption)\n      )\n      .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open);\n  }\n\n  private readonly thumb = this.locatorFor('.wr-lightbox__thumb');\n  private readonly trigger = this.locatorForOptional('.wr-lightbox__trigger');\n\n  /**\n   * Whether the viewer is open, from the host's own modifier.\n   *\n   * The class rather than the overlay, because it is the answer that holds for a\n   * harness you are HOLDING: the viewer is disposed on close, and a query for it\n   * cannot tell \"shut\" apart from \"never opened\".\n   */\n  async isOpen(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-lightbox--open');\n  }\n\n  /**\n   * Whether the thumbnail has settled — loaded OR failed.\n   *\n   * A failure counts on purpose: the loading state animates a shimmer and hides the\n   * image, so a broken `src` with no error path would shimmer for ever instead of\n   * falling back to its alt text. The two cases are deliberately not separated here,\n   * because the DOM does not separate them either.\n   */\n  async isLoading(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-lightbox--loading');\n  }\n\n  /** The thumbnail's alt text — the same string the viewer takes its name from. */\n  async getAlt(): Promise<string> {\n    return (await this.thumb()).getProperty<string>('alt');\n  }\n\n  /**\n   * What the THUMBNAIL is showing: `preview` when one was given, `src` otherwise.\n   *\n   * Worth its own method because the two images are different files by design — a\n   * grid of thumbnails should not pull full-size originals — and because the\n   * thumbnail never swaps to `src` later. Compare with {@link getFullSrc}.\n   */\n  async getThumbSrc(): Promise<string> {\n    return (await this.thumb()).getProperty<string>('src');\n  }\n\n  /** Whether the thumbnail can be clicked open at all (`disablePreview` off). */\n  async isInteractive(): Promise<boolean> {\n    return (await this.trigger()) !== null;\n  }\n\n  /** The trigger's accessible name — falls back to the alt text, then to the catalog. */\n  async getOpenLabel(): Promise<string | null> {\n    const trigger = await this.trigger();\n    return trigger ? trigger.getAttribute('aria-label') : null;\n  }\n\n  /** Open the viewer. An already-open one is left alone; a non-interactive one throws. */\n  async open(): Promise<void> {\n    if (await this.isOpen()) return;\n\n    const trigger = await this.trigger();\n    if (!trigger) {\n      throw new Error(\n        'WrLightboxHarness.open(): this lightbox has `disablePreview` set, so there is no trigger — the ' +\n          'thumbnail renders as a bare <img> with nothing to click and nothing in the tab order.'\n      );\n    }\n    await trigger.click();\n  }\n\n  /** Close the viewer through its ✕ button. An already-closed one is left alone. */\n  async close(): Promise<void> {\n    if (!(await this.isOpen())) return;\n    await (await this.viewerPart('.wr-lightbox-viewer__close', 'close')).click();\n  }\n\n  /**\n   * Click the full image — which closes the viewer.\n   *\n   * It looks like decoration and is not: the image is styled `cursor: zoom-out`, and\n   * that is a promise. It is deliberately NOT in the tab order, since the ✕ button,\n   * Escape, the backdrop and a swipe all do the same thing and all reach a keyboard —\n   * so this is a mouse affordance, and the only way to assert it still works.\n   */\n  async clickImage(): Promise<void> {\n    await (await this.viewerPart('.wr-lightbox-viewer__full', 'clickImage')).click();\n  }\n\n  /**\n   * Press Escape.\n   *\n   * Sent to the viewer, though it would arrive from anywhere: the overlay is fed by\n   * the CDK's keyboard dispatcher, which keeps one document listener and routes to\n   * the top-most overlay.\n   */\n  async sendEscape(): Promise<void> {\n    await (await this.requireViewer('sendEscape')).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** The full-size image's `src`. Throws while the viewer is closed. */\n  async getFullSrc(): Promise<string> {\n    return (await this.viewerPart('.wr-lightbox-viewer__full', 'getFullSrc')).getProperty<string>('src');\n  }\n\n  /** The caption under the full image, or `null` when there is none. Throws while closed. */\n  async getCaption(): Promise<string | null> {\n    await this.requireViewer('getCaption');\n    return this.readCaption();\n  }\n\n  /** The name the viewer dialog announces — its alt text, or the catalog's fallback. */\n  async getViewerLabel(): Promise<string | null> {\n    return (await this.requireViewer('getViewerLabel')).getAttribute('aria-label');\n  }\n\n  /** The ✕ button's accessible name. Throws while the viewer is closed. */\n  async getCloseLabel(): Promise<string | null> {\n    return (await this.viewerPart('.wr-lightbox-viewer__close', 'getCloseLabel')).getAttribute('aria-label');\n  }\n\n  /** Whether the viewer announces itself as a modal dialog. */\n  async isModal(): Promise<boolean> {\n    const viewer = await this.requireViewer('isModal');\n    return (await viewer.getAttribute('role')) === 'dialog' && (await viewer.getAttribute('aria-modal')) === 'true';\n  }\n\n  /**\n   * Whether focus is inside the viewer, where the trap should be holding it.\n   *\n   * `role=\"dialog\"` with `aria-modal` promises the page behind is out of reach, and a\n   * missing trap makes that a lie — Tab walks straight through the backdrop. Note\n   * that in a unit test the trap needs elements with a box to find anything tabbable,\n   * so a spec asserting this has to hand the DOM some dimensions first.\n   */\n  async isFocusTrapped(): Promise<boolean> {\n    return (await this.requireViewer('isFocusTrapped')).matchesSelector(':focus-within');\n  }\n\n  /**\n   * Whether the trigger's `aria-controls` names THIS lightbox's viewer, and nothing\n   * else on the page.\n   *\n   * The reference only exists while the viewer does — an id naming an element that is\n   * not in the document is not a pairing, it is a dangling reference — so this is\n   * `false` for a closed lightbox by construction. Counted across the document too,\n   * because two viewers answering to one id hand every reference to the first.\n   */\n  async isViewerBound(): Promise<boolean> {\n    const id = await this.viewerId();\n    if (!id) return false;\n\n    const matches = await this.documentRootLocatorFactory().locatorForAll(`.wr-lightbox-viewer#${id}`)();\n    const everywhere = await this.documentRootLocatorFactory().locatorForAll(`[id=\"${id}\"]`)();\n    return matches.length === 1 && everywhere.length === 1;\n  }\n\n  /** The caption without the open check — for filters, which must not throw. */\n  private async readCaption(): Promise<string | null> {\n    const id = await this.viewerId();\n    if (!id) return null;\n\n    const caption = await this.documentRootLocatorFactory().locatorForOptional(`#${id} .wr-lightbox-viewer__caption`)();\n    return caption ? caption.text() : null;\n  }\n\n  /** The id the trigger currently points at, or `null` while the viewer is closed. */\n  private async viewerId(): Promise<string | null> {\n    const trigger = await this.trigger();\n    return trigger ? trigger.getAttribute('aria-controls') : null;\n  }\n\n  private async requireViewer(method: string): Promise<TestElement> {\n    const id = await this.viewerId();\n    const viewer = id\n      ? await this.documentRootLocatorFactory().locatorForOptional(`.wr-lightbox-viewer#${id}`)()\n      : null;\n\n    if (!viewer) {\n      throw new Error(\n        `WrLightboxHarness.${method}(): the viewer is not open. It is an overlay created on open and disposed ` +\n          'on close, so there is nothing to read while the lightbox is shut — call open() first.'\n      );\n    }\n    return viewer;\n  }\n\n  private async viewerPart(selector: string, method: string): Promise<TestElement> {\n    const viewer = await this.requireViewer(method);\n    const id = await viewer.getAttribute('id');\n\n    const part = await this.documentRootLocatorFactory().locatorForOptional(`#${id} ${selector}`)();\n    if (!part) {\n      throw new Error(`WrLightboxHarness.${method}(): the viewer has no \\`${selector}\\` element.`);\n    }\n    return part;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACG,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AACrD,IAAA,OAAO,YAAY,GAAG,aAAa;;AAGnC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAoC,EAAE,EAAA;AAChD,QAAA,OAAO,IAAI,gBAAgB,CAAC,iBAAiB,EAAE,OAAO;aACnD,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,GAAG,CAAC;aACrG,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,KACtD,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,OAAO,CAAC;aAE/D,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,OAAO,EAAE,IAAI,KAAK,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAChG;AAEiB,IAAA,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC;AAC9C,IAAA,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,uBAAuB,CAAC;AAE3E;;;;;;AAMG;AACH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,mBAAmB,CAAC;IAC1D;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,sBAAsB,CAAC;IAC7D;;AAGA,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,WAAW,CAAS,KAAK,CAAC;IACxD;AAEA;;;;;;AAMG;AACH,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,WAAW,CAAS,KAAK,CAAC;IACxD;;AAGA,IAAA,MAAM,aAAa,GAAA;QACjB,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,MAAM,IAAI;IACxC;;AAGA,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE;AACpC,QAAA,OAAO,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,GAAG,IAAI;IAC5D;;AAGA,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,MAAM,IAAI,CAAC,MAAM,EAAE;YAAE;AAEzB,QAAA,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE;QACpC,IAAI,CAAC,OAAO,EAAE;YACZ,MAAM,IAAI,KAAK,CACb,iGAAiG;AAC/F,gBAAA,uFAAuF,CAC1F;QACH;AACA,QAAA,MAAM,OAAO,CAAC,KAAK,EAAE;IACvB;;AAGA,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;YAAE;AAC5B,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,4BAA4B,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE;IAC9E;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,EAAE,YAAY,CAAC,EAAE,KAAK,EAAE;IAClF;AAEA;;;;;;AAMG;AACH,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,MAAM,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;IACzE;;AAGA,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,EAAE,YAAY,CAAC,EAAE,WAAW,CAAS,KAAK,CAAC;IACtG;;AAGA,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC;AACtC,QAAA,OAAO,IAAI,CAAC,WAAW,EAAE;IAC3B;;AAGA,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC;IAChF;;AAGA,IAAA,MAAM,aAAa,GAAA;AACjB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,4BAA4B,EAAE,eAAe,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC;IAC1G;;AAGA,IAAA,MAAM,OAAO,GAAA;QACX,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;QAClD,OAAO,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,QAAQ,IAAI,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,MAAM;IACjH;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC;IACtF;AAEA;;;;;;;;AAQG;AACH,IAAA,MAAM,aAAa,GAAA;AACjB,QAAA,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE;AAChC,QAAA,IAAI,CAAC,EAAE;AAAE,YAAA,OAAO,KAAK;AAErB,QAAA,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC,aAAa,CAAC,CAAA,oBAAA,EAAuB,EAAE,CAAA,CAAE,CAAC,EAAE;AACpG,QAAA,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC,aAAa,CAAC,CAAA,KAAA,EAAQ,EAAE,CAAA,EAAA,CAAI,CAAC,EAAE;QAC1F,OAAO,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;IACxD;;AAGQ,IAAA,MAAM,WAAW,GAAA;AACvB,QAAA,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE;AAChC,QAAA,IAAI,CAAC,EAAE;AAAE,YAAA,OAAO,IAAI;AAEpB,QAAA,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,CAAA,CAAA,EAAI,EAAE,CAAA,6BAAA,CAA+B,CAAC,EAAE;AACnH,QAAA,OAAO,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI;IACxC;;AAGQ,IAAA,MAAM,QAAQ,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE;AACpC,QAAA,OAAO,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,GAAG,IAAI;IAC/D;IAEQ,MAAM,aAAa,CAAC,MAAc,EAAA;AACxC,QAAA,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,QAAQ,EAAE;QAChC,MAAM,MAAM,GAAG;AACb,cAAE,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,CAAA,oBAAA,EAAuB,EAAE,CAAA,CAAE,CAAC;cACvF,IAAI;QAER,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,kBAAA,EAAqB,MAAM,CAAA,0EAAA,CAA4E;AACrG,gBAAA,uFAAuF,CAC1F;QACH;AACA,QAAA,OAAO,MAAM;IACf;AAEQ,IAAA,MAAM,UAAU,CAAC,QAAgB,EAAE,MAAc,EAAA;QACvD,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QAC/C,MAAM,EAAE,GAAG,MAAM,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;AAE1C,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAE,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,EAAE;YACT,MAAM,IAAI,KAAK,CAAC,CAAA,kBAAA,EAAqB,MAAM,CAAA,wBAAA,EAA2B,QAAQ,CAAA,WAAA,CAAa,CAAC;QAC9F;AACA,QAAA,OAAO,IAAI;IACb;;;ACvPF;;AAEG;;;;"}
+{"version":3,"file":"ngwr-lightbox-testing.mjs","sources":["../../../projects/lib/lightbox/testing/wr-lightbox-harness.ts","../../../projects/lib/lightbox/testing/ngwr-lightbox-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, HarnessPredicate, TestKey, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrLightboxHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-lightbox>` — the thumbnail, and the full-size viewer it\n * opens.\n *\n * The thumbnail is an element in your fixture and the viewer is a portal in the NGWR\n * overlay container, so this is loaded from the normal fixture loader and reaches\n * across for you — scoped by the id the trigger publishes as `aria-controls`, never\n * by `.wr-lightbox-viewer`, which would answer with whichever lightbox opened first.\n *\n * **A closed lightbox has no viewer at all**, unlike the collapse or the speed dial:\n * the overlay is created on open and disposed on close, so every viewer read here\n * throws while it is shut rather than answering about a stale element.\n *\n * **`disablePreview` removes the button, not just its behaviour.** The thumbnail is\n * then a bare `<img>` with nothing to click and nothing in the tab order, which is\n * why {@link isInteractive} exists and why {@link open} explains itself rather than\n * timing out on a missing element.\n *\n * @example\n * ```ts\n * const lightbox = await loader.getHarness(WrLightboxHarness.with({ alt: 'Mountain' }));\n *\n * await lightbox.open();\n * expect(await lightbox.getFullSrc()).toBe('/photo.jpg');\n *\n * await lightbox.sendEscape();\n * expect(await lightbox.isOpen()).toBe(false);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrLightboxHarness extends ComponentHarness {\n  static hostSelector = 'wr-lightbox';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrLightboxHarnessFilters = {}): HarnessPredicate<WrLightboxHarness> {\n    return new HarnessPredicate(WrLightboxHarness, options)\n      .addOption('alt', options.alt, (harness, alt) => HarnessPredicate.stringMatches(harness.getAlt(), alt))\n      .addOption('caption', options.caption, (harness, caption) =>\n        HarnessPredicate.stringMatches(harness.readCaption(), caption)\n      )\n      .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open);\n  }\n\n  private readonly thumb = this.locatorFor('.wr-lightbox__thumb');\n  private readonly trigger = this.locatorForOptional('.wr-lightbox__trigger');\n\n  /**\n   * Whether the viewer is open, from the host's own modifier.\n   *\n   * The class rather than the overlay, because it is the answer that holds for a\n   * harness you are HOLDING: the viewer is disposed on close, and a query for it\n   * cannot tell \"shut\" apart from \"never opened\".\n   */\n  async isOpen(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-lightbox--open');\n  }\n\n  /**\n   * Whether the thumbnail has settled — loaded OR failed.\n   *\n   * A failure counts on purpose: the loading state animates a shimmer and hides the\n   * image, so a broken `src` with no error path would shimmer for ever instead of\n   * falling back to its alt text. The two cases are deliberately not separated here,\n   * because the DOM does not separate them either.\n   */\n  async isLoading(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-lightbox--loading');\n  }\n\n  /** The thumbnail's alt text — the same string the viewer takes its name from. */\n  async getAlt(): Promise<string> {\n    return (await this.thumb()).getProperty<string>('alt');\n  }\n\n  /**\n   * What the THUMBNAIL is showing: `preview` when one was given, `src` otherwise.\n   *\n   * Worth its own method because the two images are different files by design — a\n   * grid of thumbnails should not pull full-size originals — and because the\n   * thumbnail never swaps to `src` later. Compare with {@link getFullSrc}.\n   */\n  async getThumbSrc(): Promise<string> {\n    return (await this.thumb()).getProperty<string>('src');\n  }\n\n  /** Whether the thumbnail can be clicked open at all (`disablePreview` off). */\n  async isInteractive(): Promise<boolean> {\n    return (await this.trigger()) !== null;\n  }\n\n  /** The trigger's accessible name — falls back to the alt text, then to the catalog. */\n  async getOpenLabel(): Promise<string | null> {\n    const trigger = await this.trigger();\n    return trigger ? trigger.getAttribute('aria-label') : null;\n  }\n\n  /** Open the viewer. An already-open one is left alone; a non-interactive one throws. */\n  async open(): Promise<void> {\n    if (await this.isOpen()) return;\n\n    const trigger = await this.trigger();\n    if (!trigger) {\n      throw new Error(\n        'WrLightboxHarness.open(): this lightbox has `disablePreview` set, so there is no trigger — the ' +\n          'thumbnail renders as a bare <img> with nothing to click and nothing in the tab order.'\n      );\n    }\n    await trigger.click();\n  }\n\n  /** Close the viewer through its ✕ button. An already-closed one is left alone. */\n  async close(): Promise<void> {\n    if (!(await this.isOpen())) return;\n    await (await this.viewerPart('.wr-lightbox-viewer__close', 'close')).click();\n  }\n\n  /**\n   * Click the full image — which closes the viewer.\n   *\n   * It looks like decoration and is not: the image is styled `cursor: zoom-out`, and\n   * that is a promise. It is deliberately NOT in the tab order, since the ✕ button,\n   * Escape, the backdrop and a swipe all do the same thing and all reach a keyboard —\n   * so this is a mouse affordance, and the only way to assert it still works.\n   */\n  async clickImage(): Promise<void> {\n    await (await this.viewerPart('.wr-lightbox-viewer__full', 'clickImage')).click();\n  }\n\n  /**\n   * Press Escape.\n   *\n   * Sent to the viewer, though it would arrive from anywhere: the overlay is fed by\n   * the CDK's keyboard dispatcher, which keeps one document listener and routes to\n   * the top-most overlay.\n   */\n  async sendEscape(): Promise<void> {\n    await (await this.requireViewer('sendEscape')).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** The full-size image's `src`. Throws while the viewer is closed. */\n  async getFullSrc(): Promise<string> {\n    return (await this.viewerPart('.wr-lightbox-viewer__full', 'getFullSrc')).getProperty<string>('src');\n  }\n\n  /** The caption under the full image, or `null` when there is none. Throws while closed. */\n  async getCaption(): Promise<string | null> {\n    await this.requireViewer('getCaption');\n    return this.readCaption();\n  }\n\n  /** The name the viewer dialog announces — its alt text, or the catalog's fallback. */\n  async getViewerLabel(): Promise<string | null> {\n    return (await this.requireViewer('getViewerLabel')).getAttribute('aria-label');\n  }\n\n  /** The ✕ button's accessible name. Throws while the viewer is closed. */\n  async getCloseLabel(): Promise<string | null> {\n    return (await this.viewerPart('.wr-lightbox-viewer__close', 'getCloseLabel')).getAttribute('aria-label');\n  }\n\n  /** Whether the viewer announces itself as a modal dialog. */\n  async isModal(): Promise<boolean> {\n    const viewer = await this.requireViewer('isModal');\n    return (await viewer.getAttribute('role')) === 'dialog' && (await viewer.getAttribute('aria-modal')) === 'true';\n  }\n\n  /**\n   * Whether focus is inside the viewer, where the trap should be holding it.\n   *\n   * `role=\"dialog\"` with `aria-modal` promises the page behind is out of reach, and a\n   * missing trap makes that a lie — Tab walks straight through the backdrop. Note\n   * that in a unit test the trap needs elements with a box to find anything tabbable,\n   * so a spec asserting this has to hand the DOM some dimensions first.\n   */\n  async isFocusTrapped(): Promise<boolean> {\n    return (await this.requireViewer('isFocusTrapped')).matchesSelector(':focus-within');\n  }\n\n  /**\n   * Whether the trigger's `aria-controls` names THIS lightbox's viewer, and nothing\n   * else on the page.\n   *\n   * The reference only exists while the viewer does — an id naming an element that is\n   * not in the document is not a pairing, it is a dangling reference — so this is\n   * `false` for a closed lightbox by construction. Counted across the document too,\n   * because two viewers answering to one id hand every reference to the first.\n   */\n  async isViewerBound(): Promise<boolean> {\n    const id = await this.viewerId();\n    if (!id) return false;\n\n    const matches = await this.documentRootLocatorFactory().locatorForAll(`.wr-lightbox-viewer#${id}`)();\n    const everywhere = await this.documentRootLocatorFactory().locatorForAll(`[id=\"${id}\"]`)();\n    return matches.length === 1 && everywhere.length === 1;\n  }\n\n  /** The caption without the open check — for filters, which must not throw. */\n  private async readCaption(): Promise<string | null> {\n    const id = await this.viewerId();\n    if (!id) return null;\n\n    const caption = await this.documentRootLocatorFactory().locatorForOptional(`#${id} .wr-lightbox-viewer__caption`)();\n    return caption ? caption.text() : null;\n  }\n\n  /** The id the trigger currently points at, or `null` while the viewer is closed. */\n  private async viewerId(): Promise<string | null> {\n    const trigger = await this.trigger();\n    return trigger ? trigger.getAttribute('aria-controls') : null;\n  }\n\n  private async requireViewer(method: string): Promise<TestElement> {\n    const id = await this.viewerId();\n    const viewer = id\n      ? await this.documentRootLocatorFactory().locatorForOptional(`.wr-lightbox-viewer#${id}`)()\n      : null;\n\n    if (!viewer) {\n      throw new Error(\n        `WrLightboxHarness.${method}(): the viewer is not open. It is an overlay created on open and disposed ` +\n          'on close, so there is nothing to read while the lightbox is shut — call open() first.'\n      );\n    }\n    return viewer;\n  }\n\n  private async viewerPart(selector: string, method: string): Promise<TestElement> {\n    const viewer = await this.requireViewer(method);\n    const id = await viewer.getAttribute('id');\n\n    const part = await this.documentRootLocatorFactory().locatorForOptional(`#${id} ${selector}`)();\n    if (!part) {\n      throw new Error(`WrLightboxHarness.${method}(): the viewer has no \\`${selector}\\` element.`);\n    }\n    return part;\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-lightbox.mjs

@@ -252,10 +252,10 @@ class WrLightbox {
         if (restore && typeof restore.focus === 'function')
             restore.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrLightbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrLightbox, isStandalone: true, selector: "wr-lightbox", inputs: { openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.aspect-ratio": "aspectRatio()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["viewerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance \u2014 the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard \u2014 so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-lightbox{display:inline-block;position:relative;overflow:hidden;border-radius:var(--wr-lightbox-radius, var(--wr-border-radius-base))}@supports (corner-shape: squircle){.wr-lightbox{corner-shape:squircle;border-radius:calc(var(--wr-lightbox-radius, var(--wr-border-radius-base)) * 1.85)}}.wr-lightbox{background:var(--wr-color-hover)}.wr-lightbox--loading{min-height:var(--wr-lightbox-loading-min-height, 4rem)}.wr-lightbox--loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--wr-color-surface-rgb),0),rgba(var(--wr-color-surface-rgb),.45),rgba(var(--wr-color-surface-rgb),0));background-size:200% 100%;animation:wr-lightbox-shimmer 1.4s linear infinite;pointer-events:none;z-index:1}.wr-lightbox__trigger{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}.wr-lightbox__trigger:focus-visible{outline:none}.wr-lightbox__thumb{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:2;opacity:1;transition:opacity .25s ease}.wr-lightbox--loading .wr-lightbox__thumb{opacity:0}.wr-lightbox:has(.wr-lightbox__trigger:focus-visible){outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}@keyframes wr-lightbox-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.wr-lightbox-backdrop{background:rgba(var(--wr-color-backdrop-rgb),.85)}.wr-lightbox-overlay{pointer-events:auto}.wr-lightbox-viewer{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:95vw;max-height:95vh;max-height:95dvh;padding:1rem;animation:wr-lightbox-viewer-in .18s ease;outline:none;touch-action:none}.wr-lightbox-viewer__close{font-size:inherit;position:absolute;top:1rem;inset-inline-end:1rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:999px;background:rgba(var(--wr-color-surface-rgb),.12);color:rgba(var(--wr-color-surface-rgb),.9);cursor:pointer;transition:background .15s ease,transform .15s ease}@media(pointer:coarse){.wr-lightbox-viewer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-lightbox-viewer__close:hover{background:rgba(var(--wr-color-surface-rgb),.2)}.wr-lightbox-viewer__close:active{transform:scale(.95)}.wr-lightbox-viewer__close:focus-visible{outline:2px solid rgba(var(--wr-color-surface-rgb),.9);outline-offset:2px}.wr-lightbox-viewer__full{display:block;max-width:100%;max-height:calc(95vh - 4rem);max-height:calc(95dvh - 4rem);object-fit:contain;cursor:zoom-out;border-radius:.5rem}@supports (corner-shape: squircle){.wr-lightbox-viewer__full{corner-shape:squircle;border-radius:.925rem}}.wr-lightbox-viewer__caption{color:rgba(var(--wr-color-surface-rgb),.85);font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);text-align:center;max-width:60ch}@keyframes wr-lightbox-viewer-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrLightbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrLightbox, isStandalone: true, selector: "wr-lightbox", inputs: { openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.aspect-ratio": "aspectRatio()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["viewerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance \u2014 the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard \u2014 so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\n", styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-lightbox{display:inline-block;position:relative;overflow:hidden;border-radius:var(--wr-lightbox-radius, var(--wr-border-radius-base))}@supports (corner-shape: squircle){.wr-lightbox{corner-shape:squircle;border-radius:calc(var(--wr-lightbox-radius, var(--wr-border-radius-base)) * 1.85)}}.wr-lightbox{background:var(--wr-color-hover)}.wr-lightbox--loading{min-height:var(--wr-lightbox-loading-min-height, 4rem)}.wr-lightbox--loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--wr-color-surface-rgb),0),rgba(var(--wr-color-surface-rgb),.45),rgba(var(--wr-color-surface-rgb),0));background-size:200% 100%;animation:wr-lightbox-shimmer 1.4s linear infinite;pointer-events:none;z-index:1}.wr-lightbox__trigger{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}.wr-lightbox__trigger:focus-visible{outline:none}.wr-lightbox__thumb{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:2;opacity:1;transition:opacity .25s ease}.wr-lightbox--loading .wr-lightbox__thumb{opacity:0}.wr-lightbox:has(.wr-lightbox__trigger:focus-visible){outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}@keyframes wr-lightbox-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.wr-lightbox-backdrop{background:rgba(var(--wr-color-backdrop-rgb),.85)}.wr-lightbox-overlay{pointer-events:auto}.wr-lightbox-viewer{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:95vw;max-height:95vh;max-height:95dvh;padding:1rem;animation:wr-lightbox-viewer-in .18s ease;outline:none;touch-action:none}.wr-lightbox-viewer__close{font-size:inherit;position:absolute;top:1rem;inset-inline-end:1rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:999px;background:rgba(var(--wr-color-surface-rgb),.12);color:rgba(var(--wr-color-surface-rgb),.9);cursor:pointer;transition:background .15s ease,transform .15s ease}@media(pointer:coarse){.wr-lightbox-viewer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}.wr-lightbox-viewer__close:hover{background:rgba(var(--wr-color-surface-rgb),.2)}.wr-lightbox-viewer__close:active{transform:scale(.95)}.wr-lightbox-viewer__close:focus-visible{outline:2px solid rgba(var(--wr-color-surface-rgb),.9);outline-offset:2px}.wr-lightbox-viewer__full{display:block;max-width:100%;max-height:calc(95vh - 4rem);max-height:calc(95dvh - 4rem);object-fit:contain;cursor:zoom-out;border-radius:.5rem}@supports (corner-shape: squircle){.wr-lightbox-viewer__full{corner-shape:squircle;border-radius:.925rem}}.wr-lightbox-viewer__caption{color:rgba(var(--wr-color-surface-rgb),.85);font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);text-align:center;max-width:60ch}@keyframes wr-lightbox-viewer-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrLightbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrLightbox, decorators: [{
             type: Component,
             args: [{ selector: 'wr-lightbox', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-lightbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-lightbox.mjs","sources":["../../../projects/lib/lightbox/lightbox.ts","../../../projects/lib/lightbox/lightbox.html","../../../projects/lib/lightbox/ngwr-lightbox.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 { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { type OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport type { TemplateRef } from '@angular/core';\nimport {\n  Component,\n  DestroyRef,\n  EnvironmentInjector,\n  Injector,\n  ViewContainerRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WR_OVERLAY, wrFollowDirection } from 'ngwr/overlay';\n\nlet viewerUid = 0;\n\n/**\n * Image with click-to-zoom lightbox. The thumbnail is a plain `<img>`\n * with whatever sizing/`object-fit` you give it; clicking opens a CDK\n * overlay showing the full image, with Escape + close button + backdrop\n * to dismiss.\n *\n * @example\n * ```html\n * <wr-lightbox\n *   src=\"/photo.jpg\"\n *   alt=\"Mountain\"\n *   style=\"width: 16rem; height: 10rem; object-fit: cover\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/lightbox\n */\n@Component({\n  selector: 'wr-lightbox',\n  templateUrl: './lightbox.html',\n  styleUrl: './lightbox.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.aspect-ratio]': 'aspectRatio()',\n  },\n})\nexport class WrLightbox {\n  /** Accessible name. Falls back to `image.close`, then `'Close preview'`. */\n  /** Accessible name of the thumbnail button. Falls back to `alt`, then `image.open`. */\n  readonly openLabel = input<string | null>(null);\n\n  readonly closeLabel = input<string | null>(null);\n\n  protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'image.close', 'Close preview');\n\n  /** Image source. */\n  readonly src = input.required<string>();\n\n  /** Alt text. Required for a11y; falls back to an empty string. @default '' */\n  readonly alt = input<string>('');\n\n  /**\n   * Lighter source for the THUMBNAIL — a small or blurred copy, so the grid does not\n   * pull full-size images. The viewer always shows `src`; the thumbnail does not swap\n   * to it later.\n   */\n  readonly preview = input<string | null>(null);\n\n  // Both of these were hard-coded English literals in the template, next to a catalog\n  // that already carried `image.open` translated and unread. `useI18nText` already\n  // does the whole chain — a non-empty binding wins, then the catalog, then the\n  // English default — so the alt text (which describes the actual picture) is what\n  // gets forwarded, with `openLabel` ahead of it as the explicit override.\n  protected readonly resolvedOpenLabel = useI18nText(\n    computed(() => {\n      // Not `??`: an empty `openLabel` is no label at all, so it has to fall through\n      // to the alt text rather than winning as an empty string.\n      const explicit = this.openLabel();\n      if (explicit) return explicit;\n      return this.alt();\n    }),\n    'image.open',\n    'Open preview'\n  );\n\n  protected readonly resolvedViewerLabel = useI18nText(this.alt, 'image.viewer', 'Image preview');\n\n  /** Disable the click-to-zoom lightbox. @default false */\n  readonly disablePreview = input(false, { transform: coerceBooleanProperty });\n\n  /** Caption shown under the full image in the lightbox. */\n  readonly caption = input<string>('');\n\n  /**\n   * Reserve space before the image resolves by fixing the thumbnail's\n   * `aspect-ratio` (e.g. `'16 / 9'`, `'4 / 3'`, or a number like `1.5`).\n   * Prevents the layout jump when the intrinsic image size isn't known up\n   * front — pair it with a `width` and the box keeps its height from first\n   * paint. @default null\n   */\n  readonly aspectRatio = input<string | number | null>(null);\n\n  protected readonly open = signal(false);\n  protected readonly loaded = signal(false);\n\n  /**\n   * Id the trigger's `aria-controls` points at while the viewer is open.\n   *\n   * @internal Public so the host bindings can read it.\n   */\n  protected readonly viewerId = `wr-lightbox-viewer-${++viewerUid}`;\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-lightbox'];\n    if (this.open()) parts.push('wr-lightbox--open');\n    if (!this.loaded()) parts.push('wr-lightbox--loading');\n    return parts.join(' ');\n  });\n\n  // Query by name — `@if` blocks register their own TemplateRefs, so an\n  // unqualified TemplateRef query would grab the thumbnail branch instead.\n  protected readonly panelTpl = viewChild.required<TemplateRef<unknown>>('viewerTpl');\n\n  private readonly overlay = inject(WR_OVERLAY);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly injector = inject(Injector);\n  private readonly focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n  /**\n   * The reading direction the open viewer has to keep up with, resolved off the\n   * ENVIRONMENT injector rather than this component's — the same instance the\n   * CDK read when it stamped the overlay, since `createOverlayRef` takes\n   * `Directionality` from the `Overlay`'s injector and no node-level `[dir]` is\n   * in that chain. The viewer is appended to the overlay container on `<body>`,\n   * not into whatever region the thumbnail sits in, so reading the node\n   * injector would rewrite a correctly-stamped panel to an island's direction\n   * one pass after it opened rather than follow the application at all.\n   *\n   * `null` never happens in an app — `Directionality` is root-provided — but a\n   * bare `TestBed` should still get a viewer that opens.\n   */\n  private readonly dir = inject(EnvironmentInjector).get(Directionality, null);\n  private focusTrap: ConfigurableFocusTrap | null = null;\n  private previouslyFocused: HTMLElement | null = null;\n  private overlayRef: OverlayRef | null = null;\n\n  constructor() {\n    // Destroying the component while the viewer is open removes the projected\n    // content (the portal uses this component's ViewContainerRef) but leaves the\n    // overlay pane and its full-screen backdrop behind, with page scroll still\n    // blocked. Dispose the overlay explicitly.\n    this.destroyRef.onDestroy(() => this.closeOverlay());\n\n    effect(() => {\n      if (this.open()) this.openOverlay();\n      else this.closeOverlay();\n    });\n  }\n\n  protected onClick(): void {\n    if (this.disablePreview()) return;\n    this.open.set(true);\n  }\n\n  protected onClose(): void {\n    this.open.set(false);\n  }\n\n  // Swipe-down-to-dismiss on the open viewer. The image follows the finger and\n  // fades; releasing past ~20% of the viewer height closes it.\n  private viewerStartY = 0;\n  private viewerSwiping = false;\n\n  protected onViewerSwipeStart(event: TouchEvent): void {\n    const touch = event.touches[0];\n    if (!touch) return;\n    this.viewerStartY = touch.clientY;\n    this.viewerSwiping = true;\n  }\n\n  protected onViewerSwipeMove(event: TouchEvent, viewer: HTMLElement): void {\n    if (!this.viewerSwiping) return;\n    const touch = event.touches[0];\n    if (!touch) return;\n    const dy = touch.clientY - this.viewerStartY;\n    if (dy <= 0) {\n      viewer.style.transform = '';\n      viewer.style.opacity = '';\n      return;\n    }\n    event.preventDefault();\n    viewer.style.transition = 'none';\n    viewer.style.transform = `translateY(${dy}px)`;\n    viewer.style.opacity = String(Math.max(0.3, 1 - dy / (viewer.offsetHeight || 1)));\n  }\n\n  protected onViewerSwipeEnd(event: TouchEvent, viewer: HTMLElement): void {\n    if (!this.viewerSwiping) return;\n    this.viewerSwiping = false;\n    const touch = event.changedTouches[0];\n    const dy = touch ? touch.clientY - this.viewerStartY : 0;\n    if (dy > (viewer.offsetHeight || 0) * 0.2) {\n      this.onClose();\n    } else {\n      viewer.style.transition = '';\n      viewer.style.transform = '';\n      viewer.style.opacity = '';\n    }\n  }\n\n  /**\n   * The thumbnail has settled, one way or the other. A failure counts: `--loading`\n   * animates a shimmer AND sets `opacity: 0` on the image, so a broken `src` with no\n   * error path left an invisible box shimmering for ever instead of showing its alt\n   * text.\n   */\n  protected onSettled(): void {\n    this.loaded.set(true);\n  }\n\n  // Overlay\n\n  private openOverlay(): void {\n    if (this.overlayRef) return;\n\n    this.overlayRef = this.overlay.create({\n      hasBackdrop: true,\n      backdropClass: 'wr-lightbox-backdrop',\n      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      panelClass: 'wr-lightbox-overlay',\n    });\n\n    // Centred on both axes, so no geometry rides on the direction — but the\n    // viewer's own chrome does. The ✕ is placed with `inset-inline-end` and the\n    // caption reads as prose, both against the `dir` the CDK froze at create, so\n    // a flip while the viewer is open leaves the button on the wrong corner.\n    wrFollowDirection(this.overlayRef, this.dir, this.injector);\n\n    const portal = new TemplatePortal(this.panelTpl(), this.vcr);\n    this.overlayRef.attach(portal);\n\n    // The viewer declares role=\"dialog\" + aria-modal=\"true\", which promises the\n    // rest of the page is inert. Without a focus trap that promise is a lie:\n    // Tab walks straight out of the viewer into the page behind the backdrop.\n    const active = document.activeElement;\n    this.previouslyFocused = active instanceof HTMLElement ? active : null;\n    this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);\n    void this.focusTrap.focusInitialElementWhenReady();\n\n    this.overlayRef\n      .backdropClick()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.open.set(false));\n\n    this.overlayRef\n      .keydownEvents()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          this.open.set(false);\n        }\n      });\n  }\n\n  private closeOverlay(): void {\n    if (!this.overlayRef) return;\n    this.focusTrap?.destroy();\n    this.focusTrap = null;\n    const restore = this.previouslyFocused;\n    this.previouslyFocused = null;\n    this.overlayRef.dispose();\n    this.overlayRef = null;\n    // Send focus back where it came from, or it lands on <body> and the user\n    // has to tab from the top of the page again.\n    if (restore && typeof restore.focus === 'function') restore.focus();\n  }\n}\n","@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance — the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard — so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\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-lightbox.mjs","sources":["../../../projects/lib/lightbox/lightbox.ts","../../../projects/lib/lightbox/lightbox.html","../../../projects/lib/lightbox/ngwr-lightbox.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 { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { type OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport type { TemplateRef } from '@angular/core';\nimport {\n  Component,\n  DestroyRef,\n  EnvironmentInjector,\n  Injector,\n  ViewContainerRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WR_OVERLAY, wrFollowDirection } from 'ngwr/overlay';\n\nlet viewerUid = 0;\n\n/**\n * Image with click-to-zoom lightbox. The thumbnail is a plain `<img>`\n * with whatever sizing/`object-fit` you give it; clicking opens a CDK\n * overlay showing the full image, with Escape + close button + backdrop\n * to dismiss.\n *\n * @example\n * ```html\n * <wr-lightbox\n *   src=\"/photo.jpg\"\n *   alt=\"Mountain\"\n *   style=\"width: 16rem; height: 10rem; object-fit: cover\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/lightbox\n */\n@Component({\n  selector: 'wr-lightbox',\n  templateUrl: './lightbox.html',\n  styleUrl: './lightbox.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.aspect-ratio]': 'aspectRatio()',\n  },\n})\nexport class WrLightbox {\n  /** Accessible name. Falls back to `image.close`, then `'Close preview'`. */\n  /** Accessible name of the thumbnail button. Falls back to `alt`, then `image.open`. */\n  readonly openLabel = input<string | null>(null);\n\n  readonly closeLabel = input<string | null>(null);\n\n  protected readonly resolvedCloseLabel = useI18nText(this.closeLabel, 'image.close', 'Close preview');\n\n  /** Image source. */\n  readonly src = input.required<string>();\n\n  /** Alt text. Required for a11y; falls back to an empty string. @default '' */\n  readonly alt = input<string>('');\n\n  /**\n   * Lighter source for the THUMBNAIL — a small or blurred copy, so the grid does not\n   * pull full-size images. The viewer always shows `src`; the thumbnail does not swap\n   * to it later.\n   */\n  readonly preview = input<string | null>(null);\n\n  // Both of these were hard-coded English literals in the template, next to a catalog\n  // that already carried `image.open` translated and unread. `useI18nText` already\n  // does the whole chain — a non-empty binding wins, then the catalog, then the\n  // English default — so the alt text (which describes the actual picture) is what\n  // gets forwarded, with `openLabel` ahead of it as the explicit override.\n  protected readonly resolvedOpenLabel = useI18nText(\n    computed(() => {\n      // Not `??`: an empty `openLabel` is no label at all, so it has to fall through\n      // to the alt text rather than winning as an empty string.\n      const explicit = this.openLabel();\n      if (explicit) return explicit;\n      return this.alt();\n    }),\n    'image.open',\n    'Open preview'\n  );\n\n  protected readonly resolvedViewerLabel = useI18nText(this.alt, 'image.viewer', 'Image preview');\n\n  /** Disable the click-to-zoom lightbox. @default false */\n  readonly disablePreview = input(false, { transform: coerceBooleanProperty });\n\n  /** Caption shown under the full image in the lightbox. */\n  readonly caption = input<string>('');\n\n  /**\n   * Reserve space before the image resolves by fixing the thumbnail's\n   * `aspect-ratio` (e.g. `'16 / 9'`, `'4 / 3'`, or a number like `1.5`).\n   * Prevents the layout jump when the intrinsic image size isn't known up\n   * front — pair it with a `width` and the box keeps its height from first\n   * paint. @default null\n   */\n  readonly aspectRatio = input<string | number | null>(null);\n\n  protected readonly open = signal(false);\n  protected readonly loaded = signal(false);\n\n  /**\n   * Id the trigger's `aria-controls` points at while the viewer is open.\n   *\n   * @internal Public so the host bindings can read it.\n   */\n  protected readonly viewerId = `wr-lightbox-viewer-${++viewerUid}`;\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-lightbox'];\n    if (this.open()) parts.push('wr-lightbox--open');\n    if (!this.loaded()) parts.push('wr-lightbox--loading');\n    return parts.join(' ');\n  });\n\n  // Query by name — `@if` blocks register their own TemplateRefs, so an\n  // unqualified TemplateRef query would grab the thumbnail branch instead.\n  protected readonly panelTpl = viewChild.required<TemplateRef<unknown>>('viewerTpl');\n\n  private readonly overlay = inject(WR_OVERLAY);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly injector = inject(Injector);\n  private readonly focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n  /**\n   * The reading direction the open viewer has to keep up with, resolved off the\n   * ENVIRONMENT injector rather than this component's — the same instance the\n   * CDK read when it stamped the overlay, since `createOverlayRef` takes\n   * `Directionality` from the `Overlay`'s injector and no node-level `[dir]` is\n   * in that chain. The viewer is appended to the overlay container on `<body>`,\n   * not into whatever region the thumbnail sits in, so reading the node\n   * injector would rewrite a correctly-stamped panel to an island's direction\n   * one pass after it opened rather than follow the application at all.\n   *\n   * `null` never happens in an app — `Directionality` is root-provided — but a\n   * bare `TestBed` should still get a viewer that opens.\n   */\n  private readonly dir = inject(EnvironmentInjector).get(Directionality, null);\n  private focusTrap: ConfigurableFocusTrap | null = null;\n  private previouslyFocused: HTMLElement | null = null;\n  private overlayRef: OverlayRef | null = null;\n\n  constructor() {\n    // Destroying the component while the viewer is open removes the projected\n    // content (the portal uses this component's ViewContainerRef) but leaves the\n    // overlay pane and its full-screen backdrop behind, with page scroll still\n    // blocked. Dispose the overlay explicitly.\n    this.destroyRef.onDestroy(() => this.closeOverlay());\n\n    effect(() => {\n      if (this.open()) this.openOverlay();\n      else this.closeOverlay();\n    });\n  }\n\n  protected onClick(): void {\n    if (this.disablePreview()) return;\n    this.open.set(true);\n  }\n\n  protected onClose(): void {\n    this.open.set(false);\n  }\n\n  // Swipe-down-to-dismiss on the open viewer. The image follows the finger and\n  // fades; releasing past ~20% of the viewer height closes it.\n  private viewerStartY = 0;\n  private viewerSwiping = false;\n\n  protected onViewerSwipeStart(event: TouchEvent): void {\n    const touch = event.touches[0];\n    if (!touch) return;\n    this.viewerStartY = touch.clientY;\n    this.viewerSwiping = true;\n  }\n\n  protected onViewerSwipeMove(event: TouchEvent, viewer: HTMLElement): void {\n    if (!this.viewerSwiping) return;\n    const touch = event.touches[0];\n    if (!touch) return;\n    const dy = touch.clientY - this.viewerStartY;\n    if (dy <= 0) {\n      viewer.style.transform = '';\n      viewer.style.opacity = '';\n      return;\n    }\n    event.preventDefault();\n    viewer.style.transition = 'none';\n    viewer.style.transform = `translateY(${dy}px)`;\n    viewer.style.opacity = String(Math.max(0.3, 1 - dy / (viewer.offsetHeight || 1)));\n  }\n\n  protected onViewerSwipeEnd(event: TouchEvent, viewer: HTMLElement): void {\n    if (!this.viewerSwiping) return;\n    this.viewerSwiping = false;\n    const touch = event.changedTouches[0];\n    const dy = touch ? touch.clientY - this.viewerStartY : 0;\n    if (dy > (viewer.offsetHeight || 0) * 0.2) {\n      this.onClose();\n    } else {\n      viewer.style.transition = '';\n      viewer.style.transform = '';\n      viewer.style.opacity = '';\n    }\n  }\n\n  /**\n   * The thumbnail has settled, one way or the other. A failure counts: `--loading`\n   * animates a shimmer AND sets `opacity: 0` on the image, so a broken `src` with no\n   * error path left an invisible box shimmering for ever instead of showing its alt\n   * text.\n   */\n  protected onSettled(): void {\n    this.loaded.set(true);\n  }\n\n  // Overlay\n\n  private openOverlay(): void {\n    if (this.overlayRef) return;\n\n    this.overlayRef = this.overlay.create({\n      hasBackdrop: true,\n      backdropClass: 'wr-lightbox-backdrop',\n      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      panelClass: 'wr-lightbox-overlay',\n    });\n\n    // Centred on both axes, so no geometry rides on the direction — but the\n    // viewer's own chrome does. The ✕ is placed with `inset-inline-end` and the\n    // caption reads as prose, both against the `dir` the CDK froze at create, so\n    // a flip while the viewer is open leaves the button on the wrong corner.\n    wrFollowDirection(this.overlayRef, this.dir, this.injector);\n\n    const portal = new TemplatePortal(this.panelTpl(), this.vcr);\n    this.overlayRef.attach(portal);\n\n    // The viewer declares role=\"dialog\" + aria-modal=\"true\", which promises the\n    // rest of the page is inert. Without a focus trap that promise is a lie:\n    // Tab walks straight out of the viewer into the page behind the backdrop.\n    const active = document.activeElement;\n    this.previouslyFocused = active instanceof HTMLElement ? active : null;\n    this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);\n    void this.focusTrap.focusInitialElementWhenReady();\n\n    this.overlayRef\n      .backdropClick()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.open.set(false));\n\n    this.overlayRef\n      .keydownEvents()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          this.open.set(false);\n        }\n      });\n  }\n\n  private closeOverlay(): void {\n    if (!this.overlayRef) return;\n    this.focusTrap?.destroy();\n    this.focusTrap = null;\n    const restore = this.previouslyFocused;\n    this.previouslyFocused = null;\n    this.overlayRef.dispose();\n    this.overlayRef = null;\n    // Send focus back where it came from, or it lands on <body> and the user\n    // has to tab from the top of the page again.\n    if (restore && typeof restore.focus === 'function') restore.focus();\n  }\n}\n","@if (disablePreview()) {\n  <img\n    class=\"wr-lightbox__thumb\"\n    [src]=\"preview() || src()\"\n    [alt]=\"alt()\"\n    (load)=\"onSettled()\"\n    (error)=\"onSettled()\"\n    loading=\"lazy\"\n    decoding=\"async\"\n  />\n} @else {\n  <!-- The trigger opens a modal dialog, and used to say so nowhere: no hint that it\n       opens anything, and nothing on the page tying it to the viewer it opened. -->\n  <button\n    type=\"button\"\n    class=\"wr-lightbox__trigger\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-controls]=\"open() ? viewerId : null\"\n    [attr.aria-label]=\"resolvedOpenLabel()\"\n    (click)=\"onClick()\"\n  >\n    <img\n      class=\"wr-lightbox__thumb\"\n      [src]=\"preview() || src()\"\n      [alt]=\"alt()\"\n      (load)=\"onSettled()\"\n      (error)=\"onSettled()\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  </button>\n}\n\n<ng-template #viewerTpl>\n  <div\n    #viewer\n    class=\"wr-lightbox-viewer\"\n    [id]=\"viewerId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"resolvedViewerLabel()\"\n    (touchstart)=\"onViewerSwipeStart($event)\"\n    (touchmove)=\"onViewerSwipeMove($event, viewer)\"\n    (touchend)=\"onViewerSwipeEnd($event, viewer)\"\n    (touchcancel)=\"onViewerSwipeEnd($event, viewer)\"\n  >\n    <button\n      type=\"button\"\n      class=\"wr-lightbox-viewer__close\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"onClose()\"\n      (keydown.enter)=\"onClose()\"\n      (keydown.space)=\"onClose()\"\n    >\n      <svg\n        class=\"wr-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    <!--\n      Styled `cursor: zoom-out`, which is a promise: clicking the image closes. A\n      REDUNDANT mouse affordance — the close button, Escape, the backdrop and\n      swipe-down all do the same thing and all reach a keyboard — so the image stays\n      out of the tab order rather than becoming a second close stop.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <img class=\"wr-lightbox-viewer__full\" [src]=\"src()\" [alt]=\"alt()\" (click)=\"onClose()\" />\n    @if (caption()) {\n      <div class=\"wr-lightbox-viewer__caption\">{{ caption() }}</div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-line-chart-testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-line-chart-testing.mjs","sources":["../../../projects/lib/line-chart/testing/wr-line-chart-harness.ts","../../../projects/lib/line-chart/testing/ngwr-line-chart-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, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrLineChartHarnessFilters, WrLineChartTooltipRow } from './interfaces';\n\n/**\n * Test harness for `<wr-line-chart>`.\n *\n * **The lines are paths and the paths are not assertable.** A `d` attribute is a\n * rendering detail — it moves with the viewBox, the padding and the value range — so\n * this harness counts the lines and reads everything TEXTUAL instead: the legend, the\n * axis ticks, the x labels and the tooltip. Those are what a reader gets, and they\n * are what breaks when the data wiring does.\n *\n * **The tooltip cannot be opened from a spec, and the reason is worth knowing.** It\n * follows a `pointermove` over the plot, and the component turns the cursor's x into\n * an index by measuring the plot's box — which jsdom reports as 0×0, so every\n * synthetic move resolves to the same index or to none at all. There is deliberately\n * no `hoverAt()`; {@link getTooltipRows} reads the tooltip when something else has\n * opened it, which in practice means a browser-run harness.\n *\n * @example\n * ```ts\n * const chart = await loader.getHarness(WrLineChartHarness);\n *\n * expect(await chart.getSeriesLabels()).toEqual(['Revenue', 'Costs']);\n * expect(await chart.getLineCount()).toBe(2);\n * expect(await chart.getXLabels()).toEqual(['Jan', 'Feb', 'Mar']);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrLineChartHarness extends ComponentHarness {\n  static hostSelector = 'wr-line-chart';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrLineChartHarnessFilters = {}): HarnessPredicate<WrLineChartHarness> {\n    return new HarnessPredicate(WrLineChartHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption('seriesLabel', options.seriesLabel, async (harness, label) => {\n        for (const series of await harness.getSeriesLabels()) {\n          if (await HarnessPredicate.stringMatches(series, label)) return true;\n        }\n        return false;\n      });\n  }\n\n  /** The plot's accessible name — the only name the drawing has. */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.locatorFor('.wr-line-chart__plot')()).getAttribute('aria-label');\n  }\n\n  /** Whether the legend is rendered (`showLegend`, and at least one series). */\n  async hasLegend(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-line-chart__legend')()) !== null;\n  }\n\n  /** The series names from the legend, in order. */\n  async getSeriesLabels(): Promise<string[]> {\n    const items = await this.locatorForAll('.wr-line-chart__legend-item')();\n    return Promise.all(items.map(item => item.text()));\n  }\n\n  /**\n   * How many lines were drawn.\n   *\n   * Worth comparing with {@link getSeriesLabels}: the legend and the paths come from\n   * the same list, so a mismatch is a series that got filtered out of one of them.\n   */\n  async getLineCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-line-chart__line')()).length;\n  }\n\n  /** How many point dots were drawn across every series (`showDots`). */\n  async getDotCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-line-chart__dot')()).length;\n  }\n\n  /** Whether the horizontal grid lines are drawn (`showGrid`). */\n  async hasGrid(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-line-chart__grid-line')()) !== null;\n  }\n\n  /** The y-axis tick labels, top to bottom as drawn. */\n  async getYTicks(): Promise<string[]> {\n    const ticks = await this.locatorForAll('.wr-line-chart__tick')();\n    return Promise.all(ticks.map(tick => tick.text()));\n  }\n\n  /** The x-axis labels under the plot, in order. */\n  async getXLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-line-chart__x-label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** Whether the hover tooltip is showing. */\n  async hasTooltip(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-line-chart__tooltip')()) !== null;\n  }\n\n  /** The tooltip's heading — the x label of the hovered point — or `null` while it is closed. */\n  async getTooltipLabel(): Promise<string | null> {\n    const label = await this.locatorForOptional('.wr-line-chart__tooltip-label')();\n    return label ? label.text() : null;\n  }\n\n  /** The tooltip's rows, one per series, or `[]` while it is closed. */\n  async getTooltipRows(): Promise<WrLineChartTooltipRow[]> {\n    const names = await this.locatorForAll('.wr-line-chart__tooltip-name')();\n    const values = await this.locatorForAll('.wr-line-chart__tooltip-value')();\n\n    return Promise.all(\n      names.map(async (name, index) => ({\n        label: await name.text(),\n        value: (await values[index]?.text()) ?? '',\n      }))\n    );\n  }\n\n  /**\n   * The plot's height in pixels, read off the `style` ATTRIBUTE.\n   *\n   * NOT `getCssValue()`, which is `getComputedStyle()` — the same rule this\n   * file's class note already states and this method alone broke. A computed\n   * read answers from the LAID-OUT box, so it agrees with the inline value in\n   * jsdom (which lays nothing out and echoes the declaration) and disagrees in a\n   * browser, where sub-pixel rounding turns a declared 240 into 239.5. A harness\n   * that answers differently in the two places it runs is worse than one that\n   * refuses.\n   */\n  async getPlotHeight(): Promise<number> {\n    const style = await (await this.locatorFor('.wr-line-chart__plot')()).getAttribute('style');\n    const match = /height:\\s*([\\d.]+)px/.exec(style ?? '');\n    if (!match) {\n      throw new Error(\n        `WrLineChartHarness.getPlotHeight(): no inline height on .wr-line-chart__plot (style: \"${style ?? ''}\"). ` +\n          'The component writes one unconditionally, so its absence is the bug rather than a zero.'\n      );\n    }\n    return Number.parseFloat(match[1]);\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-line-chart-testing.mjs","sources":["../../../projects/lib/line-chart/testing/wr-line-chart-harness.ts","../../../projects/lib/line-chart/testing/ngwr-line-chart-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, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrLineChartHarnessFilters, WrLineChartTooltipRow } from './interfaces';\n\n/**\n * Test harness for `<wr-line-chart>`.\n *\n * **The lines are paths and the paths are not assertable.** A `d` attribute is a\n * rendering detail — it moves with the viewBox, the padding and the value range — so\n * this harness counts the lines and reads everything TEXTUAL instead: the legend, the\n * axis ticks, the x labels and the tooltip. Those are what a reader gets, and they\n * are what breaks when the data wiring does.\n *\n * **The tooltip cannot be opened from a spec, and the reason is worth knowing.** It\n * follows a `pointermove` over the plot, and the component turns the cursor's x into\n * an index by measuring the plot's box — which jsdom reports as 0×0, so every\n * synthetic move resolves to the same index or to none at all. There is deliberately\n * no `hoverAt()`; {@link getTooltipRows} reads the tooltip when something else has\n * opened it, which in practice means a browser-run harness.\n *\n * @example\n * ```ts\n * const chart = await loader.getHarness(WrLineChartHarness);\n *\n * expect(await chart.getSeriesLabels()).toEqual(['Revenue', 'Costs']);\n * expect(await chart.getLineCount()).toBe(2);\n * expect(await chart.getXLabels()).toEqual(['Jan', 'Feb', 'Mar']);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrLineChartHarness extends ComponentHarness {\n  static hostSelector = 'wr-line-chart';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrLineChartHarnessFilters = {}): HarnessPredicate<WrLineChartHarness> {\n    return new HarnessPredicate(WrLineChartHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption('seriesLabel', options.seriesLabel, async (harness, label) => {\n        for (const series of await harness.getSeriesLabels()) {\n          if (await HarnessPredicate.stringMatches(series, label)) return true;\n        }\n        return false;\n      });\n  }\n\n  /** The plot's accessible name — the only name the drawing has. */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.locatorFor('.wr-line-chart__plot')()).getAttribute('aria-label');\n  }\n\n  /** Whether the legend is rendered (`showLegend`, and at least one series). */\n  async hasLegend(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-line-chart__legend')()) !== null;\n  }\n\n  /** The series names from the legend, in order. */\n  async getSeriesLabels(): Promise<string[]> {\n    const items = await this.locatorForAll('.wr-line-chart__legend-item')();\n    return Promise.all(items.map(item => item.text()));\n  }\n\n  /**\n   * How many lines were drawn.\n   *\n   * Worth comparing with {@link getSeriesLabels}: the legend and the paths come from\n   * the same list, so a mismatch is a series that got filtered out of one of them.\n   */\n  async getLineCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-line-chart__line')()).length;\n  }\n\n  /** How many point dots were drawn across every series (`showDots`). */\n  async getDotCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-line-chart__dot')()).length;\n  }\n\n  /** Whether the horizontal grid lines are drawn (`showGrid`). */\n  async hasGrid(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-line-chart__grid-line')()) !== null;\n  }\n\n  /** The y-axis tick labels, top to bottom as drawn. */\n  async getYTicks(): Promise<string[]> {\n    const ticks = await this.locatorForAll('.wr-line-chart__tick')();\n    return Promise.all(ticks.map(tick => tick.text()));\n  }\n\n  /** The x-axis labels under the plot, in order. */\n  async getXLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-line-chart__x-label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** Whether the hover tooltip is showing. */\n  async hasTooltip(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-line-chart__tooltip')()) !== null;\n  }\n\n  /** The tooltip's heading — the x label of the hovered point — or `null` while it is closed. */\n  async getTooltipLabel(): Promise<string | null> {\n    const label = await this.locatorForOptional('.wr-line-chart__tooltip-label')();\n    return label ? label.text() : null;\n  }\n\n  /** The tooltip's rows, one per series, or `[]` while it is closed. */\n  async getTooltipRows(): Promise<WrLineChartTooltipRow[]> {\n    const names = await this.locatorForAll('.wr-line-chart__tooltip-name')();\n    const values = await this.locatorForAll('.wr-line-chart__tooltip-value')();\n\n    return Promise.all(\n      names.map(async (name, index) => ({\n        label: await name.text(),\n        value: (await values[index]?.text()) ?? '',\n      }))\n    );\n  }\n\n  /**\n   * The plot's height in pixels, read off the `style` ATTRIBUTE.\n   *\n   * NOT `getCssValue()`, which is `getComputedStyle()` — the same rule this\n   * file's class note already states and this method alone broke. A computed\n   * read answers from the LAID-OUT box, so it agrees with the inline value in\n   * jsdom (which lays nothing out and echoes the declaration) and disagrees in a\n   * browser, where sub-pixel rounding turns a declared 240 into 239.5. A harness\n   * that answers differently in the two places it runs is worse than one that\n   * refuses.\n   */\n  async getPlotHeight(): Promise<number> {\n    const style = await (await this.locatorFor('.wr-line-chart__plot')()).getAttribute('style');\n    const match = /height:\\s*([\\d.]+)px/.exec(style ?? '');\n    if (!match) {\n      throw new Error(\n        `WrLineChartHarness.getPlotHeight(): no inline height on .wr-line-chart__plot (style: \"${style ?? ''}\"). ` +\n          'The component writes one unconditionally, so its absence is the bug rather than a zero.'\n      );\n    }\n    return Number.parseFloat(match[1]);\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-line-chart.mjs

@@ -269,10 +269,10 @@ class WrLineChart {
     ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
     // Convenience accessor so the host can be referenced from the template.
     hostEl = this.host.nativeElement;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrLineChart, isStandalone: true, selector: "wr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xLabels: { classPropertyName: "xLabels", publicName: "xLabels", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-line-chart" }, ngImport: i0, template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" \u2014 and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrLineChart, isStandalone: true, selector: "wr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xLabels: { classPropertyName: "xLabels", publicName: "xLabels", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-line-chart" }, ngImport: i0, template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" \u2014 and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrLineChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrLineChart, decorators: [{
             type: Component,
             args: [{ selector: 'wr-line-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-line-chart' }, template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" \u2014 and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n" }]
         }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], xLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabels", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });

package/fesm2022/ngwr-line-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-line-chart.mjs","sources":["../../../projects/lib/line-chart/line-chart.ts","../../../projects/lib/line-chart/line-chart.html","../../../projects/lib/line-chart/ngwr-line-chart.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 { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ElementRef, LOCALE_ID, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { useI18nFormatter, useI18nText } from 'ngwr/i18n';\n\nimport type { WrLineSeries } from './interfaces';\n\nconst FALLBACK_COLORS = [\n  'var(--wr-color-primary)',\n  'var(--wr-color-secondary)',\n  'var(--wr-color-success)',\n  'var(--wr-color-warning)',\n  'var(--wr-color-danger)',\n];\n\n/**\n * Multi-series line chart with axes, gridlines, and a hover tooltip.\n * SVG-only — no external dependency.\n *\n * @example\n * ```html\n * <wr-line-chart\n *   [series]=\"[\n *     { label: 'Visits', data: [12, 18, 9, 22, 30, 27, 35] },\n *     { label: 'Signups', data: [3, 5, 4, 8, 11, 9, 14], color: 'var(--wr-color-success)' }\n *   ]\"\n *   [xLabels]=\"['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/line-chart\n */\n@Component({\n  selector: 'wr-line-chart',\n  templateUrl: './line-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-line-chart' },\n})\nexport class WrLineChart {\n  readonly series = input<readonly WrLineSeries[]>([]);\n\n  /**\n   * Accessible name of the chart. The legend carries the series NAMES only — the numbers\n   * are nowhere in text — so without this the plot is nothing at all to a screen reader.\n   * Falls back to `lineChart.label`.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'lineChart.label', 'Line chart');\n\n  private readonly locale = inject(LOCALE_ID);\n  private readonly thousandsText = useI18nFormatter('lineChart.thousands', '{{value}}k');\n\n  /** Labels for the X axis (one per data point). */\n  readonly xLabels = input<readonly string[]>([]);\n\n  /** Chart pixel height. @default 240 */\n  readonly height = input(240, { transform: (v: unknown): number => Math.max(80, coerceNumberProperty(v, 240)) });\n\n  /** Show gridlines + axis ticks. @default true */\n  readonly showGrid = input(true, { transform: coerceBooleanProperty });\n\n  /** Show the legend above the chart. @default true */\n  readonly showLegend = input(true, { transform: coerceBooleanProperty });\n\n  /** Show dots at each data point. @default true */\n  readonly showDots = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Show the hover readout: the crosshair, the point markers and the tooltip. Off\n   * drops all three, since a crosshair with no values beside it points at nothing.\n   * @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  // Drawn in a 600×300 viewBox with reserved space for axis labels.\n  protected readonly vbW = 600;\n  protected readonly vbH = 300;\n  protected readonly padding = { top: 16, right: 16, bottom: 28, left: 36 } as const;\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** Hovered point index (across all series) — null when no hover. */\n  protected readonly hoveredIndex = signal<number | null>(null);\n\n  /** The hovered index while the readout is on, so turning `tooltip` off mid-hover clears it. */\n  protected readonly activeIndex = computed(() => (this.tooltip() ? this.hoveredIndex() : null));\n\n  /**\n   * A dash pattern per series, so the lines are told apart by SHAPE and not\n   * only by hue.\n   *\n   * The default palette's colours sit within about 1.06:1 of each other in\n   * relative luminance — that is the whole nine-intent scale's constraint, and\n   * it means a reader with red-green colour blindness sees several of these\n   * strokes as one grey. A legend that pairs a coloured square with a name does\n   * not rescue it: matching the square to the line is exactly the step that\n   * needs hue. Distinguishing series by dash is the standard remedy and the\n   * only one that survives greyscale, printing and a monochrome display.\n   *\n   * The FIRST entry is solid on purpose. A single-series chart is the common\n   * case and there is nothing to tell apart in it, so it is left exactly as it\n   * was; the patterns only appear once a second series does.\n   */\n  private static readonly DASHES = ['', '7 4', '2 3', '10 4 2 4', '1 4', '6 3 2 3'] as const;\n\n  protected readonly resolvedSeries = computed(() =>\n    this.series().map((s, i) => ({\n      label: s.label,\n      dash: WrLineChart.DASHES[i % WrLineChart.DASHES.length],\n      // A non-finite point becomes a HOLE at its own index, not a missing element.\n      // It cannot stay a number: `Math.min`/`Math.max` over the pooled data are both\n      // NaN as soon as one datum is, so every coordinate in EVERY series came out\n      // `NaN` — invalid path geometry, and the whole chart vanished rather than the\n      // one bad point. But filtering it out closed the gap and slid every LATER point\n      // one x-slot to the left, so each of them was drawn under, and reported in the\n      // tooltip as, the wrong x label. A gap is kept as a gap and the line is broken\n      // across it: interpolating would invent a reading the data never took.\n      data: s.data.map(v => (Number.isFinite(v) ? v : null)),\n      color: s.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length],\n    }))\n  );\n\n  protected readonly bounds = computed(() => {\n    const all = this.resolvedSeries().flatMap(s => s.data.filter(v => v !== null));\n    if (all.length === 0) return { min: 0, max: 1 };\n    const min = Math.min(...all);\n    const max = Math.max(...all);\n    if (min === max) return { min: min - 1, max: max + 1 };\n    // Pad upper bound by ~10% for breathing room.\n    return { min: Math.min(0, min), max: max + (max - min) * 0.1 };\n  });\n\n  protected readonly pointCount = computed(() => {\n    const maxLen = this.resolvedSeries().reduce((acc, s) => Math.max(acc, s.data.length), 0);\n    return Math.max(maxLen, this.xLabels().length);\n  });\n\n  /** Y-axis tick marks (5 of them). */\n  protected readonly yTicks = computed(() => {\n    const { min, max } = this.bounds();\n    const step = (max - min) / 4;\n    return [0, 1, 2, 3, 4].map(i => {\n      const value = max - i * step;\n      return { value, y: this.padding.top + ((max - value) / (max - min)) * this.plotHeight() };\n    });\n  });\n\n  protected readonly plotWidth = (): number => this.vbW - this.padding.left - this.padding.right;\n  protected readonly plotHeight = (): number => this.vbH - this.padding.top - this.padding.bottom;\n\n  /**\n   * The SVG path for a series — one subpath per unbroken run, so a hole in the data\n   * leaves a hole in the line rather than a straight segment across it.\n   */\n  protected pathFor(series: { data: readonly (number | null)[] }): string {\n    const { min, max } = this.bounds();\n    const count = this.pointCount();\n    if (count <= 1) return '';\n    const pw = this.plotWidth();\n    const ph = this.plotHeight();\n\n    const commands: string[] = [];\n    let run = 0;\n    let last = '';\n    // A subpath of one `M` is not stroked at all, so a point with a gap on both sides\n    // would simply vanish when `showDots` is off. Repeating it gives the round linecap\n    // something to paint.\n    const closeRun = (): void => {\n      if (run === 1) commands.push(`L ${last}`);\n      run = 0;\n    };\n\n    series.data.forEach((v, i) => {\n      if (v === null) {\n        closeRun();\n        return;\n      }\n      const x = this.padding.left + (i / (count - 1)) * pw;\n      const y = this.padding.top + ((max - v) / (max - min)) * ph;\n      last = `${x.toFixed(2)} ${y.toFixed(2)}`;\n      commands.push(`${run === 0 ? 'M' : 'L'} ${last}`);\n      run++;\n    });\n    closeRun();\n\n    return commands.join(' ');\n  }\n\n  protected pointX(index: number): number {\n    const count = this.pointCount();\n    if (count <= 1) return this.padding.left;\n    return this.padding.left + (index / (count - 1)) * this.plotWidth();\n  }\n\n  protected pointY(value: number): number {\n    const { min, max } = this.bounds();\n    return this.padding.top + ((max - value) / (max - min)) * this.plotHeight();\n  }\n\n  /**\n   * A point's x as a percentage of the host's width. The x-label strip and the SVG share\n   * that width — the drawing stretches to it — so this is the same space the tooltip and\n   * the labels are placed in, at any size.\n   */\n  protected xPercent(index: number): number {\n    return (this.pointX(index) / this.vbW) * 100;\n  }\n\n  /**\n   * How wide an x label may be, as a percentage of the host's width: its own slot — half\n   * the distance to a neighbour on each side — cut back to what is left between its point\n   * and the end of the strip. Centring a label on its point says nothing about its WIDTH,\n   * and with no bound at all twelve month names printed over each other and the last one\n   * hung outside the chart. Past this the stylesheet ellipsises.\n   */\n  protected xMaxPercent(index: number): number {\n    const count = this.pointCount();\n    // A single label has no neighbour to collide with and the whole strip to sit in.\n    if (count <= 1) return 100;\n    const slot = (this.plotWidth() / (count - 1) / this.vbW) * 100;\n    const x = this.xPercent(index);\n    return Math.min(slot, x + slot / 2, 100 - x + slot / 2);\n  }\n\n  protected readonly hoverPoints = computed(() => {\n    const i = this.activeIndex();\n    if (i === null) return [];\n    return this.resolvedSeries().flatMap(s => {\n      // Past the end of a short series, or on a hole in a longer one — either way there\n      // is no reading at this x, so the series contributes neither a marker nor a row.\n      const value = s.data[i];\n      if (value === undefined || value === null) return [];\n      return [{ label: s.label, value, color: s.color, x: this.pointX(i), y: this.pointY(value) }];\n    });\n  });\n\n  protected readonly hoverLabel = computed(() => {\n    const i = this.activeIndex();\n    if (i === null) return '';\n    return this.xLabels()[i] ?? String(i);\n  });\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.tooltip()) return;\n    const svg = (event.currentTarget as SVGElement).getBoundingClientRect();\n    const ratio = (event.clientX - svg.left) / svg.width;\n    const vbX = ratio * this.vbW;\n    const count = this.pointCount();\n    if (count === 0) return;\n    const i = Math.round(((vbX - this.padding.left) / this.plotWidth()) * (count - 1));\n    if (i >= 0 && i < count) this.hoveredIndex.set(i);\n  }\n\n  protected onPointerLeave(): void {\n    this.hoveredIndex.set(null);\n  }\n\n  /**\n   * A Y-axis tick, in the reader's own language.\n   *\n   * Two halves and both were English. The `k` was a hardcoded Latin\n   * abbreviation — `тыс.` in Russian — so it goes through the catalog like every\n   * other word the library paints. The digits went through `toFixed`, which\n   * always writes a full stop, so a German axis read `1.5` where the rest of the\n   * page read `1,5`; they go through `Intl` now, the way `wrNumber`, `wrDate`\n   * and `wrPlural` already did.\n   *\n   * Grouping is OFF deliberately: a tick is a short axis label, and `5,000k`\n   * would be both wider and a change to what every existing chart draws.\n   */\n  protected formatTick(v: number): string {\n    const digits = (n: number, fraction: number): string =>\n      new Intl.NumberFormat(this.locale, {\n        useGrouping: false,\n        minimumFractionDigits: fraction,\n        maximumFractionDigits: fraction,\n      }).format(n);\n\n    if (Math.abs(v) >= 1000) return this.thousandsText({ value: digits(v / 1000, v % 1000 === 0 ? 0 : 1) });\n    return digits(v, v % 1 === 0 ? 0 : 1);\n  }\n\n  protected readonly viewBox = computed(() => `0 0 ${this.vbW} ${this.vbH}`);\n\n  // Convenience accessor so the host can be referenced from the template.\n  protected readonly hostEl = this.host.nativeElement;\n}\n\nexport type { WrLineSeries } from './interfaces';\n","@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" — and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width — the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\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-line-chart.mjs","sources":["../../../projects/lib/line-chart/line-chart.ts","../../../projects/lib/line-chart/line-chart.html","../../../projects/lib/line-chart/ngwr-line-chart.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 { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ElementRef, LOCALE_ID, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { useI18nFormatter, useI18nText } from 'ngwr/i18n';\n\nimport type { WrLineSeries } from './interfaces';\n\nconst FALLBACK_COLORS = [\n  'var(--wr-color-primary)',\n  'var(--wr-color-secondary)',\n  'var(--wr-color-success)',\n  'var(--wr-color-warning)',\n  'var(--wr-color-danger)',\n];\n\n/**\n * Multi-series line chart with axes, gridlines, and a hover tooltip.\n * SVG-only — no external dependency.\n *\n * @example\n * ```html\n * <wr-line-chart\n *   [series]=\"[\n *     { label: 'Visits', data: [12, 18, 9, 22, 30, 27, 35] },\n *     { label: 'Signups', data: [3, 5, 4, 8, 11, 9, 14], color: 'var(--wr-color-success)' }\n *   ]\"\n *   [xLabels]=\"['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/line-chart\n */\n@Component({\n  selector: 'wr-line-chart',\n  templateUrl: './line-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-line-chart' },\n})\nexport class WrLineChart {\n  readonly series = input<readonly WrLineSeries[]>([]);\n\n  /**\n   * Accessible name of the chart. The legend carries the series NAMES only — the numbers\n   * are nowhere in text — so without this the plot is nothing at all to a screen reader.\n   * Falls back to `lineChart.label`.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'lineChart.label', 'Line chart');\n\n  private readonly locale = inject(LOCALE_ID);\n  private readonly thousandsText = useI18nFormatter('lineChart.thousands', '{{value}}k');\n\n  /** Labels for the X axis (one per data point). */\n  readonly xLabels = input<readonly string[]>([]);\n\n  /** Chart pixel height. @default 240 */\n  readonly height = input(240, { transform: (v: unknown): number => Math.max(80, coerceNumberProperty(v, 240)) });\n\n  /** Show gridlines + axis ticks. @default true */\n  readonly showGrid = input(true, { transform: coerceBooleanProperty });\n\n  /** Show the legend above the chart. @default true */\n  readonly showLegend = input(true, { transform: coerceBooleanProperty });\n\n  /** Show dots at each data point. @default true */\n  readonly showDots = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Show the hover readout: the crosshair, the point markers and the tooltip. Off\n   * drops all three, since a crosshair with no values beside it points at nothing.\n   * @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  // Drawn in a 600×300 viewBox with reserved space for axis labels.\n  protected readonly vbW = 600;\n  protected readonly vbH = 300;\n  protected readonly padding = { top: 16, right: 16, bottom: 28, left: 36 } as const;\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** Hovered point index (across all series) — null when no hover. */\n  protected readonly hoveredIndex = signal<number | null>(null);\n\n  /** The hovered index while the readout is on, so turning `tooltip` off mid-hover clears it. */\n  protected readonly activeIndex = computed(() => (this.tooltip() ? this.hoveredIndex() : null));\n\n  /**\n   * A dash pattern per series, so the lines are told apart by SHAPE and not\n   * only by hue.\n   *\n   * The default palette's colours sit within about 1.06:1 of each other in\n   * relative luminance — that is the whole nine-intent scale's constraint, and\n   * it means a reader with red-green colour blindness sees several of these\n   * strokes as one grey. A legend that pairs a coloured square with a name does\n   * not rescue it: matching the square to the line is exactly the step that\n   * needs hue. Distinguishing series by dash is the standard remedy and the\n   * only one that survives greyscale, printing and a monochrome display.\n   *\n   * The FIRST entry is solid on purpose. A single-series chart is the common\n   * case and there is nothing to tell apart in it, so it is left exactly as it\n   * was; the patterns only appear once a second series does.\n   */\n  private static readonly DASHES = ['', '7 4', '2 3', '10 4 2 4', '1 4', '6 3 2 3'] as const;\n\n  protected readonly resolvedSeries = computed(() =>\n    this.series().map((s, i) => ({\n      label: s.label,\n      dash: WrLineChart.DASHES[i % WrLineChart.DASHES.length],\n      // A non-finite point becomes a HOLE at its own index, not a missing element.\n      // It cannot stay a number: `Math.min`/`Math.max` over the pooled data are both\n      // NaN as soon as one datum is, so every coordinate in EVERY series came out\n      // `NaN` — invalid path geometry, and the whole chart vanished rather than the\n      // one bad point. But filtering it out closed the gap and slid every LATER point\n      // one x-slot to the left, so each of them was drawn under, and reported in the\n      // tooltip as, the wrong x label. A gap is kept as a gap and the line is broken\n      // across it: interpolating would invent a reading the data never took.\n      data: s.data.map(v => (Number.isFinite(v) ? v : null)),\n      color: s.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length],\n    }))\n  );\n\n  protected readonly bounds = computed(() => {\n    const all = this.resolvedSeries().flatMap(s => s.data.filter(v => v !== null));\n    if (all.length === 0) return { min: 0, max: 1 };\n    const min = Math.min(...all);\n    const max = Math.max(...all);\n    if (min === max) return { min: min - 1, max: max + 1 };\n    // Pad upper bound by ~10% for breathing room.\n    return { min: Math.min(0, min), max: max + (max - min) * 0.1 };\n  });\n\n  protected readonly pointCount = computed(() => {\n    const maxLen = this.resolvedSeries().reduce((acc, s) => Math.max(acc, s.data.length), 0);\n    return Math.max(maxLen, this.xLabels().length);\n  });\n\n  /** Y-axis tick marks (5 of them). */\n  protected readonly yTicks = computed(() => {\n    const { min, max } = this.bounds();\n    const step = (max - min) / 4;\n    return [0, 1, 2, 3, 4].map(i => {\n      const value = max - i * step;\n      return { value, y: this.padding.top + ((max - value) / (max - min)) * this.plotHeight() };\n    });\n  });\n\n  protected readonly plotWidth = (): number => this.vbW - this.padding.left - this.padding.right;\n  protected readonly plotHeight = (): number => this.vbH - this.padding.top - this.padding.bottom;\n\n  /**\n   * The SVG path for a series — one subpath per unbroken run, so a hole in the data\n   * leaves a hole in the line rather than a straight segment across it.\n   */\n  protected pathFor(series: { data: readonly (number | null)[] }): string {\n    const { min, max } = this.bounds();\n    const count = this.pointCount();\n    if (count <= 1) return '';\n    const pw = this.plotWidth();\n    const ph = this.plotHeight();\n\n    const commands: string[] = [];\n    let run = 0;\n    let last = '';\n    // A subpath of one `M` is not stroked at all, so a point with a gap on both sides\n    // would simply vanish when `showDots` is off. Repeating it gives the round linecap\n    // something to paint.\n    const closeRun = (): void => {\n      if (run === 1) commands.push(`L ${last}`);\n      run = 0;\n    };\n\n    series.data.forEach((v, i) => {\n      if (v === null) {\n        closeRun();\n        return;\n      }\n      const x = this.padding.left + (i / (count - 1)) * pw;\n      const y = this.padding.top + ((max - v) / (max - min)) * ph;\n      last = `${x.toFixed(2)} ${y.toFixed(2)}`;\n      commands.push(`${run === 0 ? 'M' : 'L'} ${last}`);\n      run++;\n    });\n    closeRun();\n\n    return commands.join(' ');\n  }\n\n  protected pointX(index: number): number {\n    const count = this.pointCount();\n    if (count <= 1) return this.padding.left;\n    return this.padding.left + (index / (count - 1)) * this.plotWidth();\n  }\n\n  protected pointY(value: number): number {\n    const { min, max } = this.bounds();\n    return this.padding.top + ((max - value) / (max - min)) * this.plotHeight();\n  }\n\n  /**\n   * A point's x as a percentage of the host's width. The x-label strip and the SVG share\n   * that width — the drawing stretches to it — so this is the same space the tooltip and\n   * the labels are placed in, at any size.\n   */\n  protected xPercent(index: number): number {\n    return (this.pointX(index) / this.vbW) * 100;\n  }\n\n  /**\n   * How wide an x label may be, as a percentage of the host's width: its own slot — half\n   * the distance to a neighbour on each side — cut back to what is left between its point\n   * and the end of the strip. Centring a label on its point says nothing about its WIDTH,\n   * and with no bound at all twelve month names printed over each other and the last one\n   * hung outside the chart. Past this the stylesheet ellipsises.\n   */\n  protected xMaxPercent(index: number): number {\n    const count = this.pointCount();\n    // A single label has no neighbour to collide with and the whole strip to sit in.\n    if (count <= 1) return 100;\n    const slot = (this.plotWidth() / (count - 1) / this.vbW) * 100;\n    const x = this.xPercent(index);\n    return Math.min(slot, x + slot / 2, 100 - x + slot / 2);\n  }\n\n  protected readonly hoverPoints = computed(() => {\n    const i = this.activeIndex();\n    if (i === null) return [];\n    return this.resolvedSeries().flatMap(s => {\n      // Past the end of a short series, or on a hole in a longer one — either way there\n      // is no reading at this x, so the series contributes neither a marker nor a row.\n      const value = s.data[i];\n      if (value === undefined || value === null) return [];\n      return [{ label: s.label, value, color: s.color, x: this.pointX(i), y: this.pointY(value) }];\n    });\n  });\n\n  protected readonly hoverLabel = computed(() => {\n    const i = this.activeIndex();\n    if (i === null) return '';\n    return this.xLabels()[i] ?? String(i);\n  });\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.tooltip()) return;\n    const svg = (event.currentTarget as SVGElement).getBoundingClientRect();\n    const ratio = (event.clientX - svg.left) / svg.width;\n    const vbX = ratio * this.vbW;\n    const count = this.pointCount();\n    if (count === 0) return;\n    const i = Math.round(((vbX - this.padding.left) / this.plotWidth()) * (count - 1));\n    if (i >= 0 && i < count) this.hoveredIndex.set(i);\n  }\n\n  protected onPointerLeave(): void {\n    this.hoveredIndex.set(null);\n  }\n\n  /**\n   * A Y-axis tick, in the reader's own language.\n   *\n   * Two halves and both were English. The `k` was a hardcoded Latin\n   * abbreviation — `тыс.` in Russian — so it goes through the catalog like every\n   * other word the library paints. The digits went through `toFixed`, which\n   * always writes a full stop, so a German axis read `1.5` where the rest of the\n   * page read `1,5`; they go through `Intl` now, the way `wrNumber`, `wrDate`\n   * and `wrPlural` already did.\n   *\n   * Grouping is OFF deliberately: a tick is a short axis label, and `5,000k`\n   * would be both wider and a change to what every existing chart draws.\n   */\n  protected formatTick(v: number): string {\n    const digits = (n: number, fraction: number): string =>\n      new Intl.NumberFormat(this.locale, {\n        useGrouping: false,\n        minimumFractionDigits: fraction,\n        maximumFractionDigits: fraction,\n      }).format(n);\n\n    if (Math.abs(v) >= 1000) return this.thousandsText({ value: digits(v / 1000, v % 1000 === 0 ? 0 : 1) });\n    return digits(v, v % 1 === 0 ? 0 : 1);\n  }\n\n  protected readonly viewBox = computed(() => `0 0 ${this.vbW} ${this.vbH}`);\n\n  // Convenience accessor so the host can be referenced from the template.\n  protected readonly hostEl = this.host.nativeElement;\n}\n\nexport type { WrLineSeries } from './interfaces';\n","@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" — and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width — the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AASH,MAAM,eAAe,GAAG;IACtB,yBAAyB;IACzB,2BAA2B;IAC3B,yBAAyB;IACzB,yBAAyB;IACzB,wBAAwB;CACzB;AAED;;;;;;;;;;;;;;;;AAgBG;MAOU,WAAW,CAAA;IACb,MAAM,GAAG,KAAK,CAA0B,EAAE;+EAAC;AAEpD;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAgB,IAAI;kFAAC;IAE5B,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,iBAAiB,EAAE,YAAY,CAAC;AAElF,IAAA,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC;AAC1B,IAAA,aAAa,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,YAAY,CAAC;;IAG7E,OAAO,GAAG,KAAK,CAAoB,EAAE;gFAAC;;IAGtC,MAAM,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAAG;;IAGtG,QAAQ,GAAG,KAAK,CAAC,IAAI,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG5D,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG9D,QAAQ,GAAG,KAAK,CAAC,IAAI,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAErE;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAC,IAAI,+EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAGjD,GAAG,GAAG,GAAG;IACT,GAAG,GAAG,GAAG;AACT,IAAA,OAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAW;AAEjE,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC;;IAGhD,YAAY,GAAG,MAAM,CAAgB,IAAI;qFAAC;;IAG1C,WAAW,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC;oFAAC;AAE9F;;;;;;;;;;;;;;;AAeG;AACK,IAAA,OAAgB,MAAM,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAU;IAEvE,cAAc,GAAG,QAAQ,CAAC,MAC3C,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM;QAC3B,KAAK,EAAE,CAAC,CAAC,KAAK;AACd,QAAA,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC;;;;;;;;;QASvD,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;AACtD,QAAA,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,eAAe,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,CAAC;AAC9D,KAAA,CAAC,CAAC;uFACJ;AAEkB,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;AAC9E,QAAA,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE;QAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QAC5B,IAAI,GAAG,KAAK,GAAG;AAAE,YAAA,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,EAAE;;QAEtD,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE;IAChE,CAAC;+EAAC;AAEiB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AACxF,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC;IAChD,CAAC;mFAAC;;AAGiB,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;QACxC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;QAClC,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC;AAC5B,QAAA,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAG;AAC7B,YAAA,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI;AAC5B,YAAA,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,KAAK,KAAK,GAAG,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AAC3F,QAAA,CAAC,CAAC;IACJ,CAAC;+EAAC;AAEiB,IAAA,SAAS,GAAG,MAAc,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK;AAC3E,IAAA,UAAU,GAAG,MAAc,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM;AAE/F;;;AAGG;AACO,IAAA,OAAO,CAAC,MAA4C,EAAA;QAC5D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AAClC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;QAC/B,IAAI,KAAK,IAAI,CAAC;AAAE,YAAA,OAAO,EAAE;AACzB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;AAC3B,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;QAE5B,MAAM,QAAQ,GAAa,EAAE;QAC7B,IAAI,GAAG,GAAG,CAAC;QACX,IAAI,IAAI,GAAG,EAAE;;;;QAIb,MAAM,QAAQ,GAAG,MAAW;YAC1B,IAAI,GAAG,KAAK,CAAC;AAAE,gBAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA,CAAE,CAAC;YACzC,GAAG,GAAG,CAAC;AACT,QAAA,CAAC;QAED,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC3B,YAAA,IAAI,CAAC,KAAK,IAAI,EAAE;AACd,gBAAA,QAAQ,EAAE;gBACV;YACF;AACA,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,EAAE;YACpD,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE;AAC3D,YAAA,IAAI,GAAG,CAAA,EAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACxC,YAAA,QAAQ,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,IAAI,CAAA,CAAE,CAAC;AACjD,YAAA,GAAG,EAAE;AACP,QAAA,CAAC,CAAC;AACF,QAAA,QAAQ,EAAE;AAEV,QAAA,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;IAC3B;AAEU,IAAA,MAAM,CAAC,KAAa,EAAA;AAC5B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;QAC/B,IAAI,KAAK,IAAI,CAAC;AAAE,YAAA,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI;QACxC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;IACrE;AAEU,IAAA,MAAM,CAAC,KAAa,EAAA;QAC5B,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,KAAK,KAAK,GAAG,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;IAC7E;AAEA;;;;AAIG;AACO,IAAA,QAAQ,CAAC,KAAa,EAAA;AAC9B,QAAA,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;IAC9C;AAEA;;;;;;AAMG;AACO,IAAA,WAAW,CAAC,KAAa,EAAA;AACjC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;;QAE/B,IAAI,KAAK,IAAI,CAAC;AAAE,YAAA,OAAO,GAAG;QAC1B,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;QAC9D,MAAM,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC9B,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;IACzD;AAEmB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE;QAC5B,IAAI,CAAC,KAAK,IAAI;AAAE,YAAA,OAAO,EAAE;QACzB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC,OAAO,CAAC,CAAC,IAAG;;;YAGvC,MAAM,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,YAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;AAAE,gBAAA,OAAO,EAAE;AACpD,YAAA,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AAC9F,QAAA,CAAC,CAAC;IACJ,CAAC;oFAAC;AAEiB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE;QAC5B,IAAI,CAAC,KAAK,IAAI;AAAE,YAAA,OAAO,EAAE;AACzB,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC;IACvC,CAAC;mFAAC;AAEQ,IAAA,aAAa,CAAC,KAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAAE;QACrB,MAAM,GAAG,GAAI,KAAK,CAAC,aAA4B,CAAC,qBAAqB,EAAE;AACvE,QAAA,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,KAAK;AACpD,QAAA,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG;AAC5B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;QAC/B,IAAI,KAAK,KAAK,CAAC;YAAE;AACjB,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC;AAClF,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK;AAAE,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;IACnD;IAEU,cAAc,GAAA;AACtB,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7B;AAEA;;;;;;;;;;;;AAYG;AACO,IAAA,UAAU,CAAC,CAAS,EAAA;AAC5B,QAAA,MAAM,MAAM,GAAG,CAAC,CAAS,EAAE,QAAgB,KACzC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE;AACjC,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,qBAAqB,EAAE,QAAQ;AAC/B,YAAA,qBAAqB,EAAE,QAAQ;AAChC,SAAA,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEd,QAAA,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI;AAAE,YAAA,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AACvG,QAAA,OAAO,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvC;AAEmB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAA,IAAA,EAAO,IAAI,CAAC,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,GAAG,CAAA,CAAE;gFAAC;;AAGvD,IAAA,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa;uGAxPxC,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,+nCC7CxB,oiMAmKA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDtHa,WAAW,EAAA,UAAA,EAAA,CAAA;kBANvB,SAAS;+BACE,eAAe,EAAA,aAAA,EAEV,iBAAiB,CAAC,IAAI,QAC/B,EAAE,KAAK,EAAE,eAAe,EAAE,EAAA,QAAA,EAAA,oiMAAA,EAAA;;;AE3ClC;;AAEG;;"}

package/fesm2022/ngwr-list.mjs

@@ -51,10 +51,10 @@ class WrList {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrList, isStandalone: true, selector: "wr-list", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', isInline: true, styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-list__item--disabled{opacity:var(--wr-disabled-opacity);pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: WrList, isStandalone: true, selector: "wr-list", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', isInline: true, styles: [".wr-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-table__sort-btn:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-tabs__tab:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-sidebar__entry:focus-visible,.wr-sidebar__group-toggle:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-sidebar__item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-anchor__link:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-collapse__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-command-palette__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-mention-panel__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-segmented__option:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-back-top:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-carousel__nav:focus-visible,.wr-carousel__dot:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-speed-dial__trigger:focus-visible,.wr-speed-dial__action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-stepper__header:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-window__chrome-action:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-date-picker__trigger:focus-visible,.wr-time-picker__step:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-dropdown-item:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-alert__close:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-graph__viewport:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo)}.wr-list{--wr-list-item-padding-y: .625rem;--wr-list-item-padding-x: 1rem;--wr-list-item-gap: .75rem;--wr-list-divider-color: var(--wr-color-outline);--wr-list-bg: transparent;--wr-list-hover-bg: var(--wr-color-hover);--wr-list-active-bg: rgba(var(--wr-color-primary-rgb), .08);display:block;font-family:var(--wr-font-family-base);font-size:var(--wr-text-sm);color:var(--wr-color-on-surface);background:var(--wr-list-bg)}.wr-list__items{list-style:none;margin:0;padding:0}.wr-list--bordered{border:1px solid var(--wr-list-divider-color);border-radius:var(--wr-border-radius-base)}@supports (corner-shape: squircle){.wr-list--bordered{corner-shape:squircle;border-radius:calc(var(--wr-border-radius-base) * 1.85)}}.wr-list--bordered{overflow:hidden}.wr-list--dividers .wr-list__item:not(:last-child){border-bottom:1px solid var(--wr-list-divider-color)}.wr-list--dense{--wr-list-item-padding-y: .375rem}.wr-list__item{display:flex;align-items:center;gap:var(--wr-list-item-gap);padding:calc(var(--wr-list-item-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-list-item-padding-x) * var(--wr-density-x, 1));color:inherit;transition:background .12s ease}.wr-list__item--interactive{cursor:pointer}.wr-list__item--interactive:hover{background:var(--wr-list-hover-bg)}.wr-list__item--interactive:active{background:var(--wr-list-active-bg)}.wr-list__item--interactive:focus-visible{outline:var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);outline-offset:var(--wr-focus-ring-offset);box-shadow:0 0 0 var(--wr-focus-ring-offset) var(--wr-focus-ring-halo);outline-offset:-2px}.wr-list__item--disabled{opacity:var(--wr-disabled-opacity);pointer-events:none;cursor:not-allowed}.wr-list__leading,.wr-list__trailing{display:inline-flex;align-items:center;flex:0 0 auto;color:rgba(var(--wr-color-on-surface-rgb),.65)}.wr-list__leading:empty,.wr-list__trailing:empty{display:none}.wr-list__body{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrList, decorators: [{
             type: Component,
             args: [{ selector: 'wr-list', template: '<ul class="wr-list__items" role="list"><ng-content /></ul>', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
@@ -114,10 +114,10 @@ class WrListItem {
         event.preventDefault();
         event.currentTarget.click();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrListItem, isStandalone: true, selector: "wr-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, listeners: { "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class": "classes()", "attr.tabindex": "interactive() ? \"0\" : null", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0, template: "<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: WrListItem, isStandalone: true, selector: "wr-list-item", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, listeners: { "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class": "classes()", "attr.tabindex": "interactive() ? \"0\" : null", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0, template: "<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrListItem, decorators: [{
             type: Component,
             args: [{ selector: 'wr-list-item', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',