@dile/utils 3.2.3 → 3.3.0

package/components/input-phone/src/DileInputPhone.js

@@ -0,0 +1,294 @@
+import { html, css } from 'lit';
+import { DileInput } from '@dile/ui/components/input/index.js';
+import '../../phone-prefix-select/phone-prefix-select.js';
+import {
+  getPhonePrefix,
+  getMainCountryForPrefix,
+  splitPhoneNumber,
+} from '../../phone-prefix-select/src/phonePrefixesData.js';
+
+const PREFIX_PLACEHOLDERS = {
+  es: 'Prefijo',
+  en: 'Prefix',
+};
+
+// E.164: up to 15 digits in total, prefix included.
+const MAX_DIGITS = 15;
+const MIN_NUMBER_DIGITS = 4;
+
+/**
+ * Phone number input with an optional searchable selector of international prefixes.
+ *
+ * - With prefix (default): the value is the international number in E.164 format, without
+ *   spaces: "+34600123456".
+ * - With `noPrefix`: there is no prefix selector and the value is the number typed by the user,
+ *   without spaces or separators: "600123456".
+ */
+export class DileInputPhone extends DileInput {
+
+  static get properties() {
+    return {
+      /** Hides the prefix selector. The value is then the plain number. */
+      noPrefix: { type: Boolean },
+      /** ISO code of the country of the prefix. Set it to preselect a default prefix. */
+      country: { type: String },
+      /** Language of the prefix selector: 'es' or 'en' */
+      language: { type: String },
+      /** ISO codes of the countries listed first in the prefix selector, separated by "|" */
+      priorityCountries: { type: String, attribute: 'priority-countries' },
+      /** Placeholder of the prefix selector */
+      prefixPlaceholder: { type: String },
+      /** Number as typed by the user, shown in the input field */
+      _typedNumber: { state: true },
+    };
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        section.for-input {
+          gap: var(--dile-input-phone-gap, 0.5rem);
+          align-items: stretch;
+        }
+        dile-phone-prefix-select {
+          flex: 0 0 var(--dile-input-phone-prefix-width, 6.5rem);
+          --dile-select-overlay-min-width: var(--dile-input-phone-list-width, 16rem);
+          min-width: 0;
+          margin-bottom: 0;
+        }
+        input {
+          min-width: 0;
+        }
+      `
+    ];
+  }
+
+  constructor() {
+    super();
+    this.type = 'tel';
+    this.noPrefix = false;
+    this.language = 'en';
+    this.priorityCountries = '';
+    this._typedNumber = '';
+    this._internalValueChange = false;
+  }
+
+  /** Prefix of the selected country, like "+34" */
+  get prefix() {
+    return this.noPrefix ? undefined : getPhonePrefix(this.country);
+  }
+
+  /** Digits of the number, without the prefix */
+  get number() {
+    const raw = this._typedNumber.trim();
+    const split = splitPhoneNumber(raw);
+    return split ? split.number : raw.replace(/\D/g, '');
+  }
+
+  get prefixSelect() {
+    return this.shadowRoot.querySelector('dile-phone-prefix-select');
+  }
+
+  willUpdate(changedProperties) {
+    super.willUpdate?.(changedProperties);
+    if (!this.hasUpdated) {
+      this._initialCountry = this.country;
+    }
+    // A country set from outside changes the prefix of the number already typed.
+    if (this.hasUpdated && changedProperties.has('country') && !changedProperties.has('value')) {
+      this.updateValueFromParts();
+    }
+    if (changedProperties.has('value')) {
+      if (this._internalValueChange) {
+        this._internalValueChange = false;
+      } else {
+        this.parseValue(this.value);
+      }
+    }
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    // The prefix selector only reacts to a country being set, so it has to be cleared explicitly.
+    if (changedProperties.has('country') && !this.country && this.prefixSelect?.value) {
+      this.prefixSelect.clear();
+    }
+  }
+
+  render() {
+    return html`
+      <main>
+        ${this.label
+          ? html`<label for="textField">${this.label}</label>`
+          : ""}
+        <section class="for-input">
+          ${this.noPrefix ? '' : this.prefixTemplate}
+          <input
+            type="tel"
+            inputmode="tel"
+            id="textField"
+            name="${this.name}"
+            placeholder="${this.placeholder}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            autocomplete="${this.computeAutocomplete()}"
+            .value="${this._typedNumber}"
+            class="${this.errored ? 'errored' : ''}"
+            @keypress="${this._lookForEnter}"
+            @input="${this._input}"
+            @blur="${this.doBlur}"
+            @focus="${this.doFocus}"
+          />
+          ${this.labelRight
+            ? html`<span class="labelright">${this.labelRight}</span>`
+            : ''
+          }
+        </section>
+        ${this.messageTemplate}
+      </main>
+    `;
+  }
+
+  get prefixTemplate() {
+    return html`
+      <dile-phone-prefix-select
+        .country=${this.country}
+        prefixFirst
+        compact
+        language="${this.language}"
+        priority-countries="${this.priorityCountries}"
+        placeholder="${this.prefixPlaceholder || PREFIX_PLACEHOLDERS[this.language] || PREFIX_PLACEHOLDERS.en}"
+        ?disabled=${this.disabled}
+        ?errored=${this.errored}
+        @dile-phone-prefix-changed=${this.onPrefixChanged}
+        @element-changed=${this.stopEvent}
+        @dile-phone-prefix-select-selected-text-changed=${this.stopEvent}
+      ></dile-phone-prefix-select>
+    `;
+  }
+
+  computeAutocomplete() {
+    if (this.disableAutocomplete) {
+      return 'off';
+    }
+    return this.noPrefix ? 'tel' : 'tel-national';
+  }
+
+  stopEvent(e) {
+    e.stopPropagation();
+  }
+
+  _input(e) {
+    // Only characters used to write phone numbers are allowed
+    const filtered = e.target.value.replace(/[^\d\s+\-().]/g, '');
+    if (filtered !== e.target.value) {
+      e.target.value = filtered;
+    }
+    this._typedNumber = filtered;
+    this.updateValueFromParts();
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
+  }
+
+  onPrefixChanged(e) {
+    e.stopPropagation();
+    const country = e.detail.country;
+    if (country === this.country) {
+      return;
+    }
+    this.country = country;
+    this.updateValueFromParts();
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
+  }
+
+  /** A full international number typed in the field is moved to the prefix selector. */
+  doBlur() {
+    if (this.noPrefix) {
+      return;
+    }
+    const split = splitPhoneNumber(this._typedNumber);
+    if (split) {
+      this.country = this.countryForPrefix(split.prefix);
+      this._typedNumber = split.number;
+    }
+  }
+
+  countryForPrefix(prefix) {
+    if (this.country && getPhonePrefix(this.country) === prefix) {
+      return this.country;
+    }
+    return getMainCountryForPrefix(prefix);
+  }
+
+  /** Splits a value received from outside into the prefix and the number to display. */
+  parseValue(value) {
+    const raw = value === undefined || value === null ? '' : String(value).trim();
+    if (!this.noPrefix) {
+      const split = splitPhoneNumber(raw);
+      if (split) {
+        this.country = this.countryForPrefix(split.prefix);
+        this._typedNumber = split.number;
+        return;
+      }
+    }
+    this._typedNumber = raw;
+  }
+
+  /** Builds the value from the selected prefix and the typed number. */
+  computePhoneValue() {
+    const raw = this._typedNumber.trim();
+    const digits = raw.replace(/\D/g, '');
+    if (!digits) {
+      return '';
+    }
+    if (raw.startsWith('+')) {
+      return '+' + digits;
+    }
+    if (raw.startsWith('00')) {
+      return '+' + digits.slice(2);
+    }
+    if (this.prefix) {
+      return this.prefix + digits;
+    }
+    return digits;
+  }
+
+  updateValueFromParts() {
+    const value = this.computePhoneValue();
+    if (value !== this.value) {
+      this._internalValueChange = true;
+      this.value = value;
+    }
+  }
+
+  /**
+   * Basic check of the number: an empty value is valid (use your own "required" rule).
+   * With prefix, the value must be international (a prefix chosen or typed) with up to
+   * 15 digits. Without prefix, it must have between 4 and 15 digits.
+   */
+  isValid() {
+    const value = this.value || '';
+    if (value === '') {
+      return true;
+    }
+    const digits = value.replace(/\D/g, '');
+    if (digits.length > MAX_DIGITS) {
+      return false;
+    }
+    if (this.noPrefix) {
+      return digits.length >= MIN_NUMBER_DIGITS;
+    }
+    const split = splitPhoneNumber(value);
+    return Boolean(split) && split.number.length >= MIN_NUMBER_DIGITS;
+  }
+
+  clear() {
+    this._typedNumber = '';
+    this.country = this._initialCountry;
+    this.updateValueFromParts();
+  }
+}

package/components/phone-prefix-select/index.js

@@ -0,0 +1,10 @@
+export { DilePhonePrefixSelect } from './src/DilePhonePrefixSelect.js';
+export {
+  PHONE_PREFIXES,
+  MAIN_COUNTRY_BY_PREFIX,
+  getPhonePrefix,
+  getPhonePrefixCountries,
+  getMainCountryForPrefix,
+  normalizePhonePrefix,
+  splitPhoneNumber,
+} from './src/phonePrefixesData.js';

package/components/phone-prefix-select/phone-prefix-select.js

@@ -0,0 +1,7 @@
+import { DilePhonePrefixSelect } from './src/DilePhonePrefixSelect.js';
+
+if (!customElements.get('dile-phone-prefix-select')) {
+  customElements.define('dile-phone-prefix-select', DilePhonePrefixSelect);
+}
+
+export { DilePhonePrefixSelect };

package/components/phone-prefix-select/phone-prefix-select.spec.js

@@ -0,0 +1,257 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './phone-prefix-select.js';
+
+describe('dile-phone-prefix-select', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  async function render(attributes = '') {
+    document.body.innerHTML = `<dile-phone-prefix-select ${attributes}></dile-phone-prefix-select>`;
+    const el = document.body.querySelector('dile-phone-prefix-select');
+    await el.updateComplete;
+    return el;
+  }
+
+  async function settle(el) {
+    await wait(20);
+    await el.updateComplete;
+  }
+
+  async function typeKeyword(el, keyword) {
+    const input = el.shadowRoot.getElementById('search');
+    input.value = keyword;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await settle(el);
+  }
+
+  function visibleOptionTexts(el) {
+    return Array.from(el.select.shadowRoot.querySelectorAll('[role="option"]')).map(o => o.textContent.trim());
+  }
+
+  async function selectOptionByText(el, text) {
+    const option = Array.from(el.select.shadowRoot.querySelectorAll('[role="option"]'))
+      .find(o => o.textContent.trim() === text);
+    option.click();
+    await el.select.updateComplete;
+    await el.updateComplete;
+  }
+
+  describe('Rendering', () => {
+    it('renders the search field without requiring a slotted select', async () => {
+      const el = await render();
+      expect(el.shadowRoot.getElementById('search')).toBeTruthy();
+      expect(el.sourceOptions.length).toBeGreaterThan(200);
+    });
+
+    it('uses English texts by default and Spanish ones with language="es"', async () => {
+      const en = await render();
+      expect(en.shadowRoot.getElementById('search').placeholder).toBe('Search a country or prefix...');
+
+      const es = await render('language="es"');
+      expect(es.shadowRoot.getElementById('search').placeholder).toBe('Busca un país o prefijo...');
+    });
+
+    it('labels the clear button of the selected country in the component language', async () => {
+      for (const [language, expected] of [['en', 'Clear selection'], ['es', 'Borrar selección']]) {
+        const el = await render(`language="${language}" value="+34"`);
+        await el.updateComplete;
+        const result = el.shadowRoot.getElementById('result');
+        await result.updateComplete;
+        expect(result.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe(expected);
+      }
+    });
+
+    it('keeps a custom placeholder', async () => {
+      const el = await render('language="es" placeholder="Prefijo"');
+      expect(el.shadowRoot.getElementById('search').placeholder).toBe('Prefijo');
+    });
+  });
+
+  describe('Searching', () => {
+    it('numeric keywords match the beginning of the prefix', async () => {
+      const el = await render();
+
+      await typeKeyword(el, '35');
+
+      const texts = visibleOptionTexts(el);
+      expect(texts).toContain('Portugal (+351)');
+      expect(texts).toContain('Finland (+358)');
+      expect(texts.every(t => /\(\+35/.test(t))).toBe(true);
+    });
+
+    it('accepts the leading "+" in numeric keywords', async () => {
+      const el = await render();
+
+      await typeKeyword(el, '+34');
+
+      expect(visibleOptionTexts(el)).toEqual(['Spain (+34)']);
+    });
+
+    it('text keywords match country names ignoring case and accents', async () => {
+      const el = await render('language="es"');
+
+      await typeKeyword(el, 'MEXICO');
+
+      expect(visibleOptionTexts(el)).toEqual(['México (+52)']);
+    });
+
+    it('matches alternative names of the same country', async () => {
+      const el = await render('language="es"');
+
+      await typeKeyword(el, 'myanmar');
+
+      expect(visibleOptionTexts(el)).toEqual(['Birmania (+95)']);
+    });
+
+    it('prefixFirst shows the prefix before the country name', async () => {
+      const el = await render('prefixFirst');
+
+      await typeKeyword(el, '+34');
+
+      expect(visibleOptionTexts(el)).toEqual(['+34 Spain']);
+    });
+
+    it('compact shows only the prefix once selected, keeping full texts in the list', async () => {
+      const el = await render('compact value="+44"');
+
+      expect(el.selectedText).toBe('+44');
+      expect(el.sourceOptions.find(o => o.value === 'GB').text).toBe('United Kingdom (+44)');
+    });
+
+    it('compact gives the selected field an accessible name with the country', async () => {
+      const el = await render('compact label="Prefix" value="+44"');
+      await el.updateComplete;
+      const result = el.shadowRoot.getElementById('result');
+      await result.updateComplete;
+      const input = result.shadowRoot.querySelector('input');
+
+      expect(input.value).toBe('+44');
+      expect(input.getAttribute('aria-label')).toBe('Prefix, United Kingdom (+44)');
+    });
+
+    it('lists priority countries first', async () => {
+      const el = await render('priority-countries="US|CA"');
+
+      await typeKeyword(el, '1');
+
+      expect(visibleOptionTexts(el).slice(0, 2)).toEqual(['United States (+1)', 'Canada (+1)']);
+    });
+  });
+
+  describe('Selecting', () => {
+    it('value is the prefix and country is the ISO code of the selected option', async () => {
+      const el = await render('name="phone_prefix"');
+      await typeKeyword(el, 'canada');
+
+      let changedDetail = null;
+      let prefixDetail = null;
+      el.addEventListener('element-changed', (e) => { changedDetail = e.detail; });
+      el.addEventListener('dile-phone-prefix-changed', (e) => { prefixDetail = e.detail; });
+
+      await selectOptionByText(el, 'Canada (+1)');
+
+      expect(el.value).toBe('+1');
+      expect(el.country).toBe('CA');
+      expect(el.selectedText).toBe('Canada (+1)');
+      expect(changedDetail).toEqual({ name: 'phone_prefix', value: '+1' });
+      expect(prefixDetail).toEqual({ value: '+1', country: 'CA' });
+    });
+
+    it('clearing the selection resets value and country', async () => {
+      const el = await render();
+      await typeKeyword(el, 'spain');
+      await selectOptionByText(el, 'Spain (+34)');
+
+      el.shadowRoot.getElementById('result').dispatchEvent(new CustomEvent('dile-input-search-cleared', { bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.value).toBeUndefined();
+      expect(el.country).toBeUndefined();
+      expect(el.isSelected).toBe(false);
+    });
+  });
+
+  describe('Initial value and country', () => {
+    it('resolves the main country of a shared prefix', async () => {
+      const el = await render('value="+1"');
+
+      expect(el.country).toBe('US');
+      expect(el.selectedText).toBe('United States (+1)');
+    });
+
+    it('uses the given country when it matches the prefix', async () => {
+      const el = await render('value="+1" country="CA"');
+
+      expect(el.country).toBe('CA');
+      expect(el.selectedText).toBe('Canada (+1)');
+    });
+
+    it('ignores a country that does not match the prefix', async () => {
+      const el = await render('value="+44" country="CA"');
+
+      expect(el.country).toBe('GB');
+      expect(el.value).toBe('+44');
+    });
+
+    it('accepts a prefix without "+"', async () => {
+      const el = await render('value="34"');
+
+      expect(el.country).toBe('ES');
+      expect(el.selectedText).toBe('Spain (+34)');
+    });
+
+    it('setting only the country selects its prefix', async () => {
+      const el = await render('country="MX"');
+      await el.updateComplete;
+
+      expect(el.value).toBe('+52');
+      expect(el.isSelected).toBe(true);
+      expect(el.selectedText).toBe('Mexico (+52)');
+    });
+
+    it('set() keeps the current country when it shares the new prefix', async () => {
+      const el = await render('value="+1" country="CA"');
+
+      el.set('+1');
+      await el.updateComplete;
+      expect(el.country).toBe('CA');
+
+      el.set('+33');
+      await el.updateComplete;
+      expect(el.country).toBe('FR');
+    });
+
+    it('clear() resets value and country', async () => {
+      const el = await render('value="+34"');
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.value).toBeUndefined();
+      expect(el.country).toBeUndefined();
+    });
+
+    it('updates the selected text when the language changes', async () => {
+      const el = await render('value="+34"');
+      expect(el.selectedText).toBe('Spain (+34)');
+
+      el.language = 'es';
+      await el.updateComplete;
+
+      expect(el.selectedText).toBe('España (+34)');
+    });
+
+    it('is form-associated with the prefix as form value', async () => {
+      document.body.innerHTML = '<form><dile-phone-prefix-select name="prefix" value="+34"></dile-phone-prefix-select></form>';
+      const el = document.body.querySelector('dile-phone-prefix-select');
+      await el.updateComplete;
+
+      expect(new FormData(document.body.querySelector('form')).get('prefix')).toBe('+34');
+    });
+  });
+});