ngwr 10.2.0 → 11.0.0

package/fesm2022/ngwr-compare.mjs

@@ -1,6 +1,9 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { model, input, inject, ElementRef, computed, ViewEncapsulation, Component } from '@angular/core';
+import { model, input, inject, ElementRef, signal, effect, computed, ViewEncapsulation, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { useI18nText } from 'ngwr/i18n';
 import { clamp } from 'ngwr/utils';
 
 /**
@@ -28,12 +31,31 @@ import { clamp } from 'ngwr/utils';
  * </wr-compare>
  * ```
  *
+ * Under `dir="rtl"` the horizontal wipe MIRRORS: "before" occupies the inline-start
+ * side, which is the right. Before/after is an ordinal pair — the two ends of a
+ * progression — and ordinal progressions follow reading order, the same reason a
+ * progress bar fills from the right in Arabic. The LTR habit of putting "before" on
+ * the left IS reading order, so mirroring preserves that intent rather than breaking
+ * it. Nothing is flipped pixel-wise: both layers are the images the consumer passed,
+ * unscaled and unmirrored — only the side each is revealed on changes.
+ *
+ * Pinning the physical arrangement inside an RTL page takes the CDK's `Dir` directive
+ * (`[dir]`, from `@angular/cdk/bidi`) on a wrapper, because that is what provides a
+ * scoped `Directionality`. A bare `dir="ltr"` attribute does NOT do it: the ambient
+ * `Directionality` reads `<html>` / `<body>` once at startup and never looks at the
+ * element, and this component's horizontal wipe is painted entirely from TypeScript,
+ * so the attribute would change nothing at all while looking like an opt-out.
+ *
  * @see https://ngwr.dev/reference/components/compare
  */
 class WrCompare {
     /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */
     position = model(50, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the divider. Falls back to `compare.label`. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = useI18nText(this.ariaLabel, 'compare.label', 'Comparison divider');
     /**
      * Divider direction:
      * - `'horizontal'` — divider line is vertical, drags left/right.
@@ -50,7 +72,30 @@ class WrCompare {
     minPosition = input(0, { ...(ngDevMode ? { debugName: "minPosition" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 0) });
     maxPosition = input(100, { ...(ngDevMode ? { debugName: "maxPosition" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 100) });
     host = inject(ElementRef);
+    // Optional on purpose: `Directionality` is root-provided, so a consumer never has to
+    // supply it — and a bare `TestBed` does not either.
+    dir = inject(Directionality, { optional: true });
+    /**
+     * Reading direction as a signal, because unlike the splitter this component PAINTS
+     * from it: the clip and the divider offset are both direction-derived, and
+     * `Directionality.value` is an ordinary read. A `dir` flip at runtime would otherwise
+     * leave the wipe on the side the page no longer uses until some unrelated position
+     * change happened to recompute it.
+     */
+    rtl = signal(this.dir?.value === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
     dragging = false;
+    constructor() {
+        this.dir?.change.pipe(takeUntilDestroyed()).subscribe(value => this.rtl.set(value === 'rtl'));
+        // `position` is a `model`, so `[(position)]` and a restored layout write into it
+        // directly while only the handlers clamped — an out-of-range write reached the DOM
+        // as `aria-valuenow="150"` against a `valuemax` of 100.
+        effect(() => {
+            const clamped = clamp(this.position(), this.minPosition(), this.maxPosition());
+            if (clamped !== this.position())
+                this.position.set(clamped);
+        });
+    }
     classes = computed(() => {
         const parts = ['wr-compare', `wr-compare--${this.orientation()}`];
         if (this.disabled())
@@ -58,23 +103,46 @@ class WrCompare {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    /** Clip path applied to the "after" layer so the divider reveals it. */
+    /**
+     * Clip path applied to the "after" layer so the divider reveals it.
+     *
+     * `inset()` takes PHYSICAL edges and has no logical form, so the mirroring is done
+     * here rather than in CSS: `position` counts from the inline-start edge, and under
+     * RTL that edge is the right one, so the after layer is clipped from the right by
+     * the same percentage.
+     */
     clipPath = computed(() => {
         const p = clamp(this.position(), 0, 100);
         if (this.orientation() === 'horizontal') {
-            // Show from `p%` to the right edge.
-            return `inset(0 0 0 ${p}%)`;
+            // Show from `p%` to the inline-end edge.
+            return this.rtl() ? `inset(0 ${p}% 0 0)` : `inset(0 0 0 ${p}%)`;
         }
+        // Block axis: `dir` does not touch it.
         return `inset(${p}% 0 0 0)`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clipPath" }] : /* istanbul ignore next */ []));
+    /**
+     * Physical `left` percentage of the divider. Deliberately physical: it pairs with the
+     * `translateX(-50%)` that centres the 2px line on its own position, and the two have
+     * to agree on which edge they count from. `position` is logical, so RTL flips it here.
+     */
+    dividerLeft = computed(() => (this.rtl() ? 100 - this.position() : this.position()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dividerLeft" }] : /* istanbul ignore next */ []));
     // Pointer handlers
     onPointerDown(event) {
         if (this.disabled())
             return;
+        // Any pointerdown used to start a drag, so the right button moved the divider; the
+        // same guard keeps a second finger out of a drag already in progress.
+        if (event.button !== 0 || !event.isPrimary)
+            return;
         event.preventDefault();
         this.dragging = true;
-        event.currentTarget.setPointerCapture(event.pointerId);
+        const surface = event.currentTarget;
+        surface.setPointerCapture(event.pointerId);
+        // `preventDefault` above also suppresses the click's default focus, so the arrows
+        // did nothing after a mouse drag until the divider was found again with Tab.
+        surface.focus();
         this.updateFromPointer(event);
     }
     onPointerMove(event) {
@@ -94,17 +162,23 @@ class WrCompare {
         const step = event.shiftKey ? 10 : 1;
         let next = null;
         if (this.orientation() === 'horizontal') {
+            // Arrows follow the VISUAL axis (WAI-ARIA APG). Under `dir="rtl"` the "before"
+            // side grows from the right, so the visual right is the low end of this slider's
+            // range and ArrowRight has to decrease the value.
+            const inline = this.rtl() ? -step : step;
             if (event.key === 'ArrowLeft')
-                next = this.position() - step;
+                next = this.position() - inline;
             else if (event.key === 'ArrowRight')
-                next = this.position() + step;
+                next = this.position() + inline;
         }
         else {
+            // Block axis: unaffected by `dir`.
             if (event.key === 'ArrowUp')
                 next = this.position() - step;
             else if (event.key === 'ArrowDown')
                 next = this.position() + step;
         }
+        // Home/End are semantic — first/last, not left/right — so they never mirror.
         if (event.key === 'Home')
             next = this.minPosition();
         else if (event.key === 'End')
@@ -116,18 +190,34 @@ class WrCompare {
     }
     updateFromPointer(event) {
         const rect = this.host.nativeElement.getBoundingClientRect();
-        const raw = this.orientation() === 'horizontal'
-            ? ((event.clientX - rect.left) / rect.width) * 100
-            : ((event.clientY - rect.top) / rect.height) * 100;
+        const horizontal = this.orientation() === 'horizontal';
+        const extent = horizontal ? rect.width : rect.height;
+        // A host that has not been laid out — hidden, detached, or a pane the browser has
+        // throttled — measures 0, and dividing by it puts `Infinity` or `NaN` straight into
+        // `aria-valuenow`. There is no meaningful position to compute, so keep the current one.
+        if (extent <= 0)
+            return;
+        const raw = horizontal
+            ? this.inlineFraction(event.clientX, rect) * 100
+            : ((event.clientY - rect.top) / extent) * 100;
         this.position.set(clamp(raw, this.minPosition(), this.maxPosition()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCompare, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrCompare, isStandalone: true, selector: "wr-compare", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minPosition: { classPropertyName: "minPosition", publicName: "minPosition", isSignal: true, isRequired: false, transformFunction: null }, maxPosition: { classPropertyName: "maxPosition", publicName: "maxPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    /**
+     * Fraction of the host measured from the INLINE-START edge — the left edge in LTR, the
+     * right edge in RTL, which is the side "before" is revealed from. Taken from
+     * `rect.left` in both, a drag under `dir="rtl"` read 0 at the visual maximum and moved
+     * the divider opposite the pointer.
+     */
+    inlineFraction(clientX, rect) {
+        return this.rtl() ? (rect.right - clientX) / rect.width : (clientX - rect.left) / rect.width;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCompare, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrCompare, isStandalone: true, selector: "wr-compare", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minPosition: { classPropertyName: "minPosition", publicName: "minPosition", isSignal: true, isRequired: false, transformFunction: null }, maxPosition: { classPropertyName: "maxPosition", publicName: "maxPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? dividerLeft() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCompare, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCompare, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-compare', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "minPosition", required: false }] }], maxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPosition", required: false }] }] } });
+            args: [{ selector: 'wr-compare', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? dividerLeft() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "minPosition", required: false }] }], maxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPosition", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-compare.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-compare.mjs","sources":["../../../projects/lib/compare/compare.ts","../../../projects/lib/compare/compare.html","../../../projects/lib/compare/ngwr-compare.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ElementRef, ViewEncapsulation, computed, inject, input, model } from '@angular/core';\n\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Before/after comparison slider. Works with any content — project two\n * pieces of markup with `wrCompareBefore` and `wrCompareAfter` attributes;\n * the component stacks them in the same cell and clips the \"after\" side\n * with a draggable divider.\n *\n * @example\n * ```html\n * <wr-compare [(position)]=\"pos\">\n *   <img wrCompareBefore src=\"before.jpg\" alt=\"\" />\n *   <img wrCompareAfter src=\"after.jpg\" alt=\"\" />\n * </wr-compare>\n *\n * <wr-compare orientation=\"vertical\">\n *   <pre wrCompareBefore>{{ oldCode }}</pre>\n *   <pre wrCompareAfter>{{ newCode }}</pre>\n * </wr-compare>\n * ```\n *\n * @see https://ngwr.dev/reference/components/compare\n */\n@Component({\n  selector: 'wr-compare',\n  templateUrl: './compare.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrCompare {\n  /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */\n  readonly position = model(50);\n\n  /**\n   * Divider direction:\n   * - `'horizontal'` — divider line is vertical, drags left/right.\n   * - `'vertical'`   — divider line is horizontal, drags up/down.\n   * @default 'horizontal'\n   */\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /** Show the round drag handle on the divider. @default true */\n  readonly showHandle = input(true, { transform: coerceBooleanProperty });\n\n  /** Disable interaction (divider stays put). @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Initial position transform — accepts any number / numeric string. */\n  readonly minPosition = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  readonly maxPosition = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private dragging = false;\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-compare', `wr-compare--${this.orientation()}`];\n    if (this.disabled()) parts.push('wr-compare--disabled');\n    return parts.join(' ');\n  });\n\n  /** Clip path applied to the \"after\" layer so the divider reveals it. */\n  protected readonly clipPath = computed(() => {\n    const p = clamp(this.position(), 0, 100);\n    if (this.orientation() === 'horizontal') {\n      // Show from `p%` to the right edge.\n      return `inset(0 0 0 ${p}%)`;\n    }\n    return `inset(${p}% 0 0 0)`;\n  });\n\n  // Pointer handlers\n\n  protected onPointerDown(event: PointerEvent): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    this.dragging = true;\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.dragging = false;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (this.disabled()) return;\n    const step = event.shiftKey ? 10 : 1;\n    let next: number | null = null;\n    if (this.orientation() === 'horizontal') {\n      if (event.key === 'ArrowLeft') next = this.position() - step;\n      else if (event.key === 'ArrowRight') next = this.position() + step;\n    } else {\n      if (event.key === 'ArrowUp') next = this.position() - step;\n      else if (event.key === 'ArrowDown') next = this.position() + step;\n    }\n    if (event.key === 'Home') next = this.minPosition();\n    else if (event.key === 'End') next = this.maxPosition();\n    if (next === null) return;\n    event.preventDefault();\n    this.position.set(clamp(next, this.minPosition(), this.maxPosition()));\n  }\n\n  private updateFromPointer(event: PointerEvent): void {\n    const rect = this.host.nativeElement.getBoundingClientRect();\n    const raw =\n      this.orientation() === 'horizontal'\n        ? ((event.clientX - rect.left) / rect.width) * 100\n        : ((event.clientY - rect.top) / rect.height) * 100;\n    this.position.set(clamp(raw, this.minPosition(), this.maxPosition()));\n  }\n}\n","<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;;;;;;;AAoBG;MAOU,SAAS,CAAA;;IAEX,QAAQ,GAAG,KAAK,CAAC,EAAE;iFAAC;AAE7B;;;;;AAKG;IACM,WAAW,GAAG,KAAK,CAA4B,YAAY;oFAAC;;IAG5D,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG9D,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;AAG7D,IAAA,WAAW,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,aAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;AACzF,IAAA,WAAW,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,aAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG;AAErF,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC;IAC3D,QAAQ,GAAG,KAAK;AAEL,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,YAAY,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,WAAW,EAAE,CAAA,CAAE,CAAC;QACjE,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC;AACvD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;;AAGiB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAC1C,QAAA,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC;AACxC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE;;YAEvC,OAAO,CAAA,YAAA,EAAe,CAAC,CAAA,EAAA,CAAI;QAC7B;QACA,OAAO,CAAA,MAAA,EAAS,CAAC,CAAA,QAAA,CAAU;IAC7B,CAAC;iFAAC;;AAIQ,IAAA,aAAa,CAAC,KAAmB,EAAA;QACzC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QACrB,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACnB,KAAK,CAAC,aAA6B,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;AACvE,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IAC/B;AAEU,IAAA,aAAa,CAAC,KAAmB,EAAA;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IAC/B;AAEU,IAAA,WAAW,CAAC,KAAmB,EAAA;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;QACpB,KAAK,CAAC,aAA6B,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC;IAC7E;AAEU,IAAA,SAAS,CAAC,KAAoB,EAAA;QACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;AACrB,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC;QACpC,IAAI,IAAI,GAAkB,IAAI;AAC9B,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE;AACvC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;AAAE,gBAAA,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;AACvD,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY;AAAE,gBAAA,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;QACpE;aAAO;AACL,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS;AAAE,gBAAA,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;AACrD,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;AAAE,gBAAA,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;QACnE;AACA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM;AAAE,YAAA,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;AAC9C,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK;AAAE,YAAA,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;QACvD,IAAI,IAAI,KAAK,IAAI;YAAE;QACnB,KAAK,CAAC,cAAc,EAAE;QACtB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IACxE;AAEQ,IAAA,iBAAiB,CAAC,KAAmB,EAAA;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAC5D,QAAA,MAAM,GAAG,GACP,IAAI,CAAC,WAAW,EAAE,KAAK;AACrB,cAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI;AAC/C,cAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG;QACtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IACvE;uGAvFW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,k9BCvCtB,ohEA4DA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDrBa,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,aAAA,EAEP,iBAAiB,CAAC,IAAI,QAC/B,EAAE,SAAS,EAAE,WAAW,EAAE,EAAA,QAAA,EAAA,ohEAAA,EAAA;;;AErClC;;AAEG;;;;"}
+{"version":3,"file":"ngwr-compare.mjs","sources":["../../../projects/lib/compare/compare.ts","../../../projects/lib/compare/compare.html","../../../projects/lib/compare/ngwr-compare.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 { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Before/after comparison slider. Works with any content — project two\n * pieces of markup with `wrCompareBefore` and `wrCompareAfter` attributes;\n * the component stacks them in the same cell and clips the \"after\" side\n * with a draggable divider.\n *\n * @example\n * ```html\n * <wr-compare [(position)]=\"pos\">\n *   <img wrCompareBefore src=\"before.jpg\" alt=\"\" />\n *   <img wrCompareAfter src=\"after.jpg\" alt=\"\" />\n * </wr-compare>\n *\n * <wr-compare orientation=\"vertical\">\n *   <pre wrCompareBefore>{{ oldCode }}</pre>\n *   <pre wrCompareAfter>{{ newCode }}</pre>\n * </wr-compare>\n * ```\n *\n * Under `dir=\"rtl\"` the horizontal wipe MIRRORS: \"before\" occupies the inline-start\n * side, which is the right. Before/after is an ordinal pair — the two ends of a\n * progression — and ordinal progressions follow reading order, the same reason a\n * progress bar fills from the right in Arabic. The LTR habit of putting \"before\" on\n * the left IS reading order, so mirroring preserves that intent rather than breaking\n * it. Nothing is flipped pixel-wise: both layers are the images the consumer passed,\n * unscaled and unmirrored — only the side each is revealed on changes.\n *\n * Pinning the physical arrangement inside an RTL page takes the CDK's `Dir` directive\n * (`[dir]`, from `@angular/cdk/bidi`) on a wrapper, because that is what provides a\n * scoped `Directionality`. A bare `dir=\"ltr\"` attribute does NOT do it: the ambient\n * `Directionality` reads `<html>` / `<body>` once at startup and never looks at the\n * element, and this component's horizontal wipe is painted entirely from TypeScript,\n * so the attribute would change nothing at all while looking like an opt-out.\n *\n * @see https://ngwr.dev/reference/components/compare\n */\n@Component({\n  selector: 'wr-compare',\n  templateUrl: './compare.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrCompare {\n  /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */\n  readonly position = model(50);\n\n  /** Accessible name of the divider. Falls back to `compare.label`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'compare.label', 'Comparison divider');\n\n  /**\n   * Divider direction:\n   * - `'horizontal'` — divider line is vertical, drags left/right.\n   * - `'vertical'`   — divider line is horizontal, drags up/down.\n   * @default 'horizontal'\n   */\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /** Show the round drag handle on the divider. @default true */\n  readonly showHandle = input(true, { transform: coerceBooleanProperty });\n\n  /** Disable interaction (divider stays put). @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Initial position transform — accepts any number / numeric string. */\n  readonly minPosition = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  readonly maxPosition = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  // Optional on purpose: `Directionality` is root-provided, so a consumer never has to\n  // supply it — and a bare `TestBed` does not either.\n  private readonly dir = inject(Directionality, { optional: true });\n\n  /**\n   * Reading direction as a signal, because unlike the splitter this component PAINTS\n   * from it: the clip and the divider offset are both direction-derived, and\n   * `Directionality.value` is an ordinary read. A `dir` flip at runtime would otherwise\n   * leave the wipe on the side the page no longer uses until some unrelated position\n   * change happened to recompute it.\n   */\n  private readonly rtl = signal(this.dir?.value === 'rtl');\n\n  private dragging = false;\n\n  constructor() {\n    this.dir?.change.pipe(takeUntilDestroyed()).subscribe(value => this.rtl.set(value === 'rtl'));\n\n    // `position` is a `model`, so `[(position)]` and a restored layout write into it\n    // directly while only the handlers clamped — an out-of-range write reached the DOM\n    // as `aria-valuenow=\"150\"` against a `valuemax` of 100.\n    effect(() => {\n      const clamped = clamp(this.position(), this.minPosition(), this.maxPosition());\n      if (clamped !== this.position()) this.position.set(clamped);\n    });\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-compare', `wr-compare--${this.orientation()}`];\n    if (this.disabled()) parts.push('wr-compare--disabled');\n    return parts.join(' ');\n  });\n\n  /**\n   * Clip path applied to the \"after\" layer so the divider reveals it.\n   *\n   * `inset()` takes PHYSICAL edges and has no logical form, so the mirroring is done\n   * here rather than in CSS: `position` counts from the inline-start edge, and under\n   * RTL that edge is the right one, so the after layer is clipped from the right by\n   * the same percentage.\n   */\n  protected readonly clipPath = computed(() => {\n    const p = clamp(this.position(), 0, 100);\n    if (this.orientation() === 'horizontal') {\n      // Show from `p%` to the inline-end edge.\n      return this.rtl() ? `inset(0 ${p}% 0 0)` : `inset(0 0 0 ${p}%)`;\n    }\n    // Block axis: `dir` does not touch it.\n    return `inset(${p}% 0 0 0)`;\n  });\n\n  /**\n   * Physical `left` percentage of the divider. Deliberately physical: it pairs with the\n   * `translateX(-50%)` that centres the 2px line on its own position, and the two have\n   * to agree on which edge they count from. `position` is logical, so RTL flips it here.\n   */\n  protected readonly dividerLeft = computed(() => (this.rtl() ? 100 - this.position() : this.position()));\n\n  // Pointer handlers\n\n  protected onPointerDown(event: PointerEvent): void {\n    if (this.disabled()) return;\n    // Any pointerdown used to start a drag, so the right button moved the divider; the\n    // same guard keeps a second finger out of a drag already in progress.\n    if (event.button !== 0 || !event.isPrimary) return;\n    event.preventDefault();\n    this.dragging = true;\n    const surface = event.currentTarget as HTMLElement;\n    surface.setPointerCapture(event.pointerId);\n    // `preventDefault` above also suppresses the click's default focus, so the arrows\n    // did nothing after a mouse drag until the divider was found again with Tab.\n    surface.focus();\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.dragging = false;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (this.disabled()) return;\n    const step = event.shiftKey ? 10 : 1;\n    let next: number | null = null;\n    if (this.orientation() === 'horizontal') {\n      // Arrows follow the VISUAL axis (WAI-ARIA APG). Under `dir=\"rtl\"` the \"before\"\n      // side grows from the right, so the visual right is the low end of this slider's\n      // range and ArrowRight has to decrease the value.\n      const inline = this.rtl() ? -step : step;\n      if (event.key === 'ArrowLeft') next = this.position() - inline;\n      else if (event.key === 'ArrowRight') next = this.position() + inline;\n    } else {\n      // Block axis: unaffected by `dir`.\n      if (event.key === 'ArrowUp') next = this.position() - step;\n      else if (event.key === 'ArrowDown') next = this.position() + step;\n    }\n    // Home/End are semantic — first/last, not left/right — so they never mirror.\n    if (event.key === 'Home') next = this.minPosition();\n    else if (event.key === 'End') next = this.maxPosition();\n    if (next === null) return;\n    event.preventDefault();\n    this.position.set(clamp(next, this.minPosition(), this.maxPosition()));\n  }\n\n  private updateFromPointer(event: PointerEvent): void {\n    const rect = this.host.nativeElement.getBoundingClientRect();\n    const horizontal = this.orientation() === 'horizontal';\n    const extent = horizontal ? rect.width : rect.height;\n    // A host that has not been laid out — hidden, detached, or a pane the browser has\n    // throttled — measures 0, and dividing by it puts `Infinity` or `NaN` straight into\n    // `aria-valuenow`. There is no meaningful position to compute, so keep the current one.\n    if (extent <= 0) return;\n    const raw = horizontal\n      ? this.inlineFraction(event.clientX, rect) * 100\n      : ((event.clientY - rect.top) / extent) * 100;\n    this.position.set(clamp(raw, this.minPosition(), this.maxPosition()));\n  }\n\n  /**\n   * Fraction of the host measured from the INLINE-START edge — the left edge in LTR, the\n   * right edge in RTL, which is the side \"before\" is revealed from. Taken from\n   * `rect.left` in both, a drag under `dir=\"rtl\"` read 0 at the visual maximum and moved\n   * the divider opposite the pointer.\n   */\n  private inlineFraction(clientX: number, rect: DOMRect): number {\n    return this.rtl() ? (rect.right - clientX) / rect.width : (clientX - rect.left) / rect.width;\n  }\n}\n","<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? dividerLeft() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-confetti.mjs

@@ -145,10 +145,10 @@ class WrConfetti {
             this.rafId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrConfetti, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: WrConfetti });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrConfetti, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.1", ngImport: i0, type: WrConfetti });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrConfetti, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrConfetti, decorators: [{
             type: Service
         }] });
 

package/fesm2022/ngwr-config.mjs

@@ -0,0 +1,106 @@
+import { InjectionToken, makeEnvironmentProviders, inject, computed } from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * App-wide component defaults, or `{}` when the app never called
+ * `provideWrConfig()`.
+ *
+ * A factory default rather than an optional inject at every call site: a
+ * component asking for its own default should not have to care whether anyone
+ * configured anything, and `{}` reads the same as absent through
+ * {@link useConfigValue}.
+ */
+const WR_CONFIG = new InjectionToken('WR_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Set app-wide component defaults.
+ *
+ * Nothing is activated by this and no service is constructed — unlike
+ * `provideWrDensity()`, which has to instantiate its service to write an
+ * attribute onto `<html>`. A config is read on demand by whichever component
+ * wants a default, so providing it costs one token.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideWrConfig({ button: { size: 'sm' }, select: { rounded: true } })],
+ * });
+ * ```
+ *
+ * Scoped use works the same way: put it in a route's `providers` and only that
+ * branch of the tree sees it, because the components resolve the token through
+ * their own injector.
+ *
+ * @see https://ngwr.dev/start/configuration
+ */
+function provideWrConfig(config) {
+    return makeEnvironmentProviders([{ provide: WR_CONFIG, useValue: config }]);
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Resolve an input against the app's {@link WrConfig}, then a built-in fallback.
+ *
+ * The same shape as `useI18nText` from `ngwr/i18n`, and for the same reason: a
+ * component's default has three possible sources and exactly one precedence
+ * order, so it is worth writing once.
+ *
+ * 1. What the template bound, if it bound anything.
+ * 2. What `provideWrConfig()` set for this component.
+ * 3. The component's own fallback.
+ *
+ * A bound value always wins. That is what keeps a global config from becoming
+ * something templates have to escape — the mistake NG-ZORRO's `NzConfigService`
+ * is remembered for.
+ *
+ * Call it from a field initializer (it injects), and give the input `null` as its
+ * own default so "not set" is expressible:
+ *
+ * ```ts
+ * readonly size = input<WrButtonSize | null>(null);
+ * protected readonly resolvedSize = useConfigValue(this.size, c => c.button?.size, 'md');
+ * ```
+ *
+ * The generic is the COMPONENT's type, not the config's, so a component whose
+ * size scale is narrower than {@link WrControlSize} stops compiling here rather
+ * than accepting a value it cannot render — the type checker doing the work a
+ * parity script would otherwise have to.
+ */
+function useConfigValue(binding, pick, fallback) {
+    const config = inject(WR_CONFIG);
+    return computed(() => {
+        const bound = binding();
+        // `null` and `undefined` both mean "the template did not say". `false` and
+        // `0` do not, which is why this is not `??` on a falsy check — a
+        // `[rounded]="false"` has to be able to turn a configured `true` back off.
+        if (bound !== null && bound !== undefined)
+            return bound;
+        return pick(config) ?? fallback;
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WR_CONFIG, provideWrConfig, useConfigValue };
+//# sourceMappingURL=ngwr-config.mjs.map

package/fesm2022/ngwr-config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-config.mjs","sources":["../../../projects/lib/config/tokens.ts","../../../projects/lib/config/provide-wr-config.ts","../../../projects/lib/config/util.ts","../../../projects/lib/config/ngwr-config.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 { InjectionToken } from '@angular/core';\n\nimport type { WrConfig } from './interfaces';\n\n/**\n * App-wide component defaults, or `{}` when the app never called\n * `provideWrConfig()`.\n *\n * A factory default rather than an optional inject at every call site: a\n * component asking for its own default should not have to care whether anyone\n * configured anything, and `{}` reads the same as absent through\n * {@link useConfigValue}.\n */\nexport const WR_CONFIG = new InjectionToken<WrConfig>('WR_CONFIG', {\n  providedIn: 'root',\n  factory: (): WrConfig => ({}),\n});\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nimport type { WrConfig } from './interfaces';\nimport { WR_CONFIG } from './tokens';\n\n/**\n * Set app-wide component defaults.\n *\n * Nothing is activated by this and no service is constructed — unlike\n * `provideWrDensity()`, which has to instantiate its service to write an\n * attribute onto `<html>`. A config is read on demand by whichever component\n * wants a default, so providing it costs one token.\n *\n * @example\n * ```ts\n * bootstrapApplication(App, {\n *   providers: [provideWrConfig({ button: { size: 'sm' }, select: { rounded: true } })],\n * });\n * ```\n *\n * Scoped use works the same way: put it in a route's `providers` and only that\n * branch of the tree sees it, because the components resolve the token through\n * their own injector.\n *\n * @see https://ngwr.dev/start/configuration\n */\nexport function provideWrConfig(config: WrConfig): EnvironmentProviders {\n  return makeEnvironmentProviders([{ provide: WR_CONFIG, useValue: config }]);\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type Signal, computed, inject } from '@angular/core';\n\nimport type { WrConfig } from './interfaces';\nimport { WR_CONFIG } from './tokens';\n\n/**\n * Resolve an input against the app's {@link WrConfig}, then a built-in fallback.\n *\n * The same shape as `useI18nText` from `ngwr/i18n`, and for the same reason: a\n * component's default has three possible sources and exactly one precedence\n * order, so it is worth writing once.\n *\n * 1. What the template bound, if it bound anything.\n * 2. What `provideWrConfig()` set for this component.\n * 3. The component's own fallback.\n *\n * A bound value always wins. That is what keeps a global config from becoming\n * something templates have to escape — the mistake NG-ZORRO's `NzConfigService`\n * is remembered for.\n *\n * Call it from a field initializer (it injects), and give the input `null` as its\n * own default so \"not set\" is expressible:\n *\n * ```ts\n * readonly size = input<WrButtonSize | null>(null);\n * protected readonly resolvedSize = useConfigValue(this.size, c => c.button?.size, 'md');\n * ```\n *\n * The generic is the COMPONENT's type, not the config's, so a component whose\n * size scale is narrower than {@link WrControlSize} stops compiling here rather\n * than accepting a value it cannot render — the type checker doing the work a\n * parity script would otherwise have to.\n */\nexport function useConfigValue<T>(\n  binding: Signal<T | null | undefined>,\n  pick: (config: WrConfig) => T | undefined,\n  fallback: T\n): Signal<T> {\n  const config = inject(WR_CONFIG);\n\n  return computed(() => {\n    const bound = binding();\n    // `null` and `undefined` both mean \"the template did not say\". `false` and\n    // `0` do not, which is why this is not `??` on a falsy check — a\n    // `[rounded]=\"false\"` has to be able to turn a configured `true` back off.\n    if (bound !== null && bound !== undefined) return bound;\n\n    return pick(config) ?? fallback;\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;AAQG;MACU,SAAS,GAAG,IAAI,cAAc,CAAW,WAAW,EAAE;AACjE,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,OAAiB,EAAE,CAAC;AAC9B,CAAA;;ACvBD;;;;;AAKG;AAOH;;;;;;;;;;;;;;;;;;;;AAoBG;AACG,SAAU,eAAe,CAAC,MAAgB,EAAA;AAC9C,IAAA,OAAO,wBAAwB,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;AAC7E;;ACnCA;;;;;AAKG;AAOH;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;SACa,cAAc,CAC5B,OAAqC,EACrC,IAAyC,EACzC,QAAW,EAAA;AAEX,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC;IAEhC,OAAO,QAAQ,CAAC,MAAK;AACnB,QAAA,MAAM,KAAK,GAAG,OAAO,EAAE;;;;AAIvB,QAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;AAAE,YAAA,OAAO,KAAK;AAEvD,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,QAAQ;AACjC,IAAA,CAAC,CAAC;AACJ;;ACxDA;;AAEG;;;;"}