@ozura/elements 0.1.0-beta.1

package/dist/frame/element-frame.js

@@ -0,0 +1,731 @@
+(function () {
+    'use strict';
+
+    /**
+     * cardUtils.ts — pure card validation and formatting helpers.
+     *
+     * These functions contain no DOM or browser dependencies and are shared
+     * between the element frame runtime and the test suite.
+     */
+    // ─── Luhn algorithm ──────────────────────────────────────────────────────────
+    /** Returns true when the digit string passes the Luhn checksum. */
+    function luhn(digits) {
+        let sum = 0;
+        let doubled = false;
+        for (let i = digits.length - 1; i >= 0; i--) {
+            let d = parseInt(digits[i], 10);
+            if (doubled) {
+                d *= 2;
+                if (d > 9)
+                    d -= 9;
+            }
+            sum += d;
+            doubled = !doubled;
+        }
+        return sum % 10 === 0;
+    }
+    /** Detects the card brand from the leading digits. Returns 'unknown' for no match. */
+    function detectBrand(num) {
+        if (/^4/.test(num))
+            return 'visa';
+        if (/^5[1-5]|^2[2-7]/.test(num))
+            return 'mastercard';
+        if (/^3[47]/.test(num))
+            return 'amex';
+        if (/^3(?:0[0-5]|[68])/.test(num))
+            return 'dinersclub';
+        if (/^6(?:011|5)/.test(num))
+            return 'discover';
+        if (/^(?:2131|1800|35\d{3})/.test(num))
+            return 'jcb';
+        return 'unknown';
+    }
+    /** Maximum digit length allowed for a given brand. */
+    function getCardMaxLength(brand) {
+        if (brand === 'amex')
+            return 15;
+        if (brand === 'dinersclub')
+            return 14;
+        return 19;
+    }
+    // ─── Formatting ───────────────────────────────────────────────────────────────
+    /**
+     * Formats raw card digits into the display string for the given brand.
+     * Amex: 4-6-5 grouping. All others: groups of 4.
+     */
+    function formatCard(digits, brand) {
+        if (brand === 'amex') {
+            return [digits.slice(0, 4), digits.slice(4, 10), digits.slice(10, 15)]
+                .filter(Boolean)
+                .join(' ');
+        }
+        return digits.replace(/(.{4})(?=.)/g, '$1 ');
+    }
+    /**
+     * Validates a raw 4-digit MMYY string (as stored by the element frame).
+     * Month is clamped to 01–12 at input time, so only past-date and
+     * incomplete checks are needed here.
+     */
+    function validateExpiry(rawMMYY) {
+        const complete = rawMMYY.length === 4;
+        if (!complete)
+            return { complete: false, valid: false };
+        const month = rawMMYY.slice(0, 2);
+        const year = rawMMYY.slice(2, 4);
+        const m = parseInt(month, 10);
+        const y = parseInt(year, 10);
+        if (m < 1 || m > 12) {
+            return { complete: true, valid: false, month, year, error: 'Invalid or expired date' };
+        }
+        const now = new Date();
+        const cy = now.getFullYear() % 100;
+        const cm = now.getMonth() + 1;
+        if (y < cy || (y === cy && m < cm)) {
+            return { complete: true, valid: false, month, year, error: 'Invalid or expired date' };
+        }
+        return { complete: true, valid: true, month, year };
+    }
+
+    /**
+     * elementFrame.ts — runs inside an <iframe> served from Ozura's domain.
+     *
+     * Renders a single card or bank input, manages formatting/validation, and
+     * communicates with the host SDK via postMessage. Raw values NEVER leave this
+     * file except when sent directly to the tokenizer frame (same-origin).
+     */
+    /**
+     * Validates a US ABA routing number using the standard checksum algorithm.
+     * The checksum is: (3*(d1+d4+d7) + 7*(d2+d5+d8) + 1*(d3+d6+d9)) mod 10 === 0
+     */
+    function validateRoutingNumber(routing) {
+        if (!/^\d{9}$/.test(routing))
+            return false;
+        const d = routing.split('').map(Number);
+        const sum = 3 * (d[0] + d[3] + d[6]) + 7 * (d[1] + d[4] + d[7]) + (d[2] + d[5] + d[8]);
+        return sum % 10 === 0;
+    }
+    const ALLOWED_STYLE_PROPERTIES = new Set([
+        // Typography
+        'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant',
+        'fontSmoothing', 'webkitFontSmoothing', 'mozOsxFontSmoothing',
+        'letterSpacing', 'lineHeight', 'textAlign', 'textDecoration', 'textShadow',
+        'textTransform',
+        // Spacing
+        'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+        // Background
+        'backgroundColor', 'opacity',
+        // Border
+        'border', 'borderColor', 'borderWidth', 'borderStyle', 'borderRadius',
+        'borderTop', 'borderRight', 'borderBottom', 'borderLeft',
+        'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor',
+        'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+        'borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle',
+        'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius',
+        // Box shadow & outline
+        'boxShadow', 'outline', 'outlineColor', 'outlineWidth', 'outlineStyle', 'outlineOffset',
+        // Cursor & caret
+        'cursor', 'caretColor',
+        // Sizing
+        'height', 'minHeight', 'maxHeight',
+        // Transition
+        'transition',
+    ]);
+    const BLOCKED_VALUE_PATTERNS = /url\s*\(|expression\s*\(|javascript\s*:|vbscript\s*:|@import|behavior\s*:|binding\s*:|-moz-binding|-webkit-binding|<\s*script|<\s*style|\\[0-9a-fA-F]/i;
+    const MAX_STYLE_VALUE_LENGTH = 200;
+    const MAX_PLACEHOLDER_LENGTH = 100;
+    /** Matches `url('https://...')` or `url(https://...)` with optional `format('woff2')`. */
+    const FONT_SRC_PATTERN = /^url\(\s*['"]?https:\/\/[^\s'")<>]+['"]?\s*\)(\s+format\(\s*['"][a-z0-9]+['"]\s*\))?(,\s*url\(\s*['"]?https:\/\/[^\s'")<>]+['"]?\s*\)(\s+format\(\s*['"][a-z0-9]+['"]\s*\))?)*$/i;
+    const CSS_BREAKOUT = /[{};<>]/;
+    function sanitizeCssString(value, maxLen) {
+        const trimmed = value.slice(0, maxLen);
+        return trimmed.replace(/['"\\]/g, '');
+    }
+    function sanitizeCssToken(value, maxLen = 40) {
+        const trimmed = value.slice(0, maxLen);
+        if (CSS_BREAKOUT.test(trimmed))
+            return '';
+        return trimmed;
+    }
+    // ─── Brand icons ──────────────────────────────────────────────────────────────
+    function getBrandSvg(brand) {
+        switch (brand) {
+            case 'visa':
+                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 24" width="38" height="24"><rect width="38" height="24" rx="3" fill="#1a1f71"/><text x="19" y="17" font-family="Arial,sans-serif" font-size="11" font-weight="800" fill="white" text-anchor="middle" letter-spacing="1.5">VISA</text></svg>`;
+            case 'mastercard':
+                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 24" width="38" height="24"><rect width="38" height="24" rx="3" fill="#252525"/><circle cx="15" cy="12" r="7.5" fill="#eb001b"/><circle cx="23" cy="12" r="7.5" fill="#f79e1b"/><path d="M19 5.9a7.5 7.5 0 0 1 0 12.2A7.5 7.5 0 0 1 19 5.9z" fill="#ff5f00"/></svg>`;
+            case 'amex':
+                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 24" width="38" height="24"><rect width="38" height="24" rx="3" fill="#2557d6"/><text x="19" y="12" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="white" text-anchor="middle" letter-spacing=".4">AMERICAN</text><text x="19" y="20" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="white" text-anchor="middle" letter-spacing=".4">EXPRESS</text></svg>`;
+            case 'discover':
+                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 24" width="38" height="24"><rect width="38" height="24" rx="3" fill="#fff" stroke="#e5e7eb" stroke-width="1"/><ellipse cx="29" cy="12" rx="11" ry="12" fill="#f76f20"/><text x="10" y="16" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="#231f20" text-anchor="middle">DIS</text></svg>`;
+            case 'dinersclub':
+                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 24" width="38" height="24"><rect width="38" height="24" rx="3" fill="#fff" stroke="#e5e7eb" stroke-width="1"/><circle cx="16" cy="12" r="7" fill="none" stroke="#231f20" stroke-width="1.5"/><circle cx="22" cy="12" r="7" fill="none" stroke="#231f20" stroke-width="1.5"/></svg>`;
+            case 'jcb':
+                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 24" width="38" height="24"><rect width="38" height="24" rx="3" fill="#fff" stroke="#e5e7eb" stroke-width="1"/><rect x="6" y="3" width="8" height="18" rx="3" fill="#003087"/><rect x="15" y="3" width="8" height="18" rx="3" fill="#cc0000"/><rect x="24" y="3" width="8" height="18" rx="3" fill="#009f6b"/><text x="10" y="16" font-family="Arial,sans-serif" font-size="8" font-weight="700" fill="white" text-anchor="middle">J</text><text x="19" y="16" font-family="Arial,sans-serif" font-size="8" font-weight="700" fill="white" text-anchor="middle">C</text><text x="28" y="16" font-family="Arial,sans-serif" font-size="8" font-weight="700" fill="white" text-anchor="middle">B</text></svg>`;
+            default:
+                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 24" width="38" height="24"><rect width="38" height="24" rx="3" fill="none" stroke="#d1d5db" stroke-width="1.5" stroke-dasharray="3,2"/><rect x="5" y="8" width="28" height="3" rx="1" fill="#e5e7eb"/><rect x="5" y="14" width="12" height="3" rx="1" fill="#e5e7eb"/></svg>`;
+        }
+    }
+    // ─── Element frame ────────────────────────────────────────────────────────────
+    class ElementFrame {
+        constructor() {
+            this.hostOrigin = '';
+            this.tokenizerName = '';
+            this.frameOrigin = location.origin;
+            this.rawValue = '';
+            this.cardBrand = 'unknown';
+            this.cvvMaxLength = 3;
+            this._composing = false;
+            this.iconEl = null;
+            this.options = {};
+            this.placeholderStyleEl = null;
+            // ─── Font injection ──────────────────────────────────────────────────────
+            this.fontsInjected = false;
+            const p = new URLSearchParams(location.hash.slice(1));
+            this.elementType = p.get('type') || 'cardNumber';
+            this.vaultId = p.get('vaultId') || '';
+            this.frameId = p.get('frameId') || '';
+            const fromUrl = p.get('parentOrigin');
+            if (fromUrl)
+                this.hostOrigin = fromUrl;
+            this.buildDOM();
+            window.addEventListener('message', this.onMessage.bind(this));
+            this.postToParent({ type: 'OZ_FRAME_READY', frameId: this.frameId });
+        }
+        // ─── DOM ─────────────────────────────────────────────────────────────────
+        buildDOM() {
+            document.documentElement.style.cssText = 'height:100%;background:transparent;';
+            document.body.style.cssText = 'margin:0;padding:0;background:transparent;overflow:hidden;height:100%;';
+            this.containerEl = document.createElement('div');
+            this.containerEl.style.cssText = 'width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;';
+            this.inputEl = document.createElement('input');
+            this.inputEl.type = this.getInputType();
+            this.inputEl.autocomplete = this.getAutocomplete();
+            this.inputEl.placeholder = this.getDefaultPlaceholder();
+            this.inputEl.setAttribute('aria-label', this.getAriaLabel());
+            this.inputEl.setAttribute('aria-required', 'true');
+            this.inputEl.setAttribute('aria-invalid', 'false');
+            this.inputEl.setAttribute('aria-describedby', 'oz-error');
+            // Card number gets flex:1 to leave room for the brand icon; others fill full width.
+            const inputWidthStyle = this.elementType === 'cardNumber' ? 'flex:1;min-width:0' : 'width:100%';
+            this.inputEl.style.cssText = [
+                inputWidthStyle,
+                'border:none',
+                'outline:none',
+                'background:transparent',
+                'font-size:16px',
+                'font-family:inherit',
+                'color:#1a1a2e',
+                'padding:12px 14px',
+                'box-sizing:border-box',
+                'line-height:1.5',
+                'cursor:text',
+            ].join(';');
+            this.inputEl.addEventListener('input', this.onInput.bind(this));
+            this.inputEl.addEventListener('compositionstart', () => { this._composing = true; });
+            this.inputEl.addEventListener('compositionend', () => {
+                this._composing = false;
+                this.onInput({ target: this.inputEl });
+            });
+            this.inputEl.addEventListener('focus', this.onFocus.bind(this));
+            this.inputEl.addEventListener('blur', this.onBlur.bind(this));
+            this.inputEl.addEventListener('keydown', this.onKeydown.bind(this));
+            this.containerEl.appendChild(this.inputEl);
+            // Brand icon — only for card number element
+            if (this.elementType === 'cardNumber') {
+                this.iconEl = document.createElement('div');
+                this.iconEl.style.cssText = 'flex-shrink:0;display:flex;align-items:center;padding-right:10px;opacity:0.9;';
+                this.iconEl.innerHTML = getBrandSvg('unknown');
+                this.containerEl.appendChild(this.iconEl);
+            }
+            this.liveRegion = document.createElement('span');
+            this.liveRegion.id = 'oz-error';
+            this.liveRegion.setAttribute('aria-live', 'polite');
+            this.liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';
+            this.containerEl.appendChild(this.liveRegion);
+            document.body.appendChild(this.containerEl);
+        }
+        getInputType() {
+            // CVV and account number use password type to prevent shoulder surfing
+            return (this.elementType === 'cvv' || this.elementType === 'accountNumber') ? 'password' : 'tel';
+        }
+        getAutocomplete() {
+            if (this.elementType === 'cardNumber')
+                return 'cc-number';
+            if (this.elementType === 'cvv')
+                return 'cc-csc';
+            if (this.elementType === 'expirationDate')
+                return 'cc-exp';
+            return 'off';
+        }
+        getDefaultPlaceholder() {
+            if (this.elementType === 'cardNumber')
+                return '1234 5678 9012 3456';
+            if (this.elementType === 'cvv')
+                return 'CVV';
+            if (this.elementType === 'expirationDate')
+                return 'MM / YY';
+            if (this.elementType === 'accountNumber')
+                return 'Account number';
+            if (this.elementType === 'routingNumber')
+                return 'Routing number';
+            return '';
+        }
+        getAriaLabel() {
+            if (this.elementType === 'cardNumber')
+                return 'Card number';
+            if (this.elementType === 'cvv')
+                return 'Security code';
+            if (this.elementType === 'expirationDate')
+                return 'Expiration date';
+            if (this.elementType === 'accountNumber')
+                return 'Bank account number';
+            if (this.elementType === 'routingNumber')
+                return 'Routing number';
+            return 'Input';
+        }
+        // ─── Input handling ───────────────────────────────────────────────────────
+        onInput(e) {
+            var _a;
+            if (this._composing)
+                return;
+            const target = e.target;
+            if (this.elementType === 'cardNumber') {
+                const maxLen = getCardMaxLength(this.cardBrand);
+                const digits = target.value.replace(/\D/g, '').slice(0, maxLen);
+                this.rawValue = digits;
+                this.cardBrand = detectBrand(digits);
+                const formatted = formatCard(digits, this.cardBrand);
+                if (target.value !== formatted) {
+                    // Track how many real digits precede the cursor in the browser-updated
+                    // string, then find where those same digits land in the reformatted
+                    // string. This keeps the cursor on the correct digit even when spaces
+                    // are inserted or removed between groups.
+                    const pos = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+                    const digitsBeforeCursor = target.value.substring(0, pos).replace(/\D/g, '').length;
+                    target.value = formatted;
+                    let newPos = formatted.length;
+                    if (digitsBeforeCursor === 0) {
+                        newPos = 0;
+                    }
+                    else {
+                        let seen = 0;
+                        for (let i = 0; i < formatted.length; i++) {
+                            if (formatted[i] !== ' ') {
+                                seen++;
+                                if (seen === digitsBeforeCursor) {
+                                    newPos = i + 1;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    try {
+                        target.setSelectionRange(newPos, newPos);
+                    }
+                    catch ( /* ignore */_b) { /* ignore */ }
+                }
+                this.updateBrandIcon(this.cardBrand);
+            }
+            else if (this.elementType === 'cvv') {
+                const digits = target.value.replace(/\D/g, '').slice(0, this.cvvMaxLength);
+                this.rawValue = digits;
+                if (target.value !== digits)
+                    target.value = digits;
+            }
+            else if (this.elementType === 'expirationDate') {
+                let digits = target.value.replace(/\D/g, '').slice(0, 4);
+                if (digits.length >= 2) {
+                    const m = parseInt(digits.slice(0, 2), 10);
+                    if (m === 0)
+                        digits = '01' + digits.slice(2);
+                    else if (m > 12)
+                        digits = '12' + digits.slice(2);
+                }
+                this.rawValue = digits;
+                const formatted = digits.length > 2 ? `${digits.slice(0, 2)} / ${digits.slice(2)}` : digits;
+                if (target.value !== formatted)
+                    target.value = formatted;
+            }
+            else if (this.elementType === 'accountNumber') {
+                // Bank account numbers: 4–17 digits, digits only
+                const digits = target.value.replace(/\D/g, '').slice(0, 17);
+                this.rawValue = digits;
+                if (target.value !== digits)
+                    target.value = digits;
+            }
+            else if (this.elementType === 'routingNumber') {
+                // US routing numbers are always exactly 9 digits
+                const digits = target.value.replace(/\D/g, '').slice(0, 9);
+                this.rawValue = digits;
+                if (target.value !== digits)
+                    target.value = digits;
+            }
+            this.emitChange();
+        }
+        onKeydown(e) {
+            if (this.elementType === 'expirationDate' && e.key === 'Backspace') {
+                const input = e.target;
+                if (input.value.endsWith(' / ')) {
+                    e.preventDefault();
+                    const digits = this.rawValue.slice(0, -1);
+                    this.rawValue = digits;
+                    input.value = digits;
+                    this.emitChange();
+                }
+            }
+        }
+        onFocus() {
+            var _a;
+            if ((_a = this.options.style) === null || _a === void 0 ? void 0 : _a.focus)
+                this.applyStyles(this.options.style.focus);
+            this.postToParent({ type: 'OZ_FOCUS', frameId: this.frameId });
+        }
+        onBlur() {
+            var _a, _b, _c, _d;
+            if ((_a = this.options.style) === null || _a === void 0 ? void 0 : _a.base)
+                this.applyStyles(this.options.style.base);
+            const valid = this.isValid();
+            const complete = this.isComplete();
+            const empty = this.rawValue.length === 0;
+            const invalid = !valid && !empty;
+            if (invalid && ((_b = this.options.style) === null || _b === void 0 ? void 0 : _b.invalid)) {
+                this.applyStyles(this.options.style.invalid);
+            }
+            else if (valid && ((_c = this.options.style) === null || _c === void 0 ? void 0 : _c.complete)) {
+                this.applyStyles(this.options.style.complete);
+            }
+            this.inputEl.setAttribute('aria-invalid', String(invalid));
+            if (invalid) {
+                this.liveRegion.textContent = (_d = this.getError()) !== null && _d !== void 0 ? _d : '';
+            }
+            this.postToParent({
+                type: 'OZ_BLUR',
+                frameId: this.frameId,
+                empty,
+                complete,
+                valid,
+                error: this.getError(),
+            });
+        }
+        // ─── Brand icon ───────────────────────────────────────────────────────────
+        updateBrandIcon(brand) {
+            if (this.iconEl) {
+                this.iconEl.innerHTML = getBrandSvg(brand);
+            }
+        }
+        // ─── Validation ───────────────────────────────────────────────────────────
+        isComplete() {
+            if (this.elementType === 'cardNumber') {
+                const max = getCardMaxLength(this.cardBrand);
+                const min = this.cardBrand === 'amex' || this.cardBrand === 'dinersclub' ? max : 13;
+                return this.rawValue.length >= min && this.rawValue.length <= max;
+            }
+            if (this.elementType === 'cvv')
+                return this.rawValue.length === this.cvvMaxLength;
+            if (this.elementType === 'expirationDate')
+                return this.rawValue.length === 4;
+            if (this.elementType === 'accountNumber')
+                return this.rawValue.length >= 4 && this.rawValue.length <= 17;
+            if (this.elementType === 'routingNumber')
+                return this.rawValue.length === 9;
+            return false;
+        }
+        isValid() {
+            if (!this.isComplete())
+                return false;
+            if (this.elementType === 'cardNumber')
+                return luhn(this.rawValue);
+            if (this.elementType === 'cvv')
+                return /^\d{3,4}$/.test(this.rawValue);
+            if (this.elementType === 'expirationDate')
+                return validateExpiry(this.rawValue).valid;
+            if (this.elementType === 'accountNumber')
+                return /^\d{4,17}$/.test(this.rawValue);
+            if (this.elementType === 'routingNumber')
+                return validateRoutingNumber(this.rawValue);
+            return false;
+        }
+        getError() {
+            var _a;
+            if (this.rawValue.length === 0)
+                return undefined;
+            if (this.isValid())
+                return undefined;
+            if (this.elementType === 'cardNumber') {
+                if (!this.isComplete())
+                    return undefined;
+                return 'Invalid card number';
+            }
+            if (this.elementType === 'expirationDate') {
+                if (!this.isComplete())
+                    return undefined;
+                return (_a = validateExpiry(this.rawValue).error) !== null && _a !== void 0 ? _a : 'Invalid or expired date';
+            }
+            if (this.elementType === 'cvv') {
+                if (!this.isComplete())
+                    return undefined;
+                return 'Invalid CVV';
+            }
+            if (this.elementType === 'accountNumber') {
+                if (!this.isComplete())
+                    return undefined;
+                return 'Invalid account number';
+            }
+            if (this.elementType === 'routingNumber') {
+                if (!this.isComplete())
+                    return undefined;
+                return 'Invalid routing number';
+            }
+            return undefined;
+        }
+        emitChange() {
+            const error = this.getError();
+            const isInvalid = error !== undefined;
+            this.inputEl.setAttribute('aria-invalid', String(isInvalid));
+            this.liveRegion.textContent = error !== null && error !== void 0 ? error : '';
+            const payload = {
+                type: 'OZ_CHANGE',
+                frameId: this.frameId,
+                empty: this.rawValue.length === 0,
+                complete: this.isComplete(),
+                valid: this.isValid(),
+                error,
+            };
+            if (this.elementType === 'cardNumber') {
+                payload.cardBrand = this.cardBrand;
+            }
+            if (this.elementType === 'expirationDate' && this.rawValue.length >= 2) {
+                payload.month = this.rawValue.slice(0, 2);
+                payload.year = this.rawValue.slice(2, 4);
+            }
+            this.postToParent(payload);
+        }
+        // ─── postMessage handling ─────────────────────────────────────────────────
+        onMessage(event) {
+            const msg = event.data;
+            if (!msg || msg.__oz !== true || msg.vaultId !== this.vaultId)
+                return;
+            if (!this.hostOrigin) {
+                this.hostOrigin = event.origin;
+            }
+            else if (event.origin !== this.hostOrigin) {
+                return;
+            }
+            switch (msg.type) {
+                case 'OZ_INIT':
+                    this.applyOptions(msg.options);
+                    if (msg.fonts)
+                        this.injectFonts(msg.fonts);
+                    break;
+                case 'OZ_UPDATE':
+                    this.applyOptions(msg.options);
+                    break;
+                case 'OZ_CLEAR':
+                    this.rawValue = '';
+                    this.inputEl.value = '';
+                    this.cardBrand = 'unknown';
+                    if (this.elementType === 'cardNumber')
+                        this.updateBrandIcon('unknown');
+                    this.emitChange();
+                    break;
+                case 'OZ_FOCUS_REQUEST':
+                    this.inputEl.focus();
+                    break;
+                case 'OZ_BLUR_REQUEST':
+                    this.inputEl.blur();
+                    break;
+                case 'OZ_SET_CVV_LENGTH':
+                    if (this.elementType === 'cvv') {
+                        this.cvvMaxLength = msg.length;
+                        if (this.rawValue.length > this.cvvMaxLength) {
+                            this.rawValue = this.rawValue.slice(0, this.cvvMaxLength);
+                            this.inputEl.value = this.rawValue;
+                            this.emitChange();
+                        }
+                    }
+                    break;
+                case 'OZ_SET_TOKENIZER_NAME':
+                    this.tokenizerName = msg.tokenizerName;
+                    break;
+                case 'OZ_BEGIN_COLLECT':
+                    this.sendValueToTokenizer(msg.requestId);
+                    break;
+            }
+        }
+        applyOptions(options) {
+            var _a, _b, _c, _d;
+            if (!options)
+                return;
+            const styleBefore = this.options.style;
+            this.options = Object.assign(Object.assign({}, this.options), options);
+            // Don't clobber existing style with undefined (e.g. partial update like { placeholder: 'new' }).
+            if (options.style === undefined && styleBefore !== undefined) {
+                this.options.style = styleBefore;
+            }
+            if (options.placeholder !== undefined) {
+                const safe = String(options.placeholder).slice(0, MAX_PLACEHOLDER_LENGTH);
+                this.inputEl.placeholder = safe;
+            }
+            if (options.disabled !== undefined)
+                this.inputEl.disabled = options.disabled;
+            if ((_a = options.style) === null || _a === void 0 ? void 0 : _a.base) {
+                this.applyStyles(options.style.base);
+                // Apply same background to container and icon so the whole field (including card logo area) matches
+                const bg = (_b = options.style.base) === null || _b === void 0 ? void 0 : _b.backgroundColor;
+                if (bg !== undefined && bg !== '') {
+                    this.containerEl.style.backgroundColor = bg;
+                    if (this.iconEl)
+                        this.iconEl.style.backgroundColor = bg;
+                }
+                else {
+                    this.containerEl.style.backgroundColor = '';
+                    if (this.iconEl)
+                        this.iconEl.style.backgroundColor = '';
+                }
+            }
+            if ((_c = options.style) === null || _c === void 0 ? void 0 : _c.placeholder)
+                this.applyPlaceholderStyles(options.style.placeholder);
+            // Re-apply focus styles when the input is focused so caret/color updates take effect immediately
+            if (document.activeElement === this.inputEl && ((_d = this.options.style) === null || _d === void 0 ? void 0 : _d.focus)) {
+                this.applyStyles(this.options.style.focus);
+            }
+            this.sendResize();
+        }
+        applyStyles(styles) {
+            Object.entries(styles).forEach(([k, v]) => {
+                if (v === undefined)
+                    return;
+                if (!ALLOWED_STYLE_PROPERTIES.has(k))
+                    return;
+                if (typeof v !== 'string')
+                    return;
+                if (v.length > MAX_STYLE_VALUE_LENGTH)
+                    return;
+                if (BLOCKED_VALUE_PATTERNS.test(v))
+                    return;
+                this.inputEl.style[k] = v;
+                // Chrome password inputs use -webkit-text-fill-color which overrides color
+                if (k === 'color')
+                    this.inputEl.style.setProperty('-webkit-text-fill-color', v);
+            });
+        }
+        applyPlaceholderStyles(styles) {
+            const rules = [];
+            let placeholderColor;
+            Object.entries(styles).forEach(([k, v]) => {
+                if (v === undefined)
+                    return;
+                if (!ALLOWED_STYLE_PROPERTIES.has(k))
+                    return;
+                if (typeof v !== 'string')
+                    return;
+                if (v.length > MAX_STYLE_VALUE_LENGTH)
+                    return;
+                if (BLOCKED_VALUE_PATTERNS.test(v))
+                    return;
+                if (CSS_BREAKOUT.test(v))
+                    return;
+                const cssProp = k.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+                rules.push(`${cssProp}: ${v} !important`);
+                if (k === 'color')
+                    placeholderColor = v;
+            });
+            // So placeholder text is not overridden by input's -webkit-text-fill-color, set it explicitly
+            if (placeholderColor)
+                rules.push(`-webkit-text-fill-color: ${placeholderColor} !important`);
+            if (rules.length === 0)
+                return;
+            this.inputEl.id = ElementFrame.PLACEHOLDER_INPUT_ID;
+            if (this.placeholderStyleEl)
+                this.placeholderStyleEl.remove();
+            this.placeholderStyleEl = document.createElement('style');
+            this.placeholderStyleEl.textContent = `#${ElementFrame.PLACEHOLDER_INPUT_ID}::placeholder { ${rules.join('; ')}; }`;
+            document.head.appendChild(this.placeholderStyleEl);
+        }
+        injectFonts(fonts) {
+            if (this.fontsInjected)
+                return;
+            this.fontsInjected = true;
+            for (const font of fonts) {
+                if ('cssSrc' in font && typeof font.cssSrc === 'string') {
+                    const url = font.cssSrc.trim();
+                    if (!url.startsWith('https://'))
+                        continue;
+                    if (BLOCKED_VALUE_PATTERNS.test(url))
+                        continue;
+                    const link = document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = url;
+                    document.head.appendChild(link);
+                }
+                else if ('family' in font && 'src' in font) {
+                    const family = sanitizeCssString(String(font.family || ''), 100);
+                    const src = String(font.src || '');
+                    if (!family || !src)
+                        continue;
+                    if (!FONT_SRC_PATTERN.test(src))
+                        continue;
+                    const weight = sanitizeCssToken(String(font.weight || '400'));
+                    const style = sanitizeCssToken(String(font.style || 'normal'));
+                    const display = sanitizeCssToken(String(font.display || 'swap'));
+                    const unicodeRange = font.unicodeRange ? `unicode-range: ${sanitizeCssToken(String(font.unicodeRange), 200)};` : '';
+                    const rule = `@font-face { font-family: '${family}'; src: ${src}; font-weight: ${weight}; font-style: ${style}; font-display: ${display}; ${unicodeRange} }`;
+                    const styleEl = document.createElement('style');
+                    styleEl.textContent = rule;
+                    document.head.appendChild(styleEl);
+                }
+            }
+        }
+        // ─── Secure value delivery to tokenizer frame ─────────────────────────────
+        sendValueToTokenizer(requestId) {
+            if (!this.tokenizerName) {
+                console.warn('[OzElement] No tokenizer name set — cannot deliver value.');
+                return;
+            }
+            try {
+                const tokenizerWindow = window.parent[this.tokenizerName];
+                if (!tokenizerWindow)
+                    return;
+                // Security: only send to a same-origin frame.
+                const targetOrigin = tokenizerWindow.location.origin;
+                if (targetOrigin !== this.frameOrigin)
+                    return;
+                const fieldMsg = {
+                    __oz: true,
+                    vaultId: this.vaultId,
+                    type: 'OZ_FIELD_VALUE',
+                    requestId,
+                    fieldType: this.elementType,
+                    value: this.rawValue,
+                };
+                if (this.elementType === 'cardNumber') {
+                    fieldMsg.last4 = this.rawValue.slice(-4);
+                    fieldMsg.brand = this.cardBrand;
+                }
+                else if (this.elementType === 'expirationDate') {
+                    fieldMsg.expMonth = this.rawValue.slice(0, 2);
+                    fieldMsg.expYear = `20${this.rawValue.slice(2, 4)}`;
+                }
+                else if (this.elementType === 'accountNumber') {
+                    fieldMsg.last4 = this.rawValue.slice(-4);
+                }
+                tokenizerWindow.postMessage(fieldMsg, this.frameOrigin);
+            }
+            catch (_a) {
+                // Cross-origin or frame not found — silently refuse
+            }
+        }
+        sendResize() {
+            const height = this.inputEl.offsetHeight || 46;
+            this.postToParent({ type: 'OZ_RESIZE', frameId: this.frameId, height });
+        }
+        postToParent(data) {
+            const msg = Object.assign({ __oz: true, vaultId: this.vaultId }, data);
+            window.parent.postMessage(msg, this.hostOrigin || window.location.origin);
+        }
+    }
+    ElementFrame.PLACEHOLDER_INPUT_ID = 'oz-element-input';
+    new ElementFrame();
+
+})();
+//# sourceMappingURL=element-frame.js.map