feat(phone-number): add autoPlaceholder input property to show phone …

…number example
LuccaSA · Dec 24, 2024 · 38b53bf · 38b53bf
1 parent 46a8888
commit 38b53bf
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/ng/forms/phone-number-input/phone-number-input.component.html b/packages/ng/forms/phone-number-input/phone-number-input.component.html
@@ -39,6 +39,7 @@
 				luInputStandalone
 				class="textField-input-value"
 				[attr.autocomplete]="autocomplete ? autocomplete === 'off' ? 'off' : 'tel-national'  : null"
+				[placeholder]="placeholder()"
 			/>
 		</div>
 	</div>

diff --git a/packages/ng/forms/phone-number-input/phone-number-input.component.ts b/packages/ng/forms/phone-number-input/phone-number-input.component.ts
@@ -4,7 +4,8 @@ import { LuDisplayerDirective, LuOptionDirective } from '@lucca-front/ng/core-se
 import { FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';
 import { TextInputComponent } from '@lucca-front/ng/forms';
 import { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';
-import { type CountryCallingCode, formatIncompletePhoneNumber, getCountries, getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js';
+import { type CountryCallingCode, formatIncompletePhoneNumber, getCountries, getCountryCallingCode, parsePhoneNumber, getExampleNumber } from 'libphonenumber-js';
+import examples from 'libphonenumber-js/mobile/examples';
 import { CountryCode, E164Number } from './types';
 import { PhoneNumberValidators } from './validators';
 
@@ -67,6 +68,8 @@ export class PhoneNumberInputComponent implements ControlValueAccessor, Validato
 
 	@Input() autocomplete?: 'off' | 'tel';
 
+	autoPlaceholder = input<boolean>(false);
+
 	#onChange?: (value: E164Number) => void;
 
 	#onTouched?: () => void;
@@ -116,6 +119,11 @@ export class PhoneNumberInputComponent implements ControlValueAccessor, Validato
 
 	countryCode = computed(() => this.countryCodeSelected() ?? this.defaultCountryCode());
 
+	placeholder = computed(() => {
+		const exampleNumber = this.autoPlaceholder() !== false ? getExampleNumber(this.countryCode(), examples) : undefined;
+		return exampleNumber?.formatNational() ?? '';
+	});
+
 	displayedNumber = signal<string | undefined>(undefined);
 
 	prefixEntry = computed(() => this.#prefixEntries().find((p) => p.country === this.countryCode()));

diff --git a/stories/documentation/forms/fields/phone-number-input/angular/phone-number-input.stories.ts b/stories/documentation/forms/fields/phone-number-input/angular/phone-number-input.stories.ts
@@ -77,5 +77,6 @@ export const Basic: StoryObj<PhoneNumberInputComponent & FormFieldComponent & {
 		errorInlineMessage: 'Invalid Phone Number',
 		inlineMessageState: 'default',
 		disabled: false,
+		autoPlaceholder: false,
 	},
 };