@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-mask-input.mjs

@@ -0,0 +1,888 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, signal, viewChild, effect, untracked, Component } from '@angular/core';
+import { domEventHandler } from '@ngneers/controls/api/ng';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnRovingGroup, NgnRovingItem } from '@ngneers/controls/roving-focus';
+import { maskInputControlTemplate } from '@ngneers/controls-themes/templates/mask-input';
+
+const phoneNumber = [
+    '(',
+    { kind: 'number', segment: 'areaCode', min: 0, max: 999, length: 3, placeholder: '000' },
+    ')',
+    ' ',
+    { kind: 'number', segment: 'exchange', min: 0, max: 999, length: 3, placeholder: '000' },
+    '-',
+    { kind: 'number', segment: 'subscriber', min: 0, max: 9999, length: 4, placeholder: '0000' },
+];
+const creditCard = [
+    { kind: 'number', segment: 'cardPart1', min: 0, max: 9999, length: 4, placeholder: '0000' },
+    ' ',
+    { kind: 'number', segment: 'cardPart2', min: 0, max: 9999, length: 4, placeholder: '0000' },
+    ' ',
+    { kind: 'number', segment: 'cardPart3', min: 0, max: 9999, length: 4, placeholder: '0000' },
+    ' ',
+    { kind: 'number', segment: 'cardPart4', min: 0, max: 9999, length: 4, placeholder: '0000' },
+];
+const ssn = [
+    { kind: 'number', segment: 'areaNumber', min: 0, max: 999, length: 3, placeholder: '000' },
+    '-',
+    { kind: 'number', segment: 'groupNumber', min: 0, max: 99, length: 2, placeholder: '00' },
+    '-',
+    { kind: 'number', segment: 'serialNumber', min: 0, max: 9999, length: 4, placeholder: '0000' },
+];
+const zipCode = [
+    { kind: 'number', segment: 'zipBase', min: 0, max: 99999, length: 5, placeholder: '00000' },
+    '-',
+    { kind: 'number', segment: 'zipPlus4', min: 0, max: 9999, length: 4, placeholder: '0000' },
+];
+const currency = [
+    '$',
+    {
+        kind: 'number',
+        segment: 'dollars',
+        min: 0,
+        max: 999999999,
+        length: 9,
+        placeholder: '000000000',
+    },
+    '.',
+    { kind: 'number', segment: 'cents', min: 0, max: 99, length: 2, placeholder: '00' },
+];
+const percentage = [
+    { kind: 'number', segment: 'percent', min: 0, max: 100, length: 3, placeholder: '000' },
+    '%',
+];
+const MASKS = {
+    phoneNumber,
+    creditCard,
+    ssn,
+    zipCode,
+    currency,
+    percentage,
+};
+
+const formatSymbols = {
+    d: 'day',
+    M: 'month',
+    y: 'year',
+    H: 'hour24',
+    h: 'hour12',
+    m: 'minute',
+    s: 'second',
+    a: 'period',
+    S: 'fractionalSecond',
+};
+/**
+ * Returns the input mask configuration for a given date or time mask.
+ * @param mask The mask string representing the date or time format.
+ * For example, 'MM/dd/yyyy' for date, 'HH:mm:ss' for time, 'hh:mm:ss a' for 12-hour time with period.
+ * @returns The input mask configuration that can be used with the input mask component.
+ */
+function getDateOrTimeMask(mask) {
+    const cfg = [];
+    let i = 0;
+    while (i < mask.length) {
+        const char = mask[i];
+        const symbol = formatSymbols[char];
+        if (symbol) {
+            // Count how many times this symbol repeats
+            let length = 1;
+            while (i + length < mask.length && mask[i + length] === char) {
+                length++;
+            }
+            cfg.push({ symbol, length });
+            i += length;
+        }
+        else {
+            cfg.push({ literal: char });
+            i++;
+        }
+    }
+    const result = cfg.map(segment => {
+        if ('literal' in segment) {
+            return segment.literal;
+        }
+        else {
+            const { symbol, length } = segment;
+            // A single-letter token (length 1) yields a variable-length, non-padded field
+            // (`length` omitted); a doubled token (length >= 2) yields a fixed, zero-padded field.
+            const len = length >= 2 ? length : undefined;
+            switch (symbol) {
+                case 'day':
+                    return {
+                        segment: 'day',
+                        kind: 'number',
+                        min: 1,
+                        max: 31,
+                        length: len,
+                        placeholder: 'DD',
+                    };
+                case 'month':
+                    return {
+                        segment: 'month',
+                        kind: 'number',
+                        min: 1,
+                        max: 12,
+                        length: len,
+                        placeholder: 'MM',
+                    };
+                case 'year':
+                    return {
+                        segment: 'year',
+                        kind: 'number',
+                        min: 0,
+                        max: 9999,
+                        length: len,
+                        placeholder: 'YYYY',
+                    };
+                case 'hour24':
+                    return {
+                        segment: 'hour24',
+                        kind: 'number',
+                        min: 0,
+                        max: 23,
+                        length: len,
+                        placeholder: 'HH',
+                    };
+                case 'hour12':
+                    return {
+                        segment: 'hour12',
+                        kind: 'number',
+                        min: 1,
+                        max: 12,
+                        length: len,
+                        placeholder: 'HH',
+                    };
+                case 'minute':
+                    return {
+                        segment: 'minute',
+                        kind: 'number',
+                        min: 0,
+                        max: 59,
+                        length: len,
+                        placeholder: 'MM',
+                    };
+                case 'second':
+                    return {
+                        segment: 'second',
+                        kind: 'number',
+                        min: 0,
+                        max: 59,
+                        length: len,
+                        placeholder: 'SS',
+                    };
+                case 'period':
+                    return {
+                        segment: 'period',
+                        kind: 'enum',
+                        values: ['AM', 'PM'],
+                    };
+                case 'fractionalSecond':
+                    return {
+                        segment: 'fractionalSecond',
+                        kind: 'number',
+                        min: 0,
+                        max: 999,
+                        length: len,
+                        placeholder: 'SSS',
+                    };
+            }
+        }
+    });
+    return result;
+}
+const DATE_TIME_MASKS = {
+    date: getDateOrTimeMask('MM/dd/yyyy'),
+    time: getDateOrTimeMask('HH:mm:ss'),
+    timeShort: getDateOrTimeMask('HH:mm'),
+    time12: getDateOrTimeMask('hh:mm:ss a'),
+};
+
+function resolveMask(input) {
+    if (!input)
+        return null;
+    const cfg = typeof input === 'string'
+        ? (MASKS[input] ??
+            DATE_TIME_MASKS[input])
+        : input;
+    if (!cfg)
+        return null; // unknown raw string → unsupported
+    return cfg.map(item => {
+        if (typeof item === 'string')
+            return { kind: 'sep', text: item };
+        if (item.kind === 'number') {
+            const maxLen = item.length ?? String(item.max).length;
+            const field = {
+                kind: 'number',
+                name: item.segment,
+                min: item.min,
+                max: item.max,
+                maxLen,
+                pad: item.length != null,
+                placeholder: item.placeholder ?? '-'.repeat(maxLen),
+            };
+            return field;
+        }
+        // Guard an empty values array: Math.max(...[]) is -Infinity, which would
+        // throw in '-'.repeat(maxLen). An empty enum is degenerate but must not crash.
+        const maxLen = item.values.length === 0 ? 0 : Math.max(...item.values.map(v => v.length));
+        const field = {
+            kind: 'enum',
+            name: item.segment,
+            values: [...item.values],
+            maxLen,
+            placeholder: item.placeholder ?? (maxLen > 0 ? '-'.repeat(maxLen) : ''),
+        };
+        return field;
+    });
+}
+function fieldList(parts) {
+    return parts.filter((p) => p.kind !== 'sep');
+}
+/**
+ * Index of the section whose horizontal box is nearest `clientX`.
+ * - `clientX` left of the first section → 0
+ * - `clientX` right of the last section → last index
+ * - inside a section → that section
+ * - in a gap/separator between two sections → the nearer one
+ * Returns -1 for an empty list.
+ */
+function nearestSectionIndex(rects, clientX) {
+    if (rects.length === 0)
+        return -1;
+    let best = 0;
+    let bestDist = Infinity;
+    for (let i = 0; i < rects.length; i++) {
+        const r = rects[i];
+        if (!r)
+            continue;
+        const dist = clientX < r.left ? r.left - clientX : clientX > r.right ? clientX - r.right : 0;
+        if (dist < bestDist) {
+            bestDist = dist;
+            best = i;
+        }
+        if (dist === 0)
+            break; // inside a section — exact hit
+    }
+    return best;
+}
+/**
+ * Enforce the no-gaps invariant: scanning from index 0, once the first empty
+ * field is seen, blank every field after it. A delete that empties an earlier
+ * field therefore clears the now-orphaned later fields too.
+ */
+function truncateGaps(values) {
+    let seenEmpty = false;
+    return values.map(v => {
+        if (seenEmpty)
+            return '';
+        if (!v) {
+            seenEmpty = true;
+            return '';
+        }
+        return v;
+    });
+}
+// ---- New per-section pure functions ----
+/**
+ * Type a char into ONE section. Returns the new section value + whether focus
+ * should auto-advance to the next section, or null if the char is rejected.
+ *
+ * For number fields:
+ * - Non-digit → null.
+ * - If current is already complete (length===maxLen or value*10>max) a digit
+ *   starts a fresh value (replace).
+ * - Otherwise appending is attempted. If the appended candidate exceeds max or
+ *   maxLen, restart with the bare digit instead.
+ * - advance:true when the resulting value is isSectionComplete.
+ *
+ * For enum fields:
+ * - Match by case-insensitive first char; on match returns {value, advance:true}.
+ * - No match → null.
+ *
+ * NOTE: padding is NOT applied to the returned value — that is a display concern.
+ */
+function typeIntoSection(field, current, ch) {
+    if (field.kind === 'enum') {
+        const match = field.values.find(val => val[0]?.toLowerCase() === ch.toLowerCase());
+        if (!match)
+            return null;
+        return { value: match, advance: true };
+    }
+    // number field — a single digit only (multi-char data is rejected outright).
+    if (!/^\d$/.test(ch))
+        return null;
+    // If current section is already complete, start fresh
+    const currentComplete = current !== '' && isSectionComplete(field, current);
+    let candidate;
+    if (currentComplete) {
+        candidate = ch;
+    }
+    else {
+        const appended = current + ch;
+        // If appending would exceed max or length, restart with bare digit
+        if (appended.length > field.maxLen || Number(appended) > field.max) {
+            // A single digit that is itself out of range can never be a valid value
+            // for this field (only possible for tiny fields with max < 10) → reject.
+            if (Number(ch) > field.max)
+                return null;
+            candidate = ch;
+        }
+        else {
+            candidate = appended;
+        }
+    }
+    // A full-width candidate below the field minimum (e.g. '00' for a day/month
+    // whose min is 1) is invalid — reject rather than letting it "complete".
+    if (candidate.length === field.maxLen && Number(candidate) < field.min)
+        return null;
+    const advance = isSectionComplete(field, candidate);
+    return { value: candidate, advance };
+}
+/**
+ * Step/cycle a section value up (1) or down (-1). Empty defaults sensibly.
+ *
+ * For number fields:
+ * - empty → field.min (no extra dir step on the empty→min transition).
+ * - Non-empty: n = Number(current) + dir, wrap at >max → min, <min → max.
+ * - Returns padded (padStart maxLen '0') iff field.pad.
+ *
+ * For enum fields:
+ * - Find current (case-insensitive) in values; step by dir with wraparound.
+ * - empty/not-found → first value (dir:1) or last value (dir:-1).
+ */
+function stepSection(field, current, dir) {
+    if (field.kind === 'enum') {
+        const i = field.values.findIndex(v => v.toLowerCase() === current.toLowerCase());
+        if (i === -1) {
+            return (dir === 1 ? field.values[0] : field.values[field.values.length - 1]) ?? '';
+        }
+        const next = (i + dir + field.values.length) % field.values.length;
+        return field.values[next] ?? field.values[0] ?? '';
+    }
+    // number field
+    if (current === '') {
+        const min = field.min;
+        return field.pad ? String(min).padStart(field.maxLen, '0') : String(min);
+    }
+    let n = Number(current) + dir;
+    if (n > field.max)
+        n = field.min;
+    if (n < field.min)
+        n = field.max;
+    return field.pad ? String(n).padStart(field.maxLen, '0') : String(n);
+}
+/**
+ * Whether a single section value is "done" (would auto-advance or is a fully
+ * matched enum). Empty → always false.
+ *
+ * number: value.length===maxLen OR Number(value)*10 > max.
+ * enum: value is literally in the values list (case-sensitive).
+ */
+function isSectionComplete(field, value) {
+    if (value === '')
+        return false;
+    if (field.kind === 'enum')
+        return field.values.includes(value);
+    if (!/^\d+$/.test(value))
+        return false;
+    const n = Number(value);
+    // A complete number value must be within range AND either fill the width or be
+    // unable to grow further (value*10 would exceed max).
+    return n >= field.min && n <= field.max && (value.length === field.maxLen || n * 10 > field.max);
+}
+/**
+ * Whether all fields in the mask have a complete value.
+ * Empty field list → false.
+ */
+function isComplete(parts, values) {
+    const fields = fieldList(parts);
+    if (fields.length === 0)
+        return false;
+    return fields.every((field, i) => isSectionComplete(field, values[i] ?? ''));
+}
+/**
+ * Render each part as a RenderToken for display. No offsets.
+ *
+ * Separator → {kind:'sep', text}.
+ * Field → {kind:'section', ord, text, placeholder}:
+ *   - empty value → text=field.placeholder, placeholder=true
+ *   - filled → text=padded(number&&pad) or raw value, placeholder=false
+ *
+ * `ord` is the 0-based field ordinal (index among fields, not among all parts).
+ *
+ * When `activeOrd` is provided, a padded number field that is currently active
+ * AND not yet complete renders its raw typed digits instead of zero-padded text.
+ * This matches native date-field behaviour: padding is deferred until the section
+ * is committed (complete or navigated away from).
+ * When `activeOrd` is omitted, all non-empty padded fields are padded (preserving
+ * the "fully padded" output for callers that don't track the active section).
+ */
+function composeDisplay(parts, values, activeOrd) {
+    const tokens = [];
+    let fieldOrd = 0;
+    for (const part of parts) {
+        if (part.kind === 'sep') {
+            tokens.push({ kind: 'sep', text: part.text });
+        }
+        else {
+            const o = fieldOrd;
+            const value = values[o] ?? '';
+            if (value === '') {
+                tokens.push({ kind: 'section', ord: o, text: part.placeholder, placeholder: true });
+            }
+            else {
+                const padded = part.kind === 'number' && part.pad && (o !== activeOrd || isSectionComplete(part, value));
+                const text = padded ? value.padStart(part.maxLen, '0') : value;
+                tokens.push({ kind: 'section', ord: o, text, placeholder: false });
+            }
+            fieldOrd++;
+        }
+    }
+    return tokens;
+}
+/**
+ * Compose the full serialized output string (padded per field definition).
+ * Separators are appended verbatim. Number fields are padded iff field.pad.
+ * Enum fields are verbatim. Empty values are included as-is (empty string).
+ */
+function serialize(parts, values) {
+    let result = '';
+    let fieldOrd = 0;
+    for (const part of parts) {
+        if (part.kind === 'sep') {
+            result += part.text;
+        }
+        else {
+            const value = values[fieldOrd] ?? '';
+            if (part.kind === 'number' && part.pad) {
+                result += value.padStart(part.maxLen, '0');
+            }
+            else {
+                result += value;
+            }
+            fieldOrd++;
+        }
+    }
+    return result;
+}
+/** Consume the maximal in-range digit run for a number field at `cursor`. */
+function takeNumberField(field, str, cursor) {
+    let take = '';
+    while (take.length < field.maxLen) {
+        const c = str[cursor] ?? '';
+        if (!/\d/.test(c))
+            break;
+        take += c;
+        cursor++;
+    }
+    if (take === '')
+        return { value: '', cursor, ok: true, stop: true };
+    const n = Number(take);
+    if (n < field.min || n > field.max)
+        return { value: '', cursor, ok: false, stop: false };
+    return { value: take, cursor, ok: true, stop: false };
+}
+/** Match an enum value (exact case-insensitive, else first char) at `cursor`. */
+function takeEnumField(field, str, cursor) {
+    const rest = str.slice(cursor);
+    if (rest === '')
+        return { value: '', cursor, ok: true, stop: true };
+    const exact = field.values.find(v => v.toUpperCase() === rest.slice(0, v.length).toUpperCase());
+    const match = exact ?? field.values.find(v => v[0]?.toUpperCase() === rest[0]?.toUpperCase());
+    if (!match)
+        return { value: '', cursor, ok: false, stop: false };
+    return { value: match, cursor: cursor + match.length, ok: true, stop: false };
+}
+function feedString(parts, str) {
+    const fields = fieldList(parts);
+    const values = fields.map(() => '');
+    let cursor = 0;
+    let o = 0; // field ordinal
+    let ok = true;
+    for (const part of parts) {
+        if (part.kind === 'sep') {
+            if (str.startsWith(part.text, cursor))
+                cursor += part.text.length;
+            continue;
+        }
+        const res = part.kind === 'number'
+            ? takeNumberField(part, str, cursor)
+            : takeEnumField(part, str, cursor);
+        if (!res.ok) {
+            ok = false;
+            break;
+        }
+        if (res.stop)
+            break; // partial input — leave this and the rest empty
+        values[o] = res.value;
+        cursor = res.cursor;
+        o++;
+    }
+    // Any unconsumed trailing input means the string didn't fully match the mask.
+    // `paste` treats this as invalid (returns null); `deserialize` ignores `ok`
+    // and keeps the best-effort prefix.
+    if (cursor < str.length)
+        ok = false;
+    return { values: truncateGaps(values), ok };
+}
+function paste(parts, text) {
+    const { values, ok } = feedString(parts, text);
+    if (!ok)
+        return null; // any invalid field rejects the whole paste
+    // offset: count the committed characters in a simple left-to-right walk
+    let offset = 0;
+    let fieldOrd = 0;
+    for (const part of parts) {
+        if (part.kind === 'sep') {
+            // include separator only if the next field has a value
+            const nextValue = values[fieldOrd] ?? '';
+            if (nextValue)
+                offset += part.text.length;
+        }
+        else {
+            const v = values[fieldOrd] ?? '';
+            if (v)
+                offset += v.length;
+            fieldOrd++;
+        }
+    }
+    return { values, offset };
+}
+function deserialize(parts, str) {
+    // Best-effort separator-aware parse. On an invalid/out-of-range field we keep
+    // the valid prefix (feedString already stopped there, leaving the rest empty)
+    // rather than producing garbage. Never throws.
+    return feedString(parts, str).values;
+}
+
+/**
+ * @category control
+ */
+class NgnMaskInput extends ValueControlBase {
+    isFieldControl = true;
+    theme = this.injectThemeTemplate(maskInputControlTemplate, 'root');
+    i18n = inject(I18n).translations;
+    /**
+     * The mask to apply to the input. Can be a predefined mask key or a custom mask configuration.
+     */
+    mask = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+    _parts = computed(() => resolveMask(this.mask()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_parts" }] : /* istanbul ignore next */ []));
+    _fields = computed(() => {
+        const p = this._parts();
+        return p ? fieldList(p) : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fields" }] : /* istanbul ignore next */ []));
+    /**
+     * Structural signature of the resolved mask — field kinds/names/widths and
+     * separators, but deliberately NOT numeric min/max. The section values are
+     * reset only when this changes, so a consumer narrowing a field's range (e.g.
+     * a calendar shrinking the day field's max to the current month's length) does
+     * not wipe what the user has already typed.
+     */
+    _structureSig = computed(() => {
+        const parts = this._parts();
+        if (!parts)
+            return '';
+        return parts
+            .map(p => p.kind === 'sep'
+            ? `sep:${p.text}`
+            : p.kind === 'number'
+                ? `num:${p.name}:${p.maxLen}:${p.pad}`
+                : `enum:${p.name}:${p.values.join('|')}`)
+            .join(';');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_structureSig" }] : /* istanbul ignore next */ []));
+    /** Source of truth: one raw string per field ordinal. */
+    values = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    /** Whether the proxy input currently holds focus. The active-section
+     * highlight and "actively edited" treatment only apply while focused. */
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** RenderTokens for template `@for` loop. While unfocused there is no active
+     * section, so padded fields render in their resting (padded) form. */
+    tokens = computed(() => {
+        const p = this._parts();
+        if (!p)
+            return [];
+        return composeDisplay(p, this.values(), this.focused() ? this.activeOrd() : undefined);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
+    /** The roving group on the proxy input element. */
+    rovingGroup = viewChild.required(NgnRovingGroup);
+    /** The proxy input element reference. */
+    _proxyRef = viewChild.required('proxy');
+    /** Active field ordinal (identity: item index === field ordinal). */
+    activeOrd = computed(() => this.rovingGroup().activeIndex(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOrd" }] : /* istanbul ignore next */ []));
+    proxyInputMode = computed(() => {
+        const f = this._fields()[this.activeOrd()];
+        return f?.kind === 'enum' ? 'text' : 'numeric';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "proxyInputMode" }] : /* istanbul ignore next */ []));
+    liveAnnouncement = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : /* istanbul ignore next */ []));
+    // ---- A11y helpers ----
+    sectionValueNow(ord) {
+        const f = this._fields()[ord];
+        const v = this.values()[ord] ?? '';
+        if (!f || v === '')
+            return null;
+        if (f.kind === 'number')
+            return Number(v);
+        // enum: expose the option index so the spinbutton has a valid numeric value.
+        const idx = f.values.indexOf(v);
+        return idx >= 0 ? idx : null;
+    }
+    sectionMin(ord) {
+        const f = this._fields()[ord];
+        if (!f)
+            return null;
+        return f.kind === 'number' ? f.min : 0;
+    }
+    sectionMax(ord) {
+        const f = this._fields()[ord];
+        if (!f)
+            return null;
+        return f.kind === 'number' ? f.max : f.values.length - 1;
+    }
+    /** Accessible name for a section's `role="spinbutton"` — the field's name. */
+    sectionName(ord) {
+        return this._fields()[ord]?.name ?? '';
+    }
+    sectionValueText(ord) {
+        const f = this._fields()[ord];
+        const v = this.values()[ord] ?? '';
+        if (!f)
+            return '';
+        if (v === '')
+            return f.placeholder;
+        return v;
+    }
+    /**
+     * Whether every section holds a finished value — i.e. the mask is fully
+     * filled and a serialized output value has been emitted.
+     */
+    complete = computed(() => this.value() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "complete" }] : /* istanbul ignore next */ []));
+    /** Whether no section holds any value (the whole field is blank). Lets a host
+     * (e.g. calendar) distinguish a fully-cleared field from mid-typing, both of
+     * which emit a `null` value. */
+    empty = computed(() => this.values().every(v => v === ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns the resolved CSS class string for `section-active` from the theme,
+     * used to highlight the currently active section span in the template.
+     */
+    activeSectionClass = computed(() => this.theme.class('section-active'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSectionClass" }] : /* istanbul ignore next */ []));
+    // ---- Segment descriptions for sr ----
+    segmentDescriptions = computed(() => {
+        const parts = this._parts();
+        if (!parts)
+            return [];
+        return fieldList(parts).map(field => ({
+            id: `seg-${field.name}-${this.inputId()}`,
+            text: field.kind === 'number'
+                ? this.i18n['maskInput_segmentRange']({
+                    name: field.name,
+                    min: field.min,
+                    max: field.max,
+                })
+                : field.values.join(this.i18n['maskInput_optionSeparator']()),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segmentDescriptions" }] : /* istanbul ignore next */ []));
+    /** Returns the description span id for a given field ordinal, or null if none. */
+    sectionDescId(ord) {
+        return this.segmentDescriptions()[ord]?.id ?? null;
+    }
+    constructor() {
+        super();
+        // Reset values only when the mask STRUCTURE changes (not a min/max-only
+        // tweak), synchronously before the next render, so stale values from a
+        // different mask are never composed against the new parts.
+        let prevStructureSig = null;
+        effect(() => {
+            const sig = this._structureSig();
+            if (prevStructureSig !== null && prevStructureSig !== sig) {
+                this.values.set([]);
+            }
+            prevStructureSig = sig;
+        });
+        // External value → internal: guard against write-loop by comparing to serialized form.
+        // Use untracked() when reading `values` so that internal typing changes do NOT re-trigger
+        // this effect — it must only fire when the external `value` model (from the parent) changes.
+        effect(() => {
+            const parts = this._parts();
+            if (!parts)
+                return;
+            const ext = this.value() ?? '';
+            const current = untracked(() => isComplete(parts, this.values()) ? serialize(parts, this.values()) : '');
+            if (ext !== current) {
+                this.values.set(deserialize(parts, ext));
+            }
+        });
+        // Internal values → external value model.
+        effect(() => {
+            const parts = this._parts();
+            if (!parts)
+                return;
+            const vals = this.values();
+            if (isComplete(parts, vals)) {
+                this.value.set(serialize(parts, vals));
+            }
+            else {
+                this.value.set(null);
+            }
+        });
+        // Wire DOM events on the proxy input.
+        domEventHandler(this._proxyRef, 'beforeinput', event => this._onBeforeInput(event));
+        domEventHandler(this._proxyRef, 'keydown', event => this._onKeyDown(event));
+        // Track focus so the active-section highlight only shows while focused.
+        domEventHandler(this._proxyRef, 'focus', () => this.focused.set(true));
+        domEventHandler(this._proxyRef, 'blur', () => this.focused.set(false));
+        // Pointer down anywhere on the control: focus the proxy and select the
+        // section nearest the pointer. Shared with field-delegated clicks via
+        // `focusFromPointer`. Works standalone (no surrounding input-field).
+        domEventHandler(this.element, 'pointerdown', event => {
+            if (this.disabled())
+                return;
+            event.preventDefault();
+            this.focusFromPointer(event);
+        });
+    }
+    /**
+     * Places focus on the proxy input and selects the section nearest the
+     * pointer's horizontal position. Invoked both by the control's own
+     * `pointerdown` and by a surrounding `ngn-input-field` when its padding is
+     * clicked (so a click "above" a section selects that section). Returns `true`
+     * to signal the field it handled focus.
+     */
+    focusFromPointer(event) {
+        if (this.disabled())
+            return false;
+        this._proxyRef().nativeElement.focus();
+        const ord = this._sectionIndexAt(event.clientX);
+        if (ord >= 0)
+            this.rovingGroup().setActive(ord);
+        return true;
+    }
+    /** Clears every section (invoked by a surrounding field's clear button). */
+    clearValue() {
+        if (this.disabled() || this.readonly())
+            return false;
+        this.values.set([]);
+        return true;
+    }
+    /** Field ordinal of the section nearest `clientX`, or -1 when there are none. */
+    _sectionIndexAt(clientX) {
+        // Section spans carry role="spinbutton" and appear in DOM order = field
+        // ordinal order (matching the activeOrd identity mapping).
+        const spans = this.element.nativeElement.querySelectorAll('[role="spinbutton"]');
+        const rects = Array.from(spans, el => el.getBoundingClientRect());
+        return nearestSectionIndex(rects, clientX);
+    }
+    _onBeforeInput(event) {
+        const parts = this._parts();
+        if (!parts)
+            return;
+        if (this.disabled() || this.readonly())
+            return;
+        event.preventDefault();
+        if (event.inputType === 'insertFromPaste' || event.inputType === 'insertFromDrop') {
+            const r = event.data ? paste(parts, event.data) : null;
+            if (r) {
+                this.values.set(r.values);
+                // Advance to the next empty section or stay on last
+                const fields = this._fields();
+                const nextEmpty = r.values.findIndex(v => v === '');
+                const targetOrd = nextEmpty >= 0 ? nextEmpty : fields.length - 1;
+                this.rovingGroup().setActive(targetOrd);
+            }
+            return;
+        }
+        if (event.data) {
+            const ord = this.activeOrd();
+            const fields = this._fields();
+            const f = fields[ord];
+            if (!f)
+                return;
+            const current = this.values()[ord] ?? '';
+            const r = typeIntoSection(f, current, event.data);
+            if (r) {
+                // Immutable update of the values array
+                const newValues = [...this.values()];
+                newValues[ord] = r.value;
+                this.values.set(newValues);
+                if (r.advance) {
+                    this.rovingGroup().next();
+                }
+            }
+        }
+    }
+    _onKeyDown(event) {
+        const parts = this._parts();
+        if (!parts || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        if (this.disabled() || this.readonly())
+            return;
+        const ord = this.activeOrd();
+        const fields = this._fields();
+        const f = fields[ord];
+        switch (event.key) {
+            case 'Backspace':
+            case 'Delete': {
+                event.preventDefault();
+                const currentVal = this.values()[ord] ?? '';
+                if (currentVal === '') {
+                    // Already empty — step to previous section
+                    this.rovingGroup().prev();
+                }
+                else {
+                    // Clear the active section; then enforce no-gaps so any filled
+                    // fields after the newly-emptied one are also cleared.
+                    const newValues = [...this.values()];
+                    newValues[ord] = '';
+                    this.values.set(truncateGaps(newValues));
+                }
+                break;
+            }
+            case 'ArrowUp':
+            case 'ArrowDown': {
+                // The roving group is configured with horizontal orientation, so it
+                // deliberately does NOT consume ArrowUp/ArrowDown — the mask owns them
+                // for value stepping. This division is intentional, not coincidental:
+                // Left/Right move between sections, Up/Down change the active value.
+                event.preventDefault();
+                if (!f)
+                    break;
+                const dir = event.key === 'ArrowUp' ? 1 : -1;
+                const newVal = stepSection(f, this.values()[ord] ?? '', dir);
+                const newValues = [...this.values()];
+                newValues[ord] = newVal;
+                this.values.set(newValues);
+                this.liveAnnouncement.set(`${f.name}: ${newVal}`);
+                break;
+            }
+            // ArrowLeft/Right/Home/End are handled by the roving group — do not preventDefault
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnMaskInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnMaskInput, isStandalone: true, selector: "ngn-mask-input", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnMaskInput)], viewQueries: [{ propertyName: "rovingGroup", first: true, predicate: NgnRovingGroup, descendants: true, isSignal: true }, { propertyName: "_proxyRef", first: true, predicate: ["proxy"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"'root'\">\n  <input\n    #proxy\n    #pg=\"ngnRovingGroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'proxy'\"\n    ngnRovingGroup\n    rovingMode=\"activedescendant\"\n    orientation=\"horizontal\"\n    [attr.inputmode]=\"proxyInputMode()\"\n    [attr.aria-roledescription]=\"i18n['maskInput_roleDescription']()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [disabled]=\"disabled()\"\n    [attr.readonly]=\"readonly() || null\"\n    tabindex=\"0\"\n  />\n  @for (tok of tokens(); track $index) {\n    @if (tok.kind === 'sep') {\n      <span [ptInt]=\"this\" [ptClass]=\"'separator'\" aria-hidden=\"true\">{{ tok.text }}</span>\n    } @else {\n      <span\n        [ngnRovingItem]=\"pg\"\n        role=\"spinbutton\"\n        [attr.aria-label]=\"sectionName(tok.ord)\"\n        [ptInt]=\"this\"\n        [ptClass]=\"tok.placeholder ? 'section-placeholder' : 'section'\"\n        [class]=\"focused() && activeOrd() === tok.ord ? activeSectionClass() : ''\"\n        [attr.aria-valuenow]=\"sectionValueNow(tok.ord)\"\n        [attr.aria-valuemin]=\"sectionMin(tok.ord)\"\n        [attr.aria-valuemax]=\"sectionMax(tok.ord)\"\n        [attr.aria-valuetext]=\"sectionValueText(tok.ord)\"\n        [attr.aria-describedby]=\"sectionDescId(tok.ord)\"\n        >{{ tok.text }}</span\n      >\n    }\n  }\n  @for (seg of segmentDescriptions(); track seg.id) {\n    <span [id]=\"seg.id\" [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ seg.text }}</span>\n  }\n  <span aria-live=\"polite\" [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ liveAnnouncement() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "directive", type: NgnRovingGroup, selector: "[ngnRovingGroup]", inputs: ["orientation", "rovingMode", "rovingWrap"], outputs: ["activeItemChange"], exportAs: ["ngnRovingGroup"] }, { kind: "directive", type: NgnRovingItem, selector: "[ngnRovingItem]", inputs: ["ngnRovingItem"], exportAs: ["ngnRovingItem"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnMaskInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-mask-input', imports: [NgnPt, NgnRovingGroup, NgnRovingItem], providers: [provideSelf(NgnMaskInput)], template: "<div [ptInt]=\"this\" [ptClass]=\"'root'\">\n  <input\n    #proxy\n    #pg=\"ngnRovingGroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'proxy'\"\n    ngnRovingGroup\n    rovingMode=\"activedescendant\"\n    orientation=\"horizontal\"\n    [attr.inputmode]=\"proxyInputMode()\"\n    [attr.aria-roledescription]=\"i18n['maskInput_roleDescription']()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [disabled]=\"disabled()\"\n    [attr.readonly]=\"readonly() || null\"\n    tabindex=\"0\"\n  />\n  @for (tok of tokens(); track $index) {\n    @if (tok.kind === 'sep') {\n      <span [ptInt]=\"this\" [ptClass]=\"'separator'\" aria-hidden=\"true\">{{ tok.text }}</span>\n    } @else {\n      <span\n        [ngnRovingItem]=\"pg\"\n        role=\"spinbutton\"\n        [attr.aria-label]=\"sectionName(tok.ord)\"\n        [ptInt]=\"this\"\n        [ptClass]=\"tok.placeholder ? 'section-placeholder' : 'section'\"\n        [class]=\"focused() && activeOrd() === tok.ord ? activeSectionClass() : ''\"\n        [attr.aria-valuenow]=\"sectionValueNow(tok.ord)\"\n        [attr.aria-valuemin]=\"sectionMin(tok.ord)\"\n        [attr.aria-valuemax]=\"sectionMax(tok.ord)\"\n        [attr.aria-valuetext]=\"sectionValueText(tok.ord)\"\n        [attr.aria-describedby]=\"sectionDescId(tok.ord)\"\n        >{{ tok.text }}</span\n      >\n    }\n  }\n  @for (seg of segmentDescriptions(); track seg.id) {\n    <span [id]=\"seg.id\" [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ seg.text }}</span>\n  }\n  <span aria-live=\"polite\" [ptInt]=\"this\" [ptClass]=\"'sr-only'\">{{ liveAnnouncement() }}</span>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], rovingGroup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnRovingGroup), { isSignal: true }] }], _proxyRef: [{ type: i0.ViewChild, args: ['proxy', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATE_TIME_MASKS, MASKS, NgnMaskInput, getDateOrTimeMask };
+//# sourceMappingURL=ngneers-controls-mask-input.mjs.map