ngwr 9.1.0 → 10.1.0

package/fesm2022/ngwr-counter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-counter.mjs","sources":["../../../projects/lib/counter/easing.ts","../../../projects/lib/counter/counter.ts","../../../projects/lib/counter/counter.html","../../../projects/lib/counter/count-up.ts","../../../projects/lib/counter/ngwr-counter.ts"],"sourcesContent":["/** Cubic ease-out — the shared tween curve for counter / count-up. */\nexport function easeOutCubic(t: number): number {\n  return 1 - Math.pow(1 - t, 3);\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 { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  LOCALE_ID,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  untracked,\n} from '@angular/core';\n\nimport { easeOutCubic } from './easing';\nimport type { WrCounterMode } from './interfaces';\n\n/** Visual cell in odometer mode — either a 0-9 column or a static glyph. */\ntype Cell = { readonly kind: 'digit'; readonly fraction: number } | { readonly kind: 'static'; readonly char: string };\n\n/**\n * Animated number display with two modes:\n *\n * - **`odometer`** (default) — each digit is a vertical strip of 0-9 that\n *   rolls into place, continuously interpolated for smooth motion when the\n *   value changes.\n * - **`tween`** — a single eased count-up between the previous and new value,\n *   rendered through `Intl.NumberFormat`.\n *\n * Reacts to `[value]` changes — animate from any number to any number.\n *\n * @example\n * ```html\n * <wr-counter [value]=\"123456\" mode=\"odometer\" />\n * <wr-counter [value]=\"9.99\" mode=\"tween\" [decimals]=\"2\" prefix=\"$\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/counter\n */\n@Component({\n  selector: 'wr-counter',\n  templateUrl: './counter.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-counter' },\n})\nexport class WrCounter {\n  /** Target value. */\n  readonly value = input.required<number>();\n\n  /** Animation mode. @default 'odometer' */\n  readonly mode = input<WrCounterMode>('odometer');\n\n  /** Duration (ms). @default 900 */\n  readonly duration = input(900, {\n    transform: (v: unknown): number => Math.max(100, coerceNumberProperty(v, 900)),\n  });\n\n  /** Fixed number of decimals. @default 0 */\n  readonly decimals = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Optional prefix (e.g. `'$'`). */\n  readonly prefix = input<string>('');\n\n  /** Optional suffix (e.g. `'%'`). */\n  readonly suffix = input<string>('');\n\n  /** Group thousands. @default true */\n  readonly grouping = input<boolean>(true);\n\n  /** Pad integer part to at least this many digits. @default 0 (no padding) */\n  readonly minIntegerDigits = input(0, {\n    transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)),\n  });\n\n  private readonly current = signal<number>(0);\n  private readonly locale = inject(LOCALE_ID);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private rafId: number | null = null;\n\n  /** Tween-mode formatted output. */\n  protected readonly tweenText = computed(() => this.format(this.current()));\n\n  /**\n   * Odometer-mode text for assistive tech and prerendered output. The strip\n   * renders every digit 0-9 per column and picks one with a transform, so its\n   * markup carries no usable text — screen readers would announce all ten, and\n   * static HTML would ship the same noise. This node holds the real value.\n   */\n  protected readonly odoText = computed(() => `${this.prefix()}${this.format(this.value())}${this.suffix()}`);\n\n  /** Odometer cells — one per character in the formatted target string. */\n  protected readonly cells = computed<readonly Cell[]>(() => {\n    // Build the string with target sign + max length so we can interpolate\n    // each digit position smoothly.\n    const target = this.value();\n    const live = this.current();\n    const formattedTarget = this.format(target);\n    const formattedLive = this.format(live);\n\n    // Right-align so trailing digits line up.\n    const maxLen = Math.max(formattedTarget.length, formattedLive.length);\n    const padTarget = formattedTarget.padStart(maxLen, ' ');\n    const padLive = formattedLive.padStart(maxLen, ' ');\n\n    const cells: Cell[] = [];\n    for (let i = 0; i < maxLen; i++) {\n      const t = padTarget[i];\n      const l = padLive[i];\n      if (/[0-9]/.test(t) && /[0-9]/.test(l)) {\n        // Interpolate the fractional digit so the strip rolls smoothly —\n        // multi-digit rollover (9 → 0 carries 1) looks continuous.\n        const fraction = this.digitFractionAt(live, target, i, maxLen);\n        cells.push({ kind: 'digit', fraction });\n      } else {\n        cells.push({ kind: 'static', char: t === ' ' ? '' : t });\n      }\n    }\n    return cells;\n  });\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => this.cancel());\n\n    effect(() => {\n      const target = this.value();\n      // Snapshot the current value WITHOUT tracking it — the RAF tick below\n      // writes `current` every frame, and tracking it here would re-trigger\n      // this effect each frame, cancelling + restarting the tween endlessly\n      // (the wheels hang mid-roll and only snap once the restarts converge).\n      const start = untracked(() => this.current());\n      if (!this.isBrowser) {\n        this.current.set(target);\n        return;\n      }\n      this.cancel();\n      const startTs = performance.now();\n      const dur = this.duration();\n      const tick = (now: number): void => {\n        const t = Math.min(1, (now - startTs) / dur);\n        // Snap exactly to target on the final frame. Without this,\n        // `start + (target - start) * 1` carries FP rounding (e.g.\n        // 0.1 + (0.3 - 0.1) * 1 = 0.30000000000000004), so\n        // `digitFractionAt`'s `live === target` rest-state check\n        // fails — wheels visibly stop on a fractional position and\n        // never settle to the clean integer glyph.\n        const v = t >= 1 ? target : start + (target - start) * easeOutCubic(t);\n        this.current.set(v);\n        if (t < 1) this.rafId = requestAnimationFrame(tick);\n        else this.rafId = null;\n      };\n      this.rafId = requestAnimationFrame(tick);\n    });\n  }\n\n  private cancel(): void {\n    if (this.rafId !== null) cancelAnimationFrame(this.rafId);\n    this.rafId = null;\n  }\n\n  private format(n: number): string {\n    return new Intl.NumberFormat(this.locale, {\n      minimumFractionDigits: this.decimals(),\n      maximumFractionDigits: this.decimals(),\n      minimumIntegerDigits: this.minIntegerDigits() || 1,\n      useGrouping: this.grouping(),\n    }).format(n);\n  }\n\n  /**\n   * Compute the smoothly-interpolated digit (0..10) at column `i` of the\n   * formatted live string. Returns the integer digit + a fraction so the\n   * strip CSS translate looks like a real rolling odometer.\n   */\n  private digitFractionAt(live: number, target: number, columnIndex: number, totalLen: number): number {\n    // Determine the place value at this column. Account for grouping separators\n    // and the decimal point by counting digits to the right of this column in\n    // the formatted target.\n    const formattedTarget = this.format(target);\n    const padded = formattedTarget.padStart(totalLen, ' ');\n    const tail = padded.slice(columnIndex + 1);\n    const digitsRight = (tail.match(/[0-9]/g) ?? []).length;\n    const placePower = digitsRight - this.decimals();\n    const place = Math.pow(10, placePower);\n    const absLive = Math.abs(live);\n    const raw = absLive / place;\n    // Modulo 10 gives the digit at this column with fractional rollover —\n    // mid-animation this looks like a real wheel rolling between digits.\n    const mod = raw - Math.floor(raw / 10) * 10;\n    // At rest (live === target) every wheel must rest on an exact integer\n    // — otherwise upper digits show as partial (e.g. tens reads \"5.6\"\n    // for value 123456, visibly clipping between 5 and 6 in the\n    // overflow:hidden window). The continuous-mechanical look is only\n    // wanted DURING the tween, not after it settles.\n    if (live === target) return Math.floor(mod + 1e-9);\n    return mod;\n  }\n}\n","@if (mode() === 'tween') {\n  <span class=\"wr-counter__tween\">{{ prefix() }}{{ tweenText() }}{{ suffix() }}</span>\n} @else {\n  <span class=\"wr-counter__sr-only\">{{ odoText() }}</span>\n  <span class=\"wr-counter__odo\" aria-hidden=\"true\">\n    @if (prefix()) {\n      <span class=\"wr-counter__static\">{{ prefix() }}</span>\n    }\n    @for (cell of cells(); track $index) {\n      @if (cell.kind === 'digit') {\n        <span class=\"wr-counter__digit\">\n          <span class=\"wr-counter__strip\" [style.transform]=\"`translateY(-${cell.fraction}em)`\">\n            <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span\n            ><span>7</span><span>8</span><span>9</span>\n          </span>\n        </span>\n      } @else {\n        <span class=\"wr-counter__static\">{{ cell.char }}</span>\n      }\n    }\n    @if (suffix()) {\n      <span class=\"wr-counter__static\">{{ suffix() }}</span>\n    }\n  </span>\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 * The spring-physics path is an adaptation of the CountUp effect by\n * David Haz / reactbits.dev (https://www.reactbits.dev/text-animations/count-up).\n * Same critically-damped formula, implemented inline with rAF — no\n * external dependency.\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  LOCALE_ID,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { numAttr } from 'ngwr/utils';\n\nimport { easeOutCubic } from './easing';\nimport type { WrCountUpDirection, WrCountUpEasing, WrCountUpTrigger } from './interfaces';\n\n/**\n * Animated number tick. Animates from `from` to the current `to`, formatting\n * via `Intl.NumberFormat`. Re-runs whenever `to` changes.\n *\n * @example Basic\n * ```html\n * <wr-count-up [to]=\"12345\" />\n * <wr-count-up [to]=\"9.99\" [decimals]=\"2\" prefix=\"$\" />\n * ```\n *\n * @example Reactbits-style — spring curve + viewport trigger\n * ```html\n * <wr-count-up [to]=\"100\" easing=\"spring\" trigger=\"visible\" [delay]=\"200\" />\n * ```\n *\n * @example Count down\n * ```html\n * <wr-count-up [from]=\"60\" [to]=\"0\" direction=\"down\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/counter\n */\n@Component({\n  selector: 'wr-count-up',\n  template: `{{ prefix() }}{{ formatted() }}{{ suffix() }}`,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-count-up' },\n})\nexport class WrCountUp {\n  /** Starting value. @default 0 */\n  readonly from = input(0, { transform: numAttr(0) });\n\n  /** Target value. */\n  readonly to = input.required<number>();\n\n  /**\n   * Animation duration. Units depend on `easing`:\n   *\n   * - `ease-out` — milliseconds (default 1200, min 100)\n   * - `spring` — seconds (tunes spring stiffness; default 2)\n   */\n  readonly duration = input(1200, { transform: numAttr(1200) });\n\n  /** Optional delay (ms) before the animation starts. @default 0 */\n  readonly delay = input(0, { transform: numAttr(0) });\n\n  /** Animation curve. @default 'ease-out' */\n  readonly easing = input<WrCountUpEasing>('ease-out');\n\n  /**\n   * When to start the animation.\n   *\n   * - `'mount'` (default) — start as soon as the component is rendered.\n   * - `'visible'` — wait for the host to enter the viewport\n   *   (IntersectionObserver). Useful for long pages or hero numbers\n   *   below the fold.\n   */\n  readonly trigger = input<WrCountUpTrigger>('mount');\n\n  /** Counting direction. `'down'` swaps `from` ↔ `to`. @default 'up' */\n  readonly direction = input<WrCountUpDirection>('up');\n\n  /** Fixed number of decimals. @default 0 */\n  readonly decimals = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Optional prefix (e.g. `'$'`). */\n  readonly prefix = input<string>('');\n\n  /** Optional suffix (e.g. `'%'`). */\n  readonly suffix = input<string>('');\n\n  /** Disable grouping separators (`1,234` → `1234`). @default true (grouping on) */\n  readonly grouping = input<boolean>(true);\n\n  /** Emits when the animation begins. */\n  readonly started = output<void>();\n\n  /** Emits when the animation settles. */\n  readonly completed = output<void>();\n\n  private readonly value = signal<number>(0);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly locale = inject(LOCALE_ID);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly destroyRef = inject(DestroyRef);\n\n  private rafId: number | null = null;\n  private delayTimer: ReturnType<typeof setTimeout> | undefined;\n  private observer: IntersectionObserver | null = null;\n  private hasFiredForVisible = false;\n\n  protected readonly formatted = computed(() => {\n    return new Intl.NumberFormat(this.locale, {\n      minimumFractionDigits: this.decimals(),\n      maximumFractionDigits: this.decimals(),\n      useGrouping: this.grouping(),\n    }).format(this.value());\n  });\n\n  constructor() {\n    if (!this.isBrowser) {\n      // SSR: settle on the value the animation ENDS on. Seeding the start\n      // instead would bake the placeholder (usually 0) into prerendered HTML,\n      // so readers and crawlers would get 0 rather than the real figure. The\n      // browser rewinds to the start and animates once it boots.\n      effect(() => this.value.set(this.direction() === 'down' ? this.from() : this.to()));\n      return;\n    }\n\n    // Seed the resting value so first paint shows the start, not 0.\n    effect(() => {\n      const initial = this.direction() === 'down' ? this.to() : this.from();\n      this.value.set(initial);\n    });\n\n    // Run the animation whenever the `to` target changes (or on first mount).\n    // For `trigger=\"visible\"` the first run waits for the IntersectionObserver\n    // to fire; subsequent `to` changes re-run immediately.\n    effect(() => {\n      // Establish dependencies so the effect re-runs on `to` changes.\n      this.to();\n      this.from();\n      this.direction();\n      this.duration();\n      this.easing();\n      this.delay();\n\n      if (this.trigger() === 'visible' && !this.hasFiredForVisible) return;\n      this.scheduleRun();\n    });\n\n    afterNextRender(() => {\n      if (this.trigger() === 'visible') this.setupViewportTrigger();\n    });\n\n    this.destroyRef.onDestroy(() => this.cancel());\n  }\n\n  // Scheduling\n\n  private setupViewportTrigger(): void {\n    this.observer = new IntersectionObserver(\n      (entries, obs) => {\n        for (const e of entries) {\n          if (e.isIntersecting && !this.hasFiredForVisible) {\n            obs.disconnect();\n            this.hasFiredForVisible = true;\n            this.scheduleRun();\n            break;\n          }\n        }\n      },\n      { threshold: 0, rootMargin: '0px' }\n    );\n    this.observer.observe(this.host.nativeElement);\n  }\n\n  private scheduleRun(): void {\n    this.cancel();\n    const d = this.delay();\n    if (d > 0) {\n      this.delayTimer = setTimeout(() => this.run(), d);\n    } else {\n      this.run();\n    }\n  }\n\n  private run(): void {\n    const start = this.direction() === 'down' ? this.to() : this.from();\n    const end = this.direction() === 'down' ? this.from() : this.to();\n    this.started.emit();\n    if (this.easing() === 'spring') this.tweenSpring(start, end);\n    else this.tweenEaseOut(start, end);\n  }\n\n  // Tweens\n\n  private tweenEaseOut(start: number, target: number): void {\n    const duration = Math.max(100, this.duration());\n    const startTs = performance.now();\n    const tick = (now: number): void => {\n      const t = Math.min(1, (now - startTs) / duration);\n      const v = start + (target - start) * easeOutCubic(t);\n      this.value.set(v);\n      if (t < 1) {\n        this.rafId = requestAnimationFrame(tick);\n      } else {\n        this.completed.emit();\n      }\n    };\n    this.rafId = requestAnimationFrame(tick);\n  }\n\n  /**\n   * Critically-damped spring tween. Same formula as `motion/react`'s\n   * `useSpring` with mass = 1:\n   *\n   *   damping   = 20 + 40 / duration\n   *   stiffness = 100 / duration\n   *\n   * We integrate `(spring force − damping force)` each frame until both\n   * displacement and velocity fall below epsilon.\n   */\n  private tweenSpring(start: number, target: number): void {\n    const duration = Math.max(0.05, this.duration());\n    const damping = 20 + 40 / duration;\n    const stiffness = 100 / duration;\n    let current = start;\n    let velocity = 0;\n    let lastTs = 0;\n    const epsilon = 0.001 * Math.max(1, Math.abs(target - start));\n\n    const step = (ts: number): void => {\n      const dt = lastTs === 0 ? 1 / 60 : Math.min(0.05, (ts - lastTs) / 1000);\n      lastTs = ts;\n\n      const displacement = current - target;\n      const accel = -stiffness * displacement - damping * velocity;\n      velocity += accel * dt;\n      current += velocity * dt;\n      this.value.set(current);\n\n      if (Math.abs(current - target) < epsilon && Math.abs(velocity) < epsilon * 10) {\n        this.value.set(target);\n        this.completed.emit();\n        return;\n      }\n      this.rafId = requestAnimationFrame(step);\n    };\n    this.rafId = requestAnimationFrame(step);\n  }\n\n  // Cleanup\n\n  private cancel(): void {\n    if (this.rafId !== null) cancelAnimationFrame(this.rafId);\n    this.rafId = null;\n    if (this.delayTimer !== undefined) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = undefined;\n    }\n  }\n}\n\nexport type { WrCountUpEasing, WrCountUpTrigger, WrCountUpDirection } from './interfaces';\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-counter.mjs","sources":["../../../projects/lib/counter/easing.ts","../../../projects/lib/counter/counter.ts","../../../projects/lib/counter/counter.html","../../../projects/lib/counter/count-up.ts","../../../projects/lib/counter/ngwr-counter.ts"],"sourcesContent":["/** Cubic ease-out — the shared tween curve for counter / count-up. */\nexport function easeOutCubic(t: number): number {\n  return 1 - Math.pow(1 - t, 3);\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 { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  LOCALE_ID,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  untracked,\n} from '@angular/core';\n\nimport { easeOutCubic } from './easing';\nimport type { WrCounterMode } from './interfaces';\n\n/** Visual cell in odometer mode — either a 0-9 column or a static glyph. */\ntype Cell = { readonly kind: 'digit'; readonly fraction: number } | { readonly kind: 'static'; readonly char: string };\n\n/**\n * Animated number display with two modes:\n *\n * - **`odometer`** (default) — each digit is a vertical strip of 0-9 that\n *   rolls into place, continuously interpolated for smooth motion when the\n *   value changes.\n * - **`tween`** — a single eased count-up between the previous and new value,\n *   rendered through `Intl.NumberFormat`.\n *\n * Reacts to `[value]` changes — animate from any number to any number.\n *\n * @example\n * ```html\n * <wr-counter [value]=\"123456\" mode=\"odometer\" />\n * <wr-counter [value]=\"9.99\" mode=\"tween\" [decimals]=\"2\" prefix=\"$\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/counter\n */\n@Component({\n  selector: 'wr-counter',\n  templateUrl: './counter.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-counter' },\n})\nexport class WrCounter {\n  /** Target value. */\n  readonly value = input.required<number>();\n\n  /** Animation mode. @default 'odometer' */\n  readonly mode = input<WrCounterMode>('odometer');\n\n  /** Duration (ms). @default 900 */\n  readonly duration = input(900, {\n    transform: (v: unknown): number => Math.max(100, coerceNumberProperty(v, 900)),\n  });\n\n  /** Fixed number of decimals. @default 0 */\n  readonly decimals = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Optional prefix (e.g. `'$'`). */\n  readonly prefix = input<string>('');\n\n  /** Optional suffix (e.g. `'%'`). */\n  readonly suffix = input<string>('');\n\n  /** Group thousands. @default true */\n  readonly grouping = input<boolean>(true);\n\n  /** Pad integer part to at least this many digits. @default 0 (no padding) */\n  readonly minIntegerDigits = input(0, {\n    transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)),\n  });\n\n  private readonly current = signal<number>(0);\n  private readonly locale = inject(LOCALE_ID);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private rafId: number | null = null;\n\n  /** Tween-mode formatted output. */\n  protected readonly tweenText = computed(() => this.format(this.current()));\n\n  /**\n   * Odometer-mode text for assistive tech and prerendered output. The strip\n   * renders every digit 0-9 per column and picks one with a transform, so its\n   * markup carries no usable text — screen readers would announce all ten, and\n   * static HTML would ship the same noise. This node holds the real value.\n   */\n  protected readonly odoText = computed(() => `${this.prefix()}${this.format(this.value())}${this.suffix()}`);\n\n  /** Odometer cells — one per character in the formatted target string. */\n  protected readonly cells = computed<readonly Cell[]>(() => {\n    // Build the string with target sign + max length so we can interpolate\n    // each digit position smoothly.\n    const target = this.value();\n    const live = this.current();\n    const formattedTarget = this.format(target);\n    const formattedLive = this.format(live);\n\n    // Right-align so trailing digits line up.\n    const maxLen = Math.max(formattedTarget.length, formattedLive.length);\n    const padTarget = formattedTarget.padStart(maxLen, ' ');\n    const padLive = formattedLive.padStart(maxLen, ' ');\n\n    const cells: Cell[] = [];\n    for (let i = 0; i < maxLen; i++) {\n      const t = padTarget[i];\n      const l = padLive[i];\n      if (/[0-9]/.test(t) && /[0-9]/.test(l)) {\n        // Interpolate the fractional digit so the strip rolls smoothly —\n        // multi-digit rollover (9 → 0 carries 1) looks continuous.\n        const fraction = this.digitFractionAt(live, target, i, maxLen);\n        cells.push({ kind: 'digit', fraction });\n      } else {\n        cells.push({ kind: 'static', char: t === ' ' ? '' : t });\n      }\n    }\n    return cells;\n  });\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => this.cancel());\n\n    effect(() => {\n      const target = this.value();\n      // Snapshot the current value WITHOUT tracking it — the RAF tick below\n      // writes `current` every frame, and tracking it here would re-trigger\n      // this effect each frame, cancelling + restarting the tween endlessly\n      // (the wheels hang mid-roll and only snap once the restarts converge).\n      const start = untracked(() => this.current());\n      if (!this.isBrowser) {\n        this.current.set(target);\n        return;\n      }\n      this.cancel();\n      const startTs = performance.now();\n      const dur = this.duration();\n      const tick = (now: number): void => {\n        const t = Math.min(1, (now - startTs) / dur);\n        // Snap exactly to target on the final frame. Without this,\n        // `start + (target - start) * 1` carries FP rounding (e.g.\n        // 0.1 + (0.3 - 0.1) * 1 = 0.30000000000000004), so\n        // `digitFractionAt`'s `live === target` rest-state check\n        // fails — wheels visibly stop on a fractional position and\n        // never settle to the clean integer glyph.\n        const v = t >= 1 ? target : start + (target - start) * easeOutCubic(t);\n        this.current.set(v);\n        if (t < 1) this.rafId = requestAnimationFrame(tick);\n        else this.rafId = null;\n      };\n      this.rafId = requestAnimationFrame(tick);\n    });\n  }\n\n  private cancel(): void {\n    if (this.rafId !== null) cancelAnimationFrame(this.rafId);\n    this.rafId = null;\n  }\n\n  private format(n: number): string {\n    return new Intl.NumberFormat(this.locale, {\n      minimumFractionDigits: this.decimals(),\n      maximumFractionDigits: this.decimals(),\n      minimumIntegerDigits: this.minIntegerDigits() || 1,\n      useGrouping: this.grouping(),\n    }).format(n);\n  }\n\n  /**\n   * Compute the smoothly-interpolated digit (0..10) at column `i` of the\n   * formatted live string. Returns the integer digit + a fraction so the\n   * strip CSS translate looks like a real rolling odometer.\n   */\n  private digitFractionAt(live: number, target: number, columnIndex: number, totalLen: number): number {\n    // Determine the place value at this column. Account for grouping separators\n    // and the decimal point by counting digits to the right of this column in\n    // the formatted target.\n    const formattedTarget = this.format(target);\n    const padded = formattedTarget.padStart(totalLen, ' ');\n    const tail = padded.slice(columnIndex + 1);\n    const digitsRight = (tail.match(/[0-9]/g) ?? []).length;\n    const placePower = digitsRight - this.decimals();\n    const place = Math.pow(10, placePower);\n    const absLive = Math.abs(live);\n    const raw = absLive / place;\n    // Modulo 10 gives the digit at this column with fractional rollover —\n    // mid-animation this looks like a real wheel rolling between digits.\n    const mod = raw - Math.floor(raw / 10) * 10;\n    // At rest (live === target) every wheel must rest on an exact integer\n    // — otherwise upper digits show as partial (e.g. tens reads \"5.6\"\n    // for value 123456, visibly clipping between 5 and 6 in the\n    // overflow:hidden window). The continuous-mechanical look is only\n    // wanted DURING the tween, not after it settles.\n    if (live === target) return Math.floor(mod + 1e-9);\n    return mod;\n  }\n}\n","@if (mode() === 'tween') {\n  <span class=\"wr-counter__tween\">{{ prefix() }}{{ tweenText() }}{{ suffix() }}</span>\n} @else {\n  <span class=\"wr-counter__sr-only\">{{ odoText() }}</span>\n  <span class=\"wr-counter__odo\" aria-hidden=\"true\">\n    @if (prefix()) {\n      <span class=\"wr-counter__static\">{{ prefix() }}</span>\n    }\n    @for (cell of cells(); track $index) {\n      @if (cell.kind === 'digit') {\n        <span class=\"wr-counter__digit\">\n          <span class=\"wr-counter__strip\" [style.transform]=\"`translateY(-${cell.fraction}em)`\">\n            <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span\n            ><span>7</span><span>8</span><span>9</span>\n          </span>\n        </span>\n      } @else {\n        <span class=\"wr-counter__static\">{{ cell.char }}</span>\n      }\n    }\n    @if (suffix()) {\n      <span class=\"wr-counter__static\">{{ suffix() }}</span>\n    }\n  </span>\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 * The spring-physics path is an adaptation of the CountUp effect by\n * David Haz / reactbits.dev (https://www.reactbits.dev/text-animations/count-up).\n * Same critically-damped formula, implemented inline with rAF — no\n * external dependency.\n */\n\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  LOCALE_ID,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { numAttr } from 'ngwr/utils';\n\nimport { easeOutCubic } from './easing';\nimport type { WrCountUpDirection, WrCountUpEasing, WrCountUpTrigger } from './interfaces';\n\n/**\n * Animated number tick. Animates from `from` to the current `to`, formatting\n * via `Intl.NumberFormat`. Re-runs whenever `to` changes.\n *\n * @example Basic\n * ```html\n * <wr-count-up [to]=\"12345\" />\n * <wr-count-up [to]=\"9.99\" [decimals]=\"2\" prefix=\"$\" />\n * ```\n *\n * @example Reactbits-style — spring curve + viewport trigger\n * ```html\n * <wr-count-up [to]=\"100\" easing=\"spring\" trigger=\"visible\" [delay]=\"200\" />\n * ```\n *\n * @example Count down\n * ```html\n * <wr-count-up [from]=\"60\" [to]=\"0\" direction=\"down\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/counter\n */\n@Component({\n  selector: 'wr-count-up',\n  template: `{{ prefix() }}{{ formatted() }}{{ suffix() }}`,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-count-up' },\n})\nexport class WrCountUp {\n  /** Starting value. @default 0 */\n  readonly from = input(0, { transform: numAttr(0) });\n\n  /** Target value. */\n  readonly to = input.required<number>();\n\n  /**\n   * Animation duration. Units depend on `easing`:\n   *\n   * - `ease-out` — milliseconds (default 1200, min 100)\n   * - `spring` — seconds (tunes spring stiffness; default 2)\n   */\n  readonly duration = input(1200, { transform: numAttr(1200) });\n\n  /** Optional delay (ms) before the animation starts. @default 0 */\n  readonly delay = input(0, { transform: numAttr(0) });\n\n  /** Animation curve. @default 'ease-out' */\n  readonly easing = input<WrCountUpEasing>('ease-out');\n\n  /**\n   * When to start the animation.\n   *\n   * - `'mount'` (default) — start as soon as the component is rendered.\n   * - `'visible'` — wait for the host to enter the viewport\n   *   (IntersectionObserver). Useful for long pages or hero numbers\n   *   below the fold.\n   */\n  readonly trigger = input<WrCountUpTrigger>('mount');\n\n  /** Counting direction. `'down'` swaps `from` ↔ `to`. @default 'up' */\n  readonly direction = input<WrCountUpDirection>('up');\n\n  /** Fixed number of decimals. @default 0 */\n  readonly decimals = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Optional prefix (e.g. `'$'`). */\n  readonly prefix = input<string>('');\n\n  /** Optional suffix (e.g. `'%'`). */\n  readonly suffix = input<string>('');\n\n  /** Disable grouping separators (`1,234` → `1234`). @default true (grouping on) */\n  readonly grouping = input<boolean>(true);\n\n  /** Emits when the animation begins. */\n  readonly started = output<void>();\n\n  /** Emits when the animation settles. */\n  readonly completed = output<void>();\n\n  private readonly value = signal<number>(0);\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly locale = inject(LOCALE_ID);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly destroyRef = inject(DestroyRef);\n\n  private rafId: number | null = null;\n  private delayTimer: ReturnType<typeof setTimeout> | undefined;\n  private observer: IntersectionObserver | null = null;\n  private hasFiredForVisible = false;\n\n  protected readonly formatted = computed(() => {\n    return new Intl.NumberFormat(this.locale, {\n      minimumFractionDigits: this.decimals(),\n      maximumFractionDigits: this.decimals(),\n      useGrouping: this.grouping(),\n    }).format(this.value());\n  });\n\n  constructor() {\n    if (!this.isBrowser) {\n      // SSR: settle on the value the animation ENDS on. Seeding the start\n      // instead would bake the placeholder (usually 0) into prerendered HTML,\n      // so readers and crawlers would get 0 rather than the real figure. The\n      // browser rewinds to the start and animates once it boots.\n      effect(() => this.value.set(this.direction() === 'down' ? this.from() : this.to()));\n      return;\n    }\n\n    // Seed the resting value so first paint shows the start, not 0.\n    effect(() => {\n      const initial = this.direction() === 'down' ? this.to() : this.from();\n      this.value.set(initial);\n    });\n\n    // Run the animation whenever the `to` target changes (or on first mount).\n    // For `trigger=\"visible\"` the first run waits for the IntersectionObserver\n    // to fire; subsequent `to` changes re-run immediately.\n    effect(() => {\n      // Establish dependencies so the effect re-runs on `to` changes.\n      this.to();\n      this.from();\n      this.direction();\n      this.duration();\n      this.easing();\n      this.delay();\n\n      if (this.trigger() === 'visible' && !this.hasFiredForVisible) return;\n      this.scheduleRun();\n    });\n\n    afterNextRender(() => {\n      if (this.trigger() === 'visible') this.setupViewportTrigger();\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.cancel();\n      // `cancel()` only stops timers and the rAF loop. The IntersectionObserver\n      // disconnects itself from inside its callback, which never fires if the\n      // host is destroyed before it ever scrolls into view — so it would keep\n      // observing a detached element for the life of the page.\n      this.observer?.disconnect();\n      this.observer = null;\n    });\n  }\n\n  // Scheduling\n\n  private setupViewportTrigger(): void {\n    this.observer = new IntersectionObserver(\n      (entries, obs) => {\n        for (const e of entries) {\n          if (e.isIntersecting && !this.hasFiredForVisible) {\n            obs.disconnect();\n            this.hasFiredForVisible = true;\n            this.scheduleRun();\n            break;\n          }\n        }\n      },\n      { threshold: 0, rootMargin: '0px' }\n    );\n    this.observer.observe(this.host.nativeElement);\n  }\n\n  private scheduleRun(): void {\n    this.cancel();\n    const d = this.delay();\n    if (d > 0) {\n      this.delayTimer = setTimeout(() => this.run(), d);\n    } else {\n      this.run();\n    }\n  }\n\n  private run(): void {\n    const start = this.direction() === 'down' ? this.to() : this.from();\n    const end = this.direction() === 'down' ? this.from() : this.to();\n    this.started.emit();\n    if (this.easing() === 'spring') this.tweenSpring(start, end);\n    else this.tweenEaseOut(start, end);\n  }\n\n  // Tweens\n\n  private tweenEaseOut(start: number, target: number): void {\n    const duration = Math.max(100, this.duration());\n    const startTs = performance.now();\n    const tick = (now: number): void => {\n      const t = Math.min(1, (now - startTs) / duration);\n      const v = start + (target - start) * easeOutCubic(t);\n      this.value.set(v);\n      if (t < 1) {\n        this.rafId = requestAnimationFrame(tick);\n      } else {\n        this.completed.emit();\n      }\n    };\n    this.rafId = requestAnimationFrame(tick);\n  }\n\n  /**\n   * Critically-damped spring tween. Same formula as `motion/react`'s\n   * `useSpring` with mass = 1:\n   *\n   *   damping   = 20 + 40 / duration\n   *   stiffness = 100 / duration\n   *\n   * We integrate `(spring force − damping force)` each frame until both\n   * displacement and velocity fall below epsilon.\n   */\n  private tweenSpring(start: number, target: number): void {\n    const duration = Math.max(0.05, this.duration());\n    const damping = 20 + 40 / duration;\n    const stiffness = 100 / duration;\n    let current = start;\n    let velocity = 0;\n    let lastTs = 0;\n    const epsilon = 0.001 * Math.max(1, Math.abs(target - start));\n\n    const step = (ts: number): void => {\n      const dt = lastTs === 0 ? 1 / 60 : Math.min(0.05, (ts - lastTs) / 1000);\n      lastTs = ts;\n\n      const displacement = current - target;\n      const accel = -stiffness * displacement - damping * velocity;\n      velocity += accel * dt;\n      current += velocity * dt;\n      this.value.set(current);\n\n      if (Math.abs(current - target) < epsilon && Math.abs(velocity) < epsilon * 10) {\n        this.value.set(target);\n        this.completed.emit();\n        return;\n      }\n      this.rafId = requestAnimationFrame(step);\n    };\n    this.rafId = requestAnimationFrame(step);\n  }\n\n  // Cleanup\n\n  private cancel(): void {\n    if (this.rafId !== null) cancelAnimationFrame(this.rafId);\n    this.rafId = null;\n    if (this.delayTimer !== undefined) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = undefined;\n    }\n  }\n}\n\nexport type { WrCountUpEasing, WrCountUpTrigger, WrCountUpDirection } from './interfaces';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-date-picker.mjs

@@ -6,9 +6,9 @@ import { input, inject, model, output, signal, computed, effect, untracked, View
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { WrCalendar } from 'ngwr/calendar';
 import { WrDateAdapter, WR_DATE_LOCALE } from 'ngwr/date-adapter';
-import { readI18nText } from 'ngwr/i18n';
+import { readI18nText, useI18nText } from 'ngwr/i18n';
 import { WrInput, WrInputGroup, WrInputSuffix } from 'ngwr/input';
-import { WR_OVERLAY } from 'ngwr/overlay';
+import { WR_OVERLAY, WrOutsideClick } from 'ngwr/overlay';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { clamp } from 'ngwr/utils';
@@ -301,7 +301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * accepts both named keys (`'shortDate'`, `'mediumDateTime'`, …) and raw
  * token strings (`'dd.MM.yyyy'`, `'HH:mm'`). When `format` is left at the
  * default (`null`), the picker derives the right named key from `mode`:
- * `'date'` → `'shortDate'`, `'time'` → `'shortTime'`, `'datetime'` →
+ * `'date'` gives `'shortDate'`, `'time'` gives `'time'`, `'datetime'` gives
  * `'shortDateTime'`.
  *
  * @example
@@ -327,8 +327,8 @@ class WrDatePicker {
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     /**
      * Format used for both display and parsing. When `null` (default), the
-     * format is derived from `mode` (`shortDate` / `shortTime` /
-     * `shortDateTime`). Pass a named key or raw token string to override.
+     * format is derived from `mode` (`shortDate` / `time` / `shortDateTime`).
+     * Pass a named key or raw token string to override.
      */
     format = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
@@ -366,6 +366,7 @@ class WrDatePicker {
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     adapter = inject(WrDateAdapter);
     overlay = inject(WR_OVERLAY);
+    outsideClick = inject(WrOutsideClick);
     scrollStrategies = inject(ScrollStrategyOptions);
     host = inject(ElementRef);
     destroyRef = inject(DestroyRef);
@@ -390,8 +391,11 @@ class WrDatePicker {
         const m = this.mode();
         if (m === 'datetime')
             return 'shortDateTime';
+        // `time`, not `shortTime` — the latter is not a member of WrDateFormat, so
+        // adapters fell through to treating it as a raw token pattern. date-fns then
+        // threw on the unescaped letters; the native adapter degraded silently.
         if (m === 'time')
-            return 'shortTime';
+            return 'time';
         return 'shortDate';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedFormat" }] : /* istanbul ignore next */ []));
@@ -404,6 +408,23 @@ class WrDatePicker {
     labelDate = readI18nText('datePicker.open', 'Open calendar');
     labelTime = readI18nText('datePicker.openTime', 'Open time picker');
     labelDateTime = readI18nText('datePicker.openDateTime', 'Open date and time picker');
+    /**
+     * Accessible name of the text field. Falls back to the placeholder, then to
+     * the same catalog string the calendar button uses — the field is a
+     * `role="combobox"`, and with an empty placeholder it had no name at all.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    fieldLabel = useI18nText(this.ariaLabel, 'datePicker.open', 'Open calendar');
+    resolvedAriaLabel = computed(() => {
+        // Not `??`: an empty placeholder must fall through to the catalog string.
+        const explicit = this.ariaLabel();
+        if (explicit)
+            return explicit;
+        const placeholder = this.placeholder();
+        return placeholder ? placeholder : this.fieldLabel();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
     triggerLabel = computed(() => {
         const m = this.mode();
         if (m === 'time')
@@ -522,8 +543,8 @@ class WrDatePicker {
             this.attachDateTime();
         else
             this.attachDate();
-        this.overlayRef
-            .outsidePointerEvents()
+        this.outsideClick
+            .outsidePointerEvents(this.overlayRef)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(event => {
             if (this.host.nativeElement.contains(event.target))
@@ -628,12 +649,12 @@ class WrDatePicker {
         return a.getTime() === b.getTime();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDatePicker, isStandalone: true, selector: "wr-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDatePicker, isStandalone: true, selector: "wr-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n" }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+            args: [{ selector: 'wr-date-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <!--\n    A plain textbox, per the APG date-picker-dialog pattern: `aria-haspopup` and\n    `aria-expanded` are not permitted on `textbox` and belong to the trigger\n    button below, which is the thing that opens the dialog.\n  -->\n  <input\n    #input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n    [value]=\"text()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    @if (isTime()) {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <circle cx=\"7\" cy=\"7\" r=\"5.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"7\" y1=\"7\" x2=\"7\" y2=\"3.75\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"7\" y1=\"7\" x2=\"9.5\" y2=\"7\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      </svg>\n    } @else {\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n        <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n        <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n        @if (isDateTime()) {\n          <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </button>\n</wr-input-group>\n" }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
  * @license
@@ -844,6 +865,7 @@ class WrDateRangePicker {
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     adapter = inject(WrDateAdapter);
     overlay = inject(WR_OVERLAY);
+    outsideClick = inject(WrOutsideClick);
     scrollStrategies = inject(ScrollStrategyOptions);
     host = inject(ElementRef);
     destroyRef = inject(DestroyRef);
@@ -1004,8 +1026,8 @@ class WrDateRangePicker {
             if (!this.isDateTime() && committed[0] && committed[1])
                 this.closeOverlay();
         });
-        this.overlayRef
-            .outsidePointerEvents()
+        this.outsideClick
+            .outsidePointerEvents(this.overlayRef)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(event => {
             if (this.host.nativeElement.contains(event.target))
@@ -1136,11 +1158,11 @@ class WrDateRangePicker {
         return this.sameDate(a[0], b[0]) && this.sameDate(a[1], b[1]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDateRangePicker, isStandalone: true, selector: "wr-date-range-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDateRangePicker, isStandalone: true, selector: "wr-date-range-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "startEl", first: true, predicate: ["startInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n", dependencies: [{ kind: "directive", type: WrInput, selector: "input[wrInput], textarea[wrInput]", inputs: ["wrSize", "rounded"] }, { kind: "component", type: WrInputGroup, selector: "wr-input-group", inputs: ["rounded"] }, { kind: "directive", type: WrInputSuffix, selector: "[wrInputSuffix]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-date-range-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n" }]
+            args: [{ selector: 'wr-date-range-picker', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrInput, WrInputGroup, WrInputSuffix], template: "<wr-input-group>\n  <input\n    #startInput\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"startLabel\"\n    [value]=\"startText()\"\n    [placeholder]=\"startPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onStartInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <span class=\"wr-date-range-picker__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n  <input\n    wrInput\n    type=\"text\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n    class=\"wr-date-range-picker__input\"\n    [attr.aria-label]=\"endLabel\"\n    [value]=\"endText()\"\n    [placeholder]=\"endPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    (click)=\"openOnInput()\"\n    (input)=\"onEndInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <button\n    type=\"button\"\n    wrInputSuffix\n    class=\"wr-date-picker__trigger\"\n    [attr.aria-label]=\"triggerLabel\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"overlayOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggleOverlay()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <rect x=\"1.5\" y=\"2.5\" width=\"11\" height=\"10\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"1.5\" y1=\"5.5\" x2=\"12.5\" y2=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n      <line x1=\"4\" y1=\"1\" x2=\"4\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      <line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n      @if (isDateTime()) {\n        <circle cx=\"7\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" />\n      }\n    </svg>\n  </button>\n</wr-input-group>\n" }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], startEl: [{ type: i0.ViewChild, args: ['startInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**