ngwr 6.1.1 → 7.1.0

package/fesm2022/ngwr-statistic.mjs

@@ -0,0 +1,220 @@
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, Component, output, inject, DestroyRef, PLATFORM_ID, signal, effect, afterNextRender } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * @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
+ */
+/**
+ * KPI card — label + big number + optional prefix/suffix + delta. Pair
+ * with a layout grid for dashboards.
+ *
+ * @example
+ * ```html
+ * <wr-statistic label="Active users" [value]="12345" suffix="users" />
+ * <wr-statistic label="Revenue" [value]="9512" prefix="$" [delta]="12.4" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/statistic
+ */
+class WrStatistic {
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The number (or string) to display in the main slot. */
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Prefix glyph / symbol (e.g. `'$'`). */
+    prefix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    /** Suffix glyph / unit (e.g. `'%'`, `'kg'`). */
+    suffix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional delta vs previous period — shown as `+x.x%` (or `-x.x%`).
+     * Use `deltaSuffix` to change the trailing unit.
+     */
+    delta = input(null, { ...(ngDevMode ? { debugName: "delta" } : /* istanbul ignore next */ {}), transform: (v) => {
+            if (v === null || v === undefined || v === '')
+                return null;
+            const n = coerceNumberProperty(v, Number.NaN);
+            return Number.isFinite(n) ? n : null;
+        } });
+    /** Unit appended to the delta value. @default '%' */
+    deltaSuffix = input('%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaSuffix" }] : /* istanbul ignore next */ []));
+    hasDelta = computed(() => this.delta() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDelta" }] : /* istanbul ignore next */ []));
+    deltaDirection = computed(() => {
+        const d = this.delta();
+        if (d === null || d === 0)
+            return 'flat';
+        return d > 0 ? 'up' : 'down';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaDirection" }] : /* istanbul ignore next */ []));
+    deltaText = computed(() => {
+        const d = this.delta();
+        if (d === null)
+            return '';
+        const sign = d > 0 ? '+' : '';
+        return `${sign}${d}${this.deltaSuffix()}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatistic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrStatistic, isStandalone: true, selector: "wr-statistic", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaSuffix: { classPropertyName: "deltaSuffix", publicName: "deltaSuffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  @if (prefix()) {\n    <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n  }\n  <span class=\"wr-statistic__number\">{{ value() ?? '\u2014' }}</span>\n  @if (suffix()) {\n    <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (hasDelta()) {\n  <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n    @if (deltaDirection() === 'up') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      </svg>\n    } @else if (deltaDirection() === 'down') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n      </svg>\n    }\n    <span>{{ deltaText() }}</span>\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatistic, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-statistic', encapsulation: ViewEncapsulation.None, host: { class: 'wr-statistic' }, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  @if (prefix()) {\n    <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n  }\n  <span class=\"wr-statistic__number\">{{ value() ?? '\u2014' }}</span>\n  @if (suffix()) {\n    <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (hasDelta()) {\n  <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n    @if (deltaDirection() === 'up') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      </svg>\n    } @else if (deltaDirection() === 'down') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n      </svg>\n    }\n    <span>{{ deltaText() }}</span>\n  </div>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSuffix", required: false }] }] } });
+
+/**
+ * @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
+ */
+// Helpers
+function toMs(value) {
+    if (value instanceof Date)
+        return value.getTime();
+    if (typeof value === 'number')
+        return value;
+    return new Date(value).getTime();
+}
+function pad(n, width) {
+    return String(n).padStart(width, '0');
+}
+function formatRemaining(ms, fmt) {
+    const days = Math.floor(ms / 86_400_000);
+    const hours = Math.floor((ms % 86_400_000) / 3_600_000);
+    const minutes = Math.floor((ms % 3_600_000) / 60_000);
+    const seconds = Math.floor((ms % 60_000) / 1000);
+    const millis = ms % 1000;
+    // Single-pass tokenizer so we never re-scan output for tokens. The
+    // previous sequential `.replace()` chain leaked: e.g. `D days HH:mm:ss`
+    // → `1 day42 11:59:42` because the `/s/g` step at the end re-matched
+    // the literal `s` inside `days`. Longest-token-first ordering inside
+    // the alternation handles `DD`>`D`, `HH`>`H`, `mm`>`m`, `SSS`>`ss`>`s`.
+    return fmt.replace(/(?<![A-Za-z])(?:SSS|DD|HH|mm|ss|D|H|m|s)(?![A-Za-z])/g, token => {
+        switch (token) {
+            case 'DD':
+                return pad(days, 2);
+            case 'D':
+                return String(days);
+            case 'HH':
+                return pad(hours, 2);
+            case 'H':
+                return String(hours);
+            case 'mm':
+                return pad(minutes, 2);
+            case 'm':
+                return String(minutes);
+            case 'ss':
+                return pad(seconds, 2);
+            case 's':
+                return String(seconds);
+            case 'SSS':
+                return pad(millis, 3);
+            default:
+                return token;
+        }
+    });
+}
+/**
+ * Live-counting variant of `<wr-statistic>` that targets a future date
+ * and ticks down to zero. The format string uses Day/Hour/Minute/Second
+ * tokens (`D`, `H`, `m`, `s`, double for zero-padded, plus `SSS` for
+ * milliseconds).
+ *
+ * @example
+ * ```html
+ * <wr-statistic-countdown
+ *   label="Launch in"
+ *   [target]="launchDate"
+ *   format="D days HH:mm:ss"
+ *   (countdownEnd)="onLive()"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/components/statistic
+ */
+class WrStatisticCountdown {
+    /** Target date / timestamp the countdown is running down to. */
+    target = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /** Label rendered above the value. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Format string. Tokens: `D`/`DD` (days), `H`/`HH` (hours),
+     * `m`/`mm` (minutes), `s`/`ss` (seconds), `SSS` (milliseconds).
+     * Double-letter forms zero-pad to width 2. @default 'HH:mm:ss'
+     */
+    format = input('HH:mm:ss', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Optional text shown once the countdown reaches zero. */
+    endText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endText" }] : /* istanbul ignore next */ []));
+    /**
+     * Tick interval in ms. Drop to ~16 for `SSS` (millisecond display).
+     * @default 1000
+     */
+    tickMs = input(1000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickMs" }] : /* istanbul ignore next */ []));
+    /** Fires once when the countdown crosses zero. */
+    countdownEnd = output();
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    targetMs = computed(() => toMs(this.target()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetMs" }] : /* istanbul ignore next */ []));
+    /** Remaining milliseconds (live signal). */
+    remaining = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
+    finished = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finished" }] : /* istanbul ignore next */ []));
+    display = computed(() => {
+        if (this.finished() && this.endText() != null)
+            return this.endText();
+        return formatRemaining(this.remaining(), this.format());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Seed once synchronously so SSR / first paint shows a sane value.
+        effect(() => {
+            const ms = Math.max(0, this.targetMs() - Date.now());
+            this.remaining.set(ms);
+            this.finished.set(ms === 0);
+        });
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => {
+            const handle = setInterval(() => this.tick(), this.tickMs());
+            this.destroyRef.onDestroy(() => clearInterval(handle));
+        });
+    }
+    tick() {
+        const ms = Math.max(0, this.targetMs() - Date.now());
+        this.remaining.set(ms);
+        if (ms === 0 && !this.finished()) {
+            this.finished.set(true);
+            this.countdownEnd.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatisticCountdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrStatisticCountdown, isStandalone: true, selector: "wr-statistic-countdown", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, endText: { classPropertyName: "endText", publicName: "endText", isSignal: true, isRequired: false, transformFunction: null }, tickMs: { classPropertyName: "tickMs", publicName: "tickMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countdownEnd: "countdownEnd" }, host: { classAttribute: "wr-statistic" }, ngImport: i0, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  <span class=\"wr-statistic__number\">{{ display() }}</span>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStatisticCountdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-statistic-countdown', encapsulation: ViewEncapsulation.None, host: { class: 'wr-statistic' }, template: "@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  <span class=\"wr-statistic__number\">{{ display() }}</span>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], endText: [{ type: i0.Input, args: [{ isSignal: true, alias: "endText", required: false }] }], tickMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickMs", required: false }] }], countdownEnd: [{ type: i0.Output, args: ["countdownEnd"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrStatistic, WrStatisticCountdown };
+//# sourceMappingURL=ngwr-statistic.mjs.map

package/fesm2022/ngwr-statistic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-statistic.mjs","sources":["../../../projects/lib/statistic/statistic.ts","../../../projects/lib/statistic/statistic.html","../../../projects/lib/statistic/statistic-countdown.ts","../../../projects/lib/statistic/statistic-countdown.html","../../../projects/lib/statistic/ngwr-statistic.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 { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * KPI card — label + big number + optional prefix/suffix + delta. Pair\n * with a layout grid for dashboards.\n *\n * @example\n * ```html\n * <wr-statistic label=\"Active users\" [value]=\"12345\" suffix=\"users\" />\n * <wr-statistic label=\"Revenue\" [value]=\"9512\" prefix=\"$\" [delta]=\"12.4\" />\n * ```\n *\n * @see https://ngwr.dev/components/statistic\n */\n@Component({\n  selector: 'wr-statistic',\n  templateUrl: './statistic.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-statistic' },\n})\nexport class WrStatistic {\n  readonly label = input<string>('');\n\n  /** The number (or string) to display in the main slot. */\n  readonly value = input<number | string | null>(null);\n\n  /** Prefix glyph / symbol (e.g. `'$'`). */\n  readonly prefix = input<string>('');\n\n  /** Suffix glyph / unit (e.g. `'%'`, `'kg'`). */\n  readonly suffix = input<string>('');\n\n  /**\n   * Optional delta vs previous period — shown as `+x.x%` (or `-x.x%`).\n   * Use `deltaSuffix` to change the trailing unit.\n   */\n  readonly delta = input<number | null>(null, {\n    transform: (v: unknown): number | null => {\n      if (v === null || v === undefined || v === '') return null;\n      const n = coerceNumberProperty(v, Number.NaN);\n      return Number.isFinite(n) ? n : null;\n    },\n  });\n\n  /** Unit appended to the delta value. @default '%' */\n  readonly deltaSuffix = input<string>('%');\n\n  protected readonly hasDelta = computed(() => this.delta() !== null);\n\n  protected readonly deltaDirection = computed<'up' | 'down' | 'flat'>(() => {\n    const d = this.delta();\n    if (d === null || d === 0) return 'flat';\n    return d > 0 ? 'up' : 'down';\n  });\n\n  protected readonly deltaText = computed(() => {\n    const d = this.delta();\n    if (d === null) return '';\n    const sign = d > 0 ? '+' : '';\n    return `${sign}${d}${this.deltaSuffix()}`;\n  });\n}\n","@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  @if (prefix()) {\n    <span class=\"wr-statistic__prefix\">{{ prefix() }}</span>\n  }\n  <span class=\"wr-statistic__number\">{{ value() ?? '—' }}</span>\n  @if (suffix()) {\n    <span class=\"wr-statistic__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (hasDelta()) {\n  <div [class]=\"`wr-statistic__delta wr-statistic__delta--${deltaDirection()}`\">\n    @if (deltaDirection() === 'up') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 1 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      </svg>\n    } @else if (deltaDirection() === 'down') {\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M5 9 L9 2 L1 2 Z\" fill=\"currentColor\" />\n      </svg>\n    }\n    <span>{{ deltaText() }}</span>\n  </div>\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 { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\n// Helpers\n\nfunction toMs(value: Date | string | number): number {\n  if (value instanceof Date) return value.getTime();\n  if (typeof value === 'number') return value;\n  return new Date(value).getTime();\n}\n\nfunction pad(n: number, width: number): string {\n  return String(n).padStart(width, '0');\n}\n\nfunction formatRemaining(ms: number, fmt: string): string {\n  const days = Math.floor(ms / 86_400_000);\n  const hours = Math.floor((ms % 86_400_000) / 3_600_000);\n  const minutes = Math.floor((ms % 3_600_000) / 60_000);\n  const seconds = Math.floor((ms % 60_000) / 1000);\n  const millis = ms % 1000;\n  // Single-pass tokenizer so we never re-scan output for tokens. The\n  // previous sequential `.replace()` chain leaked: e.g. `D days HH:mm:ss`\n  // → `1 day42 11:59:42` because the `/s/g` step at the end re-matched\n  // the literal `s` inside `days`. Longest-token-first ordering inside\n  // the alternation handles `DD`>`D`, `HH`>`H`, `mm`>`m`, `SSS`>`ss`>`s`.\n  return fmt.replace(/(?<![A-Za-z])(?:SSS|DD|HH|mm|ss|D|H|m|s)(?![A-Za-z])/g, token => {\n    switch (token) {\n      case 'DD':\n        return pad(days, 2);\n      case 'D':\n        return String(days);\n      case 'HH':\n        return pad(hours, 2);\n      case 'H':\n        return String(hours);\n      case 'mm':\n        return pad(minutes, 2);\n      case 'm':\n        return String(minutes);\n      case 'ss':\n        return pad(seconds, 2);\n      case 's':\n        return String(seconds);\n      case 'SSS':\n        return pad(millis, 3);\n      default:\n        return token;\n    }\n  });\n}\n\n/**\n * Live-counting variant of `<wr-statistic>` that targets a future date\n * and ticks down to zero. The format string uses Day/Hour/Minute/Second\n * tokens (`D`, `H`, `m`, `s`, double for zero-padded, plus `SSS` for\n * milliseconds).\n *\n * @example\n * ```html\n * <wr-statistic-countdown\n *   label=\"Launch in\"\n *   [target]=\"launchDate\"\n *   format=\"D days HH:mm:ss\"\n *   (countdownEnd)=\"onLive()\"\n * />\n * ```\n *\n * @see https://ngwr.dev/components/statistic\n */\n@Component({\n  selector: 'wr-statistic-countdown',\n  templateUrl: './statistic-countdown.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-statistic' },\n})\nexport class WrStatisticCountdown {\n  /** Target date / timestamp the countdown is running down to. */\n  readonly target = input.required<Date | string | number>();\n\n  /** Label rendered above the value. */\n  readonly label = input<string>('');\n\n  /**\n   * Format string. Tokens: `D`/`DD` (days), `H`/`HH` (hours),\n   * `m`/`mm` (minutes), `s`/`ss` (seconds), `SSS` (milliseconds).\n   * Double-letter forms zero-pad to width 2. @default 'HH:mm:ss'\n   */\n  readonly format = input<string>('HH:mm:ss');\n\n  /** Optional text shown once the countdown reaches zero. */\n  readonly endText = input<string | null>(null);\n\n  /**\n   * Tick interval in ms. Drop to ~16 for `SSS` (millisecond display).\n   * @default 1000\n   */\n  readonly tickMs = input(1000);\n\n  /** Fires once when the countdown crosses zero. */\n  readonly countdownEnd = output<void>();\n\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  private readonly targetMs = computed(() => toMs(this.target()));\n\n  /** Remaining milliseconds (live signal). */\n  protected readonly remaining = signal(0);\n  protected readonly finished = signal(false);\n\n  protected readonly display = computed(() => {\n    if (this.finished() && this.endText() != null) return this.endText()!;\n    return formatRemaining(this.remaining(), this.format());\n  });\n\n  constructor() {\n    // Seed once synchronously so SSR / first paint shows a sane value.\n    effect(() => {\n      const ms = Math.max(0, this.targetMs() - Date.now());\n      this.remaining.set(ms);\n      this.finished.set(ms === 0);\n    });\n\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      const handle = setInterval(() => this.tick(), this.tickMs());\n      this.destroyRef.onDestroy(() => clearInterval(handle));\n    });\n  }\n\n  private tick(): void {\n    const ms = Math.max(0, this.targetMs() - Date.now());\n    this.remaining.set(ms);\n    if (ms === 0 && !this.finished()) {\n      this.finished.set(true);\n      this.countdownEnd.emit();\n    }\n  }\n}\n","@if (label()) {\n  <div class=\"wr-statistic__label\">{{ label() }}</div>\n}\n<div class=\"wr-statistic__value\">\n  <span class=\"wr-statistic__number\">{{ display() }}</span>\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-stepper.mjs

@@ -0,0 +1,186 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { InjectionToken, input, signal, inject, computed, ViewEncapsulation, Component, model, contentChildren, effect, forwardRef } 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
+ */
+const WR_STEPPER = new InjectionToken('WR_STEPPER');
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * One step in a {@link WrStepper}. Project as a child:
+ *
+ * ```html
+ * <wr-stepper>
+ *   <wr-step label="Account"> … </wr-step>
+ *   <wr-step label="Profile" description="Optional"> … </wr-step>
+ * </wr-stepper>
+ * ```
+ *
+ * The stepper hides every step except the active one via a host class —
+ * each step still mounts once, so component state survives navigation.
+ *
+ * @see https://ngwr.dev/components/stepper
+ */
+class WrStep {
+    /** Header label. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Secondary text shown under the label. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Marks the step as optional in the header. */
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Override completion state. When unset, the stepper auto-derives it
+     * from the active index (any step before `active` is completed).
+     */
+    completed = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
+    /** Disables the header — also blocks header clicks. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Stepper-assigned index. Set by the parent when contentChildren updates. */
+    _index = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
+    stepper = inject(WR_STEPPER);
+    isActive = computed(() => this._index() === this.stepper.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrStep, isStandalone: true, selector: "wr-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-step--active": "isActive()" }, classAttribute: "wr-step" }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStep, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-step',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'wr-step',
+                        '[class.wr-step--active]': 'isActive()',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * @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
+ */
+/**
+ * Multi-step wizard container. Children are `<wr-step>` components — the
+ * stepper renders one numbered header per step (with connectors) and the
+ * body of the currently active one.
+ *
+ * Two-way bind `[(active)]` to the active step index. Set `linear="true"`
+ * to forbid jumping past incomplete steps.
+ *
+ * @example
+ * ```html
+ * <wr-stepper [(active)]="step" linear>
+ *   <wr-step label="Account">…</wr-step>
+ *   <wr-step label="Profile">…</wr-step>
+ *   <wr-step label="Confirm">…</wr-step>
+ * </wr-stepper>
+ * ```
+ *
+ * @see https://ngwr.dev/components/stepper
+ */
+class WrStepper {
+    /** Index of the currently visible step. */
+    active = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** Layout direction. @default 'horizontal' */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Lock steps after the latest completed one. @default false */
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    steps = contentChildren(WrStep, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-stepper', `wr-stepper--${this.orientation()}`];
+        if (this.linear())
+            parts.push('wr-stepper--linear');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Push each step's index down so it can compute its own active state.
+        effect(() => {
+            this.steps().forEach((step, i) => step._index.set(i));
+        });
+    }
+    /** Is the step at `index` considered completed? */
+    isCompleted(index) {
+        const override = this.steps()[index]?.completed();
+        if (override !== null && override !== undefined)
+            return override;
+        return index < this.active();
+    }
+    /** Is the step at `index` reachable for direct header clicks? */
+    isReachable(index) {
+        if (this.steps()[index]?.disabled())
+            return false;
+        if (!this.linear())
+            return true;
+        if (index <= this.active())
+            return true;
+        for (let i = 0; i < index; i++) {
+            if (!this.isCompleted(i))
+                return false;
+        }
+        return true;
+    }
+    onHeaderClick(index) {
+        if (this.isReachable(index))
+            this.goTo(index);
+    }
+    // Imperative API
+    goTo(index) {
+        const last = this.steps().length - 1;
+        if (last < 0)
+            return;
+        const clamped = Math.min(Math.max(0, index), last);
+        this.active.set(clamped);
+    }
+    next() {
+        this.goTo(this.active() + 1);
+    }
+    prev() {
+        this.goTo(this.active() - 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrStepper, isStandalone: true, selector: "wr-stepper", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: WR_STEPPER,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrStepper),
+            },
+        ], queries: [{ propertyName: "steps", predicate: WrStep, isSignal: true }], ngImport: i0, template: "<ol class=\"wr-stepper__headers\" role=\"list\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"wr-stepper__header\"\n      [class.wr-stepper__header--active]=\"$index === active()\"\n      [class.wr-stepper__header--completed]=\"isCompleted($index)\"\n      [class.wr-stepper__header--reachable]=\"isReachable($index)\"\n      [class.wr-stepper__header--disabled]=\"step.disabled()\"\n    >\n      <button\n        type=\"button\"\n        class=\"wr-stepper__header-button\"\n        [disabled]=\"!isReachable($index) || step.disabled()\"\n        [attr.aria-current]=\"$index === active() ? 'step' : null\"\n        (click)=\"onHeaderClick($index)\"\n      >\n        <span class=\"wr-stepper__indicator\" aria-hidden=\"true\">\n          @if (isCompleted($index)) {\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n              <path\n                d=\"M3 7.5 L6 10.5 L11 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          } @else {\n            {{ $index + 1 }}\n          }\n        </span>\n        <span class=\"wr-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <small class=\"wr-stepper__optional\">optional</small>\n          }\n          @if (step.description()) {\n            <small class=\"wr-stepper__description\">{{ step.description() }}</small>\n          }\n        </span>\n      </button>\n      @if (!$last) {\n        <span class=\"wr-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    </li>\n  }\n</ol>\n\n<div class=\"wr-stepper__body\">\n  <ng-content />\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-stepper', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
+                        {
+                            provide: WR_STEPPER,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrStepper),
+                        },
+                    ], template: "<ol class=\"wr-stepper__headers\" role=\"list\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"wr-stepper__header\"\n      [class.wr-stepper__header--active]=\"$index === active()\"\n      [class.wr-stepper__header--completed]=\"isCompleted($index)\"\n      [class.wr-stepper__header--reachable]=\"isReachable($index)\"\n      [class.wr-stepper__header--disabled]=\"step.disabled()\"\n    >\n      <button\n        type=\"button\"\n        class=\"wr-stepper__header-button\"\n        [disabled]=\"!isReachable($index) || step.disabled()\"\n        [attr.aria-current]=\"$index === active() ? 'step' : null\"\n        (click)=\"onHeaderClick($index)\"\n      >\n        <span class=\"wr-stepper__indicator\" aria-hidden=\"true\">\n          @if (isCompleted($index)) {\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n              <path\n                d=\"M3 7.5 L6 10.5 L11 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          } @else {\n            {{ $index + 1 }}\n          }\n        </span>\n        <span class=\"wr-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <small class=\"wr-stepper__optional\">optional</small>\n          }\n          @if (step.description()) {\n            <small class=\"wr-stepper__description\">{{ step.description() }}</small>\n          }\n        </span>\n      </button>\n      @if (!$last) {\n        <span class=\"wr-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    </li>\n  }\n</ol>\n\n<div class=\"wr-stepper__body\">\n  <ng-content />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrStep), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WR_STEPPER, WrStep, WrStepper };
+//# sourceMappingURL=ngwr-stepper.mjs.map

package/fesm2022/ngwr-stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-stepper.mjs","sources":["../../../projects/lib/stepper/tokens.ts","../../../projects/lib/stepper/step.ts","../../../projects/lib/stepper/stepper.ts","../../../projects/lib/stepper/stepper.html","../../../projects/lib/stepper/ngwr-stepper.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, type Signal } from '@angular/core';\n\n/** Surface a {@link WrStepper} provides for its child `<wr-step>`s. */\nexport interface WrStepperContext {\n  /** Index of the currently visible step. */\n  readonly active: Signal<number>;\n  /** Linear mode — steps after the latest completed one are locked. */\n  readonly linear: Signal<boolean>;\n}\n\nexport const WR_STEPPER = new InjectionToken<WrStepperContext>('WR_STEPPER');\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 { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, inject, input, signal } from '@angular/core';\n\nimport { WR_STEPPER } from './tokens';\n\n/**\n * One step in a {@link WrStepper}. Project as a child:\n *\n * ```html\n * <wr-stepper>\n *   <wr-step label=\"Account\"> … </wr-step>\n *   <wr-step label=\"Profile\" description=\"Optional\"> … </wr-step>\n * </wr-stepper>\n * ```\n *\n * The stepper hides every step except the active one via a host class —\n * each step still mounts once, so component state survives navigation.\n *\n * @see https://ngwr.dev/components/stepper\n */\n@Component({\n  selector: 'wr-step',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-step',\n    '[class.wr-step--active]': 'isActive()',\n  },\n})\nexport class WrStep {\n  /** Header label. */\n  readonly label = input<string>('');\n\n  /** Secondary text shown under the label. */\n  readonly description = input<string>('');\n\n  /** Marks the step as optional in the header. */\n  readonly optional = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Override completion state. When unset, the stepper auto-derives it\n   * from the active index (any step before `active` is completed).\n   */\n  readonly completed = input<boolean | null>(null);\n\n  /** Disables the header — also blocks header clicks. */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Stepper-assigned index. Set by the parent when contentChildren updates. */\n  readonly _index = signal(-1);\n\n  private readonly stepper = inject(WR_STEPPER);\n\n  protected readonly isActive = computed(() => this._index() === this.stepper.active());\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 { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ViewEncapsulation,\n  computed,\n  contentChildren,\n  effect,\n  forwardRef,\n  input,\n  model,\n} from '@angular/core';\n\nimport { WrStep } from './step';\nimport { WR_STEPPER, type WrStepperContext } from './tokens';\n\n/**\n * Multi-step wizard container. Children are `<wr-step>` components — the\n * stepper renders one numbered header per step (with connectors) and the\n * body of the currently active one.\n *\n * Two-way bind `[(active)]` to the active step index. Set `linear=\"true\"`\n * to forbid jumping past incomplete steps.\n *\n * @example\n * ```html\n * <wr-stepper [(active)]=\"step\" linear>\n *   <wr-step label=\"Account\">…</wr-step>\n *   <wr-step label=\"Profile\">…</wr-step>\n *   <wr-step label=\"Confirm\">…</wr-step>\n * </wr-stepper>\n * ```\n *\n * @see https://ngwr.dev/components/stepper\n */\n@Component({\n  selector: 'wr-stepper',\n  templateUrl: './stepper.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: WR_STEPPER,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrStepper),\n    },\n  ],\n})\nexport class WrStepper implements WrStepperContext {\n  /** Index of the currently visible step. */\n  readonly active = model(0);\n\n  /** Layout direction. @default 'horizontal' */\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /** Lock steps after the latest completed one. @default false */\n  readonly linear = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly steps = contentChildren(WrStep);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-stepper', `wr-stepper--${this.orientation()}`];\n    if (this.linear()) parts.push('wr-stepper--linear');\n    return parts.join(' ');\n  });\n\n  constructor() {\n    // Push each step's index down so it can compute its own active state.\n    effect(() => {\n      this.steps().forEach((step, i) => step._index.set(i));\n    });\n  }\n\n  /** Is the step at `index` considered completed? */\n  protected isCompleted(index: number): boolean {\n    const override = this.steps()[index]?.completed();\n    if (override !== null && override !== undefined) return override;\n    return index < this.active();\n  }\n\n  /** Is the step at `index` reachable for direct header clicks? */\n  protected isReachable(index: number): boolean {\n    if (this.steps()[index]?.disabled()) return false;\n    if (!this.linear()) return true;\n    if (index <= this.active()) return true;\n    for (let i = 0; i < index; i++) {\n      if (!this.isCompleted(i)) return false;\n    }\n    return true;\n  }\n\n  protected onHeaderClick(index: number): void {\n    if (this.isReachable(index)) this.goTo(index);\n  }\n\n  // Imperative API\n\n  goTo(index: number): void {\n    const last = this.steps().length - 1;\n    if (last < 0) return;\n    const clamped = Math.min(Math.max(0, index), last);\n    this.active.set(clamped);\n  }\n\n  next(): void {\n    this.goTo(this.active() + 1);\n  }\n\n  prev(): void {\n    this.goTo(this.active() - 1);\n  }\n}\n","<ol class=\"wr-stepper__headers\" role=\"list\">\n  @for (step of steps(); track $index) {\n    <li\n      class=\"wr-stepper__header\"\n      [class.wr-stepper__header--active]=\"$index === active()\"\n      [class.wr-stepper__header--completed]=\"isCompleted($index)\"\n      [class.wr-stepper__header--reachable]=\"isReachable($index)\"\n      [class.wr-stepper__header--disabled]=\"step.disabled()\"\n    >\n      <button\n        type=\"button\"\n        class=\"wr-stepper__header-button\"\n        [disabled]=\"!isReachable($index) || step.disabled()\"\n        [attr.aria-current]=\"$index === active() ? 'step' : null\"\n        (click)=\"onHeaderClick($index)\"\n      >\n        <span class=\"wr-stepper__indicator\" aria-hidden=\"true\">\n          @if (isCompleted($index)) {\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n              <path\n                d=\"M3 7.5 L6 10.5 L11 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          } @else {\n            {{ $index + 1 }}\n          }\n        </span>\n        <span class=\"wr-stepper__label\">\n          {{ step.label() }}\n          @if (step.optional()) {\n            <small class=\"wr-stepper__optional\">optional</small>\n          }\n          @if (step.description()) {\n            <small class=\"wr-stepper__description\">{{ step.description() }}</small>\n          }\n        </span>\n      </button>\n      @if (!$last) {\n        <span class=\"wr-stepper__connector\" aria-hidden=\"true\"></span>\n      }\n    </li>\n  }\n</ol>\n\n<div class=\"wr-stepper__body\">\n  <ng-content />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}