@genesislcap/foundation-ui 14.501.0 → 15.0.0-FUI-2567.2

package/dist/esm/verification-code-input/verification-code-input.js

@@ -0,0 +1,437 @@
+import { __decorate } from "tslib";
+import { attr, DOM, observable } from '@microsoft/fast-element';
+import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
+import { foundationVerificationCodeInputStyles as styles } from './verification-code-input.styles';
+import { foundationVerificationCodeInputTemplate as template } from './verification-code-input.template';
+export const foundationVerificationCodeInputShadowOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+export const defaultVerificationCodeInputConfig = {};
+const NUMERIC_DIGIT_PATTERN = /^\d$/;
+const DEFAULT_DIGITS = 6;
+class _VerificationCodeInput extends FoundationElement {
+}
+/**
+ * Multi-digit verification code input for OTP / 2FA flows.
+ *
+ * Form-associated (FAST `FormAssociated`): host `name` / `required` / `value` participate
+ * in native HTML form validation and submission like {@link TextField}.
+ *
+ * @public
+ * @tagname %%prefix%%-verification-code-input
+ *
+ * @fires change - Fired when any digit changes. Detail: `{ value: string }`.
+ * @fires complete - Fired when all digits are filled. Detail: `{ value: string }`.
+ */
+export class VerificationCodeInput extends FormAssociated(_VerificationCodeInput) {
+    constructor() {
+        super();
+        /** Per-digit values indexed from `0` to `digits - 1`. */
+        this.values = [];
+        this.controlListeners = new Map();
+        /** Skip digit re-sync when `value` is updated from digit entry (`commitValues`). */
+        this.syncingFromDigits = false;
+        /**
+         * Visual treatment applied to each digit field.
+         * @public
+         * @remarks
+         * HTML Attribute: appearance
+         * @defaultValue outline
+         */
+        this.appearance = 'outline';
+        /**
+         * Number of single-character digit fields to render.
+         * @public
+         * @remarks
+         * HTML Attribute: digits
+         * @defaultValue 6
+         */
+        this.digits = DEFAULT_DIGITS;
+        /**
+         * When true, digit fields are non-interactive.
+         * @public
+         * @remarks
+         * HTML Attribute: readonly
+         */
+        this.readOnly = false;
+        /**
+         * When true, digit fields are non-interactive.
+         * @public
+         * @remarks
+         * HTML Attribute: disabled
+         */
+        this.disabled = false;
+        /**
+         * When true, focuses the first digit on connect (and after SPA route commit when hosted that way).
+         * @public
+         * @remarks
+         * HTML Attribute: autofocus
+         */
+        this.autofocus = false;
+        /**
+         * When true, applies the error visual state to each digit field.
+         * @public
+         * @remarks
+         * HTML Attribute: error
+         */
+        this.error = false;
+        this.proxy = document.createElement('input');
+    }
+    get digitsIndexes() {
+        return Array.from({ length: this.digits }, (_, index) => index);
+    }
+    get controlIdPrefix() {
+        return this.id || 'verification-code';
+    }
+    get labelId() {
+        return `${this.controlIdPrefix}-label`;
+    }
+    get hasLabel() {
+        var _a;
+        return !!((_a = this.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length);
+    }
+    getControlId(index) {
+        return `${this.controlIdPrefix}-${index}`;
+    }
+    /** Clears digits, emits `change`, and focuses the first field when connected. */
+    clear() {
+        this.value = '';
+        this.emitChange();
+        if (this.$fastController.isConnected) {
+            this.focusDigit(0);
+        }
+    }
+    focus() {
+        this.focusDigit(0);
+    }
+    /** @internal */
+    valueChanged(previous, next) {
+        const cleaned = this.sanitizeCode(next);
+        if (!this.syncingFromDigits) {
+            this.syncDigitsFromValue(cleaned);
+        }
+        if (String(next !== null && next !== void 0 ? next : '') !== cleaned) {
+            this.value = cleaned;
+            return;
+        }
+        super.valueChanged(previous, cleaned);
+    }
+    /** @internal */
+    validate(anchor) {
+        var _a, _b;
+        if (!(this.proxy instanceof HTMLElement)) {
+            return;
+        }
+        const validationAnchor = (_a = anchor !== null && anchor !== void 0 ? anchor : this.getControlElement(0)) !== null && _a !== void 0 ? _a : undefined;
+        const value = String((_b = this.value) !== null && _b !== void 0 ? _b : '');
+        if (value.length > 0 && !this.isComplete()) {
+            this.setValidity({ patternMismatch: true }, `Please enter a ${this.digits}-digit code.`, validationAnchor);
+            return;
+        }
+        if (this.required && !this.isComplete()) {
+            this.setValidity({ valueMissing: true }, 'Please fill out this field.', validationAnchor);
+            return;
+        }
+        this.setValidity({}, '', validationAnchor);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.proxy.type = 'text';
+        this.proxy.inputMode = 'numeric';
+        DOM.queueUpdate(() => {
+            this.syncFieldValues();
+            this.bindControlListeners();
+            if (this.autofocus && !this.readOnly) {
+                this.focus();
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unbindControlListeners();
+    }
+    digitsChanged() {
+        var _a;
+        this.syncDigitsFromValue(this.sanitizeCode(this.value));
+        const joined = ((_a = this.values) !== null && _a !== void 0 ? _a : []).join('');
+        if (this.value !== joined) {
+            this.value = joined;
+        }
+        else {
+            this.validate();
+        }
+        DOM.queueUpdate(() => {
+            this.syncFieldValues();
+            this.bindControlListeners();
+        });
+    }
+    get digitClassnames() {
+        return [this.error && 'error', (this.disabled || this.readOnly) && 'disabled']
+            .filter(Boolean)
+            .join(' ');
+    }
+    sanitizeCode(raw) {
+        const length = Math.max(1, Number(this.digits) || DEFAULT_DIGITS);
+        return String(raw !== null && raw !== void 0 ? raw : '')
+            .replace(/\D/g, '')
+            .slice(0, length);
+    }
+    bindControlListeners() {
+        this.unbindControlListeners();
+        const inputs = this.rootNode.querySelectorAll('[data-digit-index] input.control');
+        inputs.forEach((input) => {
+            const index = this.getIndexFromInput(input);
+            if (index === null) {
+                return;
+            }
+            const listeners = {
+                paste: (event) => this.onPaste(event, index),
+                keydown: (event) => this.onKeyDown(event, index),
+                input: (event) => this.onInput(event, index),
+            };
+            input.addEventListener('paste', listeners.paste, true);
+            input.addEventListener('keydown', listeners.keydown);
+            input.addEventListener('input', listeners.input);
+            this.controlListeners.set(input, listeners);
+        });
+    }
+    unbindControlListeners() {
+        var _a, _b;
+        (_a = this.controlListeners) === null || _a === void 0 ? void 0 : _a.forEach((listeners, input) => {
+            input.removeEventListener('paste', listeners.paste, true);
+            input.removeEventListener('keydown', listeners.keydown);
+            input.removeEventListener('input', listeners.input);
+        });
+        (_b = this.controlListeners) === null || _b === void 0 ? void 0 : _b.clear();
+    }
+    onKeyDown(event, index) {
+        if (this.readOnly || this.disabled) {
+            return;
+        }
+        if (NUMERIC_DIGIT_PATTERN.test(event.key) &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey) {
+            event.preventDefault();
+            this.updateDigit(index, event.key);
+            this.focusDigit(index + 1);
+            return;
+        }
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                this.handleBackspace(index);
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this.handleDelete(index);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusDigit(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusDigit(index + 1);
+                break;
+            case 'Tab':
+            case 'Home':
+            case 'End':
+                break;
+            default:
+                if (this.isBlockedCharacter(event)) {
+                    event.preventDefault();
+                }
+                break;
+        }
+    }
+    isBlockedCharacter(event) {
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return false;
+        }
+        return event.key.length === 1 && !NUMERIC_DIGIT_PATTERN.test(event.key);
+    }
+    onInput(event, index) {
+        if (this.readOnly || this.disabled) {
+            return;
+        }
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length > 1) {
+            this.applyDigits(digits, index);
+            return;
+        }
+        const digit = digits.slice(-1);
+        if (input.value !== digit) {
+            input.value = digit;
+        }
+        if (digit && this.values[index] !== digit) {
+            this.updateDigit(index, digit);
+            this.focusDigit(index + 1);
+        }
+        else if (!digit && this.values[index]) {
+            this.updateDigit(index, '');
+        }
+    }
+    onPaste(event, index) {
+        var _a, _b;
+        if (this.readOnly || this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        const pasted = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+        if (pasted) {
+            this.applyDigits(pasted, index);
+        }
+    }
+    handleBackspace(index) {
+        if (this.values[index]) {
+            this.updateDigit(index, '');
+            return;
+        }
+        if (index > 0) {
+            this.updateDigit(index - 1, '');
+            this.focusDigit(index - 1);
+        }
+    }
+    handleDelete(index) {
+        if (this.values[index]) {
+            this.updateDigit(index, '');
+        }
+    }
+    getIndexFromInput(input) {
+        var _a;
+        const index = Number((_a = input.closest('[data-digit-index]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-digit-index'));
+        return Number.isNaN(index) ? null : index;
+    }
+    /** Maps a sanitized code string into per-digit `values` and syncs the DOM when connected. */
+    syncDigitsFromValue(cleaned) {
+        var _a, _b;
+        const length = Math.max(1, Number(this.digits) || DEFAULT_DIGITS);
+        const nextValues = Array.from({ length }, (_, index) => { var _a; return (_a = cleaned[index]) !== null && _a !== void 0 ? _a : ''; });
+        const current = (_a = this.values) !== null && _a !== void 0 ? _a : [];
+        if (nextValues.length === current.length &&
+            nextValues.every((digit, index) => digit === current[index])) {
+            return;
+        }
+        this.values = nextValues;
+        if ((_b = this.$fastController) === null || _b === void 0 ? void 0 : _b.isConnected) {
+            this.syncFieldValues();
+        }
+    }
+    updateDigit(index, digit) {
+        if (index < 0 || index >= this.digits) {
+            return;
+        }
+        const nextValues = [...this.values];
+        nextValues[index] = digit;
+        this.values = nextValues;
+        this.syncFieldValue(index);
+        this.commitValues(nextValues);
+    }
+    applyDigits(raw, startIndex) {
+        const digits = raw.replace(/\D/g, '').slice(0, this.digits - startIndex);
+        if (!digits.length) {
+            return;
+        }
+        const nextValues = [...this.values];
+        for (let i = 0; i < digits.length; i += 1) {
+            nextValues[startIndex + i] = digits[i];
+        }
+        this.values = nextValues;
+        this.syncFieldValues();
+        this.commitValues(nextValues);
+        this.focusDigit(this.isComplete() ? this.digits - 1 : startIndex + digits.length);
+    }
+    /** Pushes digit state into the form-associated `value` and emits change / complete. */
+    commitValues(nextValues) {
+        const joined = nextValues.join('');
+        this.syncingFromDigits = true;
+        try {
+            if (this.value !== joined) {
+                this.value = joined;
+            }
+            else {
+                this.validate();
+            }
+        }
+        finally {
+            this.syncingFromDigits = false;
+        }
+        this.emitChange();
+        if (this.isComplete()) {
+            this.$emit('complete', { value: this.value });
+        }
+    }
+    syncFieldValues() {
+        for (let index = 0; index < this.digits; index += 1) {
+            this.syncFieldValue(index);
+        }
+    }
+    syncFieldValue(index) {
+        var _a;
+        const control = this.getControlElement(index);
+        if (control) {
+            control.value = (_a = this.values[index]) !== null && _a !== void 0 ? _a : '';
+        }
+    }
+    focusDigit(index) {
+        var _a;
+        if (index < 0 || index >= this.digits) {
+            return;
+        }
+        (_a = this.getControlElement(index)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    get rootNode() {
+        var _a;
+        return (_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this;
+    }
+    getControlElement(index) {
+        return this.rootNode.querySelector(`[data-digit-index="${index}"] input.control`);
+    }
+    isComplete() {
+        var _a;
+        const values = (_a = this.values) !== null && _a !== void 0 ? _a : [];
+        return (values.length === this.digits && values.every((digit) => NUMERIC_DIGIT_PATTERN.test(digit)));
+    }
+    emitChange() {
+        this.$emit('change', { value: this.value });
+    }
+}
+__decorate([
+    observable
+], VerificationCodeInput.prototype, "values", void 0);
+__decorate([
+    observable
+], VerificationCodeInput.prototype, "defaultSlottedNodes", void 0);
+__decorate([
+    attr
+], VerificationCodeInput.prototype, "id", void 0);
+__decorate([
+    attr
+], VerificationCodeInput.prototype, "appearance", void 0);
+__decorate([
+    attr
+], VerificationCodeInput.prototype, "digits", void 0);
+__decorate([
+    attr({ attribute: 'readonly', mode: 'boolean' })
+], VerificationCodeInput.prototype, "readOnly", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], VerificationCodeInput.prototype, "disabled", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], VerificationCodeInput.prototype, "autofocus", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], VerificationCodeInput.prototype, "error", void 0);
+/**
+ * The Foundation Verification Code Input
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-verification-code-input\>
+ */
+export const foundationVerificationCodeInput = VerificationCodeInput.compose(Object.assign({ baseName: 'verification-code-input', template,
+    styles, shadowOptions: foundationVerificationCodeInputShadowOptions }, defaultVerificationCodeInputConfig));

package/dist/esm/verification-code-input/verification-code-input.styles.js

@@ -0,0 +1,108 @@
+import { activeColorScheme } from '@genesislcap/foundation-utils';
+import { css } from '@microsoft/fast-element';
+import { sharedFieldStyles } from '../_common';
+export const foundationVerificationCodeInputStyles = css `
+  :host {
+    display: block;
+    font-family: var(--body-font);
+    outline: none;
+  }
+
+  .label {
+    display: block;
+    color: var(--neutral-foreground-rest);
+    cursor: pointer;
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+    margin-bottom: 4px;
+  }
+
+  .label-hidden {
+    display: none;
+  }
+
+  :host([readonly]) .label {
+    cursor: var(--disabled-cursor);
+  }
+
+  .container {
+    display: flex;
+    gap: calc(var(--design-unit) * 1px);
+    align-items: center;
+  }
+
+  .digit {
+    display: inline-block;
+    box-sizing: border-box;
+    outline: none;
+    min-width: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+    );
+  }
+
+  .digit .root {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--neutral-foreground-rest);
+    background: var(--neutral-fill-input-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+    height: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+    );
+  }
+
+  .digit .control {
+    appearance: none;
+    font: inherit;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    height: calc(100% - 4px);
+    width: 100%;
+    margin-top: auto;
+    margin-bottom: auto;
+    padding: 0 calc(var(--design-unit) * 2px + 1px);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+    text-align: center;
+    outline: none;
+    color-scheme: ${activeColorScheme};
+  }
+
+  .digit[appearance='filled'] .root {
+    background: var(--neutral-fill-rest);
+  }
+
+  .digit.error .root {
+    border-color: var(--error-fill-rest);
+  }
+
+  .digit.disabled {
+    opacity: var(--disabled-opacity);
+    cursor: var(--disabled-cursor);
+  }
+
+  .digit.disabled .control {
+    cursor: var(--disabled-cursor);
+  }
+
+  .digit:hover:not(.disabled) .root {
+    background: var(--neutral-fill-input-hover);
+    border-color: var(--accent-fill-hover);
+  }
+
+  .digit:focus-within:not(.disabled) .root {
+    border-color: var(--focus-stroke-outer);
+    box-shadow: 0 0 0 calc(var(--focus-stroke-width) * 1px) var(--focus-stroke-outer) inset;
+  }
+
+  .digit[appearance='filled']:hover:not(.disabled) .root {
+    background: var(--neutral-fill-hover);
+  }
+
+  ${sharedFieldStyles}
+`;

package/dist/esm/verification-code-input/verification-code-input.template.js

@@ -0,0 +1,55 @@
+import { html, repeat, slotted } from '@microsoft/fast-element';
+import { whitespaceFilter } from '@microsoft/fast-foundation';
+export const foundationVerificationCodeInputTemplate = html `
+  <label
+    part="label"
+    id="${(x) => x.labelId}"
+    for="${(x) => x.getControlId(0)}"
+    class="${(x) => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label-hidden'}"
+  >
+    <slot
+      ${slotted({
+    property: 'defaultSlottedNodes',
+    filter: whitespaceFilter,
+})}
+    ></slot>
+  </label>
+  <div
+    class="container"
+    role="group"
+    aria-labelledby="${(x) => (x.hasLabel ? x.labelId : void 0)}"
+    aria-label="${(x) => (x.hasLabel ? void 0 : 'Verification code')}"
+  >
+    ${repeat((x) => x.digitsIndexes, html `
+        <div
+          class="digit ${(x, c) => c.parent.digitClassnames}"
+          data-digit-index="${(x) => x}"
+          appearance="${(x, c) => c.parent.appearance}"
+        >
+          <div class="root" part="root">
+            <div class="control-field">
+              <input
+                class="control"
+                part="control"
+                type="text"
+                inputmode="numeric"
+                pattern="[0-9]*"
+                name="${(x, c) => c.parent.getControlId(x)}"
+                id="${(x, c) => c.parent.getControlId(x)}"
+                autocomplete="${(x) => (x === 0 ? 'one-time-code' : 'off')}"
+                data-test-id="${(x, c) => c.parent.getControlId(x)}"
+                title="Only numbers are allowed"
+                maxlength="1"
+                ?autofocus="${(x, c) => c.parent.autofocus && x === 0}"
+                ?readonly="${(x, c) => c.parent.readOnly}"
+                ?disabled="${(x, c) => c.parent.disabled ||
+    c.parent.readOnly}"
+                ?aria-required="${(x, c) => c.parent.required}"
+                ?aria-invalid="${(x, c) => c.parent.error}"
+              />
+            </div>
+          </div>
+        </div>
+      `)}
+  </div>
+`;