@placetopay/lightbox-sdk 2.3.0 → 2.4.0

package/dist/constants.d.ts

@@ -7,7 +7,8 @@ export declare enum ElementIds {
 export declare enum LightboxEvents {
     CLOSE = "close",
     UPDATE_STYLES = "updateStyles",
-    HIDE_CLOSE_BUTTON = "hideCloseButton"
+    HIDE_CLOSE_BUTTON = "hideCloseButton",
+    CLOSE_BY_USER = "closeByUser"
 }
 export declare enum Styles {
     BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",

package/dist/constants.js

@@ -10,6 +10,7 @@ export var LightboxEvents;
     LightboxEvents["CLOSE"] = "close";
     LightboxEvents["UPDATE_STYLES"] = "updateStyles";
     LightboxEvents["HIDE_CLOSE_BUTTON"] = "hideCloseButton";
+    LightboxEvents["CLOSE_BY_USER"] = "closeByUser";
 })(LightboxEvents || (LightboxEvents = {}));
 export var Styles;
 (function (Styles) {

package/dist/helpers.js

@@ -1,3 +1,4 @@
+import { LightboxEvents as LE } from './constants';
 export const postMessage = (type, payload, preventClose) => {
     const target = globalThis.opener || globalThis.parent;
     return target.postMessage({ type, preventClose, payload }, '*');
@@ -38,51 +39,51 @@ export const mountBackdrop = () => {
         return;
     backdropElement = document.createElement('div');
     backdropElement.className = 'placetopay-lightbox-backdrop-overlay';
-    backdropElement.style.cssText = `
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.7);
-        z-index: 9998;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    backdropElement.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.7);
+        z-index: 9998;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     `;
     const messageContainer = document.createElement('div');
     messageContainer.className = 'placetopay-lightbox-backdrop-message-container';
-    messageContainer.style.cssText = `
-        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-        border-radius: 16px;
-        padding: 40px;
-        max-width: 420px;
-        margin: 20px;
-        text-align: center;
-        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(20px);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+    messageContainer.style.cssText = `
+        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+        border-radius: 16px;
+        padding: 40px;
+        max-width: 420px;
+        margin: 20px;
+        text-align: center;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(20px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
     `;
     const title = document.createElement('h2');
     title.className = 'placetopay-lightbox-backdrop-title';
     title.textContent = getText('popupTitle');
-    title.style.cssText = `
-        margin: 0 0 20px 0;
-        font-size: 22px;
-        font-weight: 700;
-        color: #ffffff;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    title.style.cssText = `
+        margin: 0 0 20px 0;
+        font-size: 22px;
+        font-weight: 700;
+        color: #ffffff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     `;
     const message = document.createElement('p');
     message.className = 'placetopay-lightbox-backdrop-message';
     message.textContent = getText('popupMessage');
-    message.style.cssText = `
-        margin: 0;
-        font-size: 15px;
-        line-height: 1.6;
-        color: #d1d5db;
-        opacity: 0.9;
+    message.style.cssText = `
+        margin: 0;
+        font-size: 15px;
+        line-height: 1.6;
+        color: #d1d5db;
+        opacity: 0.9;
     `;
     messageContainer.appendChild(title);
     messageContainer.appendChild(message);
@@ -110,6 +111,7 @@ export const unmountBackdrop = () => {
     document.body.style.overflow = '';
     document.body.classList.remove('placetopay-lightbox-open');
     openedWindow = null;
+    postMessage(LE.CLOSE_BY_USER);
 };
 export const openWithBackup = (url, backupTarget = 'self', lightboxId) => {
     switch (backupTarget) {

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@placetopay/lightbox-sdk",
-  "version": "2.3.0",
-  "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "/dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/placetopay-org/lightbox-sdk.git"
-  },
-  "keywords": [
-    "lightbox",
-    "sdk",
-    "placetopay",
-    "javascript",
-    "typescript"
-  ],
-  "author": "JuanZea",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/placetopay-org/lightbox-sdk/issues"
-  },
-  "homepage": "https://placetopay-org.github.io/lightbox-sdk",
-  "devDependencies": {
-    "typescript": "^5.1.6"
-  }
-}
+{
+  "name": "@placetopay/lightbox-sdk",
+  "version": "2.4.0",
+  "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/placetopay-org/lightbox-sdk.git"
+  },
+  "keywords": [
+    "lightbox",
+    "sdk",
+    "placetopay",
+    "javascript",
+    "typescript"
+  ],
+  "author": "JuanZea",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/placetopay-org/lightbox-sdk/issues"
+  },
+  "homepage": "https://placetopay-org.github.io/lightbox-sdk",
+  "devDependencies": {
+    "typescript": "^5.1.6"
+  }
+}