fix(input-tel): use pattern validation message for too-short/too-long (#1693)

.changeset/five-pots-clean.md

@@ -0,0 +1,6 @@
+---
+'@lion/input-tel': patch
+'@lion/validate-messages': patch
+---
+
+Add replace Min/MaxLength validator messages with Pattern validator message in PhoneNumber validator, since wrong info (param) was shown. And removed default Validator message for PhoneNumber validator.

docs/components/input-tel-dropdown/examples.md

@@ -4,6 +4,7 @@
 import { html } from '@mdjs/mdjs-preview';
 import '@lion/select-rich/define';
 import './src/intl-input-tel-dropdown.js';
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 ```
 
 ## Input Tel International
@@ -16,7 +17,9 @@ Inspired by:
 - [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2)
 
 ```js preview-story
-export const IntlInputTelDropdown = () => html`
+export const IntlInputTelDropdown = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <intl-input-tel-dropdown
       .preferredRegions="${['NL', 'PH']}"
       .modelValue=${'+639608920056'}
@@ -25,4 +28,5 @@ export const IntlInputTelDropdown = () => html`
       name="phoneNumber"
     ></intl-input-tel-dropdown>
   `;
+};
 ```

docs/components/input-tel-dropdown/overview.md

@@ -5,10 +5,12 @@ Extension of Input Tel that prefixes a dropdown list that shows all possible reg
 ```js script
 import { html } from '@mdjs/mdjs-preview';
 import '@lion/input-tel-dropdown/define';
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 ```
 
 ```js preview-story
 export const main = () => {
+  loadDefaultFeedbackMessages();
   return html`
     <lion-input-tel-dropdown label="Telephone number" name="phoneNumber"></lion-input-tel-dropdown>
   `;

docs/components/input-tel-dropdown/use-cases.md

@@ -7,6 +7,9 @@ import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import { PhoneUtilManager } from '@lion/input-tel';
 import '@lion/input-tel-dropdown/define';
 import '../../../docs/fundamentals/systems/form/assets/h-output.js';
+
+// TODO: make each example load/use the dependencies by default
+// loadDefaultFeedbackMessages();
 ```
 
 ## Input Tel Dropdown
@@ -15,7 +18,9 @@ When `.allowedRegions` is not configured, all regions/countries will be availabl
 list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.
 
 ```js preview-story
-export const InputTelDropdown = () => html`
+export const InputTelDropdown = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <lion-input-tel-dropdown
       label="Select region via dropdown"
       help-text="Shows all regions by default"
@@ -26,6 +31,7 @@ export const InputTelDropdown = () => html`
       .readyPromise="${PhoneUtilManager.loadComplete}"
     ></h-output>
   `;
+};
 ```
 
 ## Allowed regions
@@ -34,7 +40,9 @@ When `.allowedRegions` is configured, only those regions/countries will be avail
 list.
 
 ```js preview-story
-export const allowedRegions = () => html`
+export const allowedRegions = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <lion-input-tel-dropdown
       label="Select region via dropdown"
       help-text="With region code 'NL'"
@@ -47,6 +55,7 @@ export const allowedRegions = () => html`
       .readyPromise="${PhoneUtilManager.loadComplete}"
     ></h-output>
   `;
+};
 ```
 
 ## Preferred regions
@@ -54,7 +63,9 @@ export const allowedRegions = () => html`
 When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
 
 ```js preview-story
-export const preferredRegionCodes = () => html`
+export const preferredRegionCodes = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <lion-input-tel-dropdown
       label="Select region via dropdown"
       help-text="Preferred regions show on top"
@@ -67,5 +78,6 @@ export const preferredRegionCodes = () => html`
       .show="${['modelValue', 'activeRegion']}"
       .readyPromise="${PhoneUtilManager.loadComplete}"
     ></h-output>
-`;
+  `
+};
 ```

docs/components/input-tel/overview.md

@@ -7,11 +7,13 @@ import { html } from '@mdjs/mdjs-preview';
 import { ref, createRef } from '@lion/core';
 import { PhoneUtilManager } from '@lion/input-tel';
 import '@lion/input-tel/define';
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
 import '../../../docs/fundamentals/systems/form/assets/h-output.js';
 ```
 
 ```js preview-story
 export const main = () => {
+  loadDefaultFeedbackMessages();
   return html`
     <lion-input-tel
       .modelValue="${'+639921343959'}"

docs/components/input-tel/use-cases.md

@@ -10,6 +10,9 @@ import { PhoneUtilManager } from '@lion/input-tel';
 import '@lion/input-tel/define';
 import './src/h-region-code-table.js';
 import '../../../docs/fundamentals/systems/form/assets/h-output.js';
+
+// TODO: make each example load/use the dependencies by default
+// loadDefaultFeedbackMessages();
 ```
 
 ## Regions: some context
@@ -23,7 +26,10 @@ The table below lists all possible regions worldwide. When [allowed regions](#al
 all of them will be supported as values of Input Tel.
 
 ```js story
-export const regionCodesTable = () => html`<h-region-code-table></h-region-code-table>`;
+export const regionCodesTable = () => {
+  loadDefaultFeedbackMessages();
+  return html`<h-region-code-table></h-region-code-table>`;
+};
 ```
 
 ### Active region
@@ -51,6 +57,8 @@ The following heuristic will be applied:
 
 ```js preview-story
 export const heuristic = () => {
+  loadDefaultFeedbackMessages();
+
   const initialAllowedRegions = ['CN', 'ES'];
   const [inputTelRef, outputRef, selectRef] = [createRef(), createRef(), createRef()];
 
@@ -126,7 +134,9 @@ values that are present in this list.
 > be shown in the dropdown list.
 
 ```js preview-story
-export const allowedRegions = () => html`
+export const allowedRegions = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <lion-input-tel
       label="Allowed regions 'NL', 'BE', 'DE'"
       help-text="Type '+31'(NL), '+32'(BE) or '+49'(DE) and see how activeRegion changes"
@@ -139,6 +149,7 @@ export const allowedRegions = () => html`
       .readyPromise="${PhoneUtilManager.loadComplete}"
     ></h-output>
   `;
+};
 ```
 
 ### Restrict to one region
@@ -147,7 +158,9 @@ When one allowed region is configured, validation and formatting will be restric
 region (that means that changes of the region via viewValue won't have effect).
 
 ```js preview-story
-export const oneAllowedRegion = () => html`
+export const oneAllowedRegion = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <lion-input-tel
       label="Only allowed region 'DE'"
       help-text="Restricts validation / formatting to one region"
@@ -160,6 +173,7 @@ export const oneAllowedRegion = () => html`
       .readyPromise="${PhoneUtilManager.loadComplete}"
     ></h-output>
   `;
+};
 ```
 
 ## Format strategy
@@ -183,6 +197,7 @@ Also see:
 
 ```js preview-story
 export const formatStrategy = () => {
+  loadDefaultFeedbackMessages();
   const inputTel = createRef();
   return html`
     <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
@@ -215,7 +230,9 @@ Type '6' in the example below to see how the phone number is formatted during ty
 See [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
 
 ```js preview-story
-export const liveFormat = () => html`
+export const liveFormat = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <lion-input-tel
       label="Realtime format on user input"
       help-text="Partial numbers are also formatted"
@@ -225,6 +242,7 @@ export const liveFormat = () => html`
       name="phoneNumber"
     ></lion-input-tel>
   `;
+};
 ```
 
 ## Active phone number type
@@ -239,7 +257,9 @@ Also see:
 - [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
 
 ```js preview-story
-export const activePhoneNumberType = () => html`
+export const activePhoneNumberType = () => {
+  loadDefaultFeedbackMessages();
+  return html`
     <lion-input-tel
       label="Active phone number type"
       .modelValue="${'+31612345678'}"
@@ -251,4 +271,5 @@ export const activePhoneNumberType = () => html`
       .readyPromise="${PhoneUtilManager.loadComplete}"
     ></h-output>
   `;
+};
 ```

packages/input-tel/src/validators.js

@@ -4,6 +4,7 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
 /**
  * @typedef {import('../types').RegionCode} RegionCode
  * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
+ * @typedef {import('@lion/form-core/types/validate/validate').FeedbackMessageData} FeedbackMessageData
  */
 
 /**
@@ -62,9 +63,4 @@ export class PhoneNumber extends Validator {
     }
     return hasFeedback(modelValue, regionCode);
   }
-
-  // TODO: add a file for loadDefaultMessages
-  static async getMessage() {
-    return 'Not a valid phone number';
-  }
 }

packages/input-tel/test/validators.test.js

@@ -34,16 +34,14 @@ describe('PhoneNumber validation', () => {
     expect(validator.execute('+32612345678', 'NL')).to.equal('invalid-country-code');
   });
 
-  // TODO: find out why awesome-phonenumber does not detect too-short/too-long
+  it('is invalid when number is too short, returns "too-short"', () => {
-  it.skip('is invalid when number is too short, returns "too-short"', () => {
     const validator = new PhoneNumber();
-    expect(validator.execute('+3161234567', 'NL')).to.equal('too-short');
+    expect(validator.execute('+316123', 'NL')).to.equal('too-short');
   });
 
-  // TODO: find out why awesome-phonenumber does not detect too-short/too-long
+  it('is invalid when number is too long, returns "too-long"', () => {
-  it.skip('is invalid when number is too long, returns "too-long"', () => {
     const validator = new PhoneNumber();
-    expect(validator.execute('+316123456789', 'NL')).to.equal('too-long');
+    expect(validator.execute('+31612345678901', 'NL')).to.equal('too-long');
   });
 
   it('is valid when a phone number is entered', () => {

packages/validate-messages/src/loadDefaultFeedbackMessages.js

@@ -172,10 +172,12 @@ export function loadDefaultFeedbackMessages() {
     await forMessagesToBeReady();
     const { type, outcome } = data;
     if (outcome === 'too-long') {
-      return localize.msg(`lion-validate:${type}.MaxLength`, data);
+      // TODO: get max-length of country and use MaxLength validator
+      return localize.msg(`lion-validate:${type}.Pattern`, data);
     }
     if (outcome === 'too-short') {
-      return localize.msg(`lion-validate:${type}.MinLength`, data);
+      // TODO: get min-length of country and use MinLength validator
+      return localize.msg(`lion-validate:${type}.Pattern`, data);
     }
     // TODO: add a more specific message here
     if (outcome === 'invalid-country-code') {