ngxsmk-tel-input 1.6.5 → 1.6.6

package/fesm2022/ngxsmk-tel-input.mjs

@@ -0,0 +1,1137 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, inject, PLATFORM_ID, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { parsePhoneNumberFromString, AsYouType, validatePhoneNumberLength } from 'libphonenumber-js';
+import { BehaviorSubject } from 'rxjs';
+
+class NgxsmkTelInputService {
+    constructor() {
+        this.parseCache = new Map();
+        this.validationCache = new Map();
+        this.CACHE_SIZE_LIMIT = 1000;
+    }
+    parse(input, iso2) {
+        const cacheKey = `${input || ''}|${iso2}`;
+        if (this.parseCache.has(cacheKey)) {
+            return this.parseCache.get(cacheKey);
+        }
+        const phone = parsePhoneNumberFromString(input || '', iso2);
+        if (!phone) {
+            const result = { e164: null, national: null, isValid: false };
+            this.setCacheValue(this.parseCache, cacheKey, result);
+            return result;
+        }
+        const isValid = phone.isValid();
+        const result = {
+            e164: isValid ? phone.number : null,
+            national: phone.formatNational(),
+            isValid
+        };
+        this.setCacheValue(this.parseCache, cacheKey, result);
+        return result;
+    }
+    isValid(input, iso2) {
+        const cacheKey = `${input || ''}|${iso2}`;
+        if (this.validationCache.has(cacheKey)) {
+            return this.validationCache.get(cacheKey);
+        }
+        const phone = parsePhoneNumberFromString(input || '', iso2);
+        const result = !!phone && phone.isValid();
+        this.setCacheValue(this.validationCache, cacheKey, result);
+        return result;
+    }
+    setCacheValue(cache, key, value) {
+        if (cache.size >= this.CACHE_SIZE_LIMIT) {
+            const firstKey = cache.keys().next().value;
+            if (firstKey)
+                cache.delete(firstKey);
+        }
+        cache.set(key, value);
+    }
+    clearCache() {
+        this.parseCache.clear();
+        this.validationCache.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NgxsmkTelInputComponent {
+    set telI18n(v) { this.i18n = v; }
+    set telLocalizedCountries(v) { this.localizedCountries = v; }
+    constructor(zone, tel) {
+        this.zone = zone;
+        this.tel = tel;
+        /* Core config */
+        this.initialCountry = 'US';
+        this.preferredCountries = ['US', 'GB'];
+        /** Dropdown shows dial code; input will NEVER show dial code */
+        this.separateDialCode = true;
+        this.allowDropdown = true;
+        /* Display / formatting */
+        /** 'formatted' => national with spaces; 'digits' => digits only */
+        this.nationalDisplay = 'formatted';
+        /** 'typing' (live), 'blur', or 'off' */
+        this.formatWhenValid = 'typing';
+        this.autocomplete = 'tel';
+        this.disabled = false;
+        this.size = 'md';
+        this.variant = 'outline';
+        this.showClear = true;
+        this.autoFocus = false;
+        this.selectOnFocus = false;
+        this.showErrorWhenTouched = true;
+        /* Dropdown plumbing */
+        this.dropdownAttachToBody = true;
+        this.dropdownZIndex = 2000;
+        this.clearAriaLabel = 'Clear phone number';
+        this.dir = 'ltr';
+        /* Placeholders (intl-tel-input) */
+        this.autoPlaceholder = 'off';
+        /* Input behavior */
+        this.digitsOnly = true; // Still insert spaces when formatted
+        this.lockWhenValid = true; // optional UX guard
+        /* Theme */
+        this.theme = 'auto';
+        /* Outputs */
+        this.countryChange = new EventEmitter();
+        this.validityChange = new EventEmitter();
+        this.inputChange = new EventEmitter();
+        /* Internal */
+        this.iti = null;
+        this.onChange = () => { };
+        this.onTouchedCb = () => { };
+        this.lastEmittedValid = false;
+        this.pendingWrite = null;
+        this.touched = false;
+        this.isDestroyed = false;
+        this.eventListeners = [];
+        this.allowDropdownWasTrue = false;
+        this.suppressEvents = false;
+        this.resolvedId = this.inputId || ('tel-' + Math.random().toString(36).slice(2));
+        this.platformId = inject(PLATFORM_ID);
+        this.currentTheme = 'light';
+    }
+    // ---------- Lifecycle ----------
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId) || this.isDestroyed)
+            return;
+        this.detectAndApplyTheme();
+        this.setupDropdownThemeObserver();
+        void this.initAndWire();
+    }
+    async initAndWire() {
+        if (this.isDestroyed)
+            return;
+        await this.initIntlTelInput();
+        this.bindDomListeners();
+        if (this.pendingWrite !== null) {
+            const v = this.pendingWrite;
+            this.pendingWrite = null;
+            this.writeValue(v);
+        }
+        if (this.autoFocus && !this.isDestroyed) {
+            requestAnimationFrame(() => {
+                if (!this.isDestroyed)
+                    this.focus();
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (!isPlatformBrowser(this.platformId) || this.isDestroyed)
+            return;
+        const configChanged = [
+            'initialCountry', 'preferredCountries', 'onlyCountries',
+            'separateDialCode', 'allowDropdown',
+            'i18n', 'localizedCountries', 'dir',
+            'autoPlaceholder', 'utilsScript', 'customPlaceholder'
+        ].some(k => k in changes && !changes[k]?.firstChange);
+        if (configChanged && this.iti && !this.isDestroyed) {
+            this.reinitPlugin();
+            this.validatorChange?.();
+        }
+        // Handle theme changes
+        if ('theme' in changes && !changes['theme']?.firstChange) {
+            this.detectAndApplyTheme();
+        }
+    }
+    ngOnDestroy() {
+        this.isDestroyed = true;
+        this.destroyPlugin();
+        this.cleanupEventListeners();
+    }
+    // ---------- CVA ----------
+    writeValue(val) {
+        if (!this.inputRef || this.isDestroyed)
+            return;
+        if (!this.iti) { // not ready yet
+            this.pendingWrite = val ?? '';
+            return;
+        }
+        this.suppressEvents = true;
+        try {
+            // Let the plugin infer the country from E.164 (if provided).
+            this.iti.setNumber(val || '');
+            const iso2 = this.currentIso2();
+            const parsed = this.tel.parse(val ?? '', iso2);
+            // Visible input: ALWAYS NSN (no dial code, no trunk '0')
+            const nsn = parsed.e164
+                ? this.nsnFromE164(parsed.e164, iso2)
+                : this.stripLeadingZero(this.toNSN(parsed.national ?? (val ?? '')));
+            const display = this.displayValue(nsn, iso2);
+            this.setInputValue(display);
+            // FormControl value: ALWAYS E.164 (or null) - batch zone runs
+            this.zone.run(() => {
+                this.onChange(parsed.e164);
+                this.inputChange.emit({ raw: display, e164: parsed.e164, iso2 });
+            });
+        }
+        finally {
+            this.suppressEvents = false;
+        }
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouchedCb = fn; }
+    setDisabledState(isDisabled) {
+        if (this.isDestroyed)
+            return;
+        this.disabled = isDisabled;
+        // 1) native input
+        if (this.inputRef)
+            this.inputRef.nativeElement.disabled = isDisabled;
+        // 2) toggle dropdown by re-init with allowDropdown=false when disabled
+        if (this.iti) {
+            if (isDisabled && this.allowDropdown) {
+                this.allowDropdownWasTrue = true;
+                this.allowDropdown = false;
+                this.reinitPlugin(); // closes popup & removes handlers
+            }
+            else if (!isDisabled && this.allowDropdownWasTrue) {
+                this.allowDropdown = true;
+                this.allowDropdownWasTrue = false;
+                this.reinitPlugin(); // restore dropdown
+            }
+            else {
+                this.applyDisabledUi(isDisabled);
+            }
+        }
+        else {
+            this.applyDisabledUi(isDisabled);
+        }
+    }
+    // ---------- Validator ----------
+    validate(_) {
+        if (this.isDestroyed)
+            return null;
+        const raw = this.currentRaw();
+        if (!raw)
+            return null;
+        const valid = this.tel.isValid(raw, this.currentIso2());
+        if (valid !== this.lastEmittedValid) {
+            this.lastEmittedValid = valid;
+            this.validityChange.emit(valid);
+        }
+        return valid ? null : { phoneInvalid: true };
+    }
+    registerOnValidatorChange(fn) { this.validatorChange = fn; }
+    // ---------- Public helpers ----------
+    focus() {
+        if (this.isDestroyed || !this.inputRef)
+            return;
+        this.inputRef.nativeElement.focus();
+        if (this.selectOnFocus) {
+            const el = this.inputRef.nativeElement;
+            requestAnimationFrame(() => {
+                if (!this.isDestroyed)
+                    el.setSelectionRange(0, el.value.length);
+            });
+        }
+    }
+    selectCountry(iso2) {
+        if (this.iti && !this.isDestroyed) {
+            this.iti.setCountry(iso2.toLowerCase());
+            this.handleInput();
+        }
+    }
+    clearInput() {
+        if (this.isDestroyed)
+            return;
+        this.setInputValue('');
+        this.handleInput();
+        this.inputRef.nativeElement.focus();
+    }
+    // ---------- intl-tel-input wiring ----------
+    async initIntlTelInput() {
+        if (this.isDestroyed)
+            return;
+        const [{ default: intlTelInput }] = await Promise.all([import('intl-tel-input')]);
+        const toLowerKeys = (m) => {
+            if (!m)
+                return undefined;
+            const out = {};
+            for (const k in m)
+                if (Object.prototype.hasOwnProperty.call(m, k)) {
+                    const v = m[k];
+                    if (v != null)
+                        out[k.toLowerCase()] = v;
+                }
+            return out;
+        };
+        const config = {
+            initialCountry: this.initialCountry === 'auto' ? 'auto' : (this.initialCountry?.toLowerCase() || 'us'),
+            preferredCountries: (this.preferredCountries ?? []).map(c => c.toLowerCase()),
+            onlyCountries: (this.onlyCountries ?? []).map(c => c.toLowerCase()),
+            nationalMode: true, // Control the visible value; prevents '+' in the input
+            allowDropdown: this.allowDropdown,
+            separateDialCode: this.separateDialCode,
+            geoIpLookup: (cb) => cb('us'),
+            autoPlaceholder: this.autoPlaceholder,
+            utilsScript: this.utilsScript,
+            customPlaceholder: this.customPlaceholder,
+            i18n: this.i18n,
+            localizedCountries: toLowerKeys(this.localizedCountries),
+            dropdownContainer: this.dropdownAttachToBody && typeof document !== 'undefined' ? document.body : undefined
+        };
+        this.zone.runOutsideAngular(() => {
+            if (!this.isDestroyed) {
+                this.iti = intlTelInput(this.inputRef.nativeElement, config);
+            }
+        });
+        if (!this.isDestroyed) {
+            this.inputRef.nativeElement.style.setProperty('--tel-dd-z', String(this.dropdownZIndex));
+            this.applyDisabledUi(this.disabled);
+        }
+    }
+    async reinitPlugin() {
+        if (this.isDestroyed)
+            return;
+        const prevIso2 = (this.iti?.getSelectedCountryData?.().iso2 || this.initialCountry || 'US').toString().toLowerCase();
+        const prevValue = this.currentRaw();
+        this.destroyPlugin();
+        await this.initIntlTelInput();
+        this.bindDomListeners();
+        if (!this.isDestroyed) {
+            try {
+                this.iti?.setCountry(prevIso2);
+            }
+            catch { }
+            if (prevValue) {
+                this.setInputValue(prevValue);
+                this.handleInput();
+            }
+            this.applyDisabledUi(this.disabled);
+        }
+    }
+    destroyPlugin() {
+        if (this.iti) {
+            this.iti.destroy();
+            this.iti = null;
+        }
+        // Optimize DOM manipulation - only clone if necessary
+        if (this.inputRef?.nativeElement && this.iti) {
+            const el = this.inputRef.nativeElement;
+            const clone = el.cloneNode(true);
+            // preserve state across clone
+            clone.disabled = this.disabled;
+            clone.id = this.resolvedId;
+            clone.name = this.name ?? clone.name;
+            clone.value = el.value;
+            el.parentNode?.replaceChild(clone, el);
+            this.inputRef.nativeElement = clone;
+        }
+    }
+    // ---------- Input listeners ----------
+    bindDomListeners() {
+        if (this.isDestroyed || !this.inputRef)
+            return;
+        const el = this.inputRef.nativeElement;
+        this.zone.runOutsideAngular(() => {
+            const beforeInputHandler = (ev) => {
+                if (this.isDestroyed || !this.digitsOnly)
+                    return;
+                const data = ev.data;
+                // If already valid, block extra digit insertions when no selection
+                if (this.lockWhenValid && this.isCurrentlyValid()) {
+                    const selCollapsed = (el.selectionStart ?? 0) === (el.selectionEnd ?? 0);
+                    const isDigit = !!data && ev.inputType === 'insertText' && data >= '0' && data <= '9';
+                    if (selCollapsed && isDigit) {
+                        ev.preventDefault();
+                        return;
+                    }
+                }
+                if (!data || ev.inputType !== 'insertText')
+                    return;
+                const isDigit = data >= '0' && data <= '9';
+                if (!isDigit) {
+                    ev.preventDefault();
+                    return;
+                }
+                // NEW: block if this digit would make the NSN too long for the current country
+                const start = el.selectionStart ?? el.value.length;
+                const end = el.selectionEnd ?? el.value.length;
+                const prospective = el.value.slice(0, start) + data + el.value.slice(end);
+                const nsn = this.stripLeadingZero(this.toNSN(prospective));
+                const iso2 = this.currentIso2();
+                if (this.wouldExceedMax(nsn, iso2)) {
+                    ev.preventDefault();
+                    return;
+                }
+            };
+            const pasteHandler = (e) => {
+                if (this.isDestroyed)
+                    return;
+                const text = (e.clipboardData || window.clipboardData).getData('text') || '';
+                e.preventDefault();
+                const iso2 = this.currentIso2();
+                // digits-only, strip any leading trunk '0'
+                let digits = this.stripLeadingZero(this.toNSN(text));
+                // NEW: trim pasted digits until not TOO_LONG for the selected country
+                while (this.wouldExceedMax(digits, iso2)) {
+                    digits = digits.slice(0, -1);
+                    if (!digits)
+                        break;
+                }
+                const start = el.selectionStart ?? el.value.length;
+                const end = el.selectionEnd ?? el.value.length;
+                el.setRangeText(digits, start, end, 'end');
+                requestAnimationFrame(() => {
+                    if (!this.isDestroyed)
+                        this.handleInput();
+                });
+            };
+            const inputHandler = () => {
+                if (!this.isDestroyed)
+                    this.handleInput();
+            };
+            const countryChangeHandler = () => {
+                if (this.isDestroyed)
+                    return;
+                const iso2 = this.currentIso2();
+                this.zone.run(() => {
+                    this.countryChange.emit({ iso2 });
+                    this.validatorChange?.();
+                });
+                this.handleInput();
+            };
+            const blurHandler = () => {
+                if (!this.isDestroyed)
+                    this.onBlur();
+            };
+            // Store listeners for cleanup
+            this.eventListeners = [
+                { element: el, event: 'beforeinput', handler: beforeInputHandler },
+                { element: el, event: 'paste', handler: pasteHandler },
+                { element: el, event: 'input', handler: inputHandler },
+                { element: el, event: 'countrychange', handler: countryChangeHandler },
+                { element: el, event: 'blur', handler: blurHandler }
+            ];
+            this.eventListeners.forEach(({ element, event, handler }) => {
+                element.addEventListener(event, handler);
+            });
+        });
+    }
+    // ---------- UX handlers ----------
+    onBlur() {
+        if (this.isDestroyed)
+            return;
+        this.touched = true;
+        this.zone.run(() => this.onTouchedCb());
+        if (this.formatWhenValid === 'off')
+            return;
+        const iso2 = this.currentIso2();
+        const digits = this.stripLeadingZero(this.toNSN(this.currentRaw()));
+        const parsed = this.tel.parse(digits, iso2);
+        if (!parsed.e164 && !parsed.isValid)
+            return;
+        const nsn = parsed.e164 ? this.nsnFromE164(parsed.e164, iso2) : digits;
+        if (this.formatWhenValid !== 'typing') {
+            this.setInputValue(this.displayValue(nsn, iso2));
+        }
+    }
+    onFocus() {
+        if (this.isDestroyed || !this.selectOnFocus || !this.inputRef)
+            return;
+        const el = this.inputRef.nativeElement;
+        requestAnimationFrame(() => {
+            if (!this.isDestroyed)
+                el.setSelectionRange(0, el.value.length);
+        });
+    }
+    // ---------- Core input pipeline ----------
+    handleInput() {
+        if (this.suppressEvents || this.isDestroyed)
+            return;
+        const iso2 = this.currentIso2();
+        // Users type national digits; remove any separators and a single trunk '0'
+        let digits = this.stripLeadingZero(this.toNSN(this.currentRaw()));
+        const parsed = this.tel.parse(digits, iso2);
+        // Emit E.164 to the form (or null if incomplete) - batch zone runs
+        this.zone.run(() => {
+            this.onChange(parsed.e164);
+            this.inputChange.emit({ raw: this.currentRaw(), e164: parsed.e164, iso2 });
+        });
+        // Keep visible value as NSN (optionally formatted)
+        const nsn = parsed.e164 ? this.nsnFromE164(parsed.e164, iso2) : digits;
+        const display = this.formatWhenValid === 'typing' ? this.displayValue(nsn, iso2) : nsn;
+        if (display !== this.currentRaw())
+            this.setInputValue(display);
+    }
+    // ---------- Utilities ----------
+    /** Convert any string to digits only (NSN basis). */
+    toNSN(v) {
+        return (v ?? '').replace(/\D/g, '');
+    }
+    /** Strip exactly one leading trunk '0' from national input. */
+    stripLeadingZero(nsn) {
+        return nsn.replace(/^0/, '');
+    }
+    /** Current country calling code (e.g. "44", "94"). */
+    currentDialCode() {
+        return (this.iti?.getSelectedCountryData?.().dialCode ?? '').toString();
+    }
+    /** Convert E.164 (+<cc><nsn>) to NSN (never includes trunk '0'). */
+    nsnFromE164(e164, iso2) {
+        const dial = this.currentDialCode();
+        if (!e164 || !dial)
+            return this.toNSN(e164);
+        if (e164.startsWith('+' + dial))
+            return e164.slice(dial.length + 1);
+        return this.toNSN(e164);
+    }
+    /** Format NSN for a region (adds spaces but NEVER a trunk '0'). */
+    formatNSN(nsn, iso2) {
+        try {
+            const fmt = new AsYouType(iso2);
+            return fmt.input(nsn);
+        }
+        catch {
+            return nsn;
+        }
+    }
+    /** Compose visible value based on settings. */
+    displayValue(nsn, iso2) {
+        return this.nationalDisplay === 'formatted' ? this.formatNSN(nsn, iso2) : nsn;
+        // (spaces in formatted mode; digits only otherwise)
+    }
+    currentRaw() {
+        return this.isDestroyed ? '' : (this.inputRef?.nativeElement.value ?? '').trim();
+    }
+    currentIso2() {
+        if (this.isDestroyed)
+            return 'US';
+        const iso2 = (this.iti?.getSelectedCountryData?.().iso2 ?? this.initialCountry ?? 'US')
+            .toString().toUpperCase();
+        return iso2;
+    }
+    setInputValue(v) {
+        if (!this.isDestroyed && this.inputRef) {
+            this.inputRef.nativeElement.value = v ?? '';
+        }
+    }
+    get showError() {
+        if (this.isDestroyed)
+            return false;
+        const invalid = !!this.validate({});
+        return this.showErrorWhenTouched ? (this.touched && invalid) : invalid;
+    }
+    isCurrentlyValid() {
+        return this.isDestroyed ? false : this.tel.isValid(this.currentRaw(), this.currentIso2());
+    }
+    /** Make flag/dropdown non-interactive when disabled */
+    applyDisabledUi(disabled) {
+        if (this.isDestroyed)
+            return;
+        const input = this.inputRef?.nativeElement;
+        if (!input)
+            return;
+        const flag = input.parentElement?.querySelector('.iti__selected-flag');
+        if (flag) {
+            flag.tabIndex = disabled ? -1 : 0;
+            flag.setAttribute('aria-disabled', String(disabled));
+        }
+    }
+    /** Returns true if nsn would be TOO_LONG for the current country. */
+    wouldExceedMax(nsn, iso2) {
+        if (this.isDestroyed)
+            return false;
+        try {
+            const res = validatePhoneNumberLength(nsn, iso2);
+            return res === 'TOO_LONG';
+        }
+        catch {
+            return false;
+        }
+    }
+    /** Clean up event listeners to prevent memory leaks */
+    cleanupEventListeners() {
+        this.eventListeners.forEach(({ element, event, handler }) => {
+            element.removeEventListener(event, handler);
+        });
+        this.eventListeners = [];
+    }
+    /** Detect and apply theme based on user preference and system settings */
+    detectAndApplyTheme() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        let detectedTheme = 'light';
+        if (this.theme === 'auto') {
+            // Check for system preference
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                detectedTheme = 'dark';
+            }
+            // Check for document class
+            else if (document.documentElement.classList.contains('dark')) {
+                detectedTheme = 'dark';
+            }
+            // Check for data attribute
+            else if (document.documentElement.getAttribute('data-theme') === 'dark') {
+                detectedTheme = 'dark';
+            }
+        }
+        else {
+            detectedTheme = this.theme;
+        }
+        this.currentTheme = detectedTheme;
+        this.applyTheme(detectedTheme);
+    }
+    /** Apply theme to the component */
+    applyTheme(theme) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const hostElement = this.inputRef?.nativeElement?.closest('ngxsmk-tel-input');
+        if (hostElement) {
+            hostElement.setAttribute('data-theme', theme);
+        }
+        // Also apply theme to any existing dropdown
+        this.applyThemeToDropdown(theme);
+    }
+    /** Apply theme to the dropdown if it exists */
+    applyThemeToDropdown(theme) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Find the dropdown in the document
+        const dropdown = document.querySelector('.iti__country-list');
+        if (dropdown) {
+            dropdown.setAttribute('data-theme', theme);
+        }
+    }
+    /** Get current theme */
+    getCurrentTheme() {
+        return this.currentTheme;
+    }
+    /** Set theme programmatically */
+    setTheme(theme) {
+        this.theme = theme;
+        this.detectAndApplyTheme();
+    }
+    /** Update dropdown theme when it's opened */
+    updateDropdownTheme() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Use a small delay to ensure dropdown is rendered
+        setTimeout(() => {
+            const dropdown = document.querySelector('.iti__country-list');
+            if (dropdown) {
+                dropdown.setAttribute('data-theme', this.currentTheme);
+                // Force apply dark theme classes
+                if (this.currentTheme === 'dark') {
+                    dropdown.classList.add('dark-theme');
+                    document.documentElement.classList.add('dark');
+                    document.body.classList.add('dark');
+                }
+                else {
+                    dropdown.classList.remove('dark-theme');
+                    document.documentElement.classList.remove('dark');
+                    document.body.classList.remove('dark');
+                }
+                // Also update the search input if it exists
+                const searchInput = dropdown.querySelector('.iti__search-input');
+                if (searchInput) {
+                    searchInput.setAttribute('data-theme', this.currentTheme);
+                    if (this.currentTheme === 'dark') {
+                        searchInput.classList.add('dark-theme');
+                    }
+                    else {
+                        searchInput.classList.remove('dark-theme');
+                    }
+                    // Ensure search input is focusable and functional
+                    searchInput.style.pointerEvents = 'auto';
+                    searchInput.style.opacity = '1';
+                    searchInput.disabled = false;
+                }
+            }
+        }, 10);
+    }
+    /** Setup observer to watch for dropdown changes and apply theme */
+    setupDropdownThemeObserver() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Watch for dropdown appearance in the DOM
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            const element = node;
+                            if (element.classList.contains('iti__country-list')) {
+                                this.updateDropdownTheme();
+                            }
+                        }
+                    });
+                }
+            });
+        });
+        // Start observing
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        // Store observer for cleanup
+        this.eventListeners.push({
+            element: document.body,
+            event: 'observer',
+            handler: () => observer.disconnect()
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputComponent, deps: [{ token: i0.NgZone }, { token: NgxsmkTelInputService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgxsmkTelInputComponent, isStandalone: true, selector: "ngxsmk-tel-input", inputs: { initialCountry: "initialCountry", preferredCountries: "preferredCountries", onlyCountries: "onlyCountries", separateDialCode: "separateDialCode", allowDropdown: "allowDropdown", nationalDisplay: "nationalDisplay", formatWhenValid: "formatWhenValid", placeholder: "placeholder", autocomplete: "autocomplete", name: "name", inputId: "inputId", disabled: "disabled", label: "label", hint: "hint", errorText: "errorText", size: "size", variant: "variant", showClear: "showClear", autoFocus: "autoFocus", selectOnFocus: "selectOnFocus", showErrorWhenTouched: "showErrorWhenTouched", dropdownAttachToBody: "dropdownAttachToBody", dropdownZIndex: "dropdownZIndex", i18n: "i18n", telI18n: "telI18n", localizedCountries: "localizedCountries", telLocalizedCountries: "telLocalizedCountries", clearAriaLabel: "clearAriaLabel", dir: "dir", autoPlaceholder: "autoPlaceholder", utilsScript: "utilsScript", customPlaceholder: "customPlaceholder", digitsOnly: "digitsOnly", lockWhenValid: "lockWhenValid", theme: "theme" }, outputs: { countryChange: "countryChange", validityChange: "validityChange", inputChange: "inputChange" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true }
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["telInput"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="ngxsmk-tel"
+         [class.disabled]="disabled"
+         [attr.data-size]="size"
+         [attr.data-variant]="variant"
+         [attr.dir]="dir">
+      @if (label) {
+        <label class="ngxsmk-tel__label" [for]="resolvedId">{{ label }}</label>
+      }
+
+      <div class="ngxsmk-tel__wrap" [class.has-error]="showError">
+        <div class="ngxsmk-tel-input__wrapper">
+          <input
+            #telInput
+            type="tel"
+            class="ngxsmk-tel-input__control"
+            [id]="resolvedId"
+            [attr.name]="name || null"
+            [attr.placeholder]="placeholder || null"
+            [attr.autocomplete]="autocomplete"
+            [attr.inputmode]="digitsOnly ? 'numeric' : 'tel'"
+            [disabled]="disabled"
+            [attr.aria-invalid]="showError ? 'true' : 'false'"
+            (blur)="onBlur()"
+            (focus)="onFocus()"
+          />
+        </div>
+
+        @if (showClear && currentRaw()) {
+          <button type="button"
+                  class="ngxsmk-tel__clear"
+                  (click)="clearInput()"
+                  [attr.aria-label]="clearAriaLabel">
+            ×
+          </button>
+        }
+      </div>
+
+      @if (hint && !showError) {
+        <div class="ngxsmk-tel__hint">{{ hint }}</div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{--tel-bg: #fff;--tel-fg: #0f172a;--tel-border: #c0c0c0;--tel-border-hover: #9aa0a6;--tel-ring: #2563eb;--tel-placeholder: #9ca3af;--tel-error: #ef4444;--tel-success: #10b981;--tel-warning: #f59e0b;--tel-radius: 12px;--tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);--tel-dd-bg: var(--tel-bg);--tel-dd-border: var(--tel-border);--tel-dd-shadow: 0 24px 60px rgba(0, 0, 0, .18);--tel-dd-radius: 12px;--tel-dd-item-hover: rgba(37, 99, 235, .08);--tel-dd-z: 2000;--tel-dd-search-bg: rgba(148, 163, 184, .08);display:block;contain:layout style}:host-context(.dark),:host([data-theme=dark]){--tel-bg: #0b0f17;--tel-fg: #e5e7eb;--tel-border: #334155;--tel-border-hover: #475569;--tel-ring: #60a5fa;--tel-placeholder: #94a3b8;--tel-error: #f87171;--tel-success: #34d399;--tel-warning: #fbbf24;--tel-focus-shadow: 0 0 0 3px rgba(96, 165, 250, .25);--tel-dd-bg: #0f1521;--tel-dd-border: #324056;--tel-dd-shadow: 0 24px 60px rgba(0, 0, 0, .4);--tel-dd-search-bg: rgba(148, 163, 184, .12)}:host([data-theme=light]){--tel-bg: #fff;--tel-fg: #0f172a;--tel-border: #c0c0c0;--tel-border-hover: #9aa0a6;--tel-ring: #2563eb;--tel-placeholder: #9ca3af;--tel-error: #ef4444;--tel-success: #10b981;--tel-warning: #f59e0b;--tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);--tel-dd-bg: var(--tel-bg);--tel-dd-border: var(--tel-border);--tel-dd-shadow: 0 24px 60px rgba(0, 0, 0, .18);--tel-dd-search-bg: rgba(148, 163, 184, .08)}:host-context(.dark) ::ng-deep .iti__country-list,:host([data-theme=dark]) ::ng-deep .iti__country-list{background:var(--tel-dd-bg)!important;border-color:var(--tel-dd-border)!important;color:var(--tel-fg)!important}:host-context(.dark) ::ng-deep .iti__search-input,:host([data-theme=dark]) ::ng-deep .iti__search-input{background:var(--tel-dd-search-bg)!important;color:var(--tel-fg)!important;border-bottom-color:var(--tel-dd-border)!important}:host-context(.dark) ::ng-deep .iti__country,:host([data-theme=dark]) ::ng-deep .iti__country{color:var(--tel-fg)!important}:host-context(.dark) ::ng-deep .iti__country.iti__highlight,:host([data-theme=dark]) ::ng-deep .iti__country.iti__highlight{background-color:var(--tel-dd-item-hover)!important}:host-context(.dark) ::ng-deep .iti__country-name,:host([data-theme=dark]) ::ng-deep .iti__country-name{color:var(--tel-fg)!important}:host-context(.dark) ::ng-deep .iti__country-code,:host([data-theme=dark]) ::ng-deep .iti__country-code{color:var(--tel-placeholder)!important}:host-context(.dark) ::ng-deep .iti__dial-code,:host([data-theme=dark]) ::ng-deep .iti__dial-code{color:var(--tel-placeholder)!important}.ngxsmk-tel{width:100%;color:var(--tel-fg)}.ngxsmk-tel.disabled{opacity:.7;cursor:not-allowed}.ngxsmk-tel__label{display:inline-block;margin-bottom:6px;font-size:.875rem;font-weight:500}.ngxsmk-tel__wrap{position:relative}.ngxsmk-tel-input__wrapper,:host ::ng-deep .iti{width:100%}.ngxsmk-tel-input__control{width:100%;height:40px;font:inherit;color:var(--tel-fg);background:var(--tel-bg);border:1px solid var(--tel-border);border-radius:var(--tel-radius);padding:10px 40px 10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;will-change:border-color,box-shadow,background;box-shadow:0 1px 3px #0000001a;font-size:16px;line-height:1.5}.ngxsmk-tel-input__control::placeholder{color:var(--tel-placeholder)}.ngxsmk-tel-input__control:focus{border-color:var(--tel-ring);box-shadow:var(--tel-focus-shadow);background:var(--tel-bg);color:var(--tel-fg)}[data-size=sm] .ngxsmk-tel-input__control{height:34px;font-size:13px;padding:6px 36px 6px 10px;border-radius:10px}[data-size=lg] .ngxsmk-tel-input__control{height:46px;font-size:16px;padding:12px 44px 12px 14px;border-radius:14px}[data-variant=filled] .ngxsmk-tel-input__control{background:#94a3b814}[data-variant=underline] .ngxsmk-tel-input__control{border:0;border-bottom:2px solid var(--tel-border);border-radius:0;padding-left:0;padding-right:34px}[data-variant=underline] .ngxsmk-tel-input__control:focus{border-bottom-color:var(--tel-ring);box-shadow:none}:host ::ng-deep .iti__flag-container{border-top-left-radius:var(--tel-radius);border-bottom-left-radius:var(--tel-radius);border:1px solid var(--tel-border);border-right:none;background:var(--tel-bg)}:host ::ng-deep .iti__selected-flag{height:100%;padding:0 10px;display:inline-flex;align-items:center}:host ::ng-deep .iti__country-list{background:var(--tel-dd-bg);border:1px solid var(--tel-dd-border);border-radius:var(--tel-dd-radius);box-shadow:var(--tel-dd-shadow);max-height:min(50vh,360px);overflow:auto;padding:6px 0;width:max(280px,100%);z-index:var(--tel-dd-z);contain:layout style;will-change:transform;color:var(--tel-fg)}:host ::ng-deep .iti--container .iti__country-list{z-index:var(--tel-dd-z)}:host ::ng-deep .iti__search-input{position:sticky;top:0;margin:0;padding:10px 12px;width:100%;border:0;border-bottom:1px solid var(--tel-dd-border);outline:none;background:var(--tel-dd-search-bg);color:var(--tel-fg)}:host ::ng-deep .iti__search-input::placeholder{color:var(--tel-placeholder)}:host ::ng-deep .iti__country{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:.5rem;padding:10px 12px;cursor:pointer;color:var(--tel-fg)}:host ::ng-deep .iti__country.iti__highlight{background-color:var(--tel-dd-item-hover)}:host ::ng-deep .iti__dial-code{color:var(--tel-placeholder);font-weight:600;margin-left:10px}:host ::ng-deep .iti__country-name{color:var(--tel-fg)}:host ::ng-deep .iti__country-code{color:var(--tel-placeholder);font-weight:500}.ngxsmk-tel__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:18px;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--tel-placeholder)}.ngxsmk-tel__hint{margin-top:6px;font-size:12px;color:var(--tel-placeholder)}.ngxsmk-tel__error{margin-top:6px;font-size:12px;color:var(--tel-error)}.ngxsmk-tel__wrap.has-error .ngxsmk-tel-input__control{border-color:var(--tel-error);box-shadow:0 0 0 3px #ef444426}.ngxsmk-tel.disabled .iti__flag-container,.ngxsmk-tel.disabled .iti__selected-flag{pointer-events:none;opacity:.6}:host-context(.dark) .ngxsmk-tel-input__control,:host([data-theme=dark]) .ngxsmk-tel-input__control{background:#1e293b!important;color:#f1f5f9!important;border-color:#475569!important;box-shadow:0 1px 3px #0000004d!important}:host-context(.dark) .ngxsmk-tel-input__control:focus,:host([data-theme=dark]) .ngxsmk-tel-input__control:focus{background:#1e293b!important;color:#f1f5f9!important;border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f633!important}:host-context(.dark) .ngxsmk-tel-input__control::placeholder,:host([data-theme=dark]) .ngxsmk-tel-input__control::placeholder{color:#94a3b8!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxsmkTelInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngxsmk-tel-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ngxsmk-tel"
+         [class.disabled]="disabled"
+         [attr.data-size]="size"
+         [attr.data-variant]="variant"
+         [attr.dir]="dir">
+      @if (label) {
+        <label class="ngxsmk-tel__label" [for]="resolvedId">{{ label }}</label>
+      }
+
+      <div class="ngxsmk-tel__wrap" [class.has-error]="showError">
+        <div class="ngxsmk-tel-input__wrapper">
+          <input
+            #telInput
+            type="tel"
+            class="ngxsmk-tel-input__control"
+            [id]="resolvedId"
+            [attr.name]="name || null"
+            [attr.placeholder]="placeholder || null"
+            [attr.autocomplete]="autocomplete"
+            [attr.inputmode]="digitsOnly ? 'numeric' : 'tel'"
+            [disabled]="disabled"
+            [attr.aria-invalid]="showError ? 'true' : 'false'"
+            (blur)="onBlur()"
+            (focus)="onFocus()"
+          />
+        </div>
+
+        @if (showClear && currentRaw()) {
+          <button type="button"
+                  class="ngxsmk-tel__clear"
+                  (click)="clearInput()"
+                  [attr.aria-label]="clearAriaLabel">
+            ×
+          </button>
+        }
+      </div>
+
+      @if (hint && !showError) {
+        <div class="ngxsmk-tel__hint">{{ hint }}</div>
+      }
+    </div>
+  `, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => NgxsmkTelInputComponent), multi: true }
+                    ], styles: [":host{--tel-bg: #fff;--tel-fg: #0f172a;--tel-border: #c0c0c0;--tel-border-hover: #9aa0a6;--tel-ring: #2563eb;--tel-placeholder: #9ca3af;--tel-error: #ef4444;--tel-success: #10b981;--tel-warning: #f59e0b;--tel-radius: 12px;--tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);--tel-dd-bg: var(--tel-bg);--tel-dd-border: var(--tel-border);--tel-dd-shadow: 0 24px 60px rgba(0, 0, 0, .18);--tel-dd-radius: 12px;--tel-dd-item-hover: rgba(37, 99, 235, .08);--tel-dd-z: 2000;--tel-dd-search-bg: rgba(148, 163, 184, .08);display:block;contain:layout style}:host-context(.dark),:host([data-theme=dark]){--tel-bg: #0b0f17;--tel-fg: #e5e7eb;--tel-border: #334155;--tel-border-hover: #475569;--tel-ring: #60a5fa;--tel-placeholder: #94a3b8;--tel-error: #f87171;--tel-success: #34d399;--tel-warning: #fbbf24;--tel-focus-shadow: 0 0 0 3px rgba(96, 165, 250, .25);--tel-dd-bg: #0f1521;--tel-dd-border: #324056;--tel-dd-shadow: 0 24px 60px rgba(0, 0, 0, .4);--tel-dd-search-bg: rgba(148, 163, 184, .12)}:host([data-theme=light]){--tel-bg: #fff;--tel-fg: #0f172a;--tel-border: #c0c0c0;--tel-border-hover: #9aa0a6;--tel-ring: #2563eb;--tel-placeholder: #9ca3af;--tel-error: #ef4444;--tel-success: #10b981;--tel-warning: #f59e0b;--tel-focus-shadow: 0 0 0 3px rgba(37, 99, 235, .25);--tel-dd-bg: var(--tel-bg);--tel-dd-border: var(--tel-border);--tel-dd-shadow: 0 24px 60px rgba(0, 0, 0, .18);--tel-dd-search-bg: rgba(148, 163, 184, .08)}:host-context(.dark) ::ng-deep .iti__country-list,:host([data-theme=dark]) ::ng-deep .iti__country-list{background:var(--tel-dd-bg)!important;border-color:var(--tel-dd-border)!important;color:var(--tel-fg)!important}:host-context(.dark) ::ng-deep .iti__search-input,:host([data-theme=dark]) ::ng-deep .iti__search-input{background:var(--tel-dd-search-bg)!important;color:var(--tel-fg)!important;border-bottom-color:var(--tel-dd-border)!important}:host-context(.dark) ::ng-deep .iti__country,:host([data-theme=dark]) ::ng-deep .iti__country{color:var(--tel-fg)!important}:host-context(.dark) ::ng-deep .iti__country.iti__highlight,:host([data-theme=dark]) ::ng-deep .iti__country.iti__highlight{background-color:var(--tel-dd-item-hover)!important}:host-context(.dark) ::ng-deep .iti__country-name,:host([data-theme=dark]) ::ng-deep .iti__country-name{color:var(--tel-fg)!important}:host-context(.dark) ::ng-deep .iti__country-code,:host([data-theme=dark]) ::ng-deep .iti__country-code{color:var(--tel-placeholder)!important}:host-context(.dark) ::ng-deep .iti__dial-code,:host([data-theme=dark]) ::ng-deep .iti__dial-code{color:var(--tel-placeholder)!important}.ngxsmk-tel{width:100%;color:var(--tel-fg)}.ngxsmk-tel.disabled{opacity:.7;cursor:not-allowed}.ngxsmk-tel__label{display:inline-block;margin-bottom:6px;font-size:.875rem;font-weight:500}.ngxsmk-tel__wrap{position:relative}.ngxsmk-tel-input__wrapper,:host ::ng-deep .iti{width:100%}.ngxsmk-tel-input__control{width:100%;height:40px;font:inherit;color:var(--tel-fg);background:var(--tel-bg);border:1px solid var(--tel-border);border-radius:var(--tel-radius);padding:10px 40px 10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;will-change:border-color,box-shadow,background;box-shadow:0 1px 3px #0000001a;font-size:16px;line-height:1.5}.ngxsmk-tel-input__control::placeholder{color:var(--tel-placeholder)}.ngxsmk-tel-input__control:focus{border-color:var(--tel-ring);box-shadow:var(--tel-focus-shadow);background:var(--tel-bg);color:var(--tel-fg)}[data-size=sm] .ngxsmk-tel-input__control{height:34px;font-size:13px;padding:6px 36px 6px 10px;border-radius:10px}[data-size=lg] .ngxsmk-tel-input__control{height:46px;font-size:16px;padding:12px 44px 12px 14px;border-radius:14px}[data-variant=filled] .ngxsmk-tel-input__control{background:#94a3b814}[data-variant=underline] .ngxsmk-tel-input__control{border:0;border-bottom:2px solid var(--tel-border);border-radius:0;padding-left:0;padding-right:34px}[data-variant=underline] .ngxsmk-tel-input__control:focus{border-bottom-color:var(--tel-ring);box-shadow:none}:host ::ng-deep .iti__flag-container{border-top-left-radius:var(--tel-radius);border-bottom-left-radius:var(--tel-radius);border:1px solid var(--tel-border);border-right:none;background:var(--tel-bg)}:host ::ng-deep .iti__selected-flag{height:100%;padding:0 10px;display:inline-flex;align-items:center}:host ::ng-deep .iti__country-list{background:var(--tel-dd-bg);border:1px solid var(--tel-dd-border);border-radius:var(--tel-dd-radius);box-shadow:var(--tel-dd-shadow);max-height:min(50vh,360px);overflow:auto;padding:6px 0;width:max(280px,100%);z-index:var(--tel-dd-z);contain:layout style;will-change:transform;color:var(--tel-fg)}:host ::ng-deep .iti--container .iti__country-list{z-index:var(--tel-dd-z)}:host ::ng-deep .iti__search-input{position:sticky;top:0;margin:0;padding:10px 12px;width:100%;border:0;border-bottom:1px solid var(--tel-dd-border);outline:none;background:var(--tel-dd-search-bg);color:var(--tel-fg)}:host ::ng-deep .iti__search-input::placeholder{color:var(--tel-placeholder)}:host ::ng-deep .iti__country{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:.5rem;padding:10px 12px;cursor:pointer;color:var(--tel-fg)}:host ::ng-deep .iti__country.iti__highlight{background-color:var(--tel-dd-item-hover)}:host ::ng-deep .iti__dial-code{color:var(--tel-placeholder);font-weight:600;margin-left:10px}:host ::ng-deep .iti__country-name{color:var(--tel-fg)}:host ::ng-deep .iti__country-code{color:var(--tel-placeholder);font-weight:500}.ngxsmk-tel__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:18px;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--tel-placeholder)}.ngxsmk-tel__hint{margin-top:6px;font-size:12px;color:var(--tel-placeholder)}.ngxsmk-tel__error{margin-top:6px;font-size:12px;color:var(--tel-error)}.ngxsmk-tel__wrap.has-error .ngxsmk-tel-input__control{border-color:var(--tel-error);box-shadow:0 0 0 3px #ef444426}.ngxsmk-tel.disabled .iti__flag-container,.ngxsmk-tel.disabled .iti__selected-flag{pointer-events:none;opacity:.6}:host-context(.dark) .ngxsmk-tel-input__control,:host([data-theme=dark]) .ngxsmk-tel-input__control{background:#1e293b!important;color:#f1f5f9!important;border-color:#475569!important;box-shadow:0 1px 3px #0000004d!important}:host-context(.dark) .ngxsmk-tel-input__control:focus,:host([data-theme=dark]) .ngxsmk-tel-input__control:focus{background:#1e293b!important;color:#f1f5f9!important;border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f633!important}:host-context(.dark) .ngxsmk-tel-input__control::placeholder,:host([data-theme=dark]) .ngxsmk-tel-input__control::placeholder{color:#94a3b8!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: NgxsmkTelInputService }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['telInput', { static: true }]
+            }], initialCountry: [{
+                type: Input
+            }], preferredCountries: [{
+                type: Input
+            }], onlyCountries: [{
+                type: Input
+            }], separateDialCode: [{
+                type: Input
+            }], allowDropdown: [{
+                type: Input
+            }], nationalDisplay: [{
+                type: Input
+            }], formatWhenValid: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], selectOnFocus: [{
+                type: Input
+            }], showErrorWhenTouched: [{
+                type: Input
+            }], dropdownAttachToBody: [{
+                type: Input
+            }], dropdownZIndex: [{
+                type: Input
+            }], i18n: [{
+                type: Input,
+                args: ['i18n']
+            }], telI18n: [{
+                type: Input,
+                args: ['telI18n']
+            }], localizedCountries: [{
+                type: Input,
+                args: ['localizedCountries']
+            }], telLocalizedCountries: [{
+                type: Input,
+                args: ['telLocalizedCountries']
+            }], clearAriaLabel: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], autoPlaceholder: [{
+                type: Input
+            }], utilsScript: [{
+                type: Input
+            }], customPlaceholder: [{
+                type: Input
+            }], digitsOnly: [{
+                type: Input
+            }], lockWhenValid: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], countryChange: [{
+                type: Output
+            }], validityChange: [{
+                type: Output
+            }], inputChange: [{
+                type: Output
+            }] } });
+
+class ThemeService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.themeSubject = new BehaviorSubject('auto');
+        this.currentThemeSubject = new BehaviorSubject('light');
+        this.theme$ = this.themeSubject.asObservable();
+        this.currentTheme$ = this.currentThemeSubject.asObservable();
+        if (isPlatformBrowser(this.platformId)) {
+            this.initializeTheme();
+            this.setupSystemThemeListener();
+        }
+    }
+    /** Get current theme preference */
+    getTheme() {
+        return this.themeSubject.value;
+    }
+    /** Get current resolved theme (light or dark) */
+    getCurrentTheme() {
+        return this.currentThemeSubject.value;
+    }
+    /** Set theme preference */
+    setTheme(theme) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.themeSubject.next(theme);
+        this.applyTheme(theme);
+        this.saveThemePreference(theme);
+    }
+    /** Toggle between light and dark themes */
+    toggleTheme() {
+        const current = this.getCurrentTheme();
+        this.setTheme(current === 'light' ? 'dark' : 'light');
+    }
+    /** Initialize theme from saved preference or system */
+    initializeTheme() {
+        const savedTheme = this.getSavedThemePreference();
+        const theme = savedTheme || 'auto';
+        this.setTheme(theme);
+    }
+    /** Apply theme to document and components */
+    applyTheme(theme) {
+        const resolvedTheme = this.resolveTheme(theme);
+        this.currentThemeSubject.next(resolvedTheme);
+        // Apply to document
+        document.documentElement.setAttribute('data-theme', resolvedTheme);
+        if (resolvedTheme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+        // Update CSS custom properties
+        this.updateCSSVariables(resolvedTheme);
+        // Force update of all tel-input components
+        this.updateTelInputComponents(resolvedTheme);
+    }
+    /** Update all tel-input components with the new theme */
+    updateTelInputComponents(theme) {
+        const telInputComponents = document.querySelectorAll('ngxsmk-tel-input');
+        telInputComponents.forEach(component => {
+            const element = component;
+            element.setAttribute('data-theme', theme);
+        });
+    }
+    /** Resolve theme to light or dark */
+    resolveTheme(theme) {
+        if (theme === 'auto') {
+            return this.detectSystemTheme();
+        }
+        return theme;
+    }
+    /** Detect system theme preference */
+    detectSystemTheme() {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    }
+    /** Setup listener for system theme changes */
+    setupSystemThemeListener() {
+        if (window.matchMedia) {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.addEventListener('change', () => {
+                if (this.getTheme() === 'auto') {
+                    this.applyTheme('auto');
+                }
+            });
+        }
+    }
+    /** Update CSS custom properties for theme */
+    updateCSSVariables(theme) {
+        const root = document.documentElement;
+        if (theme === 'dark') {
+            root.style.setProperty('--tel-bg', '#0b0f17');
+            root.style.setProperty('--tel-fg', '#e5e7eb');
+            root.style.setProperty('--tel-border', '#334155');
+            root.style.setProperty('--tel-border-hover', '#475569');
+            root.style.setProperty('--tel-ring', '#60a5fa');
+            root.style.setProperty('--tel-placeholder', '#94a3b8');
+            root.style.setProperty('--tel-error', '#f87171');
+            root.style.setProperty('--tel-success', '#34d399');
+            root.style.setProperty('--tel-warning', '#fbbf24');
+            root.style.setProperty('--tel-dd-bg', '#0f1521');
+            root.style.setProperty('--tel-dd-border', '#324056');
+            root.style.setProperty('--tel-dd-shadow', '0 24px 60px rgba(0, 0, 0, .4)');
+            root.style.setProperty('--tel-dd-search-bg', 'rgba(148, 163, 184, .12)');
+        }
+        else {
+            root.style.setProperty('--tel-bg', '#fff');
+            root.style.setProperty('--tel-fg', '#0f172a');
+            root.style.setProperty('--tel-border', '#c0c0c0');
+            root.style.setProperty('--tel-border-hover', '#9aa0a6');
+            root.style.setProperty('--tel-ring', '#2563eb');
+            root.style.setProperty('--tel-placeholder', '#9ca3af');
+            root.style.setProperty('--tel-error', '#ef4444');
+            root.style.setProperty('--tel-success', '#10b981');
+            root.style.setProperty('--tel-warning', '#f59e0b');
+            root.style.setProperty('--tel-dd-bg', '#fff');
+            root.style.setProperty('--tel-dd-border', '#c0c0c0');
+            root.style.setProperty('--tel-dd-shadow', '0 24px 60px rgba(0, 0, 0, .18)');
+            root.style.setProperty('--tel-dd-search-bg', 'rgba(148, 163, 184, .08)');
+        }
+    }
+    /** Save theme preference to localStorage */
+    saveThemePreference(theme) {
+        try {
+            localStorage.setItem('ngxsmk-tel-input-theme', theme);
+        }
+        catch (error) {
+            console.warn('Failed to save theme preference:', error);
+        }
+    }
+    /** Get saved theme preference from localStorage */
+    getSavedThemePreference() {
+        try {
+            const saved = localStorage.getItem('ngxsmk-tel-input-theme');
+            return saved;
+        }
+        catch (error) {
+            console.warn('Failed to load theme preference:', error);
+            return null;
+        }
+    }
+    /** Check if dark theme is active */
+    isDarkTheme() {
+        return this.getCurrentTheme() === 'dark';
+    }
+    /** Check if light theme is active */
+    isLightTheme() {
+        return this.getCurrentTheme() === 'light';
+    }
+    /** Check if auto theme is set */
+    isAutoTheme() {
+        return this.getTheme() === 'auto';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Utility functions for phone number input optimization
+ */
+class PhoneInputUtils {
+    /**
+     * Convert any string to digits only (NSN basis)
+     */
+    static toNSN(v) {
+        return (v ?? '').replace(/\D/g, '');
+    }
+    /**
+     * Strip exactly one leading trunk '0' from national input
+     */
+    static stripLeadingZero(nsn) {
+        return nsn.replace(/^0/, '');
+    }
+    /**
+     * Create cache key for phone number operations
+     */
+    static createCacheKey(input, iso2) {
+        return `${input || ''}|${iso2}`;
+    }
+    /**
+     * Debounce function for performance optimization
+     */
+    static debounce(func, wait) {
+        let timeout = null;
+        return (...args) => {
+            if (timeout)
+                clearTimeout(timeout);
+            timeout = setTimeout(() => func.apply(this, args), wait);
+        };
+    }
+    /**
+     * Throttle function for performance optimization
+     */
+    static throttle(func, limit) {
+        let inThrottle;
+        return (...args) => {
+            if (!inThrottle) {
+                func.apply(this, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    }
+    /**
+     * Check if a string contains only digits
+     */
+    static isDigitsOnly(str) {
+        return /^\d+$/.test(str);
+    }
+    /**
+     * Safely get element value with fallback
+     */
+    static getElementValue(element) {
+        return element?.value?.trim() || '';
+    }
+    /**
+     * Check if element is in viewport for performance optimization
+     */
+    static isInViewport(element) {
+        const rect = element.getBoundingClientRect();
+        return (rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+    }
+    /**
+     * Create optimized event listener with cleanup
+     */
+    static createEventListener(element, event, handler, options) {
+        element.addEventListener(event, handler, options);
+        return () => element.removeEventListener(event, handler, options);
+    }
+    /**
+     * Batch DOM operations for better performance
+     */
+    static batchDOMOperations(operations) {
+        requestAnimationFrame(() => {
+            operations.forEach(op => op());
+        });
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxsmkTelInputComponent, NgxsmkTelInputService, PhoneInputUtils, ThemeService };
+//# sourceMappingURL=ngxsmk-tel-input.mjs.map