@placetopay/lightbox-sdk 2.1.1 → 2.1.2

package/dist/constants.d.ts

@@ -1,17 +1,20 @@
-export declare enum ElementIds {
-    WRAPPER_ID = "placetopay_lightbox_wrapper",
-    IFRAME_ID = "placetopay_lightbox",
-    CLOSE_BUTTON_ID = "placetopay_close_button",
-    STYLES_ID = "placetopay-lightbox"
-}
-export declare enum LightboxEvents {
-    CLOSE = "close",
-    UPDATE_STYLES = "updateStyles",
-    HIDE_CLOSE_BUTTON = "hideCloseButton"
-}
-export declare enum Styles {
-    BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",
-    RADIUS = "--placetopay-lightbox-border-radius",
-    MAX_HEIGHT = "--placetopay-lightbox-max-height",
-    MAX_WIDTH = "--placetopay-lightbox-max-width"
-}
+export declare enum ElementIds {
+    WRAPPER_ID = "placetopay_lightbox_wrapper",
+    IFRAME_ID = "placetopay_lightbox",
+    CLOSE_BUTTON_ID = "placetopay_close_button",
+    STYLES_ID = "placetopay-lightbox"
+}
+export declare enum LightboxEvents {
+    CLOSE = "close",
+    UPDATE_STYLES = "updateStyles",
+    HIDE_CLOSE_BUTTON = "hideCloseButton"
+}
+export declare enum Styles {
+    BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",
+    RADIUS = "--placetopay-lightbox-border-radius",
+    MAX_HEIGHT = "--placetopay-lightbox-max-height",
+    MAX_WIDTH = "--placetopay-lightbox-max-width",
+    POSITION = "--placetopay-lightbox-position",
+    WRAPPER_WIDTH = "--placetopay-lightbox-wrapper-width",
+    WRAPPER_HEIGHT = "--placetopay-lightbox-wrapper-height"
+}

package/dist/constants.js

@@ -1,20 +1,23 @@
-export var ElementIds;
-(function (ElementIds) {
-    ElementIds["WRAPPER_ID"] = "placetopay_lightbox_wrapper";
-    ElementIds["IFRAME_ID"] = "placetopay_lightbox";
-    ElementIds["CLOSE_BUTTON_ID"] = "placetopay_close_button";
-    ElementIds["STYLES_ID"] = "placetopay-lightbox";
-})(ElementIds || (ElementIds = {}));
-export var LightboxEvents;
-(function (LightboxEvents) {
-    LightboxEvents["CLOSE"] = "close";
-    LightboxEvents["UPDATE_STYLES"] = "updateStyles";
-    LightboxEvents["HIDE_CLOSE_BUTTON"] = "hideCloseButton";
-})(LightboxEvents || (LightboxEvents = {}));
-export var Styles;
-(function (Styles) {
-    Styles["BACKDROP_COLOR"] = "--placetopay-lightbox-backdrop-color";
-    Styles["RADIUS"] = "--placetopay-lightbox-border-radius";
-    Styles["MAX_HEIGHT"] = "--placetopay-lightbox-max-height";
-    Styles["MAX_WIDTH"] = "--placetopay-lightbox-max-width";
-})(Styles || (Styles = {}));
+export var ElementIds;
+(function (ElementIds) {
+    ElementIds["WRAPPER_ID"] = "placetopay_lightbox_wrapper";
+    ElementIds["IFRAME_ID"] = "placetopay_lightbox";
+    ElementIds["CLOSE_BUTTON_ID"] = "placetopay_close_button";
+    ElementIds["STYLES_ID"] = "placetopay-lightbox";
+})(ElementIds || (ElementIds = {}));
+export var LightboxEvents;
+(function (LightboxEvents) {
+    LightboxEvents["CLOSE"] = "close";
+    LightboxEvents["UPDATE_STYLES"] = "updateStyles";
+    LightboxEvents["HIDE_CLOSE_BUTTON"] = "hideCloseButton";
+})(LightboxEvents || (LightboxEvents = {}));
+export var Styles;
+(function (Styles) {
+    Styles["BACKDROP_COLOR"] = "--placetopay-lightbox-backdrop-color";
+    Styles["RADIUS"] = "--placetopay-lightbox-border-radius";
+    Styles["MAX_HEIGHT"] = "--placetopay-lightbox-max-height";
+    Styles["MAX_WIDTH"] = "--placetopay-lightbox-max-width";
+    Styles["POSITION"] = "--placetopay-lightbox-position";
+    Styles["WRAPPER_WIDTH"] = "--placetopay-lightbox-wrapper-width";
+    Styles["WRAPPER_HEIGHT"] = "--placetopay-lightbox-wrapper-height";
+})(Styles || (Styles = {}));

package/dist/core/assemblers.d.ts

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

package/dist/core/assemblers.js

@@ -1,78 +1,87 @@
-import { Styles, ElementIds, LightboxEvents as LE } from '../constants';
-import { setStyle, unsetStyle } from '../helpers';
-let listener;
-export const mountLightbox = ({ url, callbacks, styles, closeButtonEnabled, enforceStyles }) => {
-    const wrapper = document.createElement('div');
-    wrapper.id = new URL(url).origin;
-    wrapper.className = ElementIds.WRAPPER_ID;
-    const iframe = document.createElement('iframe');
-    iframe.src = url;
-    iframe.id = ElementIds.IFRAME_ID;
-    updateStyles(styles);
-    document.body.appendChild(wrapper);
-    wrapper.appendChild(iframe);
-    let closeButton;
-    if (closeButtonEnabled) {
-        closeButton = document.createElement('button');
-        closeButton.id = ElementIds.CLOSE_BUTTON_ID;
-        closeButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#4b5563" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>`;
-        closeButton.addEventListener('click', () => {
-            unmountLightbox(new URL(url).origin);
-        });
-        wrapper.appendChild(closeButton);
-    }
-    mountListener({ callbacks, styles, closeButton, enforceStyles });
-};
-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) {
-            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);
-    };
-    globalThis.addEventListener('message', listener);
-};
-export const unmountLightbox = (target) => {
-    const element = document.getElementById(target);
-    if (element) {
-        element.remove();
-        clearStyles();
-        globalThis.removeEventListener('message', listener);
-    }
-    else
-        throw new Error(`Frame from "${target}" not found`);
-};
-const clearStyles = () => {
-    unsetStyle(Styles.BACKDROP_COLOR);
-    unsetStyle(Styles.RADIUS);
-    unsetStyle(Styles.MAX_HEIGHT);
-    unsetStyle(Styles.MAX_WIDTH);
-};
-const updateStyles = (styles) => {
-    var _a, _b, _c, _d, _e;
-    setStyle(Styles.BACKDROP_COLOR, buildBackdrop((_a = styles.backdropColor) !== null && _a !== void 0 ? _a : '#000000', (_b = styles.backdropOpacity) !== null && _b !== void 0 ? _b : 0.7));
-    setStyle(Styles.RADIUS, `${(_c = styles.radius) !== null && _c !== void 0 ? _c : 0}px`);
-    setStyle(Styles.MAX_HEIGHT, buildDimension('height', (_d = styles.height) !== null && _d !== void 0 ? _d : 640));
-    setStyle(Styles.MAX_WIDTH, buildDimension('width', (_e = styles.width) !== null && _e !== void 0 ? _e : 512));
-};
-const buildBackdrop = (color, opacity) => {
-    var _a;
-    const backdrop = (_a = color === null || color === void 0 ? void 0 : color.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b).substring(1).match(/.{2}/g)) === null || _a === void 0 ? void 0 : _a.map((x) => parseInt(x, 16));
-    backdrop.push(opacity);
-    return `rgba(${backdrop.join(', ')})`;
-};
-const buildDimension = (type, value) => {
-    const result = String(value);
-    if (result.match(/^\d+%$/) || result.match(/^\d+px$/))
-        return result;
-    if (result.match(/^\d+$/))
-        return `${result}px`;
-    console.warn(`Invalid ${type}. Must be a number, a number followed by "px", or a number followed by "%".`);
-};
+import { Styles, ElementIds, LightboxEvents as LE } from '../constants';
+import { setStyle, unsetStyle } from '../helpers';
+let listener;
+export const mountLightbox = ({ id, url, element, callbacks, styles, closeButtonEnabled, enforceStyles, }) => {
+    const wrapper = document.createElement('div');
+    wrapper.id = id;
+    wrapper.className = ElementIds.WRAPPER_ID;
+    if (element !== document.body) {
+        wrapper.style.setProperty(Styles.POSITION, 'absolute');
+        wrapper.style.setProperty(Styles.WRAPPER_HEIGHT, '100%');
+        wrapper.style.setProperty(Styles.WRAPPER_WIDTH, '100%');
+    }
+    const iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.id = ElementIds.IFRAME_ID;
+    updateStyles(styles);
+    console.log({ isBody: element === document.body });
+    element.appendChild(wrapper);
+    wrapper.appendChild(iframe);
+    let closeButton;
+    if (closeButtonEnabled) {
+        closeButton = document.createElement('button');
+        closeButton.id = ElementIds.CLOSE_BUTTON_ID;
+        closeButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#4b5563" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>`;
+        closeButton.addEventListener('click', () => {
+            unmountLightbox(id);
+        });
+        wrapper.appendChild(closeButton);
+    }
+    mountListener({ id, callbacks, styles, closeButton, enforceStyles });
+};
+const mountListener = ({ id, callbacks, styles, closeButton, enforceStyles }) => {
+    listener = (event) => {
+        var _a;
+        if (event.data.type === LE.CLOSE)
+            unmountLightbox(id);
+        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);
+    };
+    globalThis.addEventListener('message', listener);
+};
+export const unmountLightbox = (target) => {
+    const element = document.getElementById(target);
+    if (element) {
+        element.remove();
+        clearStyles();
+        globalThis.removeEventListener('message', listener);
+    }
+    else
+        throw new Error(`Frame from "${target}" not found`);
+};
+const clearStyles = () => {
+    unsetStyle(Styles.BACKDROP_COLOR);
+    unsetStyle(Styles.RADIUS);
+    unsetStyle(Styles.MAX_HEIGHT);
+    unsetStyle(Styles.MAX_WIDTH);
+};
+const updateStyles = (styles) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    setStyle(Styles.BACKDROP_COLOR, buildBackdrop((_a = styles.backdropColor) !== null && _a !== void 0 ? _a : '#000000', (_b = styles.backdropOpacity) !== null && _b !== void 0 ? _b : 0.7));
+    setStyle(Styles.RADIUS, `${(_c = styles.radius) !== null && _c !== void 0 ? _c : 0}px`);
+    setStyle(Styles.MAX_HEIGHT, buildDimension('height', (_d = styles.height) !== null && _d !== void 0 ? _d : 640));
+    setStyle(Styles.MAX_WIDTH, buildDimension('width', (_e = styles.width) !== null && _e !== void 0 ? _e : 512));
+    setStyle(Styles.POSITION, (_f = styles.position) !== null && _f !== void 0 ? _f : 'fixed');
+    setStyle(Styles.WRAPPER_WIDTH, buildDimension('width', (_g = styles.wrapperWidth) !== null && _g !== void 0 ? _g : '100vw'));
+    setStyle(Styles.WRAPPER_HEIGHT, buildDimension('height', (_h = styles.wrapperHeight) !== null && _h !== void 0 ? _h : '100vh'));
+};
+const buildBackdrop = (color, opacity) => {
+    var _a;
+    const backdrop = (_a = color === null || color === void 0 ? void 0 : color.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b).substring(1).match(/.{2}/g)) === null || _a === void 0 ? void 0 : _a.map((x) => parseInt(x, 16));
+    backdrop.push(opacity);
+    return `rgba(${backdrop.join(', ')})`;
+};
+const buildDimension = (type, value) => {
+    const result = String(value);
+    if (result.match(/^\d+(vh|vw|px|%)$/))
+        return result;
+    if (result.match(/^\d+$/))
+        return `${result}px`;
+    console.warn(`Invalid ${type}. Must be a number, a number followed by "px", or a number followed by "%".`);
+};

package/dist/core/index.d.ts

@@ -1,7 +1,7 @@
-import { InitialOptions, LightboxInstance, ApiStructure, LightboxStyles } from '../types';
-export declare const isInside: () => boolean;
-export declare const updateStyles: (styles: LightboxStyles) => void;
-export declare const hideCloseButton: () => void;
-export declare const emitClose: (payload?: unknown, preventClose?: boolean) => void;
-export declare const emit: ({ type, payload, preventClose }: ApiStructure) => void;
-export declare const createLightbox: (url: string, options?: InitialOptions) => LightboxInstance;
+import { InitialOptions, LightboxInstance, ApiStructure, LightboxStyles } from '../types';
+export declare const isInside: () => boolean;
+export declare const updateStyles: (styles: LightboxStyles) => void;
+export declare const hideCloseButton: () => void;
+export declare const emitClose: (payload?: unknown, preventClose?: boolean) => void;
+export declare const emit: ({ type, payload, preventClose }: ApiStructure) => void;
+export declare const createLightbox: (url: string, options?: InitialOptions) => LightboxInstance;

package/dist/core/index.js

@@ -1,41 +1,45 @@
-import { LightboxEvents as LE } from '../constants';
-import { postMessage, redirectBasedOnDriver } from '../helpers';
-import { mountLightbox, unmountLightbox } from './assemblers';
-export const isInside = () => globalThis.location !== globalThis.parent.location;
-export const updateStyles = (styles) => postMessage(LE.UPDATE_STYLES, styles);
-export const hideCloseButton = () => postMessage(LE.HIDE_CLOSE_BUTTON);
-export const emitClose = (payload, preventClose) => {
-    postMessage(LE.CLOSE, payload, preventClose);
-};
-export const emit = ({ type, payload, preventClose }) => postMessage(type, payload, preventClose);
-export const createLightbox = (url, options) => {
-    var _a, _b, _c, _d;
-    const lightbox = {
-        allowRedirects: (_a = options === null || options === void 0 ? void 0 : options.allowRedirects) !== null && _a !== void 0 ? _a : true,
-        callbacks: (_b = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _b !== void 0 ? _b : {},
-        closeButton: (_c = options === null || options === void 0 ? void 0 : options.closeButton) !== null && _c !== void 0 ? _c : true,
-        styles: (_d = options === null || options === void 0 ? void 0 : options.styles) !== null && _d !== void 0 ? _d : {},
-        url: url,
-        close: () => unmountLightbox(url),
-        updateStyles,
-        hideCloseButton,
-        on: (name, callback) => {
-            lightbox.callbacks[name] = callback;
-        },
-        open: () => {
-            var _a;
-            if (lightbox.allowRedirects)
-                redirectBasedOnDriver(url);
-            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)
-        lightbox.open();
-    return lightbox;
-};
+import { LightboxEvents as LE } from '../constants';
+import { postMessage, redirectBasedOnDriver } from '../helpers';
+import { mountLightbox, unmountLightbox } from './assemblers';
+export const isInside = () => globalThis.location !== globalThis.parent.location;
+export const updateStyles = (styles) => postMessage(LE.UPDATE_STYLES, styles);
+export const hideCloseButton = () => postMessage(LE.HIDE_CLOSE_BUTTON);
+export const emitClose = (payload, preventClose) => {
+    postMessage(LE.CLOSE, payload, preventClose);
+};
+export const emit = ({ type, payload, preventClose }) => postMessage(type, payload, preventClose);
+export const createLightbox = (url, options) => {
+    var _a, _b, _c, _d, _e, _f;
+    const lightbox = {
+        id: (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : new URL(url).origin,
+        element: (_b = options === null || options === void 0 ? void 0 : options.element) !== null && _b !== void 0 ? _b : document.body,
+        allowRedirects: (_c = options === null || options === void 0 ? void 0 : options.allowRedirects) !== null && _c !== void 0 ? _c : true,
+        callbacks: (_d = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _d !== void 0 ? _d : {},
+        closeButton: (_e = options === null || options === void 0 ? void 0 : options.closeButton) !== null && _e !== void 0 ? _e : true,
+        styles: (_f = options === null || options === void 0 ? void 0 : options.styles) !== null && _f !== void 0 ? _f : {},
+        url: url,
+        close: () => unmountLightbox(url),
+        updateStyles,
+        hideCloseButton,
+        on: (name, callback) => {
+            lightbox.callbacks[name] = callback;
+        },
+        open: () => {
+            var _a;
+            if (lightbox.allowRedirects)
+                redirectBasedOnDriver(url);
+            mountLightbox({
+                id: lightbox.id,
+                url,
+                element: lightbox.element,
+                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)
+        lightbox.open();
+    return lightbox;
+};

package/dist/helpers.d.ts

@@ -1,4 +1,4 @@
-export declare const postMessage: (type: string, payload?: unknown, preventClose?: boolean) => void;
-export declare const setStyle: (name: string, value: string) => void;
-export declare const unsetStyle: (name: string) => void;
-export declare const redirectBasedOnDriver: (url: string) => void;
+export declare const postMessage: (type: string, payload?: unknown, preventClose?: boolean) => void;
+export declare const setStyle: (name: string, value: string) => void;
+export declare const unsetStyle: (name: string) => void;
+export declare const redirectBasedOnDriver: (url: string) => void;

package/dist/helpers.js

@@ -1,19 +1,19 @@
-export const postMessage = (type, payload, preventClose) => {
-    return globalThis.parent.postMessage({ type, preventClose, payload }, '*');
-};
-export const setStyle = (name, value) => {
-    document.documentElement.style.setProperty(name, value);
-};
-export const unsetStyle = (name) => {
-    document.documentElement.style.removeProperty(name);
-};
-export const redirectBasedOnDriver = (url) => {
-    if (navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
-        /^((?!chrome|android).)*safari/i.test(navigator.userAgent) // regex from https://stackoverflow.com/a/23522755
-    ) {
-        if (window.self !== window.top) {
-            window.parent.postMessage({ type: "placetopay-lightbox:redirect", url }, "*"); // dont change this, it would be a broken change
-        }
-        location.href = url;
-    }
-};
+export const postMessage = (type, payload, preventClose) => {
+    return globalThis.parent.postMessage({ type, preventClose, payload }, '*');
+};
+export const setStyle = (name, value) => {
+    document.documentElement.style.setProperty(name, value);
+};
+export const unsetStyle = (name) => {
+    document.documentElement.style.removeProperty(name);
+};
+export const redirectBasedOnDriver = (url) => {
+    if (navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
+        /^((?!chrome|android).)*safari/i.test(navigator.userAgent) // regex from https://stackoverflow.com/a/23522755
+    ) {
+        if (window.self !== window.top) {
+            window.parent.postMessage({ type: "placetopay-lightbox:redirect", url }, "*"); // dont change this, it would be a broken change
+        }
+        location.href = url;
+    }
+};

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from './core';
-export * from './types';
+export * from './core';
+export * from './types';

package/dist/index.js

@@ -1,2 +1,2 @@
-export * from './core';
-export * from './types';
+export * from './core';
+export * from './types';

package/dist/styles.css

@@ -1,13 +1,13 @@
 .placetopay_lightbox_wrapper {
     background: var(--placetopay-lightbox-backdrop-color);
-    position: fixed;
+    position: var(--placetopay-lightbox-position);
     display: flex;
     justify-content: center;
     align-items: center;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    width: var(--placetopay-lightbox-wrapper-width);
+    height: var(--placetopay-lightbox-wrapper-height);
     z-index: 999;
     user-select: none;
 }

package/dist/types.d.ts

@@ -1,46 +1,54 @@
-export declare type ClientCallback = (payload?: unknown) => void;
-export declare type ClientCallbacks = Record<string, ClientCallback | undefined>;
-export declare type LightboxStyles = Partial<{
-    backdropColor: string;
-    backdropOpacity: number;
-    height: string | number;
-    width: string | number;
-    radius: number;
-}>;
-export declare type ApiStructure = {
-    type: string;
-    payload?: unknown;
-    preventClose?: boolean;
-};
-export declare type InternalOptions = Partial<{
-    launch: boolean;
-    enforceStyles: boolean;
-}>;
-export declare type ExposedOptions = Partial<{
-    allowRedirects: boolean;
-    callbacks: ClientCallbacks;
-    closeButton: boolean;
-    styles: LightboxStyles;
-}>;
-export declare type InitialOptions = ExposedOptions & InternalOptions;
-export declare type MountLightboxOptions = {
-    url: string;
-    callbacks: ClientCallbacks;
-    styles: LightboxStyles;
-    closeButtonEnabled: boolean;
-    enforceStyles: boolean;
-};
-export declare type MountListenerOptions = {
-    callbacks: ClientCallbacks;
-    styles: LightboxStyles;
-    closeButton: HTMLButtonElement;
-    enforceStyles: boolean;
-};
-export declare type LightboxInstance = Required<ExposedOptions> & {
-    url: string;
-    on: (name: string, callback: ClientCallback) => void;
-    open: () => void;
-    close: (payload?: unknown) => void;
-    updateStyles: (styles: LightboxStyles) => void;
-    hideCloseButton: () => void;
-};
+export type ClientCallback = (payload?: unknown) => void;
+export type ClientCallbacks = Record<string, ClientCallback | undefined>;
+export type LightboxStyles = Partial<{
+    backdropColor: string;
+    backdropOpacity: number;
+    height: string | number;
+    width: string | number;
+    radius: number;
+    position: 'absolute' | 'fixed';
+    wrapperWidth: string | number;
+    wrapperHeight: string | number;
+}>;
+export type ApiStructure = {
+    type: string;
+    payload?: unknown;
+    preventClose?: boolean;
+};
+export type InternalOptions = Partial<{
+    launch: boolean;
+    enforceStyles: boolean;
+}>;
+export type ExposedOptions = Partial<{
+    id: string;
+    element: HTMLElement;
+    allowRedirects: boolean;
+    callbacks: ClientCallbacks;
+    closeButton: boolean;
+    styles: LightboxStyles;
+}>;
+export type InitialOptions = ExposedOptions & InternalOptions;
+export type MountLightboxOptions = {
+    id: string;
+    url: string;
+    element: HTMLElement;
+    callbacks: ClientCallbacks;
+    styles: LightboxStyles;
+    closeButtonEnabled: boolean;
+    enforceStyles: boolean;
+};
+export type MountListenerOptions = {
+    id: string;
+    callbacks: ClientCallbacks;
+    styles: LightboxStyles;
+    closeButton: HTMLButtonElement;
+    enforceStyles: boolean;
+};
+export type LightboxInstance = Required<ExposedOptions> & {
+    url: string;
+    on: (name: string, callback: ClientCallback) => void;
+    open: () => void;
+    close: (payload?: unknown) => void;
+    updateStyles: (styles: LightboxStyles) => void;
+    hideCloseButton: () => void;
+};

package/dist/types.js

@@ -1 +1 @@
-export {};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",