@lion/ui 0.0.1

package/components/input-datepicker/test-helpers/DatepickerInputObject.js

@@ -0,0 +1,91 @@
+import { CalendarObject } from '@lion/ui/calendar-test-helpers.js';
+
+export class DatepickerInputObject {
+  /** @param {import('../src/LionInputDatepicker.js').LionInputDatepicker} el */
+  constructor(el) {
+    this.el = el;
+  }
+
+  /**
+   * Methods mimicing User Interaction
+   * @param {{click?:boolean}} options
+   */
+  async openCalendar({ click } = {}) {
+    // Make sure the calendar is opened, not closed/toggled;
+    this.overlayController.hide();
+    if (click) {
+      this.invokerEl.click();
+      const completePromises = [];
+      if (this.overlayEl) {
+        completePromises.push(this.overlayEl.updateComplete);
+      }
+      if (this.calendarEl) {
+        completePromises.push(this.calendarEl.updateComplete);
+      }
+      return Promise.all(completePromises);
+    }
+    return this.el.__openCalendarOverlay();
+  }
+
+  async closeCalendar() {
+    this.overlayCloseButtonEl.click();
+    await this.overlayEl.updateComplete;
+  }
+
+  /**
+   * @param {number} day
+   */
+  async selectMonthDay(day) {
+    await this.overlayController.show();
+    await this.calendarEl.updateComplete;
+    this.calendarObj.getDayEl(day).click();
+    return true;
+  }
+
+  /**
+   * Node references
+   */
+
+  get invokerEl() {
+    // @ts-ignore [allow-protected] in test
+    return this.el._invokerNode;
+  }
+
+  get overlayEl() {
+    // @ts-expect-error not supposed to call _overlayCtrl publicly here on this.el
+    return /** @type {LitElement} */ (this.el._overlayCtrl.contentNode);
+  }
+
+  get overlayHeadingEl() {
+    return /** @type {HTMLElement} */ (
+      this.overlayEl && this.overlayEl.shadowRoot?.querySelector('.calendar-overlay__heading')
+    );
+  }
+
+  get overlayCloseButtonEl() {
+    return /** @type {HTMLElement} */ (
+      this.calendarEl && this.overlayEl.shadowRoot?.querySelector('#close-button')
+    );
+  }
+
+  get calendarEl() {
+    // @ts-ignore [allow-protected] in test
+    return /** @type {import('@lion/calendar').LionCalendar} */ (this.el && this.el._calendarNode);
+  }
+
+  /**
+   * @property {CalendarObject}
+   */
+  get calendarObj() {
+    return this.calendarEl && new CalendarObject(this.calendarEl);
+  }
+
+  /**
+   * Object references
+   */
+
+  get overlayController() {
+    // @ts-expect-error not supposed to call _overlayCtrl publicly here on this.el
+    return this.el._overlayCtrl;
+  }
+}

package/components/input-datepicker/translations/bg-BG.js

@@ -0,0 +1,5 @@
+import bg from './bg.js';
+
+export default {
+  ...bg,
+};

package/components/input-datepicker/translations/bg.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Избор на отворена дата',
+};

package/components/input-datepicker/translations/cs-CZ.js

@@ -0,0 +1,5 @@
+import cs from './cs.js';
+
+export default {
+  ...cs,
+};

package/components/input-datepicker/translations/cs.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Otevřete pro výběr data',
+};

package/components/input-datepicker/translations/de-DE.js

@@ -0,0 +1,5 @@
+import de from './de.js';
+
+export default {
+  ...de,
+};

package/components/input-datepicker/translations/de.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Datumswähler öffnen',
+};

package/components/input-datepicker/translations/en-AU.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/input-datepicker/translations/en-GB.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/input-datepicker/translations/en-US.js

@@ -0,0 +1,5 @@
+import en from './en.js';
+
+export default {
+  ...en,
+};

package/components/input-datepicker/translations/en.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Open date picker',
+};

package/components/input-datepicker/translations/es-ES.js

@@ -0,0 +1,5 @@
+import es from './es.js';
+
+export default {
+  ...es,
+};

package/components/input-datepicker/translations/es.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Selector de fecha abierta',
+};

package/components/input-datepicker/translations/fr-BE.js

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

package/components/input-datepicker/translations/fr-FR.js

@@ -0,0 +1,5 @@
+import fr from './fr.js';
+
+export default {
+  ...fr,
+};

package/components/input-datepicker/translations/fr.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Ouvrir le sélecteur de dates',
+};

package/components/input-datepicker/translations/hu-HU.js

@@ -0,0 +1,5 @@
+import hu from './hu.js';
+
+export default {
+  ...hu,
+};

package/components/input-datepicker/translations/hu.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Dátumválasztó megnyitása',
+};

package/components/input-datepicker/translations/it-IT.js

@@ -0,0 +1,5 @@
+import it from './it.js';
+
+export default {
+  ...it,
+};

package/components/input-datepicker/translations/it.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Raccoglitore di data aperta',
+};

package/components/input-datepicker/translations/nl-BE.js

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

package/components/input-datepicker/translations/nl-NL.js

@@ -0,0 +1,5 @@
+import nl from './nl.js';
+
+export default {
+  ...nl,
+};

package/components/input-datepicker/translations/nl.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Open kalender',
+};

package/components/input-datepicker/translations/pl-PL.js

@@ -0,0 +1,5 @@
+import pl from './pl.js';
+
+export default {
+  ...pl,
+};

package/components/input-datepicker/translations/pl.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Otwórz pole daty',
+};

package/components/input-datepicker/translations/ro-RO.js

@@ -0,0 +1,5 @@
+import ro from './ro.js';
+
+export default {
+  ...ro,
+};

package/components/input-datepicker/translations/ro.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Deschidere selector dată',
+};

package/components/input-datepicker/translations/ru-RU.js

@@ -0,0 +1,5 @@
+import ru from './ru.js';
+
+export default {
+  ...ru,
+};

package/components/input-datepicker/translations/ru.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Открыть модуль выбора даты',
+};

package/components/input-datepicker/translations/sk-SK.js

@@ -0,0 +1,5 @@
+import sk from './sk.js';
+
+export default {
+  ...sk,
+};

package/components/input-datepicker/translations/sk.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Otvoriť nástroj na výber dátumu',
+};

package/components/input-datepicker/translations/uk-UA.js

@@ -0,0 +1,5 @@
+import uk from './uk.js';
+
+export default {
+  ...uk,
+};

package/components/input-datepicker/translations/uk.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: 'Відкрити модуль вибору дати',
+};

package/components/input-datepicker/translations/zh.js

@@ -0,0 +1,3 @@
+export default {
+  openDatepickerLabel: '打开日期选择器',
+};

package/components/input-email/src/LionInputEmail.js

@@ -0,0 +1,21 @@
+import { IsEmail } from '@lion/ui/form-core.js';
+import { LionInput } from '@lion/ui/input.js';
+import { LocalizeMixin } from '@lion/ui/localize.js';
+
+/**
+ * LionInputEmail: extension of lion-input
+ *
+ * @customElement lion-input-email
+ */
+export class LionInputEmail extends LocalizeMixin(LionInput) {
+  constructor() {
+    super();
+    // local-part@domain where the local part may be up to 64 characters long
+    // and the domain may have a maximum of 255 characters.
+    // @see https://www.wikiwand.com/en/Email_address
+    // however, the longest active email is even bigger
+    // @see https://laughingsquid.com/the-worlds-longest-active-email-address/
+    // we don't want to forbid Mr. Peter Craig email right?
+    this.defaultValidators.push(new IsEmail());
+  }
+}

package/components/input-email/test/lion-input-email-integrations.test.js

@@ -0,0 +1,11 @@
+import { runFormatMixinSuite } from '@lion/ui/form-core-test-suites.js';
+import '@lion/ui/define/lion-input-email.js';
+
+const tagString = 'lion-input-email';
+
+describe('<lion-input-email> integrations', () => {
+  runFormatMixinSuite({
+    tagString,
+    modelValueType: 'email',
+  });
+});

package/components/input-email/test/lion-input-email.test.js

@@ -0,0 +1,46 @@
+import { expect, fixture as _fixture } from '@open-wc/testing';
+import { getInputMembers } from '@lion/ui/input-test-helpers.js';
+import '@lion/ui/define/lion-input-email.js';
+
+/**
+ * @typedef {import('../src/LionInputEmail.js').LionInputEmail} LionInputEmail
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputEmail>} */ (_fixture);
+
+describe('<lion-input-email>', () => {
+  it('has a type = text', async () => {
+    const el = await fixture(`<lion-input-email></lion-input-email>`);
+    const { _inputNode } = getInputMembers(el);
+    expect(_inputNode.type).to.equal('text');
+  });
+
+  it('has validator "IsEmail" applied by default', async () => {
+    // More elaborate tests can be found in lion-validate/test/StringValidators.test.js
+    const el = await fixture(`<lion-input-email></lion-input-email>`);
+    el.modelValue = 'foo@bar@example.com';
+    expect(el.hasFeedbackFor).to.deep.equal(['error']);
+    expect(el.validationStates.error.IsEmail).to.be.true;
+  });
+
+  it('is accessible', async () => {
+    const lionInputEmail = await fixture(
+      `<lion-input-email><label slot="label">Label</label></lion-input-email>`,
+    );
+    await expect(lionInputEmail).to.be.accessible();
+  });
+
+  it('is accessible when readonly', async () => {
+    const lionInputEmail = await fixture(
+      `<lion-input-email readonly><label slot="label">Label</label></lion-input-email>`,
+    );
+    await expect(lionInputEmail).to.be.accessible();
+  });
+
+  it('is accessible when disabled', async () => {
+    const lionInputEmail = await fixture(
+      `<lion-input-email disabled><label slot="label">Label</label></lion-input-email>`,
+    );
+    await expect(lionInputEmail).to.be.accessible();
+  });
+});

package/components/input-iban/src/LionInputIban.js

@@ -0,0 +1,18 @@
+import { LocalizeMixin } from '@lion/ui/localize.js';
+import { LionInput } from '@lion/ui/input.js';
+import { formatIBAN } from './formatters.js';
+import { parseIBAN } from './parsers.js';
+import { IsIBAN } from './validators.js';
+
+/**
+ * `LionInputIban` is a class for an IBAN custom form element (`<lion-input-iban>`).
+ * @customElement lion-input-iban
+ */
+export class LionInputIban extends LocalizeMixin(LionInput) {
+  constructor() {
+    super();
+    this.formatter = formatIBAN;
+    this.parser = parseIBAN;
+    this.defaultValidators.push(new IsIBAN());
+  }
+}

package/components/input-iban/src/formatters.js

@@ -0,0 +1,15 @@
+import { friendlyFormatIBAN } from 'ibantools';
+
+/**
+ * Takes an unformatted IBAN and returns a formatted one.
+ *
+ * @param {string} modelValue value to be formatted
+ * @return {string} formatted value
+ */
+export function formatIBAN(modelValue) {
+  // defensive code because of ibantools
+  if (!modelValue) {
+    return '';
+  }
+  return friendlyFormatIBAN(modelValue);
+}

package/components/input-iban/src/parsers.js

@@ -0,0 +1,12 @@
+import { isValidIBAN } from 'ibantools';
+
+/**
+ * Parses an IBAN trimming spaces and making uppercase.
+ *
+ * @param {string} viewValue value to be parsed
+ * @return {string|undefined} parsed value
+ */
+export function parseIBAN(viewValue) {
+  const trimmedValue = viewValue.replace(/\s/g, '').toUpperCase();
+  return isValidIBAN(trimmedValue) ? trimmedValue : undefined;
+}

package/components/input-iban/src/validators.js

@@ -0,0 +1,217 @@
+/* eslint-disable max-classes-per-file, import/no-extraneous-dependencies */
+
+import { localize } from '@lion/ui/localize.js';
+import { Unparseable, Validator } from '@lion/ui/form-core.js';
+import { isValidIBAN } from 'ibantools';
+
+let loaded = false;
+const loadTranslations = async () => {
+  if (loaded) {
+    return;
+  }
+  await localize.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: localize.locale },
+  );
+  loaded = true;
+};
+
+export class IsIBAN extends Validator {
+  static get validatorName() {
+    return 'IsIBAN';
+  }
+
+  /** @param {string} value */
+  // eslint-disable-next-line class-methods-use-this
+  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) {
+    await loadTranslations();
+    return localize.msg('lion-validate+iban:error.IsIBAN', data);
+  }
+}
+
+export class IsCountryIBAN extends IsIBAN {
+  static get validatorName() {
+    return 'IsCountryIBAN';
+  }
+
+  /**
+   * @param {string} modelValue
+   * @returns {Boolean}
+   */
+  execute(modelValue) {
+    let isInvalid = false;
+    const notIBAN = super.execute(modelValue);
+    if (typeof this.param === 'string') {
+      if (String(modelValue.slice(0, 2)) !== this.param.toUpperCase()) {
+        isInvalid = true;
+      }
+    } else if (Array.isArray(this.param)) {
+      isInvalid = !this.param.some(
+        country => String(modelValue.slice(0, 2)) === country.toUpperCase(),
+      );
+    }
+    if (notIBAN) {
+      isInvalid = true;
+    }
+    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) {
+    await loadTranslations();
+    // If modelValue is Unparseable, the IsIBAN message is the more appropriate feedback
+    return data?.modelValue instanceof Unparseable
+      ? localize.msg('lion-validate+iban:error.IsIBAN', data)
+      : localize.msg('lion-validate+iban:error.IsCountryIBAN', data);
+  }
+}
+
+export class IsNotCountryIBAN extends IsIBAN {
+  static get validatorName() {
+    return 'IsNotCountryIBAN';
+  }
+
+  /**
+   * @param {string} modelValue
+   * @returns {Boolean}
+   */
+  execute(modelValue) {
+    let isInvalid = false;
+    const notIBAN = super.execute(modelValue);
+    if (typeof this.param === 'string') {
+      if (String(modelValue.slice(0, 2)) === this.param.toUpperCase()) {
+        isInvalid = true;
+      }
+    } else if (Array.isArray(this.param)) {
+      isInvalid = this.param.some(
+        country => String(modelValue.slice(0, 2)) === country.toUpperCase(),
+      );
+    }
+
+    if (notIBAN) {
+      isInvalid = true;
+    }
+    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) {
+    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
+      ? localize.msg('lion-validate+iban:error.IsIBAN', _data)
+      : localize.msg('lion-validate+iban:error.IsNotCountryIBAN', _data);
+  }
+}

package/components/input-iban/test/formatters.test.js

@@ -0,0 +1,13 @@
+import { expect } from '@open-wc/testing';
+
+import { formatIBAN } from '@lion/ui/input-iban.js';
+
+describe('formatIBAN', () => {
+  it('formats the IBAN', () => {
+    expect(formatIBAN('NL17INGB0002822608')).to.equal('NL17 INGB 0002 8226 08');
+  });
+
+  it('returns `` if no value is given', () => {
+    expect(formatIBAN('')).to.equal('');
+  });
+});