feat: Create component - phone number input (#326)(#497)(#498)(#338)

* feat: add phone number input

* feat:  phone number input

* chore: remove assets from lib

* chore : add country selector prefix to field

* chore: remove countryselector from inputdecoration

* chore: update logic phone number input

* chore: update changelog

* chore: update comment in enligsh

* chore: resolve loader spacing

* chore: format number with prefix from decoration

* chore: update te localizable core and documentation

* chore: comment condition not used

* chore: change logic of implementation of country

* chore: update documentation in phone number input

* chore : readonl input and country selector shared

* feat: Add onComplete write on text and phone field

* chore: refacto function on change

* chore: change label by enable

* review : remove comments and update comment on EN

* review: make changes recommended

* refacto: renaming classes by form input

* feat: refacto style by outlined

* chore: create new file with decoration form

* chore: remove comment

* feat: resolve issue about exception

* chore: update localized in arabic & remove todo

* review: add is loader when enable

* chore: update localizable

* review: country selector open when enable readonly

* review: update with Alias for OudsFormInputDeco

* review: update accessibility for country selector

* chore: add on pressed for suffix icon

* feat: update with  label max line

* feat: change phone number input in main component

* feat: update func of getLabelMaxLines

* feat: Add dart doc for phoneNumberInput

* chore: resolve issue placeholder in hintText

* review: remove countries from doc

* review: change place of outlined label

* feat: add documentation library country selector

* review: update tokens after review design

* chore: add has prefix to hide/show prefix number

* chore: resolve readOnly FloatingLabel

* chore: update documentation for error case

* review: extract Textfield Method and add doc

* chore: activate loader only after typing

* chore: resove formatting phone number

* chore: add prefix of country to returned value if exist

* chore: update icons with theme

* chore: update le width with 80% of screen

* chore: Add Accessibility phoneNumberInput

* chore: resolve padding de FormFieldsCustomization

* chore: update Accecibility

* review: we don't clean text if we select the some country

* chore: update label color when error & comment debugPrint

* chore: update doc with new format

* chore: resolve issue accessibility

* chore: when prefix on country selector be off

* resolve: improve a11y on prefix and vocal #497 #498

* chore: update icon error and a11y

* chore: update localizable strings PhoneNumberInput

* fix : update doc

* chore: update accessibility prefix

---------

Co-authored-by: Ahmed Amine Zribi <ahmedamine.zribi@sofrecom>
Co-authored-by: nhammami <nouha.hammami@sofrecom.com>

Author: 3 people

app/CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.7.0...develop)
 
 ### Added
+- [DemoApp][Library] Create component - `Phone Number Input` ([#326](https://github.com/Orange-OpenSource/ouds-flutter/issues/326))
 - [DemoApp][Library] Manage the new medium font weight `Typography` ([#403](https://github.com/Orange-OpenSource/ouds-flutter/issues/#403))
 - [Tool] Add `ITSAppUsesNonExemptEncryption` into info.plist ([#526](https://github.com/Orange-OpenSource/ouds-flutter/issues/#526))
 
@@ -195,4 +196,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Library] Create the basics of a documentation ([#7](https://github.com/Orange-OpenSource/ouds-flutter/issues/7))
 - [Library] Create the basic architecture of the library ([#4](https://github.com/Orange-OpenSource/ouds-flutter/issues/4))
 - [DemoApp] Distribute demo app for validation ([#5](https://github.com/Orange-OpenSource/ouds-flutter/issues/13))
-- [DemoApp] Create the basic architecture of the demo application ([#5](https://github.com/Orange-OpenSource/ouds-flutter/issues/5))
+- [DemoApp] Create the basic architecture of the demo application ([#5](https://github.com/Orange-OpenSource/ouds-flutter/issues/5))

app/assets/orange/communication/device/device-smartphone.svg

@@ -869,6 +869,36 @@ abstract class AppLocalizations {
   /// **'Helper Text'**
   String get app_components_textInputHelperText_label;
 
+  /// No description provided for @app_components_phoneNumberInput_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Phone number input'**
+  String get app_components_phoneNumberInput_label;
+
+  /// No description provided for @app_components_phoneNumberInput_description_text.
+  ///
+  /// In en, this message translates to:
+  /// **'A Phone Number Input is a form field specifically designed to capture and validate telephone numbers, often in international format. It typically integrates a country selector, allowing users to choose their country and automatically apply the corresponding dialing code (such as +33 for France).'**
+  String get app_components_phoneNumberInput_description_text;
+
+  /// No description provided for @app_components_phoneNumberInput_country_selector_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Country selector'**
+  String get app_components_phoneNumberInput_country_selector_label;
+
+  /// No description provided for @app_components_phoneNumberInput_prefix_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Prefix'**
+  String get app_components_phoneNumberInput_prefix_label;
+
+  /// No description provided for @app_components_phoneNumberInput_error_label.
+  ///
+  /// In en, this message translates to:
+  /// **'The phone number can\'t be empty.'**
+  String get app_components_phoneNumberInput_error_label;
+
   /// No description provided for @app_components_link_label.
   ///
   /// In en, this message translates to:

app/assets/sosh/communication/device/device-smartphone.svg

@@ -421,6 +421,24 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_components_textInputHelperText_label => 'نص المساعدة.';
 
+  @override
+  String get app_components_phoneNumberInput_label => 'Phone number input';
+
+  @override
+  String get app_components_phoneNumberInput_description_text =>
+      'Phone Number هو حقل نموذج مصمم خصيصًا لالتقاط أرقام الهواتف والتحقق منها، وغالبًا ما يكون بتنسيق دولي. عادةً ما يتضمن محددًا للدولة، مما يسمح للمستخدمين باختيار بلدهم وتطبيق رمز الاتصال المقابل تلقائيًا (مثل 33 لفرنسا).';
+
+  @override
+  String get app_components_phoneNumberInput_country_selector_label =>
+      'Country selector';
+
+  @override
+  String get app_components_phoneNumberInput_prefix_label => 'Prefix';
+
+  @override
+  String get app_components_phoneNumberInput_error_label =>
+      'لا يمكن أن يكون رقم الهاتف فارغًا.';
+
   @override
   String get app_components_link_label => 'Link';
 

app/assets/wireframe/communication/device/device-smartphone.svg

@@ -421,6 +421,24 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_components_textInputHelperText_label => 'Helper Text';
 
+  @override
+  String get app_components_phoneNumberInput_label => 'Phone number input';
+
+  @override
+  String get app_components_phoneNumberInput_description_text =>
+      'A Phone Number Input is a form field specifically designed to capture and validate telephone numbers, often in international format. It typically integrates a country selector, allowing users to choose their country and automatically apply the corresponding dialing code (such as +33 for France).';
+
+  @override
+  String get app_components_phoneNumberInput_country_selector_label =>
+      'Country selector';
+
+  @override
+  String get app_components_phoneNumberInput_prefix_label => 'Prefix';
+
+  @override
+  String get app_components_phoneNumberInput_error_label =>
+      'The phone number can\'t be empty.';
+
   @override
   String get app_components_link_label => 'Link';
 

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -88,6 +88,10 @@
   "app_components_textInput_trailingAction_a11y": "وصف محتوى أيقونة النهاية",
   "app_components_textInputHelperText_label": "نص المساعدة.",
 
+   "@_components_phone_number_input": {},
+   "app_components_phoneNumberInput_description_text": "Phone Number هو حقل نموذج مصمم خصيصًا لالتقاط أرقام الهواتف والتحقق منها، وغالبًا ما يكون بتنسيق دولي. عادةً ما يتضمن محددًا للدولة، مما يسمح للمستخدمين باختيار بلدهم وتطبيق رمز الاتصال المقابل تلقائيًا (مثل 33 لفرنسا).",
+   "app_components_phoneNumberInput_error_label": "لا يمكن أن يكون رقم الهاتف فارغًا.",
+
   "@_components_link": {},
   "app_components_link_description_text": "تُستخدم links لتوجيه المستخدمين إلى موارد أو أقسام إضافية، سواء كانت داخلية (ضمن نفس التطبيق) أو خارجية (مثل موقع إلكتروني أو مستند).",
 

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -196,6 +196,13 @@
   "app_components_textInput_helperLink_label": "Helper link",
   "app_components_textInputHelperText_label": "Helper Text",
 
+  "@_components_phone_number_input": {},
+  "app_components_phoneNumberInput_label": "Phone number input",
+  "app_components_phoneNumberInput_description_text": "A Phone Number Input is a form field specifically designed to capture and validate telephone numbers, often in international format. It typically integrates a country selector, allowing users to choose their country and automatically apply the corresponding dialing code (such as +33 for France).",
+  "app_components_phoneNumberInput_country_selector_label": "Country selector",
+  "app_components_phoneNumberInput_prefix_label": "Prefix",
+  "app_components_phoneNumberInput_error_label": "The phone number can't be empty.",
+
   "@_components_link": {},
   "app_components_link_label": "Link",
   "app_components_link_description_text": "Links direct users to other resources or sections, whether internal (within the same application) or external (to a website or document).",

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -15,8 +15,11 @@ import 'package:ouds_core/components/badge/ouds_badge.dart';
 import 'package:ouds_core/components/button/ouds_button.dart';
 import 'package:ouds_core/components/checkbox/ouds_checkbox.dart';
 import 'package:ouds_core/components/chip/ouds_filter_chip.dart';
+import 'package:ouds_core/components/country_selector/countries.dart';
+import 'package:ouds_core/components/country_selector/ouds_country_selector.dart';
 import 'package:ouds_core/components/divider/ouds_divider.dart';
 import 'package:ouds_core/components/form_input/internal/ouds_form_input_decoration.dart';
+import 'package:ouds_core/components/form_input/ouds_phone_number_input.dart';
 import 'package:ouds_core/components/form_input/ouds_text_input.dart';
 import 'package:ouds_core/components/form_input/password_input/ouds_password_input.dart';
 import 'package:ouds_core/components/form_input/password_input/ouds_password_input_decoration.dart';
@@ -37,15 +40,16 @@ import 'package:ouds_flutter_demo/ui/components/component_container.dart';
 import 'package:ouds_flutter_demo/ui/components/component_entities.dart';
 import 'package:ouds_flutter_demo/ui/components/divider/divider_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/form_input/password_input/password_input_demo_screen.dart';
+import 'package:ouds_flutter_demo/ui/components/form_input/phone_number/phone_number_input_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/form_input/text_input/text_input_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/link/link_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/pin_code_input/pin_code_input_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/radio_button/radio_button_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/radio_button/radio_button_item_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/switch/switch_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/switch/switch_item_demo_screen.dart';
-import 'package:ouds_flutter_demo/ui/components/tag/tag_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/tag/input_tag_demo_screen.dart';
+import 'package:ouds_flutter_demo/ui/components/tag/tag_demo_screen.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 
 List<Component> components(BuildContext context) {
@@ -195,6 +199,25 @@ List<Component> components(BuildContext context) {
       context.l10n.app_components_passwordInput_description_text,
       PasswordInputDemoScreen(),
     ),
+    Component(
+      context.l10n.app_components_phoneNumberInput_label,
+      ComponentContainer(
+        child: Padding(
+          padding: const EdgeInsetsGeometry.directional(start: 20.0, end: 20.0),
+          child: Center(
+            child: OudsPhoneNumberInput(
+              decoration: OudsInputDecoration(labelText: "Phone number", helperText: "Include your full number without spaces.", outlined: false),
+              countrySelector: CountrySelector(
+                countryFilter: CountryFilter.custom,
+                codes: ["fr", "tn", "us"],
+              ),
+            ),
+          ),
+        ),
+      ),
+      context.l10n.app_components_phoneNumberInput_description_text,
+      PhoneNumberInputDemoScreen(),
+    ),
     Component(
       context.l10n.app_components_pinCodeInput_label,
       ComponentContainer(