Component Name: intlTelInput¶

Last Updated: 2025-09-29 Source Code: https://bitbucket.org/i2cinc/i2c.salesforce.metadata/src/STAGING/force-app/main/default/lwc/intlTelInput

API Name: c-intlTelInput Type: Form Component Target: Not exposed

Business Purpose¶

International phone number input with country selection dropdown, validation, and formatting. Uses intlTelInput library to provide country flags, dial codes, and phone number validation for 140+ countries. Validates +1 numbers as exactly 10 digits, international numbers as 7-15 digits.

Component Structure¶

Files: intlTelInput.html, intlTelInput.js (202 lines), intlTelInput.js-meta.xml Static Resource: intlTelInput (CSS, JS, utils.js)

JavaScript Controller¶

Properties (API)¶

@api initialCountry - Default: "us"
@api defaultValue - Phone number to pre-populate
@api disabled - Disable input
@api defaultCountryOverride - Force specific country
@api required - Make field required

Public Methods¶

@api validateInput() - Triggers validation
@api isPhoneValid() - Returns boolean valid state
@api setNumber(number) - Sets phone number programmatically
@api revalidatePhone() - Re-runs validation
@api getSelectedCountry() - Returns ISO2 country code
@api setCountry(isoCode) - Changes country dropdown

Event Handlers¶

handleCountryChange() - Country dropdown changed
handleInputChange() - Phone number typed
preventInvalidCharacters(event) - Blocks non-numeric input

Validation Rules¶

+1 numbers: Must be +1 followed by exactly 10 digits
International: Must start with + followed by 7-15 digits
Required: Shows error if field required and empty

Events Dispatched¶

phonechange¶

new CustomEvent('phonechange', {
    detail: { value, valid } // value is E.164 format (e.g. +11234567890)
})

Dependencies¶

Static Resource: intlTelInput (external library)
Loads CSS and JS dynamically via platformResourceLoader

Usage¶

<c-intl-tel-input
    initial-country="us"
    default-value={phoneNumber}
    required={true}
    onphonechange={handlePhoneChange}>
</c-intl-tel-input>

⚠️ Pre-Go-Live Concerns¶

HIGH¶

No unit tests: Zero coverage for complex validation logic
External library dependency: intlTelInput library must be kept updated
140+ countries hardcoded: Lines 37-45 list countries (could use "all" instead)

MEDIUM¶

Validation runs on every keystroke: May impact performance
hasUserInteracted flag: Complex logic to suppress early errors (lines 69-79)
setTimeout(0) hack: Line 58 uses setTimeout to defer initialization

LOW¶

Console.error: Line 84 logs to console
CSS class management: Could be simplified

Maintenance Notes¶

Complexity: Medium-High Key Notes: - Wraps external intlTelInput.js library (v17+) - Phone numbers returned in E.164 format (+CCNNNNNNNNN) - Supports 140+ countries with flags and dial codes - Validation distinguishes +1 (10 digits) vs international (7-15 digits) - hasUserInteracted prevents validation errors before user types - Component loads external CSS/JS from static resources - Used in forms requiring international phone input (myBusinessAccount, registration, etc.)

Browser Compatibility: - Requires modern browser (ES6+) - Mobile: iOS 12+, Android 8+