ngx-xtroedge-cms 1.3.7 → 1.3.8

package/dist/index.mjs

@@ -131,10 +131,12 @@ var CMS_STYLES = `
 .lcms-toggle input:checked + .lcms-toggle-slider::after { transform: translateX(16px); background: white; }
 .lcms-toggle-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; transition: color 0.25s; }
 .lcms-toggle input:checked ~ .lcms-toggle-label { color: rgba(var(--lcms-primary-rgb, 0,200,83),0.75); }
-.lcms-lang-switch { display: flex; border: 1px solid rgba(var(--lcms-primary-rgb, 0,200,83),0.4); border-radius: 6px; overflow: hidden; margin-left: auto; }
-.lcms-lang-btn { background: transparent; border: none; color: rgba(255,255,255,0.45); padding: 3px 12px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
-.lcms-lang-btn.active { background: var(--lcms-primary, #00C853); color: white; }
-.lcms-lang-btn:hover:not(.active) { color: white; background: rgba(var(--lcms-primary-rgb, 0,200,83),0.2); }
+.lcms-lang-switch { margin-left: auto; position: relative; }
+.lcms-lang-select { background: rgba(var(--lcms-primary-rgb, 0,200,83),0.15); border: 1px solid rgba(var(--lcms-primary-rgb, 0,200,83),0.4); border-radius: 6px; color: white; padding: 3px 24px 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; outline: none; transition: all 0.2s; }
+.lcms-lang-select:hover { background: rgba(var(--lcms-primary-rgb, 0,200,83),0.3); }
+.lcms-lang-select:focus { border-color: var(--lcms-primary, #00C853); }
+.lcms-lang-select option { background: #1a1a2e; color: white; }
+.lcms-lang-arrow { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(255,255,255,0.6); font-size: 10px; }
 .lcms-close-btn { background: transparent; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 2px; display: flex; transition: color 0.2s; }
 .lcms-close-btn:hover { color: white; }
 .lcms-changes-info { font-size: 12px; color: rgba(var(--lcms-primary-rgb, 0,200,83),0.75); margin-bottom: 10px; padding-left: 2px; }
@@ -738,16 +740,24 @@ var XtroedgeCMS = class _XtroedgeCMS {
   buildLangButtons() {
     if (!this.langSwitchEl) return;
     this.langSwitchEl.innerHTML = "";
+    const select = document.createElement("select");
+    select.className = "lcms-lang-select";
     for (const lang of this.languages) {
-      const btn = document.createElement("button");
-      btn.className = "lcms-lang-btn" + (this.currentLang === lang ? " active" : "");
-      btn.textContent = lang.toUpperCase();
-      btn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.switchLang(lang);
-      });
-      this.langSwitchEl.appendChild(btn);
+      const opt = document.createElement("option");
+      opt.value = lang;
+      opt.textContent = lang.toUpperCase();
+      if (lang === this.currentLang) opt.selected = true;
+      select.appendChild(opt);
     }
+    select.addEventListener("change", (e) => {
+      e.stopPropagation();
+      this.switchLang(e.target.value);
+    });
+    this.langSwitchEl.appendChild(select);
+    const arrow = document.createElement("span");
+    arrow.className = "lcms-lang-arrow";
+    arrow.textContent = "\u25BC";
+    this.langSwitchEl.appendChild(arrow);
   }
   // ===============================================
   // UI UPDATE
@@ -778,10 +788,8 @@ var XtroedgeCMS = class _XtroedgeCMS {
     if (this.editToggle) this.editToggle.checked = this.editMode;
     if (this.langSwitchEl) {
       this.langSwitchEl.classList.toggle("lcms-hidden", !this.editMode || this.languages.length <= 1);
-      const btns = this.langSwitchEl.querySelectorAll(".lcms-lang-btn");
-      btns.forEach((btn) => {
-        btn.classList.toggle("active", btn.textContent === this.currentLang.toUpperCase());
-      });
+      const sel = this.langSwitchEl.querySelector(".lcms-lang-select");
+      if (sel) sel.value = this.currentLang;
     }
     if (this.editModeContent) {
       this.editModeContent.classList.toggle("lcms-hidden", !this.editMode);
@@ -1668,15 +1676,12 @@ var XtroedgeCMS = class _XtroedgeCMS {
   }
   switchLang(lang) {
     this.currentLang = lang;
-    const html = document.documentElement;
-    html.setAttribute("lang", lang);
-    html.setAttribute("dir", lang === "ar" ? "rtl" : "ltr");
     localStorage.setItem("selectedLanguage", lang);
-    this.updateElementTexts();
-    this.buildLangButtons();
-    this.updateUI();
-    window.dispatchEvent(new CustomEvent("cms:langChanged", { detail: { lang } }));
+    document.documentElement.setAttribute("lang", lang);
+    document.documentElement.setAttribute("dir", lang === "ar" ? "rtl" : "ltr");
     this.config.onLangChanged?.(lang);
+    window.dispatchEvent(new CustomEvent("cms:langChanged", { detail: { lang } }));
+    window.location.reload();
   }
   // ===============================================
   // FAB DRAG