@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-phone-input.mjs

@@ -0,0 +1,688 @@
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, Injector, viewChild, model, input, output, signal, computed, effect, untracked, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+const NANP = { dial: '1', lengths: [10], formats: { 10: '(###) ###-####' } };
+/**
+ * Países incluidos: América Latina y el Caribe, Norteamérica, la Europa más
+ * habitual y los mayores de Asia y Oceanía. Amplíalos con `[countries]`.
+ */
+const CB_PHONE_COUNTRIES = [
+    // --- América Latina y el Caribe ---
+    { iso: 'AR', dial: '54', lengths: [10, 11], formats: { 10: '## ####-####', 11: '# ## ####-####' }, trunk: '0', example: '1123456789' },
+    { iso: 'BO', dial: '591', lengths: [8], formats: { 8: '# ### ####' }, trunk: '0', example: '71234567' },
+    { iso: 'BR', dial: '55', lengths: [10, 11], formats: { 10: '(##) ####-####', 11: '(##) #####-####' }, trunk: '0', example: '11912345678' },
+    { iso: 'CL', dial: '56', lengths: [9], formats: { 9: '# #### ####' }, example: '912345678' },
+    { iso: 'CO', dial: '57', lengths: [10], formats: { 10: '### ### ####' }, example: '3001234567' },
+    { iso: 'CR', dial: '506', lengths: [8], formats: { 8: '#### ####' }, example: '83123456' },
+    { iso: 'CU', dial: '53', lengths: [8], formats: { 8: '# ### ####' }, trunk: '0', example: '51234567' },
+    { iso: 'DO', ...NANP, leading: ['809', '829', '849'], example: '8092345678' },
+    { iso: 'EC', dial: '593', lengths: [8, 9], formats: { 8: '# ### ####', 9: '## ### ####' }, trunk: '0', example: '991234567' },
+    { iso: 'SV', dial: '503', lengths: [8], formats: { 8: '#### ####' }, example: '70123456' },
+    { iso: 'GT', dial: '502', lengths: [8], formats: { 8: '#### ####' }, example: '51234567' },
+    { iso: 'HN', dial: '504', lengths: [8], formats: { 8: '####-####' }, example: '91234567' },
+    { iso: 'MX', dial: '52', lengths: [10], formats: { 10: '## #### ####' }, example: '5512345678' },
+    { iso: 'NI', dial: '505', lengths: [8], formats: { 8: '#### ####' }, example: '81234567' },
+    { iso: 'PA', dial: '507', lengths: [7, 8], formats: { 7: '###-####', 8: '####-####' }, example: '61234567' },
+    { iso: 'PY', dial: '595', lengths: [9], formats: { 9: '### ######' }, trunk: '0', example: '961456789' },
+    { iso: 'PE', dial: '51', lengths: [8, 9], formats: { 8: '# ### ####', 9: '### ### ###' }, trunk: '0', example: '912345678' },
+    { iso: 'PR', ...NANP, leading: ['787', '939'], example: '7872345678' },
+    { iso: 'UY', dial: '598', lengths: [8], formats: { 8: '#### ####' }, trunk: '0', example: '94231234' },
+    { iso: 'VE', dial: '58', lengths: [10], formats: { 10: '###-#######' }, trunk: '0', example: '4121234567' },
+    { iso: 'JM', ...NANP, leading: ['876', '658'], example: '8762101234' },
+    { iso: 'TT', ...NANP, leading: ['868'], example: '8682911234' },
+    // --- Norteamérica ---
+    { iso: 'US', ...NANP, example: '2015550123' },
+    { iso: 'CA', ...NANP, leading: ['204', '226', '236', '249', '250', '263', '289', '306', '343', '354', '365', '367', '368', '382', '403', '416', '418', '428', '431', '437', '438', '450', '468', '474', '506', '514', '519', '548', '579', '581', '584', '587', '604', '613', '639', '647', '672', '683', '705', '709', '742', '753', '778', '780', '782', '807', '819', '825', '867', '873', '879', '902', '905'], example: '5062345678' },
+    // --- Europa ---
+    { iso: 'DE', dial: '49', lengths: [7, 8, 9, 10, 11], formats: { 10: '### #######', 11: '#### #######' }, trunk: '0', example: '15123456789' },
+    { iso: 'AT', dial: '43', lengths: [8, 9, 10, 11, 12], formats: { 10: '### #######', 11: '### ########' }, trunk: '0', example: '6641234567' },
+    { iso: 'BE', dial: '32', lengths: [8, 9], formats: { 8: '# ### ## ##', 9: '### ## ## ##' }, trunk: '0', example: '470123456' },
+    { iso: 'DK', dial: '45', lengths: [8], formats: { 8: '## ## ## ##' }, example: '32123456' },
+    { iso: 'ES', dial: '34', lengths: [9], formats: { 9: '### ## ## ##' }, example: '612345678' },
+    { iso: 'FI', dial: '358', lengths: [9, 10], formats: { 9: '## ### ####', 10: '## #### ####' }, trunk: '0', example: '412345678' },
+    { iso: 'FR', dial: '33', lengths: [9], formats: { 9: '# ## ## ## ##' }, trunk: '0', example: '612345678' },
+    { iso: 'GR', dial: '30', lengths: [10], formats: { 10: '### ### ####' }, example: '6912345678' },
+    { iso: 'IE', dial: '353', lengths: [9], formats: { 9: '## ### ####' }, trunk: '0', example: '850123456' },
+    { iso: 'IT', dial: '39', lengths: [6, 7, 8, 9, 10, 11], formats: { 9: '### ### ###', 10: '### ### ####' }, example: '3123456789' },
+    { iso: 'NL', dial: '31', lengths: [9], formats: { 9: '# ########' }, trunk: '0', example: '612345678' },
+    { iso: 'NO', dial: '47', lengths: [8], formats: { 8: '### ## ###' }, example: '40612345' },
+    { iso: 'PL', dial: '48', lengths: [9], formats: { 9: '### ### ###' }, example: '512345678' },
+    { iso: 'PT', dial: '351', lengths: [9], formats: { 9: '### ### ###' }, example: '912345678' },
+    { iso: 'GB', dial: '44', lengths: [10], formats: { 10: '#### ######' }, trunk: '0', example: '7400123456' },
+    { iso: 'CH', dial: '41', lengths: [9], formats: { 9: '## ### ## ##' }, trunk: '0', example: '781234567' },
+    { iso: 'SE', dial: '46', lengths: [9], formats: { 9: '##-### ## ##' }, trunk: '0', example: '701234567' },
+    // --- Asia, Oceanía, África y Oriente Medio ---
+    { iso: 'AU', dial: '61', lengths: [9], formats: { 9: '### ### ###' }, trunk: '0', example: '412345678' },
+    { iso: 'CN', dial: '86', lengths: [11], formats: { 11: '### #### ####' }, trunk: '0', example: '13123456789' },
+    { iso: 'IN', dial: '91', lengths: [10], formats: { 10: '##### #####' }, trunk: '0', example: '8123456789' },
+    { iso: 'IL', dial: '972', lengths: [9], formats: { 9: '##-###-####' }, trunk: '0', example: '502345678' },
+    { iso: 'JP', dial: '81', lengths: [10], formats: { 10: '##-####-####' }, trunk: '0', example: '9012345678' },
+    { iso: 'KR', dial: '82', lengths: [9, 10], formats: { 9: '##-###-####', 10: '##-####-####' }, trunk: '0', example: '1020000000' },
+    { iso: 'NZ', dial: '64', lengths: [8, 9, 10], formats: { 8: '## ### ###', 9: '## ### ####', 10: '## #### ####' }, trunk: '0', example: '211234567' },
+    { iso: 'AE', dial: '971', lengths: [9], formats: { 9: '## ### ####' }, trunk: '0', example: '501234567' },
+    { iso: 'ZA', dial: '27', lengths: [9], formats: { 9: '## ### ####' }, trunk: '0', example: '711234567' },
+];
+/** Emoji de bandera a partir del código ISO (indicadores regionales). */
+function cbFlagEmoji(iso) {
+    return iso.toUpperCase().replace(/[A-Z]/g, (c) => String.fromCodePoint(0x1f1e6 + c.charCodeAt(0) - 65));
+}
+/** Aplica el formato del país al número nacional (solo dígitos), también a medio escribir. */
+function cbFormatNational(country, digits) {
+    if (!digits)
+        return '';
+    const lengths = [...country.lengths].sort((a, b) => a - b);
+    // El formato de la longitud más cercana por arriba; si se pasa, el de la mayor.
+    const target = lengths.find((l) => digits.length <= l) ?? lengths[lengths.length - 1];
+    const pattern = country.formats?.[target] ?? '### ### ### ### ###';
+    let out = '';
+    let d = 0;
+    for (const ch of pattern) {
+        if (d >= digits.length)
+            break;
+        if (ch === '#')
+            out += digits[d++];
+        else
+            out += ch;
+    }
+    // Dígitos que sobran del patrón (número demasiado largo): se añaden tal cual.
+    if (d < digits.length)
+        out += (out ? ' ' : '') + digits.slice(d);
+    return out.replace(/[\s()-]+$/, '');
+}
+/**
+ * Interpreta lo escrito o pegado. Con `+` o `00` detecta el país por el prefijo
+ * (el más largo que coincide; entre los que comparten prefijo, por el comienzo
+ * del número o, si no, el país actual). Sin prefijo, usa `current` y quita su 0 nacional.
+ */
+function cbParsePhone(text, current, countries) {
+    const raw = (text ?? '').trim();
+    const international = /^(\+|00)/.test(raw);
+    let digits = raw.replace(/\D/g, '');
+    if (international) {
+        if (raw.startsWith('00'))
+            digits = digits.slice(2);
+        const candidates = countries
+            .filter((c) => digits.startsWith(c.dial))
+            .sort((a, b) => b.dial.length - a.dial.length);
+        if (!candidates.length)
+            return { country: current, national: digits };
+        const dial = candidates[0].dial;
+        const national = digits.slice(dial.length);
+        const sameDial = candidates.filter((c) => c.dial === dial);
+        const byLeading = sameDial.find((c) => c.leading?.some((p) => national.startsWith(p)));
+        const country = byLeading ??
+            (current && current.dial === dial ? current : null) ??
+            sameDial.find((c) => !c.leading) ??
+            sameDial[0];
+        return { country, national: stripTrunk(country, national) };
+    }
+    return { country: current, national: current ? stripTrunk(current, digits) : digits };
+}
+function stripTrunk(country, digits) {
+    return country.trunk && digits.startsWith(country.trunk) ? digits.slice(country.trunk.length) : digits;
+}
+/** Número completo en formato E.164 (`+573001234567`), o `''` sin dígitos. */
+function cbToE164(country, national) {
+    if (!national)
+        return '';
+    return country ? `+${country.dial}${national}` : `+${national}`;
+}
+/** Si la longitud del número nacional es válida para el país. */
+function cbIsValidPhone(country, national) {
+    return !!country && country.lengths.includes(national.length) && /^\d+$/.test(national);
+}
+
+let nextUid = 0;
+const toBoolean = (value) => value !== false && value !== 'false' && value != null;
+/**
+ * Teléfono internacional de CaribeNG: selector de país (bandera, nombre y
+ * prefijo, con buscador) y número que se formatea mientras se escribe. El
+ * valor es E.164 (`+573001234567`), listo para guardar o enviar. Al pegar un
+ * número con `+` o `00` detecta el país.
+ *
+ * Funciona con Angular Forms (`formControlName`, `ngModel`) y añade el error
+ * `{ phone: true }` si el número está incompleto o no es válido para el país.
+ *
+ * @example
+ * ```html
+ * <cb-phone-input label="Celular" formControlName="celular" country="CO" [preferredCountries]="['CO', 'MX', 'US']" />
+ * ```
+ */
+class CbPhoneInput {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.injector = inject(Injector);
+        this.triggerEl = viewChild.required('trigger');
+        this.fieldEl = viewChild.required('field');
+        this.searchEl = viewChild('search', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchEl" }] : /* istanbul ignore next */ []));
+        this.panelTpl = viewChild.required('panel');
+        this.overlayRef = null;
+        this.inputId = `cb-phone-input-${++nextUid}`;
+        this.listId = `${this.inputId}-countries`;
+        /** Número en formato E.164 (`+573001234567`); `''` si está vacío. */
+        this.value = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** País seleccionado (código ISO). */
+        this.country = model('CO', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "country" }] : /* istanbul ignore next */ []));
+        /** Países disponibles. Por defecto, `CB_PHONE_COUNTRIES`; puedes pasar otros o filtrar por código ISO. */
+        this.countries = input(CB_PHONE_COUNTRIES, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "countries" }] : /* istanbul ignore next */ []));
+        /** Países que aparecen primero en la lista (código ISO). */
+        this.preferredCountries = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preferredCountries" }] : /* istanbul ignore next */ []));
+        /** Bloquea el país (solo se escribe el número). */
+        this.countryLocked = input(false, { ...(ngDevMode ? { debugName: "countryLocked" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Muestra la bandera (emoji). En Windows algunos navegadores la muestran como letras. */
+        this.showFlag = input(true, { ...(ngDevMode ? { debugName: "showFlag" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.hint = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        /** Error a mostrar. Por defecto, "Número de teléfono incompleto o no válido" cuando lo es. */
+        this.error = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        this.requiredIndicator = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []));
+        /** Placeholder. Por defecto, un número de ejemplo del país. */
+        this.placeholder = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: toBoolean });
+        /** Cada cambio con el número E.164, el nacional, el país y si es válido. */
+        this.phoneChange = output();
+        this.fieldState = cbFieldState({
+            invalid: () => this.invalid(),
+            required: () => this.required(),
+            requiredIndicator: () => this.requiredIndicator(),
+        });
+        /** Número nacional (solo dígitos). */
+        this.national = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "national" }] : /* istanbul ignore next */ []));
+        this.touched = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.cvaDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.open = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.query = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.active = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.displayNames = computed(() => {
+            try {
+                return new Intl.DisplayNames([this.t().intlLocale], { type: 'region' });
+            }
+            catch {
+                return null;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayNames" }] : /* istanbul ignore next */ []));
+        this.list = computed(() => {
+            const byIso = new Map(CB_PHONE_COUNTRIES.map((c) => [c.iso, c]));
+            const items = this.countries()
+                .map((c) => (typeof c === 'string' ? byIso.get(c.toUpperCase()) : c))
+                .filter((c) => !!c);
+            const preferred = this.preferredCountries().map((iso) => iso.toUpperCase());
+            const rank = (c) => {
+                const i = preferred.indexOf(c.iso);
+                return i < 0 ? preferred.length : i;
+            };
+            return [...items].sort((a, b) => rank(a) - rank(b) || this.name(a).localeCompare(this.name(b), this.t().intlLocale));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => {
+            const iso = this.country().toUpperCase();
+            return this.list().find((c) => c.iso === iso) ?? this.list()[0] ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.filtered = computed(() => {
+            const q = this.normalize(this.query().trim().replace(/^\+/, ''));
+            if (!q)
+                return this.list();
+            return this.list().filter((c) => this.normalize(this.name(c)).includes(q) || c.dial.startsWith(q) || c.iso.toLowerCase() === q);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+        this.activeId = computed(() => {
+            const c = this.filtered()[this.active()];
+            return c ? `${this.listId}-${c.iso}` : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+        this.display = computed(() => {
+            const c = this.selected();
+            return c ? cbFormatNational(c, this.national()) : this.national();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        this.examplePlaceholder = computed(() => {
+            const c = this.selected();
+            return c?.example ? cbFormatNational(c, c.example) : '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "examplePlaceholder" }] : /* istanbul ignore next */ []));
+        this.isValid = computed(() => !this.national() || cbIsValidPhone(this.selected(), this.national()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+        this.showInvalid = computed(() => this.fieldState.invalid() || (this.touched() && !this.isValid()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+        this.errorText = computed(() => this.error() ?? (!this.isValid() ? this.t().phoneInvalid : ''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+        this.countryLabel = computed(() => {
+            const c = this.selected();
+            return c ? `${this.t().phoneCountry}: ${this.name(c)} (+${c.dial})` : this.t().phoneCountry;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "countryLabel" }] : /* istanbul ignore next */ []));
+        this.describedBy = computed(() => {
+            if (this.showInvalid() && this.errorText())
+                return `${this.inputId}-error`;
+            if (this.hint())
+                return `${this.inputId}-hint`;
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.onValidatorChange = () => { };
+        // `[(value)]` fuera de Angular Forms: un valor nuevo desde fuera se interpreta.
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value !== cbToE164(this.selected(), this.national()))
+                    this.applyText(value, false);
+            });
+        });
+    }
+    flag(c) {
+        return cbFlagEmoji(c.iso);
+    }
+    name(c) {
+        return this.displayNames()?.of(c.iso) ?? c.iso;
+    }
+    normalize(text) {
+        return text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+    }
+    // --- ControlValueAccessor / Validator --------------------------------------
+    writeValue(value) {
+        this.applyText(value ?? '', false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    validate(_control) {
+        return this.isValid() ? null : { phone: true };
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // --- Número ------------------------------------------------------------------
+    onInput(event) {
+        const el = event.target;
+        // Posición del cursor contada en dígitos, para restaurarla tras reformatear.
+        const caretDigits = el.value.slice(0, el.selectionStart ?? el.value.length).replace(/\D/g, '').length;
+        this.applyText(el.value, true);
+        const formatted = this.display();
+        el.value = formatted;
+        let pos = 0;
+        for (let seen = 0; pos < formatted.length && seen < caretDigits; pos++)
+            if (/\d/.test(formatted[pos]))
+                seen++;
+        el.setSelectionRange?.(pos, pos);
+    }
+    onBlur() {
+        this.touched.set(true);
+        this.onTouched();
+    }
+    /** Interpreta texto escrito, pegado o recibido (E.164 o nacional). */
+    applyText(text, emit) {
+        const parsed = cbParsePhone(text, this.selected(), this.list());
+        if (parsed.country && parsed.country.iso !== this.selected()?.iso)
+            this.country.set(parsed.country.iso);
+        const country = parsed.country ?? this.selected();
+        const max = country ? Math.max(...country.lengths) : 15;
+        this.national.set(parsed.national.slice(0, max));
+        this.publish(emit);
+    }
+    publish(emit) {
+        const country = this.selected();
+        const national = this.national();
+        const e164 = cbToE164(country, national);
+        this.value.set(e164);
+        this.onValidatorChange();
+        if (!emit)
+            return;
+        this.onChange(e164);
+        this.phoneChange.emit({ e164, national, country: country?.iso ?? '', valid: !!national && cbIsValidPhone(country, national) });
+    }
+    // --- Selector de país ------------------------------------------------------------
+    toggle() {
+        if (this.open())
+            this.close();
+        else
+            this.openPanel();
+    }
+    openFromKeyboard(event) {
+        event.preventDefault();
+        if (!this.open())
+            this.openPanel();
+    }
+    openPanel() {
+        if (this.overlayRef || this.isDisabled() || this.countryLocked())
+            return;
+        this.query.set('');
+        const index = this.list().findIndex((c) => c.iso === this.selected()?.iso);
+        this.active.set(Math.max(0, index));
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.triggerEl().nativeElement)
+                .withPositions([
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+            ])
+                .withPush(true),
+        });
+        this.overlayRef.attach(new TemplatePortal(this.panelTpl(), this.vcr));
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        this.open.set(true);
+        afterNextRender(() => {
+            this.searchEl()?.nativeElement.focus();
+            this.scrollActiveIntoView();
+        }, { injector: this.injector });
+    }
+    /** Cierra la lista de países. */
+    close(focusTrigger = true) {
+        if (!this.overlayRef)
+            return;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.open.set(false);
+        if (focusTrigger)
+            this.triggerEl().nativeElement.focus();
+    }
+    choose(c) {
+        this.country.set(c.iso);
+        this.national.set(this.national().slice(0, Math.max(...c.lengths)));
+        this.close(false);
+        this.publish(true);
+        this.fieldEl().nativeElement.focus();
+    }
+    onSearchKeydown(event) {
+        const count = this.filtered().length;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!count)
+                    return;
+                this.active.set((this.active() + (event.key === 'ArrowDown' ? 1 : -1) + count) % count);
+                this.scrollActiveIntoView();
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const c = this.filtered()[this.active()];
+                if (c)
+                    this.choose(c);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'Tab':
+                this.close(false);
+                break;
+        }
+    }
+    scrollActiveIntoView() {
+        const id = this.activeId();
+        afterNextRender(() => (id ? this.overlayRef?.overlayElement.querySelector(`#${id}`)?.scrollIntoView?.({ block: 'nearest' }) : null), {
+            injector: this.injector,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPhoneInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPhoneInput, isStandalone: true, selector: "cb-phone-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, countries: { classPropertyName: "countries", publicName: "countries", isSignal: true, isRequired: false, transformFunction: null }, preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null }, countryLocked: { classPropertyName: "countryLocked", publicName: "countryLocked", isSignal: true, isRequired: false, transformFunction: null }, showFlag: { classPropertyName: "showFlag", publicName: "showFlag", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, requiredIndicator: { classPropertyName: "requiredIndicator", publicName: "requiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", country: "countryChange", phoneChange: "phoneChange" }, host: { classAttribute: "cb-phone-input" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbPhoneInput), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => CbPhoneInput), multi: true },
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="cb-phone-input__label" [attr.for]="inputId">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-phone-input__required cb-phone-input__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <div
+      class="cb-phone-input__control"
+      [class]="'cb-phone-input__control--' + size()"
+      [class.cb-is-invalid]="showInvalid()"
+      [class.cb-is-disabled]="isDisabled()"
+    >
+      <button
+        #trigger
+        type="button"
+        class="cb-phone-input__country"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? listId : null"
+        [attr.aria-label]="countryLabel()"
+        [disabled]="isDisabled() || countryLocked()"
+        (click)="toggle()"
+        (keydown.arrowdown)="openFromKeyboard($event)"
+      >
+        @if (selected(); as c) {
+          @if (showFlag()) {
+            <span class="cb-phone-input__flag" aria-hidden="true">{{ flag(c) }}</span>
+          }
+          <span class="cb-phone-input__dial" aria-hidden="true">+{{ c.dial }}</span>
+        }
+        @if (!countryLocked()) {
+          <cb-icon name="chevron-down" [size]="14" aria-hidden="true" />
+        }
+      </button>
+      <input
+        #field
+        class="cb-phone-input__field"
+        type="tel"
+        inputmode="tel"
+        autocomplete="tel-national"
+        [id]="inputId"
+        [value]="display()"
+        [placeholder]="placeholder() ?? examplePlaceholder()"
+        [disabled]="isDisabled()"
+        [required]="fieldState.required()"
+        [attr.aria-invalid]="showInvalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+    </div>
+    @if (showInvalid() && errorText()) {
+      <p class="cb-phone-input__message cb-phone-input__message--error" [id]="inputId + '-error'" role="alert">{{ errorText() }}</p>
+    } @else if (hint()) {
+      <p class="cb-phone-input__message" [id]="inputId + '-hint'">{{ hint() }}</p>
+    }
+
+    <ng-template #panel>
+      <div class="cb-phone-input__panel">
+        <input
+          #search
+          class="cb-phone-input__search"
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded="true"
+          autocomplete="off"
+          [attr.aria-controls]="listId"
+          [attr.aria-activedescendant]="activeId()"
+          [attr.aria-label]="t().searchCountry"
+          [placeholder]="t().searchCountry"
+          [value]="query()"
+          (input)="query.set($any($event.target).value); active.set(0)"
+          (keydown)="onSearchKeydown($event)"
+        />
+        <ul class="cb-phone-input__list" role="listbox" [id]="listId" [attr.aria-label]="t().phoneCountry">
+          @for (c of filtered(); track c.iso; let i = $index) {
+            <li
+              role="option"
+              class="cb-phone-input__option"
+              [id]="listId + '-' + c.iso"
+              [class.cb-phone-input__option--active]="i === active()"
+              [attr.aria-selected]="c.iso === selected()?.iso"
+              (mousemove)="active.set(i)"
+              (mousedown)="$event.preventDefault()"
+              (click)="choose(c)"
+            >
+              @if (showFlag()) {
+                <span class="cb-phone-input__flag" aria-hidden="true">{{ flag(c) }}</span>
+              }
+              <span class="cb-phone-input__name">{{ name(c) }}</span>
+              <span class="cb-phone-input__option-dial">+{{ c.dial }}</span>
+            </li>
+          } @empty {
+            <li class="cb-phone-input__empty" role="presentation">{{ t().noResults }}</li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans)}.cb-phone-input__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-phone-input__required{margin-left:2px;color:var(--cb-color-danger)}.cb-phone-input__required--required,.cb-phone-input__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-phone-input__control{display:flex;align-items:stretch;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-phone-input__control:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-phone-input__control:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-phone-input__control.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-phone-input__control.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-phone-input__control.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-phone-input__country{display:inline-flex;flex:none;align-items:center;gap:.375rem;padding:0 .625rem 0 .75rem;border:0;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-phone-input__country:disabled{cursor:default}.cb-phone-input__country:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-phone-input__flag{font-size:1.15em;line-height:1}.cb-phone-input__dial{font-variant-numeric:tabular-nums}.cb-phone-input__field{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-variant-numeric:tabular-nums}.cb-phone-input__field::placeholder{color:var(--cb-color-text-muted)}.cb-phone-input__field:disabled{cursor:not-allowed;color:var(--cb-color-text-muted)}.cb-phone-input__control--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-phone-input__control--sm .cb-phone-input__field{padding:var(--cb-space-1) var(--cb-space-2)}.cb-phone-input__control--md{min-height:2.5rem;font-size:var(--cb-text-base)}.cb-phone-input__control--md .cb-phone-input__field{padding:var(--cb-space-2) var(--cb-space-3)}.cb-phone-input__control--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-phone-input__control--lg .cb-phone-input__field{padding:var(--cb-space-3) var(--cb-space-4)}.cb-phone-input__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-phone-input__message--error{color:var(--cb-color-danger)}.cb-phone-input__panel{display:flex;flex-direction:column;width:20rem;max-width:calc(100vw - 2rem);max-height:20rem;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-phone-input__search{margin:.5rem;padding:.5rem .625rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:inherit;font:inherit;font-size:var(--cb-text-sm)}.cb-phone-input__search:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-phone-input__list{flex:1;margin:0;padding:0 .375rem .375rem;overflow-y:auto;list-style:none}.cb-phone-input__option{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-phone-input__option--active{background:var(--cb-color-surface-hover)}.cb-phone-input__option[aria-selected=true]{font-weight:var(--cb-font-weight-semibold, 600)}.cb-phone-input__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-phone-input__option-dial{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-phone-input__empty{padding:1rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPhoneInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-phone-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-phone-input' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbPhoneInput), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => CbPhoneInput), multi: true },
+                    ], template: `
+    @if (label()) {
+      <label class="cb-phone-input__label" [attr.for]="inputId">
+        {{ label() }}
+        @if (fieldState.indicator(); as mark) {
+          <span [class]="'cb-phone-input__required cb-phone-input__required--' + mark.kind" [attr.aria-hidden]="mark.kind === 'optional' ? null : 'true'">{{ mark.text }}</span>
+        }
+      </label>
+    }
+    <div
+      class="cb-phone-input__control"
+      [class]="'cb-phone-input__control--' + size()"
+      [class.cb-is-invalid]="showInvalid()"
+      [class.cb-is-disabled]="isDisabled()"
+    >
+      <button
+        #trigger
+        type="button"
+        class="cb-phone-input__country"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? listId : null"
+        [attr.aria-label]="countryLabel()"
+        [disabled]="isDisabled() || countryLocked()"
+        (click)="toggle()"
+        (keydown.arrowdown)="openFromKeyboard($event)"
+      >
+        @if (selected(); as c) {
+          @if (showFlag()) {
+            <span class="cb-phone-input__flag" aria-hidden="true">{{ flag(c) }}</span>
+          }
+          <span class="cb-phone-input__dial" aria-hidden="true">+{{ c.dial }}</span>
+        }
+        @if (!countryLocked()) {
+          <cb-icon name="chevron-down" [size]="14" aria-hidden="true" />
+        }
+      </button>
+      <input
+        #field
+        class="cb-phone-input__field"
+        type="tel"
+        inputmode="tel"
+        autocomplete="tel-national"
+        [id]="inputId"
+        [value]="display()"
+        [placeholder]="placeholder() ?? examplePlaceholder()"
+        [disabled]="isDisabled()"
+        [required]="fieldState.required()"
+        [attr.aria-invalid]="showInvalid() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+    </div>
+    @if (showInvalid() && errorText()) {
+      <p class="cb-phone-input__message cb-phone-input__message--error" [id]="inputId + '-error'" role="alert">{{ errorText() }}</p>
+    } @else if (hint()) {
+      <p class="cb-phone-input__message" [id]="inputId + '-hint'">{{ hint() }}</p>
+    }
+
+    <ng-template #panel>
+      <div class="cb-phone-input__panel">
+        <input
+          #search
+          class="cb-phone-input__search"
+          type="text"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded="true"
+          autocomplete="off"
+          [attr.aria-controls]="listId"
+          [attr.aria-activedescendant]="activeId()"
+          [attr.aria-label]="t().searchCountry"
+          [placeholder]="t().searchCountry"
+          [value]="query()"
+          (input)="query.set($any($event.target).value); active.set(0)"
+          (keydown)="onSearchKeydown($event)"
+        />
+        <ul class="cb-phone-input__list" role="listbox" [id]="listId" [attr.aria-label]="t().phoneCountry">
+          @for (c of filtered(); track c.iso; let i = $index) {
+            <li
+              role="option"
+              class="cb-phone-input__option"
+              [id]="listId + '-' + c.iso"
+              [class.cb-phone-input__option--active]="i === active()"
+              [attr.aria-selected]="c.iso === selected()?.iso"
+              (mousemove)="active.set(i)"
+              (mousedown)="$event.preventDefault()"
+              (click)="choose(c)"
+            >
+              @if (showFlag()) {
+                <span class="cb-phone-input__flag" aria-hidden="true">{{ flag(c) }}</span>
+              }
+              <span class="cb-phone-input__name">{{ name(c) }}</span>
+              <span class="cb-phone-input__option-dial">+{{ c.dial }}</span>
+            </li>
+          } @empty {
+            <li class="cb-phone-input__empty" role="presentation">{{ t().noResults }}</li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `, styles: [":host{display:block;min-width:0;font-family:var(--cb-font-sans)}.cb-phone-input__label{display:block;margin-bottom:var(--cb-space-1);font-size:var(--cb-text-sm);font-weight:var(--cb-font-weight-medium);color:var(--cb-color-text)}.cb-phone-input__required{margin-left:2px;color:var(--cb-color-danger)}.cb-phone-input__required--required,.cb-phone-input__required--optional{margin-left:.25rem;color:var(--cb-color-text-muted);font-size:.85em;font-weight:var(--cb-font-weight-normal, 400)}.cb-phone-input__control{display:flex;align-items:stretch;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background-color:var(--cb-color-bg);transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-phone-input__control:hover:not(.cb-is-disabled):not(:focus-within){border-color:var(--cb-color-text-muted)}.cb-phone-input__control:focus-within{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-primary-500) 25%,transparent)}.cb-phone-input__control.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-phone-input__control.cb-is-invalid:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}.cb-phone-input__control.cb-is-disabled{background-color:var(--cb-color-surface);opacity:.8}.cb-phone-input__country{display:inline-flex;flex:none;align-items:center;gap:.375rem;padding:0 .625rem 0 .75rem;border:0;border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-phone-input__country:disabled{cursor:default}.cb-phone-input__country:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-phone-input__flag{font-size:1.15em;line-height:1}.cb-phone-input__dial{font-variant-numeric:tabular-nums}.cb-phone-input__field{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--cb-color-text);font:inherit;font-variant-numeric:tabular-nums}.cb-phone-input__field::placeholder{color:var(--cb-color-text-muted)}.cb-phone-input__field:disabled{cursor:not-allowed;color:var(--cb-color-text-muted)}.cb-phone-input__control--sm{min-height:2rem;font-size:var(--cb-text-sm)}.cb-phone-input__control--sm .cb-phone-input__field{padding:var(--cb-space-1) var(--cb-space-2)}.cb-phone-input__control--md{min-height:2.5rem;font-size:var(--cb-text-base)}.cb-phone-input__control--md .cb-phone-input__field{padding:var(--cb-space-2) var(--cb-space-3)}.cb-phone-input__control--lg{min-height:3rem;font-size:var(--cb-text-lg)}.cb-phone-input__control--lg .cb-phone-input__field{padding:var(--cb-space-3) var(--cb-space-4)}.cb-phone-input__message{margin:var(--cb-space-1) 0 0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm)}.cb-phone-input__message--error{color:var(--cb-color-danger)}.cb-phone-input__panel{display:flex;flex-direction:column;width:20rem;max-width:calc(100vw - 2rem);max-height:20rem;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised);box-shadow:var(--cb-shadow-lg);color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-phone-input__search{margin:.5rem;padding:.5rem .625rem;border:1px solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:inherit;font:inherit;font-size:var(--cb-text-sm)}.cb-phone-input__search:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-phone-input__list{flex:1;margin:0;padding:0 .375rem .375rem;overflow-y:auto;list-style:none}.cb-phone-input__option{display:flex;align-items:center;gap:.625rem;padding:.5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-phone-input__option--active{background:var(--cb-color-surface-hover)}.cb-phone-input__option[aria-selected=true]{font-weight:var(--cb-font-weight-semibold, 600)}.cb-phone-input__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-phone-input__option-dial{color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-phone-input__empty{padding:1rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm);text-align:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }, { type: i0.Output, args: ["countryChange"] }], countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }], countryLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryLocked", required: false }] }], showFlag: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFlag", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], phoneChange: [{ type: i0.Output, args: ["phoneChange"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/phone-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CB_PHONE_COUNTRIES, CbPhoneInput, cbFlagEmoji, cbFormatNational, cbIsValidPhone, cbParsePhone, cbToE164 };