ngwr 11.1.0 → 12.0.0

package/event-calendar/styles/_index.scss

@@ -12,7 +12,7 @@
   // The house fill for a header strip — `wr-table` and `wr-transfer` use the
   // same one. NOT `--wr-color-light`, which is an intent colour: it composites
   // dark enough that `--wr-color-on-surface-muted` on top of it lands at 3.6:1.
-  --wr-event-calendar-fill: rgba(var(--wr-color-outline-rgb), 0.25);
+  --wr-event-calendar-fill: var(--wr-color-fill);
   --wr-event-calendar-cols: 7;
 
   display: flex;
@@ -38,6 +38,17 @@
     height: 1em;
   }
 
+  // `__nav` is a plain flex row, so it already mirrors: under `dir="rtl"` the
+  // prev button lays out at the right edge. Its chevron is drawn pointing
+  // physically left, though, so it ends up aiming at the period it moves AWAY
+  // from. Turn the glyphs around with the row, the same way the pagination and
+  // carousel arrows do — "previous" is the inline start in both directions.
+  // Scoped to `__step`, the two icon-only buttons: `__today` sits between them
+  // and is text, which must not mirror.
+  [dir='rtl'] &__step .wr-icon__svg {
+    transform: scaleX(-1);
+  }
+
   &__title {
     flex: 1 1 auto;
     margin: 0;
@@ -115,7 +126,7 @@
 
     &:focus-visible {
       z-index: 2;
-      outline: 2px solid var(--wr-color-primary);
+      outline: var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);
       outline-offset: -2px;
     }
 
@@ -190,7 +201,7 @@
 
     &:focus-visible {
       z-index: 3;
-      outline: 2px solid var(--wr-color-primary);
+      outline: var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);
       outline-offset: 1px;
     }
 
@@ -209,9 +220,20 @@
 
     &--time {
       padding: 0.125rem 0.25rem;
-      flex-direction: column;
-      gap: 0;
-      align-items: stretch;
+      // The clock and the title share a line while there is room for both and
+      // the title drops below it when there is not. `flex-direction: column`
+      // dropped it unconditionally, and a timed chip's height is a PERCENTAGE
+      // of its slot — a 15-minute event in a 30-minute grid is 12px against a
+      // 14.4px line box, so the clock came out sliced through the digits and
+      // the title rendered at 0px. Wrapping keeps a one-slot chip to a single
+      // readable line; `min-height` floors the box at that line plus its
+      // padding, so a short event overlaps the slot below rather than showing
+      // half a glyph. `align-content` keeps the lines packed at the top — a
+      // tall chip would otherwise spread them down its whole height.
+      flex-wrap: wrap;
+      align-content: flex-start;
+      row-gap: 0;
+      min-height: 1.25rem;
       white-space: normal;
     }
 
@@ -237,7 +259,20 @@
 
     &-time {
       font-weight: var(--wr-font-weight-medium);
-      color: var(--wr-color-on-surface-muted);
+      // `--time` turns wrapping back on for the sake of the title; the clock
+      // must not follow it. In a week column ~55px wide "09:30 AM" broke over
+      // two lines and asked the chip for 28.8px of height — twice what a
+      // one-slot event has — so the label was clipped through its own digits.
+      white-space: nowrap;
+      // The muted role is calibrated against the plain surface, and the chip
+      // puts an 18% wash of the event colour under it (line ~192) — which spent
+      // the whole margin: 4.18–4.28:1 across the shipped demo colours, under AA
+      // in LIGHT for every one of them. Mixing toward the page's own ink is the
+      // `-ink` recipe: `--wr-color-on-surface` flips per theme, so one
+      // declaration darkens on a light tint and lightens on a dark one. 85% is
+      // the most muted share that still reaches 5.0:1 on the deepest tint the
+      // demos paint (5.08 on #d1ead1); dark was already clear and only gains.
+      color: color-mix(in srgb, var(--wr-color-on-surface-muted) 85%, var(--wr-color-on-surface));
     }
 
     &-title {
@@ -254,10 +289,21 @@
     cursor: ns-resize;
   }
 
+  // The one thing in a day cell that is NOT absolutely positioned, and it has
+  // to stay that way. Its lane is `maxLanes` — one past the last chip — so
+  // absolute put it at 1.75rem + 3 x 1.375rem = 5.875rem inside a cell whose
+  // floor is 5.5rem: the entire button landed in the following week's row,
+  // which comes later in the DOM and (correctly, per the `__cell` note above)
+  // has no z-index to lose to it, so it swallowed every click. A block box in
+  // flow lands on exactly the same 5.875rem — the day-number line box is
+  // precisely the 1.75rem the chips offset by, so only the lanes have to be
+  // skipped — and makes the cell GROW to hold it instead. `min-height` on the
+  // cell is a floor, not a size; the row stretches its siblings to match.
   &__more {
-    position: absolute;
-    inset-inline-start: 0.125rem;
-    top: calc(1.75rem + var(--wr-event-calendar-lane) * (var(--wr-event-calendar-band-height) + 0.125rem));
+    display: block;
+    width: fit-content;
+    margin-top: calc(var(--wr-event-calendar-lane) * (var(--wr-event-calendar-band-height) + 0.125rem));
+    margin-inline-start: 0.125rem;
     padding: 0 0.375rem;
     font: inherit;
     font-size: var(--wr-text-xs);
@@ -275,6 +321,17 @@
 
   &--editable &__chip {
     cursor: grab;
+    // Own the drag gesture — without this a coarse pointer hands the press to
+    // the browser as a pan, which fires `pointercancel` before any `pointerup`,
+    // and the host's cancel binding drops the drag: a chip could not be moved
+    // with a finger at all. Arbitration intersects `touch-action` up the
+    // ancestors, so nested `__resize` is covered by the same rule (its 0.375rem
+    // height is a separate question). The cost is that a finger-scroll STARTING
+    // on a chip no longer scrolls, on an editable calendar only — the trade
+    // `wr-splitter`'s gutter already makes. `pan-y` is no softer fallback here:
+    // vertical is the axis a week/day move travels, and the only one a resize
+    // has.
+    touch-action: none;
   }
 
   &--dragging {

package/fesm2022/ngwr-action-sheet-testing.mjs

@@ -0,0 +1,313 @@
+import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * 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
+ */
+/**
+ * Test harness for one row inside a {@link WrActionSheetHarness}.
+ *
+ * A row is a real `<button>`, not an ARIA-decorated div, so `disabled` is the
+ * property rather than an attribute and the CDK refuses to click it — which is the
+ * behaviour a spec wants asserted, since the component ALSO checks `disabled`
+ * inside its own handler. Either guard alone would keep a disabled row inert; both
+ * being there means removing one is invisible until the other is removed too, and
+ * {@link click} is where that shows up.
+ *
+ * **Clicking a row closes the sheet.** The component emits `action` and clears
+ * `open` in the same call, so a harness held across a {@link click} is pointed at a
+ * detached element the moment it returns — read what you need first, and get a
+ * fresh harness afterwards if the sheet was reopened.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrActionSheetActionHarness extends ComponentHarness {
+    /** The class every row carries, cancel rows included. */
+    static hostSelector = '.wr-action-sheet__action';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrActionSheetActionHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))
+            .addOption('role', options.role, async (harness, role) => (await harness.getRole()) === role)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+    }
+    /**
+     * The row's label, trimmed.
+     *
+     * Read from `.wr-action-sheet__label` rather than from the button, so a leading
+     * icon can never join it. The icon contributes no text today — it is an `<svg>` —
+     * but an icon set that ships a `<title>` for its own accessibility would, and the
+     * label element is the thing that actually holds the string.
+     */
+    async getLabel() {
+        return (await this.locatorFor('.wr-action-sheet__label')()).text();
+    }
+    /**
+     * The row's visual role, as the component painted it.
+     *
+     * `default` is returned for a row the caller left unroled, which is what the
+     * component does with the value: only `destructive` and `cancel` change anything,
+     * and everything else falls through to the plain row. The two modifiers are
+     * mutually exclusive by construction — `cancel` rows are filtered into their own
+     * group before the destructive class is ever considered — so reading them in
+     * either order gives the same answer.
+     */
+    async getRole() {
+        const host = await this.host();
+        if (await host.hasClass('wr-action-sheet__action--cancel'))
+            return 'cancel';
+        if (await host.hasClass('wr-action-sheet__action--destructive'))
+            return 'destructive';
+        return 'default';
+    }
+    /**
+     * Whether the row refuses interaction, from the button's own `disabled` property
+     * — the thing the CDK consults before dispatching a click, and the DOM before
+     * delivering one.
+     *
+     * There is no `aria-disabled` to fall back to here, and none is wanted: the row is
+     * a native button, where the property already carries the state to assistive tech.
+     */
+    async isDisabled() {
+        return (await this.host()).getProperty('disabled');
+    }
+    /** Whether the row draws a leading icon. */
+    async hasIcon() {
+        return (await this.locatorForOptional('.wr-action-sheet__icon')()) !== null;
+    }
+    /**
+     * The icon's registered name, or `null` on a row without one.
+     *
+     * From `wr-icon`'s reflected `data-icon`, which is the only place the name reaches
+     * the DOM — the rendered `<svg>` carries no trace of which entry of the set it
+     * came from.
+     */
+    async getIconName() {
+        const icon = await this.locatorForOptional('.wr-action-sheet__icon')();
+        return icon ? icon.getAttribute('data-icon') : null;
+    }
+    /**
+     * Pick this row — emitting `action` and closing the sheet.
+     *
+     * Throws on a disabled row instead of quietly doing nothing. The click would not
+     * land anyway (the DOM swallows it), so the alternative is a spec that reads as
+     * "picked the row" and asserts a sheet that never moved.
+     */
+    async click() {
+        if (await this.isDisabled()) {
+            throw new Error(`WrActionSheetActionHarness.click(): "${await this.getLabel()}" is disabled. The DOM swallows a click ` +
+                'on a disabled button and the component checks `disabled` again before emitting, so nothing would ' +
+                'happen — assert isDisabled() instead.');
+        }
+        await (await this.host()).click();
+    }
+    /** Move keyboard focus to the row. */
+    async focus() {
+        return (await this.host()).focus();
+    }
+    /** Whether the row currently holds focus. */
+    async isFocused() {
+        return (await this.host()).isFocused();
+    }
+}
+
+/**
+ * @license
+ *
+ * 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
+ */
+/**
+ * One `.wr-action-sheet__group` — internal, and the only way to read the rows of ONE
+ * group: a `TestElement` cannot be queried into, so scoping to a child element means
+ * a harness anchored on it.
+ */
+class GroupHarness extends ComponentHarness {
+    static hostSelector = '.wr-action-sheet__group';
+    async getLabels() {
+        const labels = await this.locatorForAll('.wr-action-sheet__label')();
+        return Promise.all(labels.map(label => label.text()));
+    }
+}
+/**
+ * Test harness for an open `<wr-action-sheet>` — the iOS-style bottom sheet of
+ * choices.
+ *
+ * The sheet renders through `<wr-drawer>`, so its rows are in the NGWR overlay
+ * container rather than in the fixture: load this from
+ * `TestbedHarnessEnvironment.documentRootLoader()`. A fixture-scoped loader finds
+ * nothing at all — the `<wr-action-sheet>` host element itself holds no content and
+ * the drawer it wraps is `display: none`.
+ *
+ * The anchor is `.wr-action-sheet`, the sheet's own root inside the drawer panel,
+ * which makes each instance self-scoping: two sheets open at once are two hosts, and
+ * every query here descends from one of them. That is worth stating because it is
+ * NOT how the drawer harness underneath has to work — a drawer publishes no link to
+ * the overlay it opened, so `WrDrawerHarness` anchors on the shared pane and scopes
+ * by id.
+ *
+ * **What belongs to the drawer, not here.** Dismissal by backdrop click or by the ✕
+ * button, the modal role, the focus trap and the panel's position are all the
+ * drawer's surface, and `WrDrawerHarness` from the same root loader answers them.
+ * {@link sendEscape} is the one exception, kept because dismissing without choosing
+ * is a documented behaviour of the sheet itself: it closes and emits NOTHING, which
+ * is the assertion most specs are actually after.
+ *
+ * @example
+ * ```ts
+ * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+ * const sheet = await rootLoader.getHarness(WrActionSheetHarness);
+ *
+ * expect(await sheet.getActionLabels()).toEqual(['Take Photo', 'Delete', 'Cancel']);
+ * await sheet.select({ label: 'Delete' });
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrActionSheetHarness extends ComponentHarness {
+    /** The sheet's root inside the drawer panel. A closed sheet renders none. */
+    static hostSelector = '.wr-action-sheet';
+    /** Build a predicate that narrows the query — sheets can be stacked. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrActionSheetHarness, options)
+            .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title))
+            .addOption('message', options.message, (harness, message) => HarnessPredicate.stringMatches(harness.getMessage(), message))
+            .addOption('accessibleName', options.accessibleName, (harness, name) => HarnessPredicate.stringMatches(harness.getAccessibleName(), name));
+    }
+    /**
+     * Whether this sheet is still open.
+     *
+     * A harness can only be obtained while the sheet is open — closing disposes the
+     * overlay and everything in it — so this is the answer for a harness you are
+     * already HOLDING: it flips to `false` after a pick or a dismissal, where a fresh
+     * `getHarnessOrNull()` comes back `null`.
+     *
+     * Attachment is the test rather than a class, because disposal removes the element
+     * without changing anything on it.
+     */
+    async isOpen() {
+        return (await this.host()).matchesSelector('body .wr-action-sheet');
+    }
+    /** The visible heading, or `null` when the sheet was opened without a `title`. */
+    async getTitle() {
+        const title = await this.locatorForOptional('.wr-action-sheet__title')();
+        return title ? title.text() : null;
+    }
+    /** The muted sub-heading, or `null` when the sheet has no `message`. */
+    async getMessage() {
+        const message = await this.locatorForOptional('.wr-action-sheet__message')();
+        return message ? message.text() : null;
+    }
+    /**
+     * The name the dialog announces.
+     *
+     * The sheet always publishes one, and for an untitled sheet it is INVISIBLE: the
+     * component renders a screen-reader-only `[wrDrawerTitle]` carrying
+     * `actionSheet.label` (English default `Actions`), because a bottom sheet is an
+     * `aria-modal` dialog and an unnamed one is announced as nothing at all. Nothing
+     * on screen changes when that string is wrong or missing, which is exactly why it
+     * is worth an assertion.
+     *
+     * Read from `.wr-drawer__title` — the class the title directive applies — so the
+     * one query answers for both shapes: the visible heading carries it too.
+     */
+    async getAccessibleName() {
+        return (await this.locatorFor('.wr-drawer__title')()).text();
+    }
+    /** Whether the announced name comes from a visible heading rather than the fallback. */
+    async isTitleVisible() {
+        return (await this.locatorForOptional('.wr-action-sheet__title')()) !== null;
+    }
+    /**
+     * Whether the dialog is actually WIRED to that name — the drawer panel's
+     * `aria-labelledby` resolving to this sheet's own title element, and to nothing
+     * else on the page.
+     *
+     * {@link getAccessibleName} only proves a string exists in the markup; a screen
+     * reader reads it only if the reference points at it. The two are separate
+     * failures and the second is silent: the title renders, the sheet looks right, and
+     * the dialog is announced as unnamed. Worth its own assertion because the drawer
+     * resolves the reference AFTER attaching the panel rather than while rendering it,
+     * so a title that arrives late is named late or not at all.
+     *
+     * Counted across the document as well, because two panels answering to one id hand
+     * every reference to whichever comes first — which is how a second sheet ends up
+     * announcing the first one's title.
+     */
+    async isNamed() {
+        const id = await (await this.locatorFor('.wr-drawer__title')()).getAttribute('id');
+        if (!id)
+            return false;
+        const root = this.documentRootLocatorFactory();
+        const named = await root.locatorForAll(`[aria-labelledby="${id}"]`)();
+        const titles = await root.locatorForAll(`[id="${id}"]`)();
+        return named.length === 1 && titles.length === 1;
+    }
+    /** The rows this sheet offers, in DOM order — cancel rows last, in their own group. */
+    async getActions(filters = {}) {
+        return this.locatorForAll(WrActionSheetActionHarness.with(filters))();
+    }
+    /** The labels of every row, in DOM order. */
+    async getActionLabels() {
+        const actions = await this.getActions();
+        return Promise.all(actions.map(action => action.getLabel()));
+    }
+    /**
+     * The labels grouped the way the sheet lays them out: the main group first, then
+     * the cancel group when there is one.
+     *
+     * The grouping is the component's whole visual contract — a `cancel` row is pulled
+     * out of the list and pinned to the bottom with a gap above it — and it is
+     * invisible to {@link getActionLabels}, which flattens the two. A cancel row that
+     * stopped being separated would still come last in DOM order, so the flat list
+     * cannot catch it.
+     */
+    async getActionGroups() {
+        const groups = await this.locatorForAll(GroupHarness)();
+        return Promise.all(groups.map(group => group.getLabels()));
+    }
+    /**
+     * Whether the sheet drew a separate bottom group — true exactly when at least one
+     * row was given `role: 'cancel'`, since the component omits the group entirely
+     * rather than rendering an empty one.
+     */
+    async hasCancelGroup() {
+        return (await this.locatorForOptional('.wr-action-sheet__group--cancel')()) !== null;
+    }
+    /**
+     * Pick the first row matching the filters.
+     *
+     * Throws when nothing matches, naming what the sheet does offer — the alternative
+     * is a silent no-op followed by an assertion about a sheet that never moved. A
+     * disabled match throws too, from the row harness.
+     */
+    async select(filters) {
+        const [action] = await this.getActions(filters);
+        if (!action) {
+            const offered = await this.getActionLabels();
+            throw new Error(`WrActionSheetHarness.select(): no row matched ${JSON.stringify(filters)}. ` +
+                `The sheet offers: ${offered.join(', ')}.`);
+        }
+        await action.click();
+    }
+    /**
+     * Press Escape — dismissing the sheet WITHOUT emitting `action`.
+     *
+     * The key never needs to reach the sheet itself: the drawer underneath listens
+     * through the CDK's keyboard dispatcher, which keeps one document listener and
+     * hands the event to the top-most overlay. So with sheets stacked this dismisses
+     * the top one whichever harness it is called on.
+     */
+    async sendEscape() {
+        await (await this.host()).sendKeys(TestKey.ESCAPE);
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrActionSheetActionHarness, WrActionSheetHarness };
+//# sourceMappingURL=ngwr-action-sheet-testing.mjs.map

package/fesm2022/ngwr-action-sheet-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-action-sheet-testing.mjs","sources":["../../../projects/lib/action-sheet/testing/wr-action-sheet-action-harness.ts","../../../projects/lib/action-sheet/testing/wr-action-sheet-harness.ts","../../../projects/lib/action-sheet/testing/ngwr-action-sheet-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 { WrActionSheetAction } from 'ngwr/action-sheet';\n\nimport type { WrActionSheetActionHarnessFilters } from './interfaces';\n\n/**\n * Test harness for one row inside a {@link WrActionSheetHarness}.\n *\n * A row is a real `<button>`, not an ARIA-decorated div, so `disabled` is the\n * property rather than an attribute and the CDK refuses to click it — which is the\n * behaviour a spec wants asserted, since the component ALSO checks `disabled`\n * inside its own handler. Either guard alone would keep a disabled row inert; both\n * being there means removing one is invisible until the other is removed too, and\n * {@link click} is where that shows up.\n *\n * **Clicking a row closes the sheet.** The component emits `action` and clears\n * `open` in the same call, so a harness held across a {@link click} is pointed at a\n * detached element the moment it returns — read what you need first, and get a\n * fresh harness afterwards if the sheet was reopened.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrActionSheetActionHarness extends ComponentHarness {\n  /** The class every row carries, cancel rows included. */\n  static hostSelector = '.wr-action-sheet__action';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrActionSheetActionHarnessFilters = {}): HarnessPredicate<WrActionSheetActionHarness> {\n    return new HarnessPredicate(WrActionSheetActionHarness, options)\n      .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))\n      .addOption('role', options.role, async (harness, role) => (await harness.getRole()) === role)\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  /**\n   * The row's label, trimmed.\n   *\n   * Read from `.wr-action-sheet__label` rather than from the button, so a leading\n   * icon can never join it. The icon contributes no text today — it is an `<svg>` —\n   * but an icon set that ships a `<title>` for its own accessibility would, and the\n   * label element is the thing that actually holds the string.\n   */\n  async getLabel(): Promise<string> {\n    return (await this.locatorFor('.wr-action-sheet__label')()).text();\n  }\n\n  /**\n   * The row's visual role, as the component painted it.\n   *\n   * `default` is returned for a row the caller left unroled, which is what the\n   * component does with the value: only `destructive` and `cancel` change anything,\n   * and everything else falls through to the plain row. The two modifiers are\n   * mutually exclusive by construction — `cancel` rows are filtered into their own\n   * group before the destructive class is ever considered — so reading them in\n   * either order gives the same answer.\n   */\n  async getRole(): Promise<NonNullable<WrActionSheetAction['role']>> {\n    const host = await this.host();\n    if (await host.hasClass('wr-action-sheet__action--cancel')) return 'cancel';\n    if (await host.hasClass('wr-action-sheet__action--destructive')) return 'destructive';\n    return 'default';\n  }\n\n  /**\n   * Whether the row refuses interaction, from the button's own `disabled` property\n   * — the thing the CDK consults before dispatching a click, and the DOM before\n   * delivering one.\n   *\n   * There is no `aria-disabled` to fall back to here, and none is wanted: the row is\n   * a native button, where the property already carries the state to assistive tech.\n   */\n  async isDisabled(): Promise<boolean> {\n    return (await this.host()).getProperty<boolean>('disabled');\n  }\n\n  /** Whether the row draws a leading icon. */\n  async hasIcon(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-action-sheet__icon')()) !== null;\n  }\n\n  /**\n   * The icon's registered name, or `null` on a row without one.\n   *\n   * From `wr-icon`'s reflected `data-icon`, which is the only place the name reaches\n   * the DOM — the rendered `<svg>` carries no trace of which entry of the set it\n   * came from.\n   */\n  async getIconName(): Promise<string | null> {\n    const icon = await this.locatorForOptional('.wr-action-sheet__icon')();\n    return icon ? icon.getAttribute('data-icon') : null;\n  }\n\n  /**\n   * Pick this row — emitting `action` and closing the sheet.\n   *\n   * Throws on a disabled row instead of quietly doing nothing. The click would not\n   * land anyway (the DOM swallows it), so the alternative is a spec that reads as\n   * \"picked the row\" and asserts a sheet that never moved.\n   */\n  async click(): Promise<void> {\n    if (await this.isDisabled()) {\n      throw new Error(\n        `WrActionSheetActionHarness.click(): \"${await this.getLabel()}\" is disabled. The DOM swallows a click ` +\n          'on a disabled button and the component checks `disabled` again before emitting, so nothing would ' +\n          'happen — assert isDisabled() instead.'\n      );\n    }\n    await (await this.host()).click();\n  }\n\n  /** Move keyboard focus to the row. */\n  async focus(): Promise<void> {\n    return (await this.host()).focus();\n  }\n\n  /** Whether the row currently holds focus. */\n  async isFocused(): Promise<boolean> {\n    return (await this.host()).isFocused();\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';\n\nimport type { WrActionSheetActionHarnessFilters, WrActionSheetHarnessFilters } from './interfaces';\nimport { WrActionSheetActionHarness } from './wr-action-sheet-action-harness';\n\n/**\n * One `.wr-action-sheet__group` — internal, and the only way to read the rows of ONE\n * group: a `TestElement` cannot be queried into, so scoping to a child element means\n * a harness anchored on it.\n */\nclass GroupHarness extends ComponentHarness {\n  static hostSelector = '.wr-action-sheet__group';\n\n  async getLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-action-sheet__label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n}\n\n/**\n * Test harness for an open `<wr-action-sheet>` — the iOS-style bottom sheet of\n * choices.\n *\n * The sheet renders through `<wr-drawer>`, so its rows are in the NGWR overlay\n * container rather than in the fixture: load this from\n * `TestbedHarnessEnvironment.documentRootLoader()`. A fixture-scoped loader finds\n * nothing at all — the `<wr-action-sheet>` host element itself holds no content and\n * the drawer it wraps is `display: none`.\n *\n * The anchor is `.wr-action-sheet`, the sheet's own root inside the drawer panel,\n * which makes each instance self-scoping: two sheets open at once are two hosts, and\n * every query here descends from one of them. That is worth stating because it is\n * NOT how the drawer harness underneath has to work — a drawer publishes no link to\n * the overlay it opened, so `WrDrawerHarness` anchors on the shared pane and scopes\n * by id.\n *\n * **What belongs to the drawer, not here.** Dismissal by backdrop click or by the ✕\n * button, the modal role, the focus trap and the panel's position are all the\n * drawer's surface, and `WrDrawerHarness` from the same root loader answers them.\n * {@link sendEscape} is the one exception, kept because dismissing without choosing\n * is a documented behaviour of the sheet itself: it closes and emits NOTHING, which\n * is the assertion most specs are actually after.\n *\n * @example\n * ```ts\n * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n * const sheet = await rootLoader.getHarness(WrActionSheetHarness);\n *\n * expect(await sheet.getActionLabels()).toEqual(['Take Photo', 'Delete', 'Cancel']);\n * await sheet.select({ label: 'Delete' });\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrActionSheetHarness extends ComponentHarness {\n  /** The sheet's root inside the drawer panel. A closed sheet renders none. */\n  static hostSelector = '.wr-action-sheet';\n\n  /** Build a predicate that narrows the query — sheets can be stacked. */\n  static with(options: WrActionSheetHarnessFilters = {}): HarnessPredicate<WrActionSheetHarness> {\n    return new HarnessPredicate(WrActionSheetHarness, options)\n      .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title))\n      .addOption('message', options.message, (harness, message) =>\n        HarnessPredicate.stringMatches(harness.getMessage(), message)\n      )\n      .addOption('accessibleName', options.accessibleName, (harness, name) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), name)\n      );\n  }\n\n  /**\n   * Whether this sheet is still open.\n   *\n   * A harness can only be obtained while the sheet is open — closing disposes the\n   * overlay and everything in it — so this is the answer for a harness you are\n   * already HOLDING: it flips to `false` after a pick or a dismissal, where a fresh\n   * `getHarnessOrNull()` comes back `null`.\n   *\n   * Attachment is the test rather than a class, because disposal removes the element\n   * without changing anything on it.\n   */\n  async isOpen(): Promise<boolean> {\n    return (await this.host()).matchesSelector('body .wr-action-sheet');\n  }\n\n  /** The visible heading, or `null` when the sheet was opened without a `title`. */\n  async getTitle(): Promise<string | null> {\n    const title = await this.locatorForOptional('.wr-action-sheet__title')();\n    return title ? title.text() : null;\n  }\n\n  /** The muted sub-heading, or `null` when the sheet has no `message`. */\n  async getMessage(): Promise<string | null> {\n    const message = await this.locatorForOptional('.wr-action-sheet__message')();\n    return message ? message.text() : null;\n  }\n\n  /**\n   * The name the dialog announces.\n   *\n   * The sheet always publishes one, and for an untitled sheet it is INVISIBLE: the\n   * component renders a screen-reader-only `[wrDrawerTitle]` carrying\n   * `actionSheet.label` (English default `Actions`), because a bottom sheet is an\n   * `aria-modal` dialog and an unnamed one is announced as nothing at all. Nothing\n   * on screen changes when that string is wrong or missing, which is exactly why it\n   * is worth an assertion.\n   *\n   * Read from `.wr-drawer__title` — the class the title directive applies — so the\n   * one query answers for both shapes: the visible heading carries it too.\n   */\n  async getAccessibleName(): Promise<string> {\n    return (await this.locatorFor('.wr-drawer__title')()).text();\n  }\n\n  /** Whether the announced name comes from a visible heading rather than the fallback. */\n  async isTitleVisible(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-action-sheet__title')()) !== null;\n  }\n\n  /**\n   * Whether the dialog is actually WIRED to that name — the drawer panel's\n   * `aria-labelledby` resolving to this sheet's own title element, and to nothing\n   * else on the page.\n   *\n   * {@link getAccessibleName} only proves a string exists in the markup; a screen\n   * reader reads it only if the reference points at it. The two are separate\n   * failures and the second is silent: the title renders, the sheet looks right, and\n   * the dialog is announced as unnamed. Worth its own assertion because the drawer\n   * resolves the reference AFTER attaching the panel rather than while rendering it,\n   * so a title that arrives late is named late or not at all.\n   *\n   * Counted across the document as well, because two panels answering to one id hand\n   * every reference to whichever comes first — which is how a second sheet ends up\n   * announcing the first one's title.\n   */\n  async isNamed(): Promise<boolean> {\n    const id = await (await this.locatorFor('.wr-drawer__title')()).getAttribute('id');\n    if (!id) return false;\n\n    const root = this.documentRootLocatorFactory();\n    const named = await root.locatorForAll(`[aria-labelledby=\"${id}\"]`)();\n    const titles = await root.locatorForAll(`[id=\"${id}\"]`)();\n    return named.length === 1 && titles.length === 1;\n  }\n\n  /** The rows this sheet offers, in DOM order — cancel rows last, in their own group. */\n  async getActions(filters: WrActionSheetActionHarnessFilters = {}): Promise<WrActionSheetActionHarness[]> {\n    return this.locatorForAll(WrActionSheetActionHarness.with(filters))();\n  }\n\n  /** The labels of every row, in DOM order. */\n  async getActionLabels(): Promise<string[]> {\n    const actions = await this.getActions();\n    return Promise.all(actions.map(action => action.getLabel()));\n  }\n\n  /**\n   * The labels grouped the way the sheet lays them out: the main group first, then\n   * the cancel group when there is one.\n   *\n   * The grouping is the component's whole visual contract — a `cancel` row is pulled\n   * out of the list and pinned to the bottom with a gap above it — and it is\n   * invisible to {@link getActionLabels}, which flattens the two. A cancel row that\n   * stopped being separated would still come last in DOM order, so the flat list\n   * cannot catch it.\n   */\n  async getActionGroups(): Promise<string[][]> {\n    const groups = await this.locatorForAll(GroupHarness)();\n    return Promise.all(groups.map(group => group.getLabels()));\n  }\n\n  /**\n   * Whether the sheet drew a separate bottom group — true exactly when at least one\n   * row was given `role: 'cancel'`, since the component omits the group entirely\n   * rather than rendering an empty one.\n   */\n  async hasCancelGroup(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-action-sheet__group--cancel')()) !== null;\n  }\n\n  /**\n   * Pick the first row matching the filters.\n   *\n   * Throws when nothing matches, naming what the sheet does offer — the alternative\n   * is a silent no-op followed by an assertion about a sheet that never moved. A\n   * disabled match throws too, from the row harness.\n   */\n  async select(filters: WrActionSheetActionHarnessFilters): Promise<void> {\n    const [action] = await this.getActions(filters);\n    if (!action) {\n      const offered = await this.getActionLabels();\n      throw new Error(\n        `WrActionSheetHarness.select(): no row matched ${JSON.stringify(filters)}. ` +\n          `The sheet offers: ${offered.join(', ')}.`\n      );\n    }\n    await action.click();\n  }\n\n  /**\n   * Press Escape — dismissing the sheet WITHOUT emitting `action`.\n   *\n   * The key never needs to reach the sheet itself: the drawer underneath listens\n   * through the CDK's keyboard dispatcher, which keeps one document listener and\n   * hands the event to the top-most overlay. So with sheets stacked this dismisses\n   * the top one whichever harness it is called on.\n   */\n  async sendEscape(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.ESCAPE);\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-action-sheet.mjs

@@ -75,10 +75,10 @@ class WrActionSheet {
         this.action.emit(item);
         this.open.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleFallback: { classPropertyName: "titleFallback", publicName: "titleFallback", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleFallback: { classPropertyName: "titleFallback", publicName: "titleFallback", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrActionSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrActionSheet, decorators: [{
             type: Component,
             args: [{ selector: 'wr-action-sheet', encapsulation: ViewEncapsulation.None, imports: [WrDrawer, WrDrawerTitle, WrIcon], template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n" }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleFallback", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });

package/fesm2022/ngwr-affix.mjs

@@ -106,10 +106,10 @@ class WrAffix {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAffix, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAffix, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrAffix]',

package/fesm2022/ngwr-alert.mjs

@@ -89,10 +89,10 @@ class WrAlert {
         this.dismissed.set(true);
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\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      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\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}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrAlert, isStandalone: true, selector: "wr-alert", inputs: { closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()", "attr.role": "liveRole()", "attr.aria-live": "liveLevel()" } }, ngImport: i0, template: "@if (!dismissed()) {\n  @if (iconName(); as n) {\n    <wr-icon class=\"wr-alert__icon\" [name]=\"n\" />\n  } @else if (icon()) {\n    <svg\n      class=\"wr-alert__icon\"\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      @switch (type()) {\n        @case ('success') {\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        }\n        @case ('warning') {\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        }\n        @case ('danger') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('neutral') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        }\n        @case ('offline') {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"m4.9 4.9 14.2 14.2\" />\n        }\n        @default {\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        }\n      }\n    </svg>\n  }\n\n  <div class=\"wr-alert__body\">\n    @if (title(); as t) {\n      <p class=\"wr-alert__title\">{{ t }}</p>\n      @if (message(); as m) {\n        <p class=\"wr-alert__message\">{{ m }}</p>\n      }\n    } @else if (message(); as m) {\n      <p class=\"wr-alert__title\">{{ m }}</p>\n    }\n  </div>\n\n  @if (closeable()) {\n    <button type=\"button\" class=\"wr-alert__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"onClose()\">\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}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAlert, decorators: [{
             type: Component,
             args: [{ selector: 'wr-alert', imports: [WrIcon], encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-anchor.mjs

@@ -99,10 +99,10 @@ class WrAnchor {
         this.scroll.to(`#${id}`, { offset: this.offset() });
         this.activeId.set(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrAnchor, isStandalone: true, selector: "wr-anchor", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, hitArea: { classPropertyName: "hitArea", publicName: "hitArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "wr-anchor" }, ngImport: i0, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAnchor, decorators: [{
             type: Component,
             args: [{ selector: 'wr-anchor', encapsulation: ViewEncapsulation.None, host: { class: 'wr-anchor', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' }, template: "<ul class=\"wr-anchor__list\">\n  @for (link of links(); track link.id) {\n    <li class=\"wr-anchor__item\">\n      <a\n        class=\"wr-anchor__link\"\n        [class.wr-anchor__link--active]=\"activeId() === link.id\"\n        [attr.aria-current]=\"activeId() === link.id ? 'location' : null\"\n        [href]=\"`#${link.id}`\"\n        (click)=\"onClick(link.id, $event)\"\n      >\n        {{ link.label }}\n      </a>\n      @if (link.children?.length) {\n        <ul class=\"wr-anchor__list wr-anchor__list--nested\">\n          @for (child of link.children; track child.id) {\n            <li class=\"wr-anchor__item\">\n              <a\n                class=\"wr-anchor__link\"\n                [class.wr-anchor__link--active]=\"activeId() === child.id\"\n                [attr.aria-current]=\"activeId() === child.id ? 'location' : null\"\n                [href]=\"`#${child.id}`\"\n                (click)=\"onClick(child.id, $event)\"\n              >\n                {{ child.label }}\n              </a>\n            </li>\n          }\n        </ul>\n      }\n    </li>\n  }\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hitArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitArea", required: false }] }] } });

package/fesm2022/ngwr-aurora.mjs

@@ -294,10 +294,10 @@ class WrAurora {
         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: WrAurora, isStandalone: true, selector: "wr-aurora", inputs: { colorStops: { classPropertyName: "colorStops", publicName: "colorStops", isSignal: true, isRequired: false, transformFunction: null }, amplitude: { classPropertyName: "amplitude", publicName: "amplitude", isSignal: true, isRequired: false, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "blend", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-aurora" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', isInline: true, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAurora, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrAurora, decorators: [{
             type: Component,
             args: [{ selector: 'wr-aurora', template: '<canvas #canvas class="wr-aurora__canvas" aria-hidden="true"></canvas>', encapsulation: ViewEncapsulation.None, host: { class: 'wr-aurora' }, styles: [".wr-aurora{--wr-aurora-stop-1: #6366f1;--wr-aurora-stop-2: #10b981;--wr-aurora-stop-3: #6366f1;position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;z-index:0}.wr-aurora__canvas{display:block;width:100%;height:100%}[data-theme=dark] .wr-aurora{--wr-aurora-stop-1: #5227ff;--wr-aurora-stop-2: #7cff67;--wr-aurora-stop-3: #5227ff}\n"] }]
         }], ctorParameters: () => [], propDecorators: { colorStops: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorStops", required: false }] }], amplitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "amplitude", required: false }] }], blend: [{ type: i0.Input, args: [{ isSignal: true, alias: "blend", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });