@descope/sdk-mixins 0.26.1 → 0.27.1

package/dist/cjs/index.js

@@ -6,6 +6,7 @@ var debuggerMixin = require('./mixins/debuggerMixin/debuggerMixin.js');
 var descopeUiMixin = require('./mixins/descopeUiMixin/descopeUiMixin.js');
 var loggerMixin = require('./mixins/loggerMixin/loggerMixin.js');
 var modalMixin = require('./mixins/modalMixin/modalMixin.js');
+var flowModalMixin = require('./mixins/flowModalMixin/flowModalMixin.js');
 var notificationsMixin = require('./mixins/notificationsMixin/notificationsMixin.js');
 var observeAttributesMixin = require('./mixins/observeAttributesMixin/observeAttributesMixin.js');
 var staticResourcesMixin = require('./mixins/staticResourcesMixin/staticResourcesMixin.js');
@@ -39,6 +40,7 @@ exports.debuggerMixin = debuggerMixin.debuggerMixin;
 exports.descopeUiMixin = descopeUiMixin.descopeUiMixin;
 exports.loggerMixin = loggerMixin.loggerMixin;
 exports.modalMixin = modalMixin.modalMixin;
+exports.flowModalMixin = flowModalMixin.flowModalMixin;
 exports.notificationsMixin = notificationsMixin.notificationsMixin;
 exports.observeAttributesMixin = observeAttributesMixin.observeAttributesMixin;
 exports.getResourceUrl = staticResourcesMixin.getResourceUrl;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/mixins/debuggerMixin/debugger-wc.js

@@ -190,10 +190,10 @@ _Debugger_messagesState = new WeakMap(), _Debugger_rootEle = new WeakMap(), _Deb
       ${icon}
       <div class="msg_content">
         <div class="msg_title">
-          ${message.title}
+          ${sdkHelpers.escapeHtml(message.title)}
         </div>
         <div class="msg_desc">
-          ${message.description || ''}
+          ${sdkHelpers.escapeHtml(message.description)}
         </div>
       </div>
       <div class="chevron"></div>

package/dist/cjs/mixins/debuggerMixin/debugger-wc.js.map

@@ -1 +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 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\n    // Set initial position via CSSOM instead of an inline style attribute,\n    // which a strict CSP style-src (without 'unsafe-inline') would block.\n    this.#rootEle.style.top = `${INITIAL_POS_THRESHOLD}px`;\n    this.#rootEle.style.left = `${\n      window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD\n    }px`;\n\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":["compose","injectStyleMixin","State","__classPrivateFieldGet","__classPrivateFieldSet","dragElement","addOnResize","limitCoordinateToScreenBoundaries"],"mappings":";;;;;;;;;;AAUA,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,QAAQ,GAAG,GAAG,CAAC;AAErB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACpD,QAAQ,CAAC,SAAS,GAAG,CAAA;;;;;;;;;;;CAWpB,CAAC;AAEF,MAAM,IAAI,GAAG,CAAA;;;CAGZ,CAAC;AAEF,MAAM,KAAK,GAAG,CAAA;;;aAGD,aAAa,CAAA;cACZ,cAAc,CAAA;;;;;;;;;;;iBAWX,QAAQ,CAAA;;AAEK,4BAAA,EAAA,qBAAqB,GAAG,CAAC,CAAA;kBACrC,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFzB,CAAC;AAIF,MAAM,SAAS,GAAGA,kBAAO,CAACC,iCAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;AAEzD,MAAM,QAAS,SAAQ,SAAS,CAAA;AAa9B,IAAA,WAAA,GAAA;;AACE,QAAA,KAAK,EAAE,CAAC;;QAbV,uBAAiB,CAAA,GAAA,CAAA,IAAA,EAAA,IAAIC,gBAAK,CAAgB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;QAE5D,iBAAyB,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;QAEzB,oBAA4B,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;QAE5B,mBAA2B,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;QAE3B,sBAAgB,CAAA,GAAA,CAAA,IAAA,EAAA;YACd,MAAM,EAAEC,6BAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,wBAAA,CAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;SACxC,CAAC,CAAA;QAKA,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;AACpC,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/D,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAExBC,4BAAA,CAAA,IAAI,EACF,iBAAA,EAAA,IAAI,CAAC,UAAW,CAAC,aAAa,CAAiB,WAAW,CAAE,EAAA,GAAA,CAAA,CAAC;;;QAI/DD,4BAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,qBAAqB,CAAA,EAAA,CAAI,CAAC;AACvD,QAAAA,4BAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EACzB,MAAM,CAAC,UAAU,GAAG,aAAa,GAAG,qBACtC,IAAI,CAAC;QAELC,4BAAA,CAAA,IAAI,EAAe,oBAAA,EAAAD,4BAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,aAAa,CAAiB,UAAU,CAAE,EAAA,GAAA,CAAA,CAAC;QAC5EC,4BAAA,CAAA,IAAI,EAAc,mBAAA,EAAAD,4BAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,aAAa,CAAiB,SAAS,CAAE,EAAA,GAAA,CAAA,CAAC;KAC3E;AAED,IAAA,UAAU,CAAC,IAAyC,EAAA;QAClDA,4BAAA,CAAA,IAAI,EAAe,uBAAA,EAAA,GAAA,CAAA,CAAC,MAAM,CAAC,CAAC,KAAK,MAAM;YACrC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC;AACtC,SAAA,CAAC,CAAC,CAAC;KACL;IAgED,iBAAiB,GAAA;QACfE,mBAAW,CAACF,6BAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,EAAEA,4BAAA,CAAA,IAAI,2BAAW,EAAE;AAC1C,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,MAAM,EAAE,GAAG;AACX,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,KAAK,EAAE,GAAG;AACX,SAAA,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAEA,4BAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,CAAA,CAAC,MAAM,CAAC,CAAC;AAE7D,QAAAG,mBAAW,CAACH,4BAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,CAAC;AAC3B,QAAAA,4BAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,QAAQ,GAAGA,4BAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAAA,4BAAA,CAAA,IAAI,EAAA,uBAAA,EAAA,GAAA,CAAe,CAAC,SAAS,CAACA,4BAAA,CAAA,IAAI,EAAe,mBAAA,EAAA,GAAA,EAAA,uBAAA,CAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC/D;IAED,oBAAoB,GAAA;AAClB,QAAAA,4BAAA,CAAA,IAAI,EAAA,uBAAA,EAAA,GAAA,CAAe,CAAC,cAAc,EAAE,CAAC;QACrC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAEA,4BAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,CAAA,CAAC,MAAM,CAAC,CAAC;KACjE;AACF,CAAA;+RAlFgB,IAAmB,EAAA;AAChC,IAAAA,4BAAA,CAAA,IAAI,EAAgB,mBAAA,EAAA,GAAA,EAAA,wBAAA,CAAA,CAAA,IAAA,CAApB,IAAI,EAAiB,IAAI,CAAC,CAAC;AAC3B,IAAAA,4BAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAwB,CAA5B,IAAA,CAAA,IAAI,CAA0B,CAAC;AACjC,CAAC,+DAEe,IAAmB,EAAA;AACjC,IAAAA,4BAAA,CAAA,IAAI,EAAY,oBAAA,EAAA,GAAA,CAAA,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ;AACvC,SAAA,GAAG,CACF,CAAC,OAAO,KAAK,CAAA;;QAEb,IAAI,CAAA;;;AAGA,UAAA,EAAA,OAAO,CAAC,KAAK,CAAA;;;YAGb,OAAO,CAAC,WAAW,IAAI,EAAE,CAAA;;;;;GAKlC,CACI;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,EAAA,gCAAA,GAAA,SAAA,gCAAA,GAAA;AAGC,IAAAA,4BAAA,CAAA,IAAI,EAAA,oBAAA,EAAA,GAAA,CAAY,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,OAAgB,KAAI;QACrE,MAAM,GAAG,GAAG,OAAsB,CAAC;QACnC,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC/C,MAAM,UAAU,GAAG,EAAE,CAAC;QACtB,MAAM,QAAQ,GAAG,OAAQ,CAAC,WAAW,GAAG,OAAQ,CAAC,WAAW,CAAC;AAC7D,QAAA,MAAM,WAAW,GAAG,OAAQ,CAAC,YAAY,GAAG,UAAU,CAAC;AACvD,QAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,WAAW,CAAC;QAE9C,IAAI,aAAa,EAAE;AACjB,YAAA,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACjC,YAAA,GAAG,CAAC,OAAO,GAAG,CAAC,CAAa,KAAI;;AAE9B,gBAAA,IAAI,CAAE,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AAC7D,oBAAA,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACnC;AACH,aAAC,CAAC;SACH;aAAM;AACL,YAAA,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;AACpC,YAAA,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;SACpB;AACH,KAAC,CAAC,CAAC;AACL,CAAC,EAAA,wBAAA,GAAA,SAAA,wBAAA,GAAA;;AAIC,IAAA,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAGI,yCAAiC,CACnDJ,4BAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,EACb,MAAM,CAAC,QAAQ,CAACA,4BAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAC7C,MAAM,CAAC,QAAQ,CAACA,4BAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,EAC5C,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CACnD,CAAC;IACFA,4BAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI,CAAC;IACrCA,4BAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,CAAC;AACzC,CAAC,CAAA;AAwBH,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;AAC3C,IAAA,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AACtD;;;;"}
+{"version":3,"file":"debugger-wc.js","sources":["../../../../src/mixins/debuggerMixin/debugger-wc.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { compose, escapeHtml, 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 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\n    // Set initial position via CSSOM instead of an inline style attribute,\n    // which a strict CSP style-src (without 'unsafe-inline') would block.\n    this.#rootEle.style.top = `${INITIAL_POS_THRESHOLD}px`;\n    this.#rootEle.style.left = `${\n      window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD\n    }px`;\n\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          ${escapeHtml(message.title)}\n        </div>\n        <div class=\"msg_desc\">\n          ${escapeHtml(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":["compose","injectStyleMixin","State","__classPrivateFieldGet","__classPrivateFieldSet","dragElement","addOnResize","escapeHtml","limitCoordinateToScreenBoundaries"],"mappings":"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"}

package/dist/cjs/mixins/flowInputMixin/flowInputMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"flowInputMixin.js","sources":["../../../../src/mixins/flowInputMixin/flowInputMixin.ts"],"sourcesContent":["import { createSingletonMixin, createFlowTemplate } from '@descope/sdk-helpers';\nimport { themeMixin } from '../themeMixin';\n\ntype FlowInputConfig = {\n  flowId: string;\n  // per-flow inputs the widget supplies; merged over the caller-supplied inputs\n  client?: Record<string, any>;\n  form?: Record<string, any>;\n  // widget-specific context forwarded as-is (e.g. tenant, outboundAppId)\n  tenant?: string;\n  outboundAppId?: string;\n};\n\n/**\n * Exposes a widget's caller-supplied flow inputs (`client.*` / `form.*`) and\n * builds the internal `<descope-wc>` flow template with the widget's shared\n * config, forwarding those inputs into the flow-start call - the same way they\n * flow for a directly-embedded `<Descope>` flow.\n *\n * `createFlowTemplate` (the method) wraps the `createFlowTemplate` helper so\n * every flow a widget runs gets the shared config + inputs from one place,\n * instead of each call site rebuilding the config. Composes `themeMixin` for\n * the resolved `theme` / `styleId`; the rest are plain attribute reads.\n */\nexport const flowInputMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class FlowInputMixinClass extends themeMixin(superclass) {\n      // caller-supplied client context, forwarded as flow-start `options.client`\n      get clientInput(): Record<string, any> {\n        try {\n          return JSON.parse(this.getAttribute('client')) || {};\n        } catch (e) {\n          return {};\n        }\n      }\n\n      // caller-supplied form inputs (raw JSON string), forwarded as flow inputs\n      get formInput(): string | undefined {\n        return this.getAttribute('form') || undefined;\n      }\n\n      // merge a per-flow form (e.g. ids the widget supplies) over the\n      // caller-supplied form inputs, with the per-flow values taking precedence\n      #resolveForm(\n        form?: Record<string, any>,\n      ): Record<string, any> | string | undefined {\n        const callerForm = this.formInput;\n        if (!form) return callerForm;\n        if (!callerForm) return form;\n        try {\n          return { ...JSON.parse(callerForm), ...form };\n        } catch (e) {\n          return form;\n        }\n      }\n\n      createFlowTemplate({\n        flowId,\n        client,\n        form,\n        ...overrides\n      }: FlowInputConfig) {\n        return createFlowTemplate({\n          projectId: this.getAttribute('project-id'),\n          flowId,\n          baseUrl: this.getAttribute('base-url') || '',\n          baseStaticUrl: this.getAttribute('base-static-url') || '',\n          baseCdnUrl: this.getAttribute('base-cdn-url') || '',\n          refreshCookieName: this.getAttribute('refresh-cookie-name') || '',\n          theme: this.theme,\n          'style-id': this.styleId,\n          locale: this.getAttribute('locale') || '',\n          form: this.#resolveForm(form),\n          client: { ...this.clientInput, ...client },\n          ...overrides,\n        });\n      }\n    },\n);\n"],"names":["createSingletonMixin","themeMixin","__rest","createFlowTemplate","__classPrivateFieldGet"],"mappings":";;;;;;AAaA;;;;;;;;;;AAUG;AACU,MAAA,cAAc,GAAGA,+BAAoB,CAChD,CAAqC,UAAa,6FAChD,MAAM,mBAAoB,SAAQC,qBAAU,CAAC,UAAU,CAAC,CAAA;AAAxD,QAAA,WAAA,GAAA;;;SAmDC;;AAjDC,QAAA,IAAI,WAAW,GAAA;AACb,YAAA,IAAI;AACF,gBAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;aACtD;YAAC,OAAO,CAAC,EAAE;AACV,gBAAA,OAAO,EAAE,CAAC;aACX;SACF;;AAGD,QAAA,IAAI,SAAS,GAAA;YACX,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;SAC/C;AAiBD,QAAA,kBAAkB,CAAC,EAKD,EAAA;gBALC,EACjB,MAAM,EACN,MAAM,EACN,IAAI,OAEY,EADb,SAAS,GAJKC,YAAA,CAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,MAAA,CAKlB,CADa,CAAA;YAEZ,OAAOC,6BAAkB,iBACvB,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAC1C,MAAM,EACN,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,EACzD,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,EAAE,EACnD,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,EACjE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,EACzC,IAAI,EAAEC,6BAAA,IAAI,EAAA,8BAAA,EAAA,GAAA,EAAA,gCAAA,CAAa,CAAjB,IAAA,CAAA,IAAI,EAAc,IAAI,CAAC,EAC7B,MAAM,EAAO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,WAAW,GAAK,MAAM,CAAA,EAAA,EACrC,SAAS,CAAA,CACZ,CAAC;SACJ;AACF,KAAA;;iFAjCG,IAA0B,EAAA;AAE1B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;AAClC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,UAAU,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,IAAI,CAAC;AAC7B,QAAA,IAAI;YACF,OAAY,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA,EAAK,IAAI,CAAG,CAAA;SAC/C;QAAC,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,IAAI,CAAC;SACb;KACF;AAuBF,IAAA,EAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"flowInputMixin.js","sources":["../../../../src/mixins/flowInputMixin/flowInputMixin.ts"],"sourcesContent":["import { createSingletonMixin, createFlowTemplate } from '@descope/sdk-helpers';\nimport { themeMixin } from '../themeMixin';\n\ntype FlowInputConfig = {\n  flowId: string;\n  // per-flow inputs the widget supplies; merged over the caller-supplied inputs\n  client?: Record<string, any>;\n  form?: Record<string, any>;\n  // hold the flow's start call until the element's start() is called - modals\n  // default this to true, pass false to start the flow as soon as it renders\n  lazyStart?: boolean;\n  // widget-specific context forwarded as-is (e.g. tenant, outboundAppId)\n  tenant?: string;\n  outboundAppId?: string;\n};\n\n/**\n * Exposes a widget's caller-supplied flow inputs (`client.*` / `form.*`) and\n * builds the internal `<descope-wc>` flow template with the widget's shared\n * config, forwarding those inputs into the flow-start call - the same way they\n * flow for a directly-embedded `<Descope>` flow.\n *\n * `createFlowTemplate` (the method) wraps the `createFlowTemplate` helper so\n * every flow a widget runs gets the shared config + inputs from one place,\n * instead of each call site rebuilding the config. Composes `themeMixin` for\n * the resolved `theme` / `styleId`; the rest are plain attribute reads.\n */\nexport const flowInputMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class FlowInputMixinClass extends themeMixin(superclass) {\n      // caller-supplied client context, forwarded as flow-start `options.client`\n      get clientInput(): Record<string, any> {\n        try {\n          return JSON.parse(this.getAttribute('client')) || {};\n        } catch (e) {\n          return {};\n        }\n      }\n\n      // caller-supplied form inputs (raw JSON string), forwarded as flow inputs\n      get formInput(): string | undefined {\n        return this.getAttribute('form') || undefined;\n      }\n\n      // merge a per-flow form (e.g. ids the widget supplies) over the\n      // caller-supplied form inputs, with the per-flow values taking precedence\n      #resolveForm(\n        form?: Record<string, any>,\n      ): Record<string, any> | string | undefined {\n        const callerForm = this.formInput;\n        if (!form) return callerForm;\n        if (!callerForm) return form;\n        try {\n          return { ...JSON.parse(callerForm), ...form };\n        } catch (e) {\n          return form;\n        }\n      }\n\n      createFlowTemplate({\n        flowId,\n        client,\n        form,\n        ...overrides\n      }: FlowInputConfig) {\n        return createFlowTemplate({\n          projectId: this.getAttribute('project-id'),\n          flowId,\n          baseUrl: this.getAttribute('base-url') || '',\n          baseStaticUrl: this.getAttribute('base-static-url') || '',\n          baseCdnUrl: this.getAttribute('base-cdn-url') || '',\n          refreshCookieName: this.getAttribute('refresh-cookie-name') || '',\n          theme: this.theme,\n          'style-id': this.styleId,\n          locale: this.getAttribute('locale') || '',\n          form: this.#resolveForm(form),\n          client: { ...this.clientInput, ...client },\n          ...overrides,\n        });\n      }\n    },\n);\n"],"names":["createSingletonMixin","themeMixin","__rest","createFlowTemplate","__classPrivateFieldGet"],"mappings":";;;;;;AAgBA;;;;;;;;;;AAUG;AACU,MAAA,cAAc,GAAGA,+BAAoB,CAChD,CAAqC,UAAa,6FAChD,MAAM,mBAAoB,SAAQC,qBAAU,CAAC,UAAU,CAAC,CAAA;AAAxD,QAAA,WAAA,GAAA;;;SAmDC;;AAjDC,QAAA,IAAI,WAAW,GAAA;AACb,YAAA,IAAI;AACF,gBAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;aACtD;YAAC,OAAO,CAAC,EAAE;AACV,gBAAA,OAAO,EAAE,CAAC;aACX;SACF;;AAGD,QAAA,IAAI,SAAS,GAAA;YACX,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;SAC/C;AAiBD,QAAA,kBAAkB,CAAC,EAKD,EAAA;gBALC,EACjB,MAAM,EACN,MAAM,EACN,IAAI,OAEY,EADb,SAAS,GAJKC,YAAA,CAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,MAAA,CAKlB,CADa,CAAA;YAEZ,OAAOC,6BAAkB,iBACvB,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAC1C,MAAM,EACN,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,EACzD,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,EAAE,EACnD,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,EACjE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,EACzC,IAAI,EAAEC,6BAAA,IAAI,EAAA,8BAAA,EAAA,GAAA,EAAA,gCAAA,CAAa,CAAjB,IAAA,CAAA,IAAI,EAAc,IAAI,CAAC,EAC7B,MAAM,EAAO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,WAAW,GAAK,MAAM,CAAA,EAAA,EACrC,SAAS,CAAA,CACZ,CAAC;SACJ;AACF,KAAA;;iFAjCG,IAA0B,EAAA;AAE1B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;AAClC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,UAAU,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,IAAI,CAAC;AAC7B,QAAA,IAAI;YACF,OAAY,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA,EAAK,IAAI,CAAG,CAAA;SAC/C;QAAC,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,IAAI,CAAC;SACb;KACF;AAuBF,IAAA,EAAA,CAAA,EAAA;;;;"}

package/dist/cjs/mixins/flowModalMixin/flowModalMixin.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var sdkHelpers = require('@descope/sdk-helpers');
+var modalMixin = require('../modalMixin/modalMixin.js');
+
+/**
+ * A modal that hosts a flow.
+ *
+ * Widgets build a modal's flow ahead of the modal being opened, so the flow's
+ * start call is held until it opens - otherwise a preloaded modal the user
+ * never opens still creates a flow execution. A caller whose flow must start as
+ * soon as it renders opts out with `lazyStart: false` on the flow template.
+ */
+const flowModalMixin = sdkHelpers.createSingletonMixin((superclass) => class FlowModalMixinClass extends modalMixin.modalMixin(superclass) {
+    createFlowModal(config) {
+        const ModalDriverClass = this.modalDriverClass;
+        class FlowModalDriver extends ModalDriverClass {
+            setContent(template) {
+                const flowEle = template.content.querySelector('descope-wc');
+                if (flowEle && !flowEle.hasAttribute('lazy-start')) {
+                    flowEle.setAttribute('lazy-start', 'true');
+                }
+                super.setContent(template);
+            }
+            async open() {
+                var _a, _b, _c;
+                await super.open();
+                (_c = (_b = (_a = this.ele) === null || _a === void 0 ? void 0 : _a.querySelector('descope-wc')) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.call(_b);
+            }
+        }
+        return this.createModal(config, FlowModalDriver);
+    }
+});
+
+exports.flowModalMixin = flowModalMixin;
+//# sourceMappingURL=flowModalMixin.js.map

package/dist/cjs/mixins/flowModalMixin/flowModalMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowModalMixin.js","sources":["../../../../src/mixins/flowModalMixin/flowModalMixin.ts"],"sourcesContent":["import { createSingletonMixin } from '@descope/sdk-helpers';\nimport { ModalDriver } from '@descope/sdk-component-drivers';\nimport { modalMixin } from '../modalMixin';\n\n/**\n * A modal that hosts a flow.\n *\n * Widgets build a modal's flow ahead of the modal being opened, so the flow's\n * start call is held until it opens - otherwise a preloaded modal the user\n * never opens still creates a flow execution. A caller whose flow must start as\n * soon as it renders opts out with `lazyStart: false` on the flow template.\n */\nexport const flowModalMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class FlowModalMixinClass extends modalMixin(superclass) {\n      createFlowModal(config?: Record<string, string>) {\n        const ModalDriverClass = this.modalDriverClass;\n\n        class FlowModalDriver extends ModalDriverClass {\n          setContent(template: HTMLTemplateElement) {\n            const flowEle = template.content.querySelector('descope-wc');\n            if (flowEle && !flowEle.hasAttribute('lazy-start')) {\n              flowEle.setAttribute('lazy-start', 'true');\n            }\n            super.setContent(template);\n          }\n\n          async open() {\n            await super.open();\n            (this.ele?.querySelector('descope-wc') as any)?.start?.();\n          }\n        }\n\n        return this.createModal(config, FlowModalDriver as typeof ModalDriver);\n      }\n    },\n);\n"],"names":["createSingletonMixin","modalMixin"],"mappings":";;;;;AAIA;;;;;;;AAOG;AACU,MAAA,cAAc,GAAGA,+BAAoB,CAChD,CAAqC,UAAa,KAChD,MAAM,mBAAoB,SAAQC,qBAAU,CAAC,UAAU,CAAC,CAAA;AACtD,IAAA,eAAe,CAAC,MAA+B,EAAA;AAC7C,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAE/C,MAAM,eAAgB,SAAQ,gBAAgB,CAAA;AAC5C,YAAA,UAAU,CAAC,QAA6B,EAAA;gBACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;gBAC7D,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;AAClD,oBAAA,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;iBAC5C;AACD,gBAAA,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;aAC5B;AAED,YAAA,MAAM,IAAI,GAAA;;AACR,gBAAA,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;AACnB,gBAAA,CAAA,EAAA,GAAA,CAAC,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAAC,YAAY,CAAS,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,kDAAI,CAAC;aAC3D;AACF,SAAA;QAED,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,eAAqC,CAAC,CAAC;KACxE;AACF,CAAA;;;;"}

package/dist/cjs/mixins/modalMixin/modalMixin.js

@@ -25,11 +25,17 @@ const modalMixin = sdkHelpers.createSingletonMixin((superclass) => {
                     };
                 })());
             }
-            createModal(config) {
+            // the driver class createModal instantiates - subclass it to build a
+            // modal driver with extra behavior (see flowModalMixin) and hand the
+            // result to createModal
+            get modalDriverClass() {
+                return tslib.__classPrivateFieldGet(this, _ModalMixinClass_ModalDriverWrapper, "f");
+            }
+            createModal(config, DriverClass = tslib.__classPrivateFieldGet(this, _ModalMixinClass_ModalDriverWrapper, "f")) {
                 const baseConfig = {};
                 const modal = helpers.createModalEle(Object.assign(Object.assign({}, baseConfig), config));
                 this.rootElement.append(modal);
-                return new (tslib.__classPrivateFieldGet(this, _ModalMixinClass_ModalDriverWrapper, "f"))(modal, {
+                return new DriverClass(modal, {
                     logger: this.logger,
                 });
             }

package/dist/cjs/mixins/modalMixin/modalMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalMixin.js","sources":["../../../../src/mixins/modalMixin/modalMixin.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { createSingletonMixin, compose } from '@descope/sdk-helpers';\nimport { initLifecycleMixin } from '../initLifecycleMixin';\nimport { initElementMixin } from '../initElementMixin';\nimport { descopeUiMixin } from '../descopeUiMixin';\nimport { createModalEle } from './helpers';\nimport { MODAL_ELE_TAG } from './constants';\nimport { ModalDriver } from '@descope/sdk-component-drivers';\n\nexport const modalMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(\n      initLifecycleMixin,\n      initElementMixin,\n      descopeUiMixin,\n    )(superclass);\n    return class ModalMixinClass extends BaseClass {\n      #ModalDriverWrapper = (() => {\n        const loadDescopeUiComponents = this.loadDescopeUiComponents.bind(this);\n        return class ModalDriverWrapper extends ModalDriver {\n          setContent(template: HTMLTemplateElement) {\n            loadDescopeUiComponents(template);\n            super.setContent(template);\n          }\n        };\n      })();\n\n      createModal(config?: Record<string, string>) {\n        const baseConfig = {};\n\n        const modal = createModalEle({\n          ...baseConfig,\n          ...config,\n        });\n\n        this.rootElement.append(modal);\n\n        return new this.#ModalDriverWrapper(modal, {\n          logger: this.logger,\n        }) as ModalDriver;\n      }\n\n      async init() {\n        this.loadDescopeUiComponents([MODAL_ELE_TAG]);\n        await super.init?.();\n      }\n    };\n  },\n);\n"],"names":["createSingletonMixin","compose","initLifecycleMixin","initElementMixin","descopeUiMixin","ModalDriver","createModalEle","__classPrivateFieldGet","MODAL_ELE_TAG"],"mappings":";;;;;;;;;;;MASa,UAAU,GAAGA,+BAAoB,CAC5C,CAAqC,UAAa,KAAI;;AACpD,IAAA,MAAM,SAAS,GAAGC,kBAAO,CACvBC,qCAAkB,EAClBC,iCAAgB,EAChBC,6BAAc,CACf,CAAC,UAAU,CAAC,CAAC;IACd,OAAO,EAAA,GAAA,MAAM,eAAgB,SAAQ,SAAS,CAAA;AAAvC,YAAA,WAAA,GAAA;;gBACL,mCAAsB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,MAAK;oBAC1B,MAAM,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACxE,OAAO,MAAM,kBAAmB,SAAQC,+BAAW,CAAA;AACjD,wBAAA,UAAU,CAAC,QAA6B,EAAA;4BACtC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;AAClC,4BAAA,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;yBAC5B;qBACF,CAAC;iBACH,GAAG,CAAC,CAAA;aAqBN;AAnBC,YAAA,WAAW,CAAC,MAA+B,EAAA;gBACzC,MAAM,UAAU,GAAG,EAAE,CAAC;gBAEtB,MAAM,KAAK,GAAGC,sBAAc,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACvB,UAAU,CACV,EAAA,MAAM,EACT,CAAC;AAEH,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAE/B,gBAAA,OAAO,KAAIC,4BAAA,CAAA,IAAI,EAAoB,mCAAA,EAAA,GAAA,CAAA,EAAC,KAAK,EAAE;oBACzC,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,iBAAA,CAAgB,CAAC;aACnB;AAED,YAAA,MAAM,IAAI,GAAA;;AACR,gBAAA,IAAI,CAAC,uBAAuB,CAAC,CAACC,uBAAa,CAAC,CAAC,CAAC;AAC9C,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;aACtB;AACF,SAAA;;AAAC,QAAA,EAAA,CAAA;AACJ,CAAC;;;;"}
+{"version":3,"file":"modalMixin.js","sources":["../../../../src/mixins/modalMixin/modalMixin.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { createSingletonMixin, compose } from '@descope/sdk-helpers';\nimport { initLifecycleMixin } from '../initLifecycleMixin';\nimport { initElementMixin } from '../initElementMixin';\nimport { descopeUiMixin } from '../descopeUiMixin';\nimport { createModalEle } from './helpers';\nimport { MODAL_ELE_TAG } from './constants';\nimport { ModalDriver } from '@descope/sdk-component-drivers';\n\nexport const modalMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(\n      initLifecycleMixin,\n      initElementMixin,\n      descopeUiMixin,\n    )(superclass);\n    return class ModalMixinClass extends BaseClass {\n      #ModalDriverWrapper = (() => {\n        const loadDescopeUiComponents = this.loadDescopeUiComponents.bind(this);\n        return class ModalDriverWrapper extends ModalDriver {\n          setContent(template: HTMLTemplateElement) {\n            loadDescopeUiComponents(template);\n            super.setContent(template);\n          }\n        };\n      })();\n\n      // the driver class createModal instantiates - subclass it to build a\n      // modal driver with extra behavior (see flowModalMixin) and hand the\n      // result to createModal\n      get modalDriverClass() {\n        return this.#ModalDriverWrapper;\n      }\n\n      createModal(\n        config?: Record<string, string>,\n        DriverClass: typeof ModalDriver = this.#ModalDriverWrapper,\n      ) {\n        const baseConfig = {};\n\n        const modal = createModalEle({\n          ...baseConfig,\n          ...config,\n        });\n\n        this.rootElement.append(modal);\n\n        return new DriverClass(modal, {\n          logger: this.logger,\n        }) as ModalDriver;\n      }\n\n      async init() {\n        this.loadDescopeUiComponents([MODAL_ELE_TAG]);\n        await super.init?.();\n      }\n    };\n  },\n);\n"],"names":["createSingletonMixin","compose","initLifecycleMixin","initElementMixin","descopeUiMixin","ModalDriver","__classPrivateFieldGet","createModalEle","MODAL_ELE_TAG"],"mappings":";;;;;;;;;;;MASa,UAAU,GAAGA,+BAAoB,CAC5C,CAAqC,UAAa,KAAI;;AACpD,IAAA,MAAM,SAAS,GAAGC,kBAAO,CACvBC,qCAAkB,EAClBC,iCAAgB,EAChBC,6BAAc,CACf,CAAC,UAAU,CAAC,CAAC;IACd,OAAO,EAAA,GAAA,MAAM,eAAgB,SAAQ,SAAS,CAAA;AAAvC,YAAA,WAAA,GAAA;;gBACL,mCAAsB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,MAAK;oBAC1B,MAAM,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACxE,OAAO,MAAM,kBAAmB,SAAQC,+BAAW,CAAA;AACjD,wBAAA,UAAU,CAAC,QAA6B,EAAA;4BACtC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;AAClC,4BAAA,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;yBAC5B;qBACF,CAAC;iBACH,GAAG,CAAC,CAAA;aA+BN;;;;AA1BC,YAAA,IAAI,gBAAgB,GAAA;gBAClB,OAAOC,4BAAA,CAAA,IAAI,EAAA,mCAAA,EAAA,GAAA,CAAoB,CAAC;aACjC;AAED,YAAA,WAAW,CACT,MAA+B,EAC/B,WAAkC,GAAAA,4BAAA,CAAA,IAAI,EAAoB,mCAAA,EAAA,GAAA,CAAA,EAAA;gBAE1D,MAAM,UAAU,GAAG,EAAE,CAAC;gBAEtB,MAAM,KAAK,GAAGC,sBAAc,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACvB,UAAU,CACV,EAAA,MAAM,EACT,CAAC;AAEH,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAE/B,gBAAA,OAAO,IAAI,WAAW,CAAC,KAAK,EAAE;oBAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,iBAAA,CAAgB,CAAC;aACnB;AAED,YAAA,MAAM,IAAI,GAAA;;AACR,gBAAA,IAAI,CAAC,uBAAuB,CAAC,CAACC,uBAAa,CAAC,CAAC,CAAC;AAC9C,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;aACtB;AACF,SAAA;;AAAC,QAAA,EAAA,CAAA;AACJ,CAAC;;;;"}

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export { debuggerMixin } from './mixins/debuggerMixin/debuggerMixin.js';
 export { descopeUiMixin } from './mixins/descopeUiMixin/descopeUiMixin.js';
 export { loggerMixin } from './mixins/loggerMixin/loggerMixin.js';
 export { modalMixin } from './mixins/modalMixin/modalMixin.js';
+export { flowModalMixin } from './mixins/flowModalMixin/flowModalMixin.js';
 export { notificationsMixin } from './mixins/notificationsMixin/notificationsMixin.js';
 export { observeAttributesMixin } from './mixins/observeAttributesMixin/observeAttributesMixin.js';
 export { getResourceUrl, staticResourcesMixin } from './mixins/staticResourcesMixin/staticResourcesMixin.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/mixins/debuggerMixin/debugger-wc.js

@@ -1,5 +1,5 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
-import { compose, State } from '@descope/sdk-helpers';
+import { compose, State, escapeHtml } from '@descope/sdk-helpers';
 import { dragElement, addOnResize, limitCoordinateToScreenBoundaries } from './helpers.js';
 import { injectStyleMixin } from '../injectStyleMixin.js';
 
@@ -186,10 +186,10 @@ _Debugger_messagesState = new WeakMap(), _Debugger_rootEle = new WeakMap(), _Deb
       ${icon}
       <div class="msg_content">
         <div class="msg_title">
-          ${message.title}
+          ${escapeHtml(message.title)}
         </div>
         <div class="msg_desc">
-          ${message.description || ''}
+          ${escapeHtml(message.description)}
         </div>
       </div>
       <div class="chevron"></div>

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

@@ -1 +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 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\n    // Set initial position via CSSOM instead of an inline style attribute,\n    // which a strict CSP style-src (without 'unsafe-inline') would block.\n    this.#rootEle.style.top = `${INITIAL_POS_THRESHOLD}px`;\n    this.#rootEle.style.left = `${\n      window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD\n    }px`;\n\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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"}
+{"version":3,"file":"debugger-wc.js","sources":["../../../../src/mixins/debuggerMixin/debugger-wc.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { compose, escapeHtml, 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 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\n    // Set initial position via CSSOM instead of an inline style attribute,\n    // which a strict CSP style-src (without 'unsafe-inline') would block.\n    this.#rootEle.style.top = `${INITIAL_POS_THRESHOLD}px`;\n    this.#rootEle.style.left = `${\n      window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD\n    }px`;\n\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          ${escapeHtml(message.title)}\n        </div>\n        <div class=\"msg_desc\">\n          ${escapeHtml(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":";;;;;;AAUA,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,QAAQ,GAAG,GAAG,CAAC;AAErB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACpD,QAAQ,CAAC,SAAS,GAAG,CAAA;;;;;;;;;;;CAWpB,CAAC;AAEF,MAAM,IAAI,GAAG,CAAA;;;CAGZ,CAAC;AAEF,MAAM,KAAK,GAAG,CAAA;;;aAGD,aAAa,CAAA;cACZ,cAAc,CAAA;;;;;;;;;;;iBAWX,QAAQ,CAAA;;AAEK,4BAAA,EAAA,qBAAqB,GAAG,CAAC,CAAA;kBACrC,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFzB,CAAC;AAIF,MAAM,SAAS,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;AAEzD,MAAM,QAAS,SAAQ,SAAS,CAAA;AAa9B,IAAA,WAAA,GAAA;;AACE,QAAA,KAAK,EAAE,CAAC;;QAbV,uBAAiB,CAAA,GAAA,CAAA,IAAA,EAAA,IAAI,KAAK,CAAgB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;QAE5D,iBAAyB,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;QAEzB,oBAA4B,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;QAE5B,mBAA2B,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;QAE3B,sBAAgB,CAAA,GAAA,CAAA,IAAA,EAAA;YACd,MAAM,EAAE,uBAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,wBAAA,CAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;SACxC,CAAC,CAAA;QAKA,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;AACpC,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/D,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAExB,sBAAA,CAAA,IAAI,EACF,iBAAA,EAAA,IAAI,CAAC,UAAW,CAAC,aAAa,CAAiB,WAAW,CAAE,EAAA,GAAA,CAAA,CAAC;;;QAI/D,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,qBAAqB,CAAA,EAAA,CAAI,CAAC;AACvD,QAAA,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EACzB,MAAM,CAAC,UAAU,GAAG,aAAa,GAAG,qBACtC,IAAI,CAAC;QAEL,sBAAA,CAAA,IAAI,EAAe,oBAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,aAAa,CAAiB,UAAU,CAAE,EAAA,GAAA,CAAA,CAAC;QAC5E,sBAAA,CAAA,IAAI,EAAc,mBAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,aAAa,CAAiB,SAAS,CAAE,EAAA,GAAA,CAAA,CAAC;KAC3E;AAED,IAAA,UAAU,CAAC,IAAyC,EAAA;QAClD,sBAAA,CAAA,IAAI,EAAe,uBAAA,EAAA,GAAA,CAAA,CAAC,MAAM,CAAC,CAAC,KAAK,MAAM;YACrC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC;AACtC,SAAA,CAAC,CAAC,CAAC;KACL;IAgED,iBAAiB,GAAA;QACf,WAAW,CAAC,uBAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,EAAE,sBAAA,CAAA,IAAI,2BAAW,EAAE;AAC1C,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,MAAM,EAAE,GAAG;AACX,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,KAAK,EAAE,GAAG;AACX,SAAA,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,CAAA,CAAC,MAAM,CAAC,CAAC;AAE7D,QAAA,WAAW,CAAC,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,CAAC;AAC3B,QAAA,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,QAAQ,GAAG,sBAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAA,sBAAA,CAAA,IAAI,EAAA,uBAAA,EAAA,GAAA,CAAe,CAAC,SAAS,CAAC,sBAAA,CAAA,IAAI,EAAe,mBAAA,EAAA,GAAA,EAAA,uBAAA,CAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC/D;IAED,oBAAoB,GAAA;AAClB,QAAA,sBAAA,CAAA,IAAI,EAAA,uBAAA,EAAA,GAAA,CAAe,CAAC,cAAc,EAAE,CAAC;QACrC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,sBAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,CAAA,CAAC,MAAM,CAAC,CAAC;KACjE;AACF,CAAA;+RAlFgB,IAAmB,EAAA;AAChC,IAAA,sBAAA,CAAA,IAAI,EAAgB,mBAAA,EAAA,GAAA,EAAA,wBAAA,CAAA,CAAA,IAAA,CAApB,IAAI,EAAiB,IAAI,CAAC,CAAC;AAC3B,IAAA,sBAAA,CAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,EAAA,gCAAA,CAAwB,CAA5B,IAAA,CAAA,IAAI,CAA0B,CAAC;AACjC,CAAC,+DAEe,IAAmB,EAAA;AACjC,IAAA,sBAAA,CAAA,IAAI,EAAY,oBAAA,EAAA,GAAA,CAAA,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ;AACvC,SAAA,GAAG,CACF,CAAC,OAAO,KAAK,CAAA;;QAEb,IAAI,CAAA;;;AAGA,UAAA,EAAA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;;;AAGzB,UAAA,EAAA,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;;;;;GAKxC,CACI;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,EAAA,gCAAA,GAAA,SAAA,gCAAA,GAAA;AAGC,IAAA,sBAAA,CAAA,IAAI,EAAA,oBAAA,EAAA,GAAA,CAAY,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,OAAgB,KAAI;QACrE,MAAM,GAAG,GAAG,OAAsB,CAAC;QACnC,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC/C,MAAM,UAAU,GAAG,EAAE,CAAC;QACtB,MAAM,QAAQ,GAAG,OAAQ,CAAC,WAAW,GAAG,OAAQ,CAAC,WAAW,CAAC;AAC7D,QAAA,MAAM,WAAW,GAAG,OAAQ,CAAC,YAAY,GAAG,UAAU,CAAC;AACvD,QAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,WAAW,CAAC;QAE9C,IAAI,aAAa,EAAE;AACjB,YAAA,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACjC,YAAA,GAAG,CAAC,OAAO,GAAG,CAAC,CAAa,KAAI;;AAE9B,gBAAA,IAAI,CAAE,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AAC7D,oBAAA,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;iBACnC;AACH,aAAC,CAAC;SACH;aAAM;AACL,YAAA,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;AACpC,YAAA,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;SACpB;AACH,KAAC,CAAC,CAAC;AACL,CAAC,EAAA,wBAAA,GAAA,SAAA,wBAAA,GAAA;;AAIC,IAAA,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,iCAAiC,CACnD,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,EACb,MAAM,CAAC,QAAQ,CAAC,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAC7C,MAAM,CAAC,QAAQ,CAAC,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAS,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,EAC5C,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CACnD,CAAC;IACF,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI,CAAC;IACrC,sBAAA,CAAA,IAAI,EAAS,iBAAA,EAAA,GAAA,CAAA,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,CAAC;AACzC,CAAC,CAAA;AAwBH,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;AAC3C,IAAA,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AACtD;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"flowInputMixin.js","sources":["../../../../src/mixins/flowInputMixin/flowInputMixin.ts"],"sourcesContent":["import { createSingletonMixin, createFlowTemplate } from '@descope/sdk-helpers';\nimport { themeMixin } from '../themeMixin';\n\ntype FlowInputConfig = {\n  flowId: string;\n  // per-flow inputs the widget supplies; merged over the caller-supplied inputs\n  client?: Record<string, any>;\n  form?: Record<string, any>;\n  // widget-specific context forwarded as-is (e.g. tenant, outboundAppId)\n  tenant?: string;\n  outboundAppId?: string;\n};\n\n/**\n * Exposes a widget's caller-supplied flow inputs (`client.*` / `form.*`) and\n * builds the internal `<descope-wc>` flow template with the widget's shared\n * config, forwarding those inputs into the flow-start call - the same way they\n * flow for a directly-embedded `<Descope>` flow.\n *\n * `createFlowTemplate` (the method) wraps the `createFlowTemplate` helper so\n * every flow a widget runs gets the shared config + inputs from one place,\n * instead of each call site rebuilding the config. Composes `themeMixin` for\n * the resolved `theme` / `styleId`; the rest are plain attribute reads.\n */\nexport const flowInputMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class FlowInputMixinClass extends themeMixin(superclass) {\n      // caller-supplied client context, forwarded as flow-start `options.client`\n      get clientInput(): Record<string, any> {\n        try {\n          return JSON.parse(this.getAttribute('client')) || {};\n        } catch (e) {\n          return {};\n        }\n      }\n\n      // caller-supplied form inputs (raw JSON string), forwarded as flow inputs\n      get formInput(): string | undefined {\n        return this.getAttribute('form') || undefined;\n      }\n\n      // merge a per-flow form (e.g. ids the widget supplies) over the\n      // caller-supplied form inputs, with the per-flow values taking precedence\n      #resolveForm(\n        form?: Record<string, any>,\n      ): Record<string, any> | string | undefined {\n        const callerForm = this.formInput;\n        if (!form) return callerForm;\n        if (!callerForm) return form;\n        try {\n          return { ...JSON.parse(callerForm), ...form };\n        } catch (e) {\n          return form;\n        }\n      }\n\n      createFlowTemplate({\n        flowId,\n        client,\n        form,\n        ...overrides\n      }: FlowInputConfig) {\n        return createFlowTemplate({\n          projectId: this.getAttribute('project-id'),\n          flowId,\n          baseUrl: this.getAttribute('base-url') || '',\n          baseStaticUrl: this.getAttribute('base-static-url') || '',\n          baseCdnUrl: this.getAttribute('base-cdn-url') || '',\n          refreshCookieName: this.getAttribute('refresh-cookie-name') || '',\n          theme: this.theme,\n          'style-id': this.styleId,\n          locale: this.getAttribute('locale') || '',\n          form: this.#resolveForm(form),\n          client: { ...this.clientInput, ...client },\n          ...overrides,\n        });\n      }\n    },\n);\n"],"names":[],"mappings":";;;;AAaA;;;;;;;;;;AAUG;AACU,MAAA,cAAc,GAAG,oBAAoB,CAChD,CAAqC,UAAa,6FAChD,MAAM,mBAAoB,SAAQ,UAAU,CAAC,UAAU,CAAC,CAAA;AAAxD,QAAA,WAAA,GAAA;;;SAmDC;;AAjDC,QAAA,IAAI,WAAW,GAAA;AACb,YAAA,IAAI;AACF,gBAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;aACtD;YAAC,OAAO,CAAC,EAAE;AACV,gBAAA,OAAO,EAAE,CAAC;aACX;SACF;;AAGD,QAAA,IAAI,SAAS,GAAA;YACX,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;SAC/C;AAiBD,QAAA,kBAAkB,CAAC,EAKD,EAAA;gBALC,EACjB,MAAM,EACN,MAAM,EACN,IAAI,OAEY,EADb,SAAS,GAJK,MAAA,CAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,MAAA,CAKlB,CADa,CAAA;YAEZ,OAAO,kBAAkB,iBACvB,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAC1C,MAAM,EACN,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,EACzD,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,EAAE,EACnD,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,EACjE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,EACzC,IAAI,EAAE,uBAAA,IAAI,EAAA,8BAAA,EAAA,GAAA,EAAA,gCAAA,CAAa,CAAjB,IAAA,CAAA,IAAI,EAAc,IAAI,CAAC,EAC7B,MAAM,EAAO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,WAAW,GAAK,MAAM,CAAA,EAAA,EACrC,SAAS,CAAA,CACZ,CAAC;SACJ;AACF,KAAA;;iFAjCG,IAA0B,EAAA;AAE1B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;AAClC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,UAAU,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,IAAI,CAAC;AAC7B,QAAA,IAAI;YACF,OAAY,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA,EAAK,IAAI,CAAG,CAAA;SAC/C;QAAC,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,IAAI,CAAC;SACb;KACF;AAuBF,IAAA,EAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"flowInputMixin.js","sources":["../../../../src/mixins/flowInputMixin/flowInputMixin.ts"],"sourcesContent":["import { createSingletonMixin, createFlowTemplate } from '@descope/sdk-helpers';\nimport { themeMixin } from '../themeMixin';\n\ntype FlowInputConfig = {\n  flowId: string;\n  // per-flow inputs the widget supplies; merged over the caller-supplied inputs\n  client?: Record<string, any>;\n  form?: Record<string, any>;\n  // hold the flow's start call until the element's start() is called - modals\n  // default this to true, pass false to start the flow as soon as it renders\n  lazyStart?: boolean;\n  // widget-specific context forwarded as-is (e.g. tenant, outboundAppId)\n  tenant?: string;\n  outboundAppId?: string;\n};\n\n/**\n * Exposes a widget's caller-supplied flow inputs (`client.*` / `form.*`) and\n * builds the internal `<descope-wc>` flow template with the widget's shared\n * config, forwarding those inputs into the flow-start call - the same way they\n * flow for a directly-embedded `<Descope>` flow.\n *\n * `createFlowTemplate` (the method) wraps the `createFlowTemplate` helper so\n * every flow a widget runs gets the shared config + inputs from one place,\n * instead of each call site rebuilding the config. Composes `themeMixin` for\n * the resolved `theme` / `styleId`; the rest are plain attribute reads.\n */\nexport const flowInputMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class FlowInputMixinClass extends themeMixin(superclass) {\n      // caller-supplied client context, forwarded as flow-start `options.client`\n      get clientInput(): Record<string, any> {\n        try {\n          return JSON.parse(this.getAttribute('client')) || {};\n        } catch (e) {\n          return {};\n        }\n      }\n\n      // caller-supplied form inputs (raw JSON string), forwarded as flow inputs\n      get formInput(): string | undefined {\n        return this.getAttribute('form') || undefined;\n      }\n\n      // merge a per-flow form (e.g. ids the widget supplies) over the\n      // caller-supplied form inputs, with the per-flow values taking precedence\n      #resolveForm(\n        form?: Record<string, any>,\n      ): Record<string, any> | string | undefined {\n        const callerForm = this.formInput;\n        if (!form) return callerForm;\n        if (!callerForm) return form;\n        try {\n          return { ...JSON.parse(callerForm), ...form };\n        } catch (e) {\n          return form;\n        }\n      }\n\n      createFlowTemplate({\n        flowId,\n        client,\n        form,\n        ...overrides\n      }: FlowInputConfig) {\n        return createFlowTemplate({\n          projectId: this.getAttribute('project-id'),\n          flowId,\n          baseUrl: this.getAttribute('base-url') || '',\n          baseStaticUrl: this.getAttribute('base-static-url') || '',\n          baseCdnUrl: this.getAttribute('base-cdn-url') || '',\n          refreshCookieName: this.getAttribute('refresh-cookie-name') || '',\n          theme: this.theme,\n          'style-id': this.styleId,\n          locale: this.getAttribute('locale') || '',\n          form: this.#resolveForm(form),\n          client: { ...this.clientInput, ...client },\n          ...overrides,\n        });\n      }\n    },\n);\n"],"names":[],"mappings":";;;;AAgBA;;;;;;;;;;AAUG;AACU,MAAA,cAAc,GAAG,oBAAoB,CAChD,CAAqC,UAAa,6FAChD,MAAM,mBAAoB,SAAQ,UAAU,CAAC,UAAU,CAAC,CAAA;AAAxD,QAAA,WAAA,GAAA;;;SAmDC;;AAjDC,QAAA,IAAI,WAAW,GAAA;AACb,YAAA,IAAI;AACF,gBAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;aACtD;YAAC,OAAO,CAAC,EAAE;AACV,gBAAA,OAAO,EAAE,CAAC;aACX;SACF;;AAGD,QAAA,IAAI,SAAS,GAAA;YACX,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;SAC/C;AAiBD,QAAA,kBAAkB,CAAC,EAKD,EAAA;gBALC,EACjB,MAAM,EACN,MAAM,EACN,IAAI,OAEY,EADb,SAAS,GAJK,MAAA,CAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,MAAA,CAKlB,CADa,CAAA;YAEZ,OAAO,kBAAkB,iBACvB,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAC1C,MAAM,EACN,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,EACzD,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,EAAE,EACnD,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC,IAAI,EAAE,EACjE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,EACzC,IAAI,EAAE,uBAAA,IAAI,EAAA,8BAAA,EAAA,GAAA,EAAA,gCAAA,CAAa,CAAjB,IAAA,CAAA,IAAI,EAAc,IAAI,CAAC,EAC7B,MAAM,EAAO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,WAAW,GAAK,MAAM,CAAA,EAAA,EACrC,SAAS,CAAA,CACZ,CAAC;SACJ;AACF,KAAA;;iFAjCG,IAA0B,EAAA;AAE1B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;AAClC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,UAAU,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,IAAI,CAAC;AAC7B,QAAA,IAAI;YACF,OAAY,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA,EAAK,IAAI,CAAG,CAAA;SAC/C;QAAC,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,IAAI,CAAC;SACb;KACF;AAuBF,IAAA,EAAA,CAAA,EAAA;;;;"}

package/dist/esm/mixins/flowModalMixin/flowModalMixin.js

@@ -0,0 +1,34 @@
+import { createSingletonMixin } from '@descope/sdk-helpers';
+import { modalMixin } from '../modalMixin/modalMixin.js';
+
+/**
+ * A modal that hosts a flow.
+ *
+ * Widgets build a modal's flow ahead of the modal being opened, so the flow's
+ * start call is held until it opens - otherwise a preloaded modal the user
+ * never opens still creates a flow execution. A caller whose flow must start as
+ * soon as it renders opts out with `lazyStart: false` on the flow template.
+ */
+const flowModalMixin = createSingletonMixin((superclass) => class FlowModalMixinClass extends modalMixin(superclass) {
+    createFlowModal(config) {
+        const ModalDriverClass = this.modalDriverClass;
+        class FlowModalDriver extends ModalDriverClass {
+            setContent(template) {
+                const flowEle = template.content.querySelector('descope-wc');
+                if (flowEle && !flowEle.hasAttribute('lazy-start')) {
+                    flowEle.setAttribute('lazy-start', 'true');
+                }
+                super.setContent(template);
+            }
+            async open() {
+                var _a, _b, _c;
+                await super.open();
+                (_c = (_b = (_a = this.ele) === null || _a === void 0 ? void 0 : _a.querySelector('descope-wc')) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.call(_b);
+            }
+        }
+        return this.createModal(config, FlowModalDriver);
+    }
+});
+
+export { flowModalMixin };
+//# sourceMappingURL=flowModalMixin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flowModalMixin.js","sources":["../../../../src/mixins/flowModalMixin/flowModalMixin.ts"],"sourcesContent":["import { createSingletonMixin } from '@descope/sdk-helpers';\nimport { ModalDriver } from '@descope/sdk-component-drivers';\nimport { modalMixin } from '../modalMixin';\n\n/**\n * A modal that hosts a flow.\n *\n * Widgets build a modal's flow ahead of the modal being opened, so the flow's\n * start call is held until it opens - otherwise a preloaded modal the user\n * never opens still creates a flow execution. A caller whose flow must start as\n * soon as it renders opts out with `lazyStart: false` on the flow template.\n */\nexport const flowModalMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class FlowModalMixinClass extends modalMixin(superclass) {\n      createFlowModal(config?: Record<string, string>) {\n        const ModalDriverClass = this.modalDriverClass;\n\n        class FlowModalDriver extends ModalDriverClass {\n          setContent(template: HTMLTemplateElement) {\n            const flowEle = template.content.querySelector('descope-wc');\n            if (flowEle && !flowEle.hasAttribute('lazy-start')) {\n              flowEle.setAttribute('lazy-start', 'true');\n            }\n            super.setContent(template);\n          }\n\n          async open() {\n            await super.open();\n            (this.ele?.querySelector('descope-wc') as any)?.start?.();\n          }\n        }\n\n        return this.createModal(config, FlowModalDriver as typeof ModalDriver);\n      }\n    },\n);\n"],"names":[],"mappings":";;;AAIA;;;;;;;AAOG;AACU,MAAA,cAAc,GAAG,oBAAoB,CAChD,CAAqC,UAAa,KAChD,MAAM,mBAAoB,SAAQ,UAAU,CAAC,UAAU,CAAC,CAAA;AACtD,IAAA,eAAe,CAAC,MAA+B,EAAA;AAC7C,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAE/C,MAAM,eAAgB,SAAQ,gBAAgB,CAAA;AAC5C,YAAA,UAAU,CAAC,QAA6B,EAAA;gBACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;gBAC7D,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;AAClD,oBAAA,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;iBAC5C;AACD,gBAAA,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;aAC5B;AAED,YAAA,MAAM,IAAI,GAAA;;AACR,gBAAA,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;AACnB,gBAAA,CAAA,EAAA,GAAA,CAAC,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,aAAa,CAAC,YAAY,CAAS,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,kDAAI,CAAC;aAC3D;AACF,SAAA;QAED,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,eAAqC,CAAC,CAAC;KACxE;AACF,CAAA;;;;"}

package/dist/esm/mixins/modalMixin/modalMixin.js

@@ -23,11 +23,17 @@ const modalMixin = createSingletonMixin((superclass) => {
                     };
                 })());
             }
-            createModal(config) {
+            // the driver class createModal instantiates - subclass it to build a
+            // modal driver with extra behavior (see flowModalMixin) and hand the
+            // result to createModal
+            get modalDriverClass() {
+                return __classPrivateFieldGet(this, _ModalMixinClass_ModalDriverWrapper, "f");
+            }
+            createModal(config, DriverClass = __classPrivateFieldGet(this, _ModalMixinClass_ModalDriverWrapper, "f")) {
                 const baseConfig = {};
                 const modal = createModalEle(Object.assign(Object.assign({}, baseConfig), config));
                 this.rootElement.append(modal);
-                return new (__classPrivateFieldGet(this, _ModalMixinClass_ModalDriverWrapper, "f"))(modal, {
+                return new DriverClass(modal, {
                     logger: this.logger,
                 });
             }

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

@@ -1 +1 @@
-{"version":3,"file":"modalMixin.js","sources":["../../../../src/mixins/modalMixin/modalMixin.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { createSingletonMixin, compose } from '@descope/sdk-helpers';\nimport { initLifecycleMixin } from '../initLifecycleMixin';\nimport { initElementMixin } from '../initElementMixin';\nimport { descopeUiMixin } from '../descopeUiMixin';\nimport { createModalEle } from './helpers';\nimport { MODAL_ELE_TAG } from './constants';\nimport { ModalDriver } from '@descope/sdk-component-drivers';\n\nexport const modalMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(\n      initLifecycleMixin,\n      initElementMixin,\n      descopeUiMixin,\n    )(superclass);\n    return class ModalMixinClass extends BaseClass {\n      #ModalDriverWrapper = (() => {\n        const loadDescopeUiComponents = this.loadDescopeUiComponents.bind(this);\n        return class ModalDriverWrapper extends ModalDriver {\n          setContent(template: HTMLTemplateElement) {\n            loadDescopeUiComponents(template);\n            super.setContent(template);\n          }\n        };\n      })();\n\n      createModal(config?: Record<string, string>) {\n        const baseConfig = {};\n\n        const modal = createModalEle({\n          ...baseConfig,\n          ...config,\n        });\n\n        this.rootElement.append(modal);\n\n        return new this.#ModalDriverWrapper(modal, {\n          logger: this.logger,\n        }) as ModalDriver;\n      }\n\n      async init() {\n        this.loadDescopeUiComponents([MODAL_ELE_TAG]);\n        await super.init?.();\n      }\n    };\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;MASa,UAAU,GAAG,oBAAoB,CAC5C,CAAqC,UAAa,KAAI;;AACpD,IAAA,MAAM,SAAS,GAAG,OAAO,CACvB,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,CACf,CAAC,UAAU,CAAC,CAAC;IACd,OAAO,EAAA,GAAA,MAAM,eAAgB,SAAQ,SAAS,CAAA;AAAvC,YAAA,WAAA,GAAA;;gBACL,mCAAsB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,MAAK;oBAC1B,MAAM,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACxE,OAAO,MAAM,kBAAmB,SAAQ,WAAW,CAAA;AACjD,wBAAA,UAAU,CAAC,QAA6B,EAAA;4BACtC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;AAClC,4BAAA,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;yBAC5B;qBACF,CAAC;iBACH,GAAG,CAAC,CAAA;aAqBN;AAnBC,YAAA,WAAW,CAAC,MAA+B,EAAA;gBACzC,MAAM,UAAU,GAAG,EAAE,CAAC;gBAEtB,MAAM,KAAK,GAAG,cAAc,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACvB,UAAU,CACV,EAAA,MAAM,EACT,CAAC;AAEH,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAE/B,gBAAA,OAAO,KAAI,sBAAA,CAAA,IAAI,EAAoB,mCAAA,EAAA,GAAA,CAAA,EAAC,KAAK,EAAE;oBACzC,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,iBAAA,CAAgB,CAAC;aACnB;AAED,YAAA,MAAM,IAAI,GAAA;;AACR,gBAAA,IAAI,CAAC,uBAAuB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;AAC9C,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;aACtB;AACF,SAAA;;AAAC,QAAA,EAAA,CAAA;AACJ,CAAC;;;;"}
+{"version":3,"file":"modalMixin.js","sources":["../../../../src/mixins/modalMixin/modalMixin.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { createSingletonMixin, compose } from '@descope/sdk-helpers';\nimport { initLifecycleMixin } from '../initLifecycleMixin';\nimport { initElementMixin } from '../initElementMixin';\nimport { descopeUiMixin } from '../descopeUiMixin';\nimport { createModalEle } from './helpers';\nimport { MODAL_ELE_TAG } from './constants';\nimport { ModalDriver } from '@descope/sdk-component-drivers';\n\nexport const modalMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(\n      initLifecycleMixin,\n      initElementMixin,\n      descopeUiMixin,\n    )(superclass);\n    return class ModalMixinClass extends BaseClass {\n      #ModalDriverWrapper = (() => {\n        const loadDescopeUiComponents = this.loadDescopeUiComponents.bind(this);\n        return class ModalDriverWrapper extends ModalDriver {\n          setContent(template: HTMLTemplateElement) {\n            loadDescopeUiComponents(template);\n            super.setContent(template);\n          }\n        };\n      })();\n\n      // the driver class createModal instantiates - subclass it to build a\n      // modal driver with extra behavior (see flowModalMixin) and hand the\n      // result to createModal\n      get modalDriverClass() {\n        return this.#ModalDriverWrapper;\n      }\n\n      createModal(\n        config?: Record<string, string>,\n        DriverClass: typeof ModalDriver = this.#ModalDriverWrapper,\n      ) {\n        const baseConfig = {};\n\n        const modal = createModalEle({\n          ...baseConfig,\n          ...config,\n        });\n\n        this.rootElement.append(modal);\n\n        return new DriverClass(modal, {\n          logger: this.logger,\n        }) as ModalDriver;\n      }\n\n      async init() {\n        this.loadDescopeUiComponents([MODAL_ELE_TAG]);\n        await super.init?.();\n      }\n    };\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;MASa,UAAU,GAAG,oBAAoB,CAC5C,CAAqC,UAAa,KAAI;;AACpD,IAAA,MAAM,SAAS,GAAG,OAAO,CACvB,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,CACf,CAAC,UAAU,CAAC,CAAC;IACd,OAAO,EAAA,GAAA,MAAM,eAAgB,SAAQ,SAAS,CAAA;AAAvC,YAAA,WAAA,GAAA;;gBACL,mCAAsB,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,MAAK;oBAC1B,MAAM,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACxE,OAAO,MAAM,kBAAmB,SAAQ,WAAW,CAAA;AACjD,wBAAA,UAAU,CAAC,QAA6B,EAAA;4BACtC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;AAClC,4BAAA,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;yBAC5B;qBACF,CAAC;iBACH,GAAG,CAAC,CAAA;aA+BN;;;;AA1BC,YAAA,IAAI,gBAAgB,GAAA;gBAClB,OAAO,sBAAA,CAAA,IAAI,EAAA,mCAAA,EAAA,GAAA,CAAoB,CAAC;aACjC;AAED,YAAA,WAAW,CACT,MAA+B,EAC/B,WAAkC,GAAA,sBAAA,CAAA,IAAI,EAAoB,mCAAA,EAAA,GAAA,CAAA,EAAA;gBAE1D,MAAM,UAAU,GAAG,EAAE,CAAC;gBAEtB,MAAM,KAAK,GAAG,cAAc,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACvB,UAAU,CACV,EAAA,MAAM,EACT,CAAC;AAEH,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAE/B,gBAAA,OAAO,IAAI,WAAW,CAAC,KAAK,EAAE;oBAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,iBAAA,CAAgB,CAAC;aACnB;AAED,YAAA,MAAM,IAAI,GAAA;;AACR,gBAAA,IAAI,CAAC,uBAAuB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;AAC9C,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;aACtB;AACF,SAAA;;AAAC,QAAA,EAAA,CAAA;AACJ,CAAC;;;;"}