npm - @descope/sdk-mixins - Versions diffs - 0.0.0-next-bd24a0f1-20250505 → 0.0.0-next-1e6d5ae0-20250528 - Mend

@descope/sdk-mixins 0.0.0-next-bd24a0f1-20250505 → 0.0.0-next-1e6d5ae0-20250528

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/esm/mixins/debuggerMixin/debugger-wc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"debugger-wc.js","sources":["../../../../src/mixins/debuggerMixin/debugger-wc.ts"],"sourcesContent":["/* eslint-disable no-param-reassign /\nimport { State } from '@descope/sdk-helpers';\nimport {\n addOnResize,\n dragElement,\n limitCoordinateToScreenBoundaries,\n} from './helpers';\nimport { DebuggerMessage } from './types';\n\nconst INITIAL_POS_THRESHOLD = 32;\nconst INITIAL_WIDTH = 300;\nconst INITIAL_HEIGHT = 200;\nconst MIN_SIZE = 200;\n\nconst template = document.createElement('template');\ntemplate.innerHTML = `\n<div style=\"top:${INITIAL_POS_THRESHOLD}px; left:${\n window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD\n}px;\" class=\"debugger\">\n <div class=\"header\">\n <span>Debugger messages</span>\n </div>\n <div class=\"content\">\n <div class=\"empty-state\">\n No errors detected 👀\n </div>\n </div>\n</div>\n`;\n\nconst icon = `<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<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\"/>\n</svg>\n`;\n\nconst style = `\n.debugger {\n all: initial;\n width: ${INITIAL_WIDTH}px;\n height: ${INITIAL_HEIGHT}px;\n background-color: #FAFAFA;\n position: fixed;\n font-family: \"Helvetica Neue\", sans-serif;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;\n border-radius: 8px;\n overflow: hidden;\n border: 1px solid lightgrey;\n pointer-events: initial;\n display: flex;\n flex-direction: column;\n min-width: ${MIN_SIZE}px;\n max-width: 600px;\n max-height: calc(100% - ${INITIAL_POS_THRESHOLD 2}px);\n min-height: ${MIN_SIZE}px;\n resize: both;\n }\n\n .header {\n padding: 8px 16px;\n display: flex;\n align-items: center;\n background-color: #EEEEEE;\n cursor: move;\n border-bottom: 1px solid #e0e0e0;\n }\n\n .content {\n font-size: 14px;\n flex-grow: 1;\n overflow: auto;\n }\n\n .msg {\n border-bottom: 1px solid lightgrey;\n padding: 8px 16px;\n display: flex;\n gap: 5px;\n background-color: #FAFAFA;\n }\n\n .msg.collapsible {\n cursor: pointer;\n }\n\n .empty-state {\n padding: 8px 16px;\n background-color: #FAFAFA;\n }\n\n\n .msg.collapsible:not(.collapsed) {\n background-color: #F5F5F5;\n }\n\n .msg_title {\n padding-bottom: 5px;\n display: flex;\n gap: 8px;\n font-weight: 500;\n }\n\n .msg svg {\n padding: 1px;\n flex-shrink: 0;\n margin-top: -2px;\n }\n\n .msg_content {\n overflow: hidden;\n flex-grow: 1;\n margin-right:5px;\n }\n\n .msg_desc {\n color: #646464;\n cursor: initial;\n word-wrap: break-word;\n }\n\n .msg.collapsed .msg_desc {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .msg.collapsible.collapsed .chevron {\n transform: rotate(-45deg) translateX(-2px);\n }\n\n .msg.collapsible .chevron {\n content: \"\";\n width:6px;\n height:6px;\n border-bottom: 2px solid grey;\n border-right: 2px solid grey;\n transform: rotate(45deg) translateX(-1px);\n margin: 5px;\n flex-shrink:0;\n }\n`;\n\ntype MessagesState = { messages: DebuggerMessage[] };\n\nclass Debugger extends HTMLElement {\n #messagesState = new State<MessagesState>({ messages: [] });\n\n #rootEle: HTMLDivElement;\n\n #contentEle: HTMLDivElement;\n\n #headerEle: HTMLDivElement;\n\n #eventsCbRefs = {\n resize: this.#onWindowResize.bind(this),\n };\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' });\n this.shadowRoot?.appendChild(template.content.cloneNode(true));\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(style);\n this.shadowRoot.adoptedStyleSheets ??= [];\n this.shadowRoot.adoptedStyleSheets = [\n ...this.shadowRoot.adoptedStyleSheets,\n sheet,\n ];\n\n this.#rootEle =\n this.shadowRoot!.querySelector<HTMLDivElement>('.debugger')!;\n this.#contentEle = this.#rootEle.querySelector<HTMLDivElement>('.content')!;\n this.#headerEle = this.#rootEle.querySelector<HTMLDivElement>('.header')!;\n }\n\n updateData(data: DebuggerMessage \| DebuggerMessage[]) {\n this.#messagesState.update((state) => ({\n messages: state.messages.concat(data),\n }));\n }\n\n #onNewMessages(data: MessagesState) {\n this.#renderMessages(data);\n this.#setCollapsibleMessages();\n }\n\n #renderMessages(data: MessagesState) {\n this.#contentEle.innerHTML = data.messages\n .map(\n (message) => `\n <div class=\"msg\">\n ${icon}\n <div class=\"msg_content\">\n <div class=\"msg_title\">\n ${message.title}\n </div>\n <div class=\"msg_desc\">\n ${message.description \|\| ''}\n </div>\n </div>\n <div class=\"chevron\"></div>\n </div>\n `,\n )\n .join('');\n }\n\n #setCollapsibleMessages() {\n this.#contentEle.querySelectorAll('.msg').forEach((element: Element) => {\n const ele = element as HTMLElement;\n const descEle = ele.querySelector('.msg_desc');\n const lineHeight = 20;\n const isScroll = descEle!.scrollWidth > descEle!.clientWidth;\n const isMultiLine = descEle!.clientHeight > lineHeight;\n const isCollapsible = isScroll \|\| isMultiLine;\n\n if (isCollapsible) {\n ele.classList.add('collapsible');\n ele.onclick = (e: MouseEvent) => {\n // message description should not toggle collapse\n if (!(e.target as HTMLElement).classList.contains('msg_desc')) {\n ele.classList.toggle('collapsed');\n }\n };\n } else {\n ele.classList.remove('collapsible');\n ele.onclick = null;\n }\n });\n }\n\n #onWindowResize() {\n // when window is resizing we want to make sure debugger is still visible\n const [left, top] = limitCoordinateToScreenBoundaries(\n this.#rootEle,\n Number.parseInt(this.#rootEle.style.left, 10),\n Number.parseInt(this.#rootEle.style.top, 10),\n { top: 'all', bottom: 100, left: 100, right: 100 },\n );\n this.#rootEle.style.top = `${top}px`;\n this.#rootEle.style.left = `${left}px`;\n }\n\n connectedCallback() {\n dragElement(this.#rootEle, this.#headerEle, {\n top: 'all',\n bottom: 100,\n left: 100,\n right: 100,\n });\n\n window.addEventListener('resize', this.#eventsCbRefs.resize);\n\n addOnResize(this.#rootEle);\n this.#rootEle.onresize = this.#setCollapsibleMessages.bind(this);\n\n this.#messagesState.subscribe(this.#onNewMessages.bind(this));\n }\n\n disconnectedCallback() {\n this.#messagesState.unsubscribeAll();\n window.removeEventListener('resize', this.#eventsCbRefs.resize);\n }\n}\n\nif (!customElements.get('descope-debugger')) {\n customElements.define('descope-debugger', Debugger);\n}\n\nexport default Debugger;\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"debugger-wc.js","sources":["../../../../src/mixins/debuggerMixin/debugger-wc.ts"],"sourcesContent":["/* eslint-disable no-param-reassign /\nimport { compose, State } from '@descope/sdk-helpers';\nimport {\n addOnResize,\n dragElement,\n limitCoordinateToScreenBoundaries,\n} from './helpers';\nimport { DebuggerMessage } from './types';\nimport { injectStyleMixin } from '../injectStyleMixin';\n\nconst INITIAL_POS_THRESHOLD = 32;\nconst INITIAL_WIDTH = 300;\nconst INITIAL_HEIGHT = 200;\nconst MIN_SIZE = 200;\n\nconst template = document.createElement('template');\ntemplate.innerHTML = `\n<div style=\"top:${INITIAL_POS_THRESHOLD}px; left:${\n window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD\n}px;\" class=\"debugger\">\n <div class=\"header\">\n <span>Debugger messages</span>\n </div>\n <div class=\"content\">\n <div class=\"empty-state\">\n No errors detected 👀\n </div>\n </div>\n</div>\n`;\n\nconst icon = `<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<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\"/>\n</svg>\n`;\n\nconst style = `\n.debugger {\n all: initial;\n width: ${INITIAL_WIDTH}px;\n height: ${INITIAL_HEIGHT}px;\n background-color: #FAFAFA;\n position: fixed;\n font-family: \"Helvetica Neue\", sans-serif;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;\n border-radius: 8px;\n overflow: hidden;\n border: 1px solid lightgrey;\n pointer-events: initial;\n display: flex;\n flex-direction: column;\n min-width: ${MIN_SIZE}px;\n max-width: 600px;\n max-height: calc(100% - ${INITIAL_POS_THRESHOLD 2}px);\n min-height: ${MIN_SIZE}px;\n resize: both;\n }\n\n .header {\n padding: 8px 16px;\n display: flex;\n align-items: center;\n background-color: #EEEEEE;\n cursor: move;\n border-bottom: 1px solid #e0e0e0;\n }\n\n .content {\n font-size: 14px;\n flex-grow: 1;\n overflow: auto;\n }\n\n .msg {\n border-bottom: 1px solid lightgrey;\n padding: 8px 16px;\n display: flex;\n gap: 5px;\n background-color: #FAFAFA;\n }\n\n .msg.collapsible {\n cursor: pointer;\n }\n\n .empty-state {\n padding: 8px 16px;\n background-color: #FAFAFA;\n }\n\n\n .msg.collapsible:not(.collapsed) {\n background-color: #F5F5F5;\n }\n\n .msg_title {\n padding-bottom: 5px;\n display: flex;\n gap: 8px;\n font-weight: 500;\n }\n\n .msg svg {\n padding: 1px;\n flex-shrink: 0;\n margin-top: -2px;\n }\n\n .msg_content {\n overflow: hidden;\n flex-grow: 1;\n margin-right:5px;\n }\n\n .msg_desc {\n color: #646464;\n cursor: initial;\n word-wrap: break-word;\n }\n\n .msg.collapsed .msg_desc {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .msg.collapsible.collapsed .chevron {\n transform: rotate(-45deg) translateX(-2px);\n }\n\n .msg.collapsible .chevron {\n content: \"\";\n width:6px;\n height:6px;\n border-bottom: 2px solid grey;\n border-right: 2px solid grey;\n transform: rotate(45deg) translateX(-1px);\n margin: 5px;\n flex-shrink:0;\n }\n`;\n\ntype MessagesState = { messages: DebuggerMessage[] };\n\nconst BaseClass = compose(injectStyleMixin)(HTMLElement);\n\nclass Debugger extends BaseClass {\n #messagesState = new State<MessagesState>({ messages: [] });\n\n #rootEle: HTMLDivElement;\n\n #contentEle: HTMLDivElement;\n\n #headerEle: HTMLDivElement;\n\n #eventsCbRefs = {\n resize: this.#onWindowResize.bind(this),\n };\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' });\n this.shadowRoot?.appendChild(template.content.cloneNode(true));\n this.injectStyle(style);\n\n this.#rootEle =\n this.shadowRoot!.querySelector<HTMLDivElement>('.debugger')!;\n this.#contentEle = this.#rootEle.querySelector<HTMLDivElement>('.content')!;\n this.#headerEle = this.#rootEle.querySelector<HTMLDivElement>('.header')!;\n }\n\n updateData(data: DebuggerMessage \| DebuggerMessage[]) {\n this.#messagesState.update((state) => ({\n messages: state.messages.concat(data),\n }));\n }\n\n #onNewMessages(data: MessagesState) {\n this.#renderMessages(data);\n this.#setCollapsibleMessages();\n }\n\n #renderMessages(data: MessagesState) {\n this.#contentEle.innerHTML = data.messages\n .map(\n (message) => `\n <div class=\"msg\">\n ${icon}\n <div class=\"msg_content\">\n <div class=\"msg_title\">\n ${message.title}\n </div>\n <div class=\"msg_desc\">\n ${message.description \|\| ''}\n </div>\n </div>\n <div class=\"chevron\"></div>\n </div>\n `,\n )\n .join('');\n }\n\n #setCollapsibleMessages() {\n this.#contentEle.querySelectorAll('.msg').forEach((element: Element) => {\n const ele = element as HTMLElement;\n const descEle = ele.querySelector('.msg_desc');\n const lineHeight = 20;\n const isScroll = descEle!.scrollWidth > descEle!.clientWidth;\n const isMultiLine = descEle!.clientHeight > lineHeight;\n const isCollapsible = isScroll \|\| isMultiLine;\n\n if (isCollapsible) {\n ele.classList.add('collapsible');\n ele.onclick = (e: MouseEvent) => {\n // message description should not toggle collapse\n if (!(e.target as HTMLElement).classList.contains('msg_desc')) {\n ele.classList.toggle('collapsed');\n }\n };\n } else {\n ele.classList.remove('collapsible');\n ele.onclick = null;\n }\n });\n }\n\n #onWindowResize() {\n // when window is resizing we want to make sure debugger is still visible\n const [left, top] = limitCoordinateToScreenBoundaries(\n this.#rootEle,\n Number.parseInt(this.#rootEle.style.left, 10),\n Number.parseInt(this.#rootEle.style.top, 10),\n { top: 'all', bottom: 100, left: 100, right: 100 },\n );\n this.#rootEle.style.top = `${top}px`;\n this.#rootEle.style.left = `${left}px`;\n }\n\n connectedCallback() {\n dragElement(this.#rootEle, this.#headerEle, {\n top: 'all',\n bottom: 100,\n left: 100,\n right: 100,\n });\n\n window.addEventListener('resize', this.#eventsCbRefs.resize);\n\n addOnResize(this.#rootEle);\n this.#rootEle.onresize = this.#setCollapsibleMessages.bind(this);\n\n this.#messagesState.subscribe(this.#onNewMessages.bind(this));\n }\n\n disconnectedCallback() {\n this.#messagesState.unsubscribeAll();\n window.removeEventListener('resize', this.#eventsCbRefs.resize);\n }\n}\n\nif (!customElements.get('descope-debugger')) {\n customElements.define('descope-debugger', Debugger);\n}\n\nexport default Debugger;\n"],"names":[],"mappings":"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"}

package/dist/esm/mixins/initElementMixin.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;;;"}
1	+ {"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/injectNpmLibMixin/injectNpmLibMixin.js CHANGED Viewed

@@ -7,7 +7,7 @@ const injectNpmLibMixin = createSingletonMixin((superclass) => {
     const BaseClass = compose(loggerMixin)(superclass);
     return class InjectNpmLibMixinClass extends BaseClass {
         get baseCdnUrl() {
-            return this.getAttribute('base-cdn-url');
+            return this.getAttribute('base-cdn-url') || '';
         }
         injectNpmLib(libName, version, filePath = '', overrides = []) {
             this.logger.debug(`Injecting npm lib: "${libName}" with version: "${version}"`);

package/dist/esm/mixins/injectNpmLibMixin/injectNpmLibMixin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"injectNpmLibMixin.js","sources":["../../../../src/mixins/injectNpmLibMixin/injectNpmLibMixin.ts"],"sourcesContent":["import { compose, createSingletonMixin } from '@descope/sdk-helpers';\nimport { loggerMixin } from '../loggerMixin';\nimport { BASE_URLS } from './constants';\nimport { generateLibUrls, injectScriptWithFallbacks } from './helpers';\n\n// scripts load to window under descope object\ndeclare global {\n var descope: any;\n}\n\nexport const injectNpmLibMixin = createSingletonMixin(\n <T extends CustomElementConstructor>(superclass: T) => {\n const BaseClass = compose(loggerMixin)(superclass);\n\n return class InjectNpmLibMixinClass extends BaseClass {\n get baseCdnUrl() {\n return this.getAttribute('base-cdn-url');\n }\n\n injectNpmLib(\n libName: string,\n version: string,\n filePath = '',\n overrides: string[] = [],\n ) {\n this.logger.debug(\n `Injecting npm lib: \"${libName}\" with version: \"${version}\"`,\n );\n return injectScriptWithFallbacks(\n generateLibUrls(\n [...overrides, this.baseCdnUrl, ...BASE_URLS],\n libName,\n version,\n filePath,\n ),\n (scriptData, existingScript) => {\n if (existingScript) {\n this.logger.error(\n `Existing script cannot be loaded: \"${scriptData.url}\"`,\n );\n return;\n }\n this.logger.error(\n `Cannot load script from URL, Make sure this URL is valid and return the correct script: \"${scriptData.url}\"`,\n );\n },\n );\n }\n };\n },\n);\n"],"names":[],"mappings":";;;;;MAUa,iBAAiB,GAAG,oBAAoB,CACnD,CAAqC,UAAa,KAAI;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IAEnD,OAAO,MAAM,sBAAuB,SAAQ,SAAS,CAAA;AACnD,QAAA,IAAI,UAAU,GAAA;~~AACZ~~,~~YAAA,~~OAAO,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;~~SAC1C~~;QAED,YAAY,CACV,OAAe,EACf,OAAe,EACf,QAAQ,GAAG,EAAE,EACb,SAAA,GAAsB,EAAE,EAAA;YAExB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAAuB,oBAAA,EAAA,OAAO,CAAoB,iBAAA,EAAA,OAAO,CAAG,CAAA,CAAA,CAC7D,CAAC;AACF,YAAA,OAAO,yBAAyB,CAC9B,eAAe,CACb,CAAC,GAAG,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,SAAS,CAAC,EAC7C,OAAO,EACP,OAAO,EACP,QAAQ,CACT,EACD,CAAC,UAAU,EAAE,cAAc,KAAI;gBAC7B,IAAI,cAAc,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAAsC,mCAAA,EAAA,UAAU,CAAC,GAAG,CAAG,CAAA,CAAA,CACxD,CAAC;oBACF,OAAO;iBACR;gBACD,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAA4F,yFAAA,EAAA,UAAU,CAAC,GAAG,CAAG,CAAA,CAAA,CAC9G,CAAC;AACJ,aAAC,CACF,CAAC;SACH;KACF,CAAC;AACJ,CAAC;;;;"}
1	+ {"version":3,"file":"injectNpmLibMixin.js","sources":["../../../../src/mixins/injectNpmLibMixin/injectNpmLibMixin.ts"],"sourcesContent":["import { compose, createSingletonMixin } from '@descope/sdk-helpers';\nimport { loggerMixin } from '../loggerMixin';\nimport { BASE_URLS } from './constants';\nimport { generateLibUrls, injectScriptWithFallbacks } from './helpers';\n\n// scripts load to window under descope object\ndeclare global {\n var descope: any;\n}\n\nexport const injectNpmLibMixin = createSingletonMixin(\n <T extends CustomElementConstructor>(superclass: T) => {\n const BaseClass = compose(loggerMixin)(superclass);\n\n return class InjectNpmLibMixinClass extends BaseClass {\n get baseCdnUrl() {\n return this.getAttribute('base-cdn-url') \|\| '';\n }\n\n injectNpmLib(\n libName: string,\n version: string,\n filePath = '',\n overrides: string[] = [],\n ) {\n this.logger.debug(\n `Injecting npm lib: \"${libName}\" with version: \"${version}\"`,\n );\n return injectScriptWithFallbacks(\n generateLibUrls(\n [...overrides, this.baseCdnUrl, ...BASE_URLS],\n libName,\n version,\n filePath,\n ),\n (scriptData, existingScript) => {\n if (existingScript) {\n this.logger.error(\n `Existing script cannot be loaded: \"${scriptData.url}\"`,\n );\n return;\n }\n this.logger.error(\n `Cannot load script from URL, Make sure this URL is valid and return the correct script: \"${scriptData.url}\"`,\n );\n },\n );\n }\n };\n },\n);\n"],"names":[],"mappings":";;;;;MAUa,iBAAiB,GAAG,oBAAoB,CACnD,CAAqC,UAAa,KAAI;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IAEnD,OAAO,MAAM,sBAAuB,SAAQ,SAAS,CAAA;AACnD,QAAA,IAAI,UAAU,GAAA;YACZ,OAAO,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAChD;QAED,YAAY,CACV,OAAe,EACf,OAAe,EACf,QAAQ,GAAG,EAAE,EACb,SAAA,GAAsB,EAAE,EAAA;YAExB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAAuB,oBAAA,EAAA,OAAO,CAAoB,iBAAA,EAAA,OAAO,CAAG,CAAA,CAAA,CAC7D,CAAC;AACF,YAAA,OAAO,yBAAyB,CAC9B,eAAe,CACb,CAAC,GAAG,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,SAAS,CAAC,EAC7C,OAAO,EACP,OAAO,EACP,QAAQ,CACT,EACD,CAAC,UAAU,EAAE,cAAc,KAAI;gBAC7B,IAAI,cAAc,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAAsC,mCAAA,EAAA,UAAU,CAAC,GAAG,CAAG,CAAA,CAAA,CACxD,CAAC;oBACF,OAAO;iBACR;gBACD,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAA4F,yFAAA,EAAA,UAAU,CAAC,GAAG,CAAG,CAAA,CAAA,CAC9G,CAAC;AACJ,aAAC,CACF,CAAC;SACH;KACF,CAAC;AACJ,CAAC;;;;"}

package/dist/esm/mixins/injectStyleMixin.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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\nexport type InjectedStyle = CSSStyleSheet | CSSStyleSheetMock;\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 CHANGED Viewed

@@ -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);
@@ -52,9 +53,11 @@ const themeMixin = createSingletonMixin((superclass) => {
             async init() {
                 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_onThemeChange, "f").call(this);
+                await Promise.all([
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this),
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this),
+                ]);
                 this.observeAttributes(['theme'], __classPrivateFieldGet(this, _ThemeMixinClass_onThemeChange, "f"));
                 this.observeAttributes(['style-id'], () => {
                     __classPrivateFieldSet(this, _ThemeMixinClass__themeResource, null, "f");
@@ -108,24 +111,18 @@ 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;
-            const theme = Object.assign({}, (await __classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get)));
+            const theme = await __classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get);
             if (!theme)
                 return;
             const descopeUi = await this.descopeUi;

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

	@@ -1 +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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"}
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';\nimport { InjectedStyle, 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: InjectedStyle;\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;\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.#onThemeChange();\n await Promise.all([\n this.#loadGlobalStyle(),\n this.#loadComponentsStyle(),\n ]);\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":";;;;;;;;;;;;;;AAcA,MAAM,eAAe,GAAG,CAAC,CAAS,EAAE,KAAoB,KACtD,CAAC,KAAK,IAAI,KAAK;AACf,IAAA,KAAK,KAAK,OAAO;AACjB,IAAA,KAAK,KAAK,MAAM;AAChB,IAAA,mFAAmF,CAAC;MAIzE,UAAU,GAAG,oBAAoB,CAC5C,CAAqC,UAAa,KAAI;;AACpD,IAAA,MAAM,SAAS,GAAG,OAAO,CACvB,6BAA6B,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC,EACzD,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,CACjB,CAAC,UAAU,CAAC,CAAC;IAEd,OAAO,EAAA,GAAA,MAAM,eAAgB,SAAQ,SAAS,CAAA;AAAvC,YAAA,WAAA,GAAA;;;gBACL,4BAA4B,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;gBAoB5B,+BAAqD,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAgIrD,gBAAA,8BAAA,CAAA,GAAA,CAAA,IAAA,EAAiB,MAAK;AACpB,oBAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,0BAAA,CAAW,CAAf,IAAA,CAAA,IAAI,CAAa,CAAC;AAClB,oBAAA,sBAAA,CAAA,IAAI,EAAA,4CAAA,EAAA,GAAA,CAA6B,CAAjC,IAAA,CAAA,IAAI,EAA8B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC;AACzE,iBAAC,CAAC,CAAA;;gBAQF,4CAA+B,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,MAAe,KAAI;;oBACjD,MAAM,MAAM,GAAG,MAAM,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;oBACnE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,MAAM;AACH,yBAAA,UAAU,uDAAG,8BAA8B,CAAC,0CAC1C,MAAM,CAAC,mDAAG,QAAQ,EAAE,MAAM,uBAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,0BAAA,CAAW,MAAf,IAAI,CAAa,CAAC,CAAC;AACpD,iBAAC,CAAC,CAAA;aAoBH;AAtLC,YAAA,IAAI,KAAK,GAAA;;gBACP,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAwB,CAAC;AAEhE,gBAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AAClB,oBAAA,MAAM,QAAQ,GACZ,MAAM,CAAC,UAAU;yBACjB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAA,EAAG,8BAA8B,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,CAAA,CAAC;oBAE/D,OAAO,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;iBACpC;gBAED,OAAO,KAAK,IAAI,OAAO,CAAC;aACzB;AAED,YAAA,IAAI,OAAO,GAAA;gBACT,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,gBAAgB,CAAC;aAC1D;AAoJD,YAAA,MAAM,IAAI,GAAA;;AACR,gBAAA,OAAM,CAAA,EAAA,GAAA,KAAK,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI,CAAA,CAAC;AAErB,gBAAA,sBAAA,CAAA,IAAI,EAAA,8BAAA,EAAA,GAAA,CAAe,CAAnB,IAAA,CAAA,IAAI,CAAiB,CAAC;gBACtB,MAAM,OAAO,CAAC,GAAG,CAAC;AAChB,oBAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,gCAAA,CAAiB,CAArB,IAAA,CAAA,IAAI,CAAmB;AACvB,oBAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,oCAAA,CAAqB,CAAzB,IAAA,CAAA,IAAI,CAAuB;AAC5B,iBAAA,CAAC,CAAC;gBAEH,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,EAAE,sBAAA,CAAA,IAAI,EAAe,8BAAA,EAAA,GAAA,CAAA,CAAC,CAAC;gBAEvD,IAAI,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,EAAE,MAAK;AACxC,oBAAA,sBAAA,CAAA,IAAI,EAAA,+BAAA,EAAmB,IAAI,EAAA,GAAA,CAAA,CAAC;AAC5B,oBAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,0BAAA,CAAW,CAAf,IAAA,CAAA,IAAI,CAAa,CAAC;AAClB,oBAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,gCAAA,CAAiB,CAArB,IAAA,CAAA,IAAI,CAAmB,CAAC;AACxB,oBAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,oCAAA,CAAqB,CAAzB,IAAA,CAAA,IAAI,CAAuB,CAAC;AAC9B,iBAAC,CAAC,CAAC;aACJ;AACF,SAAA;;;;;;sCAlKC,eAAK,2BAAA,GAAA;AACH,YAAA,IAAI;AACF,gBAAA,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAC3D,CAAA,EAAG,IAAI,CAAC,OAAO,OAAO,EACtB,MAAM,CACP,CAAC;;;gBAIF,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;oBAC1C,IAAI,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,CAAE,OAAO,CAAC,qBAAqB,CAAC,EAAE;AAChD,wBAAA,IAAI;AACF,4BAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CACd,0IAA0I,CAC3I,CAAC;AACF,4BAAA,MAAM,QAAQ,GAAG,MAAM,YAAY,EAAE,CAAC;4BAEtC,IAAI,QAAQ,EAAE;AACZ,gCAAA,YAAY,CAAC,KAAK,CAAC,UAAU,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACxB,YAAY,CAAC,KAAK,CAAC,UAAU,GAC7B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAC7B,CAAC;AACF,gCAAA,YAAY,CAAC,IAAI,CAAC,UAAU,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACvB,YAAY,CAAC,IAAI,CAAC,UAAU,GAC5B,QAAQ,CAAC,IAAI,CAAC,UAAU,CAC5B,CAAC;AAEF,gCAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;;AAGlD,gCAAA,OAAO,CAAC,GAAG,CACT,kIAAkI,EAClI,2DAA2D,CAC5D,CAAC;6BACH;yBACF;wBAAC,OAAO,CAAC,EAAE;4BACV,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,uCAAuC,EAAE,CAAC,CAAC,CAAC;yBAC/D;qBACF;iBACF;AAED,gBAAA,OAAO,YAAY,CAAC;aACrB;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,yBAAyB,EACzB,oDAAoD,CACrD,CAAC;aACH;AAED,YAAA,OAAO,SAAS,CAAC;SAClB;;AAGC,YAAA,IAAI,CAAC,sBAAA,CAAA,IAAI,EAAA,+BAAA,EAAA,GAAA,CAAgB,EAAE;gBACzB,sBAAA,CAAA,IAAI,mCAAmB,sBAAA,CAAA,IAAI,+DAAY,CAAhB,IAAA,CAAA,IAAI,CAAc,EAAA,GAAA,CAAA,CAAC;gBAC1C,sBAAA,CAAA,IAAI,uCAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,KAC9B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,CAC1C,CAAC;aACH;;YAGD,OAAO,sBAAA,CAAA,IAAI,EAAA,+BAAA,EAAA,GAAA,CAAgB,CAAC;SAC7B;2CAED,eAAK,gCAAA,GAAA;;AACH,YAAA,MAAM,KAAK,GAAG,MAAM,sBAAA,CAAA,IAAI,sEAAe,CAAC;AACxC,YAAA,IAAI,CAAC,KAAK;gBAAE,OAAO;AAEnB,YAAA,IAAI,CAAC,sBAAA,CAAA,IAAI,EAAA,4BAAA,EAAA,GAAA,CAAa,EAAE;gBACtB,sBAAA,CAAA,IAAI,gCAAgB,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAA,GAAA,CAAA,CAAC;aAC1C;AAED,YAAA,sBAAA,CAAA,IAAI,EAAa,4BAAA,EAAA,GAAA,CAAA,CAAC,WAAW,CAC3B,CAAC,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,KAAK,0CAAE,OAAO,KAAI,EAAE,KAAK,CAAA,CAAA,EAAA,GAAA,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,KAAI,EAAE,CAAC,CAC7D,CAAC;SACH;+CAED,eAAK,oCAAA,GAAA;;AACH,YAAA,MAAM,KAAK,GAAG,MAAM,sBAAA,CAAA,IAAI,sEAAe,CAAC;AACxC,YAAA,IAAI,CAAC,KAAK;gBAAE,OAAO;AAEnB,YAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC;YACvC,IAAI,SAAS,aAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,sBAAsB,EAAE;AACrC,gBAAA,SAAS,CAAC,sBAAsB,CAAC,MAAM,GAAG;oBACxC,KAAK,EAAE,CAAA,EAAA,GAAA,KAAK,KAAL,IAAA,IAAA,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,UAAU;oBAC/B,IAAI,EAAE,CAAA,EAAA,GAAA,KAAK,KAAL,IAAA,IAAA,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,UAAU;iBAC9B,CAAC;aACH;SACF;0CAED,eAAK,+BAAA,GAAA;;AACH,YAAA,MAAM,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC;AAEpD,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,aAAa,aAAb,aAAa,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAb,aAAa,CAAE,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,CAAC,OAAO,CAAC,CAAC;YACxD,MAAM,SAAS,GAAG,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAa,CAAE,WAAW,CAAC;AAE7C,YAAA,MAAM,MAAM,GAAG,SAAS,IAAI,SAAS,CAAC;AAEtC,YAAA,MAAM,KAAK,GACT,CAAA,EAAA,GAAA,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAG,IAAI,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,KAAK,CAAC;AAE9B,YAAA,OAAO,KAAK,CAAC;SACd;qCAED,eAAK,0BAAA,GAAA;YACH,MAAM,KAAK,GAAG,MAAM,sBAAA,CAAA,IAAI,EAAgB,0BAAA,EAAA,GAAA,EAAA,+BAAA,CAAA,CAAA,IAAA,CAApB,IAAI,CAAkB,CAAC;YAC3C,IAAI,KAAK,EAAE;gBACT,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,oBAAA,IAAI,IAAI,CAAC,GAAG,EAAE;wBACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAA0B,uBAAA,EAAA,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA,CAAC,CAAC;AACzD,wBAAA,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;qBACpB;AACH,iBAAC,CAAC,CAAC;aACJ;iBAAM;AACL,gBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;aACvC;SACF;sCAED,eAAK,2BAAA,GAAA;YACH,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AACxD,YAAA,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC;YACvC,IAAI,SAAS,aAAT,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAT,SAAS,CAAE,sBAAsB,EAAE;gBACrC,SAAS,CAAC,sBAAsB,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC;aAChE;SACF;;AAQC,YAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,0BAAA,CAAW,CAAf,IAAA,CAAA,IAAI,CAAa,CAAC;AAClB,YAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,2BAAA,CAAY,CAAhB,IAAA,CAAA,IAAI,CAAc,CAAC;SACpB;AA4BD,QAAA,EAAA,CAAA;AACJ,CAAC;;;;"}