@dile/utils 3.2.3 → 3.3.0

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

@@ -0,0 +1,213 @@
+import { DileSelectSearch } from '@dile/ui/components/select/index.js';
+import {
+  getPhonePrefix,
+  getPhonePrefixCountries,
+  getMainCountryForPrefix,
+  normalizePhonePrefix,
+} from './phonePrefixesData.js';
+
+const TEXTS = {
+  es: {
+    placeholder: 'Busca un país o prefijo...',
+    emptyMessage: 'No se encontraron resultados',
+    clearSelectionLabel: 'Borrar selección',
+    clearSearchLabel: 'Borrar búsqueda',
+  },
+  en: {
+    placeholder: 'Search a country or prefix...',
+    emptyMessage: 'No results found',
+    clearSelectionLabel: 'Clear selection',
+    clearSearchLabel: 'Clear search',
+  },
+};
+
+/**
+ * Searchable select of international phone prefixes.
+ *
+ * Internally there is one option per country (identified by its ISO code), but the public
+ * `value` is the phone prefix ("+34"), which is what usually gets stored. The selected country
+ * is available in `country`. When several countries share a prefix (+1, +7, +44...) and only
+ * the prefix is known, the main country of that prefix is shown.
+ */
+export class DilePhonePrefixSelect extends DileSelectSearch {
+
+  static get properties() {
+    return {
+      /** ISO code of the selected country */
+      country: { type: String },
+      /** Language of the country names and default texts: 'es' or 'en' */
+      language: { type: String },
+      /** ISO codes of the countries listed first, separated by "|". Example: "ES|MX|AR" */
+      priorityCountries: { type: String, attribute: 'priority-countries' },
+      /** Shows the prefix before the country name ("+34 Spain"), so it is still visible when the text is cut in narrow fields */
+      prefixFirst: { type: Boolean },
+      /** Once selected, shows only the prefix ("+34") instead of the full text, to save space */
+      compact: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.language = 'en';
+    this.priorityCountries = '';
+    this.prefixFirst = false;
+    this.compact = false;
+    this.placeholder = undefined;
+    this.emptyMessage = undefined;
+    this.clearSelectionLabel = undefined;
+    this.clearSearchLabel = undefined;
+  }
+
+  get selectedTextChangedEventName() {
+    return 'dile-phone-prefix-select-selected-text-changed';
+  }
+
+  connectSource() {
+    this.readSourceOptions();
+  }
+
+  readSourceOptions() {
+    const countries = getPhonePrefixCountries(this.language);
+    const priorityIsos = (this.priorityCountries || '')
+      .split('|')
+      .map(iso => iso.trim().toUpperCase())
+      .filter(Boolean);
+    const priority = priorityIsos
+      .map(iso => countries.find(c => c.iso === iso))
+      .filter(Boolean);
+    const others = countries.filter(c => !priorityIsos.includes(c.iso));
+    this.sourceOptions = [...priority, ...others].map(country => ({
+      value: country.iso,
+      text: this.formatOptionText(country),
+      prefix: country.prefix,
+      names: [country.name, ...country.aliases],
+    }));
+  }
+
+  /**
+   * Template method: text displayed for each country, in the list and once selected.
+   * @param {{iso: string, name: string, prefix: string, aliases: string[]}} country
+   */
+  formatOptionText(country) {
+    if (this.prefixFirst) {
+      return `${country.prefix} ${country.name}`;
+    }
+    return `${country.name} (${country.prefix})`;
+  }
+
+  /**
+   * Template method: text displayed once a country is selected.
+   * @param {{value: string, text: string, prefix: string, names: string[]}} option
+   */
+  formatSelectedText(option) {
+    return this.compact ? option.prefix : option.text;
+  }
+
+  /** With compact, the visible text is only the prefix: screen readers also get the country. */
+  get selectedAccessibleLabel() {
+    if (this.compact && this.selectedFullText) {
+      return [this.label, this.selectedFullText].filter(Boolean).join(', ');
+    }
+    return super.selectedAccessibleLabel;
+  }
+
+  /**
+   * Numeric keywords ("3", "+34") match the beginning of the prefix.
+   * Other keywords match any of the country names, ignoring case and accents.
+   */
+  filterOption(option, keyword) {
+    const trimmed = keyword.trim();
+    if (/^\+?\d+$/.test(trimmed)) {
+      return option.prefix.startsWith(normalizePhonePrefix(trimmed));
+    }
+    const normalizedKeyword = this.normalizeSearchText(trimmed);
+    return option.names.some(name => this.normalizeSearchText(name).includes(normalizedKeyword));
+  }
+
+  willUpdate(changedProperties) {
+    super.willUpdate?.(changedProperties);
+    if (changedProperties.has('language') || changedProperties.has('priorityCountries') || changedProperties.has('prefixFirst') || changedProperties.has('compact')) {
+      this.applyLanguageTexts(changedProperties.get('language'));
+      this.readSourceOptions();
+      this.refreshFromSource();
+    }
+    // Setting only the country selects its prefix. When value is also set at the same time,
+    // value wins: country is then only used to pick among the countries sharing that prefix.
+    const countryDrivesValue = !changedProperties.has('value') || !this.value;
+    if (changedProperties.has('country') && this.country && countryDrivesValue) {
+      const prefix = getPhonePrefix(this.country);
+      if (prefix) {
+        if (prefix !== normalizePhonePrefix(this.value)) {
+          this.value = prefix;
+        }
+        this.isSelected = true;
+        this.resolveSelectedText();
+      }
+    }
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('value') || changedProperties.has('country')) {
+      this.dispatchEvent(new CustomEvent('dile-phone-prefix-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: this.value, country: this.country },
+      }));
+    }
+  }
+
+  /** Uses the texts of the language unless they were customized. */
+  applyLanguageTexts(previousLanguage) {
+    const texts = TEXTS[this.language] || TEXTS.en;
+    const previousTexts = TEXTS[previousLanguage] || {};
+    Object.keys(texts).forEach(key => {
+      if (this[key] === undefined || this[key] === previousTexts[key]) {
+        this[key] = texts[key];
+      }
+    });
+  }
+
+  /** The country for a prefix: the current one if it has that prefix, the main one otherwise. */
+  countryForPrefix(prefix) {
+    const normalized = normalizePhonePrefix(prefix);
+    if (!normalized) {
+      return undefined;
+    }
+    if (this.country && getPhonePrefix(this.country) === normalized) {
+      return this.country.toUpperCase();
+    }
+    return getMainCountryForPrefix(normalized);
+  }
+
+  resolveSelectedText() {
+    this.country = this.countryForPrefix(this.value);
+    const option = this.sourceOptions.find(o => o.value === this.country);
+    this.selectedText = option ? this.formatSelectedText(option) : this.value;
+    this.selectedFullText = option ? option.text : this.value;
+  }
+
+  selectOptionValue(iso) {
+    this.country = iso;
+    this.value = getPhonePrefix(iso);
+    this.isSelected = true;
+    this.resolveSelectedText();
+  }
+
+  onClearSelected() {
+    this.country = undefined;
+    super.onClearSelected();
+  }
+
+  clear() {
+    this.country = undefined;
+    super.clear();
+  }
+
+  set(value) {
+    if (!value) {
+      this.country = undefined;
+    }
+    super.set(value);
+  }
+}

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

@@ -0,0 +1,128 @@
+import { getCountries } from '../../country-select/src/countriesData.js';
+
+/**
+ * International calling code of each country, by ISO 3166-1 alpha-2 code.
+ * Countries in the North American Numbering Plan share +1 (the area code is part of the
+ * national number). Territories without their own telephone service are not included.
+ */
+export const PHONE_PREFIXES = {
+  AD: '+376', AE: '+971', AF: '+93', AG: '+1', AI: '+1', AL: '+355', AM: '+374', AO: '+244',
+  AR: '+54', AS: '+1', AT: '+43', AU: '+61', AW: '+297', AX: '+358', AZ: '+994', BA: '+387',
+  BB: '+1', BD: '+880', BE: '+32', BF: '+226', BG: '+359', BH: '+973', BI: '+257', BJ: '+229',
+  BL: '+590', BM: '+1', BN: '+673', BO: '+591', BR: '+55', BS: '+1', BT: '+975', BW: '+267',
+  BY: '+375', BZ: '+501', CA: '+1', CC: '+61', CD: '+243', CF: '+236', CG: '+242', CH: '+41',
+  CI: '+225', CK: '+682', CL: '+56', CM: '+237', CN: '+86', CO: '+57', CR: '+506', CU: '+53',
+  CV: '+238', CW: '+599', CX: '+61', CY: '+357', CZ: '+420', DE: '+49', DJ: '+253', DK: '+45',
+  DM: '+1', DO: '+1', DZ: '+213', EC: '+593', EE: '+372', EG: '+20', EH: '+212', ER: '+291',
+  ES: '+34', ET: '+251', FI: '+358', FJ: '+679', FK: '+500', FM: '+691', FO: '+298', FR: '+33',
+  GA: '+241', GB: '+44', GD: '+1', GE: '+995', GF: '+594', GG: '+44', GH: '+233', GI: '+350',
+  GL: '+299', GM: '+220', GN: '+224', GP: '+590', GQ: '+240', GR: '+30', GS: '+500', GT: '+502',
+  GU: '+1', GW: '+245', GY: '+592', HK: '+852', HN: '+504', HR: '+385', HT: '+509', HU: '+36',
+  IC: '+34', ID: '+62', IE: '+353', IL: '+972', IM: '+44', IN: '+91', IO: '+246', IQ: '+964',
+  IR: '+98', IS: '+354', IT: '+39', JE: '+44', JM: '+1', JO: '+962', JP: '+81', KE: '+254',
+  KG: '+996', KH: '+855', KI: '+686', KM: '+269', KN: '+1', KP: '+850', KR: '+82', KW: '+965',
+  KY: '+1', KZ: '+7', LA: '+856', LB: '+961', LC: '+1', LI: '+423', LK: '+94', LR: '+231',
+  LS: '+266', LT: '+370', LU: '+352', LV: '+371', LY: '+218', MA: '+212', MC: '+377', MD: '+373',
+  ME: '+382', MG: '+261', MH: '+692', MK: '+389', ML: '+223', MM: '+95', MN: '+976', MO: '+853',
+  MP: '+1', MQ: '+596', MR: '+222', MS: '+1', MT: '+356', MU: '+230', MV: '+960', MW: '+265',
+  MX: '+52', MY: '+60', MZ: '+258', NA: '+264', NC: '+687', NE: '+227', NF: '+672', NG: '+234',
+  NI: '+505', NL: '+31', NO: '+47', NP: '+977', NR: '+674', NU: '+683', NZ: '+64', OM: '+968',
+  PA: '+507', PE: '+51', PF: '+689', PG: '+675', PH: '+63', PK: '+92', PL: '+48', PM: '+508',
+  PN: '+64', PR: '+1', PS: '+970', PT: '+351', PW: '+680', PY: '+595', QA: '+974', RE: '+262',
+  RO: '+40', RS: '+381', RU: '+7', RW: '+250', SA: '+966', SB: '+677', SC: '+248', SD: '+249',
+  SE: '+46', SG: '+65', SH: '+290', SI: '+386', SJ: '+47', SK: '+421', SL: '+232', SM: '+378',
+  SN: '+221', SO: '+252', SR: '+597', SS: '+211', ST: '+239', SV: '+503', SX: '+1', SY: '+963',
+  SZ: '+268', TC: '+1', TD: '+235', TG: '+228', TH: '+66', TJ: '+992', TK: '+690', TL: '+670',
+  TM: '+993', TN: '+216', TO: '+676', TR: '+90', TT: '+1', TV: '+688', TW: '+886', TZ: '+255',
+  UA: '+380', UG: '+256', US: '+1', UY: '+598', UZ: '+998', VA: '+39', VC: '+1', VE: '+58',
+  VG: '+1', VI: '+1', VN: '+84', VU: '+678', WF: '+681', WS: '+685', XK: '+383', YE: '+967',
+  YT: '+262', ZA: '+27', ZM: '+260', ZW: '+263',
+};
+
+/**
+ * Country shown when a prefix shared by several countries is set without a specific country.
+ * Prefixes not listed here belong to a single country.
+ */
+export const MAIN_COUNTRY_BY_PREFIX = {
+  '+1': 'US',
+  '+7': 'RU',
+  '+34': 'ES',
+  '+39': 'IT',
+  '+44': 'GB',
+  '+47': 'NO',
+  '+61': 'AU',
+  '+64': 'NZ',
+  '+212': 'MA',
+  '+262': 'RE',
+  '+358': 'FI',
+  '+500': 'FK',
+  '+590': 'GP',
+};
+
+export const getPhonePrefix = (iso) => {
+  return iso ? PHONE_PREFIXES[String(iso).toUpperCase()] : undefined;
+};
+
+/** Accepts prefixes with or without the leading "+" ("34" or "+34"). */
+export const normalizePhonePrefix = (prefix) => {
+  if (prefix === undefined || prefix === null || prefix === '') {
+    return undefined;
+  }
+  return '+' + String(prefix).trim().replace(/^\+/, '');
+};
+
+export const getMainCountryForPrefix = (prefix) => {
+  const normalized = normalizePhonePrefix(prefix);
+  if (!normalized) {
+    return undefined;
+  }
+  if (MAIN_COUNTRY_BY_PREFIX[normalized]) {
+    return MAIN_COUNTRY_BY_PREFIX[normalized];
+  }
+  return Object.keys(PHONE_PREFIXES).find(iso => PHONE_PREFIXES[iso] === normalized);
+};
+
+/**
+ * Countries with a phone prefix, one entry per ISO code: { iso, name, prefix, aliases }.
+ * The country lists may contain more than one name for the same ISO code (e.g. "Birmania"
+ * and "Myanmar"): the first one is used as the name and the rest are kept as search aliases.
+ */
+export const getPhonePrefixCountries = (language = 'en') => {
+  const byIso = new Map();
+  getCountries(language).forEach(({ iso, name }) => {
+    const prefix = PHONE_PREFIXES[iso];
+    if (!prefix) {
+      return;
+    }
+    if (byIso.has(iso)) {
+      byIso.get(iso).aliases.push(name);
+    } else {
+      byIso.set(iso, { iso, name, prefix, aliases: [] });
+    }
+  });
+  return Array.from(byIso.values());
+};
+
+const KNOWN_PREFIXES = new Set(Object.values(PHONE_PREFIXES));
+
+/**
+ * Splits an international phone number ("+34600123456", "0034 600 123 456") into its prefix
+ * and national number: { prefix: '+34', number: '600123456' }. International calling codes
+ * are designed so that none of them is the beginning of another, so the split is unambiguous.
+ * Returns undefined when the number is not international or its prefix is unknown.
+ */
+export const splitPhoneNumber = (phone) => {
+  const raw = String(phone ?? '').trim();
+  if (!/^(\+|00)/.test(raw)) {
+    return undefined;
+  }
+  const allDigits = raw.replace(/\D/g, '');
+  const digits = raw.startsWith('+') ? allDigits : allDigits.slice(2);
+  for (let length = 1; length <= 3; length++) {
+    const prefix = '+' + digits.slice(0, length);
+    if (KNOWN_PREFIXES.has(prefix)) {
+      return { prefix, number: digits.slice(length) };
+    }
+  }
+  return undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -21,7 +21,7 @@
   "homepage": "https://dile-components.com/",
   "dependencies": {
     "@dile/iconlib": "^2.0.1",
-    "@dile/ui": "^3.14.0",
+    "@dile/ui": "^3.15.0",
     "@lion/ui": "^0.21.0",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2dbcfcfc126715e1f21c28806714f5f59b89d93b"
+  "gitHead": "5ef91e1892e270fade848c64082184fa3fbddb53"
 }