country-select-pro 5.6.6 → 6.1.3

package/README.md

@@ -28,7 +28,7 @@ CountrySelect Pro provides a clean and fast country dropdown with **search, phon
 
 Try the interactive demo:
 
-https://nikmauro.github.io/country-select-pro/
+https://nikmauro.github.io/country-select-pro/docs/
 
 ---
 

package/dist/country-select.js

@@ -1,28 +1,29 @@
 /**
- * CountrySelect Pro v5.6.6
+ * CountrySelect Pro v6.1.3
  * ---------------------------------------------------------------------------
  * Features:
  * - SVG Arrow Down icon
  * - HTMX Auto-initialization
  * - Improved Validation UI
  * - Zero Dependencies
+ * - 4x3, 1x1 Flags
  * ---------------------------------------------------------------------------
  */
 
+
 class CountrySelect {
 
+    
     constructor(element, options = {}) {
         this.input = element;
         if (!this.input) return;
 
-// προσθέτεις class
-        if (!this.input.classList.contains('checkout-trigger')) {
-            this.input.classList.add('checkout-trigger');
-        }
-
-// μετά ελέγχεις αν έχει ήδη init
+        // 1. ΕΛΕΓΧΟΣ HTMX: Αν έχει ήδη γίνει init, σταμάτα αμέσως
         if (this.input.dataset.csInitialized === '1') return;
 
+        // 2. ΚΛΕΙΔΩΜΑ HTMX: Σημειώνουμε ότι έγινε init ΠΡΙΝ τρέξει το async _init()
+        this.input.dataset.csInitialized = '1';
+
         // Configuration
         this.schema = this.input.dataset.schema || "{img} {name}";
         this.schemaReturn = this.input.dataset.schemaReturn || this.schema;
@@ -45,7 +46,10 @@ class CountrySelect {
         this.isOpen = false;
         this.activeIndex = -1;
         this.rowHeight = 44;
-
+        
+        // Base URL για το JSON και τα SVG flags
+        this.baseUrl = 'https://cdn.jsdelivr.net/gh/nikmauro/country-select-pro@6.1.3/';
+        
         this._init();
     }
 
@@ -58,6 +62,24 @@ class CountrySelect {
 
     _applyStyles() {
         const styles = `
+.cs-no-results {
+    padding: 10px;
+    text-align: center;
+    color: #999;
+    cursor: default;
+    font-style: italic;
+}
+
+.cs-flag-img {
+    width: 22px !important;  
+    height: 16px !important; 
+    object-fit: cover; /* Ή contain, ανάλογα πώς φαίνεται καλύτερα */
+    vertical-align: middle;
+    margin-right: 8px;
+    border-radius: 2px;
+    display: inline-block;
+}
+        
             .cs-wrapper { position: relative; font-family: inherit; width: 100%; outline: none; }
             .cs-trigger { 
                 /* Bootstrap 5 Exact Specs */
@@ -90,6 +112,11 @@ class CountrySelect {
                 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
             }
 
+            .flag-emoji {
+                font-size: 1.2em; /* Για να φαίνεται πιο καθαρό το emoji */
+                margin-right: 8px;
+            }
+
             .cs-dropdown { 
                 position: absolute; left: 0; right: 0; background: #fff; 
                 border: 1px solid rgba(0,0,0,.15); border-radius: 0.375rem;
@@ -158,6 +185,19 @@ class CountrySelect {
         this.input.parentNode.insertBefore(this.wrapper, this.input.nextSibling);
     }
 
+    _updateActiveElement() {
+    const options = this.wrapper.querySelectorAll('.cs-option');
+    options.forEach((el, index) => {
+        if (index === this.activeIndex) {
+            el.classList.add('active');
+            // Bonus UX: Κάνει scroll αν το element είναι εκτός οθόνης
+            el.scrollIntoView({ block: 'nearest' });
+        } else {
+            el.classList.remove('active');
+        }
+    });
+}
+
     _updatePosition() {
         const rect = this.wrapper.getBoundingClientRect();
         const dropdownHeight = (this.rowLimit * this.rowHeight) + (this.hasSearch ? 60 : 0);
@@ -172,26 +212,35 @@ class CountrySelect {
     }
 
     async _loadData() {
-        try {
-            const res = await fetch('https://restcountries.com/v3.1/all?fields=name,flags,cca2,idd');
-            const data = await res.json();
-
-            this.countries = data.map(c => ({
-                name: c.name.common,
-                code: c.cca2.toUpperCase(),
-                flag: c.flags.svg,
-                phone: c.idd.root + (c.idd.suffixes ? (c.idd.suffixes.length > 1 ? "" : c.idd.suffixes[0]) : ""),
-                isPreferred: this.preferredCodes.includes(c.cca2.toUpperCase())
-            })).sort((a, b) => a.name.localeCompare(b.name));
-
-            this.filteredCountries = [...this.countries];
-            this._renderOptions();
-            this._syncInitialValue();
-        } catch (e) {
-            console.error("CountrySelect API Fail", e);
-        }
+    try {
+        const jsonUrl = `${this.baseUrl}dist/data.json`; // Χρήση του baseUrl
+        
+        const res = await fetch(jsonUrl);
+        const json = await res.json();
+        const data = json?.data?.objects || [];
+
+        this.countries = data.map(c => {
+            const code = c.codes?.alpha_2 ? c.codes.alpha_2.toUpperCase() : "";
+            return {
+                name: c.names?.common || "",
+                code: code,
+                // Δημιουργία path για το SVG με βάση το code
+                flag: code ? `${this.baseUrl}dist/flags/4x3/${code.toLowerCase()}.svg` : "",
+                phone: (c.calling_codes && c.calling_codes.length > 0) ? `+${c.calling_codes[0]}` : "",
+                isPreferred: code ? this.preferredCodes.includes(code) : false
+            };
+        }).filter(c => c.code !== "")
+          .sort((a, b) => a.name.localeCompare(b.name));
+
+        this.filteredCountries = [...this.countries];
+        this._renderOptions();
+        this._syncInitialValue();
+    } catch (e) {
+        console.error("CountrySelect Load Fail:", e);
     }
+}
 
+    
     _syncInitialValue() {
         const val = this.input.value;
         if (!val) {
@@ -202,41 +251,55 @@ class CountrySelect {
         if (current) this._updateUI(current);
     }
 
+
     _parseTemplate(template, country) {
-        return template.replace('{img}', `<img src="${country.flag}">`).replace('{name}', `<span>${country.name}</span>`).replace('{code}', `<span>${country.code}</span>`).replace('{phone}', `<span>${country.phone}</span>`);
+    return template
+        .replace('{img}', `<img src="${country.flag}" class="cs-flag-img" loading="lazy" alt="${country.name}">`)
+        .replace('{name}', `<span>${country.name}</span>`)
+        .replace('{code}', `<span>${country.code}</span>`)
+        .replace('{phone}', `<span>${country.phone}</span>`);
+}
+
+   _renderOptions() {
+    const listContainer = this.wrapper.querySelector('.cs-list');
+    if (!listContainer) return;
+    listContainer.innerHTML = '';
+    
+    // Έλεγχος αν η λίστα είναι άδεια
+    if (this.filteredCountries.length === 0) {
+        const noResults = document.createElement('div');
+        noResults.className = 'cs-no-results';
+        noResults.innerHTML = '<span class="cs-no-results-text">Not found</span>';
+        listContainer.appendChild(noResults);
+        return; // Σταματάμε εδώ
     }
 
-    _renderOptions() {
-        const listContainer = this.wrapper.querySelector('.cs-list');
-        if (!listContainer) return;
-        listContainer.innerHTML = '';
-        const searchVal = this.wrapper.querySelector('.cs-search-input')?.value || "";
-
-        const preferred = this.filteredCountries.filter(c => c.isPreferred);
-        const others = this.filteredCountries.filter(c => !c.isPreferred);
-
-        const createOption = (country, index) => {
-            const div = document.createElement('div');
-            div.className = `cs-option ${index === this.activeIndex ? 'active' : ''}`;
-            div.innerHTML = this._parseTemplate(this.schema, country);
-            div.onclick = (e) => {
-                e.stopPropagation();
-                this._select(country);
-            };
-            return div;
-        };
+    const searchVal = this.wrapper.querySelector('.cs-search-input')?.value || "";
+    const preferred = this.filteredCountries.filter(c => c.isPreferred);
+    const others = this.filteredCountries.filter(c => !c.isPreferred);
 
-        preferred.forEach((c, i) => listContainer.appendChild(createOption(c, i)));
+    const createOption = (country, index) => {
+        const div = document.createElement('div');
+        div.className = `cs-option ${index === this.activeIndex ? 'active' : ''}`;
+        div.innerHTML = this._parseTemplate(this.schema, country);
+        div.onclick = (e) => {
+            e.stopPropagation();
+            this._select(country);
+        };
+        return div;
+    };
 
-        if (preferred.length > 0 && others.length > 0 && !searchVal) {
-            const hr = document.createElement('div');
-            hr.className = 'cs-divider';
-            listContainer.appendChild(hr);
-        }
+    preferred.forEach((c, i) => listContainer.appendChild(createOption(c, i)));
 
-        others.forEach((c, i) => listContainer.appendChild(createOption(c, preferred.length + i)));
+    if (preferred.length > 0 && others.length > 0 && !searchVal) {
+        const hr = document.createElement('div');
+        hr.className = 'cs-divider';
+        listContainer.appendChild(hr);
     }
 
+    others.forEach((c, i) => listContainer.appendChild(createOption(c, preferred.length + i)));
+}
+
     _select(country) {
         this._updateUI(country);
 
@@ -263,53 +326,78 @@ class CountrySelect {
         if (content) content.innerHTML = this._parseTemplate(this.schemaReturn, country);
     }
 
-    _toggle(force) {
-        if (this.countries.length === 0) return;
-        this.isOpen = force !== undefined ? force : !this.isOpen;
-        if (this.isOpen) {
-            this._updatePosition();
-            document.dispatchEvent(new CustomEvent('cs-close-others', {detail: {opener: this.wrapper}}));
+   _toggle(force) {
+    if (this.countries.length === 0) return;
+    this.isOpen = force !== undefined ? force : !this.isOpen;
+    
+    if (this.isOpen) {
+        this._updatePosition();
+        document.dispatchEvent(new CustomEvent('cs-close-others', {detail: {opener: this.wrapper}}));
 
+        // ΑΛΛΑΓΗ: Έλεγχος αν η λίστα έχει ήδη στοιχεία
+        const list = this.wrapper.querySelector('.cs-list');
+        if (list.children.length === 0) {
             this._renderOptions();
-            const list = this.wrapper.querySelector('.cs-list');
-            list.style.maxHeight = `${this.rowLimit * this.rowHeight}px`;
+        }
 
-            const pref = this.filteredCountries.filter(c => c.isPreferred);
-            const oth = this.filteredCountries.filter(c => !c.isPreferred);
-            const fullList = [...pref, ...oth];
-            this.activeIndex = fullList.findIndex(c => this.input.value.includes(c.code) || this.input.value.includes(c.phone));
+        list.style.maxHeight = `${this.rowLimit * this.rowHeight}px`;
 
-            if (this.activeIndex > -1) setTimeout(() => this._scrollToActive(), 0);
-            if (this.hasSearch) setTimeout(() => this.wrapper.querySelector('.cs-search-input').focus(), 50);
-        }
-        this.wrapper.classList.toggle('open', this.isOpen);
+        const pref = this.filteredCountries.filter(c => c.isPreferred);
+        const oth = this.filteredCountries.filter(c => !c.isPreferred);
+        const fullList = [...pref, ...oth];
+        this.activeIndex = fullList.findIndex(c => this.input.value.includes(c.code) || this.input.value.includes(c.phone));
+
+        // ΑΛΛΑΓΗ: Ενημέρωσε το active element αντί να κάνεις re-render όλη τη λίστα
+        this._updateActiveElement();
+
+        if (this.activeIndex > -1) setTimeout(() => this._scrollToActive(), 0);
+        if (this.hasSearch) setTimeout(() => this.wrapper.querySelector('.cs-search-input').focus(), 50);
     }
+    this.wrapper.classList.toggle('open', this.isOpen);
+}
 
     _bindEvents() {
         this.wrapper.querySelector('.cs-trigger').onclick = (e) => {
             e.stopPropagation();
             this._toggle();
         };
-        this.wrapper.addEventListener('keydown', (e) => {
-            if (!this.isOpen && (e.key === 'ArrowDown')) {
-                e.preventDefault();
-                this._toggle(true);
-                return;
+
+ this.wrapper.addEventListener('keydown', (e) => {
+    if (!this.isOpen && (e.key === 'ArrowDown')) {
+        e.preventDefault();
+        this._toggle(true);
+        return;
+    }
+    
+    if (this.isOpen) {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            // ΕΛΕΓΧΟΣ: Μπορούμε να πάμε παρακάτω;
+            if (this.activeIndex < this.filteredCountries.length - 1) {
+                this.activeIndex++;
+                this._updateActiveElement();
+                this._scrollToActive();
             }
-            if (this.isOpen) {
-                if (e.key === 'ArrowDown') {
-                    e.preventDefault();
-                    this.activeIndex++;
-                    this._renderOptions();
-                    this._scrollToActive();
-                } else if (e.key === 'ArrowUp') {
-                    e.preventDefault();
-                    this.activeIndex--;
-                    this._renderOptions();
-                    this._scrollToActive();
-                } else if (e.key === 'Escape') this._toggle(false);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            // ΕΛΕΓΧΟΣ: Μπορούμε να πάμε παραπάνω;
+            if (this.activeIndex > 0) {
+                this.activeIndex--;
+                this._updateActiveElement();
+                this._scrollToActive();
             }
-        });
+        } else if (e.key === 'Escape') {
+            this._toggle(false);
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            // Εδώ πρέπει να είμαστε σίγουροι ότι το activeIndex είναι έγκυρο
+            if (this.activeIndex >= 0 && this.activeIndex < this.filteredCountries.length) {
+                this._select(this.filteredCountries[this.activeIndex]);
+            }
+        }
+    }
+});
+        
         if (this.hasSearch) {
             this.wrapper.querySelector('.cs-search-input').oninput = (e) => {
                 const term = e.target.value.toLowerCase();
@@ -380,4 +468,4 @@ if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', setupListeners);
 } else {
     setupListeners();
-}
+}