chore: align how IBAN validators messages work with other validators

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

@@ -2,6 +2,7 @@
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import { Validator } from '@lion/ui/form-core.js';
 import '@lion/ui/define/lion-input-email.js';
 ```
@@ -13,9 +14,11 @@ When prefilling with a faulty input, an error feedback message will show.
 Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed on it.
 
 ```js preview-story
-export const faultyPrefilled = () => html`
-  <lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
-`;
+export const faultyPrefilled = () => {
+  loadDefaultFeedbackMessages();
+
+  return html` <lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email> `;
+};
 ```
 
 ## Custom Validator

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

@@ -3,7 +3,7 @@
 ```js script
 import { html } from '@mdjs/mdjs-preview';
 import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import { IsCountryIBAN, IsNotCountryIBAN } from '@lion/ui/input-iban.js';
+import { IsCountryIBAN, IsIBAN, IsNotCountryIBAN } from '@lion/ui/input-iban.js';
 import '@lion/ui/define/lion-input-iban.js';
 ```
 
@@ -100,3 +100,22 @@ export const blacklistedCountry = () => {
   `;
 };
 ```
+
+## Custom Error Message
+
+By default, we validate the input to ensure the IBAN is valid. To use other than the default validation message, you can override `IsIBAN.getMessage()` method.
+
+```js preview-story
+export const customErrorMessage = () => {
+  loadDefaultFeedbackMessages();
+  IsIBAN.getMessage = async () => 'Invalid IBAN!';
+
+  return html`
+    <lion-input-iban
+      .modelValue=${'NL20INGB0001234567XXXX'}
+      name="iban"
+      label="IBAN"
+    ></lion-input-iban>
+  `;
+};
+```

packages/ui/components/input-iban/src/validators.js

@@ -1,97 +1,8 @@
 /* eslint-disable max-classes-per-file, import/no-extraneous-dependencies */
 
-import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
-import { Unparseable, Validator } from '@lion/ui/form-core.js';
+import { Validator } from '@lion/ui/form-core.js';
 import { isValidIBAN } from 'ibantools';
 
-let loaded = false;
-const loadTranslations = async () => {
-  const localizeManager = getLocalizeManager();
-  if (loaded) {
-    return;
-  }
-  await localizeManager.loadNamespace(
-    {
-      'lion-validate+iban': /** @param {string} locale */ locale => {
-        switch (locale) {
-          case 'bg-BG':
-            return import('@lion/ui/input-iban-translations/bg-BG.js');
-          case 'bg':
-            return import('@lion/ui/input-iban-translations/bg.js');
-          case 'cs-CZ':
-            return import('@lion/ui/input-iban-translations/cs-CZ.js');
-          case 'cs':
-            return import('@lion/ui/input-iban-translations/cs.js');
-          case 'de-DE':
-            return import('@lion/ui/input-iban-translations/de-DE.js');
-          case 'de':
-            return import('@lion/ui/input-iban-translations/de.js');
-          case 'en-AU':
-            return import('@lion/ui/input-iban-translations/en-AU.js');
-          case 'en-GB':
-            return import('@lion/ui/input-iban-translations/en-GB.js');
-          case 'en-US':
-            return import('@lion/ui/input-iban-translations/en-US.js');
-          case 'en-PH':
-          case 'en':
-            return import('@lion/ui/input-iban-translations/en.js');
-          case 'es-ES':
-            return import('@lion/ui/input-iban-translations/es-ES.js');
-          case 'es':
-            return import('@lion/ui/input-iban-translations/es.js');
-          case 'fr-FR':
-            return import('@lion/ui/input-iban-translations/fr-FR.js');
-          case 'fr-BE':
-            return import('@lion/ui/input-iban-translations/fr-BE.js');
-          case 'fr':
-            return import('@lion/ui/input-iban-translations/fr.js');
-          case 'hu-HU':
-            return import('@lion/ui/input-iban-translations/hu-HU.js');
-          case 'hu':
-            return import('@lion/ui/input-iban-translations/hu.js');
-          case 'it-IT':
-            return import('@lion/ui/input-iban-translations/it-IT.js');
-          case 'it':
-            return import('@lion/ui/input-iban-translations/it.js');
-          case 'nl-BE':
-            return import('@lion/ui/input-iban-translations/nl-BE.js');
-          case 'nl-NL':
-            return import('@lion/ui/input-iban-translations/nl-NL.js');
-          case 'nl':
-            return import('@lion/ui/input-iban-translations/nl.js');
-          case 'pl-PL':
-            return import('@lion/ui/input-iban-translations/pl-PL.js');
-          case 'pl':
-            return import('@lion/ui/input-iban-translations/pl.js');
-          case 'ro-RO':
-            return import('@lion/ui/input-iban-translations/ro-RO.js');
-          case 'ro':
-            return import('@lion/ui/input-iban-translations/ro.js');
-          case 'ru-RU':
-            return import('@lion/ui/input-iban-translations/ru-RU.js');
-          case 'ru':
-            return import('@lion/ui/input-iban-translations/ru.js');
-          case 'sk-SK':
-            return import('@lion/ui/input-iban-translations/sk-SK.js');
-          case 'sk':
-            return import('@lion/ui/input-iban-translations/sk.js');
-          case 'uk-UA':
-            return import('@lion/ui/input-iban-translations/uk-UA.js');
-          case 'uk':
-            return import('@lion/ui/input-iban-translations/uk.js');
-          case 'zh-CN':
-          case 'zh':
-            return import('@lion/ui/input-iban-translations/zh.js');
-          default:
-            return import('@lion/ui/input-iban-translations/en.js');
-        }
-      },
-    },
-    { locale: localizeManager.locale },
-  );
-  loaded = true;
-};
-
 export class IsIBAN extends Validator {
   static get validatorName() {
     return 'IsIBAN';
@@ -102,22 +13,6 @@ export class IsIBAN extends Validator {
   execute(value) {
     return !isValidIBAN(value);
   }
-
-  /**
-   * @param {object} [data]
-   * @param {*} [data.modelValue]
-   * @param {string} [data.fieldName]
-   * @param {*} [data.params]
-   * @param {string} [data.type]
-   * @param {Object.<string,?>} [data.config]
-   * @param {string} [data.name]
-   * @returns {Promise<string|Element>}
-   */
-  static async getMessage(data) {
-    const localizeManager = getLocalizeManager();
-    await loadTranslations();
-    return localizeManager.msg('lion-validate+iban:error.IsIBAN', data);
-  }
 }
 
 export class IsCountryIBAN extends IsIBAN {
@@ -146,26 +41,6 @@ export class IsCountryIBAN extends IsIBAN {
     }
     return isInvalid;
   }
-
-  /**
-   * @param {object} [data]
-   * @param {*} [data.modelValue]
-   * @param {string} [data.fieldName]
-   * @param {*} [data.params]
-   * @param {string} [data.type]
-   * @param {Object.<string,?>} [data.config]
-   * @param {string} [data.name]
-   * @returns {Promise<string|Element>}
-   */
-  static async getMessage(data) {
-    const localizeManager = getLocalizeManager();
-
-    await loadTranslations();
-    // If modelValue is Unparseable, the IsIBAN message is the more appropriate feedback
-    return data?.modelValue instanceof Unparseable
-      ? localizeManager.msg('lion-validate+iban:error.IsIBAN', data)
-      : localizeManager.msg('lion-validate+iban:error.IsCountryIBAN', data);
-  }
 }
 
 export class IsNotCountryIBAN extends IsIBAN {
@@ -195,29 +70,4 @@ export class IsNotCountryIBAN extends IsIBAN {
     }
     return isInvalid;
   }
-
-  /**
-   * @param {object} [data]
-   * @param {*} [data.modelValue]
-   * @param {string} [data.fieldName]
-   * @param {*} [data.params]
-   * @param {string} [data.type]
-   * @param {Object.<string,?>} [data.config]
-   * @param {string} [data.name]
-   * @returns {Promise<string|Element>}
-   */
-  static async getMessage(data) {
-    const localizeManager = getLocalizeManager();
-
-    await loadTranslations();
-    const _data = {
-      ...data,
-      userSuppliedCountryCode:
-        typeof data?.modelValue === 'string' ? data?.modelValue.slice(0, 2) : '',
-    };
-    // If modelValue is Unparseable, the IsIBAN message is the more appropriate feedback
-    return data?.modelValue instanceof Unparseable
-      ? localizeManager.msg('lion-validate+iban:error.IsIBAN', _data)
-      : localizeManager.msg('lion-validate+iban:error.IsNotCountryIBAN', _data);
-  }
 }