@bebranded/bb-contents 1.0.125 → 1.0.127

package/bb-contents.js

@@ -1,7 +1,7 @@
 /**
  * BeBranded Contents
  * Contenus additionnels français pour Webflow
- * @version 1.0.125
+ * @version 1.0.127
  * @author BeBranded
  * @license MIT
  * @website https://www.bebranded.xyz
@@ -32,11 +32,11 @@
     window._bbContentsInitialized = true;
 
     // Log de démarrage simple (une seule fois)
-    console.log('bb-contents | v1.0.125');
+    console.log('bb-contents | v1.0.127');
 
     // Configuration
     const config = {
-        version: '1.0.125',
+        version: '1.0.127',
         debug: false, // Debug désactivé pour rendu propre
         prefix: 'bb-', // utilisé pour générer les sélecteurs (data-bb-*)
         youtubeEndpoint: null, // URL du worker YouTube (à définir par l'utilisateur)
@@ -1288,30 +1288,65 @@
                         defaultCountry = self.findCountry(element.value);
                     }
                     
-                    // Trier les pays : préférés en haut dans l'ordre exact spécifié
+                    // Trier les pays : préférés en haut dans l'ordre exact spécifié, puis les autres par ordre alphabétique
                     let sortedCountries = self.countries.slice();
                     if (preferredCountries.length > 0) {
-                        // Créer un map pour l'ordre des préférés
-                        const preferredOrder = {};
-                        preferredCountries.forEach(function(code, index) {
-                            preferredOrder[code] = index;
-                        });
-                        // Trier : préférés dans l'ordre exact, puis les autres
-                        sortedCountries = preferredCountries.map(function(code) {
+                        // Pays préférés dans l'ordre exact spécifié
+                        const preferred = preferredCountries.map(function(code) {
                             return self.countries.find(function(c) {
                                 return c.alpha2 === code;
                             });
                         }).filter(function(c) {
                             return c !== undefined;
-                        }).concat(sortedCountries.filter(function(c) {
+                        });
+                        
+                        // Pays non-préférés triés par ordre alphabétique
+                        const others = sortedCountries.filter(function(c) {
                             return preferredCountries.indexOf(c.alpha2) === -1;
-                        }));
+                        }).sort(function(a, b) {
+                            const nameA = a.name[language].toLowerCase();
+                            const nameB = b.name[language].toLowerCase();
+                            if (nameA < nameB) return -1;
+                            if (nameA > nameB) return 1;
+                            return 0;
+                        });
+                        
+                        sortedCountries = preferred.concat(others);
+                    } else {
+                        // Tous les pays par ordre alphabétique si pas de préférés
+                        sortedCountries = sortedCountries.sort(function(a, b) {
+                            const nameA = a.name[language].toLowerCase();
+                            const nameB = b.name[language].toLowerCase();
+                            if (nameA < nameB) return -1;
+                            if (nameA > nameB) return 1;
+                            return 0;
+                        });
                     }
                     
-                    // Créer le wrapper
+                    // Récupérer les dimensions du select natif avant de le masquer
+                    const selectComputedStyle = window.getComputedStyle(element);
+                    const selectWidth = element.offsetWidth || parseFloat(selectComputedStyle.width) || 'auto';
+                    const selectHeight = element.offsetHeight || parseFloat(selectComputedStyle.height) || 'auto';
+                    const selectMinWidth = selectComputedStyle.minWidth !== 'none' ? selectComputedStyle.minWidth : null;
+                    const selectMaxWidth = selectComputedStyle.maxWidth !== 'none' ? selectComputedStyle.maxWidth : null;
+                    const selectMinHeight = selectComputedStyle.minHeight !== 'none' ? selectComputedStyle.minHeight : null;
+                    const selectMaxHeight = selectComputedStyle.maxHeight !== 'none' ? selectComputedStyle.maxHeight : null;
+                    
+                    // Créer le wrapper avec les dimensions du select
                     const wrapper = document.createElement('div');
                     wrapper.className = 'bb-country-select-wrapper';
-                    wrapper.style.cssText = 'position: relative; width: 100%;';
+                    let wrapperStyle = 'position: relative;';
+                    if (selectWidth !== 'auto' && selectWidth > 0) {
+                        wrapperStyle += ' width: ' + selectWidth + 'px;';
+                    }
+                    if (selectHeight !== 'auto' && selectHeight > 0) {
+                        wrapperStyle += ' min-height: ' + selectHeight + 'px;';
+                    }
+                    if (selectMinWidth) wrapperStyle += ' min-width: ' + selectMinWidth + ';';
+                    if (selectMaxWidth) wrapperStyle += ' max-width: ' + selectMaxWidth + ';';
+                    if (selectMinHeight) wrapperStyle += ' min-height: ' + selectMinHeight + ';';
+                    if (selectMaxHeight) wrapperStyle += ' max-height: ' + selectMaxHeight + ';';
+                    wrapper.style.cssText = wrapperStyle;
                     
                     // Masquer le select natif mais le garder fonctionnel
                     const selectStyle = element.style.cssText || '';
@@ -1332,7 +1367,21 @@
                         '';
                     
                     trigger.innerHTML = '<div style="display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;"><span class="bb-country-flag" style="flex-shrink: 0;">' + selectedFlag + '</span><span class="bb-country-name" style="flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + bbContents.utils.sanitize(selectedName) + '</span></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="flex-shrink: 0; transition: transform 0.2s;"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-                    trigger.style.cssText = 'display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: white; cursor: pointer; font-size: inherit; font-family: inherit; color: inherit; transition: border-color 0.2s; box-sizing: border-box;';
+                    let triggerStyle = 'display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: white; cursor: pointer; font-size: inherit; font-family: inherit; color: inherit; transition: border-color 0.2s; box-sizing: border-box;';
+                    // Utiliser les dimensions du select natif
+                    if (selectWidth !== 'auto' && selectWidth > 0) {
+                        triggerStyle += ' width: ' + selectWidth + 'px;';
+                    } else {
+                        triggerStyle += ' width: 100%;';
+                    }
+                    if (selectHeight !== 'auto' && selectHeight > 0) {
+                        triggerStyle += ' height: ' + selectHeight + 'px;';
+                    }
+                    if (selectMinWidth) triggerStyle += ' min-width: ' + selectMinWidth + ';';
+                    if (selectMaxWidth) triggerStyle += ' max-width: ' + selectMaxWidth + ';';
+                    if (selectMinHeight) triggerStyle += ' min-height: ' + selectMinHeight + ';';
+                    if (selectMaxHeight) triggerStyle += ' max-height: ' + selectMaxHeight + ';';
+                    trigger.style.cssText = triggerStyle;
                     
                     // Variable pour stocker le pays sélectionné (pour chaque instance)
                     let currentSelectedCountry = defaultCountry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bebranded/bb-contents",
-  "version": "1.0.125",
+  "version": "1.0.127",
   "description": "Contenus additionnels français pour Webflow",
   "main": "bb-contents.js",
   "scripts": {