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

package/fesm2022/ngneers-controls-otp.mjs

@@ -0,0 +1,251 @@
+import * as i0 from '@angular/core';
+import { inject, input, numberAttribute, booleanAttribute, output, signal, computed, viewChildren, effect, untracked, Component } from '@angular/core';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { I18n } from '@ngneers/controls/i18n';
+import { otpControlTemplate } from '@ngneers/controls-themes/templates/otp';
+
+/**
+ * Coerce a requested length to a sane cell count (at least one). Coerces
+ * strings too, so a value set without the `numberAttribute` transform (e.g. via
+ * a dynamic property write) still yields a number instead of collapsing to 1.
+ */
+function normalizeLength(value) {
+    const n = Number(value);
+    return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
+}
+/**
+ * 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
+ */
+class NgnOtp extends ValueControlBase {
+    theme = this.injectThemeTemplate(otpControlTemplate, {
+        root: true,
+        invalid: () => this.invalid(),
+    });
+    i18n = inject(I18n).translations;
+    /**
+     * The number of character cells the code is split across.
+     * @default 6
+     */
+    length = input(6, { ...(ngDevMode ? { debugName: "length" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Render each entered character as a masked dot instead of the character
+     * itself (like a password field).
+     * @default false
+     */
+    mask = input(false, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Restrict entry to digits (`0`–`9`) only. Also switches the on-screen
+     * keyboard to numeric on touch devices.
+     * @default false
+     */
+    integerOnly = input(false, { ...(ngDevMode ? { debugName: "integerOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emits the fully composed code once every cell holds a character. */
+    completed = output();
+    /** Per-cell characters — the source of truth the composed value derives from. */
+    cells = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    /** Effective, sanitized cell count. */
+    appliedLength = computed(() => normalizeLength(this.length()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedLength" }] : /* istanbul ignore next */ []));
+    /** Cell indices for the template `@for` loop. */
+    indices = computed(() => Array.from({ length: this.appliedLength() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indices" }] : /* istanbul ignore next */ []));
+    boxType = computed(() => (this.mask() ? 'password' : 'text'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxType" }] : /* istanbul ignore next */ []));
+    boxInputMode = computed(() => (this.integerOnly() ? 'numeric' : 'text'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxInputMode" }] : /* istanbul ignore next */ []));
+    _boxes = viewChildren('box', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_boxes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Keep the cell array sized to `length`, preserving already-typed chars so
+        // shrinking/growing the field does not wipe what the user entered.
+        effect(() => {
+            const len = this.appliedLength();
+            const cur = untracked(() => this.cells());
+            if (cur.length !== len) {
+                this.cells.set(Array.from({ length: len }, (_, i) => cur[i] ?? ''));
+            }
+        });
+        // External value → cells. Guard the write-loop by comparing to the current
+        // composed value so internal typing never re-triggers a reset.
+        effect(() => {
+            const len = this.appliedLength();
+            const ext = this.value() ?? '';
+            const current = untracked(() => this.cells().join(''));
+            if (ext !== current) {
+                const chars = ext.split('').slice(0, len);
+                this.cells.set(Array.from({ length: len }, (_, i) => chars[i] ?? ''));
+            }
+        });
+        // Cells → external value + completion. `null` while the field is empty.
+        effect(() => {
+            const cells = this.cells();
+            const composed = cells.join('');
+            this.value.set(composed === '' ? null : composed);
+            if (cells.length > 0 && cells.every(c => c !== '')) {
+                this.completed.emit(composed);
+            }
+        });
+    }
+    /** Accessible name for a cell — its 1-based position within the code. */
+    cellLabel(index) {
+        return this.i18n['otp_cellLabel']({ index: index + 1, total: this.appliedLength() });
+    }
+    /**
+     * 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.
+     */
+    onBeforeInput(index, event) {
+        if (this.disabled() || this.readonly())
+            return;
+        const type = event.inputType;
+        // Deletions: desktop goes through keydown, but mobile soft keyboards emit
+        // these directly, so handle them here too.
+        if (type.startsWith('delete')) {
+            event.preventDefault();
+            if (this.cells()[index]) {
+                this._setCell(index, '');
+            }
+            else if (index > 0) {
+                this._setCell(index - 1, '');
+                this._focusCell(index - 1);
+            }
+            return;
+        }
+        // Paste/drop are handled by the dedicated (paste) handler.
+        if (type === 'insertFromPaste' || type === 'insertFromDrop')
+            return;
+        if (!type.startsWith('insert'))
+            return;
+        event.preventDefault();
+        let data = event.data ?? '';
+        if (this.integerOnly())
+            data = data.replace(/\D/g, '');
+        if (!data)
+            return;
+        this._fillFrom(index, data);
+    }
+    onKeyDown(index, event) {
+        if (this.disabled() || this.readonly())
+            return;
+        if (event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        switch (event.key) {
+            case 'Backspace': {
+                event.preventDefault();
+                const cells = this.cells();
+                if (cells[index]) {
+                    this._setCell(index, '');
+                }
+                else if (index > 0) {
+                    this._setCell(index - 1, '');
+                    this._focusCell(index - 1);
+                }
+                break;
+            }
+            case 'Delete':
+                event.preventDefault();
+                this._setCell(index, '');
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0)
+                    this._focusCell(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < this.appliedLength() - 1)
+                    this._focusCell(index + 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusCell(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusCell(this.appliedLength() - 1);
+                break;
+        }
+    }
+    onPaste(event) {
+        if (this.disabled() || this.readonly())
+            return;
+        event.preventDefault();
+        let text = event.clipboardData?.getData('text') ?? '';
+        text = this.integerOnly() ? text.replace(/\D/g, '') : text.replace(/\s/g, '');
+        if (!text)
+            return;
+        // A paste replaces the whole code from the first cell, clearing the rest.
+        const len = this.appliedLength();
+        const chars = text.split('').slice(0, len);
+        this.cells.set(Array.from({ length: len }, (_, i) => chars[i] ?? ''));
+        this._focusCell(chars.length >= len ? len - 1 : chars.length);
+    }
+    /** Clears every cell (also serves a surrounding field's clear button). */
+    clearValue() {
+        if (this.disabled() || this.readonly())
+            return false;
+        this.cells.set(Array.from({ length: this.appliedLength() }, () => ''));
+        this._focusCell(0);
+        return true;
+    }
+    _setCell(index, value) {
+        const next = [...this.cells()];
+        next[index] = value;
+        this.cells.set(next);
+    }
+    /** Writes `text` into consecutive cells starting at `start`, then focuses the
+     * next empty cell (or the last one). Used by typing and autofill. */
+    _fillFrom(start, text) {
+        const len = this.appliedLength();
+        const next = [...this.cells()];
+        let i = start;
+        for (const ch of text.split('')) {
+            if (i >= len)
+                break;
+            next[i] = ch;
+            i++;
+        }
+        this.cells.set(next);
+        this._focusCell(Math.min(i, len - 1));
+    }
+    _focusCell(index) {
+        this._boxes()[index]?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnOtp, isStandalone: true, selector: "ngn-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()", "attr.aria-labelledby": "labelledBy()", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, providers: [provideSelf(NgnOtp)], viewQueries: [{ propertyName: "_boxes", predicate: ["box"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (i of indices(); track i) {\n  <input\n    #box\n    [ptInt]=\"this\"\n    [ptClass]=\"'box'\"\n    [type]=\"boxType()\"\n    [attr.inputmode]=\"boxInputMode()\"\n    [value]=\"cells()[i] ?? ''\"\n    [disabled]=\"disabled()\"\n    [attr.readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n    [attr.aria-label]=\"cellLabel(i)\"\n    [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n    maxlength=\"1\"\n    autocapitalize=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    (beforeinput)=\"onBeforeInput(i, $event)\"\n    (keydown)=\"onKeyDown(i, $event)\"\n    (paste)=\"onPaste($event)\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnOtp, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-otp', imports: [NgnPt], providers: [provideSelf(NgnOtp)], host: {
+                        role: 'group',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                    }, template: "@for (i of indices(); track i) {\n  <input\n    #box\n    [ptInt]=\"this\"\n    [ptClass]=\"'box'\"\n    [type]=\"boxType()\"\n    [attr.inputmode]=\"boxInputMode()\"\n    [value]=\"cells()[i] ?? ''\"\n    [disabled]=\"disabled()\"\n    [attr.readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n    [attr.aria-label]=\"cellLabel(i)\"\n    [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n    maxlength=\"1\"\n    autocapitalize=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    (beforeinput)=\"onBeforeInput(i, $event)\"\n    (keydown)=\"onKeyDown(i, $event)\"\n    (paste)=\"onPaste($event)\"\n  />\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], _boxes: [{ type: i0.ViewChildren, args: ['box', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnOtp };
+//# sourceMappingURL=ngneers-controls-otp.mjs.map

package/fesm2022/ngneers-controls-otp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-otp.mjs","sources":["../../src/otp/otp.ts","../../src/otp/otp.html","../../src/otp/ngneers-controls-otp.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  numberAttribute,\n  output,\n  signal,\n  untracked,\n  viewChildren,\n} from '@angular/core';\nimport { NgnPt, provideSelf, ValueControlBase } from '@ngneers/controls/base';\nimport { I18n } from '@ngneers/controls/i18n';\nimport { otpControlTemplate } from '@ngneers/controls-themes/templates/otp';\n\n/**\n * Coerce a requested length to a sane cell count (at least one). Coerces\n * strings too, so a value set without the `numberAttribute` transform (e.g. via\n * a dynamic property write) still yields a number instead of collapsing to 1.\n */\nfunction normalizeLength(value: number): number {\n  const n = Number(value);\n  return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;\n}\n\n/**\n * A one-time-password / verification-code input that splits a short code across\n * a row of single-character cells (like the PrimeNG `InputOtp`).\n *\n * - Typing a character fills the active cell and advances focus to the next.\n * - **Backspace** clears the active cell, or steps back and clears the previous\n *   one when the active cell is already empty.\n * - **←/→** move between cells, **Home/End** jump to the first/last.\n * - Pasting a code distributes its characters across the cells.\n *\n * It is a self-contained value control — bind `[value]`/`(valueChange)` (or\n * `[(value)]`) directly on `<ngn-otp>`. The value is the composed string\n * (`null` while every cell is empty); {@link completed} fires once the whole\n * code is filled.\n *\n * @category control\n */\n@Component({\n  selector: 'ngn-otp',\n  templateUrl: './otp.html',\n  imports: [NgnPt],\n  providers: [provideSelf(NgnOtp)],\n  host: {\n    role: 'group',\n    '[attr.aria-label]': 'label()',\n    '[attr.aria-labelledby]': 'labelledBy()',\n    '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n  },\n})\nexport class NgnOtp extends ValueControlBase<'otp', string | null> {\n  protected readonly theme = this.injectThemeTemplate(otpControlTemplate, {\n    root: true,\n    invalid: () => this.invalid(),\n  });\n  protected readonly i18n = inject(I18n).translations;\n\n  /**\n   * The number of character cells the code is split across.\n   * @default 6\n   */\n  public readonly length = input(6, { transform: numberAttribute });\n  /**\n   * Render each entered character as a masked dot instead of the character\n   * itself (like a password field).\n   * @default false\n   */\n  public readonly mask = input(false, { transform: booleanAttribute });\n  /**\n   * Restrict entry to digits (`0`–`9`) only. Also switches the on-screen\n   * keyboard to numeric on touch devices.\n   * @default false\n   */\n  public readonly integerOnly = input(false, { transform: booleanAttribute });\n\n  /** Emits the fully composed code once every cell holds a character. */\n  public readonly completed = output<string>();\n\n  /** Per-cell characters — the source of truth the composed value derives from. */\n  protected readonly cells = signal<string[]>([]);\n\n  /** Effective, sanitized cell count. */\n  protected readonly appliedLength = computed(() => normalizeLength(this.length()));\n\n  /** Cell indices for the template `@for` loop. */\n  protected readonly indices = computed(() =>\n    Array.from({ length: this.appliedLength() }, (_, i) => i)\n  );\n\n  protected readonly boxType = computed(() => (this.mask() ? 'password' : 'text'));\n  protected readonly boxInputMode = computed(() => (this.integerOnly() ? 'numeric' : 'text'));\n\n  private readonly _boxes = viewChildren<ElementRef<HTMLInputElement>>('box');\n\n  constructor() {\n    super();\n\n    // Keep the cell array sized to `length`, preserving already-typed chars so\n    // shrinking/growing the field does not wipe what the user entered.\n    effect(() => {\n      const len = this.appliedLength();\n      const cur = untracked(() => this.cells());\n      if (cur.length !== len) {\n        this.cells.set(Array.from({ length: len }, (_, i) => cur[i] ?? ''));\n      }\n    });\n\n    // External value → cells. Guard the write-loop by comparing to the current\n    // composed value so internal typing never re-triggers a reset.\n    effect(() => {\n      const len = this.appliedLength();\n      const ext = this.value() ?? '';\n      const current = untracked(() => this.cells().join(''));\n      if (ext !== current) {\n        const chars = ext.split('').slice(0, len);\n        this.cells.set(Array.from({ length: len }, (_, i) => chars[i] ?? ''));\n      }\n    });\n\n    // Cells → external value + completion. `null` while the field is empty.\n    effect(() => {\n      const cells = this.cells();\n      const composed = cells.join('');\n      this.value.set(composed === '' ? null : composed);\n      if (cells.length > 0 && cells.every(c => c !== '')) {\n        this.completed.emit(composed);\n      }\n    });\n  }\n\n  /** Accessible name for a cell — its 1-based position within the code. */\n  protected cellLabel(index: number): string {\n    return this.i18n['otp_cellLabel']({ index: index + 1, total: this.appliedLength() });\n  }\n\n  /**\n   * The control fully owns each cell's value: every text mutation is cancelled\n   * and the character is written to the {@link cells} signal instead, which the\n   * `[value]` binding reflects back. This makes overtype work from any caret\n   * position (no `maxlength`/selection tricks) and lets a single multi-character\n   * insert — e.g. SMS one-time-code autofill — spread across the cells.\n   */\n  protected onBeforeInput(index: number, event: InputEvent): void {\n    if (this.disabled() || this.readonly()) return;\n    const type = event.inputType;\n\n    // Deletions: desktop goes through keydown, but mobile soft keyboards emit\n    // these directly, so handle them here too.\n    if (type.startsWith('delete')) {\n      event.preventDefault();\n      if (this.cells()[index]) {\n        this._setCell(index, '');\n      } else if (index > 0) {\n        this._setCell(index - 1, '');\n        this._focusCell(index - 1);\n      }\n      return;\n    }\n\n    // Paste/drop are handled by the dedicated (paste) handler.\n    if (type === 'insertFromPaste' || type === 'insertFromDrop') return;\n    if (!type.startsWith('insert')) return;\n\n    event.preventDefault();\n    let data = event.data ?? '';\n    if (this.integerOnly()) data = data.replace(/\\D/g, '');\n    if (!data) return;\n    this._fillFrom(index, data);\n  }\n\n  protected onKeyDown(index: number, event: KeyboardEvent): void {\n    if (this.disabled() || this.readonly()) return;\n    if (event.ctrlKey || event.metaKey || event.altKey) return;\n\n    switch (event.key) {\n      case 'Backspace': {\n        event.preventDefault();\n        const cells = this.cells();\n        if (cells[index]) {\n          this._setCell(index, '');\n        } else if (index > 0) {\n          this._setCell(index - 1, '');\n          this._focusCell(index - 1);\n        }\n        break;\n      }\n      case 'Delete':\n        event.preventDefault();\n        this._setCell(index, '');\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (index > 0) this._focusCell(index - 1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (index < this.appliedLength() - 1) this._focusCell(index + 1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._focusCell(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        this._focusCell(this.appliedLength() - 1);\n        break;\n    }\n  }\n\n  protected onPaste(event: ClipboardEvent): void {\n    if (this.disabled() || this.readonly()) return;\n    event.preventDefault();\n    let text = event.clipboardData?.getData('text') ?? '';\n    text = this.integerOnly() ? text.replace(/\\D/g, '') : text.replace(/\\s/g, '');\n    if (!text) return;\n    // A paste replaces the whole code from the first cell, clearing the rest.\n    const len = this.appliedLength();\n    const chars = text.split('').slice(0, len);\n    this.cells.set(Array.from({ length: len }, (_, i) => chars[i] ?? ''));\n    this._focusCell(chars.length >= len ? len - 1 : chars.length);\n  }\n\n  /** Clears every cell (also serves a surrounding field's clear button). */\n  public override clearValue(): boolean {\n    if (this.disabled() || this.readonly()) return false;\n    this.cells.set(Array.from({ length: this.appliedLength() }, () => ''));\n    this._focusCell(0);\n    return true;\n  }\n\n  private _setCell(index: number, value: string): void {\n    const next = [...this.cells()];\n    next[index] = value;\n    this.cells.set(next);\n  }\n\n  /** Writes `text` into consecutive cells starting at `start`, then focuses the\n   * next empty cell (or the last one). Used by typing and autofill. */\n  private _fillFrom(start: number, text: string): void {\n    const len = this.appliedLength();\n    const next = [...this.cells()];\n    let i = start;\n    for (const ch of text.split('')) {\n      if (i >= len) break;\n      next[i] = ch;\n      i++;\n    }\n    this.cells.set(next);\n    this._focusCell(Math.min(i, len - 1));\n  }\n\n  private _focusCell(index: number): void {\n    this._boxes()[index]?.nativeElement.focus();\n  }\n}\n","@for (i of indices(); track i) {\n  <input\n    #box\n    [ptInt]=\"this\"\n    [ptClass]=\"'box'\"\n    [type]=\"boxType()\"\n    [attr.inputmode]=\"boxInputMode()\"\n    [value]=\"cells()[i] ?? ''\"\n    [disabled]=\"disabled()\"\n    [attr.readonly]=\"readonly() || null\"\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n    [attr.aria-label]=\"cellLabel(i)\"\n    [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n    maxlength=\"1\"\n    autocapitalize=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    (beforeinput)=\"onBeforeInput(i, $event)\"\n    (keydown)=\"onKeyDown(i, $event)\"\n    (paste)=\"onPaste($event)\"\n  />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAkBA;;;;AAIG;AACH,SAAS,eAAe,CAAC,KAAa,EAAA;AACpC,IAAA,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC;IACvB,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;AACxD;AAEA;;;;;;;;;;;;;;;;AAgBG;AAaG,MAAO,MAAO,SAAQ,gBAAsC,CAAA;AAC7C,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;AACtE,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;AAC9B,KAAA,CAAC;AACiB,IAAA,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,YAAY;AAEnD;;;AAGG;IACa,MAAM,GAAG,KAAK,CAAC,CAAC,8EAAI,SAAS,EAAE,eAAe,EAAA,CAAG;AACjE;;;;AAIG;IACa,IAAI,GAAG,KAAK,CAAC,KAAK,4EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACpE;;;;AAIG;IACa,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAG3D,SAAS,GAAG,MAAM,EAAU;;IAGzB,KAAK,GAAG,MAAM,CAAW,EAAE;8EAAC;;AAG5B,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;sFAAC;;IAG9D,OAAO,GAAG,QAAQ,CAAC,MACpC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;gFAC1D;AAEkB,IAAA,OAAO,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,UAAU,GAAG,MAAM,CAAC;gFAAC;AAC7D,IAAA,YAAY,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE,GAAG,SAAS,GAAG,MAAM,CAAC;qFAAC;IAE1E,MAAM,GAAG,YAAY,CAA+B,KAAK;+EAAC;AAE3E,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;;;QAIP,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE;AAChC,YAAA,MAAM,GAAG,GAAG,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;AACzC,YAAA,IAAI,GAAG,CAAC,MAAM,KAAK,GAAG,EAAE;AACtB,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YACrE;AACF,QAAA,CAAC,CAAC;;;QAIF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE;YAChC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;AAC9B,YAAA,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,YAAA,IAAI,GAAG,KAAK,OAAO,EAAE;AACnB,gBAAA,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC;AACzC,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YACvE;AACF,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;YAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;AAC/B,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,KAAK,EAAE,GAAG,IAAI,GAAG,QAAQ,CAAC;AACjD,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE;AAClD,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B;AACF,QAAA,CAAC,CAAC;IACJ;;AAGU,IAAA,SAAS,CAAC,KAAa,EAAA;QAC/B,OAAO,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;IACtF;AAEA;;;;;;AAMG;IACO,aAAa,CAAC,KAAa,EAAE,KAAiB,EAAA;QACtD,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;AACxC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS;;;AAI5B,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YAC7B,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE;AACvB,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC;YAC1B;AAAO,iBAAA,IAAI,KAAK,GAAG,CAAC,EAAE;gBACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC;AAC5B,gBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;YAC5B;YACA;QACF;;AAGA,QAAA,IAAI,IAAI,KAAK,iBAAiB,IAAI,IAAI,KAAK,gBAAgB;YAAE;AAC7D,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;YAAE;QAEhC,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE;QAC3B,IAAI,IAAI,CAAC,WAAW,EAAE;YAAE,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;AACtD,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC;IAC7B;IAEU,SAAS,CAAC,KAAa,EAAE,KAAoB,EAAA;QACrD,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QACxC,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM;YAAE;AAEpD,QAAA,QAAQ,KAAK,CAAC,GAAG;YACf,KAAK,WAAW,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,gBAAA,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE;AAChB,oBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC;gBAC1B;AAAO,qBAAA,IAAI,KAAK,GAAG,CAAC,EAAE;oBACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC;AAC5B,oBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC5B;gBACA;YACF;AACA,YAAA,KAAK,QAAQ;gBACX,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC;gBACxB;AACF,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,KAAK,GAAG,CAAC;AAAE,oBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;gBACzC;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC;AAAE,oBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBAClB;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;gBACzC;;IAEN;AAEU,IAAA,OAAO,CAAC,KAAqB,EAAA;QACrC,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QACxC,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,IAAI,GAAG,KAAK,CAAC,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE;QACrD,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;AAC7E,QAAA,IAAI,CAAC,IAAI;YAAE;;AAEX,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE;AAChC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC;AAC1C,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAC/D;;IAGgB,UAAU,GAAA;QACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,OAAO,KAAK;QACpD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AACtE,QAAA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;AAClB,QAAA,OAAO,IAAI;IACb;IAEQ,QAAQ,CAAC,KAAa,EAAE,KAAa,EAAA;QAC3C,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;AAC9B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK;AACnB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;IACtB;AAEA;AACqE;IAC7D,SAAS,CAAC,KAAa,EAAE,IAAY,EAAA;AAC3C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE;QAChC,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,GAAG,KAAK;QACb,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,GAAG;gBAAE;AACd,YAAA,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE;AACZ,YAAA,CAAC,EAAE;QACL;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC;IACvC;AAEQ,IAAA,UAAU,CAAC,KAAa,EAAA;QAC9B,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,EAAE;IAC7C;uGA3MW,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAN,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,6BAAA,EAAA,EAAA,EAAA,SAAA,EARN,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,KAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjDlC,2pBAsBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED0BY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FASJ,MAAM,EAAA,UAAA,EAAA,CAAA;kBAZlB,SAAS;+BACE,SAAS,EAAA,OAAA,EAEV,CAAC,KAAK,CAAC,aACL,CAAC,WAAW,CAAA,MAAA,CAAQ,CAAC,EAAA,IAAA,EAC1B;AACJ,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,mBAAmB,EAAE,SAAS;AAC9B,wBAAA,wBAAwB,EAAE,cAAc;AACxC,wBAAA,qBAAqB,EAAE,2BAA2B;AACnD,qBAAA,EAAA,QAAA,EAAA,2pBAAA,EAAA;kbA4CoE,KAAK,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEnG5E;;AAEG;;;;"}

package/fesm2022/ngneers-controls-splitter.mjs

@@ -365,6 +365,19 @@ class NgnSplitter extends NgnBase {
             const panels = this.panels();
             this.updateDividers(panels);
         });
+        // Measure divider positions in the after-render phase (post-layout) and cache
+        // them in a signal. Reading DOM offsets directly in the template binding causes
+        // NG0100, since the grid sizes are applied in the same CD cycle and the reflow
+        // settles the measured value between the CD and verify passes.
+        afterRenderEffect(() => {
+            const values = this.measureDividerValues();
+            untracked(() => {
+                const prev = this._dividerValues();
+                if (values.length !== prev.length || values.some((v, i) => v !== prev[i])) {
+                    this._dividerValues.set(values);
+                }
+            });
+        });
         registerState({
             storage: () => this.stateStorage(),
             key: () => this.stateKey(),
@@ -527,28 +540,46 @@ class NgnSplitter extends NgnBase {
             }
         }
     }
+    /** Cached divider positions (percentage) measured post-layout; see the after-render effect in the constructor. */
+    _dividerValues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dividerValues" }] : /* istanbul ignore next */ []));
     /**
      * 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.
      */
     dividerValueNow(index) {
+        return this._dividerValues()[index] ?? 0;
+    }
+    /**
+     * 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.
+     */
+    measureDividerValues() {
         // ponytail: DOM-offset heuristic; one CD-frame lag during drag is fine for
         // an aria value. Swap for an engine-reported px signal if exactness matters.
-        this.calculator().gridTemplateSizes(); // reactive trigger
-        const panels = this.calculator().orderedPanels();
+        const calculator = this.calculator();
+        calculator.gridTemplateSizes(); // reactive trigger
+        calculator.dragContext(); // reactive trigger (live update during drag)
+        this.elementSize(); // reactive trigger (container resize)
+        const panels = calculator.orderedPanels();
         const horizontal = this.layout() === 'horizontal';
-        let before = 0;
-        let total = 0;
-        panels.forEach((panel, i) => {
+        const sizes = panels.map(panel => {
             const el = panel.element.nativeElement;
-            const size = horizontal ? el.offsetWidth : el.offsetHeight;
-            total += size;
-            if (i <= index)
-                before += size;
+            return horizontal ? el.offsetWidth : el.offsetHeight;
         });
-        return total > 0 ? Math.round((before / total) * 100) : 0;
+        const total = sizes.reduce((a, b) => a + b, 0);
+        if (total <= 0)
+            return [];
+        // One value per divider: cumulative size up to and including panel i.
+        const values = [];
+        let before = 0;
+        for (let i = 0; i < panels.length - 1; i++) {
+            before += sizes[i];
+            values.push(Math.round((before / total) * 100));
+        }
+        return values;
     }
     getStepInPx() {
         const step = this.step();