diff --git a/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts b/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts index 282e82c7ee..08ac1e1a85 100644 --- a/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts +++ b/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts @@ -270,6 +270,27 @@ export class SkyPhoneFieldComponent implements OnDestroy, OnInit { return this.#_selectedCountry; } + /** + * Whether phone number example format hints are shown in the input help text. + * @default true + */ + @Input() + public set allowExampleText(value: boolean | undefined) { + const newValue = value !== false; + if (this.#_allowExampleText !== newValue) { + this.#_allowExampleText = newValue; + if (!newValue && this.inputBoxHostSvc) { + this.inputBoxHostSvc.setHintText(undefined); + } else { + this.#populateInputBoxHelpText(); + } + } + } + + public get allowExampleText(): boolean { + return this.#_allowExampleText; + } + @ViewChild('inputTemplateRef', { read: TemplateRef, static: true, @@ -302,6 +323,8 @@ export class SkyPhoneFieldComponent implements OnDestroy, OnInit { #_selectedCountry: SkyPhoneFieldCountry | undefined; + #_allowExampleText = true; + #countrySearchFormControl = new FormControl< SkyCountryFieldCountry | undefined | null >(undefined); @@ -588,7 +611,11 @@ export class SkyPhoneFieldComponent implements OnDestroy, OnInit { } #populateInputBoxHelpText(): void { - if (this.inputBoxHostSvc && this.inputTemplateRef) { + if ( + this.inputBoxHostSvc && + this.inputTemplateRef && + this.#_allowExampleText + ) { this.inputBoxHostSvc?.setHintText( this.#appFormat.formatText( this.#phoneNumberFormatHintTextTemplateString,