@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-roving-focus.mjs

@@ -0,0 +1,323 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, booleanAttribute, output, inject, ElementRef, signal, computed, effect, Directive } from '@angular/core';
+import { domEventHandler } from '@ngneers/controls/api/ng';
+import { generateElementId } from '@ngneers/controls/utils-ng';
+
+const ROVING_GROUP = new InjectionToken('ROVING_GROUP');
+class NgnRovingGroup {
+    /**
+     * Which arrow keys move the active item: `'horizontal'` uses Left/Right,
+     * `'vertical'` uses Up/Down. Home/End always jump to first/last.
+     * @default 'horizontal'
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * How the active item is exposed. `'tabindex'` moves the tab stop (and DOM
+     * focus) between items; `'activedescendant'` keeps focus on the group and
+     * points `aria-activedescendant` at the active item.
+     * @default 'tabindex'
+     */
+    rovingMode = input('tabindex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rovingMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether keyboard navigation wraps around the ends of the list instead of
+     * stopping at the first/last item.
+     * @default false
+     */
+    rovingWrap = input(false, { ...(ngDevMode ? { debugName: "rovingWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Emits the index of the newly active item whenever it changes via keyboard,
+     * pointer, or {@link setActive}. Not emitted by {@link syncActiveIndex}.
+     */
+    activeItemChange = output();
+    _host = inject(ElementRef).nativeElement;
+    _items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    /** Items in DOM order. */
+    items = computed(() => [...this._items()].sort((a, b) => {
+        if (a.element === b.element)
+            return 0;
+        return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING
+            ? -1
+            : 1;
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Tracks the previously active item's id so we can decide whether to call
+     * `.focus()`. Initialized to `null` — the first effect pass sets it without
+     * focusing; subsequent passes focus when the id actually changes.
+     */
+    _prevActiveId = null;
+    /**
+     * When set, the next focus-mode effect pass updates the tab stop / attributes
+     * but does NOT move DOM focus. Consumed (reset) by that pass. Lets consumers
+     * sync the active item to a programmatic selection (e.g. a radio group's
+     * `value` change) without stealing focus into the group.
+     */
+    _suppressFocus = false;
+    constructor() {
+        domEventHandler(this._host, 'keydown', e => this._onKeydown(e));
+        // Apply focus-mode side effects reactively.
+        effect(() => {
+            const items = this.items();
+            const mode = this.rovingMode();
+            // Clamp the active index LOCALLY (do not mutate the activeIndex signal)
+            // so that attributes/focus always reference a valid item even if
+            // activeIndex is stale after the items list shrinks.
+            const active = items.length
+                ? Math.max(0, Math.min(this.activeIndex(), items.length - 1))
+                : this.activeIndex();
+            if (mode === 'tabindex') {
+                // Clean up activedescendant mode attributes.
+                this._host.removeAttribute('aria-activedescendant');
+                this._host.removeAttribute('aria-owns');
+                // Apply tabindex to all items.
+                items.forEach((it, i) => {
+                    it.element.setAttribute('tabindex', i === active ? '0' : '-1');
+                });
+                // Move focus when the active item changes — but NOT on the first pass
+                // (where _prevActiveId is null) to avoid stealing focus on mount.
+                const activeEl = items[active]?.element;
+                const activeId = activeEl?.id ?? null;
+                if (activeEl &&
+                    this._prevActiveId !== null &&
+                    this._prevActiveId !== activeId &&
+                    !this._suppressFocus) {
+                    activeEl.focus();
+                }
+                this._prevActiveId = activeId;
+                this._suppressFocus = false;
+            }
+            else {
+                // activedescendant mode: remove tabindex from all items.
+                items.forEach(it => it.element.removeAttribute('tabindex'));
+                // Guard the empty-items window (items register during effects, so the
+                // first effect pass may see an empty list).
+                if (!items.length) {
+                    this._host.removeAttribute('aria-activedescendant');
+                    this._host.removeAttribute('aria-owns');
+                    return;
+                }
+                this._host.setAttribute('aria-owns', items.map(i => i.id).join(' '));
+                const activeId = items[active]?.id;
+                if (activeId) {
+                    this._host.setAttribute('aria-activedescendant', activeId);
+                }
+                // Reset the focus guard when in activedescendant mode so that switching
+                // back to tabindex mode doesn't immediately call focus.
+                this._prevActiveId = null;
+            }
+        });
+    }
+    register(item) {
+        this._items.update(list => (list.includes(item) ? list : [...list, item]));
+    }
+    unregister(item) {
+        this._items.update(list => list.filter(i => i !== item));
+        // Normalize the stored active index so it never dangles past the end —
+        // otherwise NgnRovingItem.isActive() would be false for every item.
+        const n = this.items().length;
+        if (this.activeIndex() >= n) {
+            this.activeIndex.set(Math.max(0, n - 1));
+        }
+    }
+    activate(target) {
+        if (target.disabled?.())
+            return;
+        const idx = this.items().indexOf(target);
+        if (idx >= 0)
+            this._setActive(idx);
+    }
+    next() {
+        this._move(1);
+    }
+    prev() {
+        this._move(-1);
+    }
+    first() {
+        const items = this.items();
+        const idx = items.findIndex(it => !it.disabled?.());
+        if (idx >= 0)
+            this._setActive(idx);
+    }
+    last() {
+        const items = this.items();
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (!items[i]?.disabled?.()) {
+                this._setActive(i);
+                return;
+            }
+        }
+    }
+    /** Set the active item by index (clamped to range); emits activeItemChange. */
+    setActive(index) {
+        if (index >= 0 && index < this.items().length)
+            this._setActive(index);
+    }
+    /**
+     * Move the tab stop to `index` WITHOUT moving DOM focus or emitting
+     * `activeItemChange`. For syncing the roving state to a programmatic
+     * selection (e.g. a radio group's `value` changing from code) where stealing
+     * focus into the group would be wrong.
+     */
+    syncActiveIndex(index) {
+        if (index < 0 || index >= this.items().length)
+            return;
+        if (index === this.activeIndex())
+            return;
+        this._suppressFocus = true;
+        this.activeIndex.set(index);
+    }
+    _onKeydown(e) {
+        if (e.ctrlKey || e.metaKey || e.altKey)
+            return;
+        const horizontal = this.orientation() === 'horizontal';
+        let consumed = true;
+        switch (e.key) {
+            case 'ArrowRight':
+                if (horizontal)
+                    this.next();
+                else
+                    consumed = false;
+                break;
+            case 'ArrowLeft':
+                if (horizontal)
+                    this.prev();
+                else
+                    consumed = false;
+                break;
+            case 'ArrowDown':
+                if (!horizontal)
+                    this.next();
+                else
+                    consumed = false;
+                break;
+            case 'ArrowUp':
+                if (!horizontal)
+                    this.prev();
+                else
+                    consumed = false;
+                break;
+            case 'Home':
+                this.first();
+                break;
+            case 'End':
+                this.last();
+                break;
+            default:
+                consumed = false;
+        }
+        if (consumed)
+            e.preventDefault();
+    }
+    _move(delta) {
+        const items = this.items();
+        const n = items.length;
+        if (!n)
+            return;
+        const start = this.activeIndex();
+        let i = start;
+        // Step in `delta` direction until we land on an enabled item, skipping
+        // disabled ones. When no enabled target exists in that direction we clamp
+        // to the current index and still emit — preserving the pre-existing
+        // clamp-and-emit contract. Bounded by `n` iterations so it terminates.
+        for (let step = 0; step < n; step++) {
+            i += delta;
+            if (this.rovingWrap()) {
+                i = ((i % n) + n) % n;
+                if (i === start)
+                    break; // looped back — no other enabled item
+            }
+            else if (i < 0 || i >= n) {
+                break; // reached an edge without finding an enabled item
+            }
+            if (!items[i]?.disabled?.()) {
+                this._setActive(i);
+                return;
+            }
+        }
+        this._setActive(start);
+    }
+    _setActive(i) {
+        this.activeIndex.set(i);
+        this.activeItemChange.emit(i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRovingGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnRovingGroup, isStandalone: true, selector: "[ngnRovingGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, rovingMode: { classPropertyName: "rovingMode", publicName: "rovingMode", isSignal: true, isRequired: false, transformFunction: null }, rovingWrap: { classPropertyName: "rovingWrap", publicName: "rovingWrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemChange: "activeItemChange" }, providers: [{ provide: ROVING_GROUP, useExisting: NgnRovingGroup }], exportAs: ["ngnRovingGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRovingGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnRovingGroup]',
+                    providers: [{ provide: ROVING_GROUP, useExisting: NgnRovingGroup }],
+                    exportAs: 'ngnRovingGroup',
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], rovingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rovingMode", required: false }] }], rovingWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "rovingWrap", required: false }] }], activeItemChange: [{ type: i0.Output, args: ["activeItemChange"] }] } });
+class NgnRovingItem {
+    _injectedGroup = inject(ROVING_GROUP, { optional: true });
+    /**
+     * The {@link NgnRovingGroup} this item belongs to. Pass a group reference when
+     * the item is not a DOM descendant of its group; leave empty/undefined to use
+     * the nearest ancestor group via dependency injection.
+     */
+    ngnRovingItem = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnRovingItem" }] : /* istanbul ignore next */ []));
+    element = inject(ElementRef).nativeElement;
+    id;
+    /**
+     * Reactive disabled flag for this item. Consumers (e.g. `ngn-radio`) set it
+     * so the group's keyboard navigation and pointer `activate()` skip the item.
+     */
+    disabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    _group = computed(() => {
+        const explicit = this.ngnRovingItem();
+        const group = explicit instanceof NgnRovingGroup ? explicit : this._injectedGroup;
+        if (!group) {
+            throw new Error('ngnRovingItem: no NgnRovingGroup found. Provide via [ngnRovingItem]="group" or nest inside one.');
+        }
+        return group;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_group" }] : /* istanbul ignore next */ []));
+    /** Whether this item is currently the active item in its group. */
+    isActive = computed(() => {
+        const g = this._group();
+        return g.items()[g.activeIndex()] === this;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // generateElementId() must be called in injection context (constructor is fine).
+        this.id = this.element.id || generateElementId();
+        if (!this.element.id)
+            this.element.id = this.id;
+        // Use effect() rather than afterNextRender() so that registration is
+        // guaranteed to run synchronously during detectChanges() in Vitest/TestBed.
+        // effect() reads this._group() reactively and (re)registers whenever the
+        // resolved group changes; the onCleanup callback unregisters from the
+        // previous group before re-running, and on destroy. Equivalent to
+        // afterNextRender() in a browser environment.
+        effect(onCleanup => {
+            const group = this._group();
+            group.register(this);
+            onCleanup(() => group.unregister(this));
+        });
+        // Activate self in the group on pointerdown.
+        domEventHandler(this.element, 'pointerdown', () => this._group().activate(this));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRovingItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnRovingItem, isStandalone: true, selector: "[ngnRovingItem]", inputs: { ngnRovingItem: { classPropertyName: "ngnRovingItem", publicName: "ngnRovingItem", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ngnRovingItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRovingItem, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngnRovingItem]', exportAs: 'ngnRovingItem' }]
+        }], ctorParameters: () => [], propDecorators: { ngnRovingItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnRovingItem", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnRovingGroup, NgnRovingItem, ROVING_GROUP };
+//# sourceMappingURL=ngneers-controls-roving-focus.mjs.map

package/fesm2022/ngneers-controls-roving-focus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-roving-focus.mjs","sources":["../../src/roving-focus/roving-focus.ts","../../src/roving-focus/ngneers-controls-roving-focus.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  computed,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  InjectionToken,\n  input,\n  output,\n  signal,\n  type Signal,\n} from '@angular/core';\nimport { domEventHandler } from '@ngneers/controls/api/ng';\nimport { generateElementId } from '@ngneers/controls/utils-ng';\n\nexport type RovingOrientation = 'horizontal' | 'vertical';\nexport type RovingMode = 'tabindex' | 'activedescendant';\n\nexport interface RovingItemRef {\n  readonly id: string;\n  readonly element: HTMLElement;\n  /**\n   * Optional reactive disabled flag. When it reads `true`, the item is skipped\n   * by keyboard navigation (`next`/`prev`/`first`/`last`) and pointer\n   * `activate()`. Absent (undefined) is treated as enabled.\n   */\n  readonly disabled?: Signal<boolean>;\n}\n\nexport const ROVING_GROUP = new InjectionToken<NgnRovingGroup>('ROVING_GROUP');\n\n@Directive({\n  selector: '[ngnRovingGroup]',\n  providers: [{ provide: ROVING_GROUP, useExisting: NgnRovingGroup }],\n  exportAs: 'ngnRovingGroup',\n})\nexport class NgnRovingGroup {\n  /**\n   * Which arrow keys move the active item: `'horizontal'` uses Left/Right,\n   * `'vertical'` uses Up/Down. Home/End always jump to first/last.\n   * @default 'horizontal'\n   */\n  public readonly orientation = input<RovingOrientation>('horizontal');\n  /**\n   * How the active item is exposed. `'tabindex'` moves the tab stop (and DOM\n   * focus) between items; `'activedescendant'` keeps focus on the group and\n   * points `aria-activedescendant` at the active item.\n   * @default 'tabindex'\n   */\n  public readonly rovingMode = input<RovingMode>('tabindex');\n  /**\n   * Whether keyboard navigation wraps around the ends of the list instead of\n   * stopping at the first/last item.\n   * @default false\n   */\n  public readonly rovingWrap = input(false, { transform: booleanAttribute });\n\n  /**\n   * Emits the index of the newly active item whenever it changes via keyboard,\n   * pointer, or {@link setActive}. Not emitted by {@link syncActiveIndex}.\n   */\n  public readonly activeItemChange = output<number>();\n\n  private readonly _host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly _items = signal<RovingItemRef[]>([]);\n  /** Items in DOM order. */\n  public readonly items = computed(() =>\n    [...this._items()].sort((a, b) => {\n      if (a.element === b.element) return 0;\n      return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING\n        ? -1\n        : 1;\n    })\n  );\n\n  public readonly activeIndex = signal(0);\n\n  /**\n   * Tracks the previously active item's id so we can decide whether to call\n   * `.focus()`. Initialized to `null` — the first effect pass sets it without\n   * focusing; subsequent passes focus when the id actually changes.\n   */\n  private _prevActiveId: string | null = null;\n\n  /**\n   * When set, the next focus-mode effect pass updates the tab stop / attributes\n   * but does NOT move DOM focus. Consumed (reset) by that pass. Lets consumers\n   * sync the active item to a programmatic selection (e.g. a radio group's\n   * `value` change) without stealing focus into the group.\n   */\n  private _suppressFocus = false;\n\n  constructor() {\n    domEventHandler(this._host, 'keydown', e => this._onKeydown(e));\n\n    // Apply focus-mode side effects reactively.\n    effect(() => {\n      const items = this.items();\n      const mode = this.rovingMode();\n\n      // Clamp the active index LOCALLY (do not mutate the activeIndex signal)\n      // so that attributes/focus always reference a valid item even if\n      // activeIndex is stale after the items list shrinks.\n      const active = items.length\n        ? Math.max(0, Math.min(this.activeIndex(), items.length - 1))\n        : this.activeIndex();\n\n      if (mode === 'tabindex') {\n        // Clean up activedescendant mode attributes.\n        this._host.removeAttribute('aria-activedescendant');\n        this._host.removeAttribute('aria-owns');\n\n        // Apply tabindex to all items.\n        items.forEach((it, i) => {\n          it.element.setAttribute('tabindex', i === active ? '0' : '-1');\n        });\n\n        // Move focus when the active item changes — but NOT on the first pass\n        // (where _prevActiveId is null) to avoid stealing focus on mount.\n        const activeEl = items[active]?.element;\n        const activeId = activeEl?.id ?? null;\n        if (\n          activeEl &&\n          this._prevActiveId !== null &&\n          this._prevActiveId !== activeId &&\n          !this._suppressFocus\n        ) {\n          activeEl.focus();\n        }\n        this._prevActiveId = activeId;\n        this._suppressFocus = false;\n      } else {\n        // activedescendant mode: remove tabindex from all items.\n        items.forEach(it => it.element.removeAttribute('tabindex'));\n\n        // Guard the empty-items window (items register during effects, so the\n        // first effect pass may see an empty list).\n        if (!items.length) {\n          this._host.removeAttribute('aria-activedescendant');\n          this._host.removeAttribute('aria-owns');\n          return;\n        }\n\n        this._host.setAttribute('aria-owns', items.map(i => i.id).join(' '));\n        const activeId = items[active]?.id;\n        if (activeId) {\n          this._host.setAttribute('aria-activedescendant', activeId);\n        }\n\n        // Reset the focus guard when in activedescendant mode so that switching\n        // back to tabindex mode doesn't immediately call focus.\n        this._prevActiveId = null;\n      }\n    });\n  }\n\n  public register(item: RovingItemRef): void {\n    this._items.update(list => (list.includes(item) ? list : [...list, item]));\n  }\n\n  public unregister(item: RovingItemRef): void {\n    this._items.update(list => list.filter(i => i !== item));\n    // Normalize the stored active index so it never dangles past the end —\n    // otherwise NgnRovingItem.isActive() would be false for every item.\n    const n = this.items().length;\n    if (this.activeIndex() >= n) {\n      this.activeIndex.set(Math.max(0, n - 1));\n    }\n  }\n\n  public activate(target: RovingItemRef): void {\n    if (target.disabled?.()) return;\n    const idx = this.items().indexOf(target);\n    if (idx >= 0) this._setActive(idx);\n  }\n\n  public next(): void {\n    this._move(1);\n  }\n\n  public prev(): void {\n    this._move(-1);\n  }\n\n  public first(): void {\n    const items = this.items();\n    const idx = items.findIndex(it => !it.disabled?.());\n    if (idx >= 0) this._setActive(idx);\n  }\n\n  public last(): void {\n    const items = this.items();\n    for (let i = items.length - 1; i >= 0; i--) {\n      if (!items[i]?.disabled?.()) {\n        this._setActive(i);\n        return;\n      }\n    }\n  }\n\n  /** Set the active item by index (clamped to range); emits activeItemChange. */\n  public setActive(index: number): void {\n    if (index >= 0 && index < this.items().length) this._setActive(index);\n  }\n\n  /**\n   * Move the tab stop to `index` WITHOUT moving DOM focus or emitting\n   * `activeItemChange`. For syncing the roving state to a programmatic\n   * selection (e.g. a radio group's `value` changing from code) where stealing\n   * focus into the group would be wrong.\n   */\n  public syncActiveIndex(index: number): void {\n    if (index < 0 || index >= this.items().length) return;\n    if (index === this.activeIndex()) return;\n    this._suppressFocus = true;\n    this.activeIndex.set(index);\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    if (e.ctrlKey || e.metaKey || e.altKey) return;\n    const horizontal = this.orientation() === 'horizontal';\n    let consumed = true;\n    switch (e.key) {\n      case 'ArrowRight':\n        if (horizontal) this.next();\n        else consumed = false;\n        break;\n      case 'ArrowLeft':\n        if (horizontal) this.prev();\n        else consumed = false;\n        break;\n      case 'ArrowDown':\n        if (!horizontal) this.next();\n        else consumed = false;\n        break;\n      case 'ArrowUp':\n        if (!horizontal) this.prev();\n        else consumed = false;\n        break;\n      case 'Home':\n        this.first();\n        break;\n      case 'End':\n        this.last();\n        break;\n      default:\n        consumed = false;\n    }\n    if (consumed) e.preventDefault();\n  }\n\n  private _move(delta: number): void {\n    const items = this.items();\n    const n = items.length;\n    if (!n) return;\n    const start = this.activeIndex();\n    let i = start;\n    // Step in `delta` direction until we land on an enabled item, skipping\n    // disabled ones. When no enabled target exists in that direction we clamp\n    // to the current index and still emit — preserving the pre-existing\n    // clamp-and-emit contract. Bounded by `n` iterations so it terminates.\n    for (let step = 0; step < n; step++) {\n      i += delta;\n      if (this.rovingWrap()) {\n        i = ((i % n) + n) % n;\n        if (i === start) break; // looped back — no other enabled item\n      } else if (i < 0 || i >= n) {\n        break; // reached an edge without finding an enabled item\n      }\n      if (!items[i]?.disabled?.()) {\n        this._setActive(i);\n        return;\n      }\n    }\n    this._setActive(start);\n  }\n\n  private _setActive(i: number): void {\n    this.activeIndex.set(i);\n    this.activeItemChange.emit(i);\n  }\n}\n\n@Directive({ selector: '[ngnRovingItem]', exportAs: 'ngnRovingItem' })\nexport class NgnRovingItem implements RovingItemRef {\n  private readonly _injectedGroup = inject(ROVING_GROUP, { optional: true });\n  /**\n   * The {@link NgnRovingGroup} this item belongs to. Pass a group reference when\n   * the item is not a DOM descendant of its group; leave empty/undefined to use\n   * the nearest ancestor group via dependency injection.\n   */\n  public readonly ngnRovingItem = input<NgnRovingGroup | '' | undefined>(undefined);\n\n  public readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  public readonly id: string;\n\n  /**\n   * Reactive disabled flag for this item. Consumers (e.g. `ngn-radio`) set it\n   * so the group's keyboard navigation and pointer `activate()` skip the item.\n   */\n  public readonly disabled = signal(false);\n\n  private readonly _group = computed<NgnRovingGroup>(() => {\n    const explicit = this.ngnRovingItem();\n    const group = explicit instanceof NgnRovingGroup ? explicit : this._injectedGroup;\n    if (!group) {\n      throw new Error(\n        'ngnRovingItem: no NgnRovingGroup found. Provide via [ngnRovingItem]=\"group\" or nest inside one.'\n      );\n    }\n    return group;\n  });\n\n  /** Whether this item is currently the active item in its group. */\n  public readonly isActive = computed(() => {\n    const g = this._group();\n    return g.items()[g.activeIndex()] === this;\n  });\n\n  constructor() {\n    // generateElementId() must be called in injection context (constructor is fine).\n    this.id = this.element.id || generateElementId();\n    if (!this.element.id) this.element.id = this.id;\n\n    // Use effect() rather than afterNextRender() so that registration is\n    // guaranteed to run synchronously during detectChanges() in Vitest/TestBed.\n    // effect() reads this._group() reactively and (re)registers whenever the\n    // resolved group changes; the onCleanup callback unregisters from the\n    // previous group before re-running, and on destroy. Equivalent to\n    // afterNextRender() in a browser environment.\n    effect(onCleanup => {\n      const group = this._group();\n      group.register(this);\n      onCleanup(() => group.unregister(this));\n    });\n\n    // Activate self in the group on pointerdown.\n    domEventHandler(this.element, 'pointerdown', () => this._group().activate(this));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MA8Ba,YAAY,GAAG,IAAI,cAAc,CAAiB,cAAc;MAOhE,cAAc,CAAA;AACzB;;;;AAIG;IACa,WAAW,GAAG,KAAK,CAAoB,YAAY;oFAAC;AACpE;;;;;AAKG;IACa,UAAU,GAAG,KAAK,CAAa,UAAU;mFAAC;AAC1D;;;;AAIG;IACa,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE1E;;;AAGG;IACa,gBAAgB,GAAG,MAAM,EAAU;AAElC,IAAA,KAAK,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC,aAAa;IACjE,MAAM,GAAG,MAAM,CAAkB,EAAE;+EAAC;;IAErC,KAAK,GAAG,QAAQ,CAAC,MAC/B,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC/B,QAAA,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO;AAAE,YAAA,OAAO,CAAC;AACrC,QAAA,OAAO,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;cACvD,CAAC;cACD,CAAC;AACP,IAAA,CAAC,CAAC;8EACH;IAEe,WAAW,GAAG,MAAM,CAAC,CAAC;oFAAC;AAEvC;;;;AAIG;IACK,aAAa,GAAkB,IAAI;AAE3C;;;;;AAKG;IACK,cAAc,GAAG,KAAK;AAE9B,IAAA,WAAA,GAAA;AACE,QAAA,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;;QAG/D,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE;;;;AAK9B,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC;kBACjB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAC5D,kBAAE,IAAI,CAAC,WAAW,EAAE;AAEtB,YAAA,IAAI,IAAI,KAAK,UAAU,EAAE;;AAEvB,gBAAA,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,uBAAuB,CAAC;AACnD,gBAAA,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC;;gBAGvC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACtB,oBAAA,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,KAAK,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC;AAChE,gBAAA,CAAC,CAAC;;;gBAIF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO;AACvC,gBAAA,MAAM,QAAQ,GAAG,QAAQ,EAAE,EAAE,IAAI,IAAI;AACrC,gBAAA,IACE,QAAQ;oBACR,IAAI,CAAC,aAAa,KAAK,IAAI;oBAC3B,IAAI,CAAC,aAAa,KAAK,QAAQ;AAC/B,oBAAA,CAAC,IAAI,CAAC,cAAc,EACpB;oBACA,QAAQ,CAAC,KAAK,EAAE;gBAClB;AACA,gBAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;AAC7B,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;YAC7B;iBAAO;;AAEL,gBAAA,KAAK,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;;;AAI3D,gBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACjB,oBAAA,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,uBAAuB,CAAC;AACnD,oBAAA,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC;oBACvC;gBACF;gBAEA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACpE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;gBAClC,IAAI,QAAQ,EAAE;oBACZ,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,uBAAuB,EAAE,QAAQ,CAAC;gBAC5D;;;AAIA,gBAAA,IAAI,CAAC,aAAa,GAAG,IAAI;YAC3B;AACF,QAAA,CAAC,CAAC;IACJ;AAEO,IAAA,QAAQ,CAAC,IAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAC5E;AAEO,IAAA,UAAU,CAAC,IAAmB,EAAA;QACnC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;;;QAGxD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;AAC7B,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE;AAC3B,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAC1C;IACF;AAEO,IAAA,QAAQ,CAAC,MAAqB,EAAA;AACnC,QAAA,IAAI,MAAM,CAAC,QAAQ,IAAI;YAAE;QACzB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;QACxC,IAAI,GAAG,IAAI,CAAC;AAAE,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;IACpC;IAEO,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACf;IAEO,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB;IAEO,KAAK,GAAA;AACV,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,IAAI,CAAC;QACnD,IAAI,GAAG,IAAI,CAAC;AAAE,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;IACpC;IAEO,IAAI,GAAA;AACT,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,EAAE;AAC3B,gBAAA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBAClB;YACF;QACF;IACF;;AAGO,IAAA,SAAS,CAAC,KAAa,EAAA;QAC5B,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;AAAE,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACvE;AAEA;;;;;AAKG;AACI,IAAA,eAAe,CAAC,KAAa,EAAA;QAClC,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;YAAE;AAC/C,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAAE;AAClC,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;IAC7B;AAEQ,IAAA,UAAU,CAAC,CAAgB,EAAA;QACjC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM;YAAE;QACxC,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY;QACtD,IAAI,QAAQ,GAAG,IAAI;AACnB,QAAA,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,YAAY;AACf,gBAAA,IAAI,UAAU;oBAAE,IAAI,CAAC,IAAI,EAAE;;oBACtB,QAAQ,GAAG,KAAK;gBACrB;AACF,YAAA,KAAK,WAAW;AACd,gBAAA,IAAI,UAAU;oBAAE,IAAI,CAAC,IAAI,EAAE;;oBACtB,QAAQ,GAAG,KAAK;gBACrB;AACF,YAAA,KAAK,WAAW;AACd,gBAAA,IAAI,CAAC,UAAU;oBAAE,IAAI,CAAC,IAAI,EAAE;;oBACvB,QAAQ,GAAG,KAAK;gBACrB;AACF,YAAA,KAAK,SAAS;AACZ,gBAAA,IAAI,CAAC,UAAU;oBAAE,IAAI,CAAC,IAAI,EAAE;;oBACvB,QAAQ,GAAG,KAAK;gBACrB;AACF,YAAA,KAAK,MAAM;gBACT,IAAI,CAAC,KAAK,EAAE;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,IAAI,CAAC,IAAI,EAAE;gBACX;AACF,YAAA;gBACE,QAAQ,GAAG,KAAK;;AAEpB,QAAA,IAAI,QAAQ;YAAE,CAAC,CAAC,cAAc,EAAE;IAClC;AAEQ,IAAA,KAAK,CAAC,KAAa,EAAA;AACzB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM;AACtB,QAAA,IAAI,CAAC,CAAC;YAAE;AACR,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;QAChC,IAAI,CAAC,GAAG,KAAK;;;;;AAKb,QAAA,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE;YACnC,CAAC,IAAI,KAAK;AACV,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,gBAAA,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;gBACrB,IAAI,CAAC,KAAK,KAAK;AAAE,oBAAA,MAAM;YACzB;iBAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AAC1B,gBAAA,MAAM;YACR;YACA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,EAAE;AAC3B,gBAAA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBAClB;YACF;QACF;AACA,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACxB;AAEQ,IAAA,UAAU,CAAC,CAAS,EAAA;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;AACvB,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/B;uGApPW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,SAAA,EAHd,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAGxD,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;oBAC5B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAA,cAAgB,EAAE,CAAC;AACnE,oBAAA,QAAQ,EAAE,gBAAgB;AAC3B,iBAAA;;MAyPY,aAAa,CAAA;IACP,cAAc,GAAG,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC1E;;;;AAIG;IACa,aAAa,GAAG,KAAK,CAAkC,SAAS;sFAAC;AAEjE,IAAA,OAAO,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC,aAAa;AACnE,IAAA,EAAE;AAElB;;;AAGG;IACa,QAAQ,GAAG,MAAM,CAAC,KAAK;iFAAC;AAEvB,IAAA,MAAM,GAAG,QAAQ,CAAiB,MAAK;AACtD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE;AACrC,QAAA,MAAM,KAAK,GAAG,QAAQ,YAAY,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC,cAAc;QACjF,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,MAAM,IAAI,KAAK,CACb,iGAAiG,CAClG;QACH;AACA,QAAA,OAAO,KAAK;IACd,CAAC;+EAAC;;AAGc,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACvC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,QAAA,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,IAAI;IAC5C,CAAC;iFAAC;AAEF,IAAA,WAAA,GAAA;;QAEE,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,iBAAiB,EAAE;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YAAE,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE;;;;;;;QAQ/C,MAAM,CAAC,SAAS,IAAG;AACjB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AAC3B,YAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;YACpB,SAAS,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACzC,QAAA,CAAC,CAAC;;QAGF,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAClF;uGAtDW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAE,eAAe,EAAE;;;AC5RrE;;AAEG;;;;"}

package/fesm2022/ngneers-controls-scroll-shadow.mjs

@@ -0,0 +1,65 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, input, afterNextRender, Directive } from '@angular/core';
+import { scrollShadowDirectiveTemplate } from '@ngneers/controls-themes/templates/api';
+import { injectThemeTemplate, abortSignalOnDestroy } from '@ngneers/controls/api/ng';
+import { toggleClass } from '@ngneers/controls/utils';
+
+class NgnScrollShadow {
+    theme = injectThemeTemplate(scrollShadowDirectiveTemplate);
+    _el = inject(ElementRef);
+    _injector = inject(Injector);
+    /**
+     * Which scroll axis to track and add shadow classes for.
+     * @default 'horizontal'
+     */
+    ngnScrollShadow = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnScrollShadow" }] : /* istanbul ignore next */ []));
+    /**
+     * Element that receives the shadow classes. Defaults to the host element (which
+     * is also the scroll container being observed).
+     * @default undefined
+     */
+    scrollShadowTarget = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollShadowTarget" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            const scrollEl = this._el.nativeElement;
+            const abort = abortSignalOnDestroy({ injector: this._injector });
+            const update = () => {
+                const target = this.scrollShadowTarget() ?? scrollEl;
+                const dir = this.ngnScrollShadow();
+                if (dir === 'horizontal' || dir === 'both') {
+                    const sl = scrollEl.scrollLeft;
+                    const maxH = scrollEl.scrollWidth - scrollEl.clientWidth;
+                    toggleClass(target, this.theme.class('scrolled-start'), sl > 0);
+                    toggleClass(target, this.theme.class('scrolled-end'), maxH > 0 && sl < maxH - 1);
+                }
+                if (dir === 'vertical' || dir === 'both') {
+                    const st = scrollEl.scrollTop;
+                    const maxV = scrollEl.scrollHeight - scrollEl.clientHeight;
+                    toggleClass(target, this.theme.class('scrolled-top'), st > 0);
+                    toggleClass(target, this.theme.class('scrolled-bottom'), maxV > 0 && st < maxV - 1);
+                }
+            };
+            const ro = new ResizeObserver(update);
+            ro.observe(scrollEl);
+            abort.addEventListener('abort', () => ro.disconnect());
+            scrollEl.addEventListener('scroll', update, { passive: true, signal: abort });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnScrollShadow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnScrollShadow, isStandalone: true, selector: "[ngnScrollShadow]", inputs: { ngnScrollShadow: { classPropertyName: "ngnScrollShadow", publicName: "ngnScrollShadow", isSignal: true, isRequired: false, transformFunction: null }, scrollShadowTarget: { classPropertyName: "scrollShadowTarget", publicName: "scrollShadowTarget", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnScrollShadow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnScrollShadow]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnScrollShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnScrollShadow", required: false }] }], scrollShadowTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollShadowTarget", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnScrollShadow };
+//# sourceMappingURL=ngneers-controls-scroll-shadow.mjs.map

package/fesm2022/ngneers-controls-scroll-shadow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-scroll-shadow.mjs","sources":["../../src/scroll-shadow/scroll-shadow.ts","../../src/scroll-shadow/ngneers-controls-scroll-shadow.ts"],"sourcesContent":["import { afterNextRender, Directive, ElementRef, inject, Injector, input } from '@angular/core';\nimport { scrollShadowDirectiveTemplate } from '@ngneers/controls-themes/templates/api';\n\nimport { abortSignalOnDestroy, injectThemeTemplate } from '@ngneers/controls/api/ng';\nimport { toggleClass } from '@ngneers/controls/utils';\n\n@Directive({\n  selector: '[ngnScrollShadow]',\n})\nexport class NgnScrollShadow {\n  protected readonly theme = injectThemeTemplate(scrollShadowDirectiveTemplate);\n  private readonly _el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly _injector = inject(Injector);\n\n  /**\n   * Which scroll axis to track and add shadow classes for.\n   * @default 'horizontal'\n   */\n  public readonly ngnScrollShadow = input<'horizontal' | 'vertical' | 'both'>('horizontal');\n\n  /**\n   * Element that receives the shadow classes. Defaults to the host element (which\n   * is also the scroll container being observed).\n   * @default undefined\n   */\n  public readonly scrollShadowTarget = input<HTMLElement | undefined>(undefined);\n\n  constructor() {\n    afterNextRender(() => {\n      const scrollEl = this._el.nativeElement;\n      const abort = abortSignalOnDestroy({ injector: this._injector });\n\n      const update = () => {\n        const target = this.scrollShadowTarget() ?? scrollEl;\n        const dir = this.ngnScrollShadow();\n\n        if (dir === 'horizontal' || dir === 'both') {\n          const sl = scrollEl.scrollLeft;\n          const maxH = scrollEl.scrollWidth - scrollEl.clientWidth;\n          toggleClass(target, this.theme.class('scrolled-start'), sl > 0);\n          toggleClass(target, this.theme.class('scrolled-end'), maxH > 0 && sl < maxH - 1);\n        }\n\n        if (dir === 'vertical' || dir === 'both') {\n          const st = scrollEl.scrollTop;\n          const maxV = scrollEl.scrollHeight - scrollEl.clientHeight;\n          toggleClass(target, this.theme.class('scrolled-top'), st > 0);\n          toggleClass(target, this.theme.class('scrolled-bottom'), maxV > 0 && st < maxV - 1);\n        }\n      };\n\n      const ro = new ResizeObserver(update);\n      ro.observe(scrollEl);\n      abort.addEventListener('abort', () => ro.disconnect());\n      scrollEl.addEventListener('scroll', update, { passive: true, signal: abort });\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}