@descope/sdk-mixins 0.13.0 → 0.13.2

package/dist/esm/mixins/initElementMixin.js

@@ -1,19 +1,20 @@
-import { createSingletonMixin } from '@descope/sdk-helpers';
+import { createSingletonMixin, compose } from '@descope/sdk-helpers';
+import { injectStyleMixin } from './injectStyleMixin.js';
 
 const CONTENT_ROOT_ID = 'content-root';
 const ROOT_ID = 'root';
-const initElementMixin = createSingletonMixin((superclass) => class InitElementMixinClass extends superclass {
-    constructor(...rest) {
-        var _a, _b, _c;
-        var _d;
-        super(...rest);
-        this.attachShadow({ mode: 'open' }).innerHTML = `
+const initElementMixin = createSingletonMixin((superclass) => {
+    const BaseClass = compose(injectStyleMixin)(superclass);
+    return class InitElementMixinClass extends BaseClass {
+        constructor(...rest) {
+            var _a, _b;
+            super(...rest);
+            this.attachShadow({ mode: 'open' }).innerHTML = `
           <div id="${ROOT_ID}">
             <div id="${CONTENT_ROOT_ID}"></div>
           </div>
           `;
-        const sheet = new CSSStyleSheet();
-        sheet.replaceSync(`
+            this.injectStyle(`
             #${ROOT_ID}, #${CONTENT_ROOT_ID} {
               height: 100%;
             }
@@ -22,15 +23,11 @@ const initElementMixin = createSingletonMixin((superclass) => class InitElementM
               height: fit-content;
             }
           `);
-        (_a = (_d = this.shadowRoot).adoptedStyleSheets) !== null && _a !== void 0 ? _a : (_d.adoptedStyleSheets = []);
-        this.shadowRoot.adoptedStyleSheets = [
-            ...this.shadowRoot.adoptedStyleSheets,
-            sheet,
-        ];
-        this.contentRootElement =
-            (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(CONTENT_ROOT_ID);
-        this.rootElement = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.getElementById(ROOT_ID);
-    }
+            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);
+        }
+    };
 });
 
 export { initElementMixin };

package/dist/esm/mixins/initElementMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"initElementMixin.js","sources":["../../../src/mixins/initElementMixin.ts"],"sourcesContent":["import { createSingletonMixin } from '@descope/sdk-helpers';\n\nconst CONTENT_ROOT_ID = 'content-root';\nconst ROOT_ID = 'root';\n\nexport const initElementMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class InitElementMixinClass extends superclass {\n      // the content of contentRootElement is being replaced dynamically\n      // do not place content which is not dynamic inside\n      contentRootElement: HTMLElement;\n\n      rootElement: HTMLElement;\n\n      constructor(...rest) {\n        super(...rest);\n\n        this.attachShadow({ mode: 'open' }).innerHTML = `\n          <div id=\"${ROOT_ID}\">\n            <div id=\"${CONTENT_ROOT_ID}\"></div>\n          </div>\n          `;\n\n        const sheet = new CSSStyleSheet();\n        sheet.replaceSync(`\n            #${ROOT_ID}, #${CONTENT_ROOT_ID} {\n              height: 100%;\n            }\n            #${ROOT_ID} {\n              position: relative;\n              height: fit-content;\n            }\n          `);\n\n        this.shadowRoot.adoptedStyleSheets ??= [];\n        this.shadowRoot.adoptedStyleSheets = [\n          ...this.shadowRoot.adoptedStyleSheets,\n          sheet,\n        ];\n\n        this.contentRootElement =\n          this.shadowRoot?.getElementById(CONTENT_ROOT_ID)!;\n        this.rootElement = this.shadowRoot?.getElementById(ROOT_ID)!;\n      }\n    },\n);\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe,GAAG,cAAc,CAAC;AACvC,MAAM,OAAO,GAAG,MAAM,CAAC;AAEhB,MAAM,gBAAgB,GAAG,oBAAoB,CAClD,CAAqC,UAAa,KAChD,MAAM,qBAAsB,SAAQ,UAAU,CAAA;AAO5C,IAAA,WAAA,CAAY,GAAG,IAAI,EAAA;;;AACjB,QAAA,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QAEf,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG,CAAA;qBACnC,OAAO,CAAA;uBACL,eAAe,CAAA;;WAE3B,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,KAAK,CAAC,WAAW,CAAC,CAAA;AACX,aAAA,EAAA,OAAO,MAAM,eAAe,CAAA;;;eAG5B,OAAO,CAAA;;;;AAIX,UAAA,CAAA,CAAC,CAAC;QAEL,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,EAAC,kBAAkB,MAAlB,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAAA,EAAA,CAAA,kBAAkB,GAAK,EAAE,CAAC,CAAA;AAC1C,QAAA,IAAI,CAAC,UAAU,CAAC,kBAAkB,GAAG;AACnC,YAAA,GAAG,IAAI,CAAC,UAAU,CAAC,kBAAkB;YACrC,KAAK;SACN,CAAC;AAEF,QAAA,IAAI,CAAC,kBAAkB;YACrB,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,eAAe,CAAE,CAAC;AACpD,QAAA,IAAI,CAAC,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,OAAO,CAAE,CAAC;KAC9D;AACF,CAAA;;;;"}
+{"version":3,"file":"initElementMixin.js","sources":["../../../src/mixins/initElementMixin.ts"],"sourcesContent":["import { compose, createSingletonMixin } from '@descope/sdk-helpers';\nimport { injectStyleMixin } from './injectStyleMixin';\n\nconst CONTENT_ROOT_ID = 'content-root';\nconst ROOT_ID = 'root';\n\nexport const initElementMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(injectStyleMixin)(superclass);\n    return class InitElementMixinClass extends BaseClass {\n      // the content of contentRootElement is being replaced dynamically\n      // do not place content which is not dynamic inside\n      contentRootElement: HTMLElement;\n\n      rootElement: HTMLElement;\n\n      constructor(...rest) {\n        super(...rest);\n\n        this.attachShadow({ mode: 'open' }).innerHTML = `\n          <div id=\"${ROOT_ID}\">\n            <div id=\"${CONTENT_ROOT_ID}\"></div>\n          </div>\n          `;\n\n        this.injectStyle(`\n            #${ROOT_ID}, #${CONTENT_ROOT_ID} {\n              height: 100%;\n            }\n            #${ROOT_ID} {\n              position: relative;\n              height: fit-content;\n            }\n          `);\n\n        this.contentRootElement =\n          this.shadowRoot?.getElementById(CONTENT_ROOT_ID)!;\n        this.rootElement = this.shadowRoot?.getElementById(ROOT_ID)!;\n      }\n    };\n  },\n);\n"],"names":[],"mappings":";;;AAGA,MAAM,eAAe,GAAG,cAAc,CAAC;AACvC,MAAM,OAAO,GAAG,MAAM,CAAC;MAEV,gBAAgB,GAAG,oBAAoB,CAClD,CAAqC,UAAa,KAAI;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAC,CAAC;IACxD,OAAO,MAAM,qBAAsB,SAAQ,SAAS,CAAA;AAOlD,QAAA,WAAA,CAAY,GAAG,IAAI,EAAA;;AACjB,YAAA,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAEf,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG,CAAA;qBACnC,OAAO,CAAA;uBACL,eAAe,CAAA;;WAE3B,CAAC;YAEJ,IAAI,CAAC,WAAW,CAAC,CAAA;AACV,aAAA,EAAA,OAAO,MAAM,eAAe,CAAA;;;eAG5B,OAAO,CAAA;;;;AAIX,UAAA,CAAA,CAAC,CAAC;AAEL,YAAA,IAAI,CAAC,kBAAkB;gBACrB,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,eAAe,CAAE,CAAC;AACpD,YAAA,IAAI,CAAC,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,OAAO,CAAE,CAAC;SAC9D;KACF,CAAC;AACJ,CAAC;;;;"}

package/dist/esm/mixins/injectStyleMixin.js

@@ -0,0 +1,59 @@
+import { createSingletonMixin, compose } from '@descope/sdk-helpers';
+import { cspNonceMixin } from './cspNonceMixin.js';
+
+// we should mimic the CSSStyleSheet API for the fns we are using
+class CSSStyleSheetMock {
+    constructor(ref, nonce, { prepend = false } = {}) {
+        this.styleEle = document.createElement('style');
+        this.styleEle.setAttribute('nonce', nonce);
+        this.ref = ref;
+        if (!this.ref) {
+            return;
+        }
+        if (prepend) {
+            this.ref.prepend(this.styleEle);
+        }
+        else {
+            this.ref.append(this.styleEle);
+        }
+    }
+    replaceSync(cssString) {
+        this.styleEle.textContent = cssString;
+    }
+    get cssRules() {
+        var _a;
+        return (_a = this.styleEle.sheet) === null || _a === void 0 ? void 0 : _a.cssRules;
+    }
+}
+const injectStyleMixin = createSingletonMixin((superclass) => {
+    const BaseClass = compose(cspNonceMixin)(superclass);
+    return class InjectStyleMixinClass extends BaseClass {
+        injectStyle(cssString, { prepend = false } = {}) {
+            let style;
+            try {
+                style = new CSSStyleSheet();
+            }
+            catch (e) {
+                // fallback for browsers that don't support CSSStyleSheet
+                style = new CSSStyleSheetMock(this.shadowRoot, this.nonce, {
+                    prepend,
+                });
+            }
+            if (cssString) {
+                style.replaceSync(cssString);
+            }
+            if (style instanceof CSSStyleSheet) {
+                const ref = this.shadowRoot;
+                if (ref && 'adoptedStyleSheets' in ref) {
+                    const adoptedStyleSheets = [...(ref.adoptedStyleSheets || [])];
+                    adoptedStyleSheets[prepend ? 'unshift' : 'push'](style);
+                    ref.adoptedStyleSheets = adoptedStyleSheets;
+                }
+            }
+            return style;
+        }
+    };
+});
+
+export { injectStyleMixin };
+//# sourceMappingURL=injectStyleMixin.js.map

package/dist/esm/mixins/injectStyleMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectStyleMixin.js","sources":["../../../src/mixins/injectStyleMixin.ts"],"sourcesContent":["import { compose, createSingletonMixin } from '@descope/sdk-helpers';\nimport { cspNonceMixin } from './cspNonceMixin';\n\n// we should mimic the CSSStyleSheet API for the fns we are using\nclass CSSStyleSheetMock {\n  styleEle: HTMLStyleElement;\n  ref: ShadowRoot | HTMLElement | null;\n  constructor(ref: ShadowRoot, nonce: string, { prepend = false } = {}) {\n    this.styleEle = document.createElement('style');\n    this.styleEle.setAttribute('nonce', nonce);\n    this.ref = ref;\n\n    if (!this.ref) {\n      return;\n    }\n\n    if (prepend) {\n      this.ref.prepend(this.styleEle);\n    } else {\n      this.ref.append(this.styleEle);\n    }\n  }\n\n  replaceSync(cssString: string) {\n    this.styleEle.textContent = cssString;\n  }\n\n  get cssRules() {\n    return this.styleEle.sheet?.cssRules;\n  }\n}\n\nexport const injectStyleMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(cspNonceMixin)(superclass);\n    return class InjectStyleMixinClass extends BaseClass {\n      injectStyle(cssString: string, { prepend = false } = {}) {\n        let style: CSSStyleSheet | CSSStyleSheetMock;\n        try {\n          style = new CSSStyleSheet();\n        } catch (e) {\n          // fallback for browsers that don't support CSSStyleSheet\n          style = new CSSStyleSheetMock(this.shadowRoot, this.nonce, {\n            prepend,\n          });\n        }\n\n        if (cssString) {\n          style.replaceSync(cssString);\n        }\n\n        if (style instanceof CSSStyleSheet) {\n          const ref = this.shadowRoot;\n\n          if (ref && 'adoptedStyleSheets' in ref) {\n            const adoptedStyleSheets = [...(ref.adoptedStyleSheets || [])];\n            adoptedStyleSheets[prepend ? 'unshift' : 'push'](style);\n\n            ref.adoptedStyleSheets = adoptedStyleSheets;\n          }\n        }\n\n        return style;\n      }\n    };\n  },\n);\n"],"names":[],"mappings":";;;AAGA;AACA,MAAM,iBAAiB,CAAA;IAGrB,WAAY,CAAA,GAAe,EAAE,KAAa,EAAE,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,EAAA;QAClE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC3C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AAEf,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACb,OAAO;SACR;QAED,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACjC;aAAM;YACL,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAChC;KACF;AAED,IAAA,WAAW,CAAC,SAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC;KACvC;AAED,IAAA,IAAI,QAAQ,GAAA;;QACV,OAAO,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,QAAQ,CAAC;KACtC;AACF,CAAA;MAEY,gBAAgB,GAAG,oBAAoB,CAClD,CAAqC,UAAa,KAAI;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IACrD,OAAO,MAAM,qBAAsB,SAAQ,SAAS,CAAA;QAClD,WAAW,CAAC,SAAiB,EAAE,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,EAAA;AACrD,YAAA,IAAI,KAAwC,CAAC;AAC7C,YAAA,IAAI;AACF,gBAAA,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;aAC7B;YAAC,OAAO,CAAC,EAAE;;gBAEV,KAAK,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE;oBACzD,OAAO;AACR,iBAAA,CAAC,CAAC;aACJ;YAED,IAAI,SAAS,EAAE;AACb,gBAAA,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;aAC9B;AAED,YAAA,IAAI,KAAK,YAAY,aAAa,EAAE;AAClC,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC;AAE5B,gBAAA,IAAI,GAAG,IAAI,oBAAoB,IAAI,GAAG,EAAE;AACtC,oBAAA,MAAM,kBAAkB,GAAG,CAAC,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC,CAAC;AAC/D,oBAAA,kBAAkB,CAAC,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AAExD,oBAAA,GAAG,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;iBAC7C;aACF;AAED,YAAA,OAAO,KAAK,CAAC;SACd;KACF,CAAC;AACJ,CAAC;;;;"}

package/dist/esm/mixins/themeMixin/themeMixin.js

@@ -10,6 +10,7 @@ import { DEFAULT_STYLE_ID } from './constants.js';
 import { loadFont, loadDevTheme } from './helpers.js';
 import { observeAttributesMixin } from '../observeAttributesMixin/observeAttributesMixin.js';
 import { UI_COMPONENTS_URL_KEY } from '../descopeUiMixin/constants.js';
+import { injectStyleMixin } from '../injectStyleMixin.js';
 
 const themeValidation = (_, theme) => (theme || false) &&
     theme !== 'light' &&
@@ -17,7 +18,7 @@ const themeValidation = (_, theme) => (theme || false) &&
     'Supported theme values are "light", "dark", or leave empty for using the OS theme';
 const themeMixin = createSingletonMixin((superclass) => {
     var _ThemeMixinClass_instances, _ThemeMixinClass_globalStyle, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_getFontsConfig, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _ThemeMixinClass_onThemeChange, _ThemeMixinClass_loadTheme, _ThemeMixinClass_toggleOsThemeChangeListener, _a;
-    const BaseClass = compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin)(superclass);
+    const BaseClass = compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin, injectStyleMixin)(superclass);
     return _a = class ThemeMixinClass extends BaseClass {
             constructor() {
                 super(...arguments);
@@ -108,20 +109,14 @@ const themeMixin = createSingletonMixin((superclass) => {
             return __classPrivateFieldGet(this, _ThemeMixinClass__themeResource, "f");
         },
         _ThemeMixinClass_loadGlobalStyle = async function _ThemeMixinClass_loadGlobalStyle() {
-            var _b, _c, _d;
-            var _e;
+            var _b, _c;
             const theme = await __classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get);
             if (!theme)
                 return;
             if (!__classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f")) {
-                __classPrivateFieldSet(this, _ThemeMixinClass_globalStyle, new CSSStyleSheet(), "f");
-                (_b = (_e = this.shadowRoot).adoptedStyleSheets) !== null && _b !== void 0 ? _b : (_e.adoptedStyleSheets = []);
-                this.shadowRoot.adoptedStyleSheets = [
-                    ...this.shadowRoot.adoptedStyleSheets,
-                    __classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f"),
-                ];
+                __classPrivateFieldSet(this, _ThemeMixinClass_globalStyle, this.injectStyle(''), "f");
             }
-            __classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f").replaceSync((((_c = theme === null || theme === void 0 ? void 0 : theme.light) === null || _c === void 0 ? void 0 : _c.globals) || '') + (((_d = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _d === void 0 ? void 0 : _d.globals) || ''));
+            __classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f").replaceSync((((_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 _b, _c;

package/dist/esm/mixins/themeMixin/themeMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeMixin.js","sources":["../../../../src/mixins/themeMixin/themeMixin.ts"],"sourcesContent":["/* eslint-disable no-underscore-dangle */\nimport { createSingletonMixin, compose } from '@descope/sdk-helpers';\nimport { configMixin } from '../configMixin';\nimport { createValidateAttributesMixin } from '../createValidateAttributesMixin';\nimport { descopeUiMixin } from '../descopeUiMixin';\nimport { initElementMixin } from '../initElementMixin';\nimport { initLifecycleMixin } from '../initLifecycleMixin';\nimport { staticResourcesMixin } from '../staticResourcesMixin';\nimport { DEFAULT_STYLE_ID } from './constants';\nimport { loadDevTheme, loadFont } from './helpers';\nimport { observeAttributesMixin } from '../observeAttributesMixin';\nimport { UI_COMPONENTS_URL_KEY } from '../descopeUiMixin/constants';\n\nconst themeValidation = (_: string, theme: string | null) =>\n  (theme || false) &&\n  theme !== 'light' &&\n  theme !== 'dark' &&\n  'Supported theme values are \"light\", \"dark\", or leave empty for using the OS theme';\n\nexport type ThemeOptions = 'light' | 'dark' | 'os';\n\nexport const themeMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(\n      createValidateAttributesMixin({ theme: themeValidation }),\n      staticResourcesMixin,\n      initLifecycleMixin,\n      descopeUiMixin,\n      configMixin,\n      initElementMixin,\n      observeAttributesMixin,\n    )(superclass);\n\n    return class ThemeMixinClass extends BaseClass {\n      #globalStyle: CSSStyleSheet;\n\n      get theme(): ThemeOptions {\n        const theme = this.getAttribute('theme') as ThemeOptions | null;\n\n        if (theme === 'os') {\n          const isOsDark =\n            window.matchMedia &&\n            window.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n\n          return isOsDark ? 'dark' : 'light';\n        }\n\n        return theme || 'light';\n      }\n\n      get styleId(): string {\n        return this.getAttribute('style-id') || DEFAULT_STYLE_ID;\n      }\n\n      #_themeResource: Promise<void | Record<string, any>>;\n\n      async #fetchTheme() {\n        try {\n          const { body: fetchedTheme } = await this.fetchStaticResource(\n            `${this.styleId}.json`,\n            'json',\n          );\n\n          // In development mode, we sometimes want to override the UI components URL\n          // 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\n          if (process.env.NODE_ENV === 'development') {\n            if (localStorage?.getItem(UI_COMPONENTS_URL_KEY)) {\n              try {\n                this.logger.warn(\n                  'You are in DEV mode, and UI components override URL was found\\ntrying to merge project theme with the default theme of the UI components',\n                );\n                const devTheme = await loadDevTheme();\n\n                if (devTheme) {\n                  fetchedTheme.light.components = {\n                    ...fetchedTheme.light.components,\n                    ...devTheme.light.components,\n                  };\n                  fetchedTheme.dark.components = {\n                    ...fetchedTheme.dark.components,\n                    ...devTheme.dark.components,\n                  };\n\n                  this.logger.warn('Theme was merged successfully');\n\n                  // eslint-disable-next-line no-console\n                  console.log(\n                    '%cNOTICE! This is not the theme that will be used in production!\\n\\nMake sure to test it without the override UI components URL!',\n                    'color: black; background-color:yellow; font-size: x-large',\n                  );\n                }\n              } catch (e) {\n                this.logger.error('Failed to merge UI components theme\\n', e);\n              }\n            }\n          }\n\n          return fetchedTheme;\n        } catch (e) {\n          this.logger.error(\n            'Cannot fetch theme file',\n            'make sure that your projectId & flowId are correct',\n          );\n        }\n\n        return undefined;\n      }\n\n      get #themeResource() {\n        if (!this.#_themeResource) {\n          this.#_themeResource = this.#fetchTheme();\n          this.#_themeResource.then((theme) =>\n            this.logger.debug('Fetched theme', theme),\n          );\n        }\n\n        // eslint-disable-next-line no-underscore-dangle\n        return this.#_themeResource;\n      }\n\n      async #loadGlobalStyle() {\n        const theme = await this.#themeResource;\n        if (!theme) return;\n\n        if (!this.#globalStyle) {\n          this.#globalStyle = new CSSStyleSheet();\n          this.shadowRoot.adoptedStyleSheets ??= [];\n          this.shadowRoot.adoptedStyleSheets = [\n            ...this.shadowRoot.adoptedStyleSheets,\n            this.#globalStyle,\n          ];\n        }\n\n        this.#globalStyle.replaceSync(\n          (theme?.light?.globals || '') + (theme?.dark?.globals || ''),\n        );\n      }\n\n      async #loadComponentsStyle() {\n        const theme = { ...(await this.#themeResource) } as Record<string, any>;\n        if (!theme) return;\n\n        const descopeUi = await this.descopeUi;\n        if (descopeUi?.componentsThemeManager) {\n          descopeUi.componentsThemeManager.themes = {\n            light: theme?.light?.components,\n            dark: theme?.dark?.components,\n          };\n        }\n      }\n\n      async #getFontsConfig() {\n        const { projectConfig } = (await this.config) || {};\n\n        const newConfig = projectConfig?.styles?.[this.styleId];\n        const oldConfig = projectConfig?.cssTemplate;\n\n        const config = newConfig || oldConfig;\n\n        const fonts: Record<string, { url?: string }> | undefined =\n          config?.[this.theme]?.fonts;\n\n        return fonts;\n      }\n\n      async #loadFonts() {\n        const fonts = await this.#getFontsConfig();\n        if (fonts) {\n          Object.values(fonts).forEach((font) => {\n            if (font.url) {\n              this.logger.debug(`Loading font from URL \"${font.url}\"`);\n              loadFont(font.url);\n            }\n          });\n        } else {\n          this.logger.debug('No fonts to load');\n        }\n      }\n\n      async #applyTheme() {\n        this.rootElement.setAttribute('data-theme', this.theme);\n        const descopeUi = await this.descopeUi;\n        if (descopeUi?.componentsThemeManager) {\n          descopeUi.componentsThemeManager.currentThemeName = this.theme;\n        }\n      }\n\n      #onThemeChange = () => {\n        this.#loadTheme();\n        this.#toggleOsThemeChangeListener(this.getAttribute('theme') === 'os');\n      };\n\n      #loadTheme() {\n        this.#loadFonts();\n        this.#applyTheme();\n      }\n\n      // add or remove os theme change listener\n      #toggleOsThemeChangeListener = (listen: boolean) => {\n        const method = listen ? 'addEventListener' : 'removeEventListener';\n        window\n          .matchMedia?.('(prefers-color-scheme: dark)')\n          ?.[method]?.('change', () => this.#loadTheme());\n      };\n\n      async init() {\n        await super.init?.();\n\n        this.#loadGlobalStyle();\n        this.#loadComponentsStyle();\n        this.#onThemeChange();\n\n        this.observeAttributes(['theme'], this.#onThemeChange);\n\n        this.observeAttributes(['style-id'], () => {\n          this.#_themeResource = null;\n          this.#loadFonts();\n          this.#loadGlobalStyle();\n          this.#loadComponentsStyle();\n        });\n      }\n    };\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"themeMixin.js","sources":["../../../../src/mixins/themeMixin/themeMixin.ts"],"sourcesContent":["/* eslint-disable no-underscore-dangle */\nimport { createSingletonMixin, compose } from '@descope/sdk-helpers';\nimport { configMixin } from '../configMixin';\nimport { createValidateAttributesMixin } from '../createValidateAttributesMixin';\nimport { descopeUiMixin } from '../descopeUiMixin';\nimport { initElementMixin } from '../initElementMixin';\nimport { initLifecycleMixin } from '../initLifecycleMixin';\nimport { staticResourcesMixin } from '../staticResourcesMixin';\nimport { DEFAULT_STYLE_ID } from './constants';\nimport { loadDevTheme, loadFont } from './helpers';\nimport { observeAttributesMixin } from '../observeAttributesMixin';\nimport { UI_COMPONENTS_URL_KEY } from '../descopeUiMixin/constants';\nimport { injectStyleMixin } from '../injectStyleMixin';\n\nconst themeValidation = (_: string, theme: string | null) =>\n  (theme || false) &&\n  theme !== 'light' &&\n  theme !== 'dark' &&\n  'Supported theme values are \"light\", \"dark\", or leave empty for using the OS theme';\n\nexport type ThemeOptions = 'light' | 'dark' | 'os';\n\nexport const themeMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(\n      createValidateAttributesMixin({ theme: themeValidation }),\n      staticResourcesMixin,\n      initLifecycleMixin,\n      descopeUiMixin,\n      configMixin,\n      initElementMixin,\n      observeAttributesMixin,\n      injectStyleMixin,\n    )(superclass);\n\n    return class ThemeMixinClass extends BaseClass {\n      #globalStyle: ReturnType<typeof this.injectStyle>;\n\n      get theme(): ThemeOptions {\n        const theme = this.getAttribute('theme') as ThemeOptions | null;\n\n        if (theme === 'os') {\n          const isOsDark =\n            window.matchMedia &&\n            window.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n\n          return isOsDark ? 'dark' : 'light';\n        }\n\n        return theme || 'light';\n      }\n\n      get styleId(): string {\n        return this.getAttribute('style-id') || DEFAULT_STYLE_ID;\n      }\n\n      #_themeResource: Promise<void | Record<string, any>>;\n\n      async #fetchTheme() {\n        try {\n          const { body: fetchedTheme } = await this.fetchStaticResource(\n            `${this.styleId}.json`,\n            'json',\n          );\n\n          // In development mode, we sometimes want to override the UI components URL\n          // 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\n          if (process.env.NODE_ENV === 'development') {\n            if (localStorage?.getItem(UI_COMPONENTS_URL_KEY)) {\n              try {\n                this.logger.warn(\n                  'You are in DEV mode, and UI components override URL was found\\ntrying to merge project theme with the default theme of the UI components',\n                );\n                const devTheme = await loadDevTheme();\n\n                if (devTheme) {\n                  fetchedTheme.light.components = {\n                    ...fetchedTheme.light.components,\n                    ...devTheme.light.components,\n                  };\n                  fetchedTheme.dark.components = {\n                    ...fetchedTheme.dark.components,\n                    ...devTheme.dark.components,\n                  };\n\n                  this.logger.warn('Theme was merged successfully');\n\n                  // eslint-disable-next-line no-console\n                  console.log(\n                    '%cNOTICE! This is not the theme that will be used in production!\\n\\nMake sure to test it without the override UI components URL!',\n                    'color: black; background-color:yellow; font-size: x-large',\n                  );\n                }\n              } catch (e) {\n                this.logger.error('Failed to merge UI components theme\\n', e);\n              }\n            }\n          }\n\n          return fetchedTheme;\n        } catch (e) {\n          this.logger.error(\n            'Cannot fetch theme file',\n            'make sure that your projectId & flowId are correct',\n          );\n        }\n\n        return undefined;\n      }\n\n      get #themeResource() {\n        if (!this.#_themeResource) {\n          this.#_themeResource = this.#fetchTheme();\n          this.#_themeResource.then((theme) =>\n            this.logger.debug('Fetched theme', theme),\n          );\n        }\n\n        // eslint-disable-next-line no-underscore-dangle\n        return this.#_themeResource;\n      }\n\n      async #loadGlobalStyle() {\n        const theme = await this.#themeResource;\n        if (!theme) return;\n\n        if (!this.#globalStyle) {\n          this.#globalStyle = this.injectStyle('');\n        }\n\n        this.#globalStyle.replaceSync(\n          (theme?.light?.globals || '') + (theme?.dark?.globals || ''),\n        );\n      }\n\n      async #loadComponentsStyle() {\n        const theme = { ...(await this.#themeResource) } as Record<string, any>;\n        if (!theme) return;\n\n        const descopeUi = await this.descopeUi;\n        if (descopeUi?.componentsThemeManager) {\n          descopeUi.componentsThemeManager.themes = {\n            light: theme?.light?.components,\n            dark: theme?.dark?.components,\n          };\n        }\n      }\n\n      async #getFontsConfig() {\n        const { projectConfig } = (await this.config) || {};\n\n        const newConfig = projectConfig?.styles?.[this.styleId];\n        const oldConfig = projectConfig?.cssTemplate;\n\n        const config = newConfig || oldConfig;\n\n        const fonts: Record<string, { url?: string }> | undefined =\n          config?.[this.theme]?.fonts;\n\n        return fonts;\n      }\n\n      async #loadFonts() {\n        const fonts = await this.#getFontsConfig();\n        if (fonts) {\n          Object.values(fonts).forEach((font) => {\n            if (font.url) {\n              this.logger.debug(`Loading font from URL \"${font.url}\"`);\n              loadFont(font.url);\n            }\n          });\n        } else {\n          this.logger.debug('No fonts to load');\n        }\n      }\n\n      async #applyTheme() {\n        this.rootElement.setAttribute('data-theme', this.theme);\n        const descopeUi = await this.descopeUi;\n        if (descopeUi?.componentsThemeManager) {\n          descopeUi.componentsThemeManager.currentThemeName = this.theme;\n        }\n      }\n\n      #onThemeChange = () => {\n        this.#loadTheme();\n        this.#toggleOsThemeChangeListener(this.getAttribute('theme') === 'os');\n      };\n\n      #loadTheme() {\n        this.#loadFonts();\n        this.#applyTheme();\n      }\n\n      // add or remove os theme change listener\n      #toggleOsThemeChangeListener = (listen: boolean) => {\n        const method = listen ? 'addEventListener' : 'removeEventListener';\n        window\n          .matchMedia?.('(prefers-color-scheme: dark)')\n          ?.[method]?.('change', () => this.#loadTheme());\n      };\n\n      async init() {\n        await super.init?.();\n\n        this.#loadGlobalStyle();\n        this.#loadComponentsStyle();\n        this.#onThemeChange();\n\n        this.observeAttributes(['theme'], this.#onThemeChange);\n\n        this.observeAttributes(['style-id'], () => {\n          this.#_themeResource = null;\n          this.#loadFonts();\n          this.#loadGlobalStyle();\n          this.#loadComponentsStyle();\n        });\n      }\n    };\n  },\n);\n"],"names":[],"mappings":"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"}