ngx-xtroedge-cms 1.3.8 → 1.3.9

package/dist/index.mjs

@@ -223,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; }
 
@@ -306,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";
@@ -724,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");
@@ -1272,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
   // ===============================================