ngwr 11.2.0 → 12.1.0

package/fesm2022/ngwr-popconfirm.mjs

@@ -48,10 +48,10 @@ class WrPopconfirmPanel {
     ...(ngDevMode ? [{ debugName: "confirmColor" }] : /* istanbul ignore next */ []));
     confirmed = output();
     cancelled = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopconfirmPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrPopconfirmPanel, isStandalone: true, selector: "wr-popconfirm", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, messageId: { classPropertyName: "messageId", publicName: "messageId", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, confirmColor: { classPropertyName: "confirmColor", publicName: "confirmColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { classAttribute: "wr-popconfirm" }, ngImport: i0, template: "<p class=\"wr-popconfirm__message\" [attr.id]=\"messageId()\">{{ message() }}</p>\n\n<div class=\"wr-popconfirm__actions\">\n  <wr-btn class=\"wr-popconfirm__action wr-popconfirm__action--cancel\" size=\"sm\" (click)=\"cancelled.emit()\">\n    {{ cancelText() }}\n  </wr-btn>\n  <wr-btn\n    class=\"wr-popconfirm__action wr-popconfirm__action--confirm\"\n    size=\"sm\"\n    [color]=\"confirmColor()\"\n    (click)=\"confirmed.emit()\"\n  >\n    {{ confirmText() }}\n  </wr-btn>\n</div>\n", dependencies: [{ kind: "component", type: WrButton, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: ["color", "size", "shape", "icon", "iconPosition", "disabled", "outlined", "block", "loading", "isDisabledWhenLoading"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopconfirmPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrPopconfirmPanel, isStandalone: true, selector: "wr-popconfirm", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, messageId: { classPropertyName: "messageId", publicName: "messageId", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, confirmColor: { classPropertyName: "confirmColor", publicName: "confirmColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { classAttribute: "wr-popconfirm" }, ngImport: i0, template: "<p class=\"wr-popconfirm__message\" [attr.id]=\"messageId()\">{{ message() }}</p>\n\n<div class=\"wr-popconfirm__actions\">\n  <wr-btn class=\"wr-popconfirm__action wr-popconfirm__action--cancel\" size=\"sm\" (click)=\"cancelled.emit()\">\n    {{ cancelText() }}\n  </wr-btn>\n  <wr-btn\n    class=\"wr-popconfirm__action wr-popconfirm__action--confirm\"\n    size=\"sm\"\n    [color]=\"confirmColor()\"\n    (click)=\"confirmed.emit()\"\n  >\n    {{ confirmText() }}\n  </wr-btn>\n</div>\n", dependencies: [{ kind: "component", type: WrButton, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: ["color", "size", "shape", "icon", "iconPosition", "disabled", "outlined", "block", "loading", "isDisabledWhenLoading"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopconfirmPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopconfirmPanel, decorators: [{
             type: Component,
             args: [{ selector: 'wr-popconfirm', encapsulation: ViewEncapsulation.None, host: { class: 'wr-popconfirm' }, imports: [WrButton], template: "<p class=\"wr-popconfirm__message\" [attr.id]=\"messageId()\">{{ message() }}</p>\n\n<div class=\"wr-popconfirm__actions\">\n  <wr-btn class=\"wr-popconfirm__action wr-popconfirm__action--cancel\" size=\"sm\" (click)=\"cancelled.emit()\">\n    {{ cancelText() }}\n  </wr-btn>\n  <wr-btn\n    class=\"wr-popconfirm__action wr-popconfirm__action--confirm\"\n    size=\"sm\"\n    [color]=\"confirmColor()\"\n    (click)=\"confirmed.emit()\"\n  >\n    {{ confirmText() }}\n  </wr-btn>\n</div>\n" }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], messageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageId", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], confirmColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmColor", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
@@ -235,10 +235,10 @@ class WrPopconfirm {
     isRtl() {
         return this.dir?.value === 'rtl';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopconfirm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrPopconfirm, isStandalone: true, selector: "[wrPopconfirm]", inputs: { message: { classPropertyName: "message", publicName: "wrPopconfirm", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmColor: { classPropertyName: "confirmColor", publicName: "confirmColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? panelId : null" }, classAttribute: "wr-popconfirm-trigger" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopconfirm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrPopconfirm, isStandalone: true, selector: "[wrPopconfirm]", inputs: { message: { classPropertyName: "message", publicName: "wrPopconfirm", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmColor: { classPropertyName: "confirmColor", publicName: "confirmColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? panelId : null" }, classAttribute: "wr-popconfirm-trigger" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopconfirm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopconfirm, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrPopconfirm]',

package/fesm2022/ngwr-popover-testing.mjs

@@ -240,8 +240,13 @@ class WrPopoverHarness extends ContentContainerComponentHarness {
      * Where the panel sits relative to the trigger, or `null` when it is presented
      * as a sheet and has no anchor.
      *
-     * The resolved position — the directive defaults it per mode (`bottom` for a
-     * popover, `top` for a tooltip) — read off the pane's public modifier class.
+     * The APPLIED position, not the requested one: CDK flips a placement that does
+     * not fit to the next in its fallback chain and swaps the modifier class with
+     * it. Under a unit test that is always the requested placement — jsdom measures
+     * every box as 0×0, so the first candidate always "fits" — but in a browser the
+     * two can differ, and this answers what is on screen. The directive defaults
+     * the request per mode (`bottom` for a popover, `top` for a tooltip).
+     *
      * The arrow itself is a `::after` pseudo-element, so it exists for no DOM query
      * at all; this class is the placement, and it is what the arrow's own CSS keys
      * off.

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

@@ -1 +1 @@
-{"version":3,"file":"ngwr-popover-testing.mjs","sources":["../../../projects/lib/popover/testing/wr-popover-harness.ts","../../../projects/lib/popover/testing/ngwr-popover-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 {\n  ContentContainerComponentHarness,\n  type HarnessLoader,\n  HarnessPredicate,\n  TestKey,\n  type TestElement,\n} from '@angular/cdk/testing';\n\nimport type { WrPopoverPosition } from 'ngwr/popover';\n\nimport type { WrPopoverHarnessFilters } from './interfaces';\n\n/** How long the waiters poll before giving up, in ms. Generous next to the 120ms default delays. */\nconst DEFAULT_TIMEOUT = 1000;\n\n/** How often they re-check, in ms. */\nconst POLL_STEP = 10;\n\n/**\n * The real `setTimeout`, captured at module load — before a spec can install\n * fake timers.\n *\n * The waiters have to let REAL time pass: the show / hide delays are plain\n * `setTimeout`s inside the directive, and under zoneless change detection\n * `whenStable()` resolves without waiting for a macrotask. Reading the faked\n * global instead would mean the sleep never fires at all, and the harness would\n * hang where it should fail with the message it prepared.\n */\nconst realSetTimeout = globalThis.setTimeout;\n\nfunction sleep(ms: number): Promise<void> {\n  return new Promise(resolve => {\n    realSetTimeout(resolve, ms);\n  });\n}\n\n/**\n * Test harness for `[wrPopover]` — both shapes the one directive ships:\n *\n * - **popover** — template content, opens on click (or hover), announces\n *   `role=\"dialog\"` and is what the trigger's `aria-expanded` describes;\n * - **tooltip** — string content, opens on hover AND focus after a delay,\n *   announces `role=\"tooltip\"` and DESCRIBES its trigger instead of being\n *   owned by it.\n *\n * The panel is never inside the trigger: it is a portal in the overlay\n * container, a sibling of the whole app. It is reached through the document\n * root, scoped by the id the trigger publishes while the panel is showing —\n * `aria-controls` in popover mode, `aria-describedby` in tooltip mode. That id\n * is what lets two popovers be open at once without reading each other's\n * content, and it is why every panel reader throws while the panel is shut:\n * there is no element to answer about.\n *\n * Being a CONTENT CONTAINER is the point in popover mode — the panel holds the\n * consumer's own components, so `popover.getHarness(WrButtonHarness…)` reaches\n * them without the spec ever touching the overlay.\n *\n * **Timing.** A tooltip opens on `showDelay` and hides on `hideDelay`; a hover\n * popover hides 120ms after the pointer leaves. `open()`, `close()` and the two\n * waiters sit out that REAL time, so a spec that installs fake timers should\n * drive the clock itself and read `isOpen()` rather than call them.\n *\n * @example\n * ```ts\n * const loader = TestbedHarnessEnvironment.loader(fixture);\n * const details = await loader.getHarness(WrPopoverHarness.with({ triggerText: 'Details' }));\n *\n * await details.open();\n * expect(await details.getRole()).toBe('dialog');\n * await (await details.getHarness(WrButtonHarness.with({ text: 'Confirm' }))).click();\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrPopoverHarness extends ContentContainerComponentHarness {\n  /**\n   * The directive's host — whatever element the consumer put `[wrPopover]` on.\n   *\n   * Matched by the marker class, not by `[wrPopover]`: popover-mode content is a\n   * `TemplateRef` and so is always BOUND (`[wrPopover]=\"tpl\"`), which leaves no\n   * attribute in the DOM at all, and a CLOSED tooltip publishes no ARIA either.\n   * (A tooltip written with the static string form, `wrPopover=\"Save changes\"`,\n   * does keep the attribute — but only that one shape would be findable by it.)\n   * Same shape as `.wr-dropdown-trigger`.\n   */\n  static hostSelector = '.wr-popover-trigger';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrPopoverHarnessFilters = {}): HarnessPredicate<WrPopoverHarness> {\n    return new HarnessPredicate(WrPopoverHarness, options)\n      .addOption('triggerText', options.triggerText, (harness, text) =>\n        HarnessPredicate.stringMatches(harness.getTriggerText(), text)\n      )\n      .addOption('mode', options.mode, async (harness, mode) => (await harness.getMode()) === mode)\n      .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open);\n  }\n\n  /**\n   * Which shape this trigger carries.\n   *\n   * Read from the ARIA contract, not from the `mode` input: a bound `[mode]`\n   * never reaches the DOM, while `aria-haspopup=\"dialog\"` is on every popover\n   * trigger and on no tooltip trigger — a tooltip is a description of the\n   * control, not a popup it owns.\n   */\n  async getMode(): Promise<'popover' | 'tooltip'> {\n    return (await (await this.host()).getAttribute('aria-haspopup')) === 'dialog' ? 'popover' : 'tooltip';\n  }\n\n  /** The trigger's own visible text. The panel's content is `getContentText()`. */\n  async getTriggerText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /**\n   * Whether the panel is showing.\n   *\n   * Two different signals because the two modes advertise different things: a\n   * popover flips `aria-expanded` on its trigger, a tooltip has none at all and\n   * links its description instead. So a tooltip's answer is only as good as the\n   * directive's claim on `aria-describedby` — put the tooltip on a control that\n   * is ALSO described by something else (a `<wr-form-field>` hint, say) and the\n   * two bindings fight over one attribute.\n   */\n  async isOpen(): Promise<boolean> {\n    const host = await this.host();\n    return (await this.getMode()) === 'popover'\n      ? (await host.getAttribute('aria-expanded')) === 'true'\n      : (await host.getAttribute('aria-describedby')) !== null;\n  }\n\n  /**\n   * Open the panel with the gesture this trigger actually answers to, and wait\n   * until it is showing.\n   *\n   * `trigger` is an input, so the DOM does not say which gesture this popover\n   * wants — the harness moves the pointer on first and falls back to a click.\n   * Hover leads because a click is an outside pointer event for every OTHER open\n   * panel, so leading with it would dismiss someone else's popover on the way to\n   * opening this one; a click-driven popover ignores the hover outright. A\n   * tooltip is never clicked at all — hover and focus are its only gestures.\n   *\n   * Throws when nothing appears: a tooltip with an empty string never opens, and\n   * a spec on fake timers has to advance the clock itself.\n   */\n  async open(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (await this.isOpen()) return;\n\n    const host = await this.host();\n    await host.hover();\n    if ((await this.getMode()) === 'tooltip') return this.waitUntilOpen(timeout);\n\n    if (await this.isOpen()) return;\n    await host.click();\n    return this.waitUntilOpen(timeout);\n  }\n\n  /**\n   * Dismiss the panel and wait until it is gone.\n   *\n   * Escape, because it is the one gesture both modes honour immediately: a\n   * popover is closed by the overlay's keyboard dispatcher, a tooltip by the\n   * directive's own binding — no delay in either. To exercise the delayed\n   * pointer path instead, call `mouseAway()` and then `waitUntilClosed()`.\n   */\n  async close(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (!(await this.isOpen())) return;\n\n    await this.sendEscape();\n    return this.waitUntilClosed(timeout);\n  }\n\n  /** Click the trigger. Opens a click-driven popover, toggles it shut again, and does nothing else. */\n  async click(): Promise<void> {\n    return (await this.host()).click();\n  }\n\n  /** Move the pointer onto the trigger — opens a hover popover at once, a tooltip after `showDelay`. */\n  async hover(): Promise<void> {\n    return (await this.host()).hover();\n  }\n\n  /** Move the pointer off the trigger. The panel goes after the grace period, not instantly. */\n  async mouseAway(): Promise<void> {\n    return (await this.host()).mouseAway();\n  }\n\n  /** Focus the trigger — a tooltip's other opening gesture, so keyboard users get the hint too. */\n  async focus(): Promise<void> {\n    return (await this.host()).focus();\n  }\n\n  /** Blur the trigger, which hides a tooltip after `hideDelay`. */\n  async blur(): Promise<void> {\n    return (await this.host()).blur();\n  }\n\n  /** Press Escape on the trigger. Both modes dismiss on it, and neither moves focus. */\n  async sendEscape(): Promise<void> {\n    return (await this.host()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Wait out a pending show. Resolves at once when the panel is already up. */\n  async waitUntilOpen(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (await this.settled(true, timeout)) return;\n\n    throw new Error(\n      `WrPopoverHarness.waitUntilOpen(): nothing opened within ${timeout}ms. A tooltip waits out its ` +\n        'showDelay (and never opens at all for an empty string); this wait uses real time, so a spec on ' +\n        'fake timers has to advance the clock itself and read isOpen().'\n    );\n  }\n\n  /** Wait out a pending hide. Resolves at once when the panel is already gone. */\n  async waitUntilClosed(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (await this.settled(false, timeout)) return;\n\n    throw new Error(\n      `WrPopoverHarness.waitUntilClosed(): still showing after ${timeout}ms. A hover popover closes 120ms ` +\n        'after the pointer leaves — and only if it left at all, since a mouseleave INTO that panel is ' +\n        'deliberately not a leave. A tooltip closes on its hideDelay after mouseleave or blur.'\n    );\n  }\n\n  /**\n   * The panel's text.\n   *\n   * In tooltip mode that is the string itself, rendered into the small text\n   * panel; in popover mode it is everything the projected template renders.\n   */\n  async getContentText(): Promise<string> {\n    return (await this.panel()).text();\n  }\n\n  /**\n   * The role the open panel announces: `'dialog'` for a popover, `'tooltip'` for\n   * a tooltip.\n   *\n   * Worth asserting rather than assuming, twice over: the directive sets it on\n   * the OVERLAY PANE, not on the content a consumer wrote, and in tooltip mode\n   * the pane is deliberately the only element carrying it — the text panel\n   * inside has none, or the description would nest a tooltip in a tooltip.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.panel()).getAttribute('role');\n  }\n\n  /**\n   * The panel's accessible name — `null` in tooltip mode.\n   *\n   * A popover is a named `role=\"dialog\"`: the `ariaLabel` input, or the i18n\n   * catalog's `popover.label` when the consumer says nothing, because an unnamed\n   * dialog announces as \"dialog\" and nothing else. A tooltip has no name of its\n   * own; it IS the trigger's description, which is `getDescriptionText()`.\n   */\n  async getLabel(): Promise<string | null> {\n    return (await this.panel()).getAttribute('aria-label');\n  }\n\n  /**\n   * Whether the panel claims modality.\n   *\n   * `false`, deliberately, and worth pinning: the popover sets\n   * `aria-modal=\"false\"` because focus is NOT trapped and the panel dismisses on\n   * outside click / Escape rather than blocking the page.\n   */\n  async isModal(): Promise<boolean> {\n    return (await (await this.panel()).getAttribute('aria-modal')) === 'true';\n  }\n\n  /**\n   * Where the panel sits relative to the trigger, or `null` when it is presented\n   * as a sheet and has no anchor.\n   *\n   * The resolved position — the directive defaults it per mode (`bottom` for a\n   * popover, `top` for a tooltip) — read off the pane's public modifier class.\n   * The arrow itself is a `::after` pseudo-element, so it exists for no DOM query\n   * at all; this class is the placement, and it is what the arrow's own CSS keys\n   * off.\n   */\n  async getPosition(): Promise<WrPopoverPosition | null> {\n    const classes = (await (await this.panel()).getAttribute('class')) ?? '';\n    const modifier = /wr-(?:popover|tooltip)-overlay--([a-z-]+)/.exec(classes);\n    return modifier ? (modifier[1] as WrPopoverPosition) : null;\n  }\n\n  /** Whether the popover is presented as a full-width bottom sheet instead of an anchored panel. */\n  async isSheet(): Promise<boolean> {\n    return (await this.panel()).hasClass('wr-overlay-sheet');\n  }\n\n  /**\n   * The text a screen reader reads as the TRIGGER'S DESCRIPTION, or `null` when\n   * it describes nothing.\n   *\n   * This resolves `aria-describedby` the way an assistive technology would, so\n   * it answers the whole of tooltip mode's naming contract in one call. Always\n   * `null` for a popover, open or shut — a popover is a thing the trigger owns\n   * (`aria-haspopup` / `aria-expanded`), never a description of it.\n   */\n  async getDescriptionText(): Promise<string | null> {\n    const id = await (await this.host()).getAttribute('aria-describedby');\n    if (!id) return null;\n\n    const described = await this.documentRootLocatorFactory().locatorForOptional(`#${id}`)();\n    return described ? described.text() : null;\n  }\n\n  /**\n   * Harnesses for the consumer's own components are resolved inside THIS\n   * instance's panel.\n   *\n   * Scoped by the published id rather than by `.wr-popover-overlay`: the overlay\n   * container is shared, so a class query would answer with whichever popover\n   * opened first.\n   */\n  protected override async getRootHarnessLoader(): Promise<HarnessLoader> {\n    return this.documentRootLocatorFactory().harnessLoaderFor(`#${await this.panelId()}`);\n  }\n\n  /** Poll until `isOpen()` reports `open`, and say whether it did. */\n  private async settled(open: boolean, timeout: number): Promise<boolean> {\n    for (let waited = 0; waited <= timeout; waited += POLL_STEP) {\n      if ((await this.isOpen()) === open) return true;\n\n      await sleep(POLL_STEP);\n      await this.forceStabilize();\n    }\n    return false;\n  }\n\n  /** This instance's overlay pane. */\n  private async panel(): Promise<TestElement> {\n    return this.documentRootLocatorFactory().locatorFor(`#${await this.panelId()}`)();\n  }\n\n  /** The id the trigger publishes for its panel, which only exists while the panel does. */\n  private async panelId(): Promise<string> {\n    const attribute = (await this.getMode()) === 'popover' ? 'aria-controls' : 'aria-describedby';\n    const id = await (await this.host()).getAttribute(attribute);\n\n    if (!id) {\n      throw new Error(\n        `WrPopoverHarness: nothing is showing. The trigger publishes its panel id as ${attribute} only ` +\n          'while the panel is open — call open() first (a tooltip also has to wait out its showDelay).'\n      );\n    }\n    return id;\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-popover-testing.mjs","sources":["../../../projects/lib/popover/testing/wr-popover-harness.ts","../../../projects/lib/popover/testing/ngwr-popover-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 {\n  ContentContainerComponentHarness,\n  type HarnessLoader,\n  HarnessPredicate,\n  TestKey,\n  type TestElement,\n} from '@angular/cdk/testing';\n\nimport type { WrPopoverPosition } from 'ngwr/popover';\n\nimport type { WrPopoverHarnessFilters } from './interfaces';\n\n/** How long the waiters poll before giving up, in ms. Generous next to the 120ms default delays. */\nconst DEFAULT_TIMEOUT = 1000;\n\n/** How often they re-check, in ms. */\nconst POLL_STEP = 10;\n\n/**\n * The real `setTimeout`, captured at module load — before a spec can install\n * fake timers.\n *\n * The waiters have to let REAL time pass: the show / hide delays are plain\n * `setTimeout`s inside the directive, and under zoneless change detection\n * `whenStable()` resolves without waiting for a macrotask. Reading the faked\n * global instead would mean the sleep never fires at all, and the harness would\n * hang where it should fail with the message it prepared.\n */\nconst realSetTimeout = globalThis.setTimeout;\n\nfunction sleep(ms: number): Promise<void> {\n  return new Promise(resolve => {\n    realSetTimeout(resolve, ms);\n  });\n}\n\n/**\n * Test harness for `[wrPopover]` — both shapes the one directive ships:\n *\n * - **popover** — template content, opens on click (or hover), announces\n *   `role=\"dialog\"` and is what the trigger's `aria-expanded` describes;\n * - **tooltip** — string content, opens on hover AND focus after a delay,\n *   announces `role=\"tooltip\"` and DESCRIBES its trigger instead of being\n *   owned by it.\n *\n * The panel is never inside the trigger: it is a portal in the overlay\n * container, a sibling of the whole app. It is reached through the document\n * root, scoped by the id the trigger publishes while the panel is showing —\n * `aria-controls` in popover mode, `aria-describedby` in tooltip mode. That id\n * is what lets two popovers be open at once without reading each other's\n * content, and it is why every panel reader throws while the panel is shut:\n * there is no element to answer about.\n *\n * Being a CONTENT CONTAINER is the point in popover mode — the panel holds the\n * consumer's own components, so `popover.getHarness(WrButtonHarness…)` reaches\n * them without the spec ever touching the overlay.\n *\n * **Timing.** A tooltip opens on `showDelay` and hides on `hideDelay`; a hover\n * popover hides 120ms after the pointer leaves. `open()`, `close()` and the two\n * waiters sit out that REAL time, so a spec that installs fake timers should\n * drive the clock itself and read `isOpen()` rather than call them.\n *\n * @example\n * ```ts\n * const loader = TestbedHarnessEnvironment.loader(fixture);\n * const details = await loader.getHarness(WrPopoverHarness.with({ triggerText: 'Details' }));\n *\n * await details.open();\n * expect(await details.getRole()).toBe('dialog');\n * await (await details.getHarness(WrButtonHarness.with({ text: 'Confirm' }))).click();\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrPopoverHarness extends ContentContainerComponentHarness {\n  /**\n   * The directive's host — whatever element the consumer put `[wrPopover]` on.\n   *\n   * Matched by the marker class, not by `[wrPopover]`: popover-mode content is a\n   * `TemplateRef` and so is always BOUND (`[wrPopover]=\"tpl\"`), which leaves no\n   * attribute in the DOM at all, and a CLOSED tooltip publishes no ARIA either.\n   * (A tooltip written with the static string form, `wrPopover=\"Save changes\"`,\n   * does keep the attribute — but only that one shape would be findable by it.)\n   * Same shape as `.wr-dropdown-trigger`.\n   */\n  static hostSelector = '.wr-popover-trigger';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrPopoverHarnessFilters = {}): HarnessPredicate<WrPopoverHarness> {\n    return new HarnessPredicate(WrPopoverHarness, options)\n      .addOption('triggerText', options.triggerText, (harness, text) =>\n        HarnessPredicate.stringMatches(harness.getTriggerText(), text)\n      )\n      .addOption('mode', options.mode, async (harness, mode) => (await harness.getMode()) === mode)\n      .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open);\n  }\n\n  /**\n   * Which shape this trigger carries.\n   *\n   * Read from the ARIA contract, not from the `mode` input: a bound `[mode]`\n   * never reaches the DOM, while `aria-haspopup=\"dialog\"` is on every popover\n   * trigger and on no tooltip trigger — a tooltip is a description of the\n   * control, not a popup it owns.\n   */\n  async getMode(): Promise<'popover' | 'tooltip'> {\n    return (await (await this.host()).getAttribute('aria-haspopup')) === 'dialog' ? 'popover' : 'tooltip';\n  }\n\n  /** The trigger's own visible text. The panel's content is `getContentText()`. */\n  async getTriggerText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /**\n   * Whether the panel is showing.\n   *\n   * Two different signals because the two modes advertise different things: a\n   * popover flips `aria-expanded` on its trigger, a tooltip has none at all and\n   * links its description instead. So a tooltip's answer is only as good as the\n   * directive's claim on `aria-describedby` — put the tooltip on a control that\n   * is ALSO described by something else (a `<wr-form-field>` hint, say) and the\n   * two bindings fight over one attribute.\n   */\n  async isOpen(): Promise<boolean> {\n    const host = await this.host();\n    return (await this.getMode()) === 'popover'\n      ? (await host.getAttribute('aria-expanded')) === 'true'\n      : (await host.getAttribute('aria-describedby')) !== null;\n  }\n\n  /**\n   * Open the panel with the gesture this trigger actually answers to, and wait\n   * until it is showing.\n   *\n   * `trigger` is an input, so the DOM does not say which gesture this popover\n   * wants — the harness moves the pointer on first and falls back to a click.\n   * Hover leads because a click is an outside pointer event for every OTHER open\n   * panel, so leading with it would dismiss someone else's popover on the way to\n   * opening this one; a click-driven popover ignores the hover outright. A\n   * tooltip is never clicked at all — hover and focus are its only gestures.\n   *\n   * Throws when nothing appears: a tooltip with an empty string never opens, and\n   * a spec on fake timers has to advance the clock itself.\n   */\n  async open(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (await this.isOpen()) return;\n\n    const host = await this.host();\n    await host.hover();\n    if ((await this.getMode()) === 'tooltip') return this.waitUntilOpen(timeout);\n\n    if (await this.isOpen()) return;\n    await host.click();\n    return this.waitUntilOpen(timeout);\n  }\n\n  /**\n   * Dismiss the panel and wait until it is gone.\n   *\n   * Escape, because it is the one gesture both modes honour immediately: a\n   * popover is closed by the overlay's keyboard dispatcher, a tooltip by the\n   * directive's own binding — no delay in either. To exercise the delayed\n   * pointer path instead, call `mouseAway()` and then `waitUntilClosed()`.\n   */\n  async close(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (!(await this.isOpen())) return;\n\n    await this.sendEscape();\n    return this.waitUntilClosed(timeout);\n  }\n\n  /** Click the trigger. Opens a click-driven popover, toggles it shut again, and does nothing else. */\n  async click(): Promise<void> {\n    return (await this.host()).click();\n  }\n\n  /** Move the pointer onto the trigger — opens a hover popover at once, a tooltip after `showDelay`. */\n  async hover(): Promise<void> {\n    return (await this.host()).hover();\n  }\n\n  /** Move the pointer off the trigger. The panel goes after the grace period, not instantly. */\n  async mouseAway(): Promise<void> {\n    return (await this.host()).mouseAway();\n  }\n\n  /** Focus the trigger — a tooltip's other opening gesture, so keyboard users get the hint too. */\n  async focus(): Promise<void> {\n    return (await this.host()).focus();\n  }\n\n  /** Blur the trigger, which hides a tooltip after `hideDelay`. */\n  async blur(): Promise<void> {\n    return (await this.host()).blur();\n  }\n\n  /** Press Escape on the trigger. Both modes dismiss on it, and neither moves focus. */\n  async sendEscape(): Promise<void> {\n    return (await this.host()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Wait out a pending show. Resolves at once when the panel is already up. */\n  async waitUntilOpen(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (await this.settled(true, timeout)) return;\n\n    throw new Error(\n      `WrPopoverHarness.waitUntilOpen(): nothing opened within ${timeout}ms. A tooltip waits out its ` +\n        'showDelay (and never opens at all for an empty string); this wait uses real time, so a spec on ' +\n        'fake timers has to advance the clock itself and read isOpen().'\n    );\n  }\n\n  /** Wait out a pending hide. Resolves at once when the panel is already gone. */\n  async waitUntilClosed(timeout = DEFAULT_TIMEOUT): Promise<void> {\n    if (await this.settled(false, timeout)) return;\n\n    throw new Error(\n      `WrPopoverHarness.waitUntilClosed(): still showing after ${timeout}ms. A hover popover closes 120ms ` +\n        'after the pointer leaves — and only if it left at all, since a mouseleave INTO that panel is ' +\n        'deliberately not a leave. A tooltip closes on its hideDelay after mouseleave or blur.'\n    );\n  }\n\n  /**\n   * The panel's text.\n   *\n   * In tooltip mode that is the string itself, rendered into the small text\n   * panel; in popover mode it is everything the projected template renders.\n   */\n  async getContentText(): Promise<string> {\n    return (await this.panel()).text();\n  }\n\n  /**\n   * The role the open panel announces: `'dialog'` for a popover, `'tooltip'` for\n   * a tooltip.\n   *\n   * Worth asserting rather than assuming, twice over: the directive sets it on\n   * the OVERLAY PANE, not on the content a consumer wrote, and in tooltip mode\n   * the pane is deliberately the only element carrying it — the text panel\n   * inside has none, or the description would nest a tooltip in a tooltip.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.panel()).getAttribute('role');\n  }\n\n  /**\n   * The panel's accessible name — `null` in tooltip mode.\n   *\n   * A popover is a named `role=\"dialog\"`: the `ariaLabel` input, or the i18n\n   * catalog's `popover.label` when the consumer says nothing, because an unnamed\n   * dialog announces as \"dialog\" and nothing else. A tooltip has no name of its\n   * own; it IS the trigger's description, which is `getDescriptionText()`.\n   */\n  async getLabel(): Promise<string | null> {\n    return (await this.panel()).getAttribute('aria-label');\n  }\n\n  /**\n   * Whether the panel claims modality.\n   *\n   * `false`, deliberately, and worth pinning: the popover sets\n   * `aria-modal=\"false\"` because focus is NOT trapped and the panel dismisses on\n   * outside click / Escape rather than blocking the page.\n   */\n  async isModal(): Promise<boolean> {\n    return (await (await this.panel()).getAttribute('aria-modal')) === 'true';\n  }\n\n  /**\n   * Where the panel sits relative to the trigger, or `null` when it is presented\n   * as a sheet and has no anchor.\n   *\n   * The APPLIED position, not the requested one: CDK flips a placement that does\n   * not fit to the next in its fallback chain and swaps the modifier class with\n   * it. Under a unit test that is always the requested placement — jsdom measures\n   * every box as 0×0, so the first candidate always \"fits\" — but in a browser the\n   * two can differ, and this answers what is on screen. The directive defaults\n   * the request per mode (`bottom` for a popover, `top` for a tooltip).\n   *\n   * The arrow itself is a `::after` pseudo-element, so it exists for no DOM query\n   * at all; this class is the placement, and it is what the arrow's own CSS keys\n   * off.\n   */\n  async getPosition(): Promise<WrPopoverPosition | null> {\n    const classes = (await (await this.panel()).getAttribute('class')) ?? '';\n    const modifier = /wr-(?:popover|tooltip)-overlay--([a-z-]+)/.exec(classes);\n    return modifier ? (modifier[1] as WrPopoverPosition) : null;\n  }\n\n  /** Whether the popover is presented as a full-width bottom sheet instead of an anchored panel. */\n  async isSheet(): Promise<boolean> {\n    return (await this.panel()).hasClass('wr-overlay-sheet');\n  }\n\n  /**\n   * The text a screen reader reads as the TRIGGER'S DESCRIPTION, or `null` when\n   * it describes nothing.\n   *\n   * This resolves `aria-describedby` the way an assistive technology would, so\n   * it answers the whole of tooltip mode's naming contract in one call. Always\n   * `null` for a popover, open or shut — a popover is a thing the trigger owns\n   * (`aria-haspopup` / `aria-expanded`), never a description of it.\n   */\n  async getDescriptionText(): Promise<string | null> {\n    const id = await (await this.host()).getAttribute('aria-describedby');\n    if (!id) return null;\n\n    const described = await this.documentRootLocatorFactory().locatorForOptional(`#${id}`)();\n    return described ? described.text() : null;\n  }\n\n  /**\n   * Harnesses for the consumer's own components are resolved inside THIS\n   * instance's panel.\n   *\n   * Scoped by the published id rather than by `.wr-popover-overlay`: the overlay\n   * container is shared, so a class query would answer with whichever popover\n   * opened first.\n   */\n  protected override async getRootHarnessLoader(): Promise<HarnessLoader> {\n    return this.documentRootLocatorFactory().harnessLoaderFor(`#${await this.panelId()}`);\n  }\n\n  /** Poll until `isOpen()` reports `open`, and say whether it did. */\n  private async settled(open: boolean, timeout: number): Promise<boolean> {\n    for (let waited = 0; waited <= timeout; waited += POLL_STEP) {\n      if ((await this.isOpen()) === open) return true;\n\n      await sleep(POLL_STEP);\n      await this.forceStabilize();\n    }\n    return false;\n  }\n\n  /** This instance's overlay pane. */\n  private async panel(): Promise<TestElement> {\n    return this.documentRootLocatorFactory().locatorFor(`#${await this.panelId()}`)();\n  }\n\n  /** The id the trigger publishes for its panel, which only exists while the panel does. */\n  private async panelId(): Promise<string> {\n    const attribute = (await this.getMode()) === 'popover' ? 'aria-controls' : 'aria-describedby';\n    const id = await (await this.host()).getAttribute(attribute);\n\n    if (!id) {\n      throw new Error(\n        `WrPopoverHarness: nothing is showing. The trigger publishes its panel id as ${attribute} only ` +\n          'while the panel is open — call open() first (a tooltip also has to wait out its showDelay).'\n      );\n    }\n    return id;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAcH;AACA,MAAM,eAAe,GAAG,IAAI;AAE5B;AACA,MAAM,SAAS,GAAG,EAAE;AAEpB;;;;;;;;;AASG;AACH,MAAM,cAAc,GAAG,UAAU,CAAC,UAAU;AAE5C,SAAS,KAAK,CAAC,EAAU,EAAA;AACvB,IAAA,OAAO,IAAI,OAAO,CAAC,OAAO,IAAG;AAC3B,QAAA,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC;AAC7B,IAAA,CAAC,CAAC;AACJ;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACG,MAAO,gBAAiB,SAAQ,gCAAgC,CAAA;AACpE;;;;;;;;;AASG;AACH,IAAA,OAAO,YAAY,GAAG,qBAAqB;;AAG3C,IAAA,OAAO,IAAI,CAAC,OAAA,GAAmC,EAAE,EAAA;AAC/C,QAAA,OAAO,IAAI,gBAAgB,CAAC,gBAAgB,EAAE,OAAO;aAClD,SAAS,CAAC,aAAa,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,IAAI,KAC3D,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC;aAE/D,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,OAAO,EAAE,IAAI,KAAK,CAAC,MAAM,OAAO,CAAC,OAAO,EAAE,MAAM,IAAI;aAC3F,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,OAAO,EAAE,IAAI,KAAK,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAChG;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,YAAY,CAAC,eAAe,CAAC,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS;IACvG;;AAGA,IAAA,MAAM,cAAc,GAAA;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE;IACnC;AAEA;;;;;;;;;AASG;AACH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE;QAC9B,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,MAAM;cAC9B,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,MAAM;AACjD,cAAE,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,MAAM,IAAI;IAC5D;AAEA;;;;;;;;;;;;;AAaG;AACH,IAAA,MAAM,IAAI,CAAC,OAAO,GAAG,eAAe,EAAA;AAClC,QAAA,IAAI,MAAM,IAAI,CAAC,MAAM,EAAE;YAAE;AAEzB,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE;AAC9B,QAAA,MAAM,IAAI,CAAC,KAAK,EAAE;QAClB,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,MAAM,SAAS;AAAE,YAAA,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;AAE5E,QAAA,IAAI,MAAM,IAAI,CAAC,MAAM,EAAE;YAAE;AACzB,QAAA,MAAM,IAAI,CAAC,KAAK,EAAE;AAClB,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;IACpC;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,KAAK,CAAC,OAAO,GAAG,eAAe,EAAA;AACnC,QAAA,IAAI,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;YAAE;AAE5B,QAAA,MAAM,IAAI,CAAC,UAAU,EAAE;AACvB,QAAA,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;IACtC;;AAGA,IAAA,MAAM,KAAK,GAAA;QACT,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;IACpC;;AAGA,IAAA,MAAM,KAAK,GAAA;QACT,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;IACpC;;AAGA,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE;IACxC;;AAGA,IAAA,MAAM,KAAK,GAAA;QACT,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;IACpC;;AAGA,IAAA,MAAM,IAAI,GAAA;QACR,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE;IACnC;;AAGA,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;IACrD;;AAGA,IAAA,MAAM,aAAa,CAAC,OAAO,GAAG,eAAe,EAAA;QAC3C,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;YAAE;AAEvC,QAAA,MAAM,IAAI,KAAK,CACb,CAAA,wDAAA,EAA2D,OAAO,CAAA,4BAAA,CAA8B;YAC9F,iGAAiG;AACjG,YAAA,gEAAgE,CACnE;IACH;;AAGA,IAAA,MAAM,eAAe,CAAC,OAAO,GAAG,eAAe,EAAA;QAC7C,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC;YAAE;AAExC,QAAA,MAAM,IAAI,KAAK,CACb,CAAA,wDAAA,EAA2D,OAAO,CAAA,iCAAA,CAAmC;YACnG,+FAA+F;AAC/F,YAAA,uFAAuF,CAC1F;IACH;AAEA;;;;;AAKG;AACH,IAAA,MAAM,cAAc,GAAA;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE;IACpC;AAEA;;;;;;;;AAQG;AACH,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,YAAY,CAAC,MAAM,CAAC;IAClD;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC;IACxD;AAEA;;;;;;AAMG;AACH,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC,MAAM,MAAM;IAC3E;AAEA;;;;;;;;;;;;;;AAcG;AACH,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE;QACxE,MAAM,QAAQ,GAAG,2CAA2C,CAAC,IAAI,CAAC,OAAO,CAAC;AAC1E,QAAA,OAAO,QAAQ,GAAI,QAAQ,CAAC,CAAC,CAAuB,GAAG,IAAI;IAC7D;;AAGA,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC1D;AAEA;;;;;;;;AAQG;AACH,IAAA,MAAM,kBAAkB,GAAA;AACtB,QAAA,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,YAAY,CAAC,kBAAkB,CAAC;AACrE,QAAA,IAAI,CAAC,EAAE;AAAE,YAAA,OAAO,IAAI;AAEpB,QAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,CAAA,CAAA,EAAI,EAAE,CAAA,CAAE,CAAC,EAAE;AACxF,QAAA,OAAO,SAAS,GAAG,SAAS,CAAC,IAAI,EAAE,GAAG,IAAI;IAC5C;AAEA;;;;;;;AAOG;AACgB,IAAA,MAAM,oBAAoB,GAAA;AAC3C,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC,gBAAgB,CAAC,CAAA,CAAA,EAAI,MAAM,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC;IACvF;;AAGQ,IAAA,MAAM,OAAO,CAAC,IAAa,EAAE,OAAe,EAAA;AAClD,QAAA,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE;YAC3D,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI;AAAE,gBAAA,OAAO,IAAI;AAE/C,YAAA,MAAM,KAAK,CAAC,SAAS,CAAC;AACtB,YAAA,MAAM,IAAI,CAAC,cAAc,EAAE;QAC7B;AACA,QAAA,OAAO,KAAK;IACd;;AAGQ,IAAA,MAAM,KAAK,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC,UAAU,CAAC,CAAA,CAAA,EAAI,MAAM,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC,EAAE;IACnF;;AAGQ,IAAA,MAAM,OAAO,GAAA;AACnB,QAAA,MAAM,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,MAAM,SAAS,GAAG,eAAe,GAAG,kBAAkB;AAC7F,QAAA,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,YAAY,CAAC,SAAS,CAAC;QAE5D,IAAI,CAAC,EAAE,EAAE;AACP,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,4EAAA,EAA+E,SAAS,CAAA,MAAA,CAAQ;AAC9F,gBAAA,6FAA6F,CAChG;QACH;AACA,QAAA,OAAO,EAAE;IACX;;;ACxWF;;AAEG;;;;"}

package/fesm2022/ngwr-popover.mjs

@@ -15,21 +15,88 @@ import { numAttr } from 'ngwr/utils';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-/** @internal */
+/**
+ * The CDK geometry for each placement — one position, no fallbacks.
+ *
+ * The 8px offset is the gap between the trigger and the panel, and it is the
+ * reason a flip list matters rather than being a nicety: the flexible strategy
+ * emits `offsetX` as a `transform` on the pane, AFTER `withPush` has already
+ * decided the coordinate. Push therefore parks a right-anchored panel flush
+ * against the viewport edge and the offset then shoves it 8px back out, so a
+ * side placement that does not fit loses its border and corner off-screen no
+ * matter how hard push works. Flipping to a placement that fits is the only
+ * recovery, which is what `WR_POPOVER_FALLBACKS` is for.
+ *
+ * @internal
+ */
 const WR_POPOVER_POSITIONS = {
-    top: [{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 }],
-    'top-start': [{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 }],
-    'top-end': [{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 }],
-    bottom: [{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 }],
-    'bottom-start': [{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 }],
-    'bottom-end': [{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 }],
-    left: [{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 }],
-    'left-start': [{ originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 }],
-    'left-end': [{ originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -8 }],
-    right: [{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 }],
-    'right-start': [{ originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 }],
-    'right-end': [{ originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 }],
+    top: { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
+    'top-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },
+    'top-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+    bottom: { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
+    'bottom-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
+    'bottom-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+    left: { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
+    'left-start': { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
+    'left-end': { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -8 },
+    right: { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
+    'right-start': { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
+    'right-end': { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
+};
+/**
+ * What each placement is allowed to flip to when it does not fit, best first.
+ * The requested placement always leads, so a panel that fits never moves.
+ *
+ * Alignment is preserved down the whole chain — a `-start` popover stays
+ * `-start` — because the alignment is the author's answer to "which end of the
+ * trigger does this belong to", and a flip is about the side, not about that.
+ *
+ * The two axes are deliberately NOT symmetric. A block-axis placement (`top*` /
+ * `bottom*`) flips only to its opposite, the classic behaviour, so a dropdown-ish
+ * panel can never surprise anyone by appearing beside its trigger. An inline-axis
+ * one (`left*` / `right*`) also gets the two block-axis sides, because on a phone
+ * NEITHER side fits: at 375px a 233px panel beside a mid-page trigger overflows
+ * by 109px to the right and 97px to the left, and only below/above has room.
+ *
+ * @internal
+ */
+const WR_POPOVER_FALLBACKS = {
+    top: ['top', 'bottom'],
+    'top-start': ['top-start', 'bottom-start'],
+    'top-end': ['top-end', 'bottom-end'],
+    bottom: ['bottom', 'top'],
+    'bottom-start': ['bottom-start', 'top-start'],
+    'bottom-end': ['bottom-end', 'top-end'],
+    left: ['left', 'right', 'bottom', 'top'],
+    'left-start': ['left-start', 'right-start', 'bottom-start', 'top-start'],
+    'left-end': ['left-end', 'right-end', 'bottom-end', 'top-end'],
+    right: ['right', 'left', 'bottom', 'top'],
+    'right-start': ['right-start', 'left-start', 'bottom-start', 'top-start'],
+    'right-end': ['right-end', 'left-end', 'bottom-end', 'top-end'],
 };
+/**
+ * The list `withPositions()` wants, with every link tagged so the pane names the
+ * placement it ACTUALLY took rather than the one that was asked for.
+ *
+ * The tag is what keeps the arrow honest. It is drawn by
+ * `.wr-popover-overlay--<placement> > *::after`, so a panel that flipped while
+ * the class stayed put would point at a side it no longer sits on. CDK applies a
+ * position's own `panelClass` in `_applyPosition` and clears it again on the next
+ * one, which is exactly the bookkeeping this needs — hence the class rather than
+ * a `positionChanges` subscription.
+ *
+ * @param paneClass The pane's base class: `wr-popover-overlay` or
+ *   `wr-tooltip-overlay`. The two modes key their arrows off different
+ *   selectors, so the prefix cannot live in the table.
+ *
+ * @internal
+ */
+function wrPopoverPositions(position, paneClass) {
+    return WR_POPOVER_FALLBACKS[position].map(name => ({
+        ...WR_POPOVER_POSITIONS[name],
+        panelClass: `${paneClass}--${name}`,
+    }));
+}
 
 /**
  * @license
@@ -47,10 +114,10 @@ const WR_POPOVER_POSITIONS = {
 class WrPopoverTextPanel {
     text = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopoverTextPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrPopoverTextPanel, isStandalone: true, selector: "wr-popover-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wr-tooltip" }, ngImport: i0, template: '{{ text() }}', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopoverTextPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrPopoverTextPanel, isStandalone: true, selector: "wr-popover-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wr-tooltip" }, ngImport: i0, template: '{{ text() }}', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopoverTextPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopoverTextPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-popover-text',
@@ -169,6 +236,7 @@ class WrPopover {
     resolvedPosition = computed(() => this.position() ?? (this.isTooltip() ? 'top' : 'bottom'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []));
     overlayRef = null;
+    textPanelRef = null;
     hoverCloseTimer = null;
     showTimer = null;
     hideTimer = null;
@@ -181,6 +249,16 @@ class WrPopover {
                 this.closeOverlay();
             }
         });
+        // The tooltip string is pushed into the panel when the panel is created, and
+        // `openOverlay()` returns early while one is already up — so a `content()`
+        // change with the tooltip on screen never reached it and the label stayed on
+        // the string it opened with (hover a Copy button, click it, it still reads
+        // "Copy"). Keeping the ref and pushing from an effect is how `wr-date-picker`
+        // feeds its own panel refs.
+        effect(() => {
+            const content = this.content();
+            this.textPanelRef?.setInput('text', typeof content === 'string' ? content : '');
+        });
         this.destroyRef.onDestroy(() => {
             this.clearTimers();
             this.closeOverlay();
@@ -216,13 +294,19 @@ class WrPopover {
     }
     /** @internal */
     onMouseLeave(event) {
+        const related = event.relatedTarget;
         if (this.isTooltip()) {
+            // Crossing straight from the trigger onto the panel does not even arm the
+            // hide, the same bail-out the popover arm below has had. The panel's own
+            // `mouseenter` would cancel it a moment later anyway; not arming it is
+            // what removes the race.
+            if (related && this.overlayRef?.overlayElement.contains(related))
+                return;
             this.scheduleHide();
             return;
         }
         if (this.trigger() !== 'hover')
             return;
-        const related = event.relatedTarget;
         if (related && this.overlayRef?.overlayElement.contains(related))
             return;
         // Delay so the pointer can cross the gap between trigger and panel —
@@ -284,18 +368,19 @@ class WrPopover {
         // never dock to the bottom. On small viewports (when opted in) detach
         // from the trigger and slide the panel up from the bottom edge.
         const asSheet = !tooltip && wrPresentAsSheet(this.responsive(), this.responsiveConfig);
+        const paneClass = tooltip ? 'wr-tooltip-overlay' : 'wr-popover-overlay';
         const positionStrategy = asSheet
             ? this.overlay.position().global().centerHorizontally().bottom('0')
             : this.overlay
                 .position()
                 .flexibleConnectedTo(this.host)
-                .withPositions(wrMirrorOffsets(WR_POPOVER_POSITIONS[position], this.isRtl()))
+                .withPositions(wrMirrorOffsets(wrPopoverPositions(position, paneClass), this.isRtl()))
                 .withPush(true);
-        const overlayClass = tooltip
-            ? ['wr-tooltip-overlay', `wr-tooltip-overlay--${position}`]
-            : asSheet
-                ? ['wr-popover-overlay', 'wr-overlay-sheet']
-                : ['wr-popover-overlay', `wr-popover-overlay--${position}`];
+        // The `--<placement>` half is no longer set here: each fallback position
+        // carries its own, so the pane names the placement it landed on instead of
+        // the one that was requested, and the arrow follows a flip. A sheet has no
+        // anchor and so no placement class at all.
+        const overlayClass = asSheet ? [paneClass, 'wr-overlay-sheet'] : [paneClass];
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: asSheet ? this.scrollStrategies.block() : this.scrollStrategies.reposition(),
@@ -317,6 +402,7 @@ class WrPopover {
             const text = typeof content === 'string' ? content : '';
             const ref = this.overlayRef.attach(new ComponentPortal(WrPopoverTextPanel, this.vcr));
             ref.setInput('text', text);
+            this.textPanelRef = ref;
             // The pane is the element `aria-describedby` points at (it carries
             // `panelId`), so this is the role that has to be `tooltip` — the inner
             // `wr-popover-text` host deliberately carries none, or the description
@@ -324,16 +410,37 @@ class WrPopover {
             this.overlayRef.overlayElement.setAttribute('role', 'tooltip');
         }
         else if (typeof content !== 'string') {
-            this.overlayRef.attach(new TemplatePortal(content, this.vcr));
+            const view = this.overlayRef.attach(new TemplatePortal(content, this.vcr));
+            const pane = this.overlayRef.overlayElement;
             // Popover mode is a non-modal dialog: the docstring promised dialog
             // semantics but nothing ever set a role, so a screen reader met an
             // unnamed generic container. `aria-modal="false"` is explicit — focus is
             // deliberately NOT trapped, the panel closes on outside click / Escape.
-            this.overlayRef.overlayElement.setAttribute('role', 'dialog');
-            this.overlayRef.overlayElement.setAttribute('aria-modal', 'false');
+            pane.setAttribute('role', 'dialog');
+            pane.setAttribute('aria-modal', 'false');
             // A named dialog: `role="dialog"` with no name announces as a bare
             // "dialog" and trips axe's `aria-dialog-name`.
-            this.overlayRef.overlayElement.setAttribute('aria-label', this.resolvedAriaLabel());
+            pane.setAttribute('aria-label', this.resolvedAriaLabel());
+            if (this.trigger() === 'click') {
+                // Render the projected content before focus moves, the way
+                // `wr-popconfirm` does — a reader announcing the dialog reads what is in
+                // it, and on an empty pane that is nothing.
+                view.detectChanges();
+                // Focus has to ENTER the panel. The overlay container sits at the end of
+                // `<body>`, so Tab from the trigger went to the next control on the page
+                // and left the dialog stranded behind it (WCAG F85). The pane takes it
+                // rather than the first control inside: a popover's content is
+                // arbitrary, and landing on a text field would raise the on-screen
+                // keyboard and skip whatever the panel says above it. Tab from the pane
+                // reaches that first control anyway, since the pane precedes its own
+                // content in document order.
+                //
+                // Click-triggered only — a hover popover must not pull the caret out of
+                // what the user is typing in, and `scheduleHoverClose()` would then
+                // dispose the pane out from under the focused element.
+                pane.tabIndex = -1;
+                pane.focus();
+            }
         }
         this.overlayRef.overlayElement.id = this.panelId;
         this.outsideClick
@@ -353,7 +460,10 @@ class WrPopover {
                 this.isOpen.set(false);
             }
         });
-        if (!tooltip && this.trigger() === 'hover') {
+        // Both hover shapes keep the panel up while the pointer is on it: for a
+        // popover so the pointer can cross the gap, for a tooltip because WCAG
+        // 1.4.13 requires it (Hoverable).
+        if (tooltip || this.trigger() === 'hover') {
             this.overlayRef.overlayElement.addEventListener('mouseenter', this.onOverlayEnter);
             this.overlayRef.overlayElement.addEventListener('mouseleave', this.onOverlayLeave);
         }
@@ -362,7 +472,7 @@ class WrPopover {
     closeOverlay() {
         if (!this.overlayRef)
             return;
-        if (!this.isTooltip() && this.trigger() === 'hover') {
+        if (this.isTooltip() || this.trigger() === 'hover') {
             this.overlayRef.overlayElement.removeEventListener('mouseenter', this.onOverlayEnter);
             this.overlayRef.overlayElement.removeEventListener('mouseleave', this.onOverlayLeave);
         }
@@ -381,6 +491,8 @@ class WrPopover {
         const focusWasInside = pane.contains(this.host.nativeElement.ownerDocument.activeElement);
         this.overlayRef.dispose();
         this.overlayRef = null;
+        // Disposing destroys the panel component; a retained ref would pin its view.
+        this.textPanelRef = null;
         if (focusWasInside)
             this.host.nativeElement.focus();
         this.closed.emit();
@@ -389,9 +501,19 @@ class WrPopover {
         const related = event.relatedTarget;
         if (related && this.host.nativeElement.contains(related))
             return;
-        this.scheduleHoverClose();
+        // A tooltip leaves on its own `hideDelay`, the same one the trigger uses; a
+        // hover popover has the longer grace period for crossing the gap back.
+        if (this.isTooltip())
+            this.scheduleHide();
+        else
+            this.scheduleHoverClose();
     };
     onOverlayEnter = () => {
+        // Two different timers can be in flight: `hideTimer`, armed by the trigger's
+        // own `mouseleave` in tooltip mode, and `hoverCloseTimer` in popover mode.
+        // Cancelling only the second would leave a tooltip disappearing `hideDelay`
+        // after the pointer arrived on it.
+        this.clearTimers();
         this.clearHoverClose();
     };
     scheduleHoverClose() {
@@ -414,10 +536,10 @@ class WrPopover {
     isRtl() {
         return this.dir?.value === 'rtl';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrPopover, isStandalone: true, selector: "[wrPopover]", inputs: { content: { classPropertyName: "content", publicName: "wrPopover", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown.escape": "onEscape()" }, properties: { "attr.aria-haspopup": "isTooltip() ? null : \"dialog\"", "attr.aria-expanded": "isTooltip() ? null : isOpen()", "attr.aria-controls": "!isTooltip() && isOpen() ? panelId : null", "attr.aria-describedby": "isTooltip() && isOpen() ? panelId : null" }, classAttribute: "wr-popover-trigger" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: WrPopover, isStandalone: true, selector: "[wrPopover]", inputs: { content: { classPropertyName: "content", publicName: "wrPopover", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown.escape": "onEscape()" }, properties: { "attr.aria-haspopup": "isTooltip() ? null : \"dialog\"", "attr.aria-expanded": "isTooltip() ? null : isOpen()", "attr.aria-controls": "!isTooltip() && isOpen() ? panelId : null", "attr.aria-describedby": "isTooltip() && isOpen() ? panelId : null" }, classAttribute: "wr-popover-trigger" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrPopover, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrPopover]',