ngwr 11.2.0 → 12.1.0

package/drawer/styles/_index.scss

@@ -26,6 +26,33 @@
   height: 100vh;
   height: 100dvh;
 }
+// No title to sit beside, so the corner chrome needs its own room.
+//
+// `__close` is absolutely positioned at an offset chosen to centre it on the
+// TITLE's first line. A drawer given only content — the shape a navigation
+// panel takes, `<wr-drawer><nav /></wr-drawer>` — starts its content at the top
+// and runs it under the button: the showcase's icon-set panel had the × over
+// the first menu row by 24x16 px, with `elementFromPoint` returning the button,
+// so that corner of the row could not be clicked. Reserve the strip rather than
+// move the button, which would make titled drawers look different for no reason.
+//
+// Written out rather than nested under `.wr-drawer__panel`: the first attempt
+// put it beside `&__close`, whose parent is `.wr-drawer`, so it compiled to
+// `.wr-drawer--untitled` and matched nothing. The class the component writes is
+// on the PANEL.
+//
+// **3.25rem, and the number comes from the TOUCH TARGET rather than the button.**
+// `__close` sits at `inset-block-start: 1.75rem` with `translateY(-50%)`, so its
+// visible box is 16–40px — but it also carries `touch-target`, whose `::after`
+// grows the hit area to 44px on a coarse pointer, reaching 6–50px. Reserving the
+// visible height left `getBoundingClientRect` reporting no overlap while
+// `elementFromPoint` still answered "close button" over the first 10px of the
+// content: the boxes had stopped intersecting and the control was still covered.
+// 52px clears the target with two pixels to spare.
+.wr-drawer__panel--untitled > *:not(.wr-drawer__close) {
+  padding-block-start: 3.25rem;
+}
+
 
 // …and that same flattening puts the content component's own host element
 // between the panel and the title / content / footer slots, so the panel's
@@ -168,6 +195,16 @@
     border-bottom: 1px solid var(--wr-color-outline);
   }
 
+  // No title to sit beside, so the corner chrome needs its own room.
+  //
+  // `__close` is absolutely positioned at an offset chosen to centre it on the
+  // TITLE's first line (see below). A drawer given only content — the shape a
+  // navigation panel takes, `<wr-drawer><nav /></wr-drawer>` — starts its
+  // content at the top of the panel and runs it straight under the button: the
+  // showcase's own icon-set panel had the × covering the first menu row by
+  // 24x16 px, with `elementFromPoint` returning the button, so that corner of
+  // the row could not be clicked. Reserve the strip instead of moving the
+  // button, which would leave titled drawers looking different for no reason.
   // Built-in dismiss (×) in the panel's top-right corner — rendered by the
   // component template, appended by `WrDrawerManager` for service drawers.
   &__close {

package/dropdown/styles/_index.scss

@@ -95,7 +95,7 @@
   &:hover,
   &:focus-visible {
     background: var(--wr-dropdown-item-bg-hover);
-    outline: none;
+    outline-offset: -2px;
   }
 
   &__icon {
@@ -113,7 +113,7 @@
   &--disabled {
     color: var(--wr-color-on-surface-muted);
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
     // The item's own `disabled` guards only the KEYBOARD path; the host element is
     // where a consumer binds `(click)`, and nothing stopped a real click reaching
     // it. `wr-btn` and `wr-checkbox` disable their pointer the same way.

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.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.4", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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.4", 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.4", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", 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.4", 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.4", ngImport: i0, type: WrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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.4", 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.4", ngImport: i0, type: WrAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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.4", 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.4", ngImport: i0, type: WrAurora, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", 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.4", 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 }] }] } });

package/fesm2022/ngwr-avatar.mjs

@@ -104,10 +104,10 @@ class WrAvatar {
     onImageError() {
         this.failed.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrAvatar, isStandalone: true, selector: "wr-avatar", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.width": "cssSize()", "style.height": "cssSize()" } }, ngImport: i0, template: "<ng-content />\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\n      class=\"wr-avatar__img\"\n      [src]=\"src\"\n      [alt]=\"resolvedAlt()\"\n      [attr.width]=\"pxSize()\"\n      [attr.height]=\"pxSize()\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\"\n      decoding=\"async\"\n    />\n\n    @if (!loaded()) {\n      <wr-spinner class=\"wr-avatar__spin\" />\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrAvatar, isStandalone: true, selector: "wr-avatar", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.width": "cssSize()", "style.height": "cssSize()" } }, ngImport: i0, template: "<ng-content />\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\n      class=\"wr-avatar__img\"\n      [src]=\"src\"\n      [alt]=\"resolvedAlt()\"\n      [attr.width]=\"pxSize()\"\n      [attr.height]=\"pxSize()\"\n      (load)=\"onImageLoad()\"\n      (error)=\"onImageError()\"\n      decoding=\"async\"\n    />\n\n    @if (!loaded()) {\n      <wr-spinner class=\"wr-avatar__spin\" />\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrAvatar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-avatar', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-back-top.mjs

@@ -64,10 +64,10 @@ class WrBackTop {
     onClick() {
         this.scroll.toTop({ offset: this.offset() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrBackTop, isStandalone: true, selector: "wr-back-top", inputs: { visibilityThreshold: { classPropertyName: "visibilityThreshold", publicName: "visibilityThreshold", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "!visible()", "attr.inert": "visible() ? null : ''" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\n  <!-- The arrow is FALLBACK content: rendered next to a projected icon rather\n       than instead of it, the documented custom-icon example put two glyphs in\n       one 44px circle. -->\n  <ng-content>\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </ng-content>\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBackTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrBackTop, isStandalone: true, selector: "wr-back-top", inputs: { visibilityThreshold: { classPropertyName: "visibilityThreshold", publicName: "visibilityThreshold", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "!visible()", "attr.inert": "visible() ? null : ''" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-back-top__button\" [attr.aria-label]=\"resolvedAriaLabel()\" (click)=\"onClick()\">\n  <!-- The arrow is FALLBACK content: rendered next to a projected icon rather\n       than instead of it, the documented custom-icon example put two glyphs in\n       one 44px circle. -->\n  <ng-content>\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 4 L9 14 M4 9 L9 4 L14 9\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </ng-content>\n</button>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBackTop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBackTop, decorators: [{
             type: Component,
             args: [{ selector: 'wr-back-top', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',

package/fesm2022/ngwr-badge.mjs

@@ -69,10 +69,10 @@ class WrBadge {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrBadge, isStandalone: true, selector: "wr-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrBadge, isStandalone: true, selector: "wr-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBadge, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-badge',
@@ -176,10 +176,10 @@ class WrTag {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrTag, isStandalone: true, selector: "wr-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (iconPosition() === 'start') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n\n<ng-content />\n\n@if (iconPosition() === 'end') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrTag, isStandalone: true, selector: "wr-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (iconPosition() === 'start') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n\n<ng-content />\n\n@if (iconPosition() === 'end') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }, { kind: "component", type: WrSpinner, selector: "wr-spinner", inputs: ["size", "ariaLabel"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrTag, decorators: [{
             type: Component,
             args: [{ selector: 'wr-tag', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrIcon, WrSpinner], template: "@if (iconPosition() === 'start') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n\n<ng-content />\n\n@if (iconPosition() === 'end') {\n  @if (loading()) {\n    <wr-spinner class=\"wr-tag__adornment\" size=\"sm\" />\n  } @else if (icon(); as name) {\n    <wr-icon class=\"wr-tag__adornment\" [name]=\"name\" />\n  }\n}\n" }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });

package/fesm2022/ngwr-bar-chart-testing.mjs

@@ -6,13 +6,21 @@ import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
  * 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
  */
+/** The `height: <n>%` the component writes onto a bar, out of its inline `style`. */
+const BAR_HEIGHT = /(?:^|;)\s*height\s*:\s*([\d.]+)%/;
 /**
  * Test harness for `<wr-bar-chart>`.
  *
  * **The bars are read as PERCENTAGES, not as pixels.** Each column's height is
  * written inline as a share of the chart's maximum, which is the one number that
  * survives a test with no layout — and it is also the component's whole job, since
- * the maximum is either given or derived from the data.
+ * the maximum is either given or derived from the data. That share is read off the
+ * `style` ATTRIBUTE rather than through `getCssValue()`, and the difference is not
+ * cosmetic: `getCssValue()` is `getComputedStyle()`, which hands the declared `60%`
+ * straight back in jsdom and resolves it to used pixels in a real browser — so the
+ * same harness answered `100` here and `200` under Selenium or a browser runner,
+ * with no error to say which one you got. The stylesheet's own `min-height: 1px`
+ * is a second way that read lies, turning an empty bar into `1`.
  *
  * **The visible label row is decoration.** Every column carries `role="img"` with
  * the label AND the value in its name, and the printed labels underneath are
@@ -53,10 +61,20 @@ class WrBarChartHarness extends ComponentHarness {
                 label: labels[index] ?? '',
                 value: value === '' ? null : value,
                 name: await column.getAttribute('aria-label'),
-                heightPercent: Number.parseFloat(await bars[index].getCssValue('height')),
+                heightPercent: WrBarChartHarness.heightPercentOf(await bars[index].getAttribute('style')),
             };
         }));
     }
+    /** Parse one bar's declared share. See the class note on why this is not `getCssValue()`. */
+    static heightPercentOf(style) {
+        const match = BAR_HEIGHT.exec(style ?? '');
+        if (!match) {
+            throw new Error(`WrBarChartHarness.getBars(): a bar carries no inline height percentage (style: "${style ?? ''}"). ` +
+                'The component writes one for every bar, an empty one included, so its absence is the bug — ' +
+                'reporting 0 would read as a bar with nothing in it.');
+        }
+        return Number.parseFloat(match[1]);
+    }
     /** The labels printed under the columns, in order. */
     async getLabels() {
         const labels = await this.locatorForAll('.wr-bar-chart__label')();

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

@@ -1 +1 @@
-{"version":3,"file":"ngwr-bar-chart-testing.mjs","sources":["../../../projects/lib/bar-chart/testing/wr-bar-chart-harness.ts","../../../projects/lib/bar-chart/testing/ngwr-bar-chart-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrBarChartBar, WrBarChartHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-bar-chart>`.\n *\n * **The bars are read as PERCENTAGES, not as pixels.** Each column's height is\n * written inline as a share of the chart's maximum, which is the one number that\n * survives a test with no layout — and it is also the component's whole job, since\n * the maximum is either given or derived from the data.\n *\n * **The visible label row is decoration.** Every column carries `role=\"img\"` with\n * the label AND the value in its name, and the printed labels underneath are\n * `aria-hidden` — so {@link WrBarChartBar.name} is what a screen reader gets and\n * {@link WrBarChartBar.label} is what is drawn. Asserting only the second would pass\n * on a chart that announces nothing.\n *\n * @example\n * ```ts\n * const chart = await loader.getHarness(WrBarChartHarness);\n *\n * expect(await chart.getLabels()).toEqual(['Mon', 'Tue', 'Wed']);\n * expect((await chart.getBars())[1].heightPercent).toBe(100);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrBarChartHarness extends ComponentHarness {\n  static hostSelector = 'wr-bar-chart';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrBarChartHarnessFilters = {}): HarnessPredicate<WrBarChartHarness> {\n    return new HarnessPredicate(WrBarChartHarness, options).addOption(\n      'barLabel',\n      options.barLabel,\n      async (harness, label) => {\n        for (const printed of await harness.getLabels()) {\n          if (await HarnessPredicate.stringMatches(printed, label)) return true;\n        }\n        return false;\n      }\n    );\n  }\n\n  /** Every column, in data order. */\n  async getBars(): Promise<WrBarChartBar[]> {\n    const columns = await this.locatorForAll('.wr-bar-chart__column')();\n    const bars = await this.locatorForAll('.wr-bar-chart__bar')();\n    const labels = await this.getLabels();\n\n    return Promise.all(\n      columns.map(async (column, index) => {\n        const value = await column.text();\n        return {\n          label: labels[index] ?? '',\n          value: value === '' ? null : value,\n          name: await column.getAttribute('aria-label'),\n          heightPercent: Number.parseFloat(await bars[index].getCssValue('height')),\n        };\n      })\n    );\n  }\n\n  /** The labels printed under the columns, in order. */\n  async getLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-bar-chart__label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** What each column announces — the label and the value together. */\n  async getAccessibleNames(): Promise<(string | null)[]> {\n    const columns = await this.locatorForAll('.wr-bar-chart__column')();\n    return Promise.all(columns.map(column => column.getAttribute('aria-label')));\n  }\n\n  /** How many columns the chart drew. */\n  async getBarCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-bar-chart__column')()).length;\n  }\n\n  /** Whether the values are printed above the bars (`showValues`). */\n  async hasValues(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-bar-chart__value')()) !== null;\n  }\n\n  /** The plot's height in pixels, as the component writes it inline. */\n  async getPlotHeight(): Promise<number> {\n    return Number.parseFloat(await (await this.locatorFor('.wr-bar-chart__plot')()).getCssValue('height'));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACG,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AACrD,IAAA,OAAO,YAAY,GAAG,cAAc;;AAGpC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAoC,EAAE,EAAA;QAChD,OAAO,IAAI,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,SAAS,CAC/D,UAAU,EACV,OAAO,CAAC,QAAQ,EAChB,OAAO,OAAO,EAAE,KAAK,KAAI;YACvB,KAAK,MAAM,OAAO,IAAI,MAAM,OAAO,CAAC,SAAS,EAAE,EAAE;gBAC/C,IAAI,MAAM,gBAAgB,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAAE,oBAAA,OAAO,IAAI;YACvE;AACA,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,CACF;IACH;;AAGA,IAAA,MAAM,OAAO,GAAA;QACX,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE;QACnE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,EAAE;AAC7D,QAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE;AAErC,QAAA,OAAO,OAAO,CAAC,GAAG,CAChB,OAAO,CAAC,GAAG,CAAC,OAAO,MAAM,EAAE,KAAK,KAAI;AAClC,YAAA,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,IAAI,EAAE;YACjC,OAAO;AACL,gBAAA,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;gBAC1B,KAAK,EAAE,KAAK,KAAK,EAAE,GAAG,IAAI,GAAG,KAAK;AAClC,gBAAA,IAAI,EAAE,MAAM,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC;AAC7C,gBAAA,aAAa,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;aAC1E;QACH,CAAC,CAAC,CACH;IACH;;AAGA,IAAA,MAAM,SAAS,GAAA;QACb,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE;AACjE,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IACvD;;AAGA,IAAA,MAAM,kBAAkB,GAAA;QACtB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE;QACnE,OAAO,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;IAC9E;;AAGA,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE,EAAE,MAAM;IACrE;;AAGA,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,kBAAkB,CAAC,sBAAsB,CAAC,EAAE,MAAM,IAAI;IAC3E;;AAGA,IAAA,MAAM,aAAa,GAAA;QACjB,OAAO,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,EAAE,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxG;;;AChGF;;AAEG;;;;"}
+{"version":3,"file":"ngwr-bar-chart-testing.mjs","sources":["../../../projects/lib/bar-chart/testing/wr-bar-chart-harness.ts","../../../projects/lib/bar-chart/testing/ngwr-bar-chart-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrBarChartBar, WrBarChartHarnessFilters } from './interfaces';\n\n/** The `height: <n>%` the component writes onto a bar, out of its inline `style`. */\nconst BAR_HEIGHT = /(?:^|;)\\s*height\\s*:\\s*([\\d.]+)%/;\n\n/**\n * Test harness for `<wr-bar-chart>`.\n *\n * **The bars are read as PERCENTAGES, not as pixels.** Each column's height is\n * written inline as a share of the chart's maximum, which is the one number that\n * survives a test with no layout — and it is also the component's whole job, since\n * the maximum is either given or derived from the data. That share is read off the\n * `style` ATTRIBUTE rather than through `getCssValue()`, and the difference is not\n * cosmetic: `getCssValue()` is `getComputedStyle()`, which hands the declared `60%`\n * straight back in jsdom and resolves it to used pixels in a real browser — so the\n * same harness answered `100` here and `200` under Selenium or a browser runner,\n * with no error to say which one you got. The stylesheet's own `min-height: 1px`\n * is a second way that read lies, turning an empty bar into `1`.\n *\n * **The visible label row is decoration.** Every column carries `role=\"img\"` with\n * the label AND the value in its name, and the printed labels underneath are\n * `aria-hidden` — so {@link WrBarChartBar.name} is what a screen reader gets and\n * {@link WrBarChartBar.label} is what is drawn. Asserting only the second would pass\n * on a chart that announces nothing.\n *\n * @example\n * ```ts\n * const chart = await loader.getHarness(WrBarChartHarness);\n *\n * expect(await chart.getLabels()).toEqual(['Mon', 'Tue', 'Wed']);\n * expect((await chart.getBars())[1].heightPercent).toBe(100);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrBarChartHarness extends ComponentHarness {\n  static hostSelector = 'wr-bar-chart';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrBarChartHarnessFilters = {}): HarnessPredicate<WrBarChartHarness> {\n    return new HarnessPredicate(WrBarChartHarness, options).addOption(\n      'barLabel',\n      options.barLabel,\n      async (harness, label) => {\n        for (const printed of await harness.getLabels()) {\n          if (await HarnessPredicate.stringMatches(printed, label)) return true;\n        }\n        return false;\n      }\n    );\n  }\n\n  /** Every column, in data order. */\n  async getBars(): Promise<WrBarChartBar[]> {\n    const columns = await this.locatorForAll('.wr-bar-chart__column')();\n    const bars = await this.locatorForAll('.wr-bar-chart__bar')();\n    const labels = await this.getLabels();\n\n    return Promise.all(\n      columns.map(async (column, index) => {\n        const value = await column.text();\n        return {\n          label: labels[index] ?? '',\n          value: value === '' ? null : value,\n          name: await column.getAttribute('aria-label'),\n          heightPercent: WrBarChartHarness.heightPercentOf(await bars[index].getAttribute('style')),\n        };\n      })\n    );\n  }\n\n  /** Parse one bar's declared share. See the class note on why this is not `getCssValue()`. */\n  private static heightPercentOf(style: string | null): number {\n    const match = BAR_HEIGHT.exec(style ?? '');\n    if (!match) {\n      throw new Error(\n        `WrBarChartHarness.getBars(): a bar carries no inline height percentage (style: \"${style ?? ''}\"). ` +\n          'The component writes one for every bar, an empty one included, so its absence is the bug — ' +\n          'reporting 0 would read as a bar with nothing in it.'\n      );\n    }\n    return Number.parseFloat(match[1]);\n  }\n\n  /** The labels printed under the columns, in order. */\n  async getLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-bar-chart__label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** What each column announces — the label and the value together. */\n  async getAccessibleNames(): Promise<(string | null)[]> {\n    const columns = await this.locatorForAll('.wr-bar-chart__column')();\n    return Promise.all(columns.map(column => column.getAttribute('aria-label')));\n  }\n\n  /** How many columns the chart drew. */\n  async getBarCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-bar-chart__column')()).length;\n  }\n\n  /** Whether the values are printed above the bars (`showValues`). */\n  async hasValues(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-bar-chart__value')()) !== null;\n  }\n\n  /** The plot's height in pixels, as the component writes it inline. */\n  async getPlotHeight(): Promise<number> {\n    return Number.parseFloat(await (await this.locatorFor('.wr-bar-chart__plot')()).getCssValue('height'));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;AACA,MAAM,UAAU,GAAG,kCAAkC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;AACG,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AACrD,IAAA,OAAO,YAAY,GAAG,cAAc;;AAGpC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAoC,EAAE,EAAA;QAChD,OAAO,IAAI,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,SAAS,CAC/D,UAAU,EACV,OAAO,CAAC,QAAQ,EAChB,OAAO,OAAO,EAAE,KAAK,KAAI;YACvB,KAAK,MAAM,OAAO,IAAI,MAAM,OAAO,CAAC,SAAS,EAAE,EAAE;gBAC/C,IAAI,MAAM,gBAAgB,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAAE,oBAAA,OAAO,IAAI;YACvE;AACA,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,CACF;IACH;;AAGA,IAAA,MAAM,OAAO,GAAA;QACX,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE;QACnE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,EAAE;AAC7D,QAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE;AAErC,QAAA,OAAO,OAAO,CAAC,GAAG,CAChB,OAAO,CAAC,GAAG,CAAC,OAAO,MAAM,EAAE,KAAK,KAAI;AAClC,YAAA,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,IAAI,EAAE;YACjC,OAAO;AACL,gBAAA,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;gBAC1B,KAAK,EAAE,KAAK,KAAK,EAAE,GAAG,IAAI,GAAG,KAAK;AAClC,gBAAA,IAAI,EAAE,MAAM,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC;AAC7C,gBAAA,aAAa,EAAE,iBAAiB,CAAC,eAAe,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;aAC1F;QACH,CAAC,CAAC,CACH;IACH;;IAGQ,OAAO,eAAe,CAAC,KAAoB,EAAA;QACjD,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC1C,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,MAAM,IAAI,KAAK,CACb,mFAAmF,KAAK,IAAI,EAAE,CAAA,IAAA,CAAM;gBAClG,6FAA6F;AAC7F,gBAAA,qDAAqD,CACxD;QACH;QACA,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACpC;;AAGA,IAAA,MAAM,SAAS,GAAA;QACb,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE;AACjE,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IACvD;;AAGA,IAAA,MAAM,kBAAkB,GAAA;QACtB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE;QACnE,OAAO,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;IAC9E;;AAGA,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE,EAAE,MAAM;IACrE;;AAGA,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,kBAAkB,CAAC,sBAAsB,CAAC,EAAE,MAAM,IAAI;IAC3E;;AAGA,IAAA,MAAM,aAAa,GAAA;QACjB,OAAO,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,EAAE,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxG;;;ACtHF;;AAEG;;;;"}

package/fesm2022/ngwr-bar-chart.mjs

@@ -74,10 +74,10 @@ class WrBarChart {
         };
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrBarChart, isStandalone: true, selector: "wr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrBarChart, isStandalone: true, selector: "wr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBarChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBarChart, decorators: [{
             type: Component,
             args: [{ selector: 'wr-bar-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-bar-chart' }, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });

package/fesm2022/ngwr-blur-text.mjs

@@ -179,10 +179,10 @@ class WrBlurText {
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBlurText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrBlurText, isStandalone: true, selector: "wr-blur-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, animateBy: { classPropertyName: "animateBy", publicName: "animateBy", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, stepDuration: { classPropertyName: "stepDuration", publicName: "stepDuration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { classAttribute: "wr-blur-text" }, ngImport: i0, template: "<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBlurText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrBlurText, isStandalone: true, selector: "wr-blur-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, animateBy: { classPropertyName: "animateBy", publicName: "animateBy", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, stepDuration: { classPropertyName: "stepDuration", publicName: "stepDuration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { classAttribute: "wr-blur-text" }, ngImport: i0, template: "<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrBlurText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrBlurText, decorators: [{
             type: Component,
             args: [{ selector: 'wr-blur-text', encapsulation: ViewEncapsulation.None, host: { class: 'wr-blur-text' }, template: "<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], animateBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateBy", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], stepDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepDuration", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootMargin", required: false }] }], animationComplete: [{ type: i0.Output, args: ["animationComplete"] }] } });