@descope/sdk-mixins 0.1.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,1066 @@
+'use strict';
+
+var tslib = require('tslib');
+var sdkHelpers = require('@descope/sdk-helpers');
+var sdkComponentDrivers = require('@descope/sdk-component-drivers');
+var toolkit = require('@reduxjs/toolkit');
+
+const logLevels = ['error', 'warn', 'info', 'debug'];
+const loggerMixin = sdkHelpers.createSingletonMixin((superclass) => { var _LoggerMixinClass_instances, _LoggerMixinClass_logger, _LoggerMixinClass_wrapLogger, _a; return _a = class LoggerMixinClass extends superclass {
+        constructor() {
+            super(...arguments);
+            _LoggerMixinClass_instances.add(this);
+            _LoggerMixinClass_logger.set(this, tslib.__classPrivateFieldGet(this, _LoggerMixinClass_instances, "m", _LoggerMixinClass_wrapLogger).call(this, console));
+        }
+        set logger(logger) {
+            tslib.__classPrivateFieldSet(this, _LoggerMixinClass_logger, tslib.__classPrivateFieldGet(this, _LoggerMixinClass_instances, "m", _LoggerMixinClass_wrapLogger).call(this, logger), "f");
+        }
+        get logger() {
+            return tslib.__classPrivateFieldGet(this, _LoggerMixinClass_logger, "f");
+        }
+        // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+        onLogEvent(logLevel, data) { }
+    },
+    _LoggerMixinClass_logger = new WeakMap(),
+    _LoggerMixinClass_instances = new WeakSet(),
+    _LoggerMixinClass_wrapLogger = function _LoggerMixinClass_wrapLogger(logger) {
+        return logLevels.reduce((acc, logLevel) => {
+            acc[logLevel] = (...args) => {
+                var _a;
+                this.onLogEvent(logLevel, args);
+                (_a = logger[logLevel]) === null || _a === void 0 ? void 0 : _a.call(logger, ...args);
+            };
+            return acc;
+        }, {});
+    },
+    _a; });
+
+const IS_LOCAL_STORAGE = typeof localStorage !== 'undefined';
+
+const BASE_CONTENT_URL_KEY = 'base.content.url';
+const BASE_CONTENT_URL = (IS_LOCAL_STORAGE && localStorage.getItem(BASE_CONTENT_URL_KEY)) ||
+    'https://static.descope.com/pages';
+const ASSETS_FOLDER = 'v2-beta';
+
+const missingAttrValidator = (attrName, value) => !value && `${attrName} cannot be empty`;
+
+const initLifecycleMixin = sdkHelpers.createSingletonMixin((superclass) => { var _InitLifecycleMixinClass_isInit, _a; return _a = class InitLifecycleMixinClass extends superclass {
+        constructor() {
+            super(...arguments);
+            _InitLifecycleMixinClass_isInit.set(this, true);
+        }
+        connectedCallback() {
+            var _a, _b;
+            (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+            if ((_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.isConnected) {
+                // the init function is running once, on the first time the component is connected
+                if (tslib.__classPrivateFieldGet(this, _InitLifecycleMixinClass_isInit, "f")) {
+                    tslib.__classPrivateFieldSet(this, _InitLifecycleMixinClass_isInit, false, "f");
+                    this.init();
+                }
+            }
+        }
+        // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-empty-function
+        async init() { }
+    },
+    _InitLifecycleMixinClass_isInit = new WeakMap(),
+    _a; });
+
+const attributesObserver = (ele, callback) => {
+    // sync all attrs on init
+    Array.from(ele.attributes).forEach((attr) => callback(attr.name));
+    const observer = new MutationObserver((mutationsList) => {
+        mutationsList.forEach((mutation) => {
+            if (mutation.type === 'attributes') {
+                callback(mutation.attributeName);
+            }
+        });
+    });
+    observer.observe(ele, { attributes: true });
+};
+
+const observeAttributesMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    var _ObserveAttributesMixinClass_observeMappings, _a;
+    const BaseClass = sdkHelpers.compose(loggerMixin, initLifecycleMixin)(superclass);
+    return _a = class ObserveAttributesMixinClass extends BaseClass {
+            constructor() {
+                super(...arguments);
+                _ObserveAttributesMixinClass_observeMappings.set(this, {});
+            }
+            async init() {
+                var _a;
+                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                attributesObserver(this, (attrName) => {
+                    var _a;
+                    (_a = tslib.__classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName]) === null || _a === void 0 ? void 0 : _a.forEach((cb) => {
+                        cb(attrName, this.getAttribute(attrName));
+                    });
+                });
+            }
+            observeAttribute(attrName, onAttrChange) {
+                if (!tslib.__classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName]) {
+                    tslib.__classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName] = [];
+                }
+                const idx = tslib.__classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName].push(onAttrChange);
+                return () => tslib.__classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName].splice(idx, 1);
+            }
+            observeAttributes(attrs, cb) {
+                const unobserveList = attrs.reduce((acc, attrName) => {
+                    acc.push(this.observeAttribute(attrName, cb));
+                    return acc;
+                }, []);
+                return () => unobserveList.forEach((unobserve) => unobserve());
+            }
+        },
+        _ObserveAttributesMixinClass_observeMappings = new WeakMap(),
+        _a;
+});
+
+const createValidateAttributesMixin = (mappings) => (superclass) => {
+    var _ValidateAttributesMixinClass_instances, _ValidateAttributesMixinClass_handleError, _a;
+    const BaseClass = sdkHelpers.compose(loggerMixin, initLifecycleMixin, observeAttributesMixin)(superclass);
+    const mappingsNames = Object.keys(mappings);
+    return _a = class ValidateAttributesMixinClass extends BaseClass {
+            constructor(...args) {
+                super(...args);
+                _ValidateAttributesMixinClass_instances.add(this);
+                this.observeAttributes(mappingsNames, tslib.__classPrivateFieldGet(this, _ValidateAttributesMixinClass_instances, "m", _ValidateAttributesMixinClass_handleError).bind(this));
+            }
+            async init() {
+                var _a;
+                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                // check attributes initial values
+                mappingsNames.forEach((attr) => tslib.__classPrivateFieldGet(this, _ValidateAttributesMixinClass_instances, "m", _ValidateAttributesMixinClass_handleError).call(this, attr, this.getAttribute(attr)));
+            }
+        },
+        _ValidateAttributesMixinClass_instances = new WeakSet(),
+        _ValidateAttributesMixinClass_handleError = function _ValidateAttributesMixinClass_handleError(attrName, newValue) {
+            const onError = mappings[attrName];
+            const error = typeof onError === 'function' ? onError(attrName, newValue) : onError;
+            if (error) {
+                this.logger.error(error);
+            }
+        },
+        _a;
+};
+createValidateAttributesMixin.missingAttrValidator = missingAttrValidator;
+
+const projectIdMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    const BaseClass = sdkHelpers.compose(createValidateAttributesMixin({ 'project-id': missingAttrValidator }))(superclass);
+    return class ProjectIdMixinClass extends BaseClass {
+        get projectId() {
+            return this.getAttribute('project-id');
+        }
+    };
+});
+
+function getResourceUrl(projectId, filename, assetsFolder = ASSETS_FOLDER) {
+    const url = new URL(BASE_CONTENT_URL);
+    url.pathname = sdkHelpers.pathJoin(url.pathname, projectId, assetsFolder, filename);
+    return url.toString();
+}
+const staticResourcesMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    const BaseClass = sdkHelpers.compose(loggerMixin, projectIdMixin)(superclass);
+    return class StaticResourcesMixinClass extends BaseClass {
+        async fetchStaticResource(filename, format) {
+            const resourceUrl = getResourceUrl(this.projectId, filename);
+            const res = await fetch(resourceUrl, { cache: 'default' });
+            if (!res.ok) {
+                this.logger.error(`Error fetching URL ${resourceUrl} [${res.status}]`);
+            }
+            return {
+                body: await res[format](),
+                headers: Object.fromEntries(res.headers.entries()),
+            };
+        }
+    };
+});
+
+const CONFIG_FILENAME = 'config.json';
+
+const configMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    var _ConfigMixinClass__configResource, _ConfigMixinClass_fetchConfig, _a;
+    const BaseClass = sdkHelpers.compose(staticResourcesMixin)(superclass);
+    return _a = class ConfigMixinClass extends BaseClass {
+            constructor() {
+                super(...arguments);
+                _ConfigMixinClass__configResource.set(this, void 0);
+                _ConfigMixinClass_fetchConfig.set(this, async () => {
+                    try {
+                        const { body, headers } = await this.fetchStaticResource(CONFIG_FILENAME, 'json');
+                        return {
+                            projectConfig: body,
+                            executionContext: { geo: headers['x-geo'] },
+                        };
+                    }
+                    catch (e) {
+                        this.logger.error('Cannot fetch config file', 'make sure that your projectId & flowId are correct');
+                    }
+                    return undefined;
+                });
+            }
+            get config() {
+                if (!tslib.__classPrivateFieldGet(this, _ConfigMixinClass__configResource, "f")) {
+                    tslib.__classPrivateFieldSet(this, _ConfigMixinClass__configResource, tslib.__classPrivateFieldGet(this, _ConfigMixinClass_fetchConfig, "f").call(this), "f");
+                }
+                return tslib.__classPrivateFieldGet(this, _ConfigMixinClass__configResource, "f");
+            }
+        },
+        _ConfigMixinClass__configResource = new WeakMap(),
+        _ConfigMixinClass_fetchConfig = new WeakMap(),
+        _a;
+});
+
+const debuggerMixin = sdkHelpers.createSingletonMixin((superclass) => { var _DebuggerMixinClass_instances, _DebuggerMixinClass_debuggerEle, _DebuggerMixinClass_disableDebugger, _DebuggerMixinClass_enableDebugger, _DebuggerMixinClass_handleDebugMode, _DebuggerMixinClass_updateDebuggerMessages, _a; return _a = class DebuggerMixinClass extends sdkHelpers.compose(initLifecycleMixin, loggerMixin)(superclass) {
+        constructor() {
+            super(...arguments);
+            _DebuggerMixinClass_instances.add(this);
+            _DebuggerMixinClass_debuggerEle.set(this, void 0);
+            this.attributeChangedCallback = (attrName, oldValue, newValue) => {
+                var _a;
+                (_a = super.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.call(this, attrName, oldValue, newValue);
+                if (attrName === 'debug') {
+                    tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_handleDebugMode).call(this);
+                }
+            };
+        }
+        get debug() {
+            return this.getAttribute('debug') === 'true';
+        }
+        onLogEvent(logLevel, args) {
+            var _a;
+            (_a = super.onLogEvent) === null || _a === void 0 ? void 0 : _a.call(this, logLevel, args);
+            if (logLevel === 'error') {
+                tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_updateDebuggerMessages).call(this, args[0] || 'Error', args[1]);
+            }
+        }
+        async init() {
+            var _a;
+            await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+            tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_handleDebugMode).call(this);
+        }
+    },
+    _DebuggerMixinClass_debuggerEle = new WeakMap(),
+    _DebuggerMixinClass_instances = new WeakSet(),
+    _DebuggerMixinClass_disableDebugger = function _DebuggerMixinClass_disableDebugger() {
+        var _a;
+        (_a = tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _a === void 0 ? void 0 : _a.remove();
+        tslib.__classPrivateFieldSet(this, _DebuggerMixinClass_debuggerEle, null, "f");
+    },
+    _DebuggerMixinClass_enableDebugger = async function _DebuggerMixinClass_enableDebugger() {
+        tslib.__classPrivateFieldSet(this, _DebuggerMixinClass_debuggerEle, document.createElement('descope-debugger'), "f");
+        Object.assign(tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f").style, {
+            position: 'fixed',
+            top: '0',
+            right: '0',
+            height: '100vh',
+            width: '100vw',
+            pointerEvents: 'none',
+            zIndex: 99999,
+        });
+        // we are importing the debugger dynamically so we won't load it when it's not needed
+        await Promise.resolve().then(function () { return debuggerWc; });
+        document.body.appendChild(tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f"));
+    },
+    _DebuggerMixinClass_handleDebugMode = function _DebuggerMixinClass_handleDebugMode() {
+        if (this.debug)
+            tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_enableDebugger).call(this);
+        else
+            tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_disableDebugger).call(this);
+    },
+    _DebuggerMixinClass_updateDebuggerMessages = function _DebuggerMixinClass_updateDebuggerMessages(title, description) {
+        var _a;
+        if (title)
+            (_a = tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _a === void 0 ? void 0 : _a.updateData({ title, description });
+    },
+    _a; });
+
+const DESCOPE_UI_SCRIPT_ID = 'load-descope-ui';
+const DESCOPE_UI_FALLBACK_SCRIPT_ID = 'load-descope-ui-fallback-script';
+const UI_COMPONENTS_URL_KEY = 'base.ui.components.url';
+const UI_COMPONENTS_URL = (IS_LOCAL_STORAGE && localStorage.getItem(UI_COMPONENTS_URL_KEY)) ||
+    'https://static.descope.com/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
+const UI_COMPONENTS_FALLBACK_URL = (IS_LOCAL_STORAGE && localStorage.getItem(UI_COMPONENTS_URL_KEY)) ||
+    'https://cdn.jsdelivr.net/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
+const UI_COMPONENTS_URL_VERSION_PLACEHOLDER = '<version>';
+
+const setupScript = (id) => {
+    const scriptEle = document.createElement('script');
+    scriptEle.id = id;
+    return scriptEle;
+};
+const generateScriptUrl = (urlTemplate, componentsVersion) => urlTemplate.replace(UI_COMPONENTS_URL_VERSION_PLACEHOLDER, componentsVersion);
+const getDescopeUiComponentsList = (template) => [
+    ...Array.from(template.content.querySelectorAll('*')).reduce((acc, el) => el.localName.startsWith('descope-') ? acc.add(el.localName) : acc, new Set()),
+];
+
+const descopeUiMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    var _DescopeUiMixinClass_instances, _DescopeUiMixinClass_errorCbsSym, _DescopeUiMixinClass_loadCbsSym, _DescopeUiMixinClass_getComponentsVersion, _DescopeUiMixinClass_exposeAlternateEvents, _DescopeUiMixinClass_handleFallbackScript, _DescopeUiMixinClass_registerEvents, _DescopeUiMixinClass_getDescopeUiLoadingScript, _DescopeUiMixinClass_descopeUi, _DescopeUiMixinClass_loadDescopeUiComponent, _DescopeUiMixinClass_getDescopeUi, _a;
+    const BaseClass = sdkHelpers.compose(loggerMixin, configMixin)(superclass);
+    return _a = class DescopeUiMixinClass extends BaseClass {
+            constructor() {
+                super(...arguments);
+                _DescopeUiMixinClass_instances.add(this);
+                _DescopeUiMixinClass_errorCbsSym.set(this, Symbol('errorCbs'));
+                _DescopeUiMixinClass_loadCbsSym.set(this, Symbol('loadCbs'));
+                _DescopeUiMixinClass_descopeUi.set(this, void 0);
+            }
+            get descopeUi() {
+                if (!tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_descopeUi, "f")) {
+                    tslib.__classPrivateFieldSet(this, _DescopeUiMixinClass_descopeUi, tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getDescopeUi).call(this), "f");
+                }
+                return tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_descopeUi, "f");
+            }
+            async loadDescopeUiComponents(templateOrComponentNames) {
+                const descopeUiComponentsList = Array.isArray(templateOrComponentNames)
+                    ? templateOrComponentNames
+                    : getDescopeUiComponentsList(templateOrComponentNames);
+                return Promise.all(descopeUiComponentsList.map((componentName) => tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_loadDescopeUiComponent).call(this, componentName)));
+            }
+        },
+        _DescopeUiMixinClass_errorCbsSym = new WeakMap(),
+        _DescopeUiMixinClass_loadCbsSym = new WeakMap(),
+        _DescopeUiMixinClass_descopeUi = new WeakMap(),
+        _DescopeUiMixinClass_instances = new WeakSet(),
+        _DescopeUiMixinClass_getComponentsVersion = 
+        // eslint-disable-next-line class-methods-use-this
+        async function _DescopeUiMixinClass_getComponentsVersion() {
+            var _a;
+            const config = await this.config;
+            const componentsVersion = (_a = config === null || config === void 0 ? void 0 : config.projectConfig) === null || _a === void 0 ? void 0 : _a.componentsVersion;
+            if (!componentsVersion) {
+                this.logger.error('Could not get components version');
+            }
+            else {
+                this.logger.debug(`Got component version "${componentsVersion}"`);
+            }
+            return componentsVersion;
+        },
+        _DescopeUiMixinClass_exposeAlternateEvents = function _DescopeUiMixinClass_exposeAlternateEvents(scriptEle) {
+            const errorCbsSym = tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_errorCbsSym, "f");
+            const loadCbsSym = tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_loadCbsSym, "f");
+            // eslint-disable-next-line no-param-reassign
+            scriptEle[errorCbsSym] = [];
+            // eslint-disable-next-line no-param-reassign
+            scriptEle[loadCbsSym] = [];
+            Object.defineProperty(scriptEle, 'onerror', {
+                set(cb) {
+                    scriptEle[errorCbsSym].push(cb);
+                },
+            });
+            Object.defineProperty(scriptEle, 'onload', {
+                set(cb) {
+                    scriptEle[loadCbsSym].push(cb);
+                },
+            });
+        },
+        _DescopeUiMixinClass_handleFallbackScript = async function _DescopeUiMixinClass_handleFallbackScript(errorCbs, loadCbs) {
+            this.logger.debug('Trying to load DescopeUI from a fallback URL');
+            const fallbackScriptEle = setupScript(DESCOPE_UI_FALLBACK_SCRIPT_ID);
+            document.body.append(fallbackScriptEle);
+            fallbackScriptEle.addEventListener('error', () => {
+                errorCbs.forEach((cb) => cb(`Cannot load DescopeUI from fallback URL, Make sure this URL is valid and return the correct script: "${fallbackScriptEle.src}"`));
+            });
+            fallbackScriptEle.addEventListener('load', () => {
+                loadCbs.forEach((cb) => cb());
+            });
+            fallbackScriptEle.src = generateScriptUrl(UI_COMPONENTS_FALLBACK_URL, await tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getComponentsVersion).call(this));
+        },
+        _DescopeUiMixinClass_registerEvents = function _DescopeUiMixinClass_registerEvents(scriptEle) {
+            scriptEle.addEventListener('error', () => {
+                scriptEle[tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_errorCbsSym, "f")].forEach((cb) => cb(`Cannot load DescopeUI from main URL, Make sure this URL is valid and return the correct script: "${scriptEle.src}"`));
+                // in case we could not load DescopeUI from the main URL, we are trying to load it from a fallback URL
+                tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_handleFallbackScript).call(this, scriptEle[tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_errorCbsSym, "f")], scriptEle[tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_loadCbsSym, "f")]);
+            });
+            scriptEle.addEventListener('load', () => {
+                scriptEle[tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_loadCbsSym, "f")].forEach((cb) => cb());
+            });
+        },
+        _DescopeUiMixinClass_getDescopeUiLoadingScript = async function _DescopeUiMixinClass_getDescopeUiLoadingScript() {
+            if (!document.querySelector(`script#${DESCOPE_UI_SCRIPT_ID}`)) {
+                this.logger.debug('DescopeUI loading script does not exist, creating it', this);
+                const scriptEle = setupScript(DESCOPE_UI_SCRIPT_ID);
+                document.body.append(scriptEle);
+                tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_exposeAlternateEvents).call(this, scriptEle);
+                tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_registerEvents).call(this, scriptEle);
+                scriptEle.src = generateScriptUrl(UI_COMPONENTS_URL, await tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getComponentsVersion).call(this));
+            }
+            else {
+                this.logger.debug('DescopeUI loading script already exists', this);
+            }
+            return document.getElementById(DESCOPE_UI_SCRIPT_ID);
+        },
+        _DescopeUiMixinClass_loadDescopeUiComponent = async function _DescopeUiMixinClass_loadDescopeUiComponent(componentName) {
+            const isComponentAlreadyDefined = !!customElements.get(componentName);
+            if (isComponentAlreadyDefined) {
+                this.logger.debug(`Loading component "${componentName}" is skipped as it is already defined`);
+                return undefined;
+            }
+            const descopeUI = await this.descopeUi;
+            if (!descopeUI[componentName]) {
+                this.logger.error(`Cannot load UI component "${componentName}"`, `Descope UI does not have a component named "${componentName}", available components are: "${Object.keys(descopeUI).join(', ')}"`);
+                return undefined;
+            }
+            try {
+                // eslint-disable-next-line @typescript-eslint/return-await
+                return await descopeUI[componentName]();
+            }
+            catch (e) {
+                // this error is thrown when trying to register a component which is already registered
+                // when running 2 flows on the same page, it might happen that the register fn is called twice
+                // in case it happens, we are silently ignore the error
+                if (e.name === 'NotSupportedError') {
+                    // eslint-disable-next-line no-console
+                    console.debug(`Encountered an error while attempting to define the "${componentName}" component, it is likely that this component is already defined`);
+                }
+                else {
+                    throw e;
+                }
+            }
+            return undefined;
+        },
+        _DescopeUiMixinClass_getDescopeUi = function _DescopeUiMixinClass_getDescopeUi() {
+            return new Promise((res) => {
+                if (globalThis.DescopeUI) {
+                    res(globalThis.DescopeUI);
+                }
+                tslib.__classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getDescopeUiLoadingScript).call(this).then((scriptEle) => {
+                    // eslint-disable-next-line no-param-reassign
+                    scriptEle.onerror = this.logger.error;
+                    // eslint-disable-next-line no-param-reassign
+                    scriptEle.onload = () => {
+                        this.logger.debug('DescopeUI was loaded');
+                        res(globalThis.DescopeUI);
+                    };
+                    // in case the load event was dispatched before we registered, we have a fallback
+                    setTimeout(() => {
+                        if (globalThis.DescopeUI) {
+                            res(globalThis.DescopeUI);
+                        }
+                    });
+                });
+            });
+        },
+        _a;
+});
+
+const CONTENT_ROOT_ID = 'content-root';
+const ROOT_ID = 'root';
+const initElementMixin = sdkHelpers.createSingletonMixin((superclass) => class InitElementMixinClass extends superclass {
+    constructor(...rest) {
+        var _a, _b;
+        super(...rest);
+        this.attachShadow({ mode: 'open' }).innerHTML = `
+
+          <style>
+            #${ROOT_ID}, #${CONTENT_ROOT_ID} {
+              height: 100%;
+            }
+          </style>
+          <div id="${ROOT_ID}">
+            <div id="${CONTENT_ROOT_ID}"></div>
+          </div>
+          `;
+        this.contentRootElement =
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(CONTENT_ROOT_ID);
+        this.rootElement = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(ROOT_ID);
+    }
+});
+
+const MODAL_ELE_TAG = 'descope-modal';
+
+const createModalEle = (config = {}) => {
+    const modal = document.createElement(MODAL_ELE_TAG);
+    Object.keys(config).forEach((key) => {
+        modal.setAttribute(key, config[key]);
+    });
+    return modal;
+};
+
+const modalMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    var _ModalMixinClass_ModalDriverWrapper, _a;
+    const BaseClass = sdkHelpers.compose(initLifecycleMixin, initElementMixin, descopeUiMixin)(superclass);
+    return _a = class ModalMixinClass extends BaseClass {
+            constructor() {
+                super(...arguments);
+                _ModalMixinClass_ModalDriverWrapper.set(this, (() => {
+                    const loadDescopeUiComponents = this.loadDescopeUiComponents.bind(this);
+                    return class ModalDriverWrapper extends sdkComponentDrivers.ModalDriver {
+                        setContent(template) {
+                            loadDescopeUiComponents(template);
+                            super.setContent(template);
+                        }
+                    };
+                })());
+            }
+            createModal(config) {
+                const baseConfig = {};
+                const modal = createModalEle(Object.assign(Object.assign({}, baseConfig), config));
+                this.rootElement.append(modal);
+                return new (tslib.__classPrivateFieldGet(this, _ModalMixinClass_ModalDriverWrapper, "f"))(modal, {
+                    logger: this.logger,
+                });
+            }
+            async init() {
+                var _a;
+                this.loadDescopeUiComponents([MODAL_ELE_TAG]);
+                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+            }
+        },
+        _ModalMixinClass_ModalDriverWrapper = new WeakMap(),
+        _a;
+});
+
+const NOTIFICATION_ELE_TAG = 'descope-notification';
+
+const createNotificationEle = (config = {}) => {
+    const notification = document.createElement(NOTIFICATION_ELE_TAG);
+    Object.keys(config).forEach((key) => {
+        notification.setAttribute(key, config[key]);
+    });
+    return notification;
+};
+
+const notificationsMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    var _NotificationsMixinClass_NotificationDriverWrapper, _a;
+    const BaseClass = sdkHelpers.compose(initLifecycleMixin, initElementMixin, descopeUiMixin)(superclass);
+    return _a = class NotificationsMixinClass extends BaseClass {
+            constructor() {
+                super(...arguments);
+                _NotificationsMixinClass_NotificationDriverWrapper.set(this, (() => {
+                    const loadDescopeUiComponents = this.loadDescopeUiComponents.bind(this);
+                    return class NotificationDriverWrapper extends sdkComponentDrivers.NotificationDriver {
+                        setContent(templateOrString) {
+                            const template = typeof templateOrString === 'string'
+                                ? sdkHelpers.createTemplate(templateOrString)
+                                : templateOrString;
+                            loadDescopeUiComponents(template);
+                            super.setContent(template);
+                        }
+                    };
+                })());
+            }
+            createNotification(config) {
+                const baseConfig = {};
+                const notification = createNotificationEle(Object.assign(Object.assign({}, baseConfig), config));
+                this.rootElement.append(notification);
+                return new (tslib.__classPrivateFieldGet(this, _NotificationsMixinClass_NotificationDriverWrapper, "f"))(notification, {
+                    logger: this.logger,
+                });
+            }
+            async init() {
+                var _a;
+                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                this.loadDescopeUiComponents([NOTIFICATION_ELE_TAG]);
+            }
+        },
+        _NotificationsMixinClass_NotificationDriverWrapper = new WeakMap(),
+        _a;
+});
+
+// Those files are saved on a new folder to prevent breaking changes
+const THEME_FILENAME = 'theme.json';
+
+const loadFont = (url) => {
+    const font = document.createElement('link');
+    font.href = url;
+    font.rel = 'stylesheet';
+    document.head.appendChild(font);
+};
+
+const themeValidation = (_, theme) => (theme || false) &&
+    theme !== 'light' &&
+    theme !== 'dark' &&
+    'Supported theme values are "light", "dark", or leave empty for using the OS theme';
+const themeMixin = sdkHelpers.createSingletonMixin((superclass) => {
+    var _ThemeMixinClass_instances, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
+    const BaseClass = sdkHelpers.compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin)(superclass);
+    return _a = class ThemeMixinClass extends BaseClass {
+            constructor() {
+                super(...arguments);
+                _ThemeMixinClass_instances.add(this);
+                _ThemeMixinClass__themeResource.set(this, void 0);
+            }
+            get theme() {
+                var _a, _b;
+                const theme = this.getAttribute('theme');
+                if (theme === 'os') {
+                    const isOsDark = window.matchMedia &&
+                        ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-color-scheme: dark)')) === null || _b === void 0 ? void 0 : _b.matches);
+                    return isOsDark ? 'dark' : 'light';
+                }
+                return theme || 'light';
+            }
+            async init() {
+                var _a;
+                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this);
+                tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this);
+                tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
+                tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_applyTheme).call(this);
+            }
+        },
+        _ThemeMixinClass__themeResource = new WeakMap(),
+        _ThemeMixinClass_instances = new WeakSet(),
+        _ThemeMixinClass_fetchTheme = async function _ThemeMixinClass_fetchTheme() {
+            try {
+                const { body } = await this.fetchStaticResource(THEME_FILENAME, 'json');
+                return body;
+            }
+            catch (e) {
+                this.logger.error('Cannot fetch theme file', 'make sure that your projectId & flowId are correct');
+            }
+            return undefined;
+        },
+        _ThemeMixinClass_themeResource_get = function _ThemeMixinClass_themeResource_get() {
+            if (!tslib.__classPrivateFieldGet(this, _ThemeMixinClass__themeResource, "f")) {
+                tslib.__classPrivateFieldSet(this, _ThemeMixinClass__themeResource, tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_fetchTheme).call(this), "f");
+                tslib.__classPrivateFieldGet(this, _ThemeMixinClass__themeResource, "f").then((theme) => this.logger.debug('Fetched theme', theme));
+            }
+            // eslint-disable-next-line no-underscore-dangle
+            return tslib.__classPrivateFieldGet(this, _ThemeMixinClass__themeResource, "f");
+        },
+        _ThemeMixinClass_loadGlobalStyle = async function _ThemeMixinClass_loadGlobalStyle() {
+            var _a, _b;
+            const theme = await tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get);
+            if (!theme)
+                return;
+            const styleEle = document.createElement('style');
+            styleEle.innerText =
+                (((_a = theme === null || theme === void 0 ? void 0 : theme.light) === null || _a === void 0 ? void 0 : _a.globals) || '') + (((_b = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _b === void 0 ? void 0 : _b.globals) || '');
+            this.shadowRoot.appendChild(styleEle);
+        },
+        _ThemeMixinClass_loadComponentsStyle = async function _ThemeMixinClass_loadComponentsStyle() {
+            var _a, _b;
+            const theme = Object.assign({}, (await tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get)));
+            if (!theme)
+                return;
+            const descopeUi = await this.descopeUi;
+            if (descopeUi === null || descopeUi === void 0 ? void 0 : descopeUi.componentsThemeManager) {
+                descopeUi.componentsThemeManager.themes = {
+                    light: (_a = theme === null || theme === void 0 ? void 0 : theme.light) === null || _a === void 0 ? void 0 : _a.components,
+                    dark: (_b = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _b === void 0 ? void 0 : _b.components,
+                };
+            }
+        },
+        _ThemeMixinClass_loadFonts = async function _ThemeMixinClass_loadFonts() {
+            var _a, _b;
+            const { projectConfig } = await this.config;
+            const fonts = (_b = (_a = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate) === null || _a === void 0 ? void 0 : _a[this.theme]) === null || _b === void 0 ? void 0 : _b.fonts;
+            if (fonts) {
+                Object.values(fonts).forEach((font) => {
+                    if (font.url) {
+                        this.logger.debug(`Loading font from URL "${font.url}"`);
+                        loadFont(font.url);
+                    }
+                });
+            }
+        },
+        _ThemeMixinClass_applyTheme = async function _ThemeMixinClass_applyTheme() {
+            this.rootElement.setAttribute('data-theme', this.theme);
+            const descopeUi = await this.descopeUi;
+            if (descopeUi === null || descopeUi === void 0 ? void 0 : descopeUi.componentsThemeManager) {
+                descopeUi.componentsThemeManager.currentThemeName = this.theme;
+            }
+        },
+        _a;
+});
+
+/* eslint-disable no-param-reassign */
+const createStateManagementMixin = (options) => sdkHelpers.createSingletonMixin((superclass) => {
+    const slice = toolkit.createSlice(options);
+    const allActions = Object.assign(Object.assign({}, slice.actions), options.asyncActions);
+    return class StateManagementMixinClass extends sdkHelpers.compose(loggerMixin)(superclass) {
+        constructor(...args) {
+            super(...args);
+            const store = toolkit.configureStore({
+                reducer: slice.reducer,
+                middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+                    thunk: {
+                        extraArgument: this,
+                    },
+                    serializableCheck: false,
+                }),
+                // change to true if we want to debug redux
+                devTools: false,
+            });
+            const wrapAction = (action) => (async (...arg) => {
+                const result = await store.dispatch(action(...arg));
+                // we want to unwrap the result, so in case of an error we can log it
+                try {
+                    toolkit.unwrapResult(result);
+                }
+                catch (e) {
+                    this.logger.error(e.message, result.type, e.stack);
+                }
+                return result;
+            });
+            const actions = Object.keys(allActions).reduce((acc, actionName) => {
+                acc[actionName] = wrapAction(allActions[actionName]);
+                return acc;
+            }, {});
+            this.actions = actions;
+            this.subscribe = (cb, selector = (state) => state) => store.subscribe(() => cb(selector(store.getState())));
+        }
+    };
+});
+
+const formMixin = sdkHelpers.createSingletonMixin((superclass) => class FormMixinClass extends loggerMixin(superclass) {
+    validateForm(rootEle) {
+        return this.getFormInputs(rootEle).every((input) => {
+            var _a, _b;
+            (_a = input.reportValidity) === null || _a === void 0 ? void 0 : _a.call(input);
+            return (_b = input.checkValidity) === null || _b === void 0 ? void 0 : _b.call(input);
+        });
+    }
+    // eslint-disable-next-line class-methods-use-this
+    getFormInputs(rootEle) {
+        if (!rootEle) {
+            this.logger.debug('cannot get form inputs, no root element was received');
+            return [];
+        }
+        return Array.from(rootEle.querySelectorAll('[name]'));
+    }
+    getFormData(rootEle) {
+        return this.getFormInputs(rootEle).reduce((acc, input) => Object.assign(acc, { [input.getAttribute('name')]: input.value }), {});
+    }
+    setFormData(rootEle, data) {
+        this.getFormInputs(rootEle).forEach((input) => {
+            // eslint-disable-next-line no-prototype-builtins
+            if (data.hasOwnProperty(input.getAttribute('name'))) {
+                // eslint-disable-next-line no-param-reassign
+                input.value = data[input.getAttribute('name')];
+            }
+        });
+    }
+    resetFormData(rootEle) {
+        this.getFormInputs(rootEle).forEach((input) => {
+            // eslint-disable-next-line no-param-reassign
+            input.value = '';
+        });
+    }
+    getFormFieldNames(rootEle) {
+        return this.getFormInputs(rootEle).map((ele) => ele.name);
+    }
+    disableFormField(rootEle, name) {
+        var _a;
+        (_a = this.getFormInputs(rootEle)
+            .find((input) => input.name === name)) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true');
+    }
+    removeFormField(rootEle, name) {
+        var _a;
+        (_a = this.getFormInputs(rootEle)
+            .find((input) => input.name === name)) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+});
+
+const limitCoordinateToScreenBoundaries = (ele, x, y, boundaries = {}) => {
+    var _a, _b, _c, _d;
+    return [
+        Math.min(Math.max(x, (boundaries.left === 'all' ? ele.offsetWidth : (_a = boundaries.left) !== null && _a !== void 0 ? _a : 0) -
+            ele.offsetWidth), window.innerWidth -
+            (boundaries.right === 'all' ? ele.offsetWidth : (_b = boundaries.right) !== null && _b !== void 0 ? _b : 0)),
+        Math.min(Math.max(y, (boundaries.top === 'all' ? ele.offsetHeight : (_c = boundaries.top) !== null && _c !== void 0 ? _c : 0) -
+            ele.offsetHeight), window.innerHeight -
+            (boundaries.bottom === 'all' ? ele.offsetHeight : (_d = boundaries.bottom) !== null && _d !== void 0 ? _d : 0)),
+    ];
+};
+const dragElement = (ele, triggerEle, keepVisible) => {
+    let deltaX = 0;
+    let deltaY = 0;
+    let currentX = 0;
+    let currentY = 0;
+    function elementDrag(e) {
+        e.preventDefault();
+        // calculate the new cursor position:
+        deltaX = currentX - e.clientX;
+        deltaY = currentY - e.clientY;
+        currentX = e.clientX;
+        currentY = e.clientY;
+        // set the element's new position:
+        const [left, top] = limitCoordinateToScreenBoundaries(ele, ele.offsetLeft - deltaX, ele.offsetTop - deltaY, keepVisible);
+        // eslint-disable-next-line no-param-reassign
+        ele.style.top = `${top}px`;
+        // eslint-disable-next-line no-param-reassign
+        ele.style.left = `${left}px`;
+    }
+    function closeDragElement() {
+        // stop moving when mouse button is released:
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+    function dragMouseDown(e) {
+        e.preventDefault();
+        // get the mouse cursor position at startup:
+        currentX = e.clientX;
+        currentY = e.clientY;
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+    }
+    if (triggerEle) {
+        // if provided, the triggerEle is where you move the div from
+        // eslint-disable-next-line no-param-reassign
+        triggerEle.onmousedown = dragMouseDown;
+    }
+    else {
+        // otherwise, move the DIV from anywhere inside the DIV:
+        // eslint-disable-next-line no-param-reassign
+        ele.onmousedown = dragMouseDown;
+    }
+};
+const addOnResize = (ele) => {
+    // eslint-disable-next-line no-param-reassign
+    ele.onmousemove = (e) => {
+        var _a;
+        // eslint-disable-next-line prefer-destructuring
+        const target = e.target;
+        if ((target.w && target.w !== target.offsetWidth) ||
+            (target.h && target.h !== target.offsetHeight)) {
+            (_a = ele.onresize) === null || _a === void 0 ? void 0 : _a.call(ele, e);
+        }
+        target.w = target.offsetWidth;
+        target.h = target.offsetHeight;
+    };
+};
+
+var _Debugger_instances, _Debugger_messagesState, _Debugger_rootEle, _Debugger_contentEle, _Debugger_headerEle, _Debugger_eventsCbRefs, _Debugger_onNewMessages, _Debugger_renderMessages, _Debugger_setCollapsibleMessages, _Debugger_onWindowResize;
+const INITIAL_POS_THRESHOLD = 32;
+const INITIAL_WIDTH = 300;
+const INITIAL_HEIGHT = 200;
+const MIN_SIZE = 200;
+const template = document.createElement('template');
+template.innerHTML = `
+<style>
+  .debugger {
+    width: ${INITIAL_WIDTH}px;
+    height: ${INITIAL_HEIGHT}px;
+    background-color: #FAFAFA;
+    position: fixed;
+    font-family: "Helvetica Neue", sans-serif;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid lightgrey;
+    pointer-events: initial;
+    display: flex;
+    flex-direction: column;
+    min-width: ${MIN_SIZE}px;
+    max-width: 600px;
+    max-height: calc(100% - ${INITIAL_POS_THRESHOLD * 2}px);
+    min-height: ${MIN_SIZE}px;
+    resize: both;
+  }
+
+  .header {
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    background-color: #EEEEEE;
+    cursor: move;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .content {
+    font-size: 14px;
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  .msg {
+    border-bottom: 1px solid lightgrey;
+    padding: 8px 16px;
+    display: flex;
+    gap: 5px;
+    background-color: #FAFAFA;
+  }
+
+  .msg.collapsible {
+    cursor: pointer;
+  }
+
+  .empty-state {
+    padding: 8px 16px;
+    background-color: #FAFAFA;
+  }
+
+
+  .msg.collapsible:not(.collapsed) {
+    background-color: #F5F5F5;
+  }
+
+  .msg_title {
+    padding-bottom: 5px;
+    display: flex;
+    gap: 8px;
+    font-weight: 500;
+  }
+
+  .msg svg {
+    padding: 1px;
+    flex-shrink: 0;
+    margin-top: -2px;
+  }
+
+  .msg_content {
+    overflow: hidden;
+    flex-grow: 1;
+    margin-right:5px;
+  }
+
+  .msg_desc {
+    color: #646464;
+    cursor: initial;
+    word-wrap: break-word;
+  }
+
+  .msg.collapsed .msg_desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .msg.collapsible.collapsed .chevron {
+    transform: rotate(-45deg) translateX(-2px);
+  }
+
+  .msg.collapsible .chevron {
+    content: "";
+    width:6px;
+    height:6px;
+    border-bottom: 2px solid grey;
+    border-right: 2px solid grey;
+    transform: rotate(45deg) translateX(-1px);
+    margin: 5px;
+    flex-shrink:0;
+  }
+</style>
+
+<div style="top:${INITIAL_POS_THRESHOLD}px; left:${window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD}px;" class="debugger">
+  <div class="header">
+    <span>Debugger messages</span>
+  </div>
+  <div class="content">
+    <div class="empty-state">
+      No errors detected 👀
+    </div>
+  </div>
+</div>
+`;
+const icon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.99984 13.167L8.99984 10.167L11.9998 13.167L13.1665 12.0003L10.1665 9.00033L13.1665 6.00033L11.9998 4.83366L8.99984 7.83366L5.99984 4.83366L4.83317 6.00033L7.83317 9.00033L4.83317 12.0003L5.99984 13.167ZM8.99984 17.3337C7.84706 17.3337 6.76373 17.1148 5.74984 16.677C4.73595 16.2398 3.854 15.6462 3.104 14.8962C2.354 14.1462 1.76039 13.2642 1.32317 12.2503C0.885393 11.2364 0.666504 10.1531 0.666504 9.00033C0.666504 7.84755 0.885393 6.76421 1.32317 5.75033C1.76039 4.73644 2.354 3.85449 3.104 3.10449C3.854 2.35449 4.73595 1.7606 5.74984 1.32283C6.76373 0.885603 7.84706 0.666992 8.99984 0.666992C10.1526 0.666992 11.2359 0.885603 12.2498 1.32283C13.2637 1.7606 14.1457 2.35449 14.8957 3.10449C15.6457 3.85449 16.2393 4.73644 16.6765 5.75033C17.1143 6.76421 17.3332 7.84755 17.3332 9.00033C17.3332 10.1531 17.1143 11.2364 16.6765 12.2503C16.2393 13.2642 15.6457 14.1462 14.8957 14.8962C14.1457 15.6462 13.2637 16.2398 12.2498 16.677C11.2359 17.1148 10.1526 17.3337 8.99984 17.3337ZM8.99984 15.667C10.8609 15.667 12.4373 15.0212 13.729 13.7295C15.0207 12.4378 15.6665 10.8614 15.6665 9.00033C15.6665 7.13921 15.0207 5.56283 13.729 4.27116C12.4373 2.97949 10.8609 2.33366 8.99984 2.33366C7.13873 2.33366 5.56234 2.97949 4.27067 4.27116C2.979 5.56283 2.33317 7.13921 2.33317 9.00033C2.33317 10.8614 2.979 12.4378 4.27067 13.7295C5.56234 15.0212 7.13873 15.667 8.99984 15.667Z" fill="#ED404A"/>
+</svg>
+`;
+class Debugger extends HTMLElement {
+    constructor() {
+        var _a;
+        super();
+        _Debugger_instances.add(this);
+        _Debugger_messagesState.set(this, new sdkHelpers.State({ messages: [] }));
+        _Debugger_rootEle.set(this, void 0);
+        _Debugger_contentEle.set(this, void 0);
+        _Debugger_headerEle.set(this, void 0);
+        _Debugger_eventsCbRefs.set(this, {
+            resize: tslib.__classPrivateFieldGet(this, _Debugger_instances, "m", _Debugger_onWindowResize).bind(this),
+        });
+        this.attachShadow({ mode: 'open' });
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));
+        tslib.__classPrivateFieldSet(this, _Debugger_rootEle, this.shadowRoot.querySelector('.debugger'), "f");
+        tslib.__classPrivateFieldSet(this, _Debugger_contentEle, tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f").querySelector('.content'), "f");
+        tslib.__classPrivateFieldSet(this, _Debugger_headerEle, tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f").querySelector('.header'), "f");
+    }
+    updateData(data) {
+        tslib.__classPrivateFieldGet(this, _Debugger_messagesState, "f").update((state) => ({
+            messages: state.messages.concat(data),
+        }));
+    }
+    connectedCallback() {
+        dragElement(tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f"), tslib.__classPrivateFieldGet(this, _Debugger_headerEle, "f"), {
+            top: 'all',
+            bottom: 100,
+            left: 100,
+            right: 100,
+        });
+        window.addEventListener('resize', tslib.__classPrivateFieldGet(this, _Debugger_eventsCbRefs, "f").resize);
+        addOnResize(tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f"));
+        tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f").onresize = tslib.__classPrivateFieldGet(this, _Debugger_instances, "m", _Debugger_setCollapsibleMessages).bind(this);
+        tslib.__classPrivateFieldGet(this, _Debugger_messagesState, "f").subscribe(tslib.__classPrivateFieldGet(this, _Debugger_instances, "m", _Debugger_onNewMessages).bind(this));
+    }
+    disconnectedCallback() {
+        tslib.__classPrivateFieldGet(this, _Debugger_messagesState, "f").unsubscribeAll();
+        window.removeEventListener('resize', tslib.__classPrivateFieldGet(this, _Debugger_eventsCbRefs, "f").resize);
+    }
+}
+_Debugger_messagesState = new WeakMap(), _Debugger_rootEle = new WeakMap(), _Debugger_contentEle = new WeakMap(), _Debugger_headerEle = new WeakMap(), _Debugger_eventsCbRefs = new WeakMap(), _Debugger_instances = new WeakSet(), _Debugger_onNewMessages = function _Debugger_onNewMessages(data) {
+    tslib.__classPrivateFieldGet(this, _Debugger_instances, "m", _Debugger_renderMessages).call(this, data);
+    tslib.__classPrivateFieldGet(this, _Debugger_instances, "m", _Debugger_setCollapsibleMessages).call(this);
+}, _Debugger_renderMessages = function _Debugger_renderMessages(data) {
+    tslib.__classPrivateFieldGet(this, _Debugger_contentEle, "f").innerHTML = data.messages
+        .map((message) => `
+    <div class="msg">
+      ${icon}
+      <div class="msg_content">
+        <div class="msg_title">
+          ${message.title}
+        </div>
+        <div class="msg_desc">
+          ${message.description || ''}
+        </div>
+      </div>
+      <div class="chevron"></div>
+    </div>
+  `)
+        .join('');
+}, _Debugger_setCollapsibleMessages = function _Debugger_setCollapsibleMessages() {
+    tslib.__classPrivateFieldGet(this, _Debugger_contentEle, "f").querySelectorAll('.msg').forEach((element) => {
+        const ele = element;
+        const descEle = ele.querySelector('.msg_desc');
+        const lineHeight = 20;
+        const isScroll = descEle.scrollWidth > descEle.clientWidth;
+        const isMultiLine = descEle.clientHeight > lineHeight;
+        const isCollapsible = isScroll || isMultiLine;
+        if (isCollapsible) {
+            ele.classList.add('collapsible');
+            ele.onclick = (e) => {
+                // message description should not toggle collapse
+                if (!e.target.classList.contains('msg_desc')) {
+                    ele.classList.toggle('collapsed');
+                }
+            };
+        }
+        else {
+            ele.classList.remove('collapsible');
+            ele.onclick = null;
+        }
+    });
+}, _Debugger_onWindowResize = function _Debugger_onWindowResize() {
+    // when window is resizing we want to make sure debugger is still visible
+    const [left, top] = limitCoordinateToScreenBoundaries(tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f"), Number.parseInt(tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f").style.left, 10), Number.parseInt(tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f").style.top, 10), { top: 'all', bottom: 100, left: 100, right: 100 });
+    tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f").style.top = `${top}px`;
+    tslib.__classPrivateFieldGet(this, _Debugger_rootEle, "f").style.left = `${left}px`;
+};
+if (!customElements.get('descope-debugger')) {
+    customElements.define('descope-debugger', Debugger);
+}
+
+var debuggerWc = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+exports.configMixin = configMixin;
+exports.createStateManagementMixin = createStateManagementMixin;
+exports.createValidateAttributesMixin = createValidateAttributesMixin;
+exports.debuggerMixin = debuggerMixin;
+exports.descopeUiMixin = descopeUiMixin;
+exports.formMixin = formMixin;
+exports.getResourceUrl = getResourceUrl;
+exports.initElementMixin = initElementMixin;
+exports.initLifecycleMixin = initLifecycleMixin;
+exports.loggerMixin = loggerMixin;
+exports.modalMixin = modalMixin;
+exports.notificationsMixin = notificationsMixin;
+exports.observeAttributesMixin = observeAttributesMixin;
+exports.projectIdMixin = projectIdMixin;
+exports.staticResourcesMixin = staticResourcesMixin;
+exports.themeMixin = themeMixin;
+//# sourceMappingURL=index.cjs.js.map