@placetopay/lightbox-sdk 2.0.4 → 2.1.0

package/dist/core/assemblers.d.ts

@@ -1,3 +1,3 @@
-import { ClientCallbacks, LightboxStyles } from '../types';
-export declare const mountLightbox: (url: string, callbacks: ClientCallbacks, styles: LightboxStyles, closeButtonEnabled: boolean) => void;
+import { MountLightboxOptions } from '../types';
+export declare const mountLightbox: ({ url, callbacks, styles, closeButtonEnabled, enforceStyles }: MountLightboxOptions) => void;
 export declare const unmountLightbox: (target: string) => void;

package/dist/core/assemblers.js

@@ -1,7 +1,7 @@
 import { Styles, ElementIds, LightboxEvents as LE } from '../constants';
 import { setStyle, unsetStyle } from '../helpers';
 let listener;
-export const mountLightbox = (url, callbacks, styles, closeButtonEnabled) => {
+export const mountLightbox = ({ url, callbacks, styles, closeButtonEnabled, enforceStyles }) => {
     const wrapper = document.createElement('div');
     wrapper.id = new URL(url).origin;
     wrapper.className = ElementIds.WRAPPER_ID;
@@ -21,15 +21,18 @@ export const mountLightbox = (url, callbacks, styles, closeButtonEnabled) => {
         });
         wrapper.appendChild(closeButton);
     }
-    mountListener(callbacks, styles, closeButton);
+    mountListener({ callbacks, styles, closeButton, enforceStyles });
 };
-const mountListener = (callbacks, styles, closeButton) => {
+const mountListener = ({ callbacks, styles, closeButton, enforceStyles }) => {
     listener = (event) => {
         var _a;
         if (event.data.type === LE.CLOSE)
             unmountLightbox(event.origin);
-        if (event.data.type === LE.UPDATE_STYLES)
-            updateStyles(Object.assign(Object.assign({}, event.data.payload), styles));
+        if (event.data.type === LE.UPDATE_STYLES) {
+            const newStyles = enforceStyles
+                ? Object.assign(Object.assign({}, event.data.payload), styles) : Object.assign(Object.assign({}, styles), event.data.payload);
+            updateStyles(newStyles);
+        }
         if (event.data.type === LE.HIDE_CLOSE_BUTTON)
             closeButton === null || closeButton === void 0 ? void 0 : closeButton.remove();
         (_a = callbacks[event.data.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.payload);

package/dist/core/index.js

@@ -23,9 +23,16 @@ export const createLightbox = (url, options) => {
             lightbox.callbacks[name] = callback;
         },
         open: () => {
+            var _a;
             if (lightbox.allowRedirects)
                 redirectBasedOnDriver(url);
-            mountLightbox(url, lightbox.callbacks, lightbox.styles, lightbox.closeButton);
+            mountLightbox({
+                url,
+                callbacks: lightbox.callbacks,
+                styles: lightbox.styles,
+                closeButtonEnabled: lightbox.closeButton,
+                enforceStyles: (_a = options === null || options === void 0 ? void 0 : options.enforceStyles) !== null && _a !== void 0 ? _a : false,
+            });
         },
     };
     if (options === null || options === void 0 ? void 0 : options.launch)

package/dist/types.d.ts

@@ -1,29 +1,41 @@
 export type ClientCallback = (payload?: unknown) => void;
-export type ClientCallbacks = {
-    [key: string]: ClientCallback | undefined;
-};
-export type LightboxStyles = {
-    backdropColor?: string;
-    backdropOpacity?: number;
-    height?: string | number;
-    width?: string | number;
-    radius?: number;
-};
+export type ClientCallbacks = Record<string, ClientCallback | undefined>;
+export type LightboxStyles = Partial<{
+    backdropColor: string;
+    backdropOpacity: number;
+    height: string | number;
+    width: string | number;
+    radius: number;
+}>;
 export type ApiStructure = {
     type: string;
     payload?: unknown;
     preventClose?: boolean;
 };
-export type InternalOptions = {
-    launch?: boolean;
+export type InternalOptions = Partial<{
+    launch: boolean;
+    enforceStyles: boolean;
+}>;
+export type ExposedOptions = Partial<{
+    allowRedirects: boolean;
+    callbacks: ClientCallbacks;
+    closeButton: boolean;
+    styles: LightboxStyles;
+}>;
+export type InitialOptions = ExposedOptions & InternalOptions;
+export type MountLightboxOptions = {
+    url: string;
+    callbacks: ClientCallbacks;
+    styles: LightboxStyles;
+    closeButtonEnabled: boolean;
+    enforceStyles: boolean;
 };
-export type ExposedOptions = {
-    allowRedirects?: boolean;
-    callbacks?: ClientCallbacks;
-    closeButton?: boolean;
-    styles?: LightboxStyles;
+export type MountListenerOptions = {
+    callbacks: ClientCallbacks;
+    styles: LightboxStyles;
+    closeButton: HTMLButtonElement;
+    enforceStyles: boolean;
 };
-export type InitialOptions = ExposedOptions & InternalOptions;
 export type LightboxInstance = Required<ExposedOptions> & {
     url: string;
     on: (name: string, callback: ClientCallback) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "2.0.4",
+  "version": "2.1.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",