ngx-xtroedge-cms 1.3.7 → 1.3.9

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; }
@@ -221,6 +223,8 @@ var CMS_STYLES = `
 .lcms-btn-cancel { background: transparent; color: rgba(255,255,255,0.5); border: 1px solid rgba(var(--lcms-primary-rgb, 0,200,83),0.25) !important; }
 .lcms-btn-cancel:hover { color: white; border-color: rgba(var(--lcms-primary-rgb, 0,200,83),0.5) !important; background: rgba(var(--lcms-primary-rgb, 0,200,83),0.08); }
 .lcms-btn-cancel:disabled { opacity: 0.3; cursor: not-allowed; }
+.lcms-btn-logout { background: rgba(244,67,54,0.12); color: rgba(244,67,54,0.85); border: 1px solid rgba(244,67,54,0.25) !important; margin-top: 4px; }
+.lcms-btn-logout:hover { background: rgba(244,67,54,0.2); color: #f44336; border-color: rgba(244,67,54,0.5) !important; }
 
 .lcms-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: lcmsSpin 0.6s linear infinite; }
 
@@ -304,7 +308,8 @@ var ICON = {
   publish: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/></svg>',
   image: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
   check: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>',
-  error: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
+  error: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+  logout: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'
 };
 var DB_NAME = "xtroedge_cms_history";
 var STORE_NAME = "history";
@@ -722,9 +727,17 @@ var XtroedgeCMS = class _XtroedgeCMS {
       e.stopPropagation();
       this.cancelEditing();
     });
+    const logoutBtn = document.createElement("button");
+    logoutBtn.className = "lcms-btn-logout";
+    logoutBtn.innerHTML = `${ICON.logout} Logout`;
+    logoutBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.logout();
+    });
     this.actionsEl.appendChild(this.saveBtn);
     this.actionsEl.appendChild(this.publishBtn);
     this.actionsEl.appendChild(this.cancelBtn);
+    this.actionsEl.appendChild(logoutBtn);
     this.editModeContent.appendChild(this.actionsEl);
     this.panelEl.appendChild(this.editModeContent);
     this.brandingEl = this.createElement("div", "lcms-branding");
@@ -738,16 +751,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 +799,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);
@@ -1264,6 +1283,16 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.applyPageImages();
     this.updateUI();
   }
+  logout() {
+    localStorage.removeItem("builder_token");
+    sessionStorage.removeItem("builder_edit_mode");
+    this.editMode = false;
+    this.isEditAllowed = false;
+    this.applyEditMode(false);
+    this.isOpen = false;
+    this.updateUI();
+    this.showToast("Logged out", "success");
+  }
   // ===============================================
   // API
   // ===============================================
@@ -1668,15 +1697,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