@descope/sdk-mixins 0.2.43 → 0.3.0

package/dist/index.esm.js

@@ -24,9 +24,9 @@ const loggerMixin = createSingletonMixin((superclass) => { var _LoggerMixinClass
     _LoggerMixinClass_wrapLogger = function _LoggerMixinClass_wrapLogger(logger) {
         return logLevels.reduce((acc, logLevel) => {
             acc[logLevel] = (...args) => {
-                var _a;
+                var _b;
                 this.onLogEvent(logLevel, args);
-                (_a = logger[logLevel]) === null || _a === void 0 ? void 0 : _a.call(logger, ...args);
+                (_b = logger[logLevel]) === null || _b === void 0 ? void 0 : _b.call(logger, ...args);
             };
             return acc;
         }, {});
@@ -49,9 +49,9 @@ const initLifecycleMixin = createSingletonMixin((superclass) => { var _InitLifec
             _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) {
+            var _b, _c;
+            (_b = super.connectedCallback) === null || _b === void 0 ? void 0 : _b.call(this);
+            if ((_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.isConnected) {
                 // the init function is running once, on the first time the component is connected
                 if (__classPrivateFieldGet(this, _InitLifecycleMixinClass_isInit, "f")) {
                     __classPrivateFieldSet(this, _InitLifecycleMixinClass_isInit, false, "f");
@@ -87,11 +87,11 @@ const observeAttributesMixin = createSingletonMixin((superclass) => {
                 _ObserveAttributesMixinClass_observeMappings.set(this, {});
             }
             async init() {
-                var _a;
-                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                var _b;
+                await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
                 attributesObserver(this, (attrName) => {
-                    var _a;
-                    (_a = __classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName]) === null || _a === void 0 ? void 0 : _a.forEach((cb) => {
+                    var _b;
+                    (_b = __classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName]) === null || _b === void 0 ? void 0 : _b.forEach((cb) => {
                         cb(attrName, this.getAttribute(attrName));
                     });
                 });
@@ -126,8 +126,8 @@ const createValidateAttributesMixin = (mappings) => (superclass) => {
                 this.observeAttributes(mappingsNames, __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));
+                var _b;
+                await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
                 // check attributes initial values
                 mappingsNames.forEach((attr) => __classPrivateFieldGet(this, _ValidateAttributesMixinClass_instances, "m", _ValidateAttributesMixinClass_handleError).call(this, attr, this.getAttribute(attr)));
             }
@@ -156,7 +156,7 @@ const projectIdMixin = createSingletonMixin((superclass) => {
 const baseUrlMixin = createSingletonMixin((superclass) => {
     return class BaseUrlMixinClass extends superclass {
         get baseUrl() {
-            return this.getAttribute('base-url');
+            return this.getAttribute('base-url') || '';
         }
     };
 });
@@ -231,8 +231,8 @@ const debuggerMixin = createSingletonMixin((superclass) => { var _DebuggerMixinC
             _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);
+                var _b;
+                (_b = super.attributeChangedCallback) === null || _b === void 0 ? void 0 : _b.call(this, attrName, oldValue, newValue);
                 if (attrName === 'debug') {
                     __classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_handleDebugMode).call(this);
                 }
@@ -242,23 +242,23 @@ const debuggerMixin = createSingletonMixin((superclass) => { var _DebuggerMixinC
             return this.getAttribute('debug') === 'true';
         }
         onLogEvent(logLevel, args) {
-            var _a;
-            (_a = super.onLogEvent) === null || _a === void 0 ? void 0 : _a.call(this, logLevel, args);
+            var _b;
+            (_b = super.onLogEvent) === null || _b === void 0 ? void 0 : _b.call(this, logLevel, args);
             if (logLevel === 'error') {
                 __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));
+            var _b;
+            await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
             __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 = __classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _a === void 0 ? void 0 : _a.remove();
+        var _b;
+        (_b = __classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _b === void 0 ? void 0 : _b.remove();
         __classPrivateFieldSet(this, _DebuggerMixinClass_debuggerEle, null, "f");
     },
     _DebuggerMixinClass_enableDebugger = async function _DebuggerMixinClass_enableDebugger() {
@@ -283,9 +283,9 @@ const debuggerMixin = createSingletonMixin((superclass) => { var _DebuggerMixinC
             __classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_disableDebugger).call(this);
     },
     _DebuggerMixinClass_updateDebuggerMessages = function _DebuggerMixinClass_updateDebuggerMessages(title, description) {
-        var _a;
+        var _b;
         if (title)
-            (_a = __classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _a === void 0 ? void 0 : _a.updateData({ title, description });
+            (_b = __classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _b === void 0 ? void 0 : _b.updateData({ title, description });
     },
     _a; });
 
@@ -339,9 +339,9 @@ const descopeUiMixin = createSingletonMixin((superclass) => {
         _DescopeUiMixinClass_getComponentsVersion = 
         // eslint-disable-next-line class-methods-use-this
         async function _DescopeUiMixinClass_getComponentsVersion() {
-            var _a;
+            var _b;
             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;
+            const componentsVersion = (_b = config === null || config === void 0 ? void 0 : config.projectConfig) === null || _b === void 0 ? void 0 : _b.componentsVersion;
             if (!componentsVersion) {
                 this.logger.error('Could not get components version');
             }
@@ -520,9 +520,9 @@ const modalMixin = createSingletonMixin((superclass) => {
                 });
             }
             async init() {
-                var _a;
+                var _b;
                 this.loadDescopeUiComponents([MODAL_ELE_TAG]);
-                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
             }
         },
         _ModalMixinClass_ModalDriverWrapper = new WeakMap(),
@@ -567,8 +567,8 @@ const notificationsMixin = createSingletonMixin((superclass) => {
                 });
             }
             async init() {
-                var _a;
-                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                var _b;
+                await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
                 this.loadDescopeUiComponents([NOTIFICATION_ELE_TAG]);
             }
         },
@@ -577,7 +577,7 @@ const notificationsMixin = createSingletonMixin((superclass) => {
 });
 
 // Those files are saved on a new folder to prevent breaking changes
-const THEME_FILENAME = 'theme.json';
+const DEFAULT_STYLE_ID = 'theme';
 
 const loadFont = (url) => {
     const font = document.createElement('link');
@@ -611,27 +611,31 @@ const themeValidation = (_, theme) => (theme || false) &&
     theme !== 'dark' &&
     'Supported theme values are "light", "dark", or leave empty for using the OS theme';
 const themeMixin = createSingletonMixin((superclass) => {
-    var _ThemeMixinClass_instances, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
+    var _ThemeMixinClass_instances, _ThemeMixinClass_globalStyleTag, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_getFontsConfig, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
     const BaseClass = compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin)(superclass);
     return _a = class ThemeMixinClass extends BaseClass {
             constructor() {
                 super(...arguments);
                 _ThemeMixinClass_instances.add(this);
+                _ThemeMixinClass_globalStyleTag.set(this, void 0);
                 _ThemeMixinClass__themeResource.set(this, void 0);
             }
             get theme() {
-                var _a, _b;
+                var _b, _c;
                 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);
+                        ((_c = (_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(prefers-color-scheme: dark)')) === null || _c === void 0 ? void 0 : _c.matches);
                     return isOsDark ? 'dark' : 'light';
                 }
                 return theme || 'light';
             }
+            get styleId() {
+                return this.getAttribute('style-id') || DEFAULT_STYLE_ID;
+            }
             async init() {
-                var _a;
-                await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
+                var _b;
+                await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
                 __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this);
                 __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this);
                 __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
@@ -640,13 +644,20 @@ const themeMixin = createSingletonMixin((superclass) => {
                     __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
                     __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_applyTheme).call(this);
                 });
+                this.observeAttributes(['style-id'], () => {
+                    __classPrivateFieldSet(this, _ThemeMixinClass__themeResource, null, "f");
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this);
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this);
+                });
             }
         },
+        _ThemeMixinClass_globalStyleTag = new WeakMap(),
         _ThemeMixinClass__themeResource = new WeakMap(),
         _ThemeMixinClass_instances = new WeakSet(),
         _ThemeMixinClass_fetchTheme = async function _ThemeMixinClass_fetchTheme() {
             try {
-                const { body: fetchedTheme } = await this.fetchStaticResource(THEME_FILENAME, 'json');
+                const { body: fetchedTheme } = await this.fetchStaticResource(`${this.styleId}.json`, 'json');
                 // In development mode, we sometimes want to override the UI components URL
                 // The override components might have a different theme, so we need to merge it with the project theme in order to see the components correctly
                 if (process.env.NODE_ENV === 'development') {
@@ -683,32 +694,42 @@ const themeMixin = createSingletonMixin((superclass) => {
             return __classPrivateFieldGet(this, _ThemeMixinClass__themeResource, "f");
         },
         _ThemeMixinClass_loadGlobalStyle = async function _ThemeMixinClass_loadGlobalStyle() {
-            var _a, _b;
+            var _b, _c;
             const theme = await __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);
+            if (!__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f")) {
+                __classPrivateFieldSet(this, _ThemeMixinClass_globalStyleTag, document.createElement('style'), "f");
+                __classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").id = 'global-style';
+                this.shadowRoot.appendChild(__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f"));
+            }
+            __classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").innerText =
+                (((_b = theme === null || theme === void 0 ? void 0 : theme.light) === null || _b === void 0 ? void 0 : _b.globals) || '') + (((_c = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _c === void 0 ? void 0 : _c.globals) || '');
         },
         _ThemeMixinClass_loadComponentsStyle = async function _ThemeMixinClass_loadComponentsStyle() {
-            var _a, _b;
+            var _b, _c;
             const theme = Object.assign({}, (await __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,
+                    light: (_b = theme === null || theme === void 0 ? void 0 : theme.light) === null || _b === void 0 ? void 0 : _b.components,
+                    dark: (_c = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _c === void 0 ? void 0 : _c.components,
                 };
             }
         },
+        _ThemeMixinClass_getFontsConfig = async function _ThemeMixinClass_getFontsConfig() {
+            var _b, _c;
+            const { projectConfig } = (await this.config) || {};
+            const newConfig = (_b = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.styles) === null || _b === void 0 ? void 0 : _b[this.styleId];
+            const oldConfig = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate;
+            const config = newConfig || oldConfig;
+            const fonts = (_c = config === null || config === void 0 ? void 0 : config[this.theme]) === null || _c === void 0 ? void 0 : _c.fonts;
+            return fonts;
+        },
         _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;
+            const fonts = await __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_getFontsConfig).call(this);
             if (fonts) {
                 Object.values(fonts).forEach((font) => {
                     if (font.url) {
@@ -717,6 +738,9 @@ const themeMixin = createSingletonMixin((superclass) => {
                     }
                 });
             }
+            else {
+                this.logger.debug('No fonts to load');
+            }
         },
         _ThemeMixinClass_applyTheme = async function _ThemeMixinClass_applyTheme() {
             this.rootElement.setAttribute('data-theme', this.theme);
@@ -820,7 +844,7 @@ const formMixin = createSingletonMixin((superclass) => class FormMixinClass exte
 const baseStaticUrlMixin = createSingletonMixin((superclass) => {
     return class BaseStaticUrlMixinClass extends superclass {
         get baseStaticUrl() {
-            return this.getAttribute('base-static-url');
+            return this.getAttribute('base-static-url') || '';
         }
     };
 });