ngwr 6.0.0 → 7.0.0

package/fesm2022/ngwr-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-list.mjs","sources":["../../../projects/lib/list/list.ts","../../../projects/lib/list/list-item.ts","../../../projects/lib/list/list-item.html","../../../projects/lib/list/ngwr-list.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Generic list container. Renders `<ul role=\"list\">` with optional\n * borders, dividers between items, and dense (compact) padding. Project\n * `<wr-list-item>` children — they pick up the container's settings\n * through CSS cascade, no DI needed.\n *\n * @example\n * ```html\n * <wr-list bordered dividers>\n *   <wr-list-item>\n *     <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n *     Reports\n *     <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n *   </wr-list-item>\n *   <wr-list-item interactive (click)=\"open(item)\">\n *     Click anywhere on this row\n *   </wr-list-item>\n * </wr-list>\n * ```\n *\n * @see https://ngwr.dev/components/list\n */\n@Component({\n  selector: 'wr-list',\n  template: '<ul class=\"wr-list__items\" role=\"list\"><ng-content /></ul>',\n  styleUrl: './list.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-label]': 'ariaLabel() || null',\n  },\n})\nexport class WrList {\n  /** Wrap the list in a card-style border + radius. @default false */\n  readonly bordered = input(false, { transform: coerceBooleanProperty });\n\n  /** Draw a thin divider between items. @default false */\n  readonly dividers = input(false, { transform: coerceBooleanProperty });\n\n  /** Use compact padding on every item. @default false */\n  readonly dense = input(false, { transform: coerceBooleanProperty });\n\n  /** Optional accessible label for the list. */\n  readonly ariaLabel = input<string>('');\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-list'];\n    if (this.bordered()) parts.push('wr-list--bordered');\n    if (this.dividers()) parts.push('wr-list--dividers');\n    if (this.dense()) parts.push('wr-list--dense');\n    return parts.join(' ');\n  });\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 { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Row inside `<wr-list>`. Three projection slots:\n *\n *  - `[wrListItemLeading]` — icon, avatar, status dot, etc.\n *  - default — main label / body\n *  - `[wrListItemTrailing]` — meta value, action button, chevron\n *\n * Set `interactive` to get hover, cursor, keyboard activation, and the\n * appropriate ARIA role for click handling.\n *\n * @example\n * ```html\n * <wr-list-item>Plain row</wr-list-item>\n *\n * <wr-list-item interactive (click)=\"onPick(item)\">\n *   <wr-icon ngProjectAs=\"[wrListItemLeading]\" name=\"folder\" />\n *   Reports\n *   <span ngProjectAs=\"[wrListItemTrailing]\">12</span>\n * </wr-list-item>\n * ```\n */\n@Component({\n  selector: 'wr-list-item',\n  templateUrl: './list-item.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    role: 'listitem',\n    '[attr.tabindex]': 'interactive() ? \"0\" : null',\n    '[attr.aria-disabled]': 'disabled() || null',\n    '(keydown.enter)': 'onActivate($event)',\n    '(keydown.space)': 'onActivate($event)',\n  },\n})\nexport class WrListItem {\n  /** Adds hover / cursor styles + keyboard activation. @default false */\n  readonly interactive = input(false, { transform: coerceBooleanProperty });\n\n  /** Visual disabled state. Suppresses hover + keyboard activation. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-list__item'];\n    if (this.interactive()) parts.push('wr-list__item--interactive');\n    if (this.disabled()) parts.push('wr-list__item--disabled');\n    return parts.join(' ');\n  });\n\n  protected onActivate(event: Event): void {\n    if (!this.interactive() || this.disabled()) return;\n    event.preventDefault();\n    (event.currentTarget as HTMLElement).click();\n  }\n}\n","<span class=\"wr-list__leading\"><ng-content select=\"[wrListItemLeading]\" /></span>\n<span class=\"wr-list__body\"><ng-content /></span>\n<span class=\"wr-list__trailing\"><ng-content select=\"[wrListItemTrailing]\" /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-loading-bar.mjs

@@ -0,0 +1,160 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, Service, input, ViewEncapsulation, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import { filter } from 'rxjs';
+
+/**
+ * @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
+ */
+/**
+ * Singleton state machine for a top-of-page progress indicator. Driven
+ * by router events out of the box, plus a manual `start()` / `complete()`
+ * API for HTTP-interceptor-style usage.
+ *
+ * Pair with `<wr-loading-bar>` to render the bar at the top of your shell.
+ *
+ * @example
+ * ```ts
+ * // From an HttpInterceptor:
+ * const bar = inject(WrLoadingBar);
+ * bar.start();
+ * return next(req).pipe(finalize(() => bar.complete()));
+ * ```
+ *
+ * @see https://ngwr.dev/services/loading-bar
+ */
+class WrLoadingBar {
+    router = inject(Router, { optional: true });
+    /** Live count of pending "tasks" (manual + router). */
+    count = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Tween value `[0, 1]` — the bar's actual width. */
+    _progress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_progress" }] : /* istanbul ignore next */ []));
+    progress = this._progress.asReadonly();
+    state = computed(() => {
+        if (this.count() > 0)
+            return 'running';
+        return this._progress() > 0 ? 'completing' : 'idle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    timer = null;
+    constructor() {
+        if (this.router) {
+            // Mirror router events: any in-flight navigation starts the bar,
+            // each terminal event releases one slot.
+            toSignal(this.router.events.pipe(filter(e => e instanceof NavigationStart ||
+                e instanceof NavigationEnd ||
+                e instanceof NavigationCancel ||
+                e instanceof NavigationError)), { manualCleanup: true });
+            this.router.events.subscribe(event => {
+                if (event instanceof NavigationStart)
+                    this.start();
+                else if (event instanceof NavigationEnd ||
+                    event instanceof NavigationCancel ||
+                    event instanceof NavigationError) {
+                    this.complete();
+                }
+            });
+        }
+    }
+    /** Reserve a slot. The bar starts trickling as long as `count > 0`. */
+    start() {
+        if (this.count() === 0)
+            this.beginTrickle();
+        this.count.update(v => v + 1);
+    }
+    /** Release a slot. When the last one closes, the bar fast-forwards to 100% then resets. */
+    complete() {
+        this.count.update(v => Math.max(0, v - 1));
+        if (this.count() === 0)
+            this.finish();
+    }
+    /** Cancel without animating the bar to 100%. Resets immediately. */
+    reset() {
+        this.count.set(0);
+        this.stopTrickle();
+        this._progress.set(0);
+    }
+    // Internals
+    beginTrickle() {
+        this.stopTrickle();
+        if (this._progress() === 0)
+            this._progress.set(0.08);
+        this.timer = setInterval(() => {
+            const p = this._progress();
+            // Approach 90% asymptotically — we want the user-visible final jump
+            // to clearly indicate completion.
+            const next = p + (0.9 - p) * 0.08;
+            this._progress.set(next);
+        }, 150);
+    }
+    stopTrickle() {
+        if (this.timer === null)
+            return;
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+    finish() {
+        this.stopTrickle();
+        this._progress.set(1);
+        // Give the bar a moment to render the final 100% width before resetting.
+        setTimeout(() => {
+            if (this.count() === 0)
+                this._progress.set(0);
+        }, 220);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrLoadingBar, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: WrLoadingBar });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrLoadingBar, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+
+/**
+ * @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
+ */
+/**
+ * Thin progress bar fixed to the top of the viewport.
+ *
+ * Drop one at the root of your shell. Reads the singleton {@link WrLoadingBar}
+ * — every router navigation drives it automatically; HTTP interceptors
+ * can call `start()` / `complete()` to add their own slots.
+ *
+ * @example
+ * ```html
+ * <wr-loading-bar />               <!-- top, primary color -->
+ * <wr-loading-bar color="#9b51e0" height="3px" />
+ * ```
+ */
+class WrLoadingBarComponent {
+    /** Bar colour. Defaults to the primary brand colour. */
+    color = input('var(--wr-color-primary)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Bar height. */
+    height = input('2px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    bar = inject(WrLoadingBar);
+    active = computed(() => this.bar.state() !== 'idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrLoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrLoadingBarComponent, isStandalone: true, selector: "wr-loading-bar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-loading-bar" }, ngImport: i0, template: "<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n  <div\n    class=\"wr-loading-bar__fill\"\n    [style.width.%]=\"bar.progress() * 100\"\n    [style.background]=\"color()\"\n    [style.height]=\"height()\"\n  ></div>\n</div>\n", styles: [".wr-loading-bar{position:fixed;top:0;left:0;right:0;z-index:var(--wr-z-top, 9999);pointer-events:none}.wr-loading-bar__track{width:100%;overflow:hidden;opacity:0;transition:opacity .2s ease}.wr-loading-bar--active{opacity:1}.wr-loading-bar__fill{width:0;height:2px;background:var(--wr-color-primary);box-shadow:0 0 8px rgb(var(--wr-color-primary-rgb)/60%);transition:width .15s ease-out,opacity .2s ease}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrLoadingBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-loading-bar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-loading-bar' }, template: "<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n  <div\n    class=\"wr-loading-bar__fill\"\n    [style.width.%]=\"bar.progress() * 100\"\n    [style.background]=\"color()\"\n    [style.height]=\"height()\"\n  ></div>\n</div>\n", styles: [".wr-loading-bar{position:fixed;top:0;left:0;right:0;z-index:var(--wr-z-top, 9999);pointer-events:none}.wr-loading-bar__track{width:100%;overflow:hidden;opacity:0;transition:opacity .2s ease}.wr-loading-bar--active{opacity:1}.wr-loading-bar__fill{width:0;height:2px;background:var(--wr-color-primary);box-shadow:0 0 8px rgb(var(--wr-color-primary-rgb)/60%);transition:width .15s ease-out,opacity .2s ease}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrLoadingBar, WrLoadingBarComponent };
+//# sourceMappingURL=ngwr-loading-bar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-loading-bar.mjs","sources":["../../../projects/lib/loading-bar/services/loading-bar.ts","../../../projects/lib/loading-bar/loading-bar.component.ts","../../../projects/lib/loading-bar/loading-bar.component.html","../../../projects/lib/loading-bar/ngwr-loading-bar.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 { Service, type Signal, computed, inject, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';\n\nimport { filter } from 'rxjs';\n\nimport type { WrLoadingState } from '../interfaces';\n\n/**\n * Singleton state machine for a top-of-page progress indicator. Driven\n * by router events out of the box, plus a manual `start()` / `complete()`\n * API for HTTP-interceptor-style usage.\n *\n * Pair with `<wr-loading-bar>` to render the bar at the top of your shell.\n *\n * @example\n * ```ts\n * // From an HttpInterceptor:\n * const bar = inject(WrLoadingBar);\n * bar.start();\n * return next(req).pipe(finalize(() => bar.complete()));\n * ```\n *\n * @see https://ngwr.dev/services/loading-bar\n */\n@Service()\nexport class WrLoadingBar {\n  private readonly router = inject(Router, { optional: true });\n\n  /** Live count of pending \"tasks\" (manual + router). */\n  private readonly count = signal(0);\n\n  /** Tween value `[0, 1]` — the bar's actual width. */\n  private readonly _progress = signal(0);\n  readonly progress: Signal<number> = this._progress.asReadonly();\n\n  readonly state: Signal<WrLoadingState> = computed(() => {\n    if (this.count() > 0) return 'running';\n    return this._progress() > 0 ? 'completing' : 'idle';\n  });\n\n  private timer: ReturnType<typeof setInterval> | null = null;\n\n  constructor() {\n    if (this.router) {\n      // Mirror router events: any in-flight navigation starts the bar,\n      // each terminal event releases one slot.\n      toSignal(\n        this.router.events.pipe(\n          filter(\n            e =>\n              e instanceof NavigationStart ||\n              e instanceof NavigationEnd ||\n              e instanceof NavigationCancel ||\n              e instanceof NavigationError\n          )\n        ),\n        { manualCleanup: true }\n      );\n      this.router.events.subscribe(event => {\n        if (event instanceof NavigationStart) this.start();\n        else if (\n          event instanceof NavigationEnd ||\n          event instanceof NavigationCancel ||\n          event instanceof NavigationError\n        ) {\n          this.complete();\n        }\n      });\n    }\n  }\n\n  /** Reserve a slot. The bar starts trickling as long as `count > 0`. */\n  start(): void {\n    if (this.count() === 0) this.beginTrickle();\n    this.count.update(v => v + 1);\n  }\n\n  /** Release a slot. When the last one closes, the bar fast-forwards to 100% then resets. */\n  complete(): void {\n    this.count.update(v => Math.max(0, v - 1));\n    if (this.count() === 0) this.finish();\n  }\n\n  /** Cancel without animating the bar to 100%. Resets immediately. */\n  reset(): void {\n    this.count.set(0);\n    this.stopTrickle();\n    this._progress.set(0);\n  }\n\n  // Internals\n\n  private beginTrickle(): void {\n    this.stopTrickle();\n    if (this._progress() === 0) this._progress.set(0.08);\n    this.timer = setInterval(() => {\n      const p = this._progress();\n      // Approach 90% asymptotically — we want the user-visible final jump\n      // to clearly indicate completion.\n      const next = p + (0.9 - p) * 0.08;\n      this._progress.set(next);\n    }, 150);\n  }\n\n  private stopTrickle(): void {\n    if (this.timer === null) return;\n    clearInterval(this.timer);\n    this.timer = null;\n  }\n\n  private finish(): void {\n    this.stopTrickle();\n    this._progress.set(1);\n    // Give the bar a moment to render the final 100% width before resetting.\n    setTimeout(() => {\n      if (this.count() === 0) this._progress.set(0);\n    }, 220);\n  }\n}\n\nexport type { WrLoadingState } from '../interfaces';\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 { Component, ViewEncapsulation, computed, inject, input } from '@angular/core';\n\nimport { WrLoadingBar } from './services/loading-bar';\n\n/**\n * Thin progress bar fixed to the top of the viewport.\n *\n * Drop one at the root of your shell. Reads the singleton {@link WrLoadingBar}\n * — every router navigation drives it automatically; HTTP interceptors\n * can call `start()` / `complete()` to add their own slots.\n *\n * @example\n * ```html\n * <wr-loading-bar />               <!-- top, primary color -->\n * <wr-loading-bar color=\"#9b51e0\" height=\"3px\" />\n * ```\n */\n@Component({\n  selector: 'wr-loading-bar',\n  templateUrl: './loading-bar.component.html',\n  styleUrl: './loading-bar.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-loading-bar' },\n})\nexport class WrLoadingBarComponent {\n  /** Bar colour. Defaults to the primary brand colour. */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Bar height. */\n  readonly height = input<string>('2px');\n\n  protected readonly bar = inject(WrLoadingBar);\n\n  protected readonly active = computed(() => this.bar.state() !== 'idle');\n}\n","<div class=\"wr-loading-bar__track\" [class.wr-loading-bar--active]=\"active()\">\n  <div\n    class=\"wr-loading-bar__fill\"\n    [style.width.%]=\"bar.progress() * 100\"\n    [style.background]=\"color()\"\n    [style.height]=\"height()\"\n  ></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-marquee.mjs

@@ -0,0 +1,224 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, inject, ElementRef, DestroyRef, PLATFORM_ID, signal, computed, afterNextRender, effect, ViewEncapsulation, Component } from '@angular/core';
+import { numAttr } from 'ngwr/utils';
+
+/**
+ * @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
+ *
+ * Angular adaptation of the LogoLoop effect by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/animations/logo-loop
+ *
+ * Renamed `wr-marquee` in ngwr — same rAF-driven infinite carousel,
+ * supports image + template items, optional fade/scale/pause-on-hover.
+ */
+const SMOOTH_TAU = 0.25;
+const MIN_COPIES = 2;
+const COPY_HEADROOM = 2;
+function isNode(item) {
+    return 'node' in item;
+}
+/**
+ * Endless horizontal marquee. Auto-duplicates the items list until it
+ * covers the container width, then animates the track with a smooth
+ * rAF-driven scroll. Optional edge fades, scale-on-hover, and pause /
+ * variable-speed hover behaviour.
+ *
+ * @example
+ * ```html
+ * <wr-marquee
+ *   [items]="logos"
+ *   [speed]="80"
+ *   [gap]="48"
+ *   [itemHeight]="36"
+ *   [fadeOut]="true"
+ *   [scaleOnHover]="true"
+ *   [pauseOnHover]="true"
+ * />
+ * ```
+ *
+ * @see https://www.reactbits.dev/animations/logo-loop
+ */
+class WrMarquee {
+    /** Items to display. Each entry is either an image source or a TemplateRef node. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Scroll speed in pixels per second. Negative reverses direction. @default 120 */
+    speed = input(120, { ...(ngDevMode ? { debugName: "speed" } : /* istanbul ignore next */ {}), transform: numAttr(120) });
+    /** Track direction. @default 'left' */
+    direction = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Item height in pixels. @default 28 */
+    itemHeight = input(28, { ...(ngDevMode ? { debugName: "itemHeight" } : /* istanbul ignore next */ {}), transform: numAttr(28) });
+    /** Gap between items in pixels. @default 32 */
+    gap = input(32, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numAttr(32) });
+    /** Pause the loop on hover. @default false */
+    pauseOnHover = input(false, { ...(ngDevMode ? { debugName: "pauseOnHover" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Custom speed (px/s) when hovered. Overrides `pauseOnHover`. */
+    hoverSpeed = input(undefined, { ...(ngDevMode ? { debugName: "hoverSpeed" } : /* istanbul ignore next */ {}), transform: (v) => (v == null || v === '' ? undefined : coerceNumberProperty(v, 0)) });
+    /** Apply edge fade-out gradients. @default false */
+    fadeOut = input(false, { ...(ngDevMode ? { debugName: "fadeOut" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** CSS colour for the fade-out gradient. Defaults to the page background. */
+    fadeOutColor = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fadeOutColor" }] : /* istanbul ignore next */ []));
+    /** Scale individual items up on hover. @default false */
+    scaleOnHover = input(false, { ...(ngDevMode ? { debugName: "scaleOnHover" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Accessible label for the carousel region. @default 'Marquee' */
+    ariaLabel = input('Marquee', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    trackEl = viewChild.required('track');
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    seqWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seqWidth" }] : /* istanbul ignore next */ []));
+    copyCount = signal(MIN_COPIES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyCount" }] : /* istanbul ignore next */ []));
+    isHovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
+    copyIndices = computed(() => Array.from({ length: this.copyCount() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyIndices" }] : /* istanbul ignore next */ []));
+    /** Resolved hover speed: `hoverSpeed` overrides, else 0 when `pauseOnHover`, else live. */
+    effectiveHoverSpeed = computed(() => {
+        const explicit = this.hoverSpeed();
+        if (explicit !== undefined)
+            return explicit;
+        return this.pauseOnHover() ? 0 : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHoverSpeed" }] : /* istanbul ignore next */ []));
+    /** Target velocity in px/s, sign baked in. */
+    targetVelocity = computed(() => {
+        const s = this.speed();
+        const sign = this.direction() === 'left' ? 1 : -1;
+        return Math.abs(s) * sign * (s < 0 ? -1 : 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetVelocity" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => {
+            this.measure();
+            this.watchResize();
+            this.watchImageLoads();
+            this.startLoop();
+        });
+        // Re-measure on input changes that affect layout (items, gap, height).
+        effect(() => {
+            this.items();
+            this.gap();
+            this.itemHeight();
+            queueMicrotask(() => this.measure());
+        });
+    }
+    onEnter() {
+        if (this.effectiveHoverSpeed() !== undefined)
+            this.isHovered.set(true);
+    }
+    onLeave() {
+        if (this.effectiveHoverSpeed() !== undefined)
+            this.isHovered.set(false);
+    }
+    isNodeItem = isNode;
+    // Internals
+    /** Read first sequence width + decide how many copies cover the viewport. */
+    measure() {
+        const hostEl = this.host.nativeElement;
+        const seqEl = hostEl.querySelector('.wr-marquee__list');
+        if (!seqEl)
+            return;
+        const seqWidth = Math.ceil(seqEl.getBoundingClientRect().width);
+        if (seqWidth <= 0)
+            return;
+        this.seqWidth.set(seqWidth);
+        const containerWidth = hostEl.clientWidth || seqWidth;
+        const copies = Math.max(MIN_COPIES, Math.ceil(containerWidth / seqWidth) + COPY_HEADROOM);
+        this.copyCount.set(copies);
+    }
+    watchResize() {
+        const hostEl = this.host.nativeElement;
+        if (typeof ResizeObserver === 'undefined') {
+            const onResize = () => this.measure();
+            window.addEventListener('resize', onResize);
+            this.destroyRef.onDestroy(() => window.removeEventListener('resize', onResize));
+            return;
+        }
+        const ro = new ResizeObserver(() => this.measure());
+        ro.observe(hostEl);
+        const seqEl = hostEl.querySelector('.wr-marquee__list');
+        if (seqEl)
+            ro.observe(seqEl);
+        this.destroyRef.onDestroy(() => ro.disconnect());
+    }
+    watchImageLoads() {
+        const hostEl = this.host.nativeElement;
+        const seqEl = hostEl.querySelector('.wr-marquee__list');
+        if (!seqEl)
+            return;
+        const imgs = seqEl.querySelectorAll('img');
+        if (imgs.length === 0)
+            return;
+        let remaining = imgs.length;
+        const onDone = () => {
+            remaining -= 1;
+            if (remaining === 0)
+                this.measure();
+        };
+        imgs.forEach(img => {
+            if (img.complete)
+                onDone();
+            else {
+                img.addEventListener('load', onDone, { once: true });
+                img.addEventListener('error', onDone, { once: true });
+            }
+        });
+    }
+    startLoop() {
+        const track = this.trackEl().nativeElement;
+        let raf = 0;
+        let lastTs = null;
+        let offset = 0;
+        let velocity = 0;
+        const tick = (ts) => {
+            lastTs ??= ts;
+            const dt = Math.max(0, ts - lastTs) / 1000;
+            lastTs = ts;
+            const target = this.isHovered() ? (this.effectiveHoverSpeed() ?? this.targetVelocity()) : this.targetVelocity();
+            const ease = 1 - Math.exp(-dt / SMOOTH_TAU);
+            velocity += (target - velocity) * ease;
+            const w = this.seqWidth();
+            if (w > 0) {
+                offset = (((offset + velocity * dt) % w) + w) % w;
+                track.style.transform = `translate3d(${-offset}px, 0, 0)`;
+            }
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrMarquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrMarquee, isStandalone: true, selector: "wr-marquee", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, hoverSpeed: { classPropertyName: "hoverSpeed", publicName: "hoverSpeed", isSignal: true, isRequired: false, transformFunction: null }, fadeOut: { classPropertyName: "fadeOut", publicName: "fadeOut", isSignal: true, isRequired: false, transformFunction: null }, fadeOutColor: { classPropertyName: "fadeOutColor", publicName: "fadeOutColor", isSignal: true, isRequired: false, transformFunction: null }, scaleOnHover: { classPropertyName: "scaleOnHover", publicName: "scaleOnHover", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-marquee--fade": "fadeOut()", "class.wr-marquee--scale-hover": "scaleOnHover()", "style.--wr-marquee-gap.px": "gap()", "style.--wr-marquee-height.px": "itemHeight()", "style.--wr-marquee-fade-color": "fadeOutColor() || null", "attr.role": "\"region\"", "attr.aria-label": "ariaLabel()" }, classAttribute: "wr-marquee" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n  @for (copyIndex of copyIndices(); track copyIndex) {\n    <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n      @for (item of items(); track $index) {\n        <li class=\"wr-marquee__item\" role=\"listitem\">\n          @if (item.href) {\n            <a\n              class=\"wr-marquee__link\"\n              [href]=\"item.href\"\n              [attr.aria-label]=\"\n                isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n              \"\n              target=\"_blank\"\n              rel=\"noreferrer noopener\"\n            >\n              <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n            </a>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n<ng-template #content let-item>\n  @if (isNodeItem(item)) {\n    <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n      <ng-container *ngTemplateOutlet=\"item.node\" />\n    </span>\n  } @else {\n    <img\n      [src]=\"item.src\"\n      [srcset]=\"item.srcSet || null\"\n      [sizes]=\"item.sizes || null\"\n      [width]=\"item.width || null\"\n      [height]=\"item.height || null\"\n      [alt]=\"item.alt || ''\"\n      [title]=\"item.title || null\"\n      loading=\"lazy\"\n      decoding=\"async\"\n      draggable=\"false\"\n    />\n  }\n</ng-template>\n", styles: [".wr-marquee{--wr-marquee-gap: 32px;--wr-marquee-height: 28px;--wr-marquee-fade-color-auto: var(--wr-color-white, #ffffff);position:relative;display:block;width:100%;overflow:hidden}.wr-marquee--scale-hover{padding-top:calc(var(--wr-marquee-height) * .1);padding-bottom:calc(var(--wr-marquee-height) * .1)}.wr-marquee__track{display:flex;width:max-content;will-change:transform;-webkit-user-select:none;user-select:none;position:relative;z-index:0}.wr-marquee__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}.wr-marquee__item{flex:0 0 auto;margin-right:var(--wr-marquee-gap);font-size:var(--wr-marquee-height);line-height:1}.wr-marquee__item:last-child{margin-right:var(--wr-marquee-gap)}.wr-marquee__node{display:inline-flex;align-items:center}.wr-marquee__item img{height:var(--wr-marquee-height);width:auto;display:block;object-fit:contain;image-rendering:-webkit-optimize-contrast;-webkit-user-drag:none;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee--scale-hover .wr-marquee__item{overflow:visible}.wr-marquee--scale-hover .wr-marquee__item:hover img,.wr-marquee--scale-hover .wr-marquee__item:hover .wr-marquee__node{transform:scale(1.2);transform-origin:center center}.wr-marquee--scale-hover .wr-marquee__node{transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee__link{display:inline-flex;align-items:center;text-decoration:none;border-radius:4px;transition:opacity .2s ease}.wr-marquee__link:hover{opacity:.8}.wr-marquee__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}.wr-marquee--fade:before,.wr-marquee--fade:after{content:\"\";position:absolute;top:0;bottom:0;width:clamp(24px,8%,120px);pointer-events:none;z-index:10}.wr-marquee--fade:before{left:0;background:linear-gradient(to right,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}.wr-marquee--fade:after{right:0;background:linear-gradient(to left,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}@media(prefers-reduced-motion:reduce){.wr-marquee .wr-marquee__track{transform:translateZ(0)!important}.wr-marquee .wr-marquee__item img,.wr-marquee .wr-marquee__node{transition:none!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrMarquee, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-marquee', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
+                        class: 'wr-marquee',
+                        '[class.wr-marquee--fade]': 'fadeOut()',
+                        '[class.wr-marquee--scale-hover]': 'scaleOnHover()',
+                        '[style.--wr-marquee-gap.px]': 'gap()',
+                        '[style.--wr-marquee-height.px]': 'itemHeight()',
+                        '[style.--wr-marquee-fade-color]': 'fadeOutColor() || null',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    }, template: "<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n  @for (copyIndex of copyIndices(); track copyIndex) {\n    <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n      @for (item of items(); track $index) {\n        <li class=\"wr-marquee__item\" role=\"listitem\">\n          @if (item.href) {\n            <a\n              class=\"wr-marquee__link\"\n              [href]=\"item.href\"\n              [attr.aria-label]=\"\n                isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n              \"\n              target=\"_blank\"\n              rel=\"noreferrer noopener\"\n            >\n              <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n            </a>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n<ng-template #content let-item>\n  @if (isNodeItem(item)) {\n    <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n      <ng-container *ngTemplateOutlet=\"item.node\" />\n    </span>\n  } @else {\n    <img\n      [src]=\"item.src\"\n      [srcset]=\"item.srcSet || null\"\n      [sizes]=\"item.sizes || null\"\n      [width]=\"item.width || null\"\n      [height]=\"item.height || null\"\n      [alt]=\"item.alt || ''\"\n      [title]=\"item.title || null\"\n      loading=\"lazy\"\n      decoding=\"async\"\n      draggable=\"false\"\n    />\n  }\n</ng-template>\n", styles: [".wr-marquee{--wr-marquee-gap: 32px;--wr-marquee-height: 28px;--wr-marquee-fade-color-auto: var(--wr-color-white, #ffffff);position:relative;display:block;width:100%;overflow:hidden}.wr-marquee--scale-hover{padding-top:calc(var(--wr-marquee-height) * .1);padding-bottom:calc(var(--wr-marquee-height) * .1)}.wr-marquee__track{display:flex;width:max-content;will-change:transform;-webkit-user-select:none;user-select:none;position:relative;z-index:0}.wr-marquee__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}.wr-marquee__item{flex:0 0 auto;margin-right:var(--wr-marquee-gap);font-size:var(--wr-marquee-height);line-height:1}.wr-marquee__item:last-child{margin-right:var(--wr-marquee-gap)}.wr-marquee__node{display:inline-flex;align-items:center}.wr-marquee__item img{height:var(--wr-marquee-height);width:auto;display:block;object-fit:contain;image-rendering:-webkit-optimize-contrast;-webkit-user-drag:none;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee--scale-hover .wr-marquee__item{overflow:visible}.wr-marquee--scale-hover .wr-marquee__item:hover img,.wr-marquee--scale-hover .wr-marquee__item:hover .wr-marquee__node{transform:scale(1.2);transform-origin:center center}.wr-marquee--scale-hover .wr-marquee__node{transition:transform .3s cubic-bezier(.4,0,.2,1)}.wr-marquee__link{display:inline-flex;align-items:center;text-decoration:none;border-radius:4px;transition:opacity .2s ease}.wr-marquee__link:hover{opacity:.8}.wr-marquee__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}.wr-marquee--fade:before,.wr-marquee--fade:after{content:\"\";position:absolute;top:0;bottom:0;width:clamp(24px,8%,120px);pointer-events:none;z-index:10}.wr-marquee--fade:before{left:0;background:linear-gradient(to right,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}.wr-marquee--fade:after{right:0;background:linear-gradient(to left,var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,rgba(0,0,0,0) 100%)}@media(prefers-reduced-motion:reduce){.wr-marquee .wr-marquee__track{transform:translateZ(0)!important}.wr-marquee .wr-marquee__item img,.wr-marquee .wr-marquee__node{transition:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], hoverSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverSpeed", required: false }] }], fadeOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeOut", required: false }] }], fadeOutColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeOutColor", required: false }] }], scaleOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleOnHover", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrMarquee };
+//# sourceMappingURL=ngwr-marquee.mjs.map

package/fesm2022/ngwr-marquee.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-marquee.mjs","sources":["../../../projects/lib/marquee/marquee.ts","../../../projects/lib/marquee/marquee.html","../../../projects/lib/marquee/ngwr-marquee.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 * Angular adaptation of the LogoLoop effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/animations/logo-loop\n *\n * Renamed `wr-marquee` in ngwr — same rAF-driven infinite carousel,\n * supports image + template items, optional fade/scale/pause-on-hover.\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrMarqueeNode, WrMarqueeItem } from './interfaces';\n\nconst SMOOTH_TAU = 0.25;\nconst MIN_COPIES = 2;\nconst COPY_HEADROOM = 2;\n\nfunction isNode(item: WrMarqueeItem): item is WrMarqueeNode {\n  return 'node' in item;\n}\n\n/**\n * Endless horizontal marquee. Auto-duplicates the items list until it\n * covers the container width, then animates the track with a smooth\n * rAF-driven scroll. Optional edge fades, scale-on-hover, and pause /\n * variable-speed hover behaviour.\n *\n * @example\n * ```html\n * <wr-marquee\n *   [items]=\"logos\"\n *   [speed]=\"80\"\n *   [gap]=\"48\"\n *   [itemHeight]=\"36\"\n *   [fadeOut]=\"true\"\n *   [scaleOnHover]=\"true\"\n *   [pauseOnHover]=\"true\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/animations/logo-loop\n */\n@Component({\n  selector: 'wr-marquee',\n  templateUrl: './marquee.html',\n  styleUrl: './marquee.scss',\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet],\n  host: {\n    class: 'wr-marquee',\n    '[class.wr-marquee--fade]': 'fadeOut()',\n    '[class.wr-marquee--scale-hover]': 'scaleOnHover()',\n    '[style.--wr-marquee-gap.px]': 'gap()',\n    '[style.--wr-marquee-height.px]': 'itemHeight()',\n    '[style.--wr-marquee-fade-color]': 'fadeOutColor() || null',\n    '[attr.role]': '\"region\"',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n})\nexport class WrMarquee {\n  /** Items to display. Each entry is either an image source or a TemplateRef node. */\n  readonly items = input.required<readonly WrMarqueeItem[]>();\n\n  /** Scroll speed in pixels per second. Negative reverses direction. @default 120 */\n  readonly speed = input(120, { transform: numAttr(120) });\n\n  /** Track direction. @default 'left' */\n  readonly direction = input<'left' | 'right'>('left');\n\n  /** Item height in pixels. @default 28 */\n  readonly itemHeight = input(28, { transform: numAttr(28) });\n\n  /** Gap between items in pixels. @default 32 */\n  readonly gap = input(32, { transform: numAttr(32) });\n\n  /** Pause the loop on hover. @default false */\n  readonly pauseOnHover = input(false, { transform: coerceBooleanProperty });\n\n  /** Custom speed (px/s) when hovered. Overrides `pauseOnHover`. */\n  readonly hoverSpeed = input<number | undefined>(undefined, {\n    transform: (v: unknown): number | undefined => (v == null || v === '' ? undefined : coerceNumberProperty(v, 0)),\n  });\n\n  /** Apply edge fade-out gradients. @default false */\n  readonly fadeOut = input(false, { transform: coerceBooleanProperty });\n\n  /** CSS colour for the fade-out gradient. Defaults to the page background. */\n  readonly fadeOutColor = input<string>('');\n\n  /** Scale individual items up on hover. @default false */\n  readonly scaleOnHover = input(false, { transform: coerceBooleanProperty });\n\n  /** Accessible label for the carousel region. @default 'Marquee' */\n  readonly ariaLabel = input('Marquee');\n\n  private readonly trackEl = viewChild.required<ElementRef<HTMLElement>>('track');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  protected readonly seqWidth = signal(0);\n  protected readonly copyCount = signal(MIN_COPIES);\n  protected readonly isHovered = signal(false);\n\n  protected readonly copyIndices = computed(() => Array.from({ length: this.copyCount() }, (_, i) => i));\n\n  /** Resolved hover speed: `hoverSpeed` overrides, else 0 when `pauseOnHover`, else live. */\n  private readonly effectiveHoverSpeed = computed<number | undefined>(() => {\n    const explicit = this.hoverSpeed();\n    if (explicit !== undefined) return explicit;\n    return this.pauseOnHover() ? 0 : undefined;\n  });\n\n  /** Target velocity in px/s, sign baked in. */\n  private readonly targetVelocity = computed(() => {\n    const s = this.speed();\n    const sign = this.direction() === 'left' ? 1 : -1;\n    return Math.abs(s) * sign * (s < 0 ? -1 : 1);\n  });\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      this.measure();\n      this.watchResize();\n      this.watchImageLoads();\n      this.startLoop();\n    });\n\n    // Re-measure on input changes that affect layout (items, gap, height).\n    effect(() => {\n      this.items();\n      this.gap();\n      this.itemHeight();\n      queueMicrotask(() => this.measure());\n    });\n  }\n\n  protected onEnter(): void {\n    if (this.effectiveHoverSpeed() !== undefined) this.isHovered.set(true);\n  }\n  protected onLeave(): void {\n    if (this.effectiveHoverSpeed() !== undefined) this.isHovered.set(false);\n  }\n  protected isNodeItem = isNode;\n\n  // Internals\n\n  /** Read first sequence width + decide how many copies cover the viewport. */\n  private measure(): void {\n    const hostEl = this.host.nativeElement;\n    const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n    if (!seqEl) return;\n    const seqWidth = Math.ceil(seqEl.getBoundingClientRect().width);\n    if (seqWidth <= 0) return;\n    this.seqWidth.set(seqWidth);\n    const containerWidth = hostEl.clientWidth || seqWidth;\n    const copies = Math.max(MIN_COPIES, Math.ceil(containerWidth / seqWidth) + COPY_HEADROOM);\n    this.copyCount.set(copies);\n  }\n\n  private watchResize(): void {\n    const hostEl = this.host.nativeElement;\n    if (typeof ResizeObserver === 'undefined') {\n      const onResize = (): void => this.measure();\n      window.addEventListener('resize', onResize);\n      this.destroyRef.onDestroy(() => window.removeEventListener('resize', onResize));\n      return;\n    }\n    const ro = new ResizeObserver(() => this.measure());\n    ro.observe(hostEl);\n    const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n    if (seqEl) ro.observe(seqEl);\n    this.destroyRef.onDestroy(() => ro.disconnect());\n  }\n\n  private watchImageLoads(): void {\n    const hostEl = this.host.nativeElement;\n    const seqEl = hostEl.querySelector<HTMLElement>('.wr-marquee__list');\n    if (!seqEl) return;\n    const imgs = seqEl.querySelectorAll('img');\n    if (imgs.length === 0) return;\n    let remaining = imgs.length;\n    const onDone = (): void => {\n      remaining -= 1;\n      if (remaining === 0) this.measure();\n    };\n    imgs.forEach(img => {\n      if (img.complete) onDone();\n      else {\n        img.addEventListener('load', onDone, { once: true });\n        img.addEventListener('error', onDone, { once: true });\n      }\n    });\n  }\n\n  private startLoop(): void {\n    const track = this.trackEl().nativeElement;\n    let raf = 0;\n    let lastTs: number | null = null;\n    let offset = 0;\n    let velocity = 0;\n\n    const tick = (ts: number): void => {\n      lastTs ??= ts;\n      const dt = Math.max(0, ts - lastTs) / 1000;\n      lastTs = ts;\n\n      const target = this.isHovered() ? (this.effectiveHoverSpeed() ?? this.targetVelocity()) : this.targetVelocity();\n      const ease = 1 - Math.exp(-dt / SMOOTH_TAU);\n      velocity += (target - velocity) * ease;\n\n      const w = this.seqWidth();\n      if (w > 0) {\n        offset = (((offset + velocity * dt) % w) + w) % w;\n        track.style.transform = `translate3d(${-offset}px, 0, 0)`;\n      }\n      raf = requestAnimationFrame(tick);\n    };\n\n    raf = requestAnimationFrame(tick);\n    this.destroyRef.onDestroy(() => cancelAnimationFrame(raf));\n  }\n}\n\nexport type { WrMarqueeImage, WrMarqueeNode, WrMarqueeItem } from './interfaces';\n","<div class=\"wr-marquee__track\" #track (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\">\n  @for (copyIndex of copyIndices(); track copyIndex) {\n    <ul class=\"wr-marquee__list\" role=\"list\" [attr.aria-hidden]=\"copyIndex > 0\" [attr.data-copy]=\"copyIndex\">\n      @for (item of items(); track $index) {\n        <li class=\"wr-marquee__item\" role=\"listitem\">\n          @if (item.href) {\n            <a\n              class=\"wr-marquee__link\"\n              [href]=\"item.href\"\n              [attr.aria-label]=\"\n                isNodeItem(item) ? item.ariaLabel || item.title || 'link' : item.alt || item.title || 'link'\n              \"\n              target=\"_blank\"\n              rel=\"noreferrer noopener\"\n            >\n              <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n            </a>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item }\" />\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n\n<ng-template #content let-item>\n  @if (isNodeItem(item)) {\n    <span class=\"wr-marquee__node\" [attr.aria-hidden]=\"!!item.href && !item.ariaLabel\">\n      <ng-container *ngTemplateOutlet=\"item.node\" />\n    </span>\n  } @else {\n    <img\n      [src]=\"item.src\"\n      [srcset]=\"item.srcSet || null\"\n      [sizes]=\"item.sizes || null\"\n      [width]=\"item.width || null\"\n      [height]=\"item.height || null\"\n      [alt]=\"item.alt || ''\"\n      [title]=\"item.title || null\"\n      loading=\"lazy\"\n      decoding=\"async\"\n      draggable=\"false\"\n    />\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-media.mjs

@@ -0,0 +1,132 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, PLATFORM_ID, computed, signal, Service, makeEnvironmentProviders } 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
+ */
+/** Defaults mirror `projects/lib/styles/_breakpoints.scss`. */
+const DEFAULT_WR_BREAKPOINTS = Object.freeze({
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400,
+});
+/** DI token for the breakpoint map — override via {@link provideWrMedia}. */
+const WR_BREAKPOINTS = new InjectionToken('WR_BREAKPOINTS', {
+    factory: () => DEFAULT_WR_BREAKPOINTS,
+});
+
+/**
+ * @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
+ */
+/**
+ * Reactive viewport queries backed by signals.
+ *
+ * Each query subscribes lazily — `matches(...)` caches its signal so
+ * repeated calls with the same query share a single `matchMedia` listener.
+ * SSR-safe: on the server every signal stays `false`.
+ *
+ * @example
+ * ```ts
+ * private readonly media = inject(WrMedia);
+ * protected readonly isMd = this.media.matches('md');
+ * protected readonly isWide = this.media.matches('(min-width: 1200px)');
+ * ```
+ *
+ * @see https://ngwr.dev/services/media
+ */
+class WrMedia {
+    breakpoints = inject(WR_BREAKPOINTS);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Cache of query → signal so we share `matchMedia` listeners. */
+    cache = new Map();
+    /** Active breakpoint key — `xs` / `sm` / `md` / `lg` / `xl` / `xxl`. */
+    current = computed(() => {
+        // Walk from largest to smallest, return the first one that matches.
+        const ordered = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+        for (const key of ordered) {
+            if (this.matches(key)())
+                return key;
+        }
+        return 'xs';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns a signal that tracks the given query.
+     *
+     * - Named breakpoint (`'md'`) → `(min-width: <px>)`.
+     * - Raw query (`'(prefers-color-scheme: dark)'`) → passed through unchanged.
+     */
+    matches(query) {
+        const resolved = this.resolveQuery(query);
+        const cached = this.cache.get(resolved);
+        if (cached)
+            return cached;
+        const sig = this.createSignal(resolved);
+        this.cache.set(resolved, sig);
+        return sig;
+    }
+    resolveQuery(query) {
+        if (query in this.breakpoints) {
+            const px = this.breakpoints[query];
+            return px === 0 ? '(min-width: 0px)' : `(min-width: ${px}px)`;
+        }
+        return query;
+    }
+    createSignal(query) {
+        if (!this.isBrowser)
+            return signal(false).asReadonly();
+        const mql = window.matchMedia(query);
+        const sig = signal(mql.matches, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sig" }] : /* istanbul ignore next */ []));
+        const handler = (event) => sig.set(event.matches);
+        mql.addEventListener('change', handler);
+        this.destroyRef.onDestroy(() => mql.removeEventListener('change', handler));
+        return sig.asReadonly();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrMedia, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: WrMedia });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrMedia, decorators: [{
+            type: Service
+        }] });
+
+/**
+ * @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
+ */
+/**
+ * Override the breakpoint map used by {@link WrMedia}. Partial maps
+ * are merged with {@link DEFAULT_WR_BREAKPOINTS}, so you only need to list
+ * the breakpoints you want to change.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideWrMedia({ md: 720, lg: 1024 })],
+ * });
+ * ```
+ */
+function provideWrMedia(breakpoints = {}) {
+    const merged = { ...DEFAULT_WR_BREAKPOINTS, ...breakpoints };
+    return makeEnvironmentProviders([{ provide: WR_BREAKPOINTS, useValue: merged }]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_WR_BREAKPOINTS, WR_BREAKPOINTS, WrMedia, provideWrMedia };
+//# sourceMappingURL=ngwr-media.mjs.map