country-select-pro 6.1.3 → 6.1.4

package/README.md

@@ -39,7 +39,7 @@ https://nikmauro.github.io/country-select-pro/docs/
 Include the script via **jsDelivr**:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/nikmauro/country-select-pro@4.8.2/dist/country-select.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/country-select-pro@6.1.4/dist/country-select.min.js"></script>
 ```
 
 ---
@@ -49,7 +49,7 @@ Include the script via **jsDelivr**:
 Download the repository and include:
 
 ```html
-<script src="dist/country-select.min.js"></script>
+<script src="dist/country-select.js"></script>
 ```
 
 ---
@@ -128,8 +128,8 @@ country-select-pro
 │
 ├─ dist
 │   ├─ country-select.js
-│   └─ country-select.min.js
-│
+│   └─ data.json
+├─ flags
 ├─ demo
 ├─ src
 └─ README.md
@@ -173,8 +173,6 @@ Contributions are welcome.
 Developed by **Nikolaos Mavroeidis**
 GitHub: https://github.com/nikmauro
 
-With collaborative assistance from **Gemini (Google AI)**.
-
 ---
 
 # 📄 License

package/dist/country-select.js

@@ -1,5 +1,5 @@
 /**
- * CountrySelect Pro v6.1.3
+ * CountrySelect Pro v6.1.4
  * ---------------------------------------------------------------------------
  * Features:
  * - SVG Arrow Down icon
@@ -13,7 +13,7 @@
 
 class CountrySelect {
 
-    
+
     constructor(element, options = {}) {
         this.input = element;
         if (!this.input) return;
@@ -46,10 +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();
     }
 
@@ -186,17 +186,17 @@ class CountrySelect {
     }
 
     _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');
-        }
-    });
-}
+        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();
@@ -212,35 +212,35 @@ class CountrySelect {
     }
 
     async _loadData() {
-    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);
+        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) {
@@ -253,52 +253,52 @@ class CountrySelect {
 
 
     _parseTemplate(template, country) {
-    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; // Σταματάμε εδώ
+        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>`);
     }
 
-    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);
+    _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; // Σταματάμε εδώ
+        }
 
-    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);
+        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;
         };
-        return div;
-    };
 
-    preferred.forEach((c, i) => listContainer.appendChild(createOption(c, i)));
+        preferred.forEach((c, i) => listContainer.appendChild(createOption(c, i)));
 
-    if (preferred.length > 0 && others.length > 0 && !searchVal) {
-        const hr = document.createElement('div');
-        hr.className = 'cs-divider';
-        listContainer.appendChild(hr);
-    }
+        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)));
-}
+        others.forEach((c, i) => listContainer.appendChild(createOption(c, preferred.length + i)));
+    }
 
     _select(country) {
         this._updateUI(country);
@@ -326,35 +326,35 @@ 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;
 
-        // ΑΛΛΑΓΗ: Έλεγχος αν η λίστα έχει ήδη στοιχεία
-        const list = this.wrapper.querySelector('.cs-list');
-        if (list.children.length === 0) {
-            this._renderOptions();
-        }
+        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();
+            }
 
-        list.style.maxHeight = `${this.rowLimit * this.rowHeight}px`;
+            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));
+            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();
+            // ΑΛΛΑΓΗ: Ενημέρωσε το 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);
+            if (this.activeIndex > -1) setTimeout(() => this._scrollToActive(true), 0); // 6.1.4: από την αρχή, αν η επιλεγμένη φαίνεται εκεί
+            if (this.hasSearch) setTimeout(() => this.wrapper.querySelector('.cs-search-input').focus(), 50);
+        }
+        this.wrapper.classList.toggle('open', this.isOpen);
     }
-    this.wrapper.classList.toggle('open', this.isOpen);
-}
 
     _bindEvents() {
         this.wrapper.querySelector('.cs-trigger').onclick = (e) => {
@@ -362,42 +362,42 @@ class CountrySelect {
             this._toggle();
         };
 
- 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();
+        this.wrapper.addEventListener('keydown', (e) => {
+            if (!this.isOpen && (e.key === 'ArrowDown')) {
+                e.preventDefault();
+                this._toggle(true);
+                return;
             }
-        } 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.isOpen) {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    // ΕΛΕΓΧΟΣ: Μπορούμε να πάμε παρακάτω;
+                    if (this.activeIndex < this.filteredCountries.length - 1) {
+                        this.activeIndex++;
+                        this._updateActiveElement();
+                        this._scrollToActive();
+                    }
+                } 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();
@@ -417,14 +417,22 @@ class CountrySelect {
         });
     }
 
-    _scrollToActive() {
+    /**
+     * Scroll της λίστας στην επιλεγμένη χώρα.
+     * 6.1.4: fromTop (άνοιγμα της λίστας) — αν η επιλεγμένη φαίνεται ήδη από την αρχή της λίστας, η λίστα ξεκινά από την αρχή
+     * (πριν: κεντράριζε ΠΑΝΤΑ → με επιλεγμένη την 3η χώρα, π.χ. Greece μετά από Bulgaria · Cyprus, κρυβόταν η 1η / οι προτιμώμενες).
+     * Θέση μέσα στη λίστα από τα getBoundingClientRect (το offsetTop μετρά από το .cs-dropdown — μαζί με το πεδίο αναζήτησης).
+     */
+    _scrollToActive(fromTop = false) {
         const list = this.wrapper.querySelector('.cs-list');
-        const options = list.querySelectorAll('.cs-option');
-        const activeItem = options[this.activeIndex];
-        if (activeItem) {
-            const scrollPos = activeItem.offsetTop - (list.offsetHeight / 2) + (this.rowHeight / 2);
-            list.scrollTop = scrollPos;
+        const activeItem = list.querySelectorAll('.cs-option')[this.activeIndex];
+        if (!activeItem) return;
+        const top = activeItem.getBoundingClientRect().top - list.getBoundingClientRect().top + list.scrollTop;
+        if (fromTop && top + activeItem.offsetHeight <= list.clientHeight) {
+            list.scrollTop = 0;
+            return;
         }
+        list.scrollTop = top - (list.clientHeight / 2) + (activeItem.offsetHeight / 2);
     }
 }
 

package/dist/country-select.min.js

@@ -0,0 +1 @@
+class CountrySelect{constructor(e,t={}){if(this.input=e,!this.input)return;if("1"===this.input.dataset.csInitialized)return;this.input.dataset.csInitialized="1",this.schema=this.input.dataset.schema||"{img} {name}",this.schemaReturn=this.input.dataset.schemaReturn||this.schema,this.valueType=this.input.dataset.valueType||"code",this.rowLimit=parseInt(this.input.dataset.countryRowValues)||5,this.hasSearch="false"!==this.input.dataset.countrySearch,this.dropdownWidth=this.input.dataset.dropdownWidth||"auto";const i=this.input.dataset.preferred||"";this.preferredCodes=i?i.split(",").map(e=>e.trim().toUpperCase()):[],this.config={placeholder:this.input.dataset.placeholder||"Select",...t},this.countries=[],this.filteredCountries=[],this.isOpen=!1,this.activeIndex=-1,this.rowHeight=44,this.baseUrl="https://cdn.jsdelivr.net/gh/nikmauro/country-select-pro@6.1.3/",this._init()}async _init(){this._applyStyles(),this._setupDOM(),this._bindEvents(),await this._loadData()}_applyStyles(){const e="cs-v57-styles";if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent="\n.cs-no-results {\n    padding: 10px;\n    text-align: center;\n    color: #999;\n    cursor: default;\n    font-style: italic;\n}\n\n.cs-flag-img {\n    width: 22px !important;  \n    height: 16px !important; \n    object-fit: cover; /* Ή contain, ανάλογα πώς φαίνεται καλύτερα */\n    vertical-align: middle;\n    margin-right: 8px;\n    border-radius: 2px;\n    display: inline-block;\n}\n        \n            .cs-wrapper { position: relative; font-family: inherit; width: 100%; outline: none; }\n            .cs-trigger { \n                /* Bootstrap 5 Exact Specs */\n                padding: 0.375rem 2.25rem 0.375rem 0.75rem; \n                font-size: 1rem;\n                font-weight: 400;\n                line-height: 1.5;\n                color: #212529;\n                background-color: #fff;\n                background-clip: padding-box;\n                border: 1px solid #ced4da;\n                border-radius: 0.375rem;\n                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n                display: flex; align-items: center; gap: 8px; cursor: pointer; \n                min-height: calc(1.5em + 0.75rem + 2px); \n                box-sizing: border-box; position: relative;\n                background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E\");\n                background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px;\n            }\n            \n            .input-group > .cs-wrapper { flex: 1 1 auto; width: 1%; }\n            .cs-wrapper.is-invalid .cs-trigger { border-color: #dc3545 !important; }\n            .cs-error-msg { display: none; color: #dc3545; font-size: 0.825em; margin-top: 4px; position: absolute; left: 0; top: 100%; width: 100%; z-index: 10; }\n            .cs-wrapper.is-invalid .cs-error-msg { display: block; }\n\n            /* Focus state Bootstrap 5 */\n            .cs-wrapper:focus-within .cs-trigger {\n                border-color: #86b7fe;\n                outline: 0;\n                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n            }\n\n            .flag-emoji {\n                font-size: 1.2em; /* Για να φαίνεται πιο καθαρό το emoji */\n                margin-right: 8px;\n            }\n\n            .cs-dropdown { \n                position: absolute; left: 0; right: 0; background: #fff; \n                border: 1px solid rgba(0,0,0,.15); border-radius: 0.375rem;\n                z-index: 2050; display: none; margin-top: 0.125rem;\n                box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);\n                overflow: hidden; max-width: 95vw;\n            }\n            \n            .cs-wrapper.drop-up .cs-dropdown { \n                bottom: calc(100% + 0.25rem); top: auto;\n                box-shadow: 0 -0.5rem 1rem rgba(0,0,0,.175);\n            }\n            .cs-wrapper.open .cs-dropdown { display: block; }\n            \n            .cs-search-box { padding: 8px; border-bottom: 1px solid #dee2e6; background: #f8f9fa; }\n            .cs-search-input { \n                width: 100%; padding: 0.375rem 0.75rem; border: 1px solid #ced4da; \n                border-radius: 0.25rem; outline: none; font-size: 0.875rem;\n            }\n            .cs-list { overflow-y: auto; scrollbar-width: thin; scroll-behavior: auto; min-height: 50px; padding: 0.375rem 0; }\n            .cs-option { \n                padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 10px; \n                cursor: pointer; font-size: 0.9rem; transition: background 0.1s;\n            }\n            .cs-option:hover { background-color: #f8f9fa; }\n            .cs-option.active { background-color: #0d6efd; color: #fff; }\n            \n            .cs-wrapper img { width: 20px !important; height: 14px !important; object-fit: cover; border-radius: 2px; flex-shrink: 0; }\n            .cs-selected-content { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; line-height: 1; }\n            .cs-divider { height: 1px; background: #dee2e6; margin: 0.375rem 0; pointer-events: none; }\n            .cs-hidden { display: none !important; }\n        ",document.head.appendChild(t)}}_setupDOM(){Object.assign(this.input.style,{position:"absolute",opacity:"0",width:"1px",height:"1px",pointerEvents:"none"}),this.wrapper=document.createElement("div"),this.wrapper.className="cs-wrapper",this.wrapper.tabIndex=0;const e=this.input.value?"":this.config.placeholder;this.wrapper.innerHTML=`\n            <div class="cs-trigger"><span class="cs-selected-content">${e}</span></div>\n            <div class="cs-error-msg"></div>\n            <div class="cs-dropdown">\n                <div class="cs-search-box ${this.hasSearch?"":"cs-hidden"}">\n                    <input type="text" class="cs-search-input" placeholder="Search..." autocomplete="off" tabindex="-1">\n                </div>\n                <div class="cs-list"><div class="cs-loading" style="padding:15px; text-align:center;">Loading...</div></div>\n            </div>\n        `;this.wrapper.querySelector(".cs-dropdown").style.width="auto"===this.dropdownWidth?"100%":this.dropdownWidth,this.input.parentNode.insertBefore(this.wrapper,this.input.nextSibling)}_updateActiveElement(){this.wrapper.querySelectorAll(".cs-option").forEach((e,t)=>{t===this.activeIndex?(e.classList.add("active"),e.scrollIntoView({block:"nearest"})):e.classList.remove("active")})}_updatePosition(){const e=this.wrapper.getBoundingClientRect(),t=this.rowLimit*this.rowHeight+(this.hasSearch?60:0),i=window.innerHeight-e.bottom,n=e.top;i<t&&n>t?this.wrapper.classList.add("drop-up"):this.wrapper.classList.remove("drop-up")}async _loadData(){try{const e=`${this.baseUrl}dist/data.json`,t=await fetch(e),i=await t.json(),n=i?.data?.objects||[];this.countries=n.map(e=>{const t=e.codes?.alpha_2?e.codes.alpha_2.toUpperCase():"";return{name:e.names?.common||"",code:t,flag:t?`${this.baseUrl}dist/flags/4x3/${t.toLowerCase()}.svg`:"",phone:e.calling_codes&&e.calling_codes.length>0?`+${e.calling_codes[0]}`:"",isPreferred:!!t&&this.preferredCodes.includes(t)}}).filter(e=>""!==e.code).sort((e,t)=>e.name.localeCompare(t.name)),this.filteredCountries=[...this.countries],this._renderOptions(),this._syncInitialValue()}catch(e){console.error("CountrySelect Load Fail:",e)}}_syncInitialValue(){const e=this.input.value;if(!e)return void(this.wrapper.querySelector(".cs-selected-content").innerHTML=this.config.placeholder);const t=this.countries.find(t=>"phone"===this.valueType?t.phone===e:"name"===this.valueType?t.name===e:t.code===e);t&&this._updateUI(t)}_parseTemplate(e,t){return e.replace("{img}",`<img src="${t.flag}" class="cs-flag-img" loading="lazy" alt="${t.name}">`).replace("{name}",`<span>${t.name}</span>`).replace("{code}",`<span>${t.code}</span>`).replace("{phone}",`<span>${t.phone}</span>`)}_renderOptions(){const e=this.wrapper.querySelector(".cs-list");if(!e)return;if(e.innerHTML="",0===this.filteredCountries.length){const t=document.createElement("div");return t.className="cs-no-results",t.innerHTML='<span class="cs-no-results-text">Not found</span>',void e.appendChild(t)}const t=this.wrapper.querySelector(".cs-search-input")?.value||"",i=this.filteredCountries.filter(e=>e.isPreferred),n=this.filteredCountries.filter(e=>!e.isPreferred),s=(e,t)=>{const i=document.createElement("div");return i.className="cs-option "+(t===this.activeIndex?"active":""),i.innerHTML=this._parseTemplate(this.schema,e),i.onclick=t=>{t.stopPropagation(),this._select(e)},i};if(i.forEach((t,i)=>e.appendChild(s(t,i))),i.length>0&&n.length>0&&!t){const t=document.createElement("div");t.className="cs-divider",e.appendChild(t)}n.forEach((t,n)=>e.appendChild(s(t,i.length+n)))}_select(e){this._updateUI(e),this.input.value="phone"===this.valueType?e.phone:"name"===this.valueType?e.name:e.code,this.input.setCustomValidity(""),this.wrapper.classList.remove("is-invalid"),this.input.dispatchEvent(new Event("change",{bubbles:!0})),this.input.dispatchEvent(new Event("input",{bubbles:!0})),this.input.dispatchEvent(new Event("country-change",{bubbles:!0})),this._toggle(!1),this.wrapper.focus()}_updateUI(e){const t=this.wrapper.querySelector(".cs-selected-content");t&&(t.innerHTML=this._parseTemplate(this.schemaReturn,e))}_toggle(e){if(0!==this.countries.length){if(this.isOpen=void 0!==e?e:!this.isOpen,this.isOpen){this._updatePosition(),document.dispatchEvent(new CustomEvent("cs-close-others",{detail:{opener:this.wrapper}}));const e=this.wrapper.querySelector(".cs-list");0===e.children.length&&this._renderOptions(),e.style.maxHeight=this.rowLimit*this.rowHeight+"px";const t=[...this.filteredCountries.filter(e=>e.isPreferred),...this.filteredCountries.filter(e=>!e.isPreferred)];this.activeIndex=t.findIndex(e=>this.input.value.includes(e.code)||this.input.value.includes(e.phone)),this._updateActiveElement(),this.activeIndex>-1&&setTimeout(()=>this._scrollToActive(!0),0),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&&"ArrowDown"===e.key)return e.preventDefault(),void this._toggle(!0);this.isOpen&&("ArrowDown"===e.key?(e.preventDefault(),this.activeIndex<this.filteredCountries.length-1&&(this.activeIndex++,this._updateActiveElement(),this._scrollToActive())):"ArrowUp"===e.key?(e.preventDefault(),this.activeIndex>0&&(this.activeIndex--,this._updateActiveElement(),this._scrollToActive())):"Escape"===e.key?this._toggle(!1):"Enter"===e.key&&(e.preventDefault(),this.activeIndex>=0&&this.activeIndex<this.filteredCountries.length&&this._select(this.filteredCountries[this.activeIndex])))}),this.hasSearch&&(this.wrapper.querySelector(".cs-search-input").oninput=e=>{const t=e.target.value.toLowerCase();this.filteredCountries=this.countries.filter(e=>e.name.toLowerCase().includes(t)||e.phone.includes(t)),this.activeIndex=0,this._renderOptions()}),document.addEventListener("click",e=>{this.wrapper.contains(e.target)||this._toggle(!1)}),document.addEventListener("cs-close-others",e=>{e.detail.opener!==this.wrapper&&(this.isOpen=!1,this.wrapper.classList.remove("open"))})}_scrollToActive(e=!1){const t=this.wrapper.querySelector(".cs-list"),i=t.querySelectorAll(".cs-option")[this.activeIndex];if(!i)return;const n=i.getBoundingClientRect().top-t.getBoundingClientRect().top+t.scrollTop;e&&n+i.offsetHeight<=t.clientHeight?t.scrollTop=0:t.scrollTop=n-t.clientHeight/2+i.offsetHeight/2}}const initCS=e=>{const t=e&&e.querySelectorAll?e:document;t.matches?.(".country-select")&&"1"!==t.dataset.csInitialized&&new CountrySelect(t),t.querySelectorAll?.(".country-select").forEach(e=>{"1"!==e.dataset.csInitialized&&new CountrySelect(e)})},setupListeners=()=>{initCS(document),document.body.addEventListener("htmx:afterSettle",e=>{initCS(e.detail.target||e.target)}),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{1===e.nodeType&&initCS(e)})})}).observe(document.body,{childList:!0,subtree:!0})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",setupListeners):setupListeners();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "country-select-pro",
-  "version": "6.1.3",
+  "version": "6.1.4",
   "description": "A lightweight, zero-dependency, vanilla JavaScript country selector with localized browser validation and Bootstrap 5 integration.",
   "main": "dist/country-select.js",
   "jsdelivr": "dist/country-select.js",