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

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

@@ -1,437 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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>
-`;