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

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

@@ -0,0 +1,243 @@
+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;
+        };
+        state: {
+            loading: string;
+            success: string;
+            warning: string;
+            error: string;
+            cancelled: 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;
+    /** 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;
         };

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

@@ -225,6 +225,9 @@ declare class NgnSelect<V, Editable extends boolean = false, Multiple extends bo
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };

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

@@ -164,6 +164,9 @@ declare class NgnSnackbar extends SnackbarTemplates implements OnInit {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };

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

@@ -276,6 +276,9 @@ declare class NgnSplitter extends NgnBase<'splitter'> implements OnDestroy {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };
@@ -443,13 +446,20 @@ declare class NgnSplitter extends NgnBase<'splitter'> implements OnDestroy {
     private onStateLoad;
     private ensureValidState;
     private applyFromState;
+    /** Cached divider positions (percentage) measured post-layout; see the after-render effect in the constructor. */
+    private readonly _dividerValues;
     /**
      * The divider's current position as a percentage (0–100) of the total panel
      * content size, used for `aria-valuenow` on the `role="separator"` handle.
-     * Reads `gridTemplateSizes()` to stay reactive to resizes, then measures the
-     * rendered panel sizes on either side of the divider.
+     * Reads the cached value measured in the after-render phase.
      */
     protected dividerValueNow(index: number): number;
+    /**
+     * Measures each divider's position as a percentage (0–100) of the total panel
+     * content size. Reads `gridTemplateSizes()`, `elementSize()` and `dragContext()`
+     * as reactive triggers, then measures the rendered panel sizes.
+     */
+    private measureDividerValues;
     private getStepInPx;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnSplitter, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnSplitter, "ngn-splitter", never, { "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "panelOrder": { "alias": "panelOrder"; "required": false; "isSignal": true; }; "stateStorage": { "alias": "stateStorage"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "stateData": { "alias": "stateData"; "required": false; "isSignal": true; }; "calculatorType": { "alias": "calculatorType"; "required": false; "isSignal": true; }; "resizeMode": { "alias": "resizeMode"; "required": false; "isSignal": true; }; "lockSizes": { "alias": "lockSizes"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "panelOrder": "panelOrderChange"; "stateSaving": "stateSaving"; "stateLoading": "stateLoading"; }, ["panels"], ["*"], true, never>;

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

@@ -817,6 +817,9 @@ declare class NgnTable<T extends object, K extends keyof T, G extends Extract<Al
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };

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

@@ -159,6 +159,9 @@ declare class NgnToast extends ToastTemplates implements OnInit {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };

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

@@ -217,6 +217,9 @@ declare class NgnTree<Items extends readonly NgnTreeItem[], Multiple extends boo
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };

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

@@ -171,6 +171,9 @@ declare class NgnUpload extends NgnBase<'upload'> {
             segmentRange: string;
             optionSeparator: string;
         };
+        otp: {
+            cellLabel: string;
+        };
         drawer: {
             close: string;
         };