import { FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i0 from '@angular/core';
import { Injectable, Pipe, inject, DestroyRef, ChangeDetectorRef, ElementRef, viewChild, signal, computed, output, input, booleanAttribute, effect, Input as Input$1, Optional, Self, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { NgForm, ReactiveFormsModule, FormsModule, NG_VALIDATORS } from '@angular/forms';
import * as i2 from '@ngstarter-ui/components/core';
import { ErrorStateMatcher, Ripple } from '@ngstarter-ui/components/core';
import { FormFieldControl } from '@ngstarter-ui/components/form-field';
import { MenuTrigger, Menu, MenuItem } from '@ngstarter-ui/components/menu';
import { parsePhoneNumber, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
import { Subject } from 'rxjs';
import { Icon } from '@ngstarter-ui/components/icon';
import { Input } from '@ngstarter-ui/components/input';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Divider } from '@ngstarter-ui/components/divider';

class CountryCode {
    allCountries = [
        { name: "Afghanistan", shortCode: "af", phoneCode: "+93" },
        { name: "Albania", shortCode: "al", phoneCode: "+355" },
        { name: "Algeria", shortCode: "dz", phoneCode: "+213" },
        { name: "American Samoa", shortCode: "as", phoneCode: "+1-684" },
        { name: "Andorra", shortCode: "ad", phoneCode: "+376" },
        { name: "Angola", shortCode: "ao", phoneCode: "+244" },
        { name: "Anguilla", shortCode: "ai", phoneCode: "+1-264" },
        { name: "Antigua and Barbuda", shortCode: "ag", phoneCode: "+1-268" },
        { name: "Argentina", shortCode: "ar", phoneCode: "+54" },
        { name: "Armenia", shortCode: "am", phoneCode: "+374" },
        { name: "Aruba", shortCode: "aw", phoneCode: "+297" },
        { name: "Australia", shortCode: "au", phoneCode: "+61" },
        { name: "Austria", shortCode: "at", phoneCode: "+43" },
        { name: "Azerbaijan", shortCode: "az", phoneCode: "+994" },
        { name: "Bahamas", shortCode: "bs", phoneCode: "+1-242" },
        { name: "Bahrain", shortCode: "bh", phoneCode: "+973" },
        { name: "Bangladesh", shortCode: "bd", phoneCode: "+880" },
        { name: "Barbados", shortCode: "bb", phoneCode: "+1-246" },
        { name: "Belarus", shortCode: "by", phoneCode: "+375" },
        { name: "Belgium", shortCode: "be", phoneCode: "+32" },
        { name: "Belize", shortCode: "bz", phoneCode: "+501" },
        { name: "Benin", shortCode: "bj", phoneCode: "+229" },
        { name: "Bermuda", shortCode: "bm", phoneCode: "+1-441" },
        { name: "Bhutan", shortCode: "bt", phoneCode: "+975" },
        { name: "Bolivia", shortCode: "bo", phoneCode: "+591" },
        { name: "Bonaire, Sint Eustatius and Saba", shortCode: "bq", phoneCode: "+599" },
        { name: "Bosnia and Herzegovina", shortCode: "ba", phoneCode: "+387" },
        { name: "Botswana", shortCode: "bw", phoneCode: "+267" },
        { name: "Bouvet Island", shortCode: "bv", phoneCode: "" },
        { name: "Brazil", shortCode: "br", phoneCode: "+55" },
        { name: "British Indian Ocean Territory", shortCode: "io", phoneCode: "+246" },
        { name: "Brunei Darussalam", shortCode: "bn", phoneCode: "+673" },
        { name: "Bulgaria", shortCode: "bg", phoneCode: "+359" },
        { name: "Burkina Faso", shortCode: "bf", phoneCode: "+226" },
        { name: "Burundi", shortCode: "bi", phoneCode: "+257" },
        { name: "Cabo Verde", shortCode: "cv", phoneCode: "+238" },
        { name: "Cambodia", shortCode: "kh", phoneCode: "+855" },
        { name: "Cameroon", shortCode: "cm", phoneCode: "+237" },
        { name: "Canada", shortCode: "ca", phoneCode: "+1" },
        { name: "Cayman Islands", shortCode: "ky", phoneCode: "+1-345" },
        { name: "Central African Republic", shortCode: "cf", phoneCode: "+236" },
        { name: "Chad", shortCode: "td", phoneCode: "+235" },
        { name: "Chile", shortCode: "cl", phoneCode: "+56" },
        { name: "China", shortCode: "cn", phoneCode: "+86" },
        { name: "Christmas Island", shortCode: "cx", phoneCode: "+61" },
        { name: "Cocos (Keeling) Islands", shortCode: "cc", phoneCode: "+61" },
        { name: "Colombia", shortCode: "co", phoneCode: "+57" },
        { name: "Comoros", shortCode: "km", phoneCode: "+269" },
        { name: "Congo (DRC)", shortCode: "cd", phoneCode: "+243" },
        { name: "Congo (Republic)", shortCode: "cg", phoneCode: "+242" },
        { name: "Cook Islands", shortCode: "ck", phoneCode: "+682" },
        { name: "Costa Rica", shortCode: "cr", phoneCode: "+506" },
        { name: "Côte d'Ivoire", shortCode: "ci", phoneCode: "+225" },
        { name: "Croatia", shortCode: "hr", phoneCode: "+385" },
        { name: "Cuba", shortCode: "cu", phoneCode: "+53" },
        { name: "Curaçao", shortCode: "cw", phoneCode: "+599" },
        { name: "Cyprus", shortCode: "cy", phoneCode: "+357" },
        { name: "Czechia", shortCode: "cz", phoneCode: "+420" },
        { name: "Denmark", shortCode: "dk", phoneCode: "+45" },
        { name: "Djibouti", shortCode: "dj", phoneCode: "+253" },
        { name: "Dominica", shortCode: "dm", phoneCode: "+1-767" },
        { name: "Dominican Republic", shortCode: "do", phoneCode: "+1-809" },
        { name: "Ecuador", shortCode: "ec", phoneCode: "+593" },
        { name: "Egypt", shortCode: "eg", phoneCode: "+20" },
        { name: "El Salvador", shortCode: "sv", phoneCode: "+503" },
        { name: "Equatorial Guinea", shortCode: "gq", phoneCode: "+240" },
        { name: "Eritrea", shortCode: "er", phoneCode: "+291" },
        { name: "Estonia", shortCode: "ee", phoneCode: "+372" },
        { name: "Eswatini", shortCode: "sz", phoneCode: "+268" },
        { name: "Ethiopia", shortCode: "et", phoneCode: "+251" },
        { name: "Falkland Islands (Malvinas)", shortCode: "fk", phoneCode: "+500" },
        { name: "Faroe Islands", shortCode: "fo", phoneCode: "+298" },
        { name: "Fiji", shortCode: "fj", phoneCode: "+679" },
        { name: "Finland", shortCode: "fi", phoneCode: "+358" },
        { name: "France", shortCode: "fr", phoneCode: "+33" },
        { name: "French Guiana", shortCode: "gf", phoneCode: "+594" },
        { name: "French Polynesia", shortCode: "pf", phoneCode: "+689" },
        { name: "Gabon", shortCode: "ga", phoneCode: "+241" },
        { name: "Gambia", shortCode: "gm", phoneCode: "+220" },
        { name: "Georgia", shortCode: "ge", phoneCode: "+995" },
        { name: "Germany", shortCode: "de", phoneCode: "+49" },
        { name: "Ghana", shortCode: "gh", phoneCode: "+233" },
        { name: "Gibraltar", shortCode: "gi", phoneCode: "+350" },
        { name: "Greece", shortCode: "gr", phoneCode: "+30" },
        { name: "Greenland", shortCode: "gl", phoneCode: "+299" },
        { name: "Grenada", shortCode: "gd", phoneCode: "+1-473" },
        { name: "Guadeloupe", shortCode: "gp", phoneCode: "+590" },
        { name: "Guam", shortCode: "gu", phoneCode: "+1-671" },
        { name: "Guatemala", shortCode: "gt", phoneCode: "+502" },
        { name: "Guernsey", shortCode: "gg", phoneCode: "+44-1481" },
        { name: "Guinea", shortCode: "gn", phoneCode: "+224" },
        { name: "Guinea-Bissau", shortCode: "gw", phoneCode: "+245" },
        { name: "Guyana", shortCode: "gy", phoneCode: "+592" },
        { name: "Haiti", shortCode: "ht", phoneCode: "+509" },
        { name: "Honduras", shortCode: "hn", phoneCode: "+504" },
        { name: "Hong Kong", shortCode: "hk", phoneCode: "+852" },
        { name: "Hungary", shortCode: "hu", phoneCode: "+36" },
        { name: "Iceland", shortCode: "is", phoneCode: "+354" },
        { name: "India", shortCode: "in", phoneCode: "+91" },
        { name: "Indonesia", shortCode: "id", phoneCode: "+62" },
        { name: "Iran", shortCode: "ir", phoneCode: "+98" },
        { name: "Iraq", shortCode: "iq", phoneCode: "+964" },
        { name: "Ireland", shortCode: "ie", phoneCode: "+353" },
        { name: "Isle of Man", shortCode: "im", phoneCode: "+44-1624" },
        { name: "Israel", shortCode: "il", phoneCode: "+972" },
        { name: "Italy", shortCode: "it", phoneCode: "+39" },
        { name: "Jamaica", shortCode: "jm", phoneCode: "+1-876" },
        { name: "Japan", shortCode: "jp", phoneCode: "+81" },
        { name: "Jersey", shortCode: "je", phoneCode: "+44-1534" },
        { name: "Jordan", shortCode: "jo", phoneCode: "+962" },
        { name: "Kazakhstan", shortCode: "kz", phoneCode: "+7" },
        { name: "Kenya", shortCode: "ke", phoneCode: "+254" },
        { name: "Kiribati", shortCode: "ki", phoneCode: "+686" },
        { name: "Kuwait", shortCode: "kw", phoneCode: "+965" },
        { name: "Kyrgyzstan", shortCode: "kg", phoneCode: "+996" },
        { name: "Laos", shortCode: "la", phoneCode: "+856" },
        { name: "Latvia", shortCode: "lv", phoneCode: "+371" },
        { name: "Lebanon", shortCode: "lb", phoneCode: "+961" },
        { name: "Lesotho", shortCode: "ls", phoneCode: "+266" },
        { name: "Liberia", shortCode: "lr", phoneCode: "+231" },
        { name: "Libya", shortCode: "ly", phoneCode: "+218" },
        { name: "Liechtenstein", shortCode: "li", phoneCode: "+423" },
        { name: "Lithuania", shortCode: "lt", phoneCode: "+370" },
        { name: "Luxembourg", shortCode: "lu", phoneCode: "+352" },
        { name: "Macao", shortCode: "mo", phoneCode: "+853" },
        { name: "Madagascar", shortCode: "mg", phoneCode: "+261" },
        { name: "Malawi", shortCode: "mw", phoneCode: "+265" },
        { name: "Malaysia", shortCode: "my", phoneCode: "+60" },
        { name: "Maldives", shortCode: "mv", phoneCode: "+960" },
        { name: "Mali", shortCode: "ml", phoneCode: "+223" },
        { name: "Malta", shortCode: "mt", phoneCode: "+356" },
        { name: "Marshall Islands", shortCode: "mh", phoneCode: "+692" },
        { name: "Martinique", shortCode: "mq", phoneCode: "+596" },
        { name: "Mauritania", shortCode: "mr", phoneCode: "+222" },
        { name: "Mauritius", shortCode: "mu", phoneCode: "+230" },
        { name: "Mayotte", shortCode: "yt", phoneCode: "+262" },
        { name: "Mexico", shortCode: "mx", phoneCode: "+52" },
        { name: "Micronesia", shortCode: "fm", phoneCode: "+691" },
        { name: "Moldova", shortCode: "md", phoneCode: "+373" },
        { name: "Monaco", shortCode: "mc", phoneCode: "+377" },
        { name: "Mongolia", shortCode: "mn", phoneCode: "+976" },
        { name: "Montenegro", shortCode: "me", phoneCode: "+382" },
        { name: "Montserrat", shortCode: "ms", phoneCode: "+1-664" },
        { name: "Morocco", shortCode: "ma", phoneCode: "+212" },
        { name: "Mozambique", shortCode: "mz", phoneCode: "+258" },
        { name: "Myanmar", shortCode: "mm", phoneCode: "+95" },
        { name: "Namibia", shortCode: "na", phoneCode: "+264" },
        { name: "Nauru", shortCode: "nr", phoneCode: "+674" },
        { name: "Nepal", shortCode: "np", phoneCode: "+977" },
        { name: "Netherlands", shortCode: "nl", phoneCode: "+31" },
        { name: "New Caledonia", shortCode: "nc", phoneCode: "+687" },
        { name: "New Zealand", shortCode: "nz", phoneCode: "+64" },
        { name: "Nicaragua", shortCode: "ni", phoneCode: "+505" },
        { name: "Niger", shortCode: "ne", phoneCode: "+227" },
        { name: "Nigeria", shortCode: "ng", phoneCode: "+234" },
        { name: "Niue", shortCode: "nu", phoneCode: "+683" },
        { name: "Norfolk Island", shortCode: "nf", phoneCode: "+672" },
        { name: "North Korea", shortCode: "kp", phoneCode: "+850" },
        { name: "North Macedonia", shortCode: "mk", phoneCode: "+389" },
        { name: "Northern Mariana Islands", shortCode: "mp", phoneCode: "+1-670" },
        { name: "Norway", shortCode: "no", phoneCode: "+47" },
        { name: "Oman", shortCode: "om", phoneCode: "+968" },
        { name: "Pakistan", shortCode: "pk", phoneCode: "+92" },
        { name: "Palau", shortCode: "pw", phoneCode: "+680" },
        { name: "Palestine, State of", shortCode: "ps", phoneCode: "+970" },
        { name: "Panama", shortCode: "pa", phoneCode: "+507" },
        { name: "Papua New Guinea", shortCode: "pg", phoneCode: "+675" },
        { name: "Paraguay", shortCode: "py", phoneCode: "+595" },
        { name: "Peru", shortCode: "pe", phoneCode: "+51" },
        { name: "Philippines", shortCode: "ph", phoneCode: "+63" },
        { name: "Pitcairn Islands", shortCode: "pn", phoneCode: "+64" },
        { name: "Poland", shortCode: "pl", phoneCode: "+48" },
        { name: "Portugal", shortCode: "pt", phoneCode: "+351" },
        { name: "Puerto Rico", shortCode: "pr", phoneCode: "+1-787" },
        { name: "Qatar", shortCode: "qa", phoneCode: "+974" },
        { name: "Réunion", shortCode: "re", phoneCode: "+262" },
        { name: "Romania", shortCode: "ro", phoneCode: "+40" },
        { name: "Russia", shortCode: "ru", phoneCode: "+7" },
        { name: "Rwanda", shortCode: "rw", phoneCode: "+250" },
        { name: "Saint Barthélemy", shortCode: "bl", phoneCode: "+590" },
        { name: "Saint Helena, Ascension and Tristan da Cunha", shortCode: "sh", phoneCode: "+290" },
        { name: "Saint Kitts and Nevis", shortCode: "kn", phoneCode: "+1-869" },
        { name: "Saint Lucia", shortCode: "lc", phoneCode: "+1-758" },
        { name: "Saint Martin (French part)", shortCode: "mf", phoneCode: "+590" },
        { name: "Saint Pierre and Miquelon", shortCode: "pm", phoneCode: "+508" },
        { name: "Saint Vincent and the Grenadines", shortCode: "vc", phoneCode: "+1-784" },
        { name: "Samoa", shortCode: "ws", phoneCode: "+685" },
        { name: "San Marino", shortCode: "sm", phoneCode: "+378" },
        { name: "Sao Tome and Principe", shortCode: "st", phoneCode: "+239" },
        { name: "Saudi Arabia", shortCode: "sa", phoneCode: "+966" },
        { name: "Senegal", shortCode: "sn", phoneCode: "+221" },
        { name: "Serbia", shortCode: "rs", phoneCode: "+381" },
        { name: "Seychelles", shortCode: "sc", phoneCode: "+248" },
        { name: "Sierra Leone", shortCode: "sl", phoneCode: "+232" },
        { name: "Singapore", shortCode: "sg", phoneCode: "+65" },
        { name: "Sint Maarten (Dutch part)", shortCode: "sx", phoneCode: "+1-721" },
        { name: "Slovakia", shortCode: "sk", phoneCode: "+421" },
        { name: "Slovenia", shortCode: "si", phoneCode: "+386" },
        { name: "Solomon Islands", shortCode: "sb", phoneCode: "+677" },
        { name: "Somalia", shortCode: "so", phoneCode: "+252" },
        { name: "South Africa", shortCode: "za", phoneCode: "+27" },
        { name: "South Georgia and the South Sandwich Islands", shortCode: "gs", phoneCode: "+500" },
        { name: "South Korea", shortCode: "kr", phoneCode: "+82" },
        { name: "South Sudan", shortCode: "ss", phoneCode: "+211" },
        { name: "Spain", shortCode: "es", phoneCode: "+34" },
        { name: "Sri Lanka", shortCode: "lk", phoneCode: "+94" },
        { name: "Sudan", shortCode: "sd", phoneCode: "+249" },
        { name: "Suriname", shortCode: "sr", phoneCode: "+597" },
        { name: "Svalbard and Jan Mayen", shortCode: "sj", phoneCode: "+47" },
        { name: "Sweden", shortCode: "se", phoneCode: "+46" },
        { name: "Switzerland", shortCode: "ch", phoneCode: "+41" },
        { name: "Syria", shortCode: "sy", phoneCode: "+963" },
        { name: "Taiwan", shortCode: "tw", phoneCode: "+886" },
        { name: "Tajikistan", shortCode: "tj", phoneCode: "+992" },
        { name: "Tanzania", shortCode: "tz", phoneCode: "+255" },
        { name: "Thailand", shortCode: "th", phoneCode: "+66" },
        { name: "Timor-Leste", shortCode: "tl", phoneCode: "+670" },
        { name: "Togo", shortCode: "tg", phoneCode: "+228" },
        { name: "Tokelau", shortCode: "tk", phoneCode: "+690" },
        { name: "Tonga", shortCode: "to", phoneCode: "+676" },
        { name: "Trinidad and Tobago", shortCode: "tt", phoneCode: "+1-868" },
        { name: "Tunisia", shortCode: "tn", phoneCode: "+216" },
        { name: "Türkiye", shortCode: "tr", phoneCode: "+90" },
        { name: "Turkmenistan", shortCode: "tm", phoneCode: "+993" },
        { name: "Turks and Caicos Islands", shortCode: "tc", phoneCode: "+1-649" },
        { name: "Tuvalu", shortCode: "tv", phoneCode: "+688" },
        { name: "Uganda", shortCode: "ug", phoneCode: "+256" },
        { name: "Ukraine", shortCode: "ua", phoneCode: "+380" },
        { name: "United Arab Emirates", shortCode: "ae", phoneCode: "+971" },
        { name: "United Kingdom", shortCode: "gb", phoneCode: "+44" },
        { name: "United States", shortCode: "us", phoneCode: "+1" },
        { name: "Uruguay", shortCode: "uy", phoneCode: "+598" },
        { name: "Uzbekistan", shortCode: "uz", phoneCode: "+998" },
        { name: "Vanuatu", shortCode: "vu", phoneCode: "+678" },
        { name: "Vatican City", shortCode: "va", phoneCode: "+379" }, // Changed from +39-06 to specific Vatican code
        { name: "Venezuela", shortCode: "ve", phoneCode: "+58" },
        { name: "Vietnam", shortCode: "vn", phoneCode: "+84" },
        { name: "Virgin Islands (British)", shortCode: "vg", phoneCode: "+1-284" },
        { name: "Virgin Islands (U.S.)", shortCode: "vi", phoneCode: "+1-340" },
        { name: "Wallis and Futuna", shortCode: "wf", phoneCode: "+681" },
        { name: "Western Sahara", shortCode: "eh", phoneCode: "+212" },
        { name: "Yemen", shortCode: "ye", phoneCode: "+967" },
        { name: "Zambia", shortCode: "zm", phoneCode: "+260" },
        { name: "Zimbabwe", shortCode: "zw", phoneCode: "+263" },
    ];
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountryCode, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountryCode });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountryCode, decorators: [{
            type: Injectable
        }] });

const phoneValidator = (control) => {
    const error = { invalidPhone: true };
    let numberInstance;
    if (control.value) {
        try {
            numberInstance = parsePhoneNumber(control.value);
        }
        catch (e) {
            control.setValue(null);
            return error;
        }
        if (numberInstance && !numberInstance.isValid()) {
            control.setValue(null);
            if (!control.touched) {
                control.markAsTouched();
            }
            return error;
        }
    }
    return null;
};

class SearchPipe {
    transform(countries, searchCriteria) {
        if (!searchCriteria || searchCriteria === '') {
            return countries;
        }
        return countries.filter((country) => {
            return `${country.name}${country.phoneCode}`
                .toLowerCase()
                .includes(searchCriteria.toLowerCase());
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SearchPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: SearchPipe, isStandalone: true, name: "search" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SearchPipe, decorators: [{
            type: Pipe,
            args: [{ name: 'search' }]
        }] });

class PhoneInput {
    ngControl;
    _destroyRef = inject(DestroyRef);
    _changeDetectorRef = inject(ChangeDetectorRef);
    countryCodeData = inject(CountryCode);
    _focusMonitor = inject(FocusMonitor);
    _elementRef = inject((ElementRef));
    _errorStateMatcher = inject(ErrorStateMatcher);
    _parentForm = inject(NgForm, { optional: true });
    static nextId = 0;
    menuSearchInput = viewChild('menuSearchInput', ...(ngDevMode ? [{ debugName: "menuSearchInput" }] : /* istanbul ignore next */ []));
    focusable = viewChild.required('focusable');
    focused = false;
    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
    errorState = false;
    _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
    id = '';
    _id = signal(`ngs-phone-input-${PhoneInput.nextId++}`, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
    placeholder = '';
    empty = true;
    shouldLabelFloat = false;
    _shouldLabelFloat = computed(() => {
        return this._focused() || !this.empty;
    }, ...(ngDevMode ? [{ debugName: "_shouldLabelFloat" }] : /* istanbul ignore next */ []));
    _empty = computed(() => {
        return !this.phoneNumber;
    }, ...(ngDevMode ? [{ debugName: "_empty" }] : /* istanbul ignore next */ []));
    countryChanged = output();
    stateChanges = new Subject();
    describedBy = '';
    phoneNumber = '';
    allCountries = [];
    preferredCountriesInDropDown = [];
    selectedCountry = signal(null, ...(ngDevMode ? [{ debugName: "selectedCountry" }] : /* istanbul ignore next */ []));
    numberInstance;
    value;
    searchCriteria;
    _previousFormattedNumber;
    onTouched = () => { };
    propagateChange = (_) => { };
    autocomplete = input('on', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
    errorStateMatcher = input(this._errorStateMatcher, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
    onlyCountries = input([], ...(ngDevMode ? [{ debugName: "onlyCountries" }] : /* istanbul ignore next */ []));
    preferredCountries = input([], ...(ngDevMode ? [{ debugName: "preferredCountries" }] : /* istanbul ignore next */ []));
    format = input('default', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
    defaultSelectedCountryCode = input('us', ...(ngDevMode ? [{ debugName: "defaultSelectedCountryCode" }] : /* istanbul ignore next */ []));
    _placeholder = input('', { ...(ngDevMode ? { debugName: "_placeholder" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
    set required(value) {
        this._required.set(coerceBooleanProperty(value));
        this.stateChanges.next();
    }
    get required() {
        return this._required();
    }
    _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
    phoneDisabled = input(false, { ...(ngDevMode ? { debugName: "phoneDisabled" } : /* istanbul ignore next */ {}), alias: 'disabled',
        transform: booleanAttribute });
    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
    _compositeDisabled = computed(() => {
        return this._disabled() || this.phoneDisabled();
    }, ...(ngDevMode ? [{ debugName: "_compositeDisabled" }] : /* istanbul ignore next */ []));
    disabled = false;
    constructor(ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher) {
        this.ngControl = ngControl;
        if (this.ngControl != null) {
            this.ngControl.valueAccessor = this;
        }
        effect(() => {
            this.disabled = this._compositeDisabled();
        });
        this._focusMonitor
            .monitor(this._elementRef, true)
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((origin) => {
            if (this._focused() && !origin) {
                this.onTouched();
            }
            this._focused.set(!!origin);
            this.stateChanges.next();
        });
        this.fetchCountryData();
        effect(() => {
            this.phoneNumber = this.formattedPhoneNumber;
            this.stateChanges.next();
        });
        effect(() => {
            this.id = this._id();
            this.focused = this._focused();
            this.errorState = this._errorState();
            this.empty = this._empty();
            this.shouldLabelFloat = this._shouldLabelFloat();
            this.placeholder = this._placeholder();
        });
    }
    ngOnInit() {
        if (this.onlyCountries().length) {
            this.allCountries = this.allCountries.filter((c) => this.onlyCountries().includes(c.shortCode));
        }
        if (this.preferredCountries().length) {
            this.preferredCountries().forEach((shortCode) => {
                const preferredCountry = this.allCountries
                    .filter((c) => {
                    return c.shortCode === shortCode;
                })
                    .shift();
                if (preferredCountry) {
                    this.preferredCountriesInDropDown.push(preferredCountry);
                }
            });
        }
        if (this.numberInstance && this.numberInstance.country) {
            // If an existing number is present, we use it to determine selectedCountry
            this.selectedCountry.set(this.getCountry(this.numberInstance.country));
        }
        if (!this.selectedCountry()) {
            this.selectedCountry.set(this.allCountries.find((country) => country.shortCode === this.defaultSelectedCountryCode()));
        }
        this.countryChanged.emit(this.selectedCountry());
        this._changeDetectorRef.detectChanges();
        this.stateChanges.next();
    }
    ngDoCheck() {
        if (this.ngControl) {
            const isInvalid = this.errorStateMatcher().isErrorState(this.ngControl.control, this._parentForm);
            this._errorState.set((isInvalid && !this.ngControl.control?.value) || (!this._focused() ? isInvalid : false));
        }
    }
    updateErrorState() {
    }
    ngAfterViewInit() {
        this._changeDetectorRef.detectChanges();
    }
    ngOnDestroy() {
        this.stateChanges.complete();
        this._focusMonitor.stopMonitoring(this._elementRef);
    }
    onPhoneNumberChange() {
        if (!this.phoneNumber) {
            this.value = '';
            this.propagateChange(this.value);
            this._changeDetectorRef.markForCheck();
            return;
        }
        try {
            this.numberInstance = parsePhoneNumberFromString(this.phoneNumber.toString(), this.selectedCountry()?.shortCode.toUpperCase());
            this.formatAsYouTypeIfEnabled();
            this.value = this.numberInstance?.number;
            if (this.numberInstance && this.numberInstance.isValid()) {
                if (this.phoneNumber !== this.formattedPhoneNumber) {
                    this.phoneNumber = this.formattedPhoneNumber;
                }
                if (this.selectedCountry()?.shortCode !== this.numberInstance.country &&
                    this.numberInstance.country) {
                    this.selectedCountry.set(this.getCountry(this.numberInstance.country));
                    this.countryChanged.emit(this.selectedCountry());
                }
            }
        }
        catch (e) {
            // if no possible numbers are there,
            // then the full number is passed so that validator could be triggered and proper error could be shown
            this.value = this.phoneNumber.toString();
        }
        this.propagateChange(this.value);
        this._changeDetectorRef.markForCheck();
    }
    onCountrySelect(country, el) {
        if (this.phoneNumber) {
            this.phoneNumber = this.numberInstance?.nationalNumber;
        }
        if (this.selectedCountry() !== country) {
            this.reset();
        }
        this.selectedCountry.set(country);
        this.countryChanged.emit(this.selectedCountry());
        this.onPhoneNumberChange();
        el.focus();
    }
    getCountry(shortCode) {
        return (this.allCountries.find((c) => c.shortCode === shortCode.toLowerCase()) || {
            name: 'UN',
            shortCode: 'UN',
            dialCode: undefined,
            priority: 0,
            areaCodes: undefined,
            flagClass: 'UN',
            placeHolder: '',
        });
    }
    onInputKeyPress(event) {
        const pattern = /[0-9+\- ]/;
        if (!pattern.test(event.key)) {
            event.preventDefault();
        }
    }
    fetchCountryData() {
        this.allCountries = this.countryCodeData.allCountries;
    }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this._disabled.set(isDisabled);
        this._changeDetectorRef.detectChanges();
        this.stateChanges.next();
    }
    writeValue(value) {
        if (value) {
            this.numberInstance = parsePhoneNumberFromString(value);
            if (this.numberInstance) {
                const countryCode = this.numberInstance.country;
                this.phoneNumber = this.formattedPhoneNumber;
                if (!countryCode) {
                    return;
                }
                const country = this.getCountry(countryCode);
                this.selectedCountry.set(country);
                this.countryChanged.emit(country);
                this._changeDetectorRef.detectChanges();
                this.stateChanges.next();
            }
            else {
                this.phoneNumber = value;
            }
        }
        this.stateChanges.next(undefined);
        // Value is set from outside using setValue()
        this._changeDetectorRef.detectChanges();
    }
    setDescribedByIds(ids) {
        this.describedBy = ids.join(' ');
    }
    focus() {
        this.focusable().nativeElement.focus();
    }
    onContainerClick(event) {
        if (event.target.tagName.toLowerCase() !== 'input') {
            this.focus();
        }
    }
    reset() {
        this.phoneNumber = '';
        this.propagateChange(null);
        this._changeDetectorRef.markForCheck();
        this.stateChanges.next(undefined);
    }
    get formattedPhoneNumber() {
        if (!this.numberInstance) {
            return this.phoneNumber?.toString() || '';
        }
        switch (this.format()) {
            case 'national':
                return this.numberInstance.formatNational();
            case 'international':
                return this.numberInstance.formatInternational();
            default:
                return this.numberInstance.nationalNumber.toString();
        }
    }
    formatAsYouTypeIfEnabled() {
        if (this.format() === 'default') {
            return;
        }
        const selectedCountry = this.selectedCountry();
        if (!selectedCountry) {
            return;
        }
        const asYouType = new AsYouType(selectedCountry.shortCode.toUpperCase());
        // To avoid caret positioning, we apply formatting only if the caret is at the end:
        if (!this.phoneNumber) {
            return;
        }
        if (this.phoneNumber?.toString().startsWith(this._previousFormattedNumber || '')) {
            this.phoneNumber = asYouType.input(this.phoneNumber.toString());
        }
        this._previousFormattedNumber = this.phoneNumber.toString();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PhoneInput, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PhoneInput, isStandalone: true, selector: "ngs-phone-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, onlyCountries: { classPropertyName: "onlyCountries", publicName: "onlyCountries", isSignal: true, isRequired: false, transformFunction: null }, preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, defaultSelectedCountryCode: { classPropertyName: "defaultSelectedCountryCode", publicName: "defaultSelectedCountryCode", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, phoneDisabled: { classPropertyName: "phoneDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countryChanged: "countryChanged" }, host: { properties: { "class.is-floating": "shouldLabelFloat" }, classAttribute: "ngs-phone-input" }, providers: [
            CountryCode,
            {
                provide: FormFieldControl,
                useExisting: PhoneInput
            },
            {
                provide: NG_VALIDATORS,
                useValue: phoneValidator,
                multi: true,
            },
        ], viewQueries: [{ propertyName: "menuSearchInput", first: true, predicate: ["menuSearchInput"], descendants: true, isSignal: true }, { propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true, isSignal: true }], exportAs: ["ngsPhoneInput"], ngImport: i0, template: "<div class=\"phone-input-container\">\n  <button\n    type=\"button\"\n    ngsRipple\n    [ngsMenuTriggerFor]=\"menu\"\n    class=\"country-selector\"\n    [disabled]=\"disabled\"\n    (menuOpened)=\"menuSearchInput()?.nativeElement?.focus()\">\n    @if (selectedCountry()) {\n      <ngs-icon [name]=\"'circle-flags:' + selectedCountry()?.shortCode\" class=\"flag-icon\" />\n\n      @if (selectedCountry()?.phoneCode) {\n        <span class=\"country-selector-code\">{{ selectedCountry()?.phoneCode }}</span>\n      }\n    }\n    <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"!text-lg text-neutral-500 relative -top-px\"/>\n  </button>\n  <input\n    ngsInput\n    type=\"tel\"\n    inputmode=\"tel\"\n    [autocomplete]=\"autocomplete()\"\n    (blur)=\"onTouched()\"\n    (keypress)=\"onInputKeyPress($event)\"\n    [(ngModel)]=\"phoneNumber\"\n    (ngModelChange)=\"onPhoneNumberChange()\"\n    [errorStateMatcher]=\"errorStateMatcher()\"\n    [placeholder]=\"_placeholder()\"\n    [disabled]=\"disabled\"\n    class=\"grow\"\n    #focusable>\n</div>\n<ngs-menu #menu=\"ngsMenu\">\n  @for (country of preferredCountriesInDropDown; track country) {\n    <button type=\"button\" ngs-menu-item (click)=\"onCountrySelect(country, focusable)\">\n      <div class=\"flex items-center gap-2\">\n        <ngs-icon [name]=\"'circle-flags:' + country.shortCode\" class=\"flag-icon\" />\n        <div class=\"label-wrapper\">\n          {{ country.name }}\n          <span [class.whitespace-nowrap]=\"!searchCriteria\" class=\"text-neutral-500\">{{ country.phoneCode }}</span>\n        </div>\n      </div>\n    </button>\n  }\n\n  @if (preferredCountriesInDropDown.length) {\n    <ngs-divider/>\n  }\n\n  @for (country of allCountries | search : searchCriteria; track country) {\n    <button type=\"button\" ngs-menu-item (click)=\"onCountrySelect(country, focusable)\">\n      <div class=\"flex items-center gap-2\">\n        <ngs-icon [name]=\"'circle-flags:' + country.shortCode\" class=\"flag-icon\" />\n        <div>\n          {{ country.name }}\n          <span [class.whitespace-nowrap]=\"!searchCriteria\" class=\"text-neutral-500\">{{ country.phoneCode }}</span>\n        </div>\n      </div>\n    </button>\n  }\n</ngs-menu>\n", styles: [":host{--ngs-phone-input-color: var(--ngs-color-neutral-600);--ngs-phone-input-opacity: 0}@media print{:host{--ngs-phone-input-flag-display: none}}:host .flag-icon{margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host.is-floating .country-selector{opacity:1}:host .phone-input-container{display:flex;align-items:center;height:var(--ngs-phone-input-height, 24px)}:host input{border:none;background:none;outline:none;font:inherit;width:max-content;box-sizing:border-box;padding-right:6px;padding-left:4px;position:relative;z-index:0}:host .icon-wrapper{padding-right:24px}:host .mdc-button__label{margin-right:auto}:host .country-selector{display:flex;align-items:center;border-radius:0;color:var(--ngs-phone-input-color);flex-shrink:0;height:initial;line-height:unset;padding:1px;opacity:var(--ngs-phone-input-opacity, 0);transition:opacity .2s;border:unset}:host .country-selector:disabled{opacity:.8}:host .country-selector-code{color:var(--ngs-phone-input-color);padding-right:0}:host-context(html.dark){--ngs-phone-input-color: var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "pipe", type: SearchPipe, name: "search" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PhoneInput, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-phone-input', exportAs: 'ngsPhoneInput', imports: [
                        Ripple,
                        MenuTrigger,
                        Icon,
                        Menu,
                        ReactiveFormsModule,
                        FormsModule,
                        MenuItem,
                        Input,
                        SearchPipe,
                        Divider,
                    ], providers: [
                        CountryCode,
                        {
                            provide: FormFieldControl,
                            useExisting: PhoneInput
                        },
                        {
                            provide: NG_VALIDATORS,
                            useValue: phoneValidator,
                            multi: true,
                        },
                    ], host: {
                        'class': 'ngs-phone-input',
                        '[class.is-floating]': 'shouldLabelFloat',
                    }, template: "<div class=\"phone-input-container\">\n  <button\n    type=\"button\"\n    ngsRipple\n    [ngsMenuTriggerFor]=\"menu\"\n    class=\"country-selector\"\n    [disabled]=\"disabled\"\n    (menuOpened)=\"menuSearchInput()?.nativeElement?.focus()\">\n    @if (selectedCountry()) {\n      <ngs-icon [name]=\"'circle-flags:' + selectedCountry()?.shortCode\" class=\"flag-icon\" />\n\n      @if (selectedCountry()?.phoneCode) {\n        <span class=\"country-selector-code\">{{ selectedCountry()?.phoneCode }}</span>\n      }\n    }\n    <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"!text-lg text-neutral-500 relative -top-px\"/>\n  </button>\n  <input\n    ngsInput\n    type=\"tel\"\n    inputmode=\"tel\"\n    [autocomplete]=\"autocomplete()\"\n    (blur)=\"onTouched()\"\n    (keypress)=\"onInputKeyPress($event)\"\n    [(ngModel)]=\"phoneNumber\"\n    (ngModelChange)=\"onPhoneNumberChange()\"\n    [errorStateMatcher]=\"errorStateMatcher()\"\n    [placeholder]=\"_placeholder()\"\n    [disabled]=\"disabled\"\n    class=\"grow\"\n    #focusable>\n</div>\n<ngs-menu #menu=\"ngsMenu\">\n  @for (country of preferredCountriesInDropDown; track country) {\n    <button type=\"button\" ngs-menu-item (click)=\"onCountrySelect(country, focusable)\">\n      <div class=\"flex items-center gap-2\">\n        <ngs-icon [name]=\"'circle-flags:' + country.shortCode\" class=\"flag-icon\" />\n        <div class=\"label-wrapper\">\n          {{ country.name }}\n          <span [class.whitespace-nowrap]=\"!searchCriteria\" class=\"text-neutral-500\">{{ country.phoneCode }}</span>\n        </div>\n      </div>\n    </button>\n  }\n\n  @if (preferredCountriesInDropDown.length) {\n    <ngs-divider/>\n  }\n\n  @for (country of allCountries | search : searchCriteria; track country) {\n    <button type=\"button\" ngs-menu-item (click)=\"onCountrySelect(country, focusable)\">\n      <div class=\"flex items-center gap-2\">\n        <ngs-icon [name]=\"'circle-flags:' + country.shortCode\" class=\"flag-icon\" />\n        <div>\n          {{ country.name }}\n          <span [class.whitespace-nowrap]=\"!searchCriteria\" class=\"text-neutral-500\">{{ country.phoneCode }}</span>\n        </div>\n      </div>\n    </button>\n  }\n</ngs-menu>\n", styles: [":host{--ngs-phone-input-color: var(--ngs-color-neutral-600);--ngs-phone-input-opacity: 0}@media print{:host{--ngs-phone-input-flag-display: none}}:host .flag-icon{margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host.is-floating .country-selector{opacity:1}:host .phone-input-container{display:flex;align-items:center;height:var(--ngs-phone-input-height, 24px)}:host input{border:none;background:none;outline:none;font:inherit;width:max-content;box-sizing:border-box;padding-right:6px;padding-left:4px;position:relative;z-index:0}:host .icon-wrapper{padding-right:24px}:host .mdc-button__label{margin-right:auto}:host .country-selector{display:flex;align-items:center;border-radius:0;color:var(--ngs-phone-input-color);flex-shrink:0;height:initial;line-height:unset;padding:1px;opacity:var(--ngs-phone-input-opacity, 0);transition:opacity .2s;border:unset}:host .country-selector:disabled{opacity:.8}:host .country-selector-code{color:var(--ngs-phone-input-color);padding-right:0}:host-context(html.dark){--ngs-phone-input-color: var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                    type: Optional
                }, {
                    type: Self
                }] }, { type: i1.NgForm, decorators: [{
                    type: Optional
                }] }, { type: i1.FormGroupDirective, decorators: [{
                    type: Optional
                }] }, { type: i2.ErrorStateMatcher }], propDecorators: { menuSearchInput: [{ type: i0.ViewChild, args: ['menuSearchInput', { isSignal: true }] }], focusable: [{ type: i0.ViewChild, args: ['focusable', { isSignal: true }] }], countryChanged: [{ type: i0.Output, args: ["countryChanged"] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], onlyCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyCountries", required: false }] }], preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], defaultSelectedCountryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelectedCountryCode", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{
                type: Input$1,
                args: [{ alias: 'required', transform: booleanAttribute }]
            }], phoneDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { PhoneInput, SearchPipe, phoneValidator };
//# sourceMappingURL=ngstarter-ui-components-phone-input.mjs.map
