ngxsmk-tel-input
Version:
Angular international telephone input (intl-tel-input UI + libphonenumber-js validation). ControlValueAccessor. SSR-safe.
577 lines (566 loc) • 30.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, PLATFORM_ID, forwardRef, Output, Input, ViewChild, Component } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
class NgxsmkTelInputService {
parse(input, iso2) {
const phone = parsePhoneNumberFromString(input || '', iso2);
if (!phone)
return { e164: null, national: null, isValid: false };
const isValid = phone.isValid();
return { e164: isValid ? phone.number : null, national: phone.formatNational(), isValid };
}
isValid(input, iso2) {
const phone = parsePhoneNumberFromString(input || '', iso2);
return !!phone && phone.isValid();
}
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'];
this.nationalMode = false;
this.separateDialCode = false;
this.allowDropdown = true;
this.lockWhenValid = true;
this.autocomplete = 'tel';
this.disabled = false;
this.size = 'md';
this.variant = 'outline';
this.showClear = true;
this.autoFocus = false;
this.selectOnFocus = false;
this.formatOnBlur = true;
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'; // default OFF since no utils fallback
this.formatWhenValid = 'blur';
/* Digits-only controls */
this.digitsOnly = true;
this.allowLeadingPlus = true;
/* 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.resolvedId = this.inputId || ('tel-' + Math.random().toString(36).slice(2));
this.platformId = inject(PLATFORM_ID);
}
ngAfterViewInit() {
if (!isPlatformBrowser(this.platformId))
return;
void this.initAndWire();
}
async initAndWire() {
await this.initIntlTelInput();
this.bindDomListeners();
if (this.pendingWrite !== null) {
this.setInputValue(this.pendingWrite);
this.handleInput();
this.pendingWrite = null;
}
if (this.autoFocus)
setTimeout(() => this.focus(), 0);
}
ngOnChanges(changes) {
if (!isPlatformBrowser(this.platformId))
return;
const configChanged = [
'initialCountry', 'preferredCountries', 'onlyCountries',
'separateDialCode', 'allowDropdown', 'nationalMode',
'i18n', 'localizedCountries', 'dir',
'autoPlaceholder', 'utilsScript', 'customPlaceholder',
'digitsOnly', 'allowLeadingPlus'
].some(k => k in changes && !changes[k]?.firstChange);
if (configChanged && this.iti) {
this.reinitPlugin();
this.validatorChange?.();
}
}
ngOnDestroy() {
this.destroyPlugin();
}
// ----- CVA -----
writeValue(val) {
if (!this.inputRef)
return;
if (!this.iti) {
this.pendingWrite = val ?? '';
return;
}
this.setInputValue(val ?? '');
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouchedCb = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
if (this.inputRef)
this.inputRef.nativeElement.disabled = isDisabled;
}
// ----- Validator -----
validate(_) {
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() {
this.inputRef?.nativeElement.focus();
if (this.selectOnFocus) {
const el = this.inputRef.nativeElement;
queueMicrotask(() => el.setSelectionRange(0, el.value.length));
}
}
selectCountry(iso2) {
if (this.iti) {
this.iti.setCountry(iso2.toLowerCase());
this.handleInput();
}
}
clearInput() {
this.setInputValue('');
this.handleInput();
this.inputRef.nativeElement.focus();
}
// ----- Plugin wiring -----
async initIntlTelInput() {
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: this.nationalMode,
allowDropdown: this.allowDropdown,
separateDialCode: this.separateDialCode,
geoIpLookup: (cb) => cb('us'),
// placeholders
autoPlaceholder: this.autoPlaceholder,
utilsScript: this.utilsScript,
customPlaceholder: this.customPlaceholder,
// localization
i18n: this.i18n,
localizedCountries: toLowerKeys(this.localizedCountries),
// dropdown container
dropdownContainer: this.dropdownAttachToBody && typeof document !== 'undefined' ? document.body : undefined
};
this.zone.runOutsideAngular(() => {
this.iti = intlTelInput(this.inputRef.nativeElement, config);
});
this.inputRef.nativeElement.style.setProperty('--tel-dd-z', String(this.dropdownZIndex));
}
reinitPlugin() {
const current = this.currentRaw();
this.destroyPlugin();
this.initIntlTelInput().then(() => {
if (current) {
this.setInputValue(current);
this.handleInput();
}
});
}
destroyPlugin() {
if (this.iti) {
this.iti.destroy();
this.iti = null;
}
if (this.inputRef?.nativeElement) {
const el = this.inputRef.nativeElement;
const clone = el.cloneNode(true);
el.parentNode?.replaceChild(clone, el);
this.inputRef.nativeElement = clone;
}
}
// ----- Input filtering (digits-only) -----
sanitizeDigits(value) {
if (!this.digitsOnly)
return value;
let v = value.replace(/[^\d+]/g, '');
if (this.allowLeadingPlus) {
const hasLeadingPlus = v.startsWith('+');
v = (hasLeadingPlus ? '+' : '') + v.replace(/\+/g, '');
}
else {
v = v.replace(/\+/g, '');
}
return v;
}
bindDomListeners() {
const el = this.inputRef.nativeElement;
this.zone.runOutsideAngular(() => {
el.addEventListener('beforeinput', (ev) => {
if (!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';
const isPlusAtStart = this.allowLeadingPlus && data === '+' && (el.selectionStart ?? 0) === 0 && !el.value.includes('+');
if (selCollapsed && (isDigit || isPlusAtStart)) {
ev.preventDefault();
return;
}
}
// normal filtering when not valid (or replacing text)
if (!data || ev.inputType !== 'insertText')
return;
const pos = el.selectionStart ?? 0;
const isDigit = data >= '0' && data <= '9';
const isPlusAtStart = this.allowLeadingPlus && data === '+' && pos === 0 && !el.value.includes('+');
if (!isDigit && !isPlusAtStart)
ev.preventDefault();
});
el.addEventListener('paste', (e) => {
if (!this.digitsOnly)
return;
const text = (e.clipboardData || window.clipboardData).getData('text') || '';
const hasAnyDigit = /[0-9]/.test(text);
// block pasting extra digits if valid and there is no selection
if (this.lockWhenValid && this.isCurrentlyValid()) {
const selCollapsed = (el.selectionStart ?? 0) === (el.selectionEnd ?? 0);
if (selCollapsed && hasAnyDigit) {
e.preventDefault();
return;
}
}
// sanitize paste
e.preventDefault();
const sanitized = this.sanitizeDigits(text);
const start = el.selectionStart ?? el.value.length;
const end = el.selectionEnd ?? el.value.length;
el.setRangeText(sanitized, start, end, 'end');
queueMicrotask(() => this.handleInput());
});
el.addEventListener('input', () => {
if (this.digitsOnly) {
const val = el.value;
const sanitized = this.sanitizeDigits(val);
if (val !== sanitized) {
const caret = el.selectionStart ?? sanitized.length;
el.value = sanitized;
el.setSelectionRange(caret, caret);
}
}
this.handleInput();
});
el.addEventListener('countrychange', () => {
const iso2 = this.currentIso2();
this.zone.run(() => {
this.countryChange.emit({ iso2 });
this.validatorChange?.();
});
this.handleInput();
});
el.addEventListener('blur', () => this.onBlur());
});
}
onBlur() {
this.touched = true;
this.zone.run(() => this.onTouchedCb());
if (!this.formatOnBlur)
return;
const raw = this.currentRaw();
if (!raw)
return;
const iso2 = this.currentIso2();
const parsed = this.tel.parse(raw, iso2);
// only format on blur if valid
if (parsed.isValid && this.nationalMode && parsed.national) {
this.setInputValue((parsed.national || '').replace(/\s{2,}/g, ' '));
}
}
onFocus() {
if (this.selectOnFocus) {
const el = this.inputRef.nativeElement;
queueMicrotask(() => el.setSelectionRange(0, el.value.length));
}
}
handleInput() {
let raw = this.currentRaw();
const iso2 = this.currentIso2();
// Parse once
const parsed = this.tel.parse(raw, iso2);
// live format only when valid
if (this.formatWhenValid === 'typing' && raw && parsed.isValid) {
const formatted = this.formatAsYouType(raw, iso2);
if (formatted !== raw) {
this.setInputValue(formatted);
raw = formatted;
}
}
// emit
this.zone.run(() => this.onChange(parsed.e164)); // E.164 or null
this.zone.run(() => this.inputChange.emit({ raw, e164: parsed.e164, iso2 }));
// national pretty-print normalization, only if valid
if (raw && this.nationalMode && parsed.isValid && parsed.national) {
const normalized = parsed.national.replace(/\s{2,}/g, ' ');
if (normalized !== raw)
this.setInputValue(normalized);
}
}
formatAsYouType(raw, iso2) {
try {
// When a region is provided, AsYouType returns NATIONAL formatting
const fmt = new AsYouType(iso2);
return fmt.input(raw);
}
catch {
return raw;
}
}
currentRaw() {
return (this.inputRef?.nativeElement.value ?? '').trim();
}
currentIso2() {
const iso2 = (this.iti?.getSelectedCountryData?.().iso2 ?? this.initialCountry ?? 'US')
.toString().toUpperCase();
return iso2;
}
setInputValue(v) {
this.inputRef.nativeElement.value = v ?? '';
}
get showError() {
const invalid = !!this.validate({});
return this.showErrorWhenTouched ? (this.touched && invalid) : invalid;
}
isCurrentlyValid() {
return this.tel.isValid(this.currentRaw(), this.currentIso2());
}
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", nationalMode: "nationalMode", separateDialCode: "separateDialCode", allowDropdown: "allowDropdown", lockWhenValid: "lockWhenValid", 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", formatOnBlur: "formatOnBlur", showErrorWhenTouched: "showErrorWhenTouched", dropdownAttachToBody: "dropdownAttachToBody", dropdownZIndex: "dropdownZIndex", i18n: "i18n", telI18n: "telI18n", localizedCountries: "localizedCountries", telLocalizedCountries: "telLocalizedCountries", clearAriaLabel: "clearAriaLabel", dir: "dir", autoPlaceholder: "autoPlaceholder", utilsScript: "utilsScript", customPlaceholder: "customPlaceholder", formatWhenValid: "formatWhenValid", digitsOnly: "digitsOnly", allowLeadingPlus: "allowLeadingPlus" }, 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">
(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'"
[attr.pattern]="digitsOnly ? (allowLeadingPlus ? '\\\\+?[0-9]*' : '[0-9]*') : null"
[disabled]="disabled"
[attr.aria-invalid]="showError ? 'true' : 'false'"
(blur)="onBlur()"
(focus)="onFocus()"
/>
</div>
(showClear && currentRaw()) {
<button type="button"
class="ngxsmk-tel__clear"
(click)="clearInput()"
[attr.aria-label]="clearAriaLabel">
×
</button>
}
</div>
(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-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}:host-context(.dark){--tel-bg: #0b0f17;--tel-fg: #e5e7eb;--tel-border: #334155;--tel-border-hover: #475569;--tel-ring: #60a5fa;--tel-placeholder: #94a3b8;--tel-dd-bg: #0f1521;--tel-dd-border: #324056;--tel-dd-search-bg: rgba(148, 163, 184, .12)}.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,box-shadow .15s,background .15s}.ngxsmk-tel-input__control::placeholder{color:var(--tel-placeholder)}.ngxsmk-tel-input__control:hover{border-color:var(--tel-border-hover)}.ngxsmk-tel-input__control:focus{border-color:var(--tel-ring);box-shadow:var(--tel-focus-shadow)}[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)}: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__country{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:.5rem;padding:10px 12px;cursor:pointer}:host ::ng-deep .iti__dial-code{color:var(--tel-placeholder);font-weight:600;margin-left:10px}.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__clear:hover{background:#94a3b826}.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}\n"] }); }
}
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: [], template: `
<div class="ngxsmk-tel"
[class.disabled]="disabled"
[attr.data-size]="size"
[attr.data-variant]="variant"
[attr.dir]="dir">
(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'"
[attr.pattern]="digitsOnly ? (allowLeadingPlus ? '\\\\+?[0-9]*' : '[0-9]*') : null"
[disabled]="disabled"
[attr.aria-invalid]="showError ? 'true' : 'false'"
(blur)="onBlur()"
(focus)="onFocus()"
/>
</div>
(showClear && currentRaw()) {
<button type="button"
class="ngxsmk-tel__clear"
(click)="clearInput()"
[attr.aria-label]="clearAriaLabel">
×
</button>
}
</div>
(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-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}:host-context(.dark){--tel-bg: #0b0f17;--tel-fg: #e5e7eb;--tel-border: #334155;--tel-border-hover: #475569;--tel-ring: #60a5fa;--tel-placeholder: #94a3b8;--tel-dd-bg: #0f1521;--tel-dd-border: #324056;--tel-dd-search-bg: rgba(148, 163, 184, .12)}.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,box-shadow .15s,background .15s}.ngxsmk-tel-input__control::placeholder{color:var(--tel-placeholder)}.ngxsmk-tel-input__control:hover{border-color:var(--tel-border-hover)}.ngxsmk-tel-input__control:focus{border-color:var(--tel-ring);box-shadow:var(--tel-focus-shadow)}[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)}: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__country{display:grid;grid-template-columns:28px 1fr auto;align-items:center;column-gap:.5rem;padding:10px 12px;cursor:pointer}:host ::ng-deep .iti__dial-code{color:var(--tel-placeholder);font-weight:600;margin-left:10px}.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__clear:hover{background:#94a3b826}.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}\n"] }]
}], ctorParameters: () => [{ type: i0.NgZone }, { type: NgxsmkTelInputService }], propDecorators: { inputRef: [{
type: ViewChild,
args: ['telInput', { static: true }]
}], initialCountry: [{
type: Input
}], preferredCountries: [{
type: Input
}], onlyCountries: [{
type: Input
}], nationalMode: [{
type: Input
}], separateDialCode: [{
type: Input
}], allowDropdown: [{
type: Input
}], lockWhenValid: [{
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
}], formatOnBlur: [{
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
}], formatWhenValid: [{
type: Input
}], digitsOnly: [{
type: Input
}], allowLeadingPlus: [{
type: Input
}], countryChange: [{
type: Output
}], validityChange: [{
type: Output
}], inputChange: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgxsmkTelInputComponent, NgxsmkTelInputService };
//# sourceMappingURL=ngxsmk-tel-input.mjs.map