telpick 2.0.0

package/src/telpick.css

@@ -0,0 +1,289 @@
+:root {
+  --telpick-bg: #ffffff;
+  --telpick-border: #e5e7eb;
+  --telpick-radius: 12px;
+  --telpick-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --telpick-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --telpick-flag-size: 24px;
+  --telpick-font-size: 14px;
+  --telpick-hover-bg: #f3f4f6;
+  --telpick-active-bg: #eff6ff;
+  --telpick-selected-bg: #eff6ff;
+  --telpick-selected-border: #3b82f6;
+  --telpick-selected-shadow: 2px 0 4px rgba(59, 130, 246, 0.3);
+  --telpick-selected-text: #1f2937;
+  --telpick-text: #1f2937;
+  --telpick-text-secondary: #6b7280;
+  --telpick-border-focus: #3b82f6;
+  --telpick-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --telpick-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.telpick-wrapper,
+.telpick-wrapper * {
+  font-family: var(--telpick-font-family);
+}
+
+.telpick-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.telpick-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  background: var(--telpick-bg);
+  border: 1.5px solid var(--telpick-border);
+  border-radius: var(--telpick-radius);
+  font-size: var(--telpick-font-size);
+  color: var(--telpick-text);
+  cursor: pointer;
+  transition: var(--telpick-transition);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  font-weight: 500;
+  min-width: 120px;
+}
+
+.telpick-btn:hover {
+  border-color: #d1d5db;
+  box-shadow: var(--telpick-shadow);
+  transform: translateY(-1px);
+}
+
+.telpick-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.telpick-btn:focus {
+  outline: none;
+  border-color: var(--telpick-border-focus);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.telpick-btn .telpick-arrow {
+  margin-left: auto;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 0.75rem;
+  color: var(--telpick-text-secondary);
+}
+
+.telpick-btn[aria-expanded="true"] .telpick-arrow {
+  transform: rotate(180deg);
+}
+
+.telpick-flag {
+  width: var(--telpick-flag-size);
+  height: calc(var(--telpick-flag-size) * 0.75);
+  border-radius: 4px;
+  object-fit: cover;
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.telpick-flag img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.telpick-dropdown {
+  background: var(--telpick-bg);
+  border: 1.5px solid var(--telpick-border);
+  border-radius: var(--telpick-radius);
+  box-shadow: var(--telpick-shadow-lg);
+  width: 280px;
+  position: absolute;
+  z-index: 1000;
+  margin-top: 0.5rem;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+  animation: telpick-dropdown-open 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes telpick-dropdown-open {
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.telpick-dropdown.telpick-dropdown-closing {
+  animation: telpick-dropdown-close 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes telpick-dropdown-close {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+}
+
+.telpick-search {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-bottom: 1.5px solid var(--telpick-border);
+  font-size: var(--telpick-font-size);
+  outline: none;
+  background: var(--telpick-bg);
+  color: var(--telpick-text);
+  transition: var(--telpick-transition);
+}
+
+.telpick-search::placeholder {
+  color: var(--telpick-text-secondary);
+}
+
+.telpick-search:focus {
+  border-bottom-color: var(--telpick-border-focus);
+  background: #fafafa;
+}
+
+.telpick-dropdown ul {
+  max-height: 300px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0.25rem 0;
+  list-style: none;
+}
+
+.telpick-dropdown ul::-webkit-scrollbar {
+  width: 6px;
+}
+
+.telpick-dropdown ul::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.telpick-dropdown ul::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.telpick-dropdown ul::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+.telpick-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-size: var(--telpick-font-size);
+  color: var(--telpick-text);
+  cursor: pointer;
+  transition: var(--telpick-transition);
+  position: relative;
+}
+
+.telpick-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--telpick-border-focus);
+  transform: scaleY(0);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.telpick-item:hover {
+  background: var(--telpick-hover-bg);
+  padding-left: 1.25rem;
+}
+
+.telpick-item:hover::before {
+  transform: scaleY(1);
+}
+
+.telpick-item:active {
+  background: var(--telpick-active-bg);
+}
+
+.telpick-item-selected {
+  background: var(--telpick-selected-bg) !important;
+  box-shadow: var(--telpick-selected-shadow) !important;
+  padding-left: 1.25rem !important;
+  font-weight: 600;
+  color: var(--telpick-selected-text) !important;
+  position: relative;
+}
+
+.telpick-item-selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--telpick-selected-border);
+  transform: scaleY(1) !important;
+}
+
+.telpick-item-selected:hover {
+  background: var(--telpick-selected-bg) !important;
+  box-shadow: var(--telpick-selected-shadow) !important;
+  color: var(--telpick-selected-text) !important;
+}
+
+.telpick-item-selected span,
+.telpick-item-selected span:last-child {
+  color: var(--telpick-selected-text) !important;
+  font-weight: 600;
+}
+
+.telpick-item span:last-child {
+  margin-left: auto;
+  color: var(--telpick-text-secondary);
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.telpick-item .telpick-flag {
+  flex-shrink: 0;
+}
+
+.telpick-dropdown-enter-active,
+.telpick-dropdown-leave-active {
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.telpick-dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+}
+
+.telpick-dropdown-enter-to {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.telpick-dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.telpick-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+}
+
+.relative {
+  position: relative;
+}
+
+.ml-auto {
+  margin-left: auto;
+}

package/src/telpick.js

@@ -0,0 +1,314 @@
+import countryCodesData from './assets/country-code.json'
+
+// Al cargar por <script src="...">, guardar la URL base para resolver assets (banderas) en CDN
+;(function () {
+  if (typeof document !== 'undefined' && document.currentScript && document.currentScript.src) {
+    const base = document.currentScript.src.replace(/\/[^/]*$/, '')
+    if (typeof globalThis !== 'undefined') globalThis.__TELPICK_SCRIPT_BASE__ = base
+    else if (typeof window !== 'undefined') window.__TELPICK_SCRIPT_BASE__ = base
+  }
+})()
+
+function _getDefaultBaseFlagUrl() {
+  const base = typeof globalThis !== 'undefined' && globalThis.__TELPICK_SCRIPT_BASE__
+    ? globalThis.__TELPICK_SCRIPT_BASE__
+    : (typeof window !== 'undefined' && window.__TELPICK_SCRIPT_BASE__) || ''
+  return base ? `${base.replace(/\/$/, '')}/assets/flags` : ''
+}
+
+class Telpick {
+  constructor({ code = null, onChange = () => {}, styleOverrides = {}, baseFlagUrl = '' } = {}) {
+    this.code = code
+    this.onChange = onChange
+    this.styleOverrides = styleOverrides
+    this.baseFlagUrl = baseFlagUrl || _getDefaultBaseFlagUrl()
+    this.codes = []
+    this.selectedCode = code
+    this.isDropdownOpen = false
+    this.searchQuery = ''
+    this.container = null
+    this.dropdown = null
+    this._outsideHandler = null
+    this._getFlagUrl = this._getFlagUrl.bind(this)
+  }
+
+  _getFlagUrl(flagPathFromJson, countryCode) {
+    const filename = flagPathFromJson ? flagPathFromJson.replace(/^.*\//, '') : (countryCode ? `${String(countryCode).toLowerCase()}.webp` : '')
+    if (!filename) return ''
+    if (this.baseFlagUrl) {
+      const base = this.baseFlagUrl.replace(/\/$/, '')
+      return `${base}/${filename}`
+    }
+    return flagPathFromJson || (countryCode ? `/flags/${String(countryCode).toLowerCase()}.webp` : '')
+  }
+
+  async init(container) {
+    this.container = container
+    this.codes = [...countryCodesData].sort((a, b) => a.country.localeCompare(b.country, 'es'))
+    if (!this.code) {
+      const services = [
+        async () => {
+          try {
+            const res = await fetch('https://ip-api.com/json/?fields=countryCode')
+            const data = await res.json()
+            if (data.countryCode) {
+              return this.codes.find(c => c.country_code === data.countryCode)
+            }
+          } catch {}
+          return null
+        },
+        async () => {
+          try {
+            const res = await fetch('https://get.geojs.io/v1/ip/country.json')
+            const data = await res.json()
+            if (data.country) {
+              return this.codes.find(c => c.country_code === data.country)
+            }
+          } catch {}
+          return null
+        },
+        async () => {
+          try {
+            const res = await fetch('https://ipapi.co/json/')
+            const data = await res.json()
+            if (data.country_code) {
+              return this.codes.find(c => c.country_code === data.country_code)
+            }
+          } catch {}
+          return null
+        }
+      ]
+
+      let found = null
+      for (const service of services) {
+        try {
+          found = await Promise.race([
+            service(),
+            new Promise((resolve) => setTimeout(() => resolve(null), 3000))
+          ])
+          if (found) break
+        } catch {}
+      }
+
+      if (!found) {
+        try {
+          const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+          const timezoneToCountry = {
+            'America/Lima': 'PE', 'America/Bogota': 'CO', 'America/Mexico_City': 'MX',
+            'America/Argentina/Buenos_Aires': 'AR', 'America/Santiago': 'CL',
+            'America/Caracas': 'VE', 'America/Montevideo': 'UY', 'America/Asuncion': 'PY',
+            'America/La_Paz': 'BO', 'America/Guayaquil': 'EC', 'America/Panama': 'PA',
+            'America/Costa_Rica': 'CR', 'America/Managua': 'NI', 'America/Tegucigalpa': 'HN',
+            'America/Guatemala': 'GT', 'America/El_Salvador': 'SV', 'America/Havana': 'CU',
+            'America/Santo_Domingo': 'DO', 'America/Jamaica': 'JM', 'America/Port-au-Prince': 'HT',
+            'Europe/Madrid': 'ES', 'Europe/London': 'GB', 'Europe/Paris': 'FR',
+            'Europe/Berlin': 'DE', 'Europe/Rome': 'IT', 'Europe/Amsterdam': 'NL',
+            'Europe/Brussels': 'BE', 'Europe/Vienna': 'AT', 'Europe/Zurich': 'CH',
+            'Europe/Stockholm': 'SE', 'Europe/Oslo': 'NO', 'Europe/Copenhagen': 'DK',
+            'Europe/Helsinki': 'FI', 'Europe/Warsaw': 'PL', 'Europe/Prague': 'CZ',
+            'Europe/Bucharest': 'RO', 'Europe/Moscow': 'RU',
+            'America/New_York': 'US', 'America/Chicago': 'US', 'America/Denver': 'US',
+            'America/Los_Angeles': 'US', 'America/Toronto': 'CA', 'America/Vancouver': 'CA',
+            'Asia/Tokyo': 'JP', 'Asia/Shanghai': 'CN', 'Asia/Hong_Kong': 'CN',
+            'Asia/Seoul': 'KR', 'Asia/Singapore': 'SG', 'Asia/Bangkok': 'TH',
+            'Asia/Jakarta': 'ID', 'Asia/Manila': 'PH', 'Asia/Kolkata': 'IN',
+            'Asia/Dubai': 'AE', 'Asia/Riyadh': 'SA',
+            'Australia/Sydney': 'AU', 'Australia/Melbourne': 'AU', 'Pacific/Auckland': 'NZ',
+            'Africa/Cairo': 'EG', 'Africa/Johannesburg': 'ZA', 'Africa/Nairobi': 'KE',
+            'Africa/Lagos': 'NG'
+          }
+          const countryCode = timezoneToCountry[timezone]
+          if (countryCode) {
+            found = this.codes.find(c => c.country_code === countryCode)
+          }
+        } catch {}
+      }
+
+      if (found) {
+        this.selectedCode = found.country_code
+      } else {
+        const defaultCountry = this.codes.find(c => c.country_code === 'CO')
+        if (defaultCountry) this.selectedCode = defaultCountry.country_code
+      }
+    } else {
+      const found = this.codes.find(c => c.country_code === this.code)
+      if (found) this.selectedCode = found.country_code
+    }
+    this.render()
+    const selected = this.codes.find(c => c.country_code === this.selectedCode)
+    if (selected) this.onChange(selected)
+    this._setupOutsideClick()
+  }
+
+  render() {
+    this.container.innerHTML = ''
+    const btn = document.createElement('button')
+    btn.className = 'telpick-btn'
+    Object.assign(btn.style, this.styleOverrides)
+    btn.onclick = () => {
+      this.isDropdownOpen = !this.isDropdownOpen
+      this.render()
+    }
+    const flagDiv = document.createElement('div')
+    flagDiv.className = 'telpick-flag'
+    const selectedCountry = this.codes.find(c => c.country_code === this.selectedCode) || { country_code: '', code: '', country: '', flag: '' }
+    const flagUrl = this._getFlagUrl(selectedCountry.flag, selectedCountry.country_code)
+    if (flagUrl) {
+      const img = document.createElement('img')
+      img.src = flagUrl
+      img.className = 'w-full h-full object-cover'
+      img.alt = selectedCountry.country || 'flag'
+      img.loading = 'lazy'
+      img.referrerPolicy = 'no-referrer'
+      flagDiv.appendChild(img)
+    }
+    btn.appendChild(flagDiv)
+    const codeSpan = document.createElement('span')
+    codeSpan.textContent = selectedCountry.code
+    btn.appendChild(codeSpan)
+    const arrowSpan = document.createElement('span')
+    arrowSpan.className = 'ml-auto'
+    arrowSpan.textContent = '▼'
+    btn.appendChild(arrowSpan)
+    this.container.appendChild(btn)
+
+    if (this.isDropdownOpen) {
+      this.dropdown = document.createElement('div')
+      this.dropdown.className = 'telpick-dropdown'
+      this.dropdown.onclick = e => e.stopPropagation()
+      this.dropdown.onmousedown = e => e.stopPropagation()
+      
+      const input = document.createElement('input')
+      input.className = 'telpick-search'
+      input.type = 'text'
+      input.placeholder = 'Buscar país...'
+      input.value = this.searchQuery
+      input.oninput = e => {
+        e.stopPropagation()
+        const inputEl = e.target
+        const cursorPos = inputEl.selectionStart || 0
+        const newValue = inputEl.value
+        this.searchQuery = newValue
+        const ul = this.dropdown?.querySelector('ul')
+        if (ul) {
+          ul.innerHTML = ''
+          const filtered = !this.searchQuery ? this.codes : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
+          filtered.forEach(item => {
+            const li = document.createElement('li')
+            const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
+            li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
+            li.onclick = () => {
+              this.selectedCode = item.country_code
+              this.onChange(item)
+              this.isDropdownOpen = false
+              this.searchQuery = ''
+              this.render()
+            }
+            const flag = document.createElement('div')
+            flag.className = 'telpick-flag'
+            const flagUrl = this._getFlagUrl(item.flag, item.country_code)
+            if (flagUrl) {
+              const img = document.createElement('img')
+              img.src = flagUrl
+              img.className = 'w-full h-full object-cover'
+              img.alt = item.country || 'flag'
+              img.loading = 'lazy'
+              img.referrerPolicy = 'no-referrer'
+              flag.appendChild(img)
+            }
+            li.appendChild(flag)
+            const countrySpan = document.createElement('span')
+            countrySpan.textContent = item.country
+            li.appendChild(countrySpan)
+            const codeSpan = document.createElement('span')
+            codeSpan.className = 'ml-auto'
+            codeSpan.textContent = item.code
+            li.appendChild(codeSpan)
+            ul.appendChild(li)
+          })
+          requestAnimationFrame(() => {
+            if (input) {
+              input.focus()
+              const newCursorPos = Math.min(cursorPos + 1, newValue.length)
+              input.setSelectionRange(newCursorPos, newCursorPos)
+            }
+          })
+        } else {
+          this.render()
+        }
+      }
+      input.onclick = e => e.stopPropagation()
+      input.onmousedown = e => e.stopPropagation()
+      this.dropdown.appendChild(input)
+      const ul = document.createElement('ul')
+      ul.style.maxHeight = '130px'
+      ul.style.overflowY = 'auto'
+      const filtered = !this.searchQuery ? this.codes : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
+      filtered.forEach(item => {
+        const li = document.createElement('li')
+        const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
+        li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
+        li.setAttribute('aria-selected', isSelected)
+        li.onclick = () => {
+          this.selectedCode = item.country_code
+          this.onChange(item)
+          this.isDropdownOpen = false
+          this.searchQuery = ''
+          this.render()
+        }
+        const flag = document.createElement('div')
+        flag.className = 'telpick-flag'
+        const flagUrl = this._getFlagUrl(item.flag, item.country_code)
+        if (flagUrl) {
+          const img = document.createElement('img')
+          img.src = flagUrl
+          img.className = 'w-full h-full object-cover'
+          img.alt = item.country || 'flag'
+          img.loading = 'lazy'
+          img.referrerPolicy = 'no-referrer'
+          flag.appendChild(img)
+        }
+        li.appendChild(flag)
+        const countrySpan = document.createElement('span')
+        countrySpan.textContent = item.country
+        li.appendChild(countrySpan)
+        const codeSpan = document.createElement('span')
+        codeSpan.className = 'ml-auto'
+        codeSpan.textContent = item.code
+        li.appendChild(codeSpan)
+        ul.appendChild(li)
+      })
+      this.dropdown.appendChild(ul)
+      this.container.appendChild(this.dropdown)
+      
+      requestAnimationFrame(() => {
+        if (input) {
+          input.focus()
+        }
+      })
+    }
+  }
+
+  _setupOutsideClick() {
+    if (this._outsideHandler) document.removeEventListener('click', this._outsideHandler)
+    this._outsideHandler = e => {
+      const target = e.target
+      if (this.isDropdownOpen && this.container && target) {
+        const dropdown = this.container.querySelector('.telpick-dropdown')
+        if (!this.container.contains(target) && (!dropdown || !dropdown.contains(target))) {
+          this.isDropdownOpen = false
+          this.render()
+        }
+      }
+    }
+    document.addEventListener('click', this._outsideHandler, true)
+  }
+
+  destroy() {
+    if (this._outsideHandler) document.removeEventListener('mousedown', this._outsideHandler)
+    this.container.innerHTML = ''
+  }
+}
+
+window.Telpick = Telpick
+export default Telpick