secure-ui-components 0.2.2 → 0.2.4

package/dist/components/secure-card/secure-card.js

@@ -19,769 +19,4 @@
  *
  * @module secure-card
  * @license MIT
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-// Ordered most-specific first to avoid false positives (e.g. Diners before Visa)
-const CARD_TYPES = Object.freeze([
-    {
-        type: 'amex',
-        pattern: /^3[47]/,
-        format: [4, 6, 5],
-        cvcLength: 4,
-        lengths: [15],
-        label: 'Amex',
-    },
-    {
-        type: 'diners',
-        pattern: /^3(?:0[0-5]|[68])/,
-        format: [4, 6, 4],
-        cvcLength: 3,
-        lengths: [14],
-        label: 'Diners',
-    },
-    {
-        type: 'discover',
-        pattern: /^6(?:011|5[0-9]{2})/,
-        format: [4, 4, 4, 4],
-        cvcLength: 3,
-        lengths: [16],
-        label: 'Discover',
-    },
-    {
-        type: 'jcb',
-        pattern: /^(?:2131|1800|35\d{3})/,
-        format: [4, 4, 4, 4],
-        cvcLength: 3,
-        lengths: [16],
-        label: 'JCB',
-    },
-    {
-        type: 'mastercard',
-        pattern: /^(?:5[1-5]|2[2-7])/,
-        format: [4, 4, 4, 4],
-        cvcLength: 3,
-        lengths: [16],
-        label: 'Mastercard',
-    },
-    {
-        type: 'visa',
-        pattern: /^4/,
-        format: [4, 4, 4, 4],
-        cvcLength: 3,
-        lengths: [13, 16, 19],
-        label: 'Visa',
-    },
-]);
-// ── Utilities ──────────────────────────────────────────────────────────────
-function detectCardType(digits) {
-    if (!digits)
-        return null;
-    return CARD_TYPES.find(ct => ct.pattern.test(digits)) ?? null;
-}
-function formatDigits(digits, format) {
-    let result = '';
-    let pos = 0;
-    for (let i = 0; i < format.length; i++) {
-        const chunk = digits.slice(pos, pos + format[i]);
-        if (!chunk)
-            break;
-        if (i > 0)
-            result += ' ';
-        result += chunk;
-        pos += format[i];
-    }
-    return result;
-}
-function maskCardForDisplay(digits, format) {
-    const totalLen = format.reduce((a, b) => a + b, 0);
-    if (!digits) {
-        return formatDigits('•'.repeat(totalLen), format);
-    }
-    const padded = digits.padEnd(totalLen, '•').slice(0, totalLen);
-    const last4Start = Math.max(0, padded.length - 4);
-    const masked = '•'.repeat(last4Start) + padded.slice(last4Start);
-    return formatDigits(masked, format);
-}
-function luhnValid(digits) {
-    if (!digits || digits.length < 12)
-        return false;
-    let sum = 0;
-    let alternate = false;
-    for (let i = digits.length - 1; i >= 0; i--) {
-        const ch = digits[i];
-        if (!ch)
-            return false;
-        const n0 = parseInt(ch, 10);
-        if (isNaN(n0))
-            return false;
-        let n = n0;
-        if (alternate) {
-            n *= 2;
-            if (n > 9)
-                n -= 9;
-        }
-        sum += n;
-        alternate = !alternate;
-    }
-    return sum % 10 === 0;
-}
-function isExpiryValid(month, year) {
-    const now = new Date();
-    const currentYear = now.getFullYear() % 100;
-    const currentMonth = now.getMonth() + 1;
-    if (year < currentYear)
-        return false;
-    if (year === currentYear && month < currentMonth)
-        return false;
-    return true;
-}
-let instanceCounter = 0;
-// ── Component ──────────────────────────────────────────────────────────────
-export class SecureCard extends SecureBaseComponent {
-    // Shadow DOM input elements
-    #numberInput = null;
-    #expiryInput = null;
-    #cvcInput = null;
-    #nameInput = null;
-    // Card visual elements
-    #cardEl = null;
-    #cardNumberDisplay = null;
-    #cardExpiryDisplay = null;
-    #cardNameDisplay = null;
-    #cardTypeLabel = null;
-    #cardCvcDisplay = null;
-    // Error containers
-    #numberError = null;
-    #expiryError = null;
-    #cvcError = null;
-    #nameError = null;
-    // Light DOM hidden inputs for form participation
-    #hiddenNumber = null;
-    #hiddenExpiry = null;
-    #hiddenName = null;
-    // Sensitive state — cleared on disconnect
-    #cardDigits = '';
-    #cvcDigits = '';
-    #expiryValue = '';
-    #cardholderName = '';
-    #cardTypeConfig = null;
-    #instanceId;
-    constructor() {
-        super();
-        this.#instanceId = `secure-card-${++instanceCounter}`;
-    }
-    static get observedAttributes() {
-        return [...super.observedAttributes, 'name', 'label', 'show-name'];
-    }
-    // ── Render ─────────────────────────────────────────────────────────────────
-    render() {
-        const fragment = document.createDocumentFragment();
-        const disabled = this.hasAttribute('disabled');
-        const showName = this.hasAttribute('show-name');
-        const label = this.getAttribute('label') ?? '';
-        // ── Outer container ─────────────────────────────────────────────────────
-        const container = document.createElement('div');
-        container.className = 'card-container';
-        container.setAttribute('part', 'container');
-        // ── Card visual (aria-hidden — purely decorative) ────────────────────────
-        const scene = document.createElement('div');
-        scene.className = 'card-scene';
-        scene.setAttribute('aria-hidden', 'true');
-        this.#cardEl = document.createElement('div');
-        this.#cardEl.className = 'card';
-        // Front face
-        const front = document.createElement('div');
-        front.className = 'card-face card-front';
-        const topRow = document.createElement('div');
-        topRow.className = 'card-top-row';
-        const chip = document.createElement('div');
-        chip.className = 'card-chip';
-        this.#cardTypeLabel = document.createElement('div');
-        this.#cardTypeLabel.className = 'card-type-label';
-        topRow.appendChild(chip);
-        topRow.appendChild(this.#cardTypeLabel);
-        front.appendChild(topRow);
-        this.#cardNumberDisplay = document.createElement('div');
-        this.#cardNumberDisplay.className = 'card-number-display';
-        this.#cardNumberDisplay.textContent = '•••• •••• •••• ••••';
-        front.appendChild(this.#cardNumberDisplay);
-        const bottomRow = document.createElement('div');
-        bottomRow.className = 'card-bottom-row';
-        const nameSection = document.createElement('div');
-        nameSection.className = 'card-name-section';
-        const nameFieldLabel = document.createElement('div');
-        nameFieldLabel.className = 'card-field-label';
-        nameFieldLabel.textContent = 'Card holder';
-        this.#cardNameDisplay = document.createElement('div');
-        this.#cardNameDisplay.className = 'card-name-display';
-        this.#cardNameDisplay.textContent = 'FULL NAME';
-        nameSection.appendChild(nameFieldLabel);
-        nameSection.appendChild(this.#cardNameDisplay);
-        const expirySection = document.createElement('div');
-        expirySection.className = 'card-expiry-section';
-        const expiryFieldLabel = document.createElement('div');
-        expiryFieldLabel.className = 'card-field-label';
-        expiryFieldLabel.textContent = 'Expires';
-        this.#cardExpiryDisplay = document.createElement('div');
-        this.#cardExpiryDisplay.className = 'card-expiry-display';
-        this.#cardExpiryDisplay.textContent = 'MM/YY';
-        expirySection.appendChild(expiryFieldLabel);
-        expirySection.appendChild(this.#cardExpiryDisplay);
-        bottomRow.appendChild(nameSection);
-        bottomRow.appendChild(expirySection);
-        front.appendChild(bottomRow);
-        // Back face
-        const back = document.createElement('div');
-        back.className = 'card-face card-back';
-        const strip = document.createElement('div');
-        strip.className = 'card-strip';
-        const cvcArea = document.createElement('div');
-        cvcArea.className = 'card-cvc-area';
-        const cvcAreaLabel = document.createElement('div');
-        cvcAreaLabel.className = 'card-cvc-label';
-        cvcAreaLabel.textContent = 'CVC';
-        this.#cardCvcDisplay = document.createElement('div');
-        this.#cardCvcDisplay.className = 'card-cvc-display';
-        this.#cardCvcDisplay.textContent = '•••';
-        cvcArea.appendChild(cvcAreaLabel);
-        cvcArea.appendChild(this.#cardCvcDisplay);
-        back.appendChild(strip);
-        back.appendChild(cvcArea);
-        this.#cardEl.appendChild(front);
-        this.#cardEl.appendChild(back);
-        scene.appendChild(this.#cardEl);
-        // ── Input fields ──────────────────────────────────────────────────────────
-        const fields = document.createElement('div');
-        fields.className = 'card-fields';
-        if (label) {
-            const legend = document.createElement('div');
-            legend.className = 'card-legend';
-            legend.setAttribute('part', 'label');
-            legend.textContent = this.sanitizeValue(label);
-            fields.appendChild(legend);
-        }
-        // Card number
-        const numberGroup = this.#makeFieldGroup(`${this.#instanceId}-number`);
-        const numberLabel = numberGroup.querySelector('label');
-        numberLabel.textContent = 'Card number';
-        this.#numberInput = document.createElement('input');
-        this.#numberInput.id = `${this.#instanceId}-number`;
-        this.#numberInput.className = 'card-input card-number-input';
-        this.#numberInput.setAttribute('type', 'text');
-        this.#numberInput.setAttribute('inputmode', 'numeric');
-        this.#numberInput.setAttribute('autocomplete', 'cc-number');
-        this.#numberInput.setAttribute('placeholder', '0000 0000 0000 0000');
-        this.#numberInput.setAttribute('maxlength', '23');
-        this.#numberInput.setAttribute('aria-required', 'true');
-        this.#numberInput.setAttribute('aria-describedby', `${this.#instanceId}-number-error`);
-        this.#numberInput.setAttribute('part', 'number-input');
-        if (disabled)
-            this.#numberInput.disabled = true;
-        this.#numberError = numberGroup.querySelector('.error-container');
-        this.#numberError.id = `${this.#instanceId}-number-error`;
-        numberGroup.querySelector('.input-wrapper').appendChild(this.#numberInput);
-        fields.appendChild(numberGroup);
-        // Expiry + CVC side by side
-        const fieldRow = document.createElement('div');
-        fieldRow.className = 'field-row';
-        const expiryGroup = this.#makeFieldGroup(`${this.#instanceId}-expiry`);
-        expiryGroup.querySelector('label').textContent = 'Expiry date';
-        this.#expiryInput = document.createElement('input');
-        this.#expiryInput.id = `${this.#instanceId}-expiry`;
-        this.#expiryInput.className = 'card-input';
-        this.#expiryInput.setAttribute('type', 'text');
-        this.#expiryInput.setAttribute('inputmode', 'numeric');
-        this.#expiryInput.setAttribute('autocomplete', 'cc-exp');
-        this.#expiryInput.setAttribute('placeholder', 'MM/YY');
-        this.#expiryInput.setAttribute('maxlength', '5');
-        this.#expiryInput.setAttribute('aria-required', 'true');
-        this.#expiryInput.setAttribute('aria-describedby', `${this.#instanceId}-expiry-error`);
-        this.#expiryInput.setAttribute('part', 'expiry-input');
-        if (disabled)
-            this.#expiryInput.disabled = true;
-        this.#expiryError = expiryGroup.querySelector('.error-container');
-        this.#expiryError.id = `${this.#instanceId}-expiry-error`;
-        expiryGroup.querySelector('.input-wrapper').appendChild(this.#expiryInput);
-        const cvcGroup = this.#makeFieldGroup(`${this.#instanceId}-cvc`);
-        cvcGroup.querySelector('label').textContent = 'Security code';
-        this.#cvcInput = document.createElement('input');
-        this.#cvcInput.id = `${this.#instanceId}-cvc`;
-        this.#cvcInput.className = 'card-input cvc-input';
-        // type=password: browser masks natively, avoids screen capture of CVC
-        this.#cvcInput.setAttribute('type', 'password');
-        this.#cvcInput.setAttribute('inputmode', 'numeric');
-        this.#cvcInput.setAttribute('autocomplete', 'cc-csc');
-        this.#cvcInput.setAttribute('placeholder', '•••');
-        this.#cvcInput.setAttribute('maxlength', '4');
-        this.#cvcInput.setAttribute('aria-required', 'true');
-        this.#cvcInput.setAttribute('aria-describedby', `${this.#instanceId}-cvc-error`);
-        this.#cvcInput.setAttribute('part', 'cvc-input');
-        if (disabled)
-            this.#cvcInput.disabled = true;
-        this.#cvcError = cvcGroup.querySelector('.error-container');
-        this.#cvcError.id = `${this.#instanceId}-cvc-error`;
-        cvcGroup.querySelector('.input-wrapper').appendChild(this.#cvcInput);
-        fieldRow.appendChild(expiryGroup);
-        fieldRow.appendChild(cvcGroup);
-        fields.appendChild(fieldRow);
-        // Cardholder name (optional)
-        const nameGroup = this.#makeFieldGroup(`${this.#instanceId}-name`);
-        nameGroup.id = `${this.#instanceId}-name-group`;
-        nameGroup.querySelector('label').textContent = 'Cardholder name';
-        if (!showName)
-            nameGroup.hidden = true;
-        this.#nameInput = document.createElement('input');
-        this.#nameInput.id = `${this.#instanceId}-name`;
-        this.#nameInput.className = 'card-input';
-        this.#nameInput.setAttribute('type', 'text');
-        this.#nameInput.setAttribute('autocomplete', 'cc-name');
-        this.#nameInput.setAttribute('placeholder', 'Name as it appears on card');
-        this.#nameInput.setAttribute('spellcheck', 'false');
-        this.#nameInput.setAttribute('aria-describedby', `${this.#instanceId}-name-error`);
-        this.#nameInput.setAttribute('part', 'name-input');
-        if (disabled)
-            this.#nameInput.disabled = true;
-        this.#nameError = nameGroup.querySelector('.error-container');
-        this.#nameError.id = `${this.#instanceId}-name-error`;
-        nameGroup.querySelector('.input-wrapper').appendChild(this.#nameInput);
-        fields.appendChild(nameGroup);
-        container.appendChild(scene);
-        container.appendChild(fields);
-        // ── Light DOM hidden inputs ───────────────────────────────────────────────
-        this.#createHiddenInputs();
-        // ── Component styles ──────────────────────────────────────────────────────
-        this.addComponentStyles(new URL('./secure-card.css', import.meta.url).href);
-        // ── Event listeners ───────────────────────────────────────────────────────
-        // Telemetry hooks aggregate signals across all card inputs into one
-        // composite behavioral fingerprint for the overall card interaction.
-        this.#numberInput.addEventListener('input', (e) => { this.recordTelemetryInput(e); this.#handleNumberInput(e); });
-        this.#numberInput.addEventListener('focus', () => { this.recordTelemetryFocus(); this.#handleNumberFocus(); });
-        this.#numberInput.addEventListener('blur', () => { this.recordTelemetryBlur(); this.#handleNumberBlur(); });
-        this.#expiryInput.addEventListener('input', (e) => { this.recordTelemetryInput(e); this.#handleExpiryInput(e); });
-        this.#expiryInput.addEventListener('focus', () => { this.recordTelemetryFocus(); this.#flipCard(false); });
-        this.#expiryInput.addEventListener('blur', () => { this.recordTelemetryBlur(); this.#handleExpiryBlur(); });
-        this.#cvcInput.addEventListener('input', (e) => { this.recordTelemetryInput(e); this.#handleCvcInput(e); });
-        this.#cvcInput.addEventListener('focus', () => { this.recordTelemetryFocus(); this.#flipCard(true); });
-        this.#cvcInput.addEventListener('blur', () => { this.recordTelemetryBlur(); this.#handleCvcBlur(); });
-        this.#nameInput.addEventListener('input', (e) => { this.recordTelemetryInput(e); this.#handleNameInput(e); });
-        this.#nameInput.addEventListener('focus', () => { this.recordTelemetryFocus(); this.#flipCard(false); });
-        this.#nameInput.addEventListener('blur', () => { this.recordTelemetryBlur(); this.#handleNameBlur(); });
-        fragment.appendChild(container);
-        return fragment;
-    }
-    // ── Field group builder ────────────────────────────────────────────────────
-    #makeFieldGroup(id) {
-        const group = document.createElement('div');
-        group.className = 'field-group';
-        const lbl = document.createElement('label');
-        lbl.htmlFor = id;
-        lbl.className = 'field-label';
-        const wrapper = document.createElement('div');
-        wrapper.className = 'input-wrapper';
-        wrapper.setAttribute('part', 'wrapper');
-        const err = document.createElement('div');
-        err.className = 'error-container hidden';
-        err.setAttribute('role', 'alert');
-        err.setAttribute('part', 'error');
-        group.appendChild(lbl);
-        group.appendChild(wrapper);
-        group.appendChild(err);
-        return group;
-    }
-    // ── Attribute change handler ───────────────────────────────────────────────
-    handleAttributeChange(name, _oldValue, newValue) {
-        if (!this.shadowRoot)
-            return;
-        switch (name) {
-            case 'disabled': {
-                const d = newValue !== null;
-                if (this.#numberInput)
-                    this.#numberInput.disabled = d;
-                if (this.#expiryInput)
-                    this.#expiryInput.disabled = d;
-                if (this.#cvcInput)
-                    this.#cvcInput.disabled = d;
-                if (this.#nameInput)
-                    this.#nameInput.disabled = d;
-                break;
-            }
-            case 'show-name': {
-                const group = this.shadowRoot.querySelector(`#${this.#instanceId}-name-group`);
-                if (group)
-                    group.hidden = newValue === null;
-                break;
-            }
-        }
-    }
-    // ── Card number handlers ───────────────────────────────────────────────────
-    #handleNumberInput(e) {
-        const input = e.target;
-        const digits = input.value.replace(/\D/g, '');
-        const prevType = this.#cardTypeConfig?.type;
-        this.#cardTypeConfig = detectCardType(digits);
-        const format = this.#cardTypeConfig?.format ?? [4, 4, 4, 4];
-        const maxLen = format.reduce((a, b) => a + b, 0);
-        this.#cardDigits = digits.slice(0, maxLen);
-        input.value = formatDigits(this.#cardDigits, format);
-        // Update CVC length when card type changes
-        if (this.#cardTypeConfig?.type !== prevType) {
-            const maxWithSpaces = maxLen + format.length - 1;
-            input.setAttribute('maxlength', String(maxWithSpaces));
-            const cvcLen = this.#cardTypeConfig?.cvcLength ?? 3;
-            if (this.#cvcInput) {
-                this.#cvcInput.setAttribute('maxlength', String(cvcLen));
-            }
-            this.#updateCardType();
-        }
-        // Update card visual front face
-        if (this.#cardNumberDisplay) {
-            this.#cardNumberDisplay.textContent =
-                input.value || formatDigits('•'.repeat(maxLen), format);
-        }
-        this.#clearError(this.#numberError);
-        this.#syncHiddenInputs();
-        this.#dispatchChangeEvent();
-    }
-    #handleNumberFocus() {
-        // Restore formatted digits on focus (undo blur masking)
-        if (this.#numberInput && this.#cardDigits) {
-            const format = this.#cardTypeConfig?.format ?? [4, 4, 4, 4];
-            const formatted = formatDigits(this.#cardDigits, format);
-            this.#numberInput.value = formatted;
-            if (this.#cardNumberDisplay)
-                this.#cardNumberDisplay.textContent = formatted;
-        }
-        this.#flipCard(false);
-        this.#clearError(this.#numberError);
-    }
-    #handleNumberBlur() {
-        const rl = this.checkRateLimit();
-        if (!rl.allowed) {
-            this.#showError(this.#numberError, `Too many attempts. Try again in ${Math.ceil(rl.retryAfter / 1000)}s.`);
-            return;
-        }
-        if (!this.#cardDigits) {
-            this.#showError(this.#numberError, 'Card number is required');
-            this.#numberInput?.setAttribute('aria-invalid', 'true');
-        }
-        else if (!luhnValid(this.#cardDigits)) {
-            this.#showError(this.#numberError, 'Invalid card number');
-            this.#numberInput?.setAttribute('aria-invalid', 'true');
-        }
-        else {
-            this.#clearError(this.#numberError);
-            this.#numberInput?.removeAttribute('aria-invalid');
-        }
-        // Mask middle digits on blur — last 4 remain visible
-        this.#applyNumberMask();
-        this.audit('card-number-blur', { cardType: this.#cardTypeConfig?.type ?? 'unknown' });
-    }
-    #applyNumberMask() {
-        const format = this.#cardTypeConfig?.format ?? [4, 4, 4, 4];
-        const masked = maskCardForDisplay(this.#cardDigits, format);
-        if (this.#numberInput)
-            this.#numberInput.value = masked;
-        if (this.#cardNumberDisplay)
-            this.#cardNumberDisplay.textContent = masked;
-    }
-    // ── Expiry handlers ───────────────────────────────────────────────────────
-    #handleExpiryInput(e) {
-        const input = e.target;
-        const digits = input.value.replace(/\D/g, '').slice(0, 4);
-        const formatted = digits.length > 2 ? `${digits.slice(0, 2)}/${digits.slice(2)}` : digits;
-        input.value = formatted;
-        this.#expiryValue = formatted;
-        if (this.#cardExpiryDisplay) {
-            this.#cardExpiryDisplay.textContent = formatted || 'MM/YY';
-        }
-        this.#clearError(this.#expiryError);
-        this.#syncHiddenInputs();
-        this.#dispatchChangeEvent();
-    }
-    #handleExpiryBlur() {
-        const parts = this.#expiryValue.split('/');
-        if (!this.#expiryValue) {
-            this.#showError(this.#expiryError, 'Expiry date is required');
-            this.#expiryInput?.setAttribute('aria-invalid', 'true');
-            return;
-        }
-        const mm = parseInt(parts[0] ?? '', 10);
-        const yy = parseInt(parts[1] ?? '', 10);
-        if (isNaN(mm) || isNaN(yy) || mm < 1 || mm > 12 || (parts[1] ?? '').length < 2) {
-            this.#showError(this.#expiryError, 'Enter a valid expiry date (MM/YY)');
-            this.#expiryInput?.setAttribute('aria-invalid', 'true');
-        }
-        else if (!isExpiryValid(mm, yy)) {
-            this.#showError(this.#expiryError, 'This card has expired');
-            this.#expiryInput?.setAttribute('aria-invalid', 'true');
-        }
-        else {
-            this.#clearError(this.#expiryError);
-            this.#expiryInput?.removeAttribute('aria-invalid');
-        }
-        this.audit('card-expiry-blur', {});
-    }
-    // ── CVC handlers ──────────────────────────────────────────────────────────
-    #handleCvcInput(e) {
-        const input = e.target;
-        const digits = input.value.replace(/\D/g, '');
-        const maxLen = this.#cardTypeConfig?.cvcLength ?? 3;
-        this.#cvcDigits = digits.slice(0, maxLen);
-        input.value = this.#cvcDigits;
-        // Card back shows bullet count matching typed length — value never shown
-        if (this.#cardCvcDisplay) {
-            this.#cardCvcDisplay.textContent =
-                this.#cvcDigits.length > 0 ? '•'.repeat(this.#cvcDigits.length) : '•••';
-        }
-        this.#clearError(this.#cvcError);
-        this.#dispatchChangeEvent();
-    }
-    #handleCvcBlur() {
-        const maxLen = this.#cardTypeConfig?.cvcLength ?? 3;
-        if (!this.#cvcDigits) {
-            this.#showError(this.#cvcError, 'Security code is required');
-            this.#cvcInput?.setAttribute('aria-invalid', 'true');
-        }
-        else if (this.#cvcDigits.length < maxLen) {
-            this.#showError(this.#cvcError, `Security code must be ${maxLen} digits`);
-            this.#cvcInput?.setAttribute('aria-invalid', 'true');
-        }
-        else {
-            this.#clearError(this.#cvcError);
-            this.#cvcInput?.removeAttribute('aria-invalid');
-        }
-        this.#flipCard(false);
-        // CVC value is never audited
-        this.audit('card-cvc-blur', {});
-    }
-    // ── Name handlers ─────────────────────────────────────────────────────────
-    #handleNameInput(e) {
-        const input = e.target;
-        // Letters, spaces, hyphens, apostrophes only
-        const sanitized = input.value.replace(/[^a-zA-Z\s\-']/g, '').slice(0, 50);
-        input.value = sanitized;
-        this.#cardholderName = sanitized;
-        if (this.#cardNameDisplay) {
-            this.#cardNameDisplay.textContent = sanitized.toUpperCase() || 'FULL NAME';
-        }
-        this.#clearError(this.#nameError);
-        this.#syncHiddenInputs();
-        this.#dispatchChangeEvent();
-    }
-    #handleNameBlur() {
-        if (!this.hasAttribute('show-name'))
-            return;
-        if (!this.#cardholderName.trim()) {
-            this.#showError(this.#nameError, 'Cardholder name is required');
-            this.#nameInput?.setAttribute('aria-invalid', 'true');
-        }
-        else {
-            this.#clearError(this.#nameError);
-            this.#nameInput?.removeAttribute('aria-invalid');
-        }
-    }
-    // ── Card visual ───────────────────────────────────────────────────────────
-    #flipCard(toBack) {
-        this.#cardEl?.classList.toggle('is-flipped', toBack);
-    }
-    #updateCardType() {
-        if (!this.#cardEl)
-            return;
-        for (const ct of CARD_TYPES) {
-            this.#cardEl.classList.remove(`card--${ct.type}`);
-        }
-        const type = this.#cardTypeConfig?.type;
-        if (type)
-            this.#cardEl.classList.add(`card--${type}`);
-        if (this.#cardTypeLabel) {
-            this.#cardTypeLabel.textContent = this.#cardTypeConfig?.label ?? '';
-        }
-    }
-    // ── Error helpers ─────────────────────────────────────────────────────────
-    #showError(container, message) {
-        if (!container)
-            return;
-        container.textContent = '';
-        const span = document.createElement('span');
-        span.textContent = message;
-        container.appendChild(span);
-        container.classList.remove('hidden');
-    }
-    #clearError(container) {
-        if (!container)
-            return;
-        container.textContent = '';
-        container.classList.add('hidden');
-    }
-    // ── Hidden inputs for light DOM form participation ─────────────────────────
-    #createHiddenInputs() {
-        const fieldName = this.getAttribute('name');
-        if (!fieldName)
-            return;
-        // Card number: stores last4 only — full PAN must never reach your server
-        this.#hiddenNumber = document.createElement('input');
-        this.#hiddenNumber.type = 'hidden';
-        this.#hiddenNumber.name = fieldName;
-        this.appendChild(this.#hiddenNumber);
-        this.#hiddenExpiry = document.createElement('input');
-        this.#hiddenExpiry.type = 'hidden';
-        this.#hiddenExpiry.name = `${fieldName}-expiry`;
-        this.appendChild(this.#hiddenExpiry);
-        this.#hiddenName = document.createElement('input');
-        this.#hiddenName.type = 'hidden';
-        this.#hiddenName.name = `${fieldName}-holder`;
-        this.appendChild(this.#hiddenName);
-        // No hidden input for CVC — never submit CVC to your own server
-    }
-    #syncHiddenInputs() {
-        if (this.#hiddenNumber)
-            this.#hiddenNumber.value = this.#cardDigits.slice(-4);
-        if (this.#hiddenExpiry)
-            this.#hiddenExpiry.value = this.#expiryValue;
-        if (this.#hiddenName)
-            this.#hiddenName.value = this.#cardholderName;
-    }
-    // ── Event dispatch ────────────────────────────────────────────────────────
-    #dispatchChangeEvent() {
-        const [rawMonth, rawYear] = this.#expiryValue.split('/');
-        this.dispatchEvent(new CustomEvent('secure-card', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                name: this.getAttribute('name') ?? '',
-                cardType: this.#cardTypeConfig?.type ?? 'unknown',
-                last4: this.#cardDigits.slice(-4),
-                expiryMonth: parseInt(rawMonth ?? '0', 10) || 0,
-                expiryYear: parseInt(rawYear ?? '0', 10) || 0,
-                cardholderName: this.#cardholderName,
-                valid: this.valid,
-                tier: this.securityTier,
-                // Full PAN and CVC are intentionally absent — use getCardData() for SDK calls
-            },
-        }));
-    }
-    // ── Lifecycle ─────────────────────────────────────────────────────────────
-    disconnectedCallback() {
-        // Wipe all sensitive state from memory
-        this.#cardDigits = '';
-        this.#cvcDigits = '';
-        this.#expiryValue = '';
-        this.#cardholderName = '';
-        if (this.#numberInput)
-            this.#numberInput.value = '';
-        if (this.#expiryInput)
-            this.#expiryInput.value = '';
-        if (this.#cvcInput)
-            this.#cvcInput.value = '';
-        if (this.#nameInput)
-            this.#nameInput.value = '';
-        if (this.#hiddenNumber)
-            this.#hiddenNumber.value = '';
-        if (this.#hiddenExpiry)
-            this.#hiddenExpiry.value = '';
-        if (this.#hiddenName)
-            this.#hiddenName.value = '';
-        super.disconnectedCallback();
-    }
-    // ── Public API ────────────────────────────────────────────────────────────
-    /**
-     * True when all visible, required fields pass validation.
-     */
-    get valid() {
-        const numberOk = this.#cardDigits.length >= 12 && luhnValid(this.#cardDigits);
-        const [mm, yy] = this.#expiryValue.split('/');
-        const month = parseInt(mm ?? '', 10);
-        const year = parseInt(yy ?? '', 10);
-        const expiryOk = !isNaN(month) &&
-            !isNaN(year) &&
-            month >= 1 &&
-            month <= 12 &&
-            (yy ?? '').length >= 2 &&
-            isExpiryValid(month, year);
-        const cvcLen = this.#cardTypeConfig?.cvcLength ?? 3;
-        const cvcOk = this.#cvcDigits.length === cvcLen;
-        const nameOk = !this.hasAttribute('show-name') || this.#cardholderName.trim().length > 0;
-        return numberOk && expiryOk && cvcOk && nameOk;
-    }
-    /**
-     * Card type detected from the entered number prefix.
-     */
-    get cardType() {
-        return this.#cardTypeConfig?.type ?? 'unknown';
-    }
-    /**
-     * Last 4 digits of the entered card number. Safe to display and log.
-     */
-    get last4() {
-        return this.#cardDigits.slice(-4);
-    }
-    /**
-     * The name attribute value.
-     */
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    /**
-     * Returns raw card data for immediate handoff to a payment SDK tokeniser.
-     *
-     * SECURITY: Pass this data only to a PCI-compliant processor's client SDK
-     * (e.g. Stripe.js createToken, Braintree tokenizeCard). Never send raw card
-     * numbers or CVCs to your own server.
-     *
-     * Returns null if the form is not yet valid.
-     */
-    getCardData() {
-        if (!this.valid)
-            return null;
-        return {
-            number: this.#cardDigits,
-            expiry: this.#expiryValue,
-            cvc: this.#cvcDigits,
-            name: this.#cardholderName,
-        };
-    }
-    /**
-     * Clears all fields and resets component state.
-     */
-    reset() {
-        this.#cardDigits = '';
-        this.#cvcDigits = '';
-        this.#expiryValue = '';
-        this.#cardholderName = '';
-        this.#cardTypeConfig = null;
-        if (this.#numberInput)
-            this.#numberInput.value = '';
-        if (this.#expiryInput)
-            this.#expiryInput.value = '';
-        if (this.#cvcInput)
-            this.#cvcInput.value = '';
-        if (this.#nameInput)
-            this.#nameInput.value = '';
-        this.#syncHiddenInputs();
-        this.#flipCard(false);
-        this.#updateCardType();
-        const defaultFormat = [4, 4, 4, 4];
-        if (this.#cardNumberDisplay) {
-            this.#cardNumberDisplay.textContent = formatDigits('•'.repeat(16), defaultFormat);
-        }
-        if (this.#cardExpiryDisplay)
-            this.#cardExpiryDisplay.textContent = 'MM/YY';
-        if (this.#cardNameDisplay)
-            this.#cardNameDisplay.textContent = 'FULL NAME';
-        if (this.#cardCvcDisplay)
-            this.#cardCvcDisplay.textContent = '•••';
-        this.#clearError(this.#numberError);
-        this.#clearError(this.#expiryError);
-        this.#clearError(this.#cvcError);
-        this.#clearError(this.#nameError);
-        this.audit('card-reset', {});
-    }
-    /**
-     * Focuses the card number input.
-     */
-    focus() {
-        this.#numberInput?.focus();
-    }
-}
-customElements.define('secure-card', SecureCard);
-//# sourceMappingURL=secure-card.js.map
+ */import{SecureBaseComponent as k}from"../../core/base-component.js";const $=Object.freeze([{type:"amex",pattern:/^3[47]/,format:[4,6,5],cvcLength:4,lengths:[15],label:"Amex"},{type:"diners",pattern:/^3(?:0[0-5]|[68])/,format:[4,6,4],cvcLength:3,lengths:[14],label:"Diners"},{type:"discover",pattern:/^6(?:011|5[0-9]{2})/,format:[4,4,4,4],cvcLength:3,lengths:[16],label:"Discover"},{type:"jcb",pattern:/^(?:2131|1800|35\d{3})/,format:[4,4,4,4],cvcLength:3,lengths:[16],label:"JCB"},{type:"mastercard",pattern:/^(?:5[1-5]|2[2-7])/,format:[4,4,4,4],cvcLength:3,lengths:[16],label:"Mastercard"},{type:"visa",pattern:/^4/,format:[4,4,4,4],cvcLength:3,lengths:[13,16,19],label:"Visa"}]);function M(h){return h?$.find(t=>t.pattern.test(h))??null:null}function o(h,t){let e="",i=0;for(let s=0;s<t.length;s++){const r=h.slice(i,i+t[s]);if(!r)break;s>0&&(e+=" "),e+=r,i+=t[s]}return e}function q(h,t){const e=t.reduce((n,l)=>n+l,0);if(!h)return o("\u2022".repeat(e),t);const i=h.padEnd(e,"\u2022").slice(0,e),s=Math.max(0,i.length-4),r="\u2022".repeat(s)+i.slice(s);return o(r,t)}function S(h){if(!h||h.length<12)return!1;let t=0,e=!1;for(let i=h.length-1;i>=0;i--){const s=h[i];if(!s)return!1;const r=parseInt(s,10);if(isNaN(r))return!1;let n=r;e&&(n*=2,n>9&&(n-=9)),t+=n,e=!e}return t%10===0}function T(h,t){const e=new Date,i=e.getFullYear()%100,s=e.getMonth()+1;return!(t<i||t===i&&h<s)}let D=0;class F extends k{#t=null;#i=null;#e=null;#s=null;#d=null;#l=null;#m=null;#b=null;#L=null;#f=null;#u=null;#v=null;#E=null;#A=null;#y=null;#C=null;#g=null;#a="";#c="";#o="";#x="";#n=null;#r;constructor(){super(),this.#r=`secure-card-${++D}`}static get observedAttributes(){return[...super.observedAttributes,"name","label","show-name"]}render(){const t=document.createDocumentFragment(),e=this.hasAttribute("disabled"),i=this.hasAttribute("show-name"),s=this.getAttribute("label")??"",r=document.createElement("div");r.className="card-container",r.setAttribute("part","container");const n=document.createElement("div");n.className="card-scene",n.setAttribute("aria-hidden","true"),this.#d=document.createElement("div"),this.#d.className="card";const l=document.createElement("div");l.className="card-face card-front";const c=document.createElement("div");c.className="card-top-row";const p=document.createElement("div");p.className="card-chip",this.#L=document.createElement("div"),this.#L.className="card-type-label",c.appendChild(p),c.appendChild(this.#L),l.appendChild(c),this.#l=document.createElement("div"),this.#l.className="card-number-display",this.#l.textContent="\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022",l.appendChild(this.#l);const m=document.createElement("div");m.className="card-bottom-row";const b=document.createElement("div");b.className="card-name-section";const A=document.createElement("div");A.className="card-field-label",A.textContent="Card holder",this.#b=document.createElement("div"),this.#b.className="card-name-display",this.#b.textContent="FULL NAME",b.appendChild(A),b.appendChild(this.#b);const f=document.createElement("div");f.className="card-expiry-section";const N=document.createElement("div");N.className="card-field-label",N.textContent="Expires",this.#m=document.createElement("div"),this.#m.className="card-expiry-display",this.#m.textContent="MM/YY",f.appendChild(N),f.appendChild(this.#m),m.appendChild(b),m.appendChild(f),l.appendChild(m);const v=document.createElement("div");v.className="card-face card-back";const w=document.createElement("div");w.className="card-strip";const y=document.createElement("div");y.className="card-cvc-area";const L=document.createElement("div");L.className="card-cvc-label",L.textContent="CVC",this.#f=document.createElement("div"),this.#f.className="card-cvc-display",this.#f.textContent="\u2022\u2022\u2022",y.appendChild(L),y.appendChild(this.#f),v.appendChild(w),v.appendChild(y),this.#d.appendChild(l),this.#d.appendChild(v),n.appendChild(this.#d);const d=document.createElement("div");if(d.className="card-fields",s){const a=document.createElement("div");a.className="card-legend",a.setAttribute("part","label"),a.textContent=this.sanitizeValue(s),d.appendChild(a)}const C=this.#w(`${this.#r}-number`),I=C.querySelector("label");I.textContent="Card number",this.#t=document.createElement("input"),this.#t.id=`${this.#r}-number`,this.#t.className="card-input card-number-input",this.#t.setAttribute("type","text"),this.#t.setAttribute("inputmode","numeric"),this.#t.setAttribute("autocomplete","cc-number"),this.#t.setAttribute("placeholder","0000 0000 0000 0000"),this.#t.setAttribute("maxlength","23"),this.#t.setAttribute("aria-required","true"),this.#t.setAttribute("aria-describedby",`${this.#r}-number-error`),this.#t.setAttribute("part","number-input"),e&&(this.#t.disabled=!0),this.#u=C.querySelector(".error-container"),this.#u.id=`${this.#r}-number-error`,C.querySelector(".input-wrapper").appendChild(this.#t),d.appendChild(C);const g=document.createElement("div");g.className="field-row";const x=this.#w(`${this.#r}-expiry`);x.querySelector("label").textContent="Expiry date",this.#i=document.createElement("input"),this.#i.id=`${this.#r}-expiry`,this.#i.className="card-input",this.#i.setAttribute("type","text"),this.#i.setAttribute("inputmode","numeric"),this.#i.setAttribute("autocomplete","cc-exp"),this.#i.setAttribute("placeholder","MM/YY"),this.#i.setAttribute("maxlength","5"),this.#i.setAttribute("aria-required","true"),this.#i.setAttribute("aria-describedby",`${this.#r}-expiry-error`),this.#i.setAttribute("part","expiry-input"),e&&(this.#i.disabled=!0),this.#v=x.querySelector(".error-container"),this.#v.id=`${this.#r}-expiry-error`,x.querySelector(".input-wrapper").appendChild(this.#i);const E=this.#w(`${this.#r}-cvc`);E.querySelector("label").textContent="Security code",this.#e=document.createElement("input"),this.#e.id=`${this.#r}-cvc`,this.#e.className="card-input cvc-input",this.#e.setAttribute("type","password"),this.#e.setAttribute("inputmode","numeric"),this.#e.setAttribute("autocomplete","cc-csc"),this.#e.setAttribute("placeholder","\u2022\u2022\u2022"),this.#e.setAttribute("maxlength","4"),this.#e.setAttribute("aria-required","true"),this.#e.setAttribute("aria-describedby",`${this.#r}-cvc-error`),this.#e.setAttribute("part","cvc-input"),e&&(this.#e.disabled=!0),this.#E=E.querySelector(".error-container"),this.#E.id=`${this.#r}-cvc-error`,E.querySelector(".input-wrapper").appendChild(this.#e),g.appendChild(x),g.appendChild(E),d.appendChild(g);const u=this.#w(`${this.#r}-name`);return u.id=`${this.#r}-name-group`,u.querySelector("label").textContent="Cardholder name",i||(u.hidden=!0),this.#s=document.createElement("input"),this.#s.id=`${this.#r}-name`,this.#s.className="card-input",this.#s.setAttribute("type","text"),this.#s.setAttribute("autocomplete","cc-name"),this.#s.setAttribute("placeholder","Name as it appears on card"),this.#s.setAttribute("spellcheck","false"),this.#s.setAttribute("aria-describedby",`${this.#r}-name-error`),this.#s.setAttribute("part","name-input"),e&&(this.#s.disabled=!0),this.#A=u.querySelector(".error-container"),this.#A.id=`${this.#r}-name-error`,u.querySelector(".input-wrapper").appendChild(this.#s),d.appendChild(u),r.appendChild(n),r.appendChild(d),this.#G(),this.addComponentStyles(new URL("./secure-card.css",import.meta.url).href),this.#t.addEventListener("input",a=>{this.recordTelemetryInput(a),this.#I(a)}),this.#t.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.#k()}),this.#t.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#M()}),this.#i.addEventListener("input",a=>{this.recordTelemetryInput(a),this.#D(a)}),this.#i.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.#N(!1)}),this.#i.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#F()}),this.#e.addEventListener("input",a=>{this.recordTelemetryInput(a),this.#Y(a)}),this.#e.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.#N(!0)}),this.#e.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#B()}),this.#s.addEventListener("input",a=>{this.recordTelemetryInput(a),this.#R(a)}),this.#s.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.#N(!1)}),this.#s.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#V()}),t.appendChild(r),t}#w(t){const e=document.createElement("div");e.className="field-group";const i=document.createElement("label");i.htmlFor=t,i.className="field-label";const s=document.createElement("div");s.className="input-wrapper",s.setAttribute("part","wrapper");const r=document.createElement("div");return r.className="error-container hidden",r.setAttribute("role","alert"),r.setAttribute("part","error"),e.appendChild(i),e.appendChild(s),e.appendChild(r),e}handleAttributeChange(t,e,i){if(this.shadowRoot)switch(t){case"disabled":{const s=i!==null;this.#t&&(this.#t.disabled=s),this.#i&&(this.#i.disabled=s),this.#e&&(this.#e.disabled=s),this.#s&&(this.#s.disabled=s);break}case"show-name":{const s=this.shadowRoot.querySelector(`#${this.#r}-name-group`);s&&(s.hidden=i===null);break}}}#I(t){const e=t.target,i=e.value.replace(/\D/g,""),s=this.#n?.type;this.#n=M(i);const r=this.#n?.format??[4,4,4,4],n=r.reduce((l,c)=>l+c,0);if(this.#a=i.slice(0,n),e.value=o(this.#a,r),this.#n?.type!==s){const l=n+r.length-1;e.setAttribute("maxlength",String(l));const c=this.#n?.cvcLength??3;this.#e&&this.#e.setAttribute("maxlength",String(c)),this.#T()}this.#l&&(this.#l.textContent=e.value||o("\u2022".repeat(n),r)),this.#h(this.#u),this.#$(),this.#S()}#k(){if(this.#t&&this.#a){const t=this.#n?.format??[4,4,4,4],e=o(this.#a,t);this.#t.value=e,this.#l&&(this.#l.textContent=e)}this.#N(!1),this.#h(this.#u)}#M(){const t=this.checkRateLimit();if(!t.allowed){this.#p(this.#u,`Too many attempts. Try again in ${Math.ceil(t.retryAfter/1e3)}s.`);return}this.#a?S(this.#a)?(this.#h(this.#u),this.#t?.removeAttribute("aria-invalid")):(this.#p(this.#u,"Invalid card number"),this.#t?.setAttribute("aria-invalid","true")):(this.#p(this.#u,"Card number is required"),this.#t?.setAttribute("aria-invalid","true")),this.#q(),this.audit("card-number-blur",{cardType:this.#n?.type??"unknown"})}#q(){const t=this.#n?.format??[4,4,4,4],e=q(this.#a,t);this.#t&&(this.#t.value=e),this.#l&&(this.#l.textContent=e)}#D(t){const e=t.target,i=e.value.replace(/\D/g,"").slice(0,4),s=i.length>2?`${i.slice(0,2)}/${i.slice(2)}`:i;e.value=s,this.#o=s,this.#m&&(this.#m.textContent=s||"MM/YY"),this.#h(this.#v),this.#$(),this.#S()}#F(){const t=this.#o.split("/");if(!this.#o){this.#p(this.#v,"Expiry date is required"),this.#i?.setAttribute("aria-invalid","true");return}const e=parseInt(t[0]??"",10),i=parseInt(t[1]??"",10);isNaN(e)||isNaN(i)||e<1||e>12||(t[1]??"").length<2?(this.#p(this.#v,"Enter a valid expiry date (MM/YY)"),this.#i?.setAttribute("aria-invalid","true")):T(e,i)?(this.#h(this.#v),this.#i?.removeAttribute("aria-invalid")):(this.#p(this.#v,"This card has expired"),this.#i?.setAttribute("aria-invalid","true")),this.audit("card-expiry-blur",{})}#Y(t){const e=t.target,i=e.value.replace(/\D/g,""),s=this.#n?.cvcLength??3;this.#c=i.slice(0,s),e.value=this.#c,this.#f&&(this.#f.textContent=this.#c.length>0?"\u2022".repeat(this.#c.length):"\u2022\u2022\u2022"),this.#h(this.#E),this.#S()}#B(){const t=this.#n?.cvcLength??3;this.#c?this.#c.length<t?(this.#p(this.#E,`Security code must be ${t} digits`),this.#e?.setAttribute("aria-invalid","true")):(this.#h(this.#E),this.#e?.removeAttribute("aria-invalid")):(this.#p(this.#E,"Security code is required"),this.#e?.setAttribute("aria-invalid","true")),this.#N(!1),this.audit("card-cvc-blur",{})}#R(t){const e=t.target,i=e.value.replace(/[^a-zA-Z\s\-']/g,"").slice(0,50);e.value=i,this.#x=i,this.#b&&(this.#b.textContent=i.toUpperCase()||"FULL NAME"),this.#h(this.#A),this.#$(),this.#S()}#V(){this.hasAttribute("show-name")&&(this.#x.trim()?(this.#h(this.#A),this.#s?.removeAttribute("aria-invalid")):(this.#p(this.#A,"Cardholder name is required"),this.#s?.setAttribute("aria-invalid","true")))}#N(t){this.#d?.classList.toggle("is-flipped",t)}#T(){if(!this.#d)return;for(const e of $)this.#d.classList.remove(`card--${e.type}`);const t=this.#n?.type;t&&this.#d.classList.add(`card--${t}`),this.#L&&(this.#L.textContent=this.#n?.label??"")}#p(t,e){if(!t)return;t.textContent="";const i=document.createElement("span");i.textContent=e,t.appendChild(i),t.classList.remove("hidden")}#h(t){t&&(t.textContent="",t.classList.add("hidden"))}#G(){const t=this.getAttribute("name");t&&(this.#y=document.createElement("input"),this.#y.type="hidden",this.#y.name=t,this.appendChild(this.#y),this.#C=document.createElement("input"),this.#C.type="hidden",this.#C.name=`${t}-expiry`,this.appendChild(this.#C),this.#g=document.createElement("input"),this.#g.type="hidden",this.#g.name=`${t}-holder`,this.appendChild(this.#g))}#$(){this.#y&&(this.#y.value=this.#a.slice(-4)),this.#C&&(this.#C.value=this.#o),this.#g&&(this.#g.value=this.#x)}#S(){const[t,e]=this.#o.split("/");this.dispatchEvent(new CustomEvent("secure-card",{bubbles:!0,composed:!0,detail:{name:this.getAttribute("name")??"",cardType:this.#n?.type??"unknown",last4:this.#a.slice(-4),expiryMonth:parseInt(t??"0",10)||0,expiryYear:parseInt(e??"0",10)||0,cardholderName:this.#x,valid:this.valid,tier:this.securityTier}}))}disconnectedCallback(){this.#a="",this.#c="",this.#o="",this.#x="",this.#t&&(this.#t.value=""),this.#i&&(this.#i.value=""),this.#e&&(this.#e.value=""),this.#s&&(this.#s.value=""),this.#y&&(this.#y.value=""),this.#C&&(this.#C.value=""),this.#g&&(this.#g.value=""),super.disconnectedCallback()}get valid(){const t=this.#a.length>=12&&S(this.#a),[e,i]=this.#o.split("/"),s=parseInt(e??"",10),r=parseInt(i??"",10),n=!isNaN(s)&&!isNaN(r)&&s>=1&&s<=12&&(i??"").length>=2&&T(s,r),l=this.#n?.cvcLength??3,c=this.#c.length===l,p=!this.hasAttribute("show-name")||this.#x.trim().length>0;return t&&n&&c&&p}get cardType(){return this.#n?.type??"unknown"}get last4(){return this.#a.slice(-4)}get name(){return this.getAttribute("name")??""}getCardData(){return this.valid?{number:this.#a,expiry:this.#o,cvc:this.#c,name:this.#x}:null}reset(){this.#a="",this.#c="",this.#o="",this.#x="",this.#n=null,this.#t&&(this.#t.value=""),this.#i&&(this.#i.value=""),this.#e&&(this.#e.value=""),this.#s&&(this.#s.value=""),this.#$(),this.#N(!1),this.#T();const t=[4,4,4,4];this.#l&&(this.#l.textContent=o("\u2022".repeat(16),t)),this.#m&&(this.#m.textContent="MM/YY"),this.#b&&(this.#b.textContent="FULL NAME"),this.#f&&(this.#f.textContent="\u2022\u2022\u2022"),this.#h(this.#u),this.#h(this.#v),this.#h(this.#E),this.#h(this.#A),this.audit("card-reset",{})}focus(){this.#t?.focus()}}customElements.define("secure-card",F);export{F as SecureCard};