diff --git a/packages-new/components/phone-number/src/components/osds-phone-number/core/controller.spec.ts b/packages-new/components/phone-number/src/components/osds-phone-number/core/controller.spec.ts
deleted file mode 100644
index a5cf149d06..0000000000
--- a/packages-new/components/phone-number/src/components/osds-phone-number/core/controller.spec.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { ODS_COUNTRY_ISO_CODE, ODS_COUNTRY_ISO_CODES } from '@ovhcloud/ods-common-core';
-import { OsdsPhoneNumber } from '../osds-phone-number';
-import { OdsPhoneNumberController } from './controller';
-
-class OdsPhoneNumberMock extends OsdsPhoneNumber {
- constructor(attribute: Partial<OsdsPhoneNumber>) {
- super();
- Object.assign(this, attribute)
- }
- emitChange = jest.fn();
- emitFocus = jest.fn();
- emitBlur = jest.fn();
-}
-
-describe('spec:ods-phone-number-controller', () => {
- let controller: OdsPhoneNumberController;
- let component: OsdsPhoneNumber;
-
- function setup(attributes: Partial<OsdsPhoneNumber> = {}, language?: string) {
- component = new OdsPhoneNumberMock(attributes);
- controller = new OdsPhoneNumberController(component);
- global.navigator = {
- ...global.navigator,
- language,
- }
- }
-
- afterEach(() => {
- jest.clearAllMocks();
- });
-
- describe('methods', () => {
- describe('methods:setDefaultIsoCode', () => {
- it('should get the default iso code', () => {
- setup();
- const isoCode = controller.setDefaultIsoCode();
- expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.AD);
- });
-
- it('should get the component iso code', () => {
- setup({ isoCode: ODS_COUNTRY_ISO_CODE.FR });
- const isoCode = controller.setDefaultIsoCode();
- expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.FR);
- });
-
- it('should get the navigator iso code', () => {
- setup({ }, 'fr-FR');
- const isoCode = controller.setDefaultIsoCode();
- expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.FR);
- });
-
- it('should get the navigator iso code with the second language', () => {
- setup({ }, 'en-us');
- const isoCode = controller.setDefaultIsoCode();
- expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.US);
- });
-
- it('should not get the navigator iso code because of a wrong isoCode', () => {
- setup({ }, 'en');
- const isoCode = controller.setDefaultIsoCode();
- expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.AD);
- });
-
- it('should not get the component iso code because of a wrong isoCode', () => {
- setup({ isoCode: 'fake' as ODS_COUNTRY_ISO_CODE });
- const isoCode = controller.setDefaultIsoCode();
- expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.AD);
- });
- });
-
- describe('methods:setDefaultLocale', () => {
- it('should get the default locale', () => {
- setup();
- const locale = controller.setDefaultLocale();
- expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
- });
-
- it('should get the component locale', () => {
- setup({ locale: ODS_COUNTRY_ISO_CODE.GB });
- const locale = controller.setDefaultLocale();
- expect(locale).toBe(ODS_COUNTRY_ISO_CODE.GB);
- });
-
- it('should get the navigator locale', () => {
- setup({ }, 'fr-FR');
- const locale = controller.setDefaultLocale();
- expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
- });
-
- it('should get the navigator locale with the second language', () => {
- setup({ }, 'en-us');
- const isoCode = controller.setDefaultIsoCode();
- expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.US);
- });
-
- it('should not get the navigator locale because of a wrong isoCode', () => {
- setup({ }, 'en-UK');
- const locale = controller.setDefaultLocale();
- expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
- });
-
- it('should not get the component locale because of a wrong isoCode', () => {
- setup({ locale: 'fake' as ODS_COUNTRY_ISO_CODE });
- const locale = controller.setDefaultLocale();
- expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
- });
- });
-
- describe('methods:getCountriesList', () => {
- it('should get all countries', () => {
- setup({ countries: 'all' });
- const countries = controller.getCountriesList();
- expect(countries).toEqual(ODS_COUNTRY_ISO_CODES);
- });
-
- it('should get no countries', () => {
- setup({ });
- const countries = controller.getCountriesList();
- expect(countries).toEqual([]);
- });
-
- it('should get a list countries', () => {
- const countries = [ODS_COUNTRY_ISO_CODE.FR, ODS_COUNTRY_ISO_CODE.GB]
- setup({ countries });
- expect(controller.getCountriesList()).toEqual(countries);
- });
- });
-
- });
-});
diff --git a/packages-new/components/phone-number/src/components/osds-phone-number/core/controller.ts b/packages-new/components/phone-number/src/components/osds-phone-number/core/controller.ts
deleted file mode 100644
index 6c6d63c3c2..0000000000
--- a/packages-new/components/phone-number/src/components/osds-phone-number/core/controller.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ODS_COUNTRY_ISO_CODE, ODS_COUNTRY_ISO_CODES } from '@ovhcloud/ods-common-core';
-import { OsdsPhoneNumber } from '../osds-phone-number';
-
-class OdsPhoneNumberController {
-
- constructor(private readonly component: OsdsPhoneNumber) { }
-
- setDefaultLocale(): ODS_COUNTRY_ISO_CODE {
- if (this.isOdsCountryCode(this.component.locale)) {
- return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(this.component.locale)];
- }
- const navigatorLang = this.getNavigatorLang();
- if (navigatorLang) {
- return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(navigatorLang)];
- }
- return ODS_COUNTRY_ISO_CODE.FR;
- }
-
- setDefaultIsoCode(): ODS_COUNTRY_ISO_CODE {
- if (this.isOdsCountryCode(this.component.isoCode)) {
- return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(this.component.isoCode)];
- }
- const navigatorLang = this.getNavigatorLang();
- if (navigatorLang) {
- return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(navigatorLang)];
- }
- return ODS_COUNTRY_ISO_CODE.AD;
- }
-
- getCountriesList(): ODS_COUNTRY_ISO_CODE[] {
- if (this.component.countries === 'all') {
- return ODS_COUNTRY_ISO_CODES as ODS_COUNTRY_ISO_CODE[];
- }
- return this.component.countries || [];
- }
-
- private getNavigatorLang(): ODS_COUNTRY_ISO_CODE | undefined {
- const language = navigator.language?.split('-')[0];
- if (language && this.isOdsCountryCode(language)) {
- return language;
- }
- const language2 = navigator.language?.split('-')[1];
- if (language2 && this.isOdsCountryCode(language2)) {
- return language2;
- }
- return undefined;
- }
-
- private isOdsCountryCode(value: string | ODS_COUNTRY_ISO_CODE | undefined): value is ODS_COUNTRY_ISO_CODE {
- return !!value && ODS_COUNTRY_ISO_CODES.includes(value as ODS_COUNTRY_ISO_CODE);
- }
-}
-
-export {
- OdsPhoneNumberController,
-};
diff --git a/packages-new/storybook/stories/components/phone-number/phone-number.specifications.stories.mdx b/packages-new/storybook/stories/components/phone-number/phone-number.specifications.stories.mdx
deleted file mode 100644
index 0fdce48c05..0000000000
--- a/packages-new/storybook/stories/components/phone-number/phone-number.specifications.stories.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import SpecificationsPhoneNumber from '@ovhcloud/ods-component-phone-number/documentation/specifications/specifications-phone-number.mdx';
-import Notes from '../notes.mdx';
-
-<Meta title="UI Components/Phone Number [molecule]/Specifications" />
-
-# Phone Number - Technical Specifications
-----
-
-<SpecificationsPhoneNumber />
-
----
-<Notes/>
diff --git a/packages-new/storybook/stories/components/phone-number/phone-number.web-component.stories.page.mdx b/packages-new/storybook/stories/components/phone-number/phone-number.web-component.stories.page.mdx
deleted file mode 100644
index 0f3049b808..0000000000
--- a/packages-new/storybook/stories/components/phone-number/phone-number.web-component.stories.page.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs';
-import APITable from '@ovhcloud/ods-component-phone-number/dist/docs/components/osds-phone-number/readme.md';
-import Usage from '@ovhcloud/ods-component-phone-number/src/docs/osds-phone-number/usage.mdx';
-
-<Meta title="UI Components/Phone Number [molecule]/Web Component" />
-
-# `<osds-phone-number>`
-
-## Table of Contents
-> - **[Usage](#usage)**
-> - **[Getting Started](#getting-started)**
-> - **[API Table](#api-table)**
-
-<hr/>
-<Usage />
-<hr/>
-<div id="api-table"><Description>{APITable}</Description></div>
diff --git a/packages-new/storybook/stories/components/phone-number/phone-number.web-components.stories.ts b/packages-new/storybook/stories/components/phone-number/phone-number.web-components.stories.ts
deleted file mode 100644
index d49fe1fbe4..0000000000
--- a/packages-new/storybook/stories/components/phone-number/phone-number.web-components.stories.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { html } from 'lit-html';
-import { defineCustomElements } from '@ovhcloud/ods-component-phone-number/loader';
-import { extractArgTypes, extractStoryParams, getTagAttributes } from '../../../core/componentHTMLUtils';
-// @ts-ignore
-import changelog from '@ovhcloud/ods-component-phone-number/CHANGELOG.md';
-// @ts-ignore
-import page from './phone-number.web-component.stories.page.mdx';
-
-defineCustomElements();
-
-/* Default story parameters */
-const storyParams = {
- value: {
- category: 'Misc',
- control: { type: 'text' },
- },
- clearable: {
- category: 'Misc',
- defaultValue: false,
- },
- disabled: {
- category: 'Misc',
- defaultValue: false,
- },
- error: {
- category: 'Misc',
- defaultValue: false,
- },
- locale: {
- category: 'Général',
- control: { type: 'text' },
- defaultValue: 'fr',
- },
- isoCode: {
- category: 'Général',
- control: { type: 'text' },
- defaultValue: 'fr',
- }
-};
-
-const countriesParams = {
- countries: {
- category: 'Général',
- defaultValue: [
- 'fr', 'pt', 'gb'
- ]
- },
-}
-
-const allCountriesParams = {
- countries: {
- category: 'Général',
- defaultValue: 'all'
- },
-}
-export default {
- title: 'UI Components/Phone Number [molecule]/Web Component',
- id: 'phone-number',
- parameters: {
- notes: {
- changelog,
- },
- docs: { page }
- },
- argTypes: extractArgTypes({...storyParams, ...countriesParams })
-};
-
-/* Default */
-const OsdsPhoneNumberDefault = (args: Record<string, unknown>) => html`
- <osds-phone-number ...=${getTagAttributes(args)} @keydown=${(e: KeyboardEvent) => e.stopPropagation()}>
- </osds-phone-number>
-`;
-export const Default = OsdsPhoneNumberDefault.bind({});
-// @ts-ignore
-Default.args = {
- ...(extractStoryParams(storyParams)),
-};
-
-export const Countries = OsdsPhoneNumberDefault.bind({});
-// @ts-ignore
-Countries.args = {
- ...extractStoryParams({ ...storyParams, ...countriesParams }),
-};
-
-
-export const AllCountries = OsdsPhoneNumberDefault.bind({});
-// @ts-ignore
-AllCountries.args = {
- ...extractStoryParams({ ...storyParams, ...allCountriesParams }),
-};
\ No newline at end of file
diff --git a/packages/components/input/src/components/osds-input/osds-input.tsx b/packages/components/input/src/components/osds-input/osds-input.tsx
index a7d69bce66..f784133e5c 100644
--- a/packages/components/input/src/components/osds-input/osds-input.tsx
+++ b/packages/components/input/src/components/osds-input/osds-input.tsx
@@ -289,7 +289,7 @@ export class OsdsInput implements OdsInputAttribute, OdsInputEvent, OdsInputMeth
}
private hasPlaceholder(): boolean {
- return !!this.placeholder && !this.inputEl?.value;
+ return !!this.placeholder && !this.value;
}
render() {
diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss
index bdd156af71..8794c6b38f 100644
--- a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss
+++ b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss
@@ -11,6 +11,10 @@
--ods-size-select-border-radius-bottom-right: 0;
--ods-size-select-border-radius-top-right: 0;
--ods-size-select-border-right-width: 0;
+ &-label{
+ width: 24px;
+ height: 18px;
+ }
&__option {
display: flex;
diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx
index f14bbf490e..e0e9cf0792 100644
--- a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx
+++ b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx
@@ -9,7 +9,7 @@ import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
import { OdsPhoneNumberController } from './core/controller';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { ODS_PHONE_NUMBER_COUNTRY_PRESET } from './constants/phone-number-countries';
-import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
+import { PhoneNumber, PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-component-text';
/**
@@ -56,6 +56,8 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
@State() hasCountries: boolean = false;
+ @State() slotSelectedLabel?: HTMLSpanElement;
+
componentWillLoad(): void {
// order matter
this.handlerCountries();
@@ -82,6 +84,15 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
this.hasCountries = !!this.parsedCountries?.length;
}
+ @Watch('isoCode')
+ @Watch('slotSelectedLabel')
+ onIsoCodeChange(): void {
+ if (!this.slotSelectedLabel || !this.isoCode) {
+ return;
+ }
+ this.slotSelectedLabel.innerHTML = `<osds-flag lazy iso=${this.isoCode}></osds-flag>`;
+ }
+
@Listen('odsValueChange')
handlerOdsValueChange(event: CustomEvent<OdsInputValueChangeEventDetail | OdsPhoneNumberValueChangeEventDetail | OdsSelectValueChangeEventDetail>): void {
if ('isoCode' in event.detail) {
@@ -133,11 +144,16 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
}
getPlaceholder(): string | undefined {
- if (!this.isoCode) {
- return undefined;
- }
- const exampleNumber = this.phoneUtils.getExampleNumber(this.isoCode);
- return this.phoneUtils.format(exampleNumber, PhoneNumberFormat.E164);
+ const exampleNumber = this.getExampleNumberByIsoCode();
+ return exampleNumber && this.phoneUtils.format(exampleNumber, PhoneNumberFormat.NATIONAL);
+ }
+
+ getPrefix(): string | undefined {
+ return `(+${this.getExampleNumberByIsoCode()?.getCountryCode()})`
+ }
+
+ private getExampleNumberByIsoCode(): PhoneNumber | undefined {
+ return this.isoCode && this.phoneUtils.getExampleNumber(this.isoCode);
}
render() {
@@ -150,6 +166,14 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
disabled={this.disabled}
error={this.error}
value={this.isoCode}>
+ <span ref={ (el?: HTMLSpanElement) => {
+ if (!el) {
+ return;
+ }
+ setTimeout(() => this.slotSelectedLabel = el, 0);
+ }}
+ slot="selectedLabel"
+ class="phone-number__select-label" />
{ this.parsedCountries?.map((country) => {
const i18nCountry = this.i18nCountriesMap?.get(country);
return <osds-select-option value={ country } key={ country }>
@@ -173,6 +197,7 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
'phone-number__input': true,
'phone-number__input--not-first': this.hasCountries,
}}
+ prefix-value={this.getPrefix()}
placeholder={this.getPlaceholder()}
color={ODS_THEME_COLOR_INTENT.primary}
type={ODS_INPUT_TYPE.tel}