@skyux/phone-field 5.7.2 → 5.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-phone-field.umd.js +6 -4
- package/documentation.json +6 -6
- package/esm2015/lib/modules/phone-field/phone-field.component.js +4 -2
- package/esm2015/lib/modules/phone-field/phone-field.component.js.map +1 -1
- package/fesm2015/skyux-phone-field.js +4 -2
- package/fesm2015/skyux-phone-field.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone-field.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts","../../../../../../../../libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n AnimationEvent,\n animate,\n style,\n transition,\n trigger,\n} from '@angular/animations';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n SkipSelf,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyInputBoxHostService } from '@skyux/forms';\nimport { SkyCountryFieldCountry } from '@skyux/lookup';\nimport { SkyThemeService } from '@skyux/theme';\n\nimport {\n PhoneNumberFormat,\n PhoneNumberType,\n PhoneNumberUtil,\n} from 'google-libphonenumber';\nimport 'intl-tel-input';\n\nimport { SkyPhoneFieldAdapterService } from './phone-field-adapter.service';\nimport { SkyPhoneFieldCountry } from './types/country';\nimport { SkyPhoneFieldNumberReturnFormat } from './types/number-return-format';\n\n// NOTE: The no-op animation is here in order to block the input's \"fade in\" animation\n// from firing on initial load. For more information on this technique you can see\n// https://www.bennadel.com/blog/3417-using-no-op-transitions-to-prevent-animation-during-the-initial-render-of-ngfor-in-angular-5-2-6.htm\n@Component({\n selector: 'sky-phone-field',\n templateUrl: './phone-field.component.html',\n styleUrls: ['./phone-field.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n SkyPhoneFieldAdapterService,\n // Prevents the embedded country field component from changing its behavior based on\n // being inside an input box. The phone field itself will handle the required changes\n // for input box.\n {\n provide: SkyInputBoxHostService,\n useValue: undefined,\n },\n ],\n animations: [\n trigger('blockAnimationOnLoad', [transition(':enter', [])]),\n trigger('countrySearchAnimation', [\n transition(':enter', [\n style({\n opacity: 0,\n width: 0,\n }),\n animate(\n '200ms ease-in',\n style({\n opacity: 1,\n width: '*',\n })\n ),\n ]),\n transition(':leave', [\n animate(\n '200ms ease-in',\n style({\n opacity: 0,\n width: 0,\n })\n ),\n ]),\n ]),\n trigger('phoneInputAnimation', [\n transition(':enter', [\n style({\n opacity: 0,\n }),\n animate(\n '150ms ease-in',\n style({\n opacity: 1,\n })\n ),\n ]),\n transition(':leave', [\n animate(\n '150ms ease-in',\n style({\n opacity: 0,\n })\n ),\n ]),\n ]),\n ],\n})\nexport class SkyPhoneFieldComponent implements OnDestroy, OnInit {\n /**\n * Indicates whether or not phone number extensions are allowed.\n * @default true\n */\n @Input()\n public allowExtensions = true;\n\n /**\n * Specifies the\n * [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)\n * country code for the default country. The country selector button displays a flag\n * icon for this default country until users select a different country.\n * @default \"us\"\n */\n @Input()\n public set defaultCountry(value: string) {\n if (value && value !== this._defaultCountry) {\n this._defaultCountry = value.toLowerCase();\n\n this.defaultCountryData = this.countries.find(\n (country) => country.iso2 === this._defaultCountry\n );\n }\n }\n\n public get defaultCountry(): string {\n return this._defaultCountry;\n }\n\n /**\n * Specifies the format for validated phone numbers.\n * Options include: `\"default\"`, `\"international\"`, and `\"national\"`.\n * @default \"default\"\n */\n @Input()\n public returnFormat: SkyPhoneFieldNumberReturnFormat = 'default';\n\n /**\n * Specifies the [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)\n * country codes for the countries that users can select. By default, all countries are available.\n */\n @Input()\n public supportedCountryISOs: string[];\n\n /**\n * Emits a `SkyPhoneFieldCountry` object when the selected country in the country search\n * input changes.\n */\n\n @Output()\n public selectedCountryChange = new EventEmitter<SkyPhoneFieldCountry>();\n\n public countries: SkyPhoneFieldCountry[];\n\n public countrySelectDisabled = false;\n\n public countrySearchShown = false;\n\n public phoneInputShown = true;\n\n public countrySearchForm: FormGroup;\n\n /**\n * Specifies the currently selected country to validate against.\n */\n @Input()\n public set selectedCountry(newCountry: SkyPhoneFieldCountry) {\n if (\n newCountry &&\n (!this._selectedCountry || this._selectedCountry.iso2 !== newCountry.iso2)\n ) {\n this._selectedCountry = this.countries.find(\n (country) => country.iso2 === newCountry.iso2\n );\n\n if (!this._selectedCountry.exampleNumber) {\n const numberObj = this.phoneUtils.getExampleNumberForType(\n newCountry.iso2,\n PhoneNumberType.FIXED_LINE\n );\n this._selectedCountry.exampleNumber = this.phoneUtils.format(\n numberObj,\n PhoneNumberFormat.NATIONAL\n );\n }\n\n this.selectedCountryChange.emit(this._selectedCountry);\n }\n }\n\n public get selectedCountry(): SkyPhoneFieldCountry {\n return this._selectedCountry;\n }\n\n @ViewChild('inputTemplateRef', {\n read: TemplateRef,\n static: true,\n })\n private inputTemplateRef: TemplateRef<any>;\n\n @ViewChild('countryBtnTemplateRef', {\n read: TemplateRef,\n static: true,\n })\n private countryBtnTemplateRef: TemplateRef<any>;\n\n @ViewChild('buttonsInsetTemplateRef', {\n read: TemplateRef,\n static: true,\n })\n private buttonsInsetTemplateRef: TemplateRef<any>;\n\n private defaultCountryData: SkyPhoneFieldCountry;\n\n private phoneInputAnimationTriggered = false;\n\n private phoneUtils = PhoneNumberUtil.getInstance();\n\n private longestDialCodeLength = 0;\n\n private _defaultCountry: string;\n\n private _selectedCountry: SkyPhoneFieldCountry;\n\n constructor(\n private formBuilder: FormBuilder,\n private adapterService: SkyPhoneFieldAdapterService,\n private changeDetector: ChangeDetectorRef,\n @Optional() public themeSvc?: SkyThemeService,\n @Optional() @SkipSelf() public inputBoxHostSvc?: SkyInputBoxHostService\n ) {\n /**\n * The json functions here ensures that we get a copy of the array and not the global original.\n * This ensures that multiple instances of the component don't overwrite the original data.\n *\n * We must type the window object as any here as the intl-tel-input library adds its object\n * to the main window object.\n */\n this.countries = JSON.parse(\n JSON.stringify((window as any).intlTelInputGlobals.getCountryData())\n );\n for (const country of this.countries) {\n country.dialCode = '+' + country.dialCode;\n\n if (country.dialCode.length > this.longestDialCodeLength) {\n this.longestDialCodeLength = country.dialCode.length;\n }\n }\n\n this.countrySearchForm = this.formBuilder.group({\n countrySearch: new FormControl(),\n });\n }\n\n public ngOnInit(): void {\n // The timeout here is needed to avoid a change before checked error when a user specifies\n // a selected country on initialization of the component.\n setTimeout(() => {\n if (this.inputBoxHostSvc) {\n this.inputBoxHostSvc.populate({\n inputTemplate: this.inputTemplateRef,\n buttonsInsetTemplate: this.buttonsInsetTemplateRef,\n buttonsLeftTemplate: this.countryBtnTemplateRef,\n });\n }\n\n if (!this.defaultCountry) {\n this.defaultCountry = 'us';\n }\n\n if (!this.selectedCountry) {\n this.selectedCountry = this.defaultCountryData;\n }\n this.changeDetector.markForCheck();\n }, 0);\n\n this.countrySearchForm\n .get('countrySearch')\n .valueChanges.subscribe((newValue: SkyCountryFieldCountry) => {\n if (newValue && newValue.iso2 !== this.selectedCountry.iso2) {\n this.selectedCountry = newValue;\n }\n });\n }\n\n public ngOnDestroy(): void {\n this.selectedCountryChange.complete();\n }\n\n /**\n * Sets the country to validate against based on the county's iso2 code.\n * @param countryCode The International Organization for Standardization's two-letter code\n * for the default country.\n * @internal\n */\n public onCountrySelected(newCountry: SkyCountryFieldCountry): void {\n if (newCountry) {\n this.selectedCountry = this.countries.find(\n (countryInfo) => countryInfo.iso2 === newCountry.iso2\n );\n this.toggleCountrySearch(false);\n }\n }\n\n public toggleCountrySearch(showSearch: boolean): void {\n this.phoneInputAnimationTriggered = true;\n\n if (showSearch) {\n this.phoneInputShown = false;\n } else {\n this.countrySearchShown = false;\n\n this.countrySearchForm.get('countrySearch').setValue(undefined);\n }\n\n this.changeDetector.markForCheck();\n }\n\n public countrySearchAnimationEnd(e: AnimationEvent) {\n if (!this.countrySearchShown) {\n this.phoneInputShown = true;\n } else {\n this.adapterService.focusCountrySearchElement(e.element);\n }\n\n this.changeDetector.markForCheck();\n }\n\n public phoneInputAnimationEnd(e: AnimationEvent) {\n if (!this.phoneInputShown) {\n this.countrySearchShown = true;\n } else {\n if (this.phoneInputAnimationTriggered) {\n this.adapterService.focusPhoneInput(e.element);\n this.phoneInputAnimationTriggered = false;\n }\n }\n\n this.changeDetector.markForCheck();\n }\n\n public setCountryByDialCode(phoneNumber: string): boolean {\n if (!phoneNumber || !phoneNumber.startsWith('+')) {\n return false;\n }\n\n let newCountry: SkyPhoneFieldCountry;\n\n for (let i = 1; i < this.longestDialCodeLength + 1; i++) {\n const dialCode = phoneNumber.substring(0, i);\n\n let foundCountry = this.countries.find(\n (country) => country.dialCode === dialCode && country.priority === 0\n );\n\n if (foundCountry) {\n // Ensure that the country that was found is one of the supported countries\n if (\n this.supportedCountryISOs &&\n this.supportedCountryISOs.findIndex(\n (isoCode) =>\n isoCode.toUpperCase() === foundCountry.iso2.toUpperCase()\n ) < 0\n ) {\n foundCountry = undefined;\n }\n\n if (foundCountry !== this.selectedCountry) {\n newCountry = foundCountry;\n }\n }\n }\n\n if (newCountry) {\n this.selectedCountry = newCountry;\n this.changeDetector.markForCheck();\n return true;\n }\n\n return false;\n }\n}\n","<ng-container *ngIf=\"!inputBoxHostSvc\">\n <div class=\"sky-input-group sky-phone-field\" [@blockAnimationOnLoad]>\n <ng-container *ngTemplateOutlet=\"countryBtnTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplateRef\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #countryBtnTemplateRef>\n <div\n class=\"sky-input-group-btn sky-phone-field-country-btn\"\n [attr.data-sky-test-iso2]=\"selectedCountry?.iso2\"\n [attr.data-sky-test-name]=\"selectedCountry?.name\"\n >\n <button\n aria-live=\"polite\"\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [attr.title]=\"\n ('skyux_phone_field_country_select_label' | skyLibResources) +\n ' ' +\n ('skyux_phone_field_country_selected_label'\n | skyLibResources: selectedCountry?.name)\n \"\n [attr.aria-label]=\"\n ('skyux_phone_field_country_select_label' | skyLibResources) +\n ' ' +\n ('skyux_phone_field_country_selected_label'\n | skyLibResources: selectedCountry?.name)\n \"\n [disabled]=\"countrySelectDisabled\"\n (click)=\"toggleCountrySearch(true)\"\n >\n <div\n class=\"sky-phone-field-flag iti-flag\"\n [ngClass]=\"selectedCountry?.iso2\"\n ></div>\n </button>\n </div>\n</ng-template>\n\n<ng-template #inputTemplateRef>\n <span\n *ngIf=\"phoneInputShown\"\n class=\"sky-phone-field-container\"\n [@.disabled]=\"\n inputBoxHostSvc &&\n (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===\n 'modern'\n \"\n [@phoneInputAnimation]=\"phoneInputShown ? 'open' : 'closed'\"\n (@phoneInputAnimation.done)=\"phoneInputAnimationEnd($event)\"\n >\n <ng-content></ng-content>\n </span>\n <span\n *ngIf=\"countrySearchShown\"\n class=\"sky-phone-field-container\"\n [@.disabled]=\"\n inputBoxHostSvc &&\n (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===\n 'modern'\n \"\n [@countrySearchAnimation]=\"countrySearchShown ? 'open' : 'closed'\"\n (@countrySearchAnimation.done)=\"countrySearchAnimationEnd($event)\"\n >\n <div class=\"sky-phone-field-country-search\" [formGroup]=\"countrySearchForm\">\n <sky-country-field\n formControlName=\"countrySearch\"\n [defaultCountry]=\"defaultCountry\"\n [hideSelectedCountryFlag]=\"true\"\n [includePhoneInfo]=\"true\"\n [supportedCountryISOs]=\"supportedCountryISOs\"\n (selectedCountryChange)=\"onCountrySelected($event)\"\n >\n </sky-country-field>\n </div>\n </span>\n</ng-template>\n\n<ng-template #buttonsInsetTemplateRef>\n <div\n *ngIf=\"countrySearchShown\"\n class=\"sky-input-group-btn sky-input-box-btn-inset sky-search-item-dismiss\"\n >\n <button\n class=\"sky-btn sky-phone-field-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"\n 'skyux_phone_field_country_search_dismiss' | skyLibResources\n \"\n [ngClass]=\"{\n 'sky-btn-default':\n (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===\n 'modern'\n }\"\n (click)=\"toggleCountrySearch(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-left\"\n iconType=\"skyux\"\n size=\"2x\"\n >\n </sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #countrySearchResultTemplate>\n <div class=\"sky-phone-field-search-result\">\n <i\n aria-hidden=\"true\"\n [className]=\"'sky-phone-field-flag iti-flag ' + item.iso2\"\n ></i>\n {{ item.name }}\n <span class=\"sky-deemphasized\">{{ item.dialCode }}</span>\n </div>\n</ng-template>\n"]}
|
|
1
|
+
{"version":3,"file":"phone-field.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts","../../../../../../../../libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n AnimationEvent,\n animate,\n style,\n transition,\n trigger,\n} from '@angular/animations';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n SkipSelf,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyInputBoxHostService } from '@skyux/forms';\nimport { SkyCountryFieldCountry } from '@skyux/lookup';\nimport { SkyThemeService } from '@skyux/theme';\n\nimport {\n PhoneNumberFormat,\n PhoneNumberType,\n PhoneNumberUtil,\n} from 'google-libphonenumber';\nimport 'intl-tel-input';\n\nimport { SkyPhoneFieldAdapterService } from './phone-field-adapter.service';\nimport { SkyPhoneFieldCountry } from './types/country';\nimport { SkyPhoneFieldNumberReturnFormat } from './types/number-return-format';\n\n// NOTE: The no-op animation is here in order to block the input's \"fade in\" animation\n// from firing on initial load. For more information on this technique you can see\n// https://www.bennadel.com/blog/3417-using-no-op-transitions-to-prevent-animation-during-the-initial-render-of-ngfor-in-angular-5-2-6.htm\n@Component({\n selector: 'sky-phone-field',\n templateUrl: './phone-field.component.html',\n styleUrls: ['./phone-field.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n SkyPhoneFieldAdapterService,\n // Prevents the embedded country field component from changing its behavior based on\n // being inside an input box. The phone field itself will handle the required changes\n // for input box.\n {\n provide: SkyInputBoxHostService,\n useValue: undefined,\n },\n ],\n animations: [\n trigger('blockAnimationOnLoad', [transition(':enter', [])]),\n trigger('countrySearchAnimation', [\n transition(':enter', [\n style({\n opacity: 0,\n width: 0,\n }),\n animate(\n '200ms ease-in',\n style({\n opacity: 1,\n width: '*',\n })\n ),\n ]),\n transition(':leave', [\n animate(\n '200ms ease-in',\n style({\n opacity: 0,\n width: 0,\n })\n ),\n ]),\n ]),\n trigger('phoneInputAnimation', [\n transition(':enter', [\n style({\n opacity: 0,\n }),\n animate(\n '150ms ease-in',\n style({\n opacity: 1,\n })\n ),\n ]),\n transition(':leave', [\n animate(\n '150ms ease-in',\n style({\n opacity: 0,\n })\n ),\n ]),\n ]),\n ],\n})\nexport class SkyPhoneFieldComponent implements OnDestroy, OnInit {\n /**\n * Indicates whether or not phone number extensions are allowed.\n * @default true\n */\n @Input()\n public allowExtensions = true;\n\n /**\n * Specifies the\n * [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)\n * country code for the default country. The country selector button displays a flag\n * icon for this default country until users select a different country.\n * @default \"us\"\n */\n @Input()\n public set defaultCountry(value: string) {\n if (value && value !== this._defaultCountry) {\n this._defaultCountry = value.toLowerCase();\n\n this.defaultCountryData = this.countries.find(\n (country) => country.iso2 === this._defaultCountry\n );\n }\n }\n\n public get defaultCountry(): string {\n return this._defaultCountry;\n }\n\n /**\n * Specifies the format for validated phone numbers.\n * Options include: `\"default\"`, `\"international\"`, and `\"national\"`.\n * @default \"default\"\n */\n @Input()\n public returnFormat: SkyPhoneFieldNumberReturnFormat = 'default';\n\n /**\n * Specifies the [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)\n * country codes for the countries that users can select. By default, all countries are available.\n */\n @Input()\n public supportedCountryISOs: string[];\n\n /**\n * Emits a `SkyPhoneFieldCountry` object when the selected country in the country search\n * input changes.\n */\n\n @Output()\n public selectedCountryChange = new EventEmitter<SkyPhoneFieldCountry>();\n\n public countries: SkyPhoneFieldCountry[];\n\n public countrySelectDisabled = false;\n\n public countrySearchShown = false;\n\n public phoneInputShown = true;\n\n public countrySearchForm: FormGroup;\n\n /**\n * Specifies the currently selected country to validate against.\n */\n @Input()\n public set selectedCountry(newCountry: SkyPhoneFieldCountry) {\n if (\n newCountry &&\n (!this._selectedCountry || this._selectedCountry.iso2 !== newCountry.iso2)\n ) {\n this._selectedCountry = this.countries.find(\n (country) => country.iso2 === newCountry.iso2\n );\n\n if (!this._selectedCountry.exampleNumber) {\n const numberObj = this.phoneUtils.getExampleNumberForType(\n newCountry.iso2,\n PhoneNumberType.FIXED_LINE\n );\n this._selectedCountry.exampleNumber = this.phoneUtils.format(\n numberObj,\n PhoneNumberFormat.NATIONAL\n );\n }\n\n this.selectedCountryChange.emit(this._selectedCountry);\n }\n }\n\n public get selectedCountry(): SkyPhoneFieldCountry {\n return this._selectedCountry;\n }\n\n @ViewChild('inputTemplateRef', {\n read: TemplateRef,\n static: true,\n })\n private inputTemplateRef: TemplateRef<any>;\n\n @ViewChild('countryBtnTemplateRef', {\n read: TemplateRef,\n static: true,\n })\n private countryBtnTemplateRef: TemplateRef<any>;\n\n @ViewChild('buttonsInsetTemplateRef', {\n read: TemplateRef,\n static: true,\n })\n private buttonsInsetTemplateRef: TemplateRef<any>;\n\n private defaultCountryData: SkyPhoneFieldCountry;\n\n private phoneInputAnimationTriggered = false;\n\n private phoneUtils = PhoneNumberUtil.getInstance();\n\n private longestDialCodeLength = 0;\n\n private _defaultCountry: string;\n\n private _selectedCountry: SkyPhoneFieldCountry;\n\n constructor(\n private formBuilder: FormBuilder,\n private adapterService: SkyPhoneFieldAdapterService,\n private changeDetector: ChangeDetectorRef,\n @Optional() public themeSvc?: SkyThemeService,\n @Optional() @SkipSelf() public inputBoxHostSvc?: SkyInputBoxHostService\n ) {\n /**\n * The json functions here ensures that we get a copy of the array and not the global original.\n * This ensures that multiple instances of the component don't overwrite the original data.\n *\n * We must type the window object as any here as the intl-tel-input library adds its object\n * to the main window object.\n */\n this.countries = JSON.parse(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n JSON.stringify((window as any).intlTelInputGlobals.getCountryData())\n );\n for (const country of this.countries) {\n country.dialCode = '+' + country.dialCode;\n\n if (country.dialCode.length > this.longestDialCodeLength) {\n this.longestDialCodeLength = country.dialCode.length;\n }\n }\n\n this.countrySearchForm = this.formBuilder.group({\n countrySearch: new FormControl(),\n });\n }\n\n public ngOnInit(): void {\n // The timeout here is needed to avoid a change before checked error when a user specifies\n // a selected country on initialization of the component.\n setTimeout(() => {\n if (this.inputBoxHostSvc) {\n this.inputBoxHostSvc.populate({\n inputTemplate: this.inputTemplateRef,\n buttonsInsetTemplate: this.buttonsInsetTemplateRef,\n buttonsLeftTemplate: this.countryBtnTemplateRef,\n });\n }\n\n if (!this.defaultCountry) {\n this.defaultCountry = 'us';\n }\n\n if (!this.selectedCountry) {\n this.selectedCountry = this.defaultCountryData;\n }\n this.changeDetector.markForCheck();\n }, 0);\n\n this.countrySearchForm\n .get('countrySearch')\n .valueChanges.subscribe((newValue: SkyCountryFieldCountry) => {\n if (newValue && newValue.iso2 !== this.selectedCountry.iso2) {\n this.selectedCountry = newValue;\n }\n });\n }\n\n public ngOnDestroy(): void {\n this.selectedCountryChange.complete();\n }\n\n /**\n * Sets the country to validate against based on the county's iso2 code.\n * @param countryCode The International Organization for Standardization's two-letter code\n * for the default country.\n * @internal\n */\n public onCountrySelected(newCountry: SkyCountryFieldCountry): void {\n if (newCountry) {\n this.selectedCountry = this.countries.find(\n (countryInfo) => countryInfo.iso2 === newCountry.iso2\n );\n this.toggleCountrySearch(false);\n }\n }\n\n public toggleCountrySearch(showSearch: boolean): void {\n this.phoneInputAnimationTriggered = true;\n\n if (showSearch) {\n this.phoneInputShown = false;\n } else {\n this.countrySearchShown = false;\n\n this.countrySearchForm.get('countrySearch').setValue(undefined);\n }\n\n this.changeDetector.markForCheck();\n }\n\n public countrySearchAnimationEnd(e: AnimationEvent) {\n if (!this.countrySearchShown) {\n this.phoneInputShown = true;\n } else {\n this.adapterService.focusCountrySearchElement(e.element);\n }\n\n this.changeDetector.markForCheck();\n }\n\n public phoneInputAnimationEnd(e: AnimationEvent) {\n if (!this.phoneInputShown) {\n this.countrySearchShown = true;\n } else {\n if (this.phoneInputAnimationTriggered) {\n this.adapterService.focusPhoneInput(e.element);\n this.phoneInputAnimationTriggered = false;\n }\n }\n\n this.changeDetector.markForCheck();\n }\n\n public setCountryByDialCode(phoneNumber: string): boolean {\n if (!phoneNumber || !phoneNumber.startsWith('+')) {\n return false;\n }\n\n let newCountry: SkyPhoneFieldCountry;\n\n for (let i = 1; i < this.longestDialCodeLength + 1; i++) {\n const dialCode = phoneNumber.substring(0, i);\n\n let foundCountry = this.countries.find(\n (country) => country.dialCode === dialCode && country.priority === 0\n );\n\n if (foundCountry) {\n // Ensure that the country that was found is one of the supported countries\n if (\n this.supportedCountryISOs &&\n this.supportedCountryISOs.findIndex(\n (isoCode) =>\n isoCode.toUpperCase() === foundCountry.iso2.toUpperCase()\n ) < 0\n ) {\n foundCountry = undefined;\n }\n\n if (foundCountry !== this.selectedCountry) {\n newCountry = foundCountry;\n }\n }\n }\n\n if (newCountry) {\n this.selectedCountry = newCountry;\n this.changeDetector.markForCheck();\n return true;\n }\n\n return false;\n }\n}\n","<ng-container *ngIf=\"!inputBoxHostSvc\">\n <div class=\"sky-input-group sky-phone-field\" [@blockAnimationOnLoad]>\n <ng-container *ngTemplateOutlet=\"countryBtnTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplateRef\"></ng-container>\n </div>\n</ng-container>\n\n<ng-template #countryBtnTemplateRef>\n <div\n class=\"sky-input-group-btn sky-phone-field-country-btn\"\n [attr.data-sky-test-iso2]=\"selectedCountry?.iso2\"\n [attr.data-sky-test-name]=\"selectedCountry?.name\"\n >\n <button\n aria-live=\"polite\"\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n [attr.title]=\"\n ('skyux_phone_field_country_select_label' | skyLibResources) +\n ' ' +\n ('skyux_phone_field_country_selected_label'\n | skyLibResources: selectedCountry?.name)\n \"\n [attr.aria-label]=\"\n ('skyux_phone_field_country_select_label' | skyLibResources) +\n ' ' +\n ('skyux_phone_field_country_selected_label'\n | skyLibResources: selectedCountry?.name)\n \"\n [disabled]=\"countrySelectDisabled\"\n (click)=\"toggleCountrySearch(true)\"\n >\n <div\n class=\"sky-phone-field-flag iti__flag\"\n [ngClass]=\"'iti__' + selectedCountry?.iso2\"\n ></div>\n </button>\n </div>\n</ng-template>\n\n<ng-template #inputTemplateRef>\n <span\n *ngIf=\"phoneInputShown\"\n class=\"sky-phone-field-container\"\n [@.disabled]=\"\n inputBoxHostSvc &&\n (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===\n 'modern'\n \"\n [@phoneInputAnimation]=\"phoneInputShown ? 'open' : 'closed'\"\n (@phoneInputAnimation.done)=\"phoneInputAnimationEnd($event)\"\n >\n <ng-content></ng-content>\n </span>\n <span\n *ngIf=\"countrySearchShown\"\n class=\"sky-phone-field-container\"\n [@.disabled]=\"\n inputBoxHostSvc &&\n (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===\n 'modern'\n \"\n [@countrySearchAnimation]=\"countrySearchShown ? 'open' : 'closed'\"\n (@countrySearchAnimation.done)=\"countrySearchAnimationEnd($event)\"\n >\n <div class=\"sky-phone-field-country-search\" [formGroup]=\"countrySearchForm\">\n <sky-country-field\n formControlName=\"countrySearch\"\n [defaultCountry]=\"defaultCountry\"\n [hideSelectedCountryFlag]=\"true\"\n [includePhoneInfo]=\"true\"\n [supportedCountryISOs]=\"supportedCountryISOs\"\n (selectedCountryChange)=\"onCountrySelected($event)\"\n >\n </sky-country-field>\n </div>\n </span>\n</ng-template>\n\n<ng-template #buttonsInsetTemplateRef>\n <div\n *ngIf=\"countrySearchShown\"\n class=\"sky-input-group-btn sky-input-box-btn-inset sky-search-item-dismiss\"\n >\n <button\n class=\"sky-btn sky-phone-field-search-btn-dismiss\"\n type=\"button\"\n [attr.title]=\"\n 'skyux_phone_field_country_search_dismiss' | skyLibResources\n \"\n [ngClass]=\"{\n 'sky-btn-default':\n (themeSvc?.settingsChange | async)?.currentSettings?.theme?.name ===\n 'modern'\n }\"\n (click)=\"toggleCountrySearch(false)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-circle-left\" size=\"lg\">\n </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-left\"\n iconType=\"skyux\"\n size=\"2x\"\n >\n </sky-icon>\n </button>\n </div>\n</ng-template>\n"]}
|