country-select-pro 5.6.6 → 6.1.4

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/
 
 ---
 
@@ -39,7 +39,7 @@ https://nikmauro.github.io/country-select-pro/
 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,28 +1,29 @@
 /**
- * CountrySelect Pro v5.6.6
+ * CountrySelect Pro v6.1.4
  * ---------------------------------------------------------------------------
  * 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;
@@ -46,6 +47,9 @@ class CountrySelect {
         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);
@@ -173,25 +213,34 @@ 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));
+            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 API Fail", e);
+            console.error("CountrySelect Load Fail:", e);
         }
     }
 
+
     _syncInitialValue() {
         const val = this.input.value;
         if (!val) {
@@ -202,16 +251,30 @@ 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 = '';
-        const searchVal = this.wrapper.querySelector('.cs-search-input')?.value || "";
 
+        // Έλεγχος αν η λίστα είναι άδεια
+        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 searchVal = this.wrapper.querySelector('.cs-search-input')?.value || "";
         const preferred = this.filteredCountries.filter(c => c.isPreferred);
         const others = this.filteredCountries.filter(c => !c.isPreferred);
 
@@ -266,12 +329,17 @@ class CountrySelect {
     _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}}));
 
-            this._renderOptions();
+            // ΑΛΛΑΓΗ: Έλεγχος αν η λίστα έχει ήδη στοιχεία
             const list = this.wrapper.querySelector('.cs-list');
+            if (list.children.length === 0) {
+                this._renderOptions();
+            }
+
             list.style.maxHeight = `${this.rowLimit * this.rowHeight}px`;
 
             const pref = this.filteredCountries.filter(c => c.isPreferred);
@@ -279,7 +347,10 @@ class CountrySelect {
             const fullList = [...pref, ...oth];
             this.activeIndex = fullList.findIndex(c => this.input.value.includes(c.code) || this.input.value.includes(c.phone));
 
-            if (this.activeIndex > -1) setTimeout(() => this._scrollToActive(), 0);
+            // ΑΛΛΑΓΗ: Ενημέρωσε το active element αντί να κάνεις re-render όλη τη λίστα
+            this._updateActiveElement();
+
+            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);
@@ -290,26 +361,43 @@ class CountrySelect {
             e.stopPropagation();
             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();
-                    this.activeIndex++;
-                    this._renderOptions();
-                    this._scrollToActive();
+                    // ΕΛΕΓΧΟΣ: Μπορούμε να πάμε παρακάτω;
+                    if (this.activeIndex < this.filteredCountries.length - 1) {
+                        this.activeIndex++;
+                        this._updateActiveElement();
+                        this._scrollToActive();
+                    }
                 } else if (e.key === 'ArrowUp') {
                     e.preventDefault();
-                    this.activeIndex--;
-                    this._renderOptions();
-                    this._scrollToActive();
-                } else if (e.key === 'Escape') this._toggle(false);
+                    // ΕΛΕΓΧΟΣ: Μπορούμε να πάμε παραπάνω;
+                    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();
@@ -329,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);
     }
 }
 
@@ -380,4 +476,4 @@ if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', setupListeners);
 } else {
     setupListeners();
-}
+}

package/dist/country-select.min.js

@@ -1 +1 @@
-class CountrySelect{constructor(e,t={}){if(this.input=e,!this.input)return;if(this.input.classList.contains("checkout-trigger")||this.input.classList.add("checkout-trigger"),"1"===this.input.dataset.csInitialized)return;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._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-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            .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)}_updatePosition(){const e=this.wrapper.getBoundingClientRect(),t=this.rowLimit*this.rowHeight+(this.hasSearch?60:0),i=window.innerHeight-e.bottom,s=e.top;i<t&&s>t?this.wrapper.classList.add("drop-up"):this.wrapper.classList.remove("drop-up")}async _loadData(){try{const e=await fetch("https://restcountries.com/v3.1/all?fields=name,flags,cca2,idd"),t=await e.json();this.countries=t.map(e=>({name:e.name.common,code:e.cca2.toUpperCase(),flag:e.flags.svg,phone:e.idd.root+(e.idd.suffixes?e.idd.suffixes.length>1?"":e.idd.suffixes[0]:""),isPreferred:this.preferredCodes.includes(e.cca2.toUpperCase())})).sort((e,t)=>e.name.localeCompare(t.name)),this.filteredCountries=[...this.countries],this._renderOptions(),this._syncInitialValue()}catch(e){console.error("CountrySelect API 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}">`).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;e.innerHTML="";const t=this.wrapper.querySelector(".cs-search-input")?.value||"",i=this.filteredCountries.filter(e=>e.isPreferred),s=this.filteredCountries.filter(e=>!e.isPreferred),n=(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(n(t,i))),i.length>0&&s.length>0&&!t){const t=document.createElement("div");t.className="cs-divider",e.appendChild(t)}s.forEach((t,s)=>e.appendChild(n(t,i.length+s)))}_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}})),this._renderOptions();this.wrapper.querySelector(".cs-list").style.maxHeight=this.rowLimit*this.rowHeight+"px";const e=[...this.filteredCountries.filter(e=>e.isPreferred),...this.filteredCountries.filter(e=>!e.isPreferred)];this.activeIndex=e.findIndex(e=>this.input.value.includes(e.code)||this.input.value.includes(e.phone)),this.activeIndex>-1&&setTimeout(()=>this._scrollToActive(),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._renderOptions(),this._scrollToActive()):"ArrowUp"===e.key?(e.preventDefault(),this.activeIndex--,this._renderOptions(),this._scrollToActive()):"Escape"===e.key&&this._toggle(!1))}),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(){const e=this.wrapper.querySelector(".cs-list"),t=e.querySelectorAll(".cs-option")[this.activeIndex];if(t){const i=t.offsetTop-e.offsetHeight/2+this.rowHeight/2;e.scrollTop=i}}}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();
+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();