ngwr 14.6.0 → 14.8.0

package/event-calendar/styles/_index.scss

@@ -8,15 +8,19 @@
 /// one of the 120-odd style entries that referenced tokens without pulling the
 /// layer that declares them: `@use 'ngwr/event-calendar'` on its own emitted
 /// 5.5 kB of rules carrying 57 unresolved `var(--wr-*)` references, so the grid
-/// lines (`box-shadow`, hence no fallback) vanished and the text fell back to
-/// black. The ten other entries that skip the load — `affix`, `density` and the
-/// eight canvas / text-animation ones — reference no token at all, which is why
-/// a sweep for "who is missing it" is not enough on its own.
+/// lines (then a `box-shadow`, hence no fallback) vanished and the text fell
+/// back to black. The ten other entries that skip the load — `affix`, `density`
+/// and the eight canvas / text-animation ones — reference no token at all, which
+/// is why a sweep for "who is missing it" is not enough on its own.
 ///
-/// Grid lines are `box-shadow: inset`, never borders. A border would take up
-/// layout space, and the whole chip model depends on cell boxes being exactly
-/// contiguous: a band's `calc(var(--span) * 100%)` is only the right width if
-/// one cell ends precisely where the next begins.
+/// Grid lines are borders on an absolutely positioned `::after`, never on the
+/// cell itself. A border on the cell would take up layout space, and the whole
+/// chip model depends on cell boxes being exactly contiguous: a band's
+/// `calc(var(--span) * 100%)` is only the right width if one cell ends precisely
+/// where the next begins. They used to be `box-shadow: inset`, which costs no
+/// space either but has no logical form — and each cell drew its line on the
+/// physical right and bottom whether or not that edge was the frame, so the last
+/// column and the last row painted a second hairline against the grid's own.
 @use '../../theme/styles';
 
 .wr-event-calendar {
@@ -29,6 +33,17 @@
   // dark enough that `--wr-color-on-surface-muted` on top of it lands at 3.6:1.
   --wr-event-calendar-fill: var(--wr-color-fill);
   --wr-event-calendar-cols: 7;
+  // A chip is a 20px strip carrying a 3px accent on its leading edge, and the
+  // library's small radius (6px) bent that accent into a bracket. Half of it
+  // keeps the corner soft and the accent straight, and still follows a theme
+  // that re-tunes `--wr-border-radius-sm`.
+  --wr-event-calendar-chip-radius: calc(var(--wr-border-radius-sm) / 2);
+  // Space above the first chip (below the day number, or below the header rule
+  // in the all-day band) and between stacked chips.
+  --wr-event-calendar-chip-gap: 0.25rem;
+  // How far a chip stands in from the lines of the cell it sits in — on both
+  // inline sides, and below a timed chip so back-to-back events do not merge.
+  --wr-event-calendar-chip-inset: 0.125rem;
 
   display: flex;
   flex-direction: column;
@@ -75,6 +90,9 @@
     display: grid;
     overflow: hidden;
     border-radius: var(--wr-border-radius-base);
+    // The frame, spread OUTSIDE the box. It owns the four outer edges, which is
+    // why no cell draws a line on a side that meets it (see the grid lines
+    // below).
     box-shadow: 0 0 0 1px var(--wr-event-calendar-line);
 
     &--month {
@@ -82,7 +100,15 @@
     }
 
     &--time {
-      grid-template-columns: var(--wr-event-calendar-gutter) repeat(var(--wr-event-calendar-cols), minmax(0, 1fr));
+      // The hook is the gutter's FLOOR, not its width. A fixed 3.75rem could not
+      // hold "09:00 AM" at the label's own padding, so the label wrapped onto a
+      // second line, the rows carrying one grew to 36px while the slot cells
+      // stayed 24px, and every column line broke for 12px at every hour — and a
+      // timed chip, sized in percentages of one 24px slot, ended short of its
+      // own end time by 12px per hour it crossed.
+      grid-template-columns:
+        minmax(var(--wr-event-calendar-gutter), max-content)
+        repeat(var(--wr-event-calendar-cols), minmax(0, 1fr));
     }
   }
 
@@ -94,13 +120,13 @@
 
   &__weekday,
   &__colhead {
+    position: relative;
     padding: 0.5rem 0.375rem;
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-medium);
     color: var(--wr-color-on-surface-muted);
     text-align: center;
     background: var(--wr-event-calendar-fill);
-    box-shadow: inset 0 -1px 0 var(--wr-event-calendar-line);
   }
 
   &__colhead {
@@ -122,11 +148,36 @@
   &__gutter {
     padding: 0 0.5rem;
     font-size: var(--wr-text-xs);
+    // One line box exactly one em tall, so the nudge below centres the label on
+    // its line and the label can never make a slot row taller than the slot.
+    line-height: 1;
     color: var(--wr-color-on-surface-muted);
     text-align: end;
+    white-space: nowrap;
     // Nudged up so the label reads as the line it labels, not the band below it.
+    // The transform moves the box, so the gutter draws no line of its own — the
+    // divider is the first day column's (see the grid lines below).
     transform: translateY(-0.5em);
-    box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
+  }
+
+  // The all-day label names a band, not a line: its top level with the first
+  // chip's. Not centred on the chip — the first hour's label below is centred on
+  // the band's bottom rule, and a centred "All day" ran into it.
+  //
+  // And it does not size the column. The hour labels have to stay on one line,
+  // because a wrapped one grows its row; this label only grows the all-day row,
+  // which is a floor anyway. Left to `nowrap`, "Toute la journée" widened the
+  // French gutter from 72px to 107px and took a fifth off every day column at
+  // phone width, and the English label overrode a smaller gutter hook. A wrapped
+  // label grows the row through its bottom padding instead: the first hour's
+  // label is lifted 0.5em into this row, and the other 0.5em is the space a
+  // one-line "All day" already leaves above it. Without it the second line of
+  // "Toute la journée" overlapped "08:00 AM".
+  &__row--allday > &__gutter {
+    contain: inline-size;
+    padding-block: var(--wr-event-calendar-chip-gap) 1em;
+    white-space: normal;
+    transform: none;
   }
 
   &__cell {
@@ -137,7 +188,6 @@
     position: relative;
     min-width: 0;
     cursor: pointer;
-    box-shadow: inset -1px -1px 0 var(--wr-event-calendar-line);
 
     &:focus-visible {
       z-index: 2;
@@ -146,7 +196,18 @@
     }
 
     &--day {
-      min-height: 5.5rem;
+      // A floor that knows the lanes. Every chip is absolutely positioned, so
+      // nothing in flow made the cell tall enough for its last lane: a third
+      // chip hung into the next week's row. `--wr-event-calendar-lanes` is the
+      // number of lanes the week row fills, set on the row and inherited through
+      // its `display: contents`.
+      min-height: max(
+        5.5rem,
+        calc(
+          1.75rem + var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lanes, 0) *
+            (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
+        )
+      );
       padding: 0.25rem;
     }
 
@@ -164,22 +225,92 @@
     }
 
     &--allday {
-      min-height: calc(var(--wr-event-calendar-band-height) + 0.5rem);
-      padding: 0.125rem 0;
+      // Same rule as a day cell: the band has no ceiling on lanes, and a second
+      // all-day event used to spill over the first hour of the grid.
+      min-height: calc(
+        var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lanes, 1) *
+          (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
+      );
     }
 
     &--slot {
-      height: var(--wr-event-calendar-slot-height);
-      box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
+      // A floor rather than a height, so a row that grows anyway stretches its
+      // cells with it instead of leaving their lines short.
+      min-height: var(--wr-event-calendar-slot-height);
     }
+  }
 
-    &--major {
-      box-shadow:
-        inset -1px 0 0 var(--wr-event-calendar-line),
-        inset 0 1px 0 var(--wr-event-calendar-line);
+  // ------------------------------------------------------------- grid lines
+  //
+  // One hairline per edge, and one owner per line. A cell draws the line on its
+  // inline END and its block END, and draws nothing where that edge is the
+  // frame; the time grid draws hour lines on the block START of a major row,
+  // except where a header or the all-day band already put a rule there. Logical
+  // sides throughout, so the lines follow the columns under `dir="rtl"`.
+  &__weekday,
+  &__colhead,
+  &__cell {
+    &::after {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      content: '';
+      border: 0 solid var(--wr-event-calendar-line);
     }
   }
 
+  &__weekday::after,
+  &__colhead::after {
+    border-block-end-width: 1px;
+  }
+
+  &__cell--day::after,
+  &__cell--allday::after {
+    border-inline-end-width: 1px;
+    border-block-end-width: 1px;
+  }
+
+  &__cell--slot::after {
+    border-inline-end-width: 1px;
+  }
+
+  &__cell--major::after {
+    border-block-start-width: 1px;
+  }
+
+  // The divider between the gutter and the days. The first day column draws it,
+  // in every row, because the gutter's labels are moved with a transform that
+  // would carry any line of the gutter's own up with them — it used to stop
+  // 0.5em short of the grid's bottom edge.
+  &__gutter + &__colhead::after,
+  &__gutter + &__cell::after {
+    border-inline-start-width: 1px;
+  }
+
+  // The first slot row sits directly under the header rule or the all-day rule.
+  &__row:first-child + &__row > &__cell--major::after,
+  &__row--allday + &__row > &__cell--major::after {
+    border-block-start-width: 0;
+  }
+
+  // Edges that meet the frame.
+  &__row > :last-child::after {
+    border-inline-end-width: 0;
+  }
+
+  &__row:last-child > &__cell::after {
+    border-block-end-width: 0;
+  }
+
+  // Under the focus ring, never over it. A focused cell takes `z-index: 2`, so
+  // it is a stacking context, and Chromium paints a positioned `::after` inside
+  // one AFTER the cell's own outline: the inset ring lost its outer pixel on
+  // every side the cell draws a line on. A negative z-index still paints above
+  // the cell's background, so a muted day keeps its lines.
+  &__cell:focus-visible::after {
+    z-index: -1;
+  }
+
   &__daynum {
     display: inline-flex;
     align-items: center;
@@ -207,7 +338,7 @@
     background: color-mix(in srgb, var(--wr-event-calendar-color) 18%, transparent);
     border: 0;
     border-inline-start: 3px solid var(--wr-event-calendar-color);
-    border-radius: var(--wr-border-radius-sm);
+    border-radius: var(--wr-event-calendar-chip-radius);
     transition: filter var(--wr-transition-short);
 
     &:hover {
@@ -221,19 +352,31 @@
     }
 
     &--band {
-      inset-inline-start: 0.125rem;
+      inset-inline-start: var(--wr-event-calendar-chip-inset);
+      // `offset` is where the chips start — below the day number in a month
+      // cell, at the top of the all-day band — and the first lane keeps one gap
+      // clear of it, the way every later lane keeps one clear of the chip above.
       top: calc(
-        var(--wr-event-calendar-offset) + var(--wr-event-calendar-lane) *
-          (var(--wr-event-calendar-band-height) + 0.125rem)
+        var(--wr-event-calendar-offset) + var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lane) *
+          (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
       );
       // Reaching across `--span` cells: each is exactly 100% of this one,
       // because the grid has no gaps and the lines cost no layout space.
-      width: calc(var(--wr-event-calendar-span) * 100% - 0.25rem);
+      width: calc(var(--wr-event-calendar-span) * 100% - 2 * var(--wr-event-calendar-chip-inset));
       height: var(--wr-event-calendar-band-height);
       padding: 0 0.375rem;
     }
 
     &--time {
+      // The template writes the lane geometry as custom properties rather than
+      // as `inset-inline-start` / `width` / `height` directly, so the inset can
+      // be taken off here: an inline style cannot be adjusted by a stylesheet,
+      // and a chip filling its lane to the pixel covered the column line and
+      // touched its neighbour in the next lane and the event after it. `top`
+      // needs no adjustment and stays an inline `top`.
+      inset-inline-start: calc(var(--wr-event-calendar-inline-start) + var(--wr-event-calendar-chip-inset));
+      width: calc(var(--wr-event-calendar-inline-size) - 2 * var(--wr-event-calendar-chip-inset));
+      height: calc(var(--wr-event-calendar-block-size) - var(--wr-event-calendar-chip-inset));
       padding: 0.125rem 0.25rem;
       // 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`
@@ -250,6 +393,10 @@
       row-gap: 0;
       min-height: 1.25rem;
       white-space: normal;
+      // The chip's height is set from outside and never from its content, so
+      // size containment costs nothing, and it lets the title ask how many lines
+      // the chip holds (see `&-title`).
+      container: wr-event-calendar-chip / size;
     }
 
     // A segment clipped by the edge of the view loses the rounding on that side,
@@ -280,8 +427,8 @@
       // 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
+      // puts an 18% wash of the event colour under it (its `background`) — 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
@@ -307,18 +454,28 @@
   // 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,
+  // floor was 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.
+  // flow lands exactly where that lane would start — the day-number line box is
+  // precisely the 1.75rem the chips offset by, so only the first gap and 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.
+  //
+  // It is as tall as a chip. At its own 18px line its centre sat 23px below the
+  // centre of the chip above it, one pixel short of the 24px WCAG 2.5.8's
+  // spacing exception asks for. axe flagged both targets wherever the cell was
+  // narrow enough to put the two centres nearly in line.
   &__more {
     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;
+    min-height: var(--wr-event-calendar-band-height);
+    margin-top: calc(
+      var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lane) *
+        (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
+    );
+    margin-inline-start: var(--wr-event-calendar-chip-inset);
     padding: 0 0.375rem;
     font: inherit;
     font-size: var(--wr-text-xs);
@@ -354,3 +511,20 @@
     user-select: none;
   }
 }
+
+// A timed chip with room for ONE line: two of the chip's 1.2 line boxes are
+// 2.4em, and the query measures the content box. There the title stays on the
+// clock's line and ends in an ellipsis. Left to wrap, it dropped to a second
+// line that started 14.4px down a 16px content box, so a one-slot chip showed
+// the top of the title's letters and nothing else. On the docs page that
+// happened at 1280px wide, where the week columns are 118px. A chip narrower
+// than its clock plus the gap still wraps the title, because a container query
+// cannot turn off `flex-wrap` on the chip itself; at that width the clock is
+// already cut off.
+@container wr-event-calendar-chip (height < 2.4em) {
+  .wr-event-calendar__chip-title {
+    flex: 1 1 0;
+    min-width: 0;
+    white-space: nowrap;
+  }
+}

package/fesm2022/ngwr-avatar.mjs

@@ -21,6 +21,19 @@ const DEFAULT_SIZE = '6rem';
  * spinner is drawn over it; with nothing projected, the spinner marks the
  * loading state instead. See `alt` for what a screen reader hears.
  *
+ * Projected initials take the text size around the avatar, capped at
+ * `--wr-avatar-initials-scale` (`0.375`) of the box, so they shrink only where
+ * they would not fit: a 16px avatar in a 14px chip draws 6px letters, while a
+ * `6rem` one keeps the surrounding size up to 36px and is capped only past it.
+ * Anything projected that is sized in `em` follows the cap too — a `<wr-icon>`
+ * at its default `1.2em` included — so pin a `px` or `rem` size on the projected
+ * element, or override the hook, to keep it. A `font-size` rule on the avatar
+ * itself still wins, unless it sits in a cascade layer (Tailwind v4's utilities
+ * do), which ngwr's unlayered stylesheet beats whatever the selector.
+ *
+ * The initials are inert: `pointer-events: none` hands a click on them to whatever
+ * holds the avatar, and `user-select: none` keeps them out of a text selection.
+ *
  * @example
  * ```html
  * <wr-avatar url="/me.png" alt="Roman" size="3rem" shape="circle" />
@@ -61,7 +74,8 @@ class WrAvatar {
     shape = input('rounded', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     /**
-     * Box size. See {@link WrAvatarSize} for accepted values.
+     * Box size. See {@link WrAvatarSize} for accepted values. The resolved value is
+     * published on the host as `--wr-avatar-size`.
      *
      * @default '6rem'
      */
@@ -156,7 +170,7 @@ class WrAvatar {
         this.failed.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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()" } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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()", "style.--wr-avatar-size": "cssSize()" } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], ngImport: i0, template: "<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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.6", ngImport: i0, type: WrAvatar, decorators: [{
             type: Component,
@@ -164,6 +178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[class]': 'classes()',
                         '[style.width]': 'cssSize()',
                         '[style.height]': 'cssSize()',
+                        // What the stylesheet sizes projected initials against. Always px or rem: a
+                        // value `resolveCssSize` has no pixels for falls back to the default box.
+                        '[style.--wr-avatar-size]': 'cssSize()',
                     }, imports: [WrSpinner], template: "<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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" }]
         }], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], img: [{ type: i0.ViewChild, args: ['img', { isSignal: true }] }] } });
 

package/fesm2022/ngwr-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-avatar.mjs","sources":["../../../projects/lib/avatar/avatar.ts","../../../projects/lib/avatar/avatar.html","../../../projects/lib/avatar/ngwr-avatar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport {\n  Component,\n  type ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  input,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrSpinner } from 'ngwr/spinner';\nimport { resolveCssSize, type ResolvedCssSize } from 'ngwr/utils';\n\nimport type { WrAvatarShape, WrAvatarSize } from './interfaces';\n\nconst DEFAULT_SIZE: WrAvatarSize = '6rem';\n\n/**\n * Image avatar with configurable corner treatment.\n *\n * Projected content (typically initials) is the FALLBACK: it shows with no\n * `url`, while the image loads and after it fails, and leaves the paint once the\n * image has loaded. It is projected into a `.wr-avatar__content` wrapper, so a\n * `wr-avatar > …` child selector no longer reaches it. While it is there, no\n * spinner is drawn over it; with nothing projected, the spinner marks the\n * loading state instead. See `alt` for what a screen reader hears.\n *\n * @example\n * ```html\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" size=\"3rem\" shape=\"circle\" />\n * <wr-avatar [url]=\"photo\" alt=\"Roman Khegay\" [size]=\"48\">RK</wr-avatar>\n * ```\n *\n * @see https://ngwr.dev/reference/components/avatar\n */\n@Component({\n  selector: 'wr-avatar',\n  templateUrl: './avatar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'cssSize()',\n    '[style.height]': 'cssSize()',\n  },\n  imports: [WrSpinner],\n})\nexport class WrAvatar {\n  /**\n   * Image URL. Projected content (e.g. initials) shows while it is unset,\n   * loading or broken, and gives way once the image has loaded.\n   *\n   * @default null\n   */\n  readonly url = input<string | null>(null);\n\n  /**\n   * Alt text for the image. Falls back to `avatar.alt`, then `'Avatar'` — pass\n   * the person's name where you have it, since that is what a reader wants.\n   *\n   * With an `alt`, projected initials are hidden from assistive technology while\n   * an image is in play, so the name is announced once. Without one, the image\n   * carries only the generic name, so the initials stay announced beside it —\n   * visually hidden once it has loaded, never dropped.\n   *\n   * @default null\n   */\n  readonly alt = input<string | null>(null);\n\n  protected readonly resolvedAlt = useI18nText(this.alt, 'avatar.alt', 'Avatar');\n\n  /**\n   * Corner treatment. `rounded` (default) is a soft rounded square,\n   * `circle` is the classic profile avatar, `squircle` is the iOS look.\n   *\n   * @default 'rounded'\n   */\n  readonly shape = input<WrAvatarShape>('rounded');\n\n  /**\n   * Box size. See {@link WrAvatarSize} for accepted values.\n   *\n   * @default '6rem'\n   */\n  readonly size = input<WrAvatarSize>(DEFAULT_SIZE);\n\n  protected readonly loaded = signal(false);\n\n  /**\n   * Whether the image failed. Without this the spinner spun forever on a broken\n   * URL — the one state where an avatar is guaranteed to have projected initials\n   * worth showing instead.\n   */\n  protected readonly failed = signal(false);\n\n  private readonly img = viewChild<ElementRef<HTMLImageElement>>('img');\n\n  constructor() {\n    // A new URL is a new attempt: after a failure the fallback would otherwise\n    // stay put for an image that loads perfectly well.\n    effect(() => {\n      this.url();\n      untracked(() => {\n        this.loaded.set(false);\n        this.failed.set(false);\n      });\n    });\n\n    afterNextRender(() => this.adoptSettledImage());\n  }\n\n  /**\n   * A prerendered `<img>` starts loading when the browser parses the HTML, and\n   * `(load)` / `(error)` are only attached at hydration — so on a slow bundle the\n   * image settles first, both events go nowhere, and the avatar sits on its\n   * fallback over a photo it already has (or names a broken image it never\n   * learns about). Only the FIRST render can race: every later `<img>` is\n   * created on the client with its listeners in place before `src` is set.\n   */\n  private adoptSettledImage(): void {\n    const img = this.img()?.nativeElement;\n    if (!img?.complete || this.loaded() || this.failed()) return;\n\n    if (img.naturalWidth > 0) {\n      this.loaded.set(true);\n      return;\n    }\n\n    // Zero wide is a broken image, or an SVG with no intrinsic size in an engine\n    // that reports it as 0 — only the element can tell. Setting `src` to the\n    // value it already has makes it fire `load` or `error` again, to listeners\n    // that exist now.\n    const src = img.getAttribute('src');\n    if (src !== null) img.setAttribute('src', src);\n  }\n\n  protected readonly resolved = computed<ResolvedCssSize>(() => {\n    const result = resolveCssSize(this.size(), { defaultValue: DEFAULT_SIZE });\n    if (result.pxValue == null || result.pxValue <= 0) {\n      return resolveCssSize(DEFAULT_SIZE, { defaultValue: DEFAULT_SIZE });\n    }\n    return result;\n  });\n\n  /**\n   * Whether the projected fallback is `aria-hidden`: an `<img>` is in the DOM\n   * (loading or loaded) AND the consumer named it. Then the image's `alt` owns\n   * the name, announced once and unchanged at the moment the photo arrives.\n   * Without a real `alt` the image is only \"Avatar\", and hiding the initials\n   * would drop the one thing that says who this is.\n   *\n   * The stylesheet keys on the same attribute once `--loaded`: a hidden fallback\n   * leaves the paint through `visibility`, a named-by-initials one is clipped and\n   * stays in the accessibility tree. While loading it is painted either way.\n   */\n  protected readonly fallbackHidden = computed(() => !!this.url() && !this.failed() && !!this.alt()?.trim());\n\n  protected readonly cssSize = computed(() => this.resolved().cssValue);\n  protected readonly pxSize = computed(() => this.resolved().pxValue);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-avatar'];\n    const shape = this.shape();\n    if (shape !== 'rounded') parts.push(`wr-avatar--${shape}`);\n    if (this.loaded()) parts.push('wr-avatar--loaded');\n    return parts.join(' ');\n  });\n\n  protected onImageLoad(): void {\n    this.loaded.set(true);\n  }\n\n  protected onImageError(): void {\n    this.failed.set(true);\n  }\n}\n","<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-avatar.mjs","sources":["../../../projects/lib/avatar/avatar.ts","../../../projects/lib/avatar/avatar.html","../../../projects/lib/avatar/ngwr-avatar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport {\n  Component,\n  type ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  input,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrSpinner } from 'ngwr/spinner';\nimport { resolveCssSize, type ResolvedCssSize } from 'ngwr/utils';\n\nimport type { WrAvatarShape, WrAvatarSize } from './interfaces';\n\nconst DEFAULT_SIZE: WrAvatarSize = '6rem';\n\n/**\n * Image avatar with configurable corner treatment.\n *\n * Projected content (typically initials) is the FALLBACK: it shows with no\n * `url`, while the image loads and after it fails, and leaves the paint once the\n * image has loaded. It is projected into a `.wr-avatar__content` wrapper, so a\n * `wr-avatar > …` child selector no longer reaches it. While it is there, no\n * spinner is drawn over it; with nothing projected, the spinner marks the\n * loading state instead. See `alt` for what a screen reader hears.\n *\n * Projected initials take the text size around the avatar, capped at\n * `--wr-avatar-initials-scale` (`0.375`) of the box, so they shrink only where\n * they would not fit: a 16px avatar in a 14px chip draws 6px letters, while a\n * `6rem` one keeps the surrounding size up to 36px and is capped only past it.\n * Anything projected that is sized in `em` follows the cap too — a `<wr-icon>`\n * at its default `1.2em` included — so pin a `px` or `rem` size on the projected\n * element, or override the hook, to keep it. A `font-size` rule on the avatar\n * itself still wins, unless it sits in a cascade layer (Tailwind v4's utilities\n * do), which ngwr's unlayered stylesheet beats whatever the selector.\n *\n * The initials are inert: `pointer-events: none` hands a click on them to whatever\n * holds the avatar, and `user-select: none` keeps them out of a text selection.\n *\n * @example\n * ```html\n * <wr-avatar url=\"/me.png\" alt=\"Roman\" size=\"3rem\" shape=\"circle\" />\n * <wr-avatar [url]=\"photo\" alt=\"Roman Khegay\" [size]=\"48\">RK</wr-avatar>\n * ```\n *\n * @see https://ngwr.dev/reference/components/avatar\n */\n@Component({\n  selector: 'wr-avatar',\n  templateUrl: './avatar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'cssSize()',\n    '[style.height]': 'cssSize()',\n    // What the stylesheet sizes projected initials against. Always px or rem: a\n    // value `resolveCssSize` has no pixels for falls back to the default box.\n    '[style.--wr-avatar-size]': 'cssSize()',\n  },\n  imports: [WrSpinner],\n})\nexport class WrAvatar {\n  /**\n   * Image URL. Projected content (e.g. initials) shows while it is unset,\n   * loading or broken, and gives way once the image has loaded.\n   *\n   * @default null\n   */\n  readonly url = input<string | null>(null);\n\n  /**\n   * Alt text for the image. Falls back to `avatar.alt`, then `'Avatar'` — pass\n   * the person's name where you have it, since that is what a reader wants.\n   *\n   * With an `alt`, projected initials are hidden from assistive technology while\n   * an image is in play, so the name is announced once. Without one, the image\n   * carries only the generic name, so the initials stay announced beside it —\n   * visually hidden once it has loaded, never dropped.\n   *\n   * @default null\n   */\n  readonly alt = input<string | null>(null);\n\n  protected readonly resolvedAlt = useI18nText(this.alt, 'avatar.alt', 'Avatar');\n\n  /**\n   * Corner treatment. `rounded` (default) is a soft rounded square,\n   * `circle` is the classic profile avatar, `squircle` is the iOS look.\n   *\n   * @default 'rounded'\n   */\n  readonly shape = input<WrAvatarShape>('rounded');\n\n  /**\n   * Box size. See {@link WrAvatarSize} for accepted values. The resolved value is\n   * published on the host as `--wr-avatar-size`.\n   *\n   * @default '6rem'\n   */\n  readonly size = input<WrAvatarSize>(DEFAULT_SIZE);\n\n  protected readonly loaded = signal(false);\n\n  /**\n   * Whether the image failed. Without this the spinner spun forever on a broken\n   * URL — the one state where an avatar is guaranteed to have projected initials\n   * worth showing instead.\n   */\n  protected readonly failed = signal(false);\n\n  private readonly img = viewChild<ElementRef<HTMLImageElement>>('img');\n\n  constructor() {\n    // A new URL is a new attempt: after a failure the fallback would otherwise\n    // stay put for an image that loads perfectly well.\n    effect(() => {\n      this.url();\n      untracked(() => {\n        this.loaded.set(false);\n        this.failed.set(false);\n      });\n    });\n\n    afterNextRender(() => this.adoptSettledImage());\n  }\n\n  /**\n   * A prerendered `<img>` starts loading when the browser parses the HTML, and\n   * `(load)` / `(error)` are only attached at hydration — so on a slow bundle the\n   * image settles first, both events go nowhere, and the avatar sits on its\n   * fallback over a photo it already has (or names a broken image it never\n   * learns about). Only the FIRST render can race: every later `<img>` is\n   * created on the client with its listeners in place before `src` is set.\n   */\n  private adoptSettledImage(): void {\n    const img = this.img()?.nativeElement;\n    if (!img?.complete || this.loaded() || this.failed()) return;\n\n    if (img.naturalWidth > 0) {\n      this.loaded.set(true);\n      return;\n    }\n\n    // Zero wide is a broken image, or an SVG with no intrinsic size in an engine\n    // that reports it as 0 — only the element can tell. Setting `src` to the\n    // value it already has makes it fire `load` or `error` again, to listeners\n    // that exist now.\n    const src = img.getAttribute('src');\n    if (src !== null) img.setAttribute('src', src);\n  }\n\n  protected readonly resolved = computed<ResolvedCssSize>(() => {\n    const result = resolveCssSize(this.size(), { defaultValue: DEFAULT_SIZE });\n    if (result.pxValue == null || result.pxValue <= 0) {\n      return resolveCssSize(DEFAULT_SIZE, { defaultValue: DEFAULT_SIZE });\n    }\n    return result;\n  });\n\n  /**\n   * Whether the projected fallback is `aria-hidden`: an `<img>` is in the DOM\n   * (loading or loaded) AND the consumer named it. Then the image's `alt` owns\n   * the name, announced once and unchanged at the moment the photo arrives.\n   * Without a real `alt` the image is only \"Avatar\", and hiding the initials\n   * would drop the one thing that says who this is.\n   *\n   * The stylesheet keys on the same attribute once `--loaded`: a hidden fallback\n   * leaves the paint through `visibility`, a named-by-initials one is clipped and\n   * stays in the accessibility tree. While loading it is painted either way.\n   */\n  protected readonly fallbackHidden = computed(() => !!this.url() && !this.failed() && !!this.alt()?.trim());\n\n  protected readonly cssSize = computed(() => this.resolved().cssValue);\n  protected readonly pxSize = computed(() => this.resolved().pxValue);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-avatar'];\n    const shape = this.shape();\n    if (shape !== 'rounded') parts.push(`wr-avatar--${shape}`);\n    if (this.loaded()) parts.push('wr-avatar--loaded');\n    return parts.join(' ');\n  });\n\n  protected onImageLoad(): void {\n    this.loaded.set(true);\n  }\n\n  protected onImageError(): void {\n    this.failed.set(true);\n  }\n}\n","<span class=\"wr-avatar__content\" [attr.aria-hidden]=\"fallbackHidden() ? 'true' : null\"><ng-content /></span>\n\n@if (url(); as src) {\n  @if (!failed()) {\n    <img\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-bar-chart.mjs

@@ -1,6 +1,7 @@
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, viewChildren, computed, ViewEncapsulation, Component } from '@angular/core';
+import { useChartTooltip } from 'ngwr/popover';
 
 /**
  * @license
@@ -35,6 +36,13 @@ class WrBarChart {
     height = input(200, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(40, coerceNumberProperty(v, 200)) });
     /** Explicit max value. `0` = auto. @default 0 */
     max = input(0, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /**
+     * Show a tooltip with the bar's label and value on hover. Pointer only — the
+     * column's accessible name already carries both. @default true
+     */
+    tooltip = input(true, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    barEls = viewChildren('barEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barEls" }] : /* istanbul ignore next */ []));
     /**
      * A datum's value, with anything non-finite read as `0`.
      *
@@ -74,13 +82,30 @@ class WrBarChart {
         };
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    /**
+     * One tooltip for the whole chart, with the value exactly as it is printed above
+     * the bar. It points at the top edge of the BAR — above it, below it when there is
+     * no room — rather than at the column, which is the full height of the plot and
+     * would put the chip above every bar alike. A bar with nothing to draw (zero, a
+     * negative value) keeps its 1px floor on the baseline, so its chip points there.
+     *
+     * The bar is the anchor element itself, so an open chip follows it through the
+     * height transition a data change starts.
+     */
+    tip = useChartTooltip(this.tooltip, index => {
+        const bar = this.bars()[index];
+        const anchor = this.barEls()[index]?.nativeElement;
+        if (!bar || !anchor)
+            return null;
+        return { datum: { label: bar.label, value: String(bar.value), color: bar.color }, anchor };
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, viewQueries: [{ propertyName: "barEls", predicate: ["barEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"wr-bar-chart__column\"\n      role=\"img\"\n      [attr.aria-label]=\"bar.name\"\n      (mouseenter)=\"tip.enter($index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    >\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div #barEl 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.6", 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 }] }] } });
+            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\n      class=\"wr-bar-chart__column\"\n      role=\"img\"\n      [attr.aria-label]=\"bar.name\"\n      (mouseenter)=\"tip.enter($index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    >\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div #barEl 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 }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], barEls: [{ type: i0.ViewChildren, args: ['barEl', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ngwr-bar-chart.mjs","sources":["../../../projects/lib/bar-chart/bar-chart.ts","../../../projects/lib/bar-chart/bar-chart.html","../../../projects/lib/bar-chart/ngwr-bar-chart.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrBarChartDatum } from './interfaces';\n\n/**\n * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.\n * Axis-free; for the simple \"show me a comparison\" case.\n *\n * @example\n * ```html\n * <wr-bar-chart [data]=\"[\n *   { label: 'Mon', value: 12 },\n *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },\n *   { label: 'Wed', value: 9 }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/bar-chart\n */\n@Component({\n  selector: 'wr-bar-chart',\n  templateUrl: './bar-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-bar-chart' },\n})\nexport class WrBarChart {\n  readonly data = input<readonly WrBarChartDatum[]>([]);\n\n  /** Default bar colour when a datum has none. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Show value labels above each bar. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /** Pixel height of the chart area. @default 200 */\n  readonly height = input(200, { transform: (v: unknown): number => Math.max(40, coerceNumberProperty(v, 200)) });\n\n  /** Explicit max value. `0` = auto. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /**\n   * A datum's value, with anything non-finite read as `0`.\n   *\n   * One `NaN` used to take out the whole chart rather than its own bar:\n   * `Math.max(...values)` is `NaN` as soon as one value is, so the scale fell\n   * back to `1` and every OTHER bar was asked for a height of `value * 100`%.\n   * The bad bar also printed the literal text `NaN` above itself.\n   */\n  private static value(raw: number): number {\n    return Number.isFinite(raw) ? raw : 0;\n  }\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const data = this.data();\n    if (data.length === 0) return 1;\n    const top = Math.max(...data.map(d => WrBarChart.value(d.value)), 0);\n    return top > 0 ? top : 1;\n  });\n\n  protected readonly bars = computed(() =>\n    this.data().map(d => {\n      const value = WrBarChart.value(d.value);\n      return {\n        label: d.label,\n        value,\n        color: d.color ?? this.color(),\n        heightPercent: (Math.max(0, value) / this.resolvedMax()) * 100,\n        /**\n         * The bar's accessible name. The label and the value sit in separate\n         * rows, so a screen reader read every number and then every label with\n         * nothing tying the two together — and with `showValues` off the\n         * numbers were not in the accessible tree at all.\n         */\n        name: `${d.label}: ${value}`,\n      };\n    })\n  );\n}\n\nexport type { WrBarChartDatum } from './interfaces';\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;AAcG;MAOU,UAAU,CAAA;IACZ,IAAI,GAAG,KAAK,CAA6B,EAAE;6EAAC;;IAG5C,KAAK,GAAG,KAAK,CAAS,yBAAyB;8EAAC;;IAGhD,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG9D,MAAM,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAAG;;IAGtG,GAAG,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,KAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;AAEvG;;;;;;;AAOG;IACK,OAAO,KAAK,CAAC,GAAW,EAAA;AAC9B,QAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IACvC;AAEmB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE;QAC3B,IAAI,QAAQ,GAAG,CAAC;AAAE,YAAA,OAAO,QAAQ;AACjC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACpE,OAAO,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IAC1B,CAAC;oFAAC;AAEiB,IAAA,IAAI,GAAG,QAAQ,CAAC,MACjC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAG;QAClB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QACvC,OAAO;YACL,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,KAAK;YACL,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;AAC9B,YAAA,aAAa,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG;AAC9D;;;;;AAKG;AACH,YAAA,IAAI,EAAE,CAAA,EAAG,CAAC,CAAC,KAAK,CAAA,EAAA,EAAK,KAAK,CAAA,CAAE;SAC7B;AACH,IAAA,CAAC,CAAC;6EACH;uGArDU,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,+tBCjCvB,8rBAgBA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDiBa,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;+BACE,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,QAC/B,EAAE,KAAK,EAAE,cAAc,EAAE,EAAA,QAAA,EAAA,8rBAAA,EAAA;;;AE/BjC;;AAEG;;;;"}
+{"version":3,"file":"ngwr-bar-chart.mjs","sources":["../../../projects/lib/bar-chart/bar-chart.ts","../../../projects/lib/bar-chart/bar-chart.html","../../../projects/lib/bar-chart/ngwr-bar-chart.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, type ElementRef, ViewEncapsulation, computed, input, viewChildren } from '@angular/core';\n\nimport { useChartTooltip } from 'ngwr/popover';\n\nimport type { WrBarChartDatum } from './interfaces';\n\n/**\n * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.\n * Axis-free; for the simple \"show me a comparison\" case.\n *\n * @example\n * ```html\n * <wr-bar-chart [data]=\"[\n *   { label: 'Mon', value: 12 },\n *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },\n *   { label: 'Wed', value: 9 }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/bar-chart\n */\n@Component({\n  selector: 'wr-bar-chart',\n  templateUrl: './bar-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-bar-chart' },\n})\nexport class WrBarChart {\n  readonly data = input<readonly WrBarChartDatum[]>([]);\n\n  /** Default bar colour when a datum has none. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Show value labels above each bar. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /** Pixel height of the chart area. @default 200 */\n  readonly height = input(200, { transform: (v: unknown): number => Math.max(40, coerceNumberProperty(v, 200)) });\n\n  /** Explicit max value. `0` = auto. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /**\n   * Show a tooltip with the bar's label and value on hover. Pointer only — the\n   * column's accessible name already carries both. @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  private readonly barEls = viewChildren<ElementRef<HTMLElement>>('barEl');\n\n  /**\n   * A datum's value, with anything non-finite read as `0`.\n   *\n   * One `NaN` used to take out the whole chart rather than its own bar:\n   * `Math.max(...values)` is `NaN` as soon as one value is, so the scale fell\n   * back to `1` and every OTHER bar was asked for a height of `value * 100`%.\n   * The bad bar also printed the literal text `NaN` above itself.\n   */\n  private static value(raw: number): number {\n    return Number.isFinite(raw) ? raw : 0;\n  }\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const data = this.data();\n    if (data.length === 0) return 1;\n    const top = Math.max(...data.map(d => WrBarChart.value(d.value)), 0);\n    return top > 0 ? top : 1;\n  });\n\n  protected readonly bars = computed(() =>\n    this.data().map(d => {\n      const value = WrBarChart.value(d.value);\n      return {\n        label: d.label,\n        value,\n        color: d.color ?? this.color(),\n        heightPercent: (Math.max(0, value) / this.resolvedMax()) * 100,\n        /**\n         * The bar's accessible name. The label and the value sit in separate\n         * rows, so a screen reader read every number and then every label with\n         * nothing tying the two together — and with `showValues` off the\n         * numbers were not in the accessible tree at all.\n         */\n        name: `${d.label}: ${value}`,\n      };\n    })\n  );\n\n  /**\n   * One tooltip for the whole chart, with the value exactly as it is printed above\n   * the bar. It points at the top edge of the BAR — above it, below it when there is\n   * no room — rather than at the column, which is the full height of the plot and\n   * would put the chip above every bar alike. A bar with nothing to draw (zero, a\n   * negative value) keeps its 1px floor on the baseline, so its chip points there.\n   *\n   * The bar is the anchor element itself, so an open chip follows it through the\n   * height transition a data change starts.\n   */\n  protected readonly tip = useChartTooltip(this.tooltip, index => {\n    const bar = this.bars()[index];\n    const anchor = this.barEls()[index]?.nativeElement;\n    if (!bar || !anchor) return null;\n    return { datum: { label: bar.label, value: String(bar.value), color: bar.color }, anchor };\n  });\n}\n\nexport type { WrBarChartDatum } from './interfaces';\n","<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"wr-bar-chart__column\"\n      role=\"img\"\n      [attr.aria-label]=\"bar.name\"\n      (mouseenter)=\"tip.enter($index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    >\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div #barEl 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AASH;;;;;;;;;;;;;;AAcG;MAOU,UAAU,CAAA;IACZ,IAAI,GAAG,KAAK,CAA6B,EAAE;6EAAC;;IAG5C,KAAK,GAAG,KAAK,CAAS,yBAAyB;8EAAC;;IAGhD,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG9D,MAAM,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAAG;;IAGtG,GAAG,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,KAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;AAEvG;;;AAGG;IACM,OAAO,GAAG,KAAK,CAAC,IAAI,+EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;IAEnD,MAAM,GAAG,YAAY,CAA0B,OAAO;+EAAC;AAExE;;;;;;;AAOG;IACK,OAAO,KAAK,CAAC,GAAW,EAAA;AAC9B,QAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IACvC;AAEmB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE;QAC3B,IAAI,QAAQ,GAAG,CAAC;AAAE,YAAA,OAAO,QAAQ;AACjC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACpE,OAAO,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IAC1B,CAAC;oFAAC;AAEiB,IAAA,IAAI,GAAG,QAAQ,CAAC,MACjC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAG;QAClB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QACvC,OAAO;YACL,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,KAAK;YACL,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;AAC9B,YAAA,aAAa,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG;AAC9D;;;;;AAKG;AACH,YAAA,IAAI,EAAE,CAAA,EAAG,CAAC,CAAC,KAAK,CAAA,EAAA,EAAK,KAAK,CAAA,CAAE;SAC7B;AACH,IAAA,CAAC,CAAC;6EACH;AAED;;;;;;;;;AASG;IACgB,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,IAAG;QAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC;QAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa;AAClD,QAAA,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;AAChC,QAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE;AAC5F,IAAA,CAAC,CAAC;uGA9ES,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,i8BCnCvB,ozBAsBA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDaa,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;+BACE,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,QAC/B,EAAE,KAAK,EAAE,cAAc,EAAE,EAAA,QAAA,EAAA,ozBAAA,EAAA;6mBAuBiC,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AExDzE;;AAEG;;;;"}