@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-pin-input.mjs

@@ -0,0 +1,405 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, output, model, signal, computed, viewChildren, contentChild, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { LucideDot } from '@lucide/angular';
+import { RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
+import { MlvRtlService, clamp } from '@malva-ui/cdk/utils';
+import { MlvSignalFormControlBase, MlvDescription, MlvLabel, MlvHint, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { MlvInput } from '@malva-ui/core/input';
+import { MLV_PIN_INPUT_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+
+/**
+ * Structural directive used to provide a custom template for the separator
+ * rendered between `mlv-pin-input` cells. When no instance is projected, the
+ * component falls back to a default Lucide dot icon.
+ *
+ * @example
+ * ```html
+ * <mlv-pin-input [length]="6" separator="each">
+ *   <ng-template mlvPinInputSeparator>
+ *     <span class="dash">—</span>
+ *   </ng-template>
+ * </mlv-pin-input>
+ * ```
+ */
+class MlvPinInputSeparator {
+    /**
+     * The template reference for the projected separator content.
+     */
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInputSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPinInputSeparator, isStandalone: true, selector: "[mlvPinInputSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInputSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPinInputSeparator]',
+                }]
+        }] });
+
+/**
+ * OTP / PIN input component — a row of single-character `mlv-input` cells that
+ * behave as one logical form control.
+ *
+ * - Auto-advances focus to the next cell after a character is entered.
+ * - Backspace moves focus backwards and clears the cell.
+ * - Arrow keys navigate between cells.
+ * - Pasting a string distributes characters across cells starting from the first cell.
+ * - Integrates with Angular Reactive Forms and Template-Driven Forms via CVA.
+ * - Supports `mlv-label`, `mlv-hint`, and `mlv-message` via the same `label`,
+ *   `hint`, `message`, and `state` inputs as every other Malva UI form control.
+ *
+ * @example Reactive form with label and error message
+ * ```html
+ * <mlv-pin-input
+ *   [length]="6"
+ *   [formControl]="otpControl"
+ *   label="One-time code"
+ *   hint="Sent to +1 ••• 1234"
+ *   [state]="otpControl.invalid && otpControl.touched ? 'error' : 'default'"
+ *   [message]="otpControl.invalid && otpControl.touched ? 'Code is invalid' : ''"
+ * />
+ * ```
+ *
+ * @example Password mode
+ * ```html
+ * <mlv-pin-input type="password" [length]="6" [formControl]="pinControl" />
+ * ```
+ */
+class MlvPinInput extends MlvSignalFormControlBase {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_PIN_INPUT_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /**
+     * Number of cells (characters) in the PIN / OTP.
+     * @default 6
+     */
+    length = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /**
+     * Input type applied to each cell.
+     * Use `'password'` to mask characters; `'number'` for digit-only PIN.
+     * @default 'text'
+     */
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder character shown in each empty cell.
+     * @default '·'
+     */
+    placeholder = input('·', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls separator placement between cells.
+     *
+     * - `''` (default) — no separators
+     * - `'each'` — separator between every pair of consecutive cells
+     * - comma-separated indices (e.g. `'1,3'`) — separator before the cell at
+     *   each listed index. With `length=4` and `'1,3'` the result is
+     *   `[0]—[1][2]—[3]`.
+     *
+     * By default separators render as a Lucide dot icon. Project a custom
+     * template via `*mlvPinInputSeparator` to override.
+     *
+     * @default ''
+     */
+    separator = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the complete value string when all cells are filled.
+     */
+    completed = output();
+    /** The complete PIN/OTP value used by all Angular forms APIs. */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    // ── Internal state ─────────────────────────────────────────────────────────
+    /**
+     * @protected Char values per cell index. Sparse — empty cell = `''`.
+     */
+    _values = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_values" }] : /* istanbul ignore next */ []));
+    /** @private Latest model value written by this component, used to avoid collapsing sparse cells. */
+    _internalModelWrite = null;
+    /** @protected Stable cell indexes derived from {@link length}. */
+    _cellIndices = computed(() => Array.from({ length: this.length() }, (_, index) => index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cellIndices" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Live refs to each rendered `<mlv-input>` cell, order-aligned
+     * with `_cellControls`. Used for programmatic focus / text selection.
+     */
+    _cells = viewChildren(MlvInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cells" }] : /* istanbul ignore next */ []));
+    /** @private Normalizes horizontal cell navigation for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    /**
+     * @protected Optional projected template used as separator content between
+     * cells. When absent the component renders a default Lucide dot icon.
+     */
+    _separatorDef = contentChild(MlvPinInputSeparator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_separatorDef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Custom separator template, derived from `_separatorDef`.
+     */
+    _separatorTemplate = computed(() => this._separatorDef()?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_separatorTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved set of cell indices that should be preceded by a
+     * separator. Derived from the `separator` input and `length`.
+     *
+     * - `''` → empty set
+     * - `'each'` → `{1, 2, …, length - 1}`
+     * - `'1,3'` → `{1, 3}` (values outside `[1, length - 1]` are ignored)
+     */
+    _separatorPositions = computed(() => {
+        const spec = this.separator().trim();
+        if (!spec)
+            return new Set();
+        const len = this.length();
+        if (spec === 'each') {
+            return new Set(Array.from({ length: Math.max(0, len - 1) }, (_, i) => i + 1));
+        }
+        const parsed = spec
+            .split(',')
+            .map((s) => Number.parseInt(s.trim(), 10))
+            .filter((n) => Number.isInteger(n) && n > 0 && n < len);
+        return new Set(parsed);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_separatorPositions" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether a separator should be rendered before the cell at
+     * `index`.
+     */
+    _hasSeparatorBefore(index) {
+        return this._separatorPositions().has(index);
+    }
+    /**
+     * @protected Stable per-cell id. The first cell's id is referenced by the
+     * optional `<mlv-label>`'s `for` attribute so clicking the label focuses
+     * the first cell.
+     */
+    _cellId(index) {
+        return `${this.id()}-cell-${index}`;
+    }
+    /**
+     * @protected Resolves a single cell's aria-label, e.g. "Digit 2 of 6".
+     * @param index 0-based cell index.
+     */
+    _cellLabel(index) {
+        return this._resolver.resolve(this._i18n(), 'digit', { position: index + 1, length: this.length() });
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const value = this.value() ?? '';
+            const len = this.length();
+            if (this._internalModelWrite === value) {
+                this._internalModelWrite = null;
+                return;
+            }
+            const chars = value.split('').slice(0, len);
+            const padded = Array.from({ length: len }, (_, index) => chars[index] ?? '');
+            this._values.set(padded);
+        });
+    }
+    // ── Forms value ────────────────────────────────────────────────────────────
+    /** Whether the control holds a clearable value — At least one cell filled. */
+    hasValue = computed(() => this._values().some((cell) => cell !== ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    // ── Cell event handlers ────────────────────────────────────────────────────
+    /**
+     * @protected Reacts to cell FormControl value changes. Normalises multi-char
+     * input to the last character and auto-advances focus, or distributes a
+     * multi-char string across subsequent cells when triggered by IME / fast typing.
+     */
+    _onCellChange(index, raw) {
+        // When a cell already holds a character and the user types again, the
+        // native input accumulates (e.g. cell was '3', user types '4' → '34').
+        // Strip the previous value prefix so we treat only the new keystroke.
+        let effective = raw;
+        if (effective.length > 1) {
+            const prev = this._values()[index] ?? '';
+            if (prev && effective.startsWith(prev)) {
+                effective = effective.slice(prev.length);
+            }
+        }
+        if (effective.length > 1) {
+            this._distributeChars(effective, index);
+            return;
+        }
+        const char = effective.slice(-1);
+        this._setCell(index, char);
+        if (!char) {
+            this._emit();
+            return;
+        }
+        if (index < this.length() - 1) {
+            this._focusCell(index + 1);
+        }
+        else {
+            // Last cell — no next cell to advance to. Re-select the content so the
+            // next keystroke replaces this character instead of appending.
+            this._cellAt(index)?.select();
+        }
+        this._emit();
+    }
+    /**
+     * @protected Handles cell keyboard input — Backspace, Delete, arrows, Home/End.
+     */
+    _onCellKeydown(index, event) {
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (this._values()[index]) {
+                    this._setCell(index, '');
+                    this._emit();
+                }
+                else {
+                    this._focusCell(index - 1);
+                }
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this._setCell(index, '');
+                this._emit();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusCell(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusCell(this.length() - 1);
+                break;
+        }
+        switch (this._rtlService.normalizeArrowKey(event)) {
+            case LEFT_ARROW:
+                event.preventDefault();
+                this._focusCell(index - 1);
+                break;
+            case RIGHT_ARROW:
+                event.preventDefault();
+                this._focusCell(index + 1);
+                break;
+        }
+    }
+    /**
+     * @protected Pastes a string of characters across cells starting from the
+     * first cell. Whitespace is stripped before distribution.
+     */
+    _onCellPaste(_index, event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        this._distributeChars(text, 0);
+    }
+    /**
+     * @protected Selects the contents of a cell when it receives focus so the
+     * next keystroke replaces the current character.
+     */
+    _onCellFocus(index) {
+        this.setFocused(true);
+        this._cellAt(index)?.select();
+    }
+    /**
+     * @protected Emits the signal-forms touch output when a cell loses focus.
+     */
+    _onCellBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    // ── Private helpers ────────────────────────────────────────────────────────
+    /**
+     * @private Sets a single cell's value, preserving the length of `_values`.
+     */
+    _setCell(index, char) {
+        const updated = [...this._values()];
+        while (updated.length < this.length())
+            updated.push('');
+        updated[index] = char;
+        this._values.set(updated);
+    }
+    /**
+     * @private Distributes a sequence of characters across cells starting from
+     * `startIndex`, advances focus to the next empty cell, and emits.
+     */
+    _distributeChars(text, startIndex) {
+        const chars = text.replace(/\s/g, '').split('');
+        const updated = Array.from({ length: this.length() }, (_, i) => this._values()[i] ?? '');
+        let lastFilled = startIndex;
+        for (let i = 0; i < chars.length && startIndex + i < this.length(); i++) {
+            updated[startIndex + i] = chars[i];
+            lastFilled = startIndex + i;
+        }
+        this._values.set(updated);
+        this._focusCell(lastFilled + 1);
+        this._emit();
+    }
+    /**
+     * @private Focuses the cell at the given index, clamped to `[0, length - 1]`.
+     */
+    _focusCell(index) {
+        const clamped = clamp(index, 0, this.length() - 1);
+        this._cellAt(clamped)?.focus();
+    }
+    /**
+     * @private Returns the `MlvInput` instance rendered for the cell at
+     * the given index, or `null` if the cell is not yet rendered.
+     */
+    _cellAt(index) {
+        return this._cells()[index] ?? null;
+    }
+    /**
+     * @private Pushes the current joined value to the forms model and
+     * emits `completed` when every cell is filled.
+     */
+    _emit() {
+        const values = this._values();
+        const full = values.join('');
+        if (this.value() !== full) {
+            this._internalModelWrite = full;
+            this.value.set(full);
+        }
+        if (values.length === this.length() && values.every((v) => v !== '')) {
+            this.completed.emit(full);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPinInput, isStandalone: true, selector: "mlv-pin-input", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", value: "valueChange" }, host: { properties: { "class": "\"mlv-pin-input--state-\" + resolvedState()", "class.mlv-pin-input--disabled": "computedDisabled()", "class.mlv-pin-input--focused": "focused()", "attr.role": "\"group\"", "attr.aria-label": "label() || _i18n().pinEntry", "attr.aria-disabled": "computedDisabled() || null" }, classAttribute: "mlv-pin-input" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvPinInput),
+            },
+        ], queries: [{ propertyName: "_separatorDef", first: true, predicate: MlvPinInputSeparator, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_cells", predicate: MlvInput, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (label() || hint()) {\n<mlv-label [for]=\"_cellId(0)\" [required]=\"required()\">\n  {{ label() }} @if (hint()) {\n  <mlv-hint>{{ hint() }}</mlv-hint>\n  }\n</mlv-label>\n}\n\n<div class=\"mlv-pin-input__cells\">\n  @for (i of _cellIndices(); track i) { @if (_hasSeparatorBefore(i)) {\n  <span class=\"mlv-pin-input__separator\" aria-hidden=\"true\">\n    @if (_separatorTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <svg lucideDot [size]=\"16\" />\n    }\n  </span>\n  }\n  <mlv-input\n    class=\"mlv-pin-input__cell\"\n    [id]=\"_cellId(i)\"\n    [type]=\"type()\"\n    [state]=\"resolvedState()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_values()[i] ?? ''\"\n    [disabled]=\"computedDisabled()\"\n    [readonly]=\"readonly()\"\n    autocomplete=\"one-time-code\"\n    inputMode=\"numeric\"\n    [ariaLabel]=\"_cellLabel(i)\"\n    [ariaDescribedBy]=\"_describedBy()\"\n    [required]=\"required()\"\n    (valueChange)=\"_onCellChange(i, $event)\"\n    (keydown)=\"_onCellKeydown(i, $event)\"\n    (paste)=\"_onCellPaste(i, $event)\"\n    (inputFocus)=\"_onCellFocus(i)\"\n    (inputBlur)=\"_onCellBlur()\"\n  />\n  }\n</div>\n\n@if (description()) {\n<mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n} @if (message()) {\n<mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n  {{ message() }}\n</mlv-message>\n}\n", styles: ["@layer mlv.components{.mlv-pin-input{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.375rem}.mlv-pin-input__cells{display:inline-flex;align-items:center;gap:.5rem}.mlv-pin-input__separator{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--mlv-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.mlv-pin-input__cell{flex:0 0 auto;width:2.75rem}.mlv-pin-input__cell .mlv-form-control-wrapper__control-container{padding:0}.mlv-pin-input__cell .mlv-input__native{padding:0;text-align:center;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-l);font-weight:var(--mlv-font-weight-semibold);font-variant-numeric:tabular-nums;caret-color:var(--mlv-border-focus)}.mlv-pin-input__cell .mlv-input__native::placeholder{font-weight:var(--mlv-font-weight-normal);color:var(--mlv-text-tertiary)}.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-outer-spin-button,.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.mlv-pin-input__cell .mlv-input__native[type=number]{appearance:textfield}.mlv-pin-input--disabled{pointer-events:none}}\n"], dependencies: [{ kind: "component", type: MlvInput, selector: "mlv-input", inputs: ["type", "placeholder", "autocomplete", "inputMode", "maxLength", "minLength", "pattern", "name", "autofocus", "min", "max", "step", "bare", "projectControl", "role", "ariaExpanded", "ariaHasPopup", "ariaAutocomplete", "ariaControls", "ariaActiveDescendant", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputFocus", "inputBlur"] }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDot, selector: "svg[lucideDot]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPinInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-pin-input', imports: [
+                        MlvInput,
+                        MlvDescription,
+                        MlvLabel,
+                        MlvHint,
+                        MlvMessage,
+                        NgTemplateOutlet,
+                        LucideDot,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvPinInput),
+                        },
+                    ], host: {
+                        class: 'mlv-pin-input',
+                        '[class]': '"mlv-pin-input--state-" + resolvedState()',
+                        '[class.mlv-pin-input--disabled]': 'computedDisabled()',
+                        '[class.mlv-pin-input--focused]': 'focused()',
+                        '[attr.role]': '"group"',
+                        '[attr.aria-label]': 'label() || _i18n().pinEntry',
+                        '[attr.aria-disabled]': 'computedDisabled() || null',
+                    }, template: "@if (label() || hint()) {\n<mlv-label [for]=\"_cellId(0)\" [required]=\"required()\">\n  {{ label() }} @if (hint()) {\n  <mlv-hint>{{ hint() }}</mlv-hint>\n  }\n</mlv-label>\n}\n\n<div class=\"mlv-pin-input__cells\">\n  @for (i of _cellIndices(); track i) { @if (_hasSeparatorBefore(i)) {\n  <span class=\"mlv-pin-input__separator\" aria-hidden=\"true\">\n    @if (_separatorTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <svg lucideDot [size]=\"16\" />\n    }\n  </span>\n  }\n  <mlv-input\n    class=\"mlv-pin-input__cell\"\n    [id]=\"_cellId(i)\"\n    [type]=\"type()\"\n    [state]=\"resolvedState()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_values()[i] ?? ''\"\n    [disabled]=\"computedDisabled()\"\n    [readonly]=\"readonly()\"\n    autocomplete=\"one-time-code\"\n    inputMode=\"numeric\"\n    [ariaLabel]=\"_cellLabel(i)\"\n    [ariaDescribedBy]=\"_describedBy()\"\n    [required]=\"required()\"\n    (valueChange)=\"_onCellChange(i, $event)\"\n    (keydown)=\"_onCellKeydown(i, $event)\"\n    (paste)=\"_onCellPaste(i, $event)\"\n    (inputFocus)=\"_onCellFocus(i)\"\n    (inputBlur)=\"_onCellBlur()\"\n  />\n  }\n</div>\n\n@if (description()) {\n<mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n} @if (message()) {\n<mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n  {{ message() }}\n</mlv-message>\n}\n", styles: ["@layer mlv.components{.mlv-pin-input{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.375rem}.mlv-pin-input__cells{display:inline-flex;align-items:center;gap:.5rem}.mlv-pin-input__separator{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--mlv-text-tertiary);pointer-events:none;-webkit-user-select:none;user-select:none}.mlv-pin-input__cell{flex:0 0 auto;width:2.75rem}.mlv-pin-input__cell .mlv-form-control-wrapper__control-container{padding:0}.mlv-pin-input__cell .mlv-input__native{padding:0;text-align:center;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-l);font-weight:var(--mlv-font-weight-semibold);font-variant-numeric:tabular-nums;caret-color:var(--mlv-border-focus)}.mlv-pin-input__cell .mlv-input__native::placeholder{font-weight:var(--mlv-font-weight-normal);color:var(--mlv-text-tertiary)}.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-outer-spin-button,.mlv-pin-input__cell .mlv-input__native[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.mlv-pin-input__cell .mlv-input__native[type=number]{appearance:textfield}.mlv-pin-input--disabled{pointer-events:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _cells: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvInput), { isSignal: true }] }], _separatorDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPinInputSeparator), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvPinInput, MlvPinInputSeparator };
+//# sourceMappingURL=malva-ui-core-pin-input.mjs.map

package/fesm2022/malva-ui-core-pin-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-pin-input.mjs","sources":["../../../../libs/core/pin-input/src/lib/pin-input/pin-input-separator.ts","../../../../libs/core/pin-input/src/lib/pin-input/pin-input.ts","../../../../libs/core/pin-input/src/lib/pin-input/pin-input.html","../../../../libs/core/pin-input/src/malva-ui-core-pin-input.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Structural directive used to provide a custom template for the separator\n * rendered between `mlv-pin-input` cells. When no instance is projected, the\n * component falls back to a default Lucide dot icon.\n *\n * @example\n * ```html\n * <mlv-pin-input [length]=\"6\" separator=\"each\">\n *   <ng-template mlvPinInputSeparator>\n *     <span class=\"dash\">—</span>\n *   </ng-template>\n * </mlv-pin-input>\n * ```\n */\n@Directive({\n  selector: '[mlvPinInputSeparator]',\n})\nexport class MlvPinInputSeparator {\n  /**\n   * The template reference for the projected separator content.\n   */\n  readonly templateRef = inject(TemplateRef<unknown>);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport type { TemplateRef } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { LucideDot } from '@lucide/angular';\nimport { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';\nimport { MlvRtlService, clamp } from '@malva-ui/cdk/utils';\nimport type { MlvFormControl } from '@malva-ui/core/form-utils';\nimport {\n  MlvHint,\n  MlvDescription,\n  MlvLabel,\n  MLV_FORM_CONTROL,\n  MlvMessage,\n  MlvSignalFormControlBase,\n} from '@malva-ui/core/form-utils';\nimport { MlvInput } from '@malva-ui/core/input';\nimport { MLV_PIN_INPUT_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport { MlvPinInputSeparator } from './pin-input-separator';\n\n/**\n * OTP / PIN input component — a row of single-character `mlv-input` cells that\n * behave as one logical form control.\n *\n * - Auto-advances focus to the next cell after a character is entered.\n * - Backspace moves focus backwards and clears the cell.\n * - Arrow keys navigate between cells.\n * - Pasting a string distributes characters across cells starting from the first cell.\n * - Integrates with Angular Reactive Forms and Template-Driven Forms via CVA.\n * - Supports `mlv-label`, `mlv-hint`, and `mlv-message` via the same `label`,\n *   `hint`, `message`, and `state` inputs as every other Malva UI form control.\n *\n * @example Reactive form with label and error message\n * ```html\n * <mlv-pin-input\n *   [length]=\"6\"\n *   [formControl]=\"otpControl\"\n *   label=\"One-time code\"\n *   hint=\"Sent to +1 ••• 1234\"\n *   [state]=\"otpControl.invalid && otpControl.touched ? 'error' : 'default'\"\n *   [message]=\"otpControl.invalid && otpControl.touched ? 'Code is invalid' : ''\"\n * />\n * ```\n *\n * @example Password mode\n * ```html\n * <mlv-pin-input type=\"password\" [length]=\"6\" [formControl]=\"pinControl\" />\n * ```\n */\n@Component({\n  selector: 'mlv-pin-input',\n  imports: [\n    MlvInput,\n    MlvDescription,\n    MlvLabel,\n    MlvHint,\n    MlvMessage,\n    NgTemplateOutlet,\n    LucideDot,\n  ],\n  templateUrl: './pin-input.html',\n  styleUrl: './pin-input.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvPinInput),\n    },\n  ],\n  host: {\n    class: 'mlv-pin-input',\n    '[class]': '\"mlv-pin-input--state-\" + resolvedState()',\n    '[class.mlv-pin-input--disabled]': 'computedDisabled()',\n    '[class.mlv-pin-input--focused]': 'focused()',\n    '[attr.role]': '\"group\"',\n    '[attr.aria-label]': 'label() || _i18n().pinEntry',\n    '[attr.aria-disabled]': 'computedDisabled() || null',\n  },\n})\nexport class MlvPinInput\n  extends MlvSignalFormControlBase<string>\n  implements MlvFormControl\n{\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_PIN_INPUT_I18N);\n\n  /** @private Resolver for ICU parameterized i18n strings. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /**\n   * Number of cells (characters) in the PIN / OTP.\n   * @default 6\n   */\n  readonly length = input<number>(6);\n\n  /**\n   * Input type applied to each cell.\n   * Use `'password'` to mask characters; `'number'` for digit-only PIN.\n   * @default 'text'\n   */\n  readonly type = input<'text' | 'password' | 'number'>('text');\n\n  /**\n   * Placeholder character shown in each empty cell.\n   * @default '·'\n   */\n  readonly placeholder = input<string>('·');\n\n  /**\n   * Controls separator placement between cells.\n   *\n   * - `''` (default) — no separators\n   * - `'each'` — separator between every pair of consecutive cells\n   * - comma-separated indices (e.g. `'1,3'`) — separator before the cell at\n   *   each listed index. With `length=4` and `'1,3'` the result is\n   *   `[0]—[1][2]—[3]`.\n   *\n   * By default separators render as a Lucide dot icon. Project a custom\n   * template via `*mlvPinInputSeparator` to override.\n   *\n   * @default ''\n   */\n  readonly separator = input<string>('');\n\n  /**\n   * Emits the complete value string when all cells are filled.\n   */\n  readonly completed = output<string>();\n\n  /** The complete PIN/OTP value used by all Angular forms APIs. */\n  readonly value = model<string>('');\n\n  // ── Internal state ─────────────────────────────────────────────────────────\n\n  /**\n   * @protected Char values per cell index. Sparse — empty cell = `''`.\n   */\n  protected readonly _values = signal<string[]>([]);\n\n  /** @private Latest model value written by this component, used to avoid collapsing sparse cells. */\n  private _internalModelWrite: string | null = null;\n\n  /** @protected Stable cell indexes derived from {@link length}. */\n  protected readonly _cellIndices = computed(() =>\n    Array.from({ length: this.length() }, (_, index) => index),\n  );\n\n  /**\n   * @private Live refs to each rendered `<mlv-input>` cell, order-aligned\n   * with `_cellControls`. Used for programmatic focus / text selection.\n   */\n  private readonly _cells = viewChildren(MlvInput);\n\n  /** @private Normalizes horizontal cell navigation for RTL layouts. */\n  private readonly _rtlService = inject(MlvRtlService);\n\n  /**\n   * @protected Optional projected template used as separator content between\n   * cells. When absent the component renders a default Lucide dot icon.\n   */\n  protected readonly _separatorDef = contentChild(MlvPinInputSeparator);\n\n  /**\n   * @protected Custom separator template, derived from `_separatorDef`.\n   */\n  protected readonly _separatorTemplate = computed<TemplateRef<unknown> | null>(\n    () => this._separatorDef()?.templateRef ?? null,\n  );\n\n  /**\n   * @protected Resolved set of cell indices that should be preceded by a\n   * separator. Derived from the `separator` input and `length`.\n   *\n   * - `''` → empty set\n   * - `'each'` → `{1, 2, …, length - 1}`\n   * - `'1,3'` → `{1, 3}` (values outside `[1, length - 1]` are ignored)\n   */\n  protected readonly _separatorPositions = computed<Set<number>>(() => {\n    const spec = this.separator().trim();\n    if (!spec) return new Set();\n\n    const len = this.length();\n    if (spec === 'each') {\n      return new Set(\n        Array.from({ length: Math.max(0, len - 1) }, (_, i) => i + 1),\n      );\n    }\n\n    const parsed = spec\n      .split(',')\n      .map((s) => Number.parseInt(s.trim(), 10))\n      .filter((n) => Number.isInteger(n) && n > 0 && n < len);\n    return new Set(parsed);\n  });\n\n  /**\n   * @protected Whether a separator should be rendered before the cell at\n   * `index`.\n   */\n  protected _hasSeparatorBefore(index: number): boolean {\n    return this._separatorPositions().has(index);\n  }\n\n  /**\n   * @protected Stable per-cell id. The first cell's id is referenced by the\n   * optional `<mlv-label>`'s `for` attribute so clicking the label focuses\n   * the first cell.\n   */\n  protected _cellId(index: number): string {\n    return `${this.id()}-cell-${index}`;\n  }\n\n  /**\n   * @protected Resolves a single cell's aria-label, e.g. \"Digit 2 of 6\".\n   * @param index 0-based cell index.\n   */\n  protected _cellLabel(index: number): string {\n    return this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      'digit',\n      { position: index + 1, length: this.length() },\n    );\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      const value = this.value() ?? '';\n      const len = this.length();\n      if (this._internalModelWrite === value) {\n        this._internalModelWrite = null;\n        return;\n      }\n      const chars = value.split('').slice(0, len);\n      const padded = Array.from(\n        { length: len },\n        (_, index) => chars[index] ?? '',\n      );\n      this._values.set(padded);\n    });\n  }\n\n  // ── Forms value ────────────────────────────────────────────────────────────\n\n  /** Whether the control holds a clearable value — At least one cell filled. */\n  readonly hasValue = computed(() =>\n    this._values().some((cell) => cell !== ''),\n  );\n\n  // ── Cell event handlers ────────────────────────────────────────────────────\n\n  /**\n   * @protected Reacts to cell FormControl value changes. Normalises multi-char\n   * input to the last character and auto-advances focus, or distributes a\n   * multi-char string across subsequent cells when triggered by IME / fast typing.\n   */\n  protected _onCellChange(index: number, raw: string): void {\n    // When a cell already holds a character and the user types again, the\n    // native input accumulates (e.g. cell was '3', user types '4' → '34').\n    // Strip the previous value prefix so we treat only the new keystroke.\n    let effective = raw;\n    if (effective.length > 1) {\n      const prev = this._values()[index] ?? '';\n      if (prev && effective.startsWith(prev)) {\n        effective = effective.slice(prev.length);\n      }\n    }\n\n    if (effective.length > 1) {\n      this._distributeChars(effective, index);\n      return;\n    }\n\n    const char = effective.slice(-1);\n    this._setCell(index, char);\n\n    if (!char) {\n      this._emit();\n      return;\n    }\n\n    if (index < this.length() - 1) {\n      this._focusCell(index + 1);\n    } else {\n      // Last cell — no next cell to advance to. Re-select the content so the\n      // next keystroke replaces this character instead of appending.\n      this._cellAt(index)?.select();\n    }\n    this._emit();\n  }\n\n  /**\n   * @protected Handles cell keyboard input — Backspace, Delete, arrows, Home/End.\n   */\n  protected _onCellKeydown(index: number, event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Backspace':\n        event.preventDefault();\n        if (this._values()[index]) {\n          this._setCell(index, '');\n          this._emit();\n        } else {\n          this._focusCell(index - 1);\n        }\n        break;\n\n      case 'Delete':\n        event.preventDefault();\n        this._setCell(index, '');\n        this._emit();\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this._focusCell(0);\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this._focusCell(this.length() - 1);\n        break;\n    }\n\n    switch (this._rtlService.normalizeArrowKey(event)) {\n      case LEFT_ARROW:\n        event.preventDefault();\n        this._focusCell(index - 1);\n        break;\n      case RIGHT_ARROW:\n        event.preventDefault();\n        this._focusCell(index + 1);\n        break;\n    }\n  }\n\n  /**\n   * @protected Pastes a string of characters across cells starting from the\n   * first cell. Whitespace is stripped before distribution.\n   */\n  protected _onCellPaste(_index: number, event: ClipboardEvent): void {\n    event.preventDefault();\n    const text = event.clipboardData?.getData('text/plain') ?? '';\n    this._distributeChars(text, 0);\n  }\n\n  /**\n   * @protected Selects the contents of a cell when it receives focus so the\n   * next keystroke replaces the current character.\n   */\n  protected _onCellFocus(index: number): void {\n    this.setFocused(true);\n    this._cellAt(index)?.select();\n  }\n\n  /**\n   * @protected Emits the signal-forms touch output when a cell loses focus.\n   */\n  protected _onCellBlur(): void {\n    this.setFocused(false);\n    this._markTouched();\n  }\n\n  // ── Private helpers ────────────────────────────────────────────────────────\n\n  /**\n   * @private Sets a single cell's value, preserving the length of `_values`.\n   */\n  private _setCell(index: number, char: string): void {\n    const updated = [...this._values()];\n    while (updated.length < this.length()) updated.push('');\n    updated[index] = char;\n    this._values.set(updated);\n  }\n\n  /**\n   * @private Distributes a sequence of characters across cells starting from\n   * `startIndex`, advances focus to the next empty cell, and emits.\n   */\n  private _distributeChars(text: string, startIndex: number): void {\n    const chars = text.replace(/\\s/g, '').split('');\n    const updated: string[] = Array.from(\n      { length: this.length() },\n      (_, i) => this._values()[i] ?? '',\n    );\n\n    let lastFilled = startIndex;\n    for (let i = 0; i < chars.length && startIndex + i < this.length(); i++) {\n      updated[startIndex + i] = chars[i];\n      lastFilled = startIndex + i;\n    }\n\n    this._values.set(updated);\n    this._focusCell(lastFilled + 1);\n    this._emit();\n  }\n\n  /**\n   * @private Focuses the cell at the given index, clamped to `[0, length - 1]`.\n   */\n  private _focusCell(index: number): void {\n    const clamped = clamp(index, 0, this.length() - 1);\n    this._cellAt(clamped)?.focus();\n  }\n\n  /**\n   * @private Returns the `MlvInput` instance rendered for the cell at\n   * the given index, or `null` if the cell is not yet rendered.\n   */\n  private _cellAt(index: number): MlvInput | null {\n    return this._cells()[index] ?? null;\n  }\n\n  /**\n   * @private Pushes the current joined value to the forms model and\n   * emits `completed` when every cell is filled.\n   */\n  private _emit(): void {\n    const values = this._values();\n    const full = values.join('');\n    if (this.value() !== full) {\n      this._internalModelWrite = full;\n      this.value.set(full);\n    }\n\n    if (values.length === this.length() && values.every((v) => v !== '')) {\n      this.completed.emit(full);\n    }\n  }\n}\n","@if (label() || hint()) {\n<mlv-label [for]=\"_cellId(0)\" [required]=\"required()\">\n  {{ label() }} @if (hint()) {\n  <mlv-hint>{{ hint() }}</mlv-hint>\n  }\n</mlv-label>\n}\n\n<div class=\"mlv-pin-input__cells\">\n  @for (i of _cellIndices(); track i) { @if (_hasSeparatorBefore(i)) {\n  <span class=\"mlv-pin-input__separator\" aria-hidden=\"true\">\n    @if (_separatorTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <svg lucideDot [size]=\"16\" />\n    }\n  </span>\n  }\n  <mlv-input\n    class=\"mlv-pin-input__cell\"\n    [id]=\"_cellId(i)\"\n    [type]=\"type()\"\n    [state]=\"resolvedState()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_values()[i] ?? ''\"\n    [disabled]=\"computedDisabled()\"\n    [readonly]=\"readonly()\"\n    autocomplete=\"one-time-code\"\n    inputMode=\"numeric\"\n    [ariaLabel]=\"_cellLabel(i)\"\n    [ariaDescribedBy]=\"_describedBy()\"\n    [required]=\"required()\"\n    (valueChange)=\"_onCellChange(i, $event)\"\n    (keydown)=\"_onCellKeydown(i, $event)\"\n    (paste)=\"_onCellPaste(i, $event)\"\n    (inputFocus)=\"_onCellFocus(i)\"\n    (inputBlur)=\"_onCellBlur()\"\n  />\n  }\n</div>\n\n@if (description()) {\n<mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n} @if (message()) {\n<mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n  {{ message() }}\n</mlv-message>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}