@ngneers/controls 0.0.1-next.0 → 0.0.1-next.2

package/types/ngneers-controls-input.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
 import * as _ngneers_controls_themes from '@ngneers/controls-themes';
-import { NgnBase } from '@ngneers/controls/base';
+import { NgnBase, NgnInvalidTrigger } from '@ngneers/controls/base';
 
 /**
  * @category control
@@ -10,21 +10,53 @@ import { NgnBase } from '@ngneers/controls/base';
 declare class NgnInput extends NgnBase<'input'> implements AfterViewInit {
     readonly isFieldControl = true;
     protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>>;
+    readonly empty: _angular_core.Signal<boolean>;
     /**
-     * Explicitly apply invalid state styling
+     * The raw invalid flag (bound from a signal-forms field's validity, or set
+     * explicitly). Whether it *shows* is gated by {@link invalidOn} — read
+     * {@link invalidState}.
      * @default false
      */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When the input surfaces its invalid styling.
+     * @default touched
+     */
+    readonly invalidOn: _angular_core.InputSignal<NgnInvalidTrigger>;
+    /**
+     * Touched state. A bound signal-forms field writes it in (`FormUiControl`
+     * `touched` input); the input also sets it on blur, and reports blur out
+     * through {@link touch}.
+     */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /**
+     * The invalid state the theme renders: {@link invalid} gated by
+     * {@link invalidOn}. (Dirty tracking isn't wired for the bare directive, so the
+     * `dirty` trigger behaves like `immediate` here.)
+     */
+    protected readonly invalidState: _angular_core.Signal<boolean>;
     /**
      * The current value of the input, kept in sync with the native element in both directions.
      * @default ''
      */
     readonly value: _angular_core.ModelSignal<string | null>;
+    /**
+     * Emits on blur so a bound signal-forms field is marked touched (the
+     * `FormUiControl` `touch` contract) — enables `ngnErrorsShowOn="touched"`.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     private readonly _input;
     ngAfterViewInit(): void;
     constructor();
+    /**
+     * Marks the input touched on blur: flips {@link touched} for local consumers
+     * (e.g. `ngnErrors`) and emits {@link touch} so a bound signal-forms field is
+     * marked too. Mirrors `ValueControlBase.markTouched`, which this directive
+     * can't inherit (it extends {@link NgnBase} as a native-element directive).
+     */
+    private markTouched;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnInput, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnInput, "input[ngnInput], textarea[ngnInput]", ["ngnInput"], { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnInput, "input[ngnInput], textarea[ngnInput]", ["ngnInput"], { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "invalidOn": { "alias": "invalidOn"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { NgnInput };

package/types/ngneers-controls-list-box.d.ts

@@ -177,6 +177,9 @@ declare class NgnListBox<Items extends readonly NgnItem[], Multiple extends bool
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -234,6 +237,8 @@ declare class NgnListBox<Items extends readonly NgnItem[], Multiple extends bool
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -242,6 +247,18 @@ declare class NgnListBox<Items extends readonly NgnItem[], Multiple extends bool
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
         readonly class: "checkbox";

package/types/ngneers-controls-mask-input.d.ts

@@ -161,6 +161,9 @@ declare class NgnMaskInput extends ValueControlBase<'maskInput', string | null>
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -218,6 +221,8 @@ declare class NgnMaskInput extends ValueControlBase<'maskInput', string | null>
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -226,6 +231,18 @@ declare class NgnMaskInput extends ValueControlBase<'maskInput', string | null>
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     /**
      * The mask to apply to the input. Can be a predefined mask key or a custom mask configuration.

package/types/ngneers-controls-otp.d.ts

@@ -0,0 +1,262 @@
+import * as _angular_core from '@angular/core';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { ValueControlBase } from '@ngneers/controls/base';
+
+/**
+ * A one-time-password / verification-code input that splits a short code across
+ * a row of single-character cells (like the PrimeNG `InputOtp`).
+ *
+ * - Typing a character fills the active cell and advances focus to the next.
+ * - **Backspace** clears the active cell, or steps back and clears the previous
+ *   one when the active cell is already empty.
+ * - **←/→** move between cells, **Home/End** jump to the first/last.
+ * - Pasting a code distributes its characters across the cells.
+ *
+ * It is a self-contained value control — bind `[value]`/`(valueChange)` (or
+ * `[(value)]`) directly on `<ngn-otp>`. The value is the composed string
+ * (`null` while every cell is empty); {@link completed} fires once the whole
+ * code is filled.
+ *
+ * @category control
+ */
+declare class NgnOtp extends ValueControlBase<'otp', string | null> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"otp", ["root", "box", "invalid"], readonly []>>;
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            input: string;
+            selectYear: string;
+            selectMonth: string;
+            previousMonth: string;
+            nextMonth: string;
+            weekdays: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            weekdaysShort: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            months: {
+                january: string;
+                february: string;
+                march: string;
+                april: string;
+                may: string;
+                june: string;
+                july: string;
+                august: string;
+                september: string;
+                october: string;
+                november: string;
+                december: string;
+            };
+        };
+        editInplace: {
+            placeholder: string;
+            confirm: string;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            operator: string;
+            value: string;
+            clear: string;
+            apply: string;
+            cancel: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: string;
+                and: string;
+                or: string;
+            };
+            selected: string;
+            conditions: string;
+            operators: {
+                isEqual: string;
+                isNotEqual: string;
+                contains: string;
+                startsWith: string;
+                endsWith: string;
+                in: string;
+                isEmpty: string;
+                isNotEmpty: string;
+                greaterThan: string;
+                greaterThanOrEqual: string;
+                lessThan: string;
+                lessThanOrEqual: string;
+                after: string;
+                onOrAfter: string;
+                before: string;
+                onOrBefore: string;
+                isTrue: string;
+                isFalse: string;
+                custom: string;
+            };
+        };
+        splitter: {
+            handleLabel: string;
+        };
+        inputField: {
+            clearInput: string;
+        };
+        maskInput: {
+            roleDescription: string;
+            segmentRange: string;
+            optionSeparator: string;
+        };
+        otp: {
+            cellLabel: string;
+        };
+        drawer: {
+            close: string;
+        };
+        dialog: {
+            close: string;
+        };
+        chip: {
+            close: string;
+        };
+        breadcrumb: {
+            overflow: string;
+        };
+        toast: {
+            close: string;
+            region: string;
+        };
+        snackbar: {
+            close: string;
+            region: string;
+            severity: {
+                error: string;
+                warning: string;
+                success: string;
+                info: string;
+            };
+        };
+        upload: {
+            upload: string;
+            uploadNamed: string;
+            retryNamed: string;
+            cancelNamed: string;
+            removeNamed: string;
+            progressNamed: string;
+        };
+        select: {
+            filterOptions: string;
+        };
+        paginator: {
+            previousPage: string;
+            nextPage: string;
+        };
+        listBox: {
+            noItemsFound: string;
+        };
+        tree: {
+            noItemsFound: string;
+        };
+        table: {
+            selectAllRows: string;
+            selectRow: string;
+            sortedBy: string;
+            sortAscending: string;
+            sortDescending: string;
+            sortCleared: string;
+            selectedCount: string;
+            page: string;
+            resultCount: string;
+            retry: string;
+            loadError: string;
+        };
+        state: {
+            loading: string;
+            success: string;
+            warning: string;
+            error: string;
+            cancelled: string;
+        };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
+    }, "_">;
+    /**
+     * The number of character cells the code is split across.
+     * @default 6
+     */
+    readonly length: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Render each entered character as a masked dot instead of the character
+     * itself (like a password field).
+     * @default false
+     */
+    readonly mask: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Restrict entry to digits (`0`–`9`) only. Also switches the on-screen
+     * keyboard to numeric on touch devices.
+     * @default false
+     */
+    readonly integerOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emits the fully composed code once every cell holds a character. */
+    readonly completed: _angular_core.OutputEmitterRef<string>;
+    /** Per-cell characters — the source of truth the composed value derives from. */
+    protected readonly cells: _angular_core.WritableSignal<string[]>;
+    /** Effective, sanitized cell count. */
+    protected readonly appliedLength: _angular_core.Signal<number>;
+    /** Cell indices for the template `@for` loop. */
+    protected readonly indices: _angular_core.Signal<number[]>;
+    protected readonly boxType: _angular_core.Signal<"text" | "password">;
+    protected readonly boxInputMode: _angular_core.Signal<"text" | "numeric">;
+    private readonly _boxes;
+    constructor();
+    /** Accessible name for a cell — its 1-based position within the code. */
+    protected cellLabel(index: number): string;
+    /**
+     * The control fully owns each cell's value: every text mutation is cancelled
+     * and the character is written to the {@link cells} signal instead, which the
+     * `[value]` binding reflects back. This makes overtype work from any caret
+     * position (no `maxlength`/selection tricks) and lets a single multi-character
+     * insert — e.g. SMS one-time-code autofill — spread across the cells.
+     */
+    protected onBeforeInput(index: number, event: InputEvent): void;
+    protected onKeyDown(index: number, event: KeyboardEvent): void;
+    protected onPaste(event: ClipboardEvent): void;
+    /**
+     * Mark touched once focus leaves the whole group — moving between cells keeps
+     * the host focused, so those intra-cell hops don't count as a blur.
+     */
+    protected onFocusOut(event: FocusEvent): void;
+    /** Clears every cell (also serves a surrounding field's clear button). */
+    clearValue(): boolean;
+    private _setCell;
+    /** Writes `text` into consecutive cells starting at `start`, then focuses the
+     * next empty cell (or the last one). Used by typing and autofill. */
+    private _fillFrom;
+    private _focusCell;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnOtp, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnOtp, "ngn-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "integerOnly": { "alias": "integerOnly"; "required": false; "isSignal": true; }; }, { "completed": "completed"; }, never, never, true, never>;
+}
+
+export { NgnOtp };

package/types/ngneers-controls-paginator.d.ts

@@ -142,6 +142,9 @@ declare class NgnPaginator extends NgnBase<'paginator'> {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -199,6 +202,8 @@ declare class NgnPaginator extends NgnBase<'paginator'> {
             selectedCount: string;
             page: string;
             resultCount: string;
+            retry: string;
+            loadError: string;
         };
         state: {
             loading: string;
@@ -207,15 +212,41 @@ declare class NgnPaginator extends NgnBase<'paginator'> {
             error: string;
             cancelled: string;
         };
+        errors: {
+            pending: string;
+            required: string;
+            email: string;
+            minlength: string;
+            maxlength: string;
+            minLength: string;
+            maxLength: string;
+            min: string;
+            max: string;
+            pattern: string;
+        };
     }, "_">;
     /**
-     * Total number of items to paginate.
+     * Total number of items to paginate. Required in `'pages'` mode (drives the
+     * page count); ignored in `'compact'` mode.
      */
-    readonly totalItems: _angular_core.InputSignal<number>;
+    readonly totalItems: _angular_core.InputSignal<number | undefined>;
     /**
      * Number of items per page. If not set, the first value from {@link possiblePageSizes} is used.
      */
     readonly pageSize: _angular_core.ModelSignal<number | undefined>;
+    /**
+     * Layout mode.
+     * - `'pages'`: full paginator with numbered page buttons (needs {@link totalItems}).
+     * - `'compact'`: prev/next buttons only, no page indicators, no total required.
+     * @default 'pages'
+     */
+    readonly mode: _angular_core.InputSignal<"pages" | "compact">;
+    /**
+     * `'compact'` mode only: whether a next page exists. Disables the "next" button
+     * when `false`. Bind to a lazy data source's `hasMore`.
+     * @default true
+     */
+    readonly hasNext: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Possible page sizes to choose from.
      * @default [5, 10, 25, 50]
@@ -248,7 +279,7 @@ declare class NgnPaginator extends NgnBase<'paginator'> {
         [klass: string]: string;
     };
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnPaginator, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnPaginator, "ngn-paginator", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "possiblePageSizes": { "alias": "possiblePageSizes"; "required": false; "isSignal": true; }; "fixedPageSize": { "alias": "fixedPageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "value": "value"; "page": "pageChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnPaginator, "ngn-paginator", never, { "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "hasNext": { "alias": "hasNext"; "required": false; "isSignal": true; }; "possiblePageSizes": { "alias": "possiblePageSizes"; "required": false; "isSignal": true; }; "fixedPageSize": { "alias": "fixedPageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "value": "value"; "page": "pageChange"; }, never, never, true, never>;
 }
 
 export { NgnPaginator };

package/types/ngneers-controls-rating.d.ts

@@ -0,0 +1,69 @@
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { ValueControlBase } from '@ngneers/controls/base';
+
+/** Context for a custom {@link NgnRating} symbol template. */
+interface RatingIndicatorContext {
+    /** Fill ratio for this symbol, 0..1. */
+    $implicit: number;
+    /** Zero-based symbol index. */
+    index: number;
+}
+declare abstract class RatingTemplates extends ValueControlBase<'rating', number | null> {
+    private readonly _userIndicatorTemplate;
+    /**
+     * Custom template for a single symbol. Receives the fill ratio (`$implicit`,
+     * 0..1) and `index`. Can also be set with an `<ng-template #indicator>`.
+     * When set, it replaces the default full/empty icon rendering per symbol.
+     */
+    readonly indicatorTemplate: _angular_core.InputSignal<TemplateRef<RatingIndicatorContext> | null>;
+    protected readonly resolvedIndicatorTemplate: _angular_core.Signal<TemplateRef<RatingIndicatorContext> | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RatingTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RatingTemplates, never, never, { "indicatorTemplate": { "alias": "indicatorTemplate"; "required": false; "isSignal": true; }; }, {}, ["_userIndicatorTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnRating extends RatingTemplates {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"rating", ["root", "symbol", "full", "empty", "invalid", "readonly", "disabled"], readonly []>>;
+    private readonly _hover;
+    /** Number of symbols. @default 5 */
+    readonly count: _angular_core.InputSignal<number>;
+    /** The value increment; supports fractions (e.g. 0.5). @default 1 */
+    readonly step: _angular_core.InputSignal<number>;
+    /** The filled symbol icon. Falls back to a filled star ({@link https://tabler.io/icons}). */
+    readonly iconFull: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /** The empty symbol icon. Falls back to an outline star. */
+    readonly iconEmpty: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /** Clicking the current value clears the rating back to `null`. @default true */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible value text; overrides the numeric readout. */
+    readonly valueText: _angular_core.InputSignal<string | undefined>;
+    /** Function producing accessible value text from the value. */
+    readonly valueTextFn: _angular_core.InputSignal<((value: number) => string) | undefined>;
+    /** The value the UI should paint: hover preview when hovering, else the model value. */
+    protected readonly displayValue: _angular_core.Signal<number>;
+    /** Zero-based indices for the symbols. */
+    protected readonly symbols: _angular_core.Signal<number[]>;
+    protected readonly valueTextValue: _angular_core.Signal<string | null>;
+    /** Fill ratio 0..1 for symbol `index` given the current display value (hover ?? value). */
+    protected fillRatio(index: number): number;
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** Pointer moved over symbol `index` at fractional `offset` (0..1 within the symbol). */
+    protected onPointerMove(event: PointerEvent, index: number): void;
+    protected clearHover(): void;
+    protected onClick(event: PointerEvent, index: number): void;
+    /** Resolve the stepped value for a pointer position within symbol `index`. */
+    private valueAt;
+    private clamp;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnRating, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnRating, "ngn-rating", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "iconFull": { "alias": "iconFull"; "required": false; "isSignal": true; }; "iconEmpty": { "alias": "iconEmpty"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "valueTextFn": { "alias": "valueTextFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnRating, RatingTemplates };
+export type { RatingIndicatorContext };

package/types/ngneers-controls-scroll-shadow.d.ts

@@ -3,9 +3,10 @@ import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
 import * as _ngneers_controls_themes from '@ngneers/controls-themes';
 
 declare class NgnScrollShadow {
-    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"scrollShadow", ["root", "scrolled-start", "scrolled-end", "scrolled-top", "scrolled-bottom"], readonly []>>;
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"scrollShadow", ["root", "scrolled-start", "scrolled-end", "scrolled-top", "scrolled-bottom", "overlay", "surface", "unstyled"], readonly []>>;
     private readonly _el;
     private readonly _injector;
+    private readonly _renderer;
     /**
      * Which scroll axis to track and add shadow classes for.
      * @default 'horizontal'
@@ -17,9 +18,17 @@ declare class NgnScrollShadow {
      * @default undefined
      */
     readonly scrollShadowTarget: _angular_core.InputSignal<HTMLElement | undefined>;
+    /**
+     * Suppress the built-in edge-shadow overlay's styling (the theme hides it). The overlay element
+     * is still injected but rendered inert, so it never disturbs the scroll container's layout.
+     * Set this when the consumer paints its own shadows off the `scrolled-*` classes — e.g. the
+     * table anchors them to its sticky-column edges, reusing the shared `--ngn-scroll-shadow-color`.
+     * @default false
+     */
+    readonly unstyled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnScrollShadow, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnScrollShadow, "[ngnScrollShadow]", never, { "ngnScrollShadow": { "alias": "ngnScrollShadow"; "required": false; "isSignal": true; }; "scrollShadowTarget": { "alias": "scrollShadowTarget"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnScrollShadow, "[ngnScrollShadow]", never, { "ngnScrollShadow": { "alias": "ngnScrollShadow"; "required": false; "isSignal": true; }; "scrollShadowTarget": { "alias": "scrollShadowTarget"; "required": false; "isSignal": true; }; "unstyled": { "alias": "ngnScrollShadowUnstyled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgnScrollShadow };

package/types/ngneers-controls-scroller.d.ts

@@ -48,6 +48,8 @@ declare class NgnScroller<T> extends ScrollerTemplates<T> {
     protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>>;
     private readonly _el;
     private readonly _scrollAmount;
+    /** Remaining vertical scroll distance to the bottom (px). Proxied from the host scroll directive. */
+    readonly distanceFromEnd: _angular_core.Signal<number>;
     /**
      * The items to be displayed in the scroller.
      * This is a required input and should be an array of items of type {@link T}.
@@ -131,7 +133,7 @@ declare class NgnScroller<T> extends ScrollerTemplates<T> {
         index: number;
     }): unknown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnScroller<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnScroller<any>, "ngn-scroller, [ngn-scroller]", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "virtualPadding": { "alias": "virtualPadding"; "required": false; "isSignal": true; }; "focusable": { "alias": "focusable"; "required": false; "isSignal": true; }; "fieldSticky": { "alias": "fieldSticky"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgnScrollAmount; inputs: { "ngnScrollAmountContainer": "scrollContainer"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnScroller<any>, "ngn-scroller, [ngn-scroller]", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "virtualPadding": { "alias": "virtualPadding"; "required": false; "isSignal": true; }; "focusable": { "alias": "focusable"; "required": false; "isSignal": true; }; "fieldSticky": { "alias": "fieldSticky"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.NgnScrollAmount; inputs: { "ngnScrollAmountContainer": "scrollContainer"; }; outputs: {}; }]>;
 }
 
 declare class NgnScrollerItem implements AfterViewInit {