@myop/vue 0.0.25 → 0.0.27

package/dist/index.umd.cjs

@@ -1,116 +1,17 @@
-(function(F,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],m):(F=typeof globalThis<"u"?globalThis:F||self,m(F["@myop/vue"]={},F.Vue))})(this,function(F,m){"use strict";var Jt=Object.defineProperty,Yt=(e,t,s)=>t in e?Jt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,p=(e,t,s)=>Yt(e,typeof t!="symbol"?t+"":t,s),z=(e,t,s)=>new Promise((n,i)=>{var o=l=>{try{c(s.next(l))}catch(d){i(d)}},r=l=>{try{c(s.throw(l))}catch(d){i(d)}},c=l=>l.done?n(l.value):Promise.resolve(l.value).then(o,r);c((s=s.apply(e,t)).next())}),k=()=>"10000000-1000-4000-8000-100000000000".replace(/[018]/g,e=>(+e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>+e/4).toString(16)),Xt=class{constructor(){p(this,"id",k()),p(this,"myop",!0),p(this,"content"),p(this,"source"),p(this,"destination"),p(this,"route"),p(this,"ref"),p(this,"direction"),p(this,"cleanable",!1)}static create(...t){return new this(...t)}isTypeof(t){return t.messageType===this.messageType}},Qt=class extends Xt{constructor(t){super(),this.handler=t,p(this,"handlerUniqueId",k())}},Zt="ExecuteScriptReplyMessage",es=/(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/,ts=/\(\s*[^)]+\s*\)\s*=>\s*(.+)/,ss=e=>{let t=e.match(es);if(t)return t[1]||t[3];{let s=e.match(ts);if(s)return s[1].trim()}},Fe=class extends Qt{constructor(t,s=()=>{},n){super(s),this.scriptInputs=n,p(this,"replyMessageKey",Zt),p(this,"messageType","ExecuteScriptMessage"),p(this,"script",""),this.script=t.toString(),this.content=t.toString(),this.content=ss(this.content)}};p(Fe,"replierKey","send"),p(Fe,"completeStreamKey","completeStream");var Pe=class{constructor(){p(this,"_runTimeInstanceId","runtime-instance-id-"+k()),p(this,"_runTimeId","runtime-id-"+k()),p(this,"_runTimeName","runtime-name-"+k()),p(this,"id",this._runTimeId),p(this,"name",this._runTimeName),p(this,"description",""),p(this,"loader",null),p(this,"withLoader",t=>(this.loader=t,this)),p(this,"withHTMLLoader",t=>(t.type="HTMLLoader",this.loader=t,this)),p(this,"build",()=>this)}};p(Pe,"create",()=>new Pe);var Le=class{constructor(){p(this,"_runTimeInstanceId","runtime-instance-id-"+k()),p(this,"_runTimeId","runtime-id-"+k()),p(this,"_runTimeName","runtime-name-"+k()),p(this,"instance",{id:this._runTimeInstanceId,componentId:this._runTimeId,componentName:this._runTimeName,skinSelector:null}),p(this,"name",this._runTimeName),p(this,"type",{id:this._runTimeId,name:this._runTimeName,description:"",props:[],refs:[],skins:[],defaultSkin:0}),p(this,"withInstance",t=>(this.instance=t,this)),p(this,"withType",t=>(this.type=t,this)),p(this,"withName",t=>(this.name=t,this)),p(this,"withDefaultSkin",t=>(this.type.skins.push(t),this.type.defaultSkin=this.type.skins.length-1,this.instance.skinSelector={type:"Dedicated",skin:{id:t.id}},this)),p(this,"withRef",t=>(this.type.refs.push(t),this)),p(this,"withBasicRef",t=>{const s={id:"",name:t,description:"",selectorType:"id-attribute",selector:t,behavior:{type:"code"}};return this.type.refs.push(s),this}),p(this,"build",()=>JSON.parse(JSON.stringify(this)))}};p(Le,"create",()=>new Le);var de=class{constructor(t="https://cloud.myop.dev"){this._baseUrl=t,p(this,"userFlows",{})}fetchComponent(t,s){return z(this,null,function*(){return s?(yield this.fetchFlow(s)).components.find(i=>i.type.id===t):(yield this.fetchAutoFlow(t)).components[0]})}fetchAutoFlow(t){return z(this,null,function*(){return this.userFlows[t]||(this.userFlows[t]=new Promise((s,n)=>z(this,null,function*(){try{const o=yield(yield fetch(`${this._baseUrl}/flow?id=${t}&auto=true`)).json();s(o.item)}catch(i){n(i)}}))),yield this.userFlows[t]})}fetchFlow(t){return z(this,null,function*(){return this.userFlows[t]||(this.userFlows[t]=new Promise((s,n)=>z(this,null,function*(){try{const o=yield(yield fetch(`${this._baseUrl}/flow?id=${t}&resolve=components`)).json();s(o.item)}catch(i){n(i)}}))),yield this.userFlows[t]})}};p(de,"Main",new de);var ns=de,Ae=Object.defineProperty,is=Object.defineProperties,os=Object.getOwnPropertyDescriptors,Ve=Object.getOwnPropertySymbols,rs=Object.prototype.hasOwnProperty,as=Object.prototype.propertyIsEnumerable,ue=(e,t,s)=>t in e?Ae(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,w=(e,t)=>{for(var s in t||(t={}))rs.call(t,s)&&ue(e,s,t[s]);if(Ve)for(var s of Ve(t))as.call(t,s)&&ue(e,s,t[s]);return e},q=(e,t)=>is(e,os(t)),cs=(e,t)=>{for(var s in t)Ae(e,s,{get:t[s],enumerable:!0})},a=(e,t,s)=>ue(e,typeof t!="symbol"?t+"":t,s),g=(e,t,s)=>new Promise((n,i)=>{var o=l=>{try{c(s.next(l))}catch(d){i(d)}},r=l=>{try{c(s.throw(l))}catch(d){i(d)}},c=l=>l.done?n(l.value):Promise.resolve(l.value).then(o,r);c((s=s.apply(e,t)).next())}),Y="__federation__",Be="onLoad",Ke=(e,t)=>{window[Y]&&window[Y][e]&&window[Y][e][Be]&&window[Y][e][Be]({[e]:t})},y={InitRequest:"InitRequest",InitResponse:"InitResponse",InitMessage:"InitMessage",DisposeMessage:"DisposeMessage",ChangeTextMessage:"ChangeTextMessage",BindClickMessage:"BindClickMessage",DetectMyopRefsMessage:"DetectMyopRefsMessage",ExecuteScriptMessage:"ExecuteScriptMessage",AddEventListenerMessage:"AddEventListenerMessage",SetAttributeMessage:"SetAttributeMessage",CreateRefComponentMessage:"CreateRefComponentMessage",EnvelopedMessage:"EnvelopedMessage",GetElementValueMessage:"GetElementValueMessage",SetInnerHtml:"SetInnerHtml",ExecuteComponentMethod:"ExecuteComponentMethod",CleanupMessage:"CleanupMessage",In:{MutationObserverMessage:"MutationObserverMessage",ResizeObserverMessage:"ResizeObserverMessage"}},he={};cs(he,{AddEventListenerMessage:()=>ws,BaseMyopMessage:()=>M,BindClickMessage:()=>fs,ChangeTextMessage:()=>ms,CleanupMessage:()=>at,CleanupReplayMessage:()=>ct,ClickReplayMessage:()=>ze,CreateRefComponentMessage:()=>tt,CustomRefMessage:()=>pe,DetectMyopRefsMessage:()=>Es,DetectedMyopRefsMessage:()=>it,DisposeMessage:()=>lt,ElementValueReplayMessage:()=>Xe,EnvelopedMessage:()=>st,EventListenerCallbackMessage:()=>Je,ExecuteComponentMethod:()=>O,ExecuteScriptMessage:()=>H,ExecuteScriptReplyMessage:()=>We,GetAttributeMessage:()=>bs,GetAttributeReplayMessage:()=>Cs,GetElementValueMessage:()=>Ms,InitMessage:()=>fe,InitRequest:()=>Ze,InitResponse:()=>Qe,MessageDirection:()=>b,MutationObserverMessage:()=>Is,MyopBindMessage:()=>T,MyopBindReplayMessage:()=>I,MyopElementMessage:()=>ps,Ref:()=>j,RefComponentCreatedMessage:()=>me,ResizeObserverMessage:()=>xs,SetAttributeMessage:()=>vs,SetInnerHtml:()=>_s,SetMutationObserverMessage:()=>Ss,SetResizeObserverMessage:()=>Ts,stripFunction:()=>je});var L=()=>"10000000-1000-4000-8000-100000000000".replace(/[018]/g,e=>(+e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>+e/4).toString(16)),ls=e=>{const t=[...e].map(s=>s.toString(16).padStart(2,"0")).join("");return[t.slice(0,8),t.slice(8,12),t.slice(12,16),t.slice(16,20),t.slice(20)].join("-")},ds=e=>{let t=e.replace(/-/g,"+").replace(/_/g,"/");for(;t.length%4;)t+="=";const s=atob(t);return Uint8Array.from(s,n=>n.charCodeAt(0))},us=e=>{const t=ds(e);if(t.length%16!==0)throw new Error("Invalid input length");const s=[];for(let n=0;n<t.length;n+=16)s.push(ls(t.slice(n,n+16)));return s},hs=e=>new Promise(t=>setTimeout(t,e)),b=class{};a(b,"down","down"),a(b,"up","up");var M=class{constructor(){a(this,"id",L()),a(this,"myop",!0),a(this,"content"),a(this,"source"),a(this,"destination"),a(this,"route"),a(this,"ref"),a(this,"direction"),a(this,"cleanable",!1)}static create(...e){return new this(...e)}isTypeof(e){return e.messageType===this.messageType}},ps=class extends M{constructor(e){super(),this.ref=e}},I=class extends M{constructor(e){super(),this.replayToHandler=e}},T=class extends M{constructor(e){super(),this.handler=e,a(this,"handlerUniqueId",L())}},j=class Gt{constructor(t,s){this.refConfig=t,this.component=s,a(this,"myop",!0),a(this,"__nonProxied"),this.__nonProxied=q(w({},this),{component:null})}static create(t,s,n){let i=s;return i||(i={id:"",name:"",description:"",selectorType:"id-attribute",selector:t,behavior:{type:"code"}}),new Gt(i,n)}},Ue="ClickReplayMessage",fs=class extends T{constructor(e,t){super(t),this.ref=e,a(this,"replyMessageKey",Ue),a(this,"messageType","BindClickMessage"),a(this,"cleanable",!0)}},ze=class extends I{constructor(){super(...arguments),a(this,"messageType",Ue)}},ms=class extends M{constructor(e,t){super(),this.ref=e,a(this,"messageType","ChangeTextMessage"),this.content=t}},qe="ExecuteScriptReplyMessage",gs=/(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/,ys=/\(\s*[^)]+\s*\)\s*=>\s*(.+)/,je=e=>{let t=e.match(gs);if(t)return t[1]||t[3];{let s=e.match(ys);if(s)return s[1].trim()}},H=class extends T{constructor(e,t=()=>{},s){super(t),this.scriptInputs=s,a(this,"replyMessageKey",qe),a(this,"messageType","ExecuteScriptMessage"),a(this,"script",""),this.script=e.toString(),this.content=e.toString(),this.content=je(this.content)}};a(H,"replierKey","send"),a(H,"completeStreamKey","completeStream");var We=class extends I{constructor(e,t){super(e),this.replayToHandler=e,this.content=t,a(this,"messageType",qe)}},pe=class extends H{constructor(e,t,s=()=>{}){super(({rootRef:n,elementId:i,_script:o,__scriptInputs:r})=>{const c=(n.shadowRoot||n.container).querySelectorAll(`[myop-id='${i}']`);return c.length?(r.ref=c[0],new Function(`return (${o})(...arguments)`)(r)):null},s),this.scriptInputs=t,this.scriptInputs=q(w({},t),{_script:e.toString()})}},Ge="EventListenerCallbackMessage",ws=class extends T{constructor(e,t,s){super(s),this.ref=e,this.type=t,this.handler=s,a(this,"replyMessageKey",Ge),a(this,"messageType","AddEventListenerMessage"),a(this,"cleanable",!0),a(this,"serializableSkeleton",!1)}withSerializableSkeleton(e){return this.serializableSkeleton=e,this}},Je=class extends I{constructor(e,t){super(e),this.replayToHandler=e,this.e=t,a(this,"messageType",Ge),this.content={e:t}}},vs=class extends M{constructor(e,t,s){super(),this.ref=e,this.name=t,this.value=s,a(this,"messageType","SetAttributeMessage")}},Ye="ElementValueReplayMessage",Ms=class extends T{constructor(e,t){super(t),this.ref=e,a(this,"replyMessageKey",Ye),a(this,"messageType","GetElementValueMessage")}},Xe=class extends I{constructor(e){super(),this.content=e,a(this,"messageType",Ye)}},_s=class extends M{constructor(e,t){super(),this.ref=e,a(this,"messageType","SetInnerHtml"),this.content=t}},fe=class extends M{constructor(e){super(),a(this,"messageType","InitMessage"),this.content={id:e}}isTypeof(e){return e.messageType===this.messageType}},Qe=class extends fe{constructor(){super(...arguments),a(this,"messageType","InitResponse")}},Ze=class extends M{constructor(){super(...arguments),a(this,"messageType","InitRequest")}},et="RefComponentCreatedMessage",tt=class extends T{constructor(e,t,s,n){super(n),this.refConfig=e,this.nestedComponentConfig=t,this.options=s,a(this,"replyMessageKey",et),a(this,"messageType","CreateRefComponentMessage")}},me=class extends I{constructor(e,t,s){super(e),this.replayToHandler=e,this.nestedRefs=t,this.failed=s,a(this,"messageType",et)}},st=class extends M{constructor(e,t){super(),this.destination=e,this.message=t,a(this,"messageType","EnvelopedMessage");const s=t;this.route=[e,...s.route?s.route:[]]}},nt="DetectedMyopRefsMessage",Es=class extends T{constructor(){super(...arguments),a(this,"messageType","DetectMyopRefsMessage"),a(this,"replyMessageKey",nt)}},it=class extends I{constructor(e,t){super(e),this.replayToHandler=e,a(this,"messageType",nt),this.content=t}isTypeof(e){return e.messageType===this.messageType}},ot="GetAttributeReplayMessage",bs=class extends T{constructor(e,t,s){super(s),this.ref=e,this.name=t,a(this,"replyMessageKey",ot),a(this,"messageType","GetAttributeMessage")}},Cs=class extends I{constructor(e){super(),this.content=e,a(this,"messageType",ot)}},O=class extends M{constructor(e){super(),this.method=e,a(this,"messageType","ExecuteComponentMethod")}},Ss=class extends M{constructor(){super(...arguments),a(this,"messageType","SetMutationObserverMessage")}},Is=class extends M{constructor(){super(...arguments),a(this,"messageType","MutationObserverMessage")}},rt="CleanupReplayMessage",at=class extends T{constructor(e,t){super(t),this.cleanupForMessageId=e,a(this,"replyMessageKey",rt),a(this,"messageType","CleanupMessage")}},ct=class extends I{constructor(e){super(),this.customCleanup=e,a(this,"messageType",rt)}},lt=class extends M{constructor(){super(...arguments),a(this,"messageType","DisposeMessage")}},Ts=class extends M{constructor(){super(...arguments),a(this,"cleanable",!0),a(this,"messageType","SetResizeObserverMessage")}},xs=class extends M{constructor(){super(...arguments),a(this,"messageType","ResizeObserverMessage")}},ge=class{constructor(e,t,s){this.componentDefinition=e,this.container=t,a(this,"id",""),a(this,"messageHandlers",{}),a(this,"element"),a(this,"_markedForDisposed",!1),a(this,"bind",(i,o)=>{this.messageHandlers[i]||(this.messageHandlers[i]=[]),this.messageHandlers[i].includes(o)||this.messageHandlers[i].push(o)}),a(this,"bindWhen",(i,o,r)=>{if(!r)throw new Error("can't use component.bindWhen without an handler");this.messageHandlers[i]||(this.messageHandlers[i]=[]);const c=this.messageHandlers[i],l=d=>o(d)?(r(d),!0):!1;return c.push(l),()=>{const d=c.indexOf(l);d>-1&&c.splice(d,1)}}),a(this,"setInitiated",()=>{this.isInitiated=!0,this._whenInitiatedResolve&&this._whenInitiatedResolve()}),a(this,"isInitiated",!1),a(this,"_whenInitiatedResolve"),a(this,"_whenInitiatedReject"),a(this,"_whenInitiated",new Promise((i,o)=>{this._whenInitiatedResolve=i,this._whenInitiatedReject=o})),a(this,"initiated",()=>this._whenInitiated),a(this,"props",{}),a(this,"refs",{}),this.id=(s==null?void 0:s.id)||Z.Instance().assignId(e);const n=s!=null&&s.timeout?s==null?void 0:s.timeout:5*1e3;setTimeout(()=>{!this.isInitiated&&this._whenInitiatedReject&&!this._markedForDisposed&&this._whenInitiatedReject(`timeout_${n} ${this.id}`)},n),this.initiated().then(()=>{window.myop.hostSDK.inspected&&this.inspect()})}get markedForDisposed(){return this._markedForDisposed}set markedForDisposed(e){if(this._markedForDisposed)throw new Error("InvalidOperationException: The component is already in the process of being disposed. Dispose operation cannot be performed again until the current disposal process is complete.");this._markedForDisposed=e}onMessageReceived(e){if(e.messageType===y.ExecuteComponentMethod){const s=e;return this[s.method]?this[s.method](s.content):console.log(`method not found ${s.method} on component`,this),!0}const t=this.messageHandlers[e.messageType];if(t&&t.length){let s=!1;return t.forEach(n=>{s=s||n(e)}),s}return!1}sendCleanupMessage(e){e.source=this.id,e.destination=this.id,e.direction=b.down;const t=this.bindWhen(e.replyMessageKey,n=>n.replayToHandler===e.handlerUniqueId,n=>{e.handler(n),t()}),s=e.handler;delete e.handler,this.send(e),e.handler=s}send(e){e.source||(e.source=this.id),e.destination||(e.destination=this.id),e.direction=b.down;let t;if(e.handler){const s=e;t=this.bindWhen(s.replyMessageKey,n=>n.replayToHandler===s.handlerUniqueId,s.handler),delete e.handler}return e.ref&&(e.ref=e.ref.__nonProxied||e.ref),e.cleanable?()=>{this.sendCleanupMessage(new at(e.id,s=>{})),t&&t()}:()=>{}}dispose(){if(this.markedForDisposed=!0,!this.isInitiated)return;console.log("disposing component",this.id),this.send(new lt);const e=this.messageHandlers.onDispose;e&&e.forEach(t=>{t(null)}),this.messageHandlers={},this.id+="_disposed",this.isInitiated=!1}},Rs=class{constructor(e,t,s,n,i){this.myopId=e,this.htmlTagName=t,this.BoundingRect=s,this.offsetTop=n,this.offsetLeft=i,a(this,"type","MyopElementRef")}},ks=e=>g(void 0,null,function*(){if(typeof e=="function")e();else if(e instanceof Promise){const t=yield e;typeof t=="function"&&t()}}),Hs=class{constructor(e){this.messageToHost=e}},Os=class extends Hs{constructor(e,t){super(e),this.messageToHost=e,this.context=t}},Ds=class{constructor(e,t){this.id=e,this.context=t,a(this,"send",s=>{})}},Ns=class{constructor(){a(this,"messageToHandleAfterInit",[]),a(this,"components",{}),a(this,"alwaysPassEnvelopesToHost",!1),a(this,"messageCleanupCache",{})}handleIncomeMessages(e){const t=e.data?e.data:e.detail;if(!(!t||!t.myop)){let s=t;if(s.direction!==b.down)return;if(s.messageType===y.DisposeMessage){s.destination&&delete this.components[s.destination];return}if(s.messageType===y.InitMessage){const n=s.content.id;if(this.components[n])return;this.components[n]=new Ds(n),this.messageToHost(new Qe(n));return}if(s.messageType===y.EnvelopedMessage){const n=s,i=n.message;if(s=i,this.alwaysPassEnvelopesToHost||this.components[s.destination]){const o=myop.hostSDK.components.find(c=>c.id===i.destination);if(o){o.send(i);return}const r=myop.hostSDK.components.find(c=>c.id===n.destination);if(r){r.send(i);return}}else return}if(s.messageType){if(s.messageType===y.CleanupMessage){const n=s,i=this.messageCleanupCache[n.cleanupForMessageId],o=new ct(!!i);o.destination=s.destination,i?(delete this.messageCleanupCache[n.cleanupForMessageId],ks(i).then(()=>{this.messageToHost(o,n)}).catch(()=>{})):this.messageToHost(o,n);return}this.supportedHandlers.forEach(n=>{if(n.messageType===s.messageType){const i=n.executor(s);if(s.cleanable&&i&&(this.messageCleanupCache[s.id]=i),i&&!s.cleanable)throw new Error(`Cleanup handler generated for non-cleanable message. 
-messageType - ${s.messageType}, handler executor was - ${n.executor}
-
-Please review the message definition object & message handler.
-To ensure cleanup properly set 'cleanable' true at message definition and return IMessageExecutorCleanup from your handlers.`);if(!i&&s.cleanable)throw new Error(`No cleanup handler generated for a cleanable message. 
-messageType - ${s.messageType}, handler executor was - ${n.executor}
-
-Please review the message definition object & message handler.
-To ensure cleanup properly set 'cleanable' true at message definition and return IMessageExecutorCleanup from your handlers.`)}})}else console.log("unsupported message type")}}},ye={IframeLoader:"IframeLoader",WebComponentLoader:"WebComponentLoader",HTMLLoader:"HTMLLoader"},we={open:"open",none:"none",localFrame:"localFrame"},ve=class{};a(ve,"code","code"),a(ve,"component","component");var X={Segmented:"Segmented",Dedicated:"Dedicated",Default:"Default"},dt={Segment:"Segment",Promo:"Promo",AB:"AB"},$s=class{constructor(e,t){this.container=e,this.shadowRoot=t,a(this,"getRootDiv",()=>(this.shadowRoot||this.container).querySelector("div")),a(this,"getRoot",()=>this.shadowRoot||this.container)}},Me=e=>e!==Object(e),Fs=e=>typeof e=="function",ut=e=>{if(Me(e))return!0;if(Fs(e)||Object.getPrototypeOf(e))return!1;for(const t in e){const s=e[t];if(typeof s=="object"){if(!ut(s))return!1}else{if(Me(s))continue;return!1}}return!0},A=(e,t={},s=!0,n=new WeakMap)=>{if(Me(e))return e;if(Array.isArray(e)){if(n.has(e))return n.get(e);const i=[];n.set(e,i);for(let o=0;o<e.length;o++){const r=e[o];i[o]=A(r,t,s,n)}return i}if(e!==null&&typeof e=="object"){if(n.has(e))return n.get(e);const i={};n.set(e,i);for(const o in e){const r=typeof t=="boolean"?t:t[o];r&&(r===!0?(s?e[o]!==void 0:e[o])&&(i[o]=A(e[o],!0,s,n)):typeof r=="object"&&(i[o]=A(e[o],r,s,n)))}return i}return{}},Ps={notSerializableRefCall:(e,t)=>{throw new Error(`
-The input provided to '${e.toString()}' is not serializable. Serialization is required to ensure that the data can be safely transferred to the skin implementation. 
-The following types of data are considered non-serializable and cannot be processed:
-
-- Functions
-- DOM elements
-- Class instances
-- Circular references
-- Symbols
-- BigInt values
-
-In the following execution we detected :
-~~~~~~~~
-${t} 
-~~~~~~~~
-as not serializable.
-
-To resolve this issue, please ensure that all inputs passed to '${e.toString()}' are in a serializable format.
-This typically includes primitive types (strings, numbers, booleans), arrays, and plain objects. 
-If you need to include complex data types, consider converting them to a serializable structure before passing them to the function.
-Or use Myop message that support it: CustomRefMessage, AddEventListenerMessage or ExecuteScriptMessage.
-
-Suggested Fix:
-1. Remove or replace non-serializable values from your input.
-2. If using objects, ensure they do not contain any functions or circular references.
-3. Convert any class instances to plain objects or JSON-compatible formats.
-4. Use dedicated Myop message.
-
-For more details on serialization and Myop message examples, refer to https://docs.myop.dev.
-
-`)}},ht=class extends ge{constructor(e,t,s){super(e,t.container,s),this.componentDefinition=e,this.parent=t,a(this,"send",n=>{const i=n.handler,o=super.send(n);return this.parent.send(new st(this.id,n)),n.handler=i,o}),a(this,"dispose",()=>{this.isInitiated&&this.send(new O("dispose")),super.dispose()})}hide(){this.send(new O("hide"))}show(){this.send(new O("show"))}inspect(){return this.send(new O("inspect"))}setHeightBasedOnDocumentElement(){this.send(new O("setHeightBasedOnDocumentElement"))}setHeightBasedOnScrollHeight(){this.send(new O("setHeightBasedOnScrollHeight"))}onMessageReceived(e){return super.onMessageReceived(e)}},Ls=(e,t,s)=>{const n=document.createElement("a");return n.textContent=e,n.style.position="relative",n.style.padding="0 5px",n.style.fontSize="14px",n.style.top="0",n.style.top=`${t}px`,n.style.transform="translateX(-50%)",n.target="_blank",n.href=`https://dashboard.myop.dev/dashboard/component/${s.id}`,n},pt=(e,t,s,n,i,o)=>{const r=Ls(`${o.name} : ${t}`,s,o);return n.insertBefore(r,i),i.style.border="1px solid #007BFF",i.style.display="block",()=>{i.style.border="unset",n.removeChild(r)}},As=(e,t)=>{const s=t.reduce((i,o)=>q(w({},i),{[o.name]:w({},o)}),{}),n={get:(i,o)=>{const r=s[o];return r.mode==="output"?new Promise(c=>{const l=[];r.behavior.ref&&l.push(j.create(r.behavior.ref)),l.push(u=>{c(u)}),r.behavior.params&&l.push(...r.behavior.params);const d=he[r.behavior.message];e.send(new d(...l))}):null},set:(i,o,r)=>{const c=s[o];if(!c)throw new Error(`Error: Undefined Prop
-
-It looks like you've tried to use a prop that hasn't been defined.
-Please check the prop name for any typos or ensure that it is properly defined in the component's prop list.
-
-Prop Name: ${o}
-Component: ${e.componentDefinition.name}, ID: ${e.componentDefinition.id}
-
-For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/${e.componentDefinition.id} or consult the developer guide.`);if(c.mode==="input")if(c.behavior.type==="message"){const l=[];c.behavior.ref&&l.push(j.create(c.behavior.ref)),l.push(r),c.behavior.params&&l.push(...c.behavior.params);const d=he[c.behavior.message];return e.send(new d(...l)),!0}else throw new Error(`Error: Unsupported Behavior
-
-The 'behavior' field provided is not supported.
-Component: ${e.componentDefinition.name}, ID: ${e.componentDefinition.id}
-
-Prop Name: ${o}
-Behavior Field: ${c.behavior.type}
-
-Check the documentation for valid behavior options.`);return!1}};return e.props={},e.props=new Proxy(e.props,n),e},Vs=(e,t)=>new Proxy(e,{get(s,n){return s[n]?s[n]:(...o)=>new Promise(r=>{o.forEach(c=>{ut(c)||Ps.notSerializableRefCall(n,c)}),t.send(new pe(({ref:c,propName:l,functionArgs:d,makeSerializable:u})=>{if(c){const h=c[l];return u(typeof h=="function"?c[l](...d):h,!0)}return null},{elementId:s.refConfig.selector,propName:n,functionArgs:o},c=>{r(c.content)}))})},set(s,n,i){return t.send(new pe(({ref:o,propName:r,propValue:c})=>{o&&(o[r]=c)},{elementId:s.refConfig.selector,propValue:i,propName:n},o=>{})),!0}}),ft=(e,t,s,n)=>g(void 0,null,function*(){const i=e.component;if(!i)throw new Error("cant createRefComponent with detached ref");return new Promise((o,r)=>g(void 0,null,function*(){const c=new ht(t.type,i,n);s.push(c),yield i.initiated();const l=setTimeout(()=>{r("timeout")},5e3);i.send(new tt(e.refConfig,t,q(w({},n||{}),{id:c.id,_hasParent:!0}),d=>g(void 0,null,function*(){if(clearTimeout(l),d.failed){r("CreateRefComponentMessage failed");return}const u=s.find(h=>h.id==c.id);if(u!==c){i.refs[e.refConfig.name]=u,o(u);return}else c.setInitiated(),i.refs[e.refConfig.name]=c;d.nestedRefs.forEach(h=>{const f=t.instance.resolvedNestedComponents.find(_=>_.type.id===h.componentDefinitionId).type,v=new ht(f,c);v.setInitiated(),c.refs[h.refName]=v,s.push(v)});try{yield mt(c,t,s,!0),i.setHeightBasedOnScrollHeight&&i.setHeightBasedOnScrollHeight(),o(c)}catch(h){r(h)}})))}))}),mt=(e,t,s,n=!1)=>g(void 0,null,function*(){e.refs||(e.refs={});const i=Object.values(e.componentDefinition.refs).map(o=>new Promise((r,c)=>g(void 0,null,function*(){var l;if(o.behavior.type==ve.component){if(n){r();return}let d=o.behavior.componentId;d||(d=o.behavior.instance.componentId);const u=(l=t.instance.resolvedNestedComponents)==null?void 0:l.find(f=>f.type.id===d);if(!u)throw new Error("componentConfig provided without nestedComponentConfig check the config object");const h=j.create("",o,e);try{const f=yield ft(h,u,s);e.refs[o.name]=f,r()}catch(f){c(f)}}else try{const d=j.create("",o,e);e.refs[o.name]=Vs(d,e),r()}catch{}})));try{yield Promise.all(i)}catch(o){throw o}}),gt=class extends ge{constructor(e,t,s,n,i){super(e,s,i),this.componentConfig=e,this.container=s,this.IframeElement=n,a(this,"cleanupInspect"),a(this,"setHeightBasedOnDocumentElement",()=>{const o=this.send(new H(()=>window.document.documentElement.scrollHeight,r=>{this.IframeElement.style.height=`${r.content}px`,o()}))}),a(this,"observeSizeBasedOnDocumentElement",()=>{this.send(new H(({send:o})=>{const{height:r,width:c}=document.documentElement.getBoundingClientRect(),l=new ResizeObserver(()=>{const{height:d,width:u}=document.documentElement.getBoundingClientRect();o({height:d,width:u})});return l.observe(document.documentElement),l.observe(document.body),{height:r,width:c}},o=>{this.IframeElement.style.width=`${o.content.width}px`,this.IframeElement.style.height=`${o.content.height}px`}))}),a(this,"setSizeBasedOnDocumentElement",()=>{const o=this.send(new H(()=>{const{height:r,width:c}=document.documentElement.getBoundingClientRect();return{height:r,width:c}},r=>{this.IframeElement.style.width=`${r.content.width}px`,this.IframeElement.style.height=`${r.content.height}px`,o()}))}),a(this,"setHeightBasedOnScrollHeight",()=>{const o=this.send(new H(()=>{let c=0;return c++,c--,Math.max(Math.max(window.document.body.clientHeight,window.document.body.scrollHeight),window.document.body.offsetHeight)+c+"px"},r=>{this.IframeElement.style.height=r.content,o()}))}),a(this,"send",o=>{var r,c;let l=w({},o);if(l.messageType===y.ExecuteComponentMethod)return this[l.method](),()=>{};l.direction=b.down;const d=super.send(l);return(c=(r=this.IframeElement)==null?void 0:r.contentWindow)==null||c.postMessage(l,"*"),d}),a(this,"dispose",()=>{this.cleanupInspect&&this.cleanupInspect(),super.dispose(),this.IframeElement.parentNode.removeChild(this.IframeElement)}),t.loader.autoHeight&&this.initiated().then(()=>{this.setHeightBasedOnScrollHeight()}),this.element=this.IframeElement}inspect(){return this.cleanupInspect?this.cleanupInspect:(this.cleanupInspect=pt(this.id,"MyopIframeComponent",10,this.container,this.IframeElement,this.componentDefinition),()=>{this.cleanupInspect(),this.cleanupInspect=void 0})}hide(){this.IframeElement.style.opacity="0",this.IframeElement.style.position="absolute",this.IframeElement.style.pointerEvents="none",this.IframeElement.style.visibility="hidden"}show(){this.IframeElement.style.opacity="1",this.IframeElement.style.position="unset",this.IframeElement.style.pointerEvents="all",this.IframeElement.style.visibility="visible"}onMessageReceived(e){return e.messageType===y.In.MutationObserverMessage||e.messageType===y.In.ResizeObserverMessage?(this.setHeightBasedOnScrollHeight(),!0):super.onMessageReceived(e)}},_e=class{constructor(){a(this,"appendChild",(e,t,s)=>{var n;if(s!=null&&s.relative){if(s.relative.direction==="before")return e.insertBefore(t,s.relative.child);if(s.relative.direction==="after"){const i=(n=s.relative.child)==null?void 0:n.nextSibling;return e.insertBefore(t,i||null)}}else return e.appendChild(t)})}},Bs=(e,t,s)=>{const n=new URL(e);return n.searchParams.append(t,s),n.toString()},Ks=class extends _e{constructor(){super(...arguments),a(this,"type",ye.IframeLoader),a(this,"load",(e,t,s,n)=>g(this,null,function*(){let i;const o=t.loader;if((s==null?void 0:s.nodeName)==="IFRAME")console.log("needs to load into an exsisting Iframe...",o.url,s),i=s,i.src=o.url;else{const r=L(),c=`myop-comp-${r}`;i=document.createElement("iframe"),s.querySelector('[id^="myop-comp-"]')||(s.innerHTML=""),n!=null&&n.hidden&&(i.style.visibility="hidden"),i=this.appendChild(s,i,n);let l=t.loader.url;n!=null&&n._hasParent&&(l=Bs(l,"_myop-comp",r));let d="";n!=null&&n.elementAttributes&&(d=Object.entries(n==null?void 0:n.elementAttributes).map(([u,h])=>h===""||h===null||h===void 0?u:`${u}="${String(h)}"`).join(" ")),i.outerHTML=`<iframe 
-               id="${c}"
-               style="
-                   padding: 0;
-                   margin: 0;
-                   height: ${o.autoHeight||!o.height?"":o.height};    
-                   width : 100%;
-                   overflow: hidden;
-                   border: none;
-                   opacity: ${n!=null&&n.hidden?"0":"1"};
-                   position: ${n!=null&&n.hidden?"absolute":"static"};
-                   pointer-events: ${n!=null&&n.hidden?"none":"all"};
-               "
-            src="${l}"
-            ${d}
-            ></iframe>`,i=s.querySelector(`#${c}`)}return new gt(e,t,s,i,n)}))}},yt={webcomponent_message_key:"myop_webcomponent_message"},wt=class extends ge{constructor(e,t,s,n,i){super(e,s,i),this.container=s,this.customElement=n,a(this,"cleanupInspect",()=>{}),a(this,"send",o=>{let r=w({},o);const c=super.send(r),l=new CustomEvent(yt.webcomponent_message_key,{detail:r});try{this.customElement.dispatchEvent(l)}catch(d){console.log("error while trying to dispatchEvent",d)}return c}),a(this,"dispose",()=>{var o;super.dispose(),(o=this.customElement.parentNode)==null||o.removeChild(this.customElement)}),this.element=n}inspect(){return this.cleanupInspect=pt(this.id,"MyopWebComponent",0,this.container,this.customElement,this.componentDefinition),this.cleanupInspect}hide(){this.customElement.style.opacity="0",this.customElement.style.position="absolute",this.customElement.style.pointerEvents="none",this.customElement.style.visibility="hidden",this.customElement.style.height="0",this.customElement.style.width="0"}show(){this.customElement.style.opacity="1",this.customElement.style.position="unset",this.customElement.style.pointerEvents="all",this.customElement.style.visibility="visible",this.customElement.style.height="",this.customElement.style.width=""}},Ee={},Us=class extends _e{constructor(){super(...arguments),a(this,"type",ye.WebComponentLoader),a(this,"load",(e,t,s,n)=>g(this,null,function*(){const i=t.loader;Ee[i.url]?console.log("Module alreday loaded or in loading process"):Ee[i.url]=new Promise((c,l)=>{const d=i.url,u=document.createElement("script");u.type="module",u.src=d,u.onload=()=>{c()},u.onerror=()=>{l()},document.head.appendChild(u)}),yield Ee[i.url],yield hs(1);let o=`myop-comp-${L()}`;const r=document.createElement(i.tag);return s.querySelector('[id^="myop-comp-"]')||(s.innerHTML=""),r.id=o,n!=null&&n.hidden&&(r.style.opacity="0",r.style.position="absolute",r.style.height="0",r.style.width="0",r.style.pointerEvents="none",r.style.visibility="hidden"),n!=null&&n._environment&&(r._myopEnvironment=n==null?void 0:n._environment),this.appendChild(s,r,n),new wt(e,t,s,r,n)}))}},zs="0.1.42",x=class extends Os{constructor(e,t){super(e),this.context=t,a(this,"executor",s=>{if(s.destination){const n=s.destination;if(this.context[n].context){const i=(o,r)=>{this.messageToHost(q(w({},o),{source:s.destination?s.destination:s.source,destination:s.source?s.source:s.destination}),r)};return this.innerExecutor(s,this.context[n].context,i)}else debugger}else debugger})}},W={id:"myop-id"},V=(e,t)=>t.querySelectorAll(`[${W.id}='${e.refConfig.selector}']`),qs=class extends x{constructor(){super(...arguments),a(this,"messageType",y.BindClickMessage),a(this,"innerExecutor",(e,t,s)=>{const n=V(e.ref,t.shadowRoot),i=[];return n.forEach(o=>{const r=()=>{s(new ze(e.handlerUniqueId))};o.addEventListener("click",r),i.push(()=>{o.removeEventListener("click",r)})}),()=>{i.forEach(o=>o())}})}},js=class extends x{constructor(){super(...arguments),a(this,"messageType",y.ChangeTextMessage),a(this,"innerExecutor",(e,t)=>{V(e.ref,t.shadowRoot).forEach(n=>{n.textContent=e.content})})}},Ws=class extends $s{constructor(e,t){super(e,t),this.container=e,this.shadowRoot=t}},Gs=class extends x{constructor(){super(...arguments),a(this,"innerExecutor",(e,t)=>{const s=t.shadowRoot.querySelectorAll(`[${W.id}]`);let n=[];s.forEach(i=>{const o=i.getAttribute(W.id);o&&n.push(new Rs(o,i.tagName,i.getBoundingClientRect(),i.offsetTop,i.offsetLeft))}),this.messageToHost(new it(e.handlerUniqueId,n))}),a(this,"messageType",y.DetectMyopRefsMessage)}},Js=class extends x{constructor(){super(...arguments),a(this,"messageType",y.SetAttributeMessage),a(this,"innerExecutor",(e,t)=>{V(e.ref,t.shadowRoot).forEach(n=>{n.setAttribute(e.name,e.value)})})}},Ys=class extends x{constructor(){super(...arguments),a(this,"messageType",y.AddEventListenerMessage),a(this,"innerExecutor",(e,t,s)=>{const n=V(e.ref,t.shadowRoot),i=[];return n.forEach(o=>{const r=c=>{s(new Je(e.handlerUniqueId,A(c,e.serializableSkeleton)))};o.addEventListener(e.type,r),i.push(()=>{o.removeEventListener(e.type,r)})}),()=>{i.forEach(o=>o())}})}},Xs=class extends x{constructor(){super(...arguments),a(this,"messageType",y.CreateRefComponentMessage),a(this,"innerExecutor",(e,t,s)=>{g(this,null,function*(){const i=t.shadowRoot.querySelectorAll(`[${W.id}='${e.refConfig.selector}']`);if(i.length===1){const o=Z.Instance(),r=o.components.find(u=>u.id===e.options.id);r&&r.dispose();const c=o.components.indexOf(r);c!==-1&&o.components.splice(c,1);const l=yield o.loadComponent(e.nestedComponentConfig,i.item(0),e.options),d=[];Object.keys(l.refs).forEach(u=>{let h=l.refs[u];h=h.__nonProxied||h,h.componentDefinition&&d.push({refName:u,componentDefinitionId:h.componentDefinition.id})}),s(new me(e.handlerUniqueId,d))}else{console.error("CreateRefComponentMessageHandler - DOM element not found"),this.messageToHost(new me(e.handlerUniqueId,[],!0));debugger}}).then()})}},Qs=(e,t,s)=>{const n=e.scriptInputs?e.scriptInputs:{};n.makeSerializable=A,n.send=t,n.rootRef=s,n.__scriptInputs=n;const o=new Function(`return (${e.script})(...arguments)`)(n);t(o)},Zs=class extends x{constructor(){super(...arguments),a(this,"messageType",y.ExecuteScriptMessage),a(this,"innerExecutor",(e,t,s)=>{Qs(e,i=>{s(new We(e.handlerUniqueId,i))},t)})}},vt=e=>{if(!e)return null;if(e.tagName==="FORM"){new FormData(e);const t={formData:{},unmappedData:[]};return e.querySelectorAll("input, select, textarea").forEach(n=>{if(typeof n.value=="string"){const i=n.getAttribute(W.id);let o=n.getAttribute("name");const r={id:n.id,name:o,value:vt(n),required:n.required,validity:A(n.validity,!0),myopId:i};o?t.formData[o]?t.formData[o].value?t.unmappedData.push(r):(t.unmappedData.push(t.formData[o]),t.formData[o]=r):t.formData[o]=r:t.unmappedData.push(r)}}),t}return e.type==="checkbox"||e.type==="radio"?e.checked?e.value:null:e.tagName==="INPUT"||e.tagName==="TEXTAREA"||e.tagName==="SELECT"?e.value:e.isContentEditable?e.innerText||e.textContent:null},en=class extends x{constructor(){super(...arguments),a(this,"messageType",y.GetElementValueMessage),a(this,"innerExecutor",(e,t,s)=>{V(e.ref,t.shadowRoot).forEach(i=>{s(new Xe(vt(i)),e)})})}},tn=class extends x{constructor(){super(...arguments),a(this,"messageType",y.SetInnerHtml),a(this,"innerExecutor",(e,t)=>{V(e.ref,t.shadowRoot).forEach(n=>{n.innerHTML=e.content})})}},Mt=class extends Ns{constructor(){super(...arguments),a(this,"alwaysPassEnvelopesToHost",!0),a(this,"connectedCallback",(e,t)=>{e.addEventListener(yt.webcomponent_message_key,s=>{const n=s.data?s.data:s.detail;if(!n||!n.myop){debugger;throw new Error("recvied webcomponent_message with wrong type")}else{const i=n;if(this.handleIncomeMessages(s),i.messageType===y.InitMessage){const o=i.content.id;this.components[o].context=new Ws(e,t)}}}),setTimeout(()=>{this.messageToHost(new Ze)},1)}),a(this,"messageToHost",(e,t)=>{e.direction=b.up,!e.replayToHandler&&(t!=null&&t.handlerUniqueId)&&(e.replayToHandler=t.handlerUniqueId),window.myop.hostSDK.send(e)}),a(this,"supportedHandlers",[new js(this.messageToHost,this.components),new tn(this.messageToHost,this.components),new qs(this.messageToHost,this.components),new Gs(this.messageToHost,this.components),new Js(this.messageToHost,this.components),new Ys(this.messageToHost,this.components),new Zs(this.messageToHost,this.components),new en(this.messageToHost,this.components),new Xs(this.messageToHost,this.components)]),a(this,"init",()=>{})}};Ke("WebComponentSDK",Mt);var _t=[],Q,Et=()=>g(void 0,null,function*(){return Q||(Q=new Mt,Q.init()),Q});function sn(e,t){return class extends HTMLElement{connectedCallback(){const s=t===we.open?"open":"closed",n=this.attachShadow({mode:s});Et().then(i=>{i.connectedCallback(this,n),n.innerHTML=e})}}}var nn=(e,t,s)=>{customElements.define(e,sn(t,s)),console.log(`define('${e}') was called, web component ready to use`)},on=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/(\d+)/g,"-$1").toLowerCase(),rn=e=>(e=on(e),e.replace(/_/g,"-")),an=class extends _e{constructor(){super(...arguments),a(this,"type",ye.HTMLLoader),a(this,"load",(e,t,s,n)=>g(this,null,function*(){const i=t.loader;let o=`myop-comp-${L()}`,r;if(i.shadowRootMode===we.localFrame){const l=`myop-comp-${L()}`;let d=document.createElement("iframe");s.querySelector('[id^="myop-comp-"]')||(s.innerHTML=""),n!=null&&n.hidden&&(d.style.visibility="hidden"),d=this.appendChild(s,d,n),d.id=l,d.setAttribute("style",`
-                   padding: 0;
-                   margin: 0;
-                   overflow: hidden;
-                   border: none;
-                   opacity: ${n!=null&&n.hidden?"0":"1"};
-                   width: 100%;
-                   height: 100%;
-                   position: ${n!=null&&n.hidden?"absolute":"static"};
-                   pointer-events: ${n!=null&&n.hidden?"none":"all"};
-               `),s.appendChild(d);const u=d.contentDocument||d.contentWindow.document;u.open();let h=i.HTML;if(n!=null&&n._inspection){const _=new DOMParser().parseFromString(i.HTML,"text/html"),jt=_.implementation.createHTMLDocument();jt.body.innerHTML=`<script>
-                        const beforeKeysWindow = new Set(Object.keys(window));
-                        window.myopState = {
-                            beforeKeysWindow,
-                        };
-                <\/script>`;const Wt=jt.body.firstChild;Wt&&_.head&&_.head.insertBefore(_.importNode(Wt,!0),_.head.firstChild),h=_.documentElement.outerHTML}u.writeln(h),u.writeln(`<script src="${window.myop.__ROOT_SDK_PUBLIC_URL__}"><\/script>
-                    <script>
-                    window.__federation__ = 
-                    { ...window.__federation__,
-                    //TODO : get from ENV at build time, 
-                    // inject value to module at build time 
-                    // today we doing so just for the CJS version 
-                    __public_path__ :'https://cdn.myop.dev/sdk/next',
-                     ...${JSON.stringify(window.__federation__)}};
-                        const init = async () => {
-                            const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
-                            const sdk = new IframeSDK()
-                            sdk.init();
-                        }
-                        init().then();
-              <\/script>`),u.close();const f=new gt(e,t,s,d,n);return d.onload=()=>{f.observeSizeBasedOnDocumentElement()},f}if(i.shadowRootMode===we.none){const c=document.createElement("template");c.innerHTML=i.HTML,r=c.content.firstElementChild,Et().then(l=>{l.connectedCallback(r,r)})}else{const c=rn(e.name+t.id);_t.includes(c)||(nn(c,i.HTML,i.shadowRootMode),_t.push(c)),r=document.createElement(c)}return s.querySelector('[id^="myop-comp-"]')||(s.innerHTML=""),r.id=o,n!=null&&n.hidden&&(r.style.opacity="0",r.style.position="absolute",r.style.height="0",r.style.width="0",r.style.pointerEvents="none",r.style.visibility="hidden"),this.appendChild(s,r,n),new wt(e,t,s,r,n)}))}},be=class{constructor(t="https://cloud.myop.dev"){this._baseUrl=t,a(this,"userFlows",{})}fetchComponent(t,s){return g(this,null,function*(){return s?(yield this.fetchFlow(s)).components.find(i=>i.type.id===t):(yield this.fetchAutoFlow(t)).components[0]})}fetchAutoFlow(t){return g(this,null,function*(){return this.userFlows[t]||(this.userFlows[t]=new Promise((s,n)=>g(this,null,function*(){try{const o=yield(yield fetch(`${this._baseUrl}/flow?id=${t}&auto=true`)).json();s(o.item)}catch(i){n(i)}}))),yield this.userFlows[t]})}fetchFlow(t){return g(this,null,function*(){return this.userFlows[t]||(this.userFlows[t]=new Promise((s,n)=>g(this,null,function*(){try{const o=yield(yield fetch(`${this._baseUrl}/flow?id=${t}&resolve=components`)).json();s(o.item)}catch(i){n(i)}}))),yield this.userFlows[t]})}};a(be,"Main",new be);var cn=be,ln=e=>g(void 0,null,function*(){try{const t=new URL(window.location.href),n=new URLSearchParams(t.search).get("myopOverride");if(n){const[i,o]=us(n),c=(yield cn.Main.fetchFlow(i)).components.find(l=>l.type.id===e.type.id);if(c&&c.instance.skinSelector.type===X.Segmented&&c.instance.resolvedExperiences){const l=c.instance.resolvedExperiences.find(d=>d.id===o);if((l==null?void 0:l.type)===dt.Segment){const d=l,h=c.instance.skinSelector.segments.find(f=>f.segmentId===d.segment.id);if(h)return c.instance.skinSelector=h==null?void 0:h.skinSelector,c}}}}catch{return null}}),bt="https://cdn.myop.dev/sdk/next/myop_sdk.min.js",Z=class{constructor(){a(this,"components2init",[]),a(this,"components",[]),a(this,"componentsLoaders",[]),a(this,"initiated",!1),a(this,"version",zs),a(this,"type2InstanceCount",{}),a(this,"assignId",e=>(this.type2InstanceCount[e.id]||(this.type2InstanceCount[e.id]=0),`${e.id}_${++this.type2InstanceCount[e.id]}`)),a(this,"inspected",!1),a(this,"inspect",()=>{this.inspected||(this.inspected=!0,this.components.forEach(e=>{e.inspect&&e.inspect()}))}),a(this,"incomingMessageHandler",e=>{if(e.origin,document.location.origin,e.data.myop){if(e.data.direction!==b.up&&e.data.messageType!==y.EnvelopedMessage)return;const t=e.data;if(t.messageType===y.InitRequest){this.components2init.forEach(n=>{n.send(new fe(n.id))});return}if(t.messageType===y.InitResponse){this.components2init=this.components2init.filter(i=>i.id!==t.content.id);const n=this.components.find(i=>{var o;return i.id===((o=t.content)==null?void 0:o.id)});n==null||n.setInitiated();return}if(t.messageType===y.EnvelopedMessage){const n=t,i=this.components.find(o=>o.id===n.destination);if(i){if(n.direction===b.down){n.message.messageType===O.name?i.onMessageReceived(n.message):(n.message.route=n.route,i.send(n.message));return}}else{const o=this.components.find(r=>r.id===n.message.destination);o&&o.send(n.message)}return}const s=this.components.find(n=>n.id===t.destination);if(!s){window.myop.IframeSDK&&window.myop.IframeSDK.messageToHost(t);return}if(s){if(s.onMessageReceived(t))return;window.myop.IframeSDK&&window.myop.IframeSDK.messageToHost(t)}}}),a(this,"send",e=>{const t=new MessageEvent("",{data:e});this.incomingMessageHandler(t)}),a(this,"init",e=>{if(this.initiated)throw new Error("hostSDK already initiated");const t=[new Ks,new Us,new an];if(this.componentsLoaders=[...t],e){const s={};e.forEach(n=>{const i=new n(this.componentsLoaders);s[i.type]=i}),this.componentsLoaders.forEach(n=>{s[n.type]||(s[n.type]=n)}),this.componentsLoaders=Object.values(s)}window.addEventListener("message",this.incomingMessageHandler,!1),console.log("myop hostSDK initiated",document.location.href),this.initiated=!0}),a(this,"_getSkinIdBySkinSelector",(e,...t)=>g(this,[e,...t],function*(s,n=[],i){var o;function r(c,l){return g(this,null,function*(){for(const d of c)if(yield l(d))return d})}switch(s.type){case"DedicatedSkin":case X.Dedicated:return((o=s.skin)==null?void 0:o.id)||s.skins[0].id;case X.Segmented:{const l=yield r(s.segments,d=>g(this,null,function*(){if(d.segmentId==="Default")return!0;const u=n.find(_=>_.type===dt.Segment?_.segment.id===d.segmentId:!1);if(!u)throw new Error("experience not found");const f=u.segment,v=(i||{})[f.function];return v?yield v():(console.warn(`segmentId:${d.segmentId}, ${f.function} function not provided !`),!1)}));if(l)return this._getSkinIdBySkinSelector(l.skinSelector,n);debugger}break;default:debugger}return""})),a(this,"runSkinSelector",(e,t)=>g(this,null,function*(){const s=yield this._getSkinIdBySkinSelector(e.instance.skinSelector,e.instance.resolvedExperiences,t);return e.type.skins.find(n=>n.id===s)})),a(this,"loaderHooks"),a(this,"loadComponent",(e,t,s)=>g(this,null,function*(){var n,i,o,r;if(!t){debugger;throw new Error("no container was found for this component")}const c=yield ln(e);c&&(e=c);const l=t;if(l.myop)if(l.component){e=w({},e),e.instance=w({},e.instance);const f=w(w({},(n=this.loaderHooks)!=null?n:{}),(i=s==null?void 0:s.hooks)!=null?i:{});let v=yield this.runSkinSelector(e,f);if(!v)throw new Error("runSkinSelector failed to choose skin, check the provided config");return(o=s==null?void 0:s.hooks)!=null&&o.afterSkinSelected&&(v=yield s.hooks.afterSkinSelected(w({},v))),e.instance.skinSelector={type:X.Dedicated,skin:v},s&&(s=w({},s),delete s.hooks),yield ft(l,e,this.components,s)}else throw new Error("load component got a detached ref.");t=t;let d=yield this.runSkinSelector(e,s==null?void 0:s.hooks);if(!d)throw new Error("runSkinSelector failed to choose skin, check the provided config");(r=s==null?void 0:s.hooks)!=null&&r.afterSkinSelected&&(d=yield s.hooks.afterSkinSelected(w({},d)));const u=this.componentsLoaders.find(f=>f.type===d.loader.type);if(!u){debugger;throw new Error(`no loader "${d.loader.type}" was found for component`)}let h=yield u.load(e.type,d,t,s);h.isInitiated||this.components2init.push(h),h.bind("onDispose",()=>(this.components=this.components.filter(f=>f!==h),this.components2init=this.components2init.filter(f=>f!==h),!0)),this.components.push(h),s!=null&&s.connectProps&&(h=As(h,e.type.props));try{yield mt(h,e,this.components)}catch(f){throw f}return s!=null&&s.skipInit||(yield h.initiated()),h})),a(this,"navigate",(e,t,s)=>g(this,null,function*(){if(e.parent)throw new Error("Navigating on remote ref components is not implemented yet");if(s!=null&&s.staged){let n=yield this.loadComponent(t,e.container,w({hidden:!0,relative:{direction:"after",child:e.element}},s));return s.init&&(yield s.init(n)),n.show(),e.dispose(),n}else{const n=e.element.nextSibling;return e.dispose(),this.loadComponent(t,e.container,w({relative:{direction:"before",child:n}},s))}}))}};if(a(Z,"Instance",()=>window.myop.hostSDK),window.myop||(window.myop={__ROOT_SDK_PUBLIC_URL__:bt}),!window.myop.hostSDK){const e=new Z;e.init(),window.myop||(window.myop={__ROOT_SDK_PUBLIC_URL__:bt}),window.myop.hostSDK=e}var Ct=window.myop.hostSDK;Ke("hostSDK",Ct);/**
-* @vue/shared v3.5.17
+(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("@myop/sdk/host"),require("@myop/sdk/helpers")):typeof define=="function"&&define.amd?define(["exports","vue","@myop/sdk/host","@myop/sdk/helpers"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d["@myop/vue"]={},d.Vue,d.host,d.helpers))})(this,(function(d,l,V,P){"use strict";const Be=["innerHTML"],he=l.defineComponent({__name:"MyopLoader",props:{opacity:{default:1},fadeDuration:{default:200}},setup(e){const t=e,n=l.useSlots(),o=a=>!a||a.length===0?!1:a.some(u=>typeof u.children=="string"?u.children.trim()!=="":Array.isArray(u.children)?o(u.children):!!(u.type&&typeof u.type!="symbol"||u.children)),s=l.computed(()=>{const a=n.default;if(!a)return!1;const u=a();return o(u)}),r=l.computed(()=>({...V.containerStyleObject,opacity:t.opacity,transition:`opacity ${t.fadeDuration}ms ease-out`})),i=l.computed(()=>({...V.loaderStyleObject,opacity:t.opacity,transition:`opacity ${t.fadeDuration}ms ease-out`})),c=V.getMyopLogoHtml();return(a,u)=>s.value?(l.openBlock(),l.createElementBlock("div",{key:0,style:l.normalizeStyle(r.value)},[l.renderSlot(a.$slots,"default")],4)):(l.openBlock(),l.createElementBlock("div",{key:1,style:l.normalizeStyle(i.value),innerHTML:l.unref(c)},null,12,Be))}}),Je=["innerHTML"],ye=l.defineComponent({__name:"MyopFallback",setup(e){const t=l.useSlots(),n=c=>!c||c.length===0?!1:c.some(a=>typeof a.children=="string"?a.children.trim()!=="":Array.isArray(a.children)?n(a.children):!!(a.type&&typeof a.type!="symbol"||a.children)),o=l.computed(()=>{const c=t.default;if(!c)return!1;const a=c();return n(a)}),s={position:"absolute",top:"0",left:"0",right:"0",bottom:"0"},r={...V.fallbackStyleObject},i=V.getMyopLogoHtml();return(c,a)=>o.value?(l.openBlock(),l.createElementBlock("div",{key:0,style:s},[l.renderSlot(c.$slots,"default")])):(l.openBlock(),l.createElementBlock("div",{key:1,style:r,innerHTML:l.unref(i)},null,8,Je))}}),We=l.defineComponent({name:"MyopComponent",__name:"MyopComponent",props:{componentId:{},componentConfig:{},data:{},fadeDuration:{default:200},autoSize:{type:Boolean,default:!1},environment:{},preview:{type:Boolean},on:{}},emits:["load","error","sizeChange","cta"],setup(e,{expose:t,emit:n}){const o=l.useSlots(),s=f=>!f||f.length===0?!1:f.some(p=>typeof p.children=="string"?p.children.trim()!=="":Array.isArray(p.children)?s(p.children):!!(p.type&&typeof p.type!="symbol"||p.children)),r=l.computed(()=>{const f=o.loader;if(!f)return!1;const p=f();return s(p)});l.computed(()=>{const f=o.fallback;if(!f)return!1;const p=f();return s(p)});const i=e,c=n,a=l.ref(null),u=l.shallowRef(null),m=i.componentId?xe(i.componentId):!1,g=l.ref(!m),R=l.ref(1),b=l.ref(!1),A=l.ref(!1),D=l.ref(void 0),ue=l.ref(!1),Y=l.ref(null),fe=l.ref(!1);let M=null;const pe=()=>{R.value=0,setTimeout(()=>{g.value=!1},i.fadeDuration)},de=f=>{console.error("[MyopComponent] Error:",f),pe(),b.value=!0,c("error",f)},me=async f=>{var O,G;ue.value=!0;let p=!1;try{const y=JSON.parse(JSON.stringify({componentId:f.componentId,data:f.data,environment:f.environment,preview:f.preview,autoSize:f.autoSize}));if(!y.componentId&&!f.componentConfig){de("No component configuration provided");return}const Yt=y.preview===!0?!0:void 0,Gt=f.componentConfig?JSON.parse(JSON.stringify(f.componentConfig)):await Pe().fetchComponentV2(y.componentId,y.environment,Yt);if(!a.value){de("Container element not found");return}const Qt=l.markRaw({data:y.data,_environment:{props:y}}),Ue=await V.hostSDK.loadComponent(Gt,a.value,Qt);if(p){Ue.dispose();return}if(u.value=l.markRaw(Ue),await u.value.initiated(),p){(O=u.value)==null||O.dispose();return}if(await new Promise(Q=>requestAnimationFrame(Q)),p||!u.value||u.value.markedForDisposed){u.value&&!u.value.markedForDisposed&&u.value.dispose();return}A.value=!0,i.autoSize||pe(),(G=u.value)!=null&&G.props&&(u.value.props.myop_cta_handler=(Q,ve)=>{i.on&&i.on(Q,ve),c("cta",Q,ve)}),c("load",u.value)}catch(y){p||de((y==null?void 0:y.message)||"Unknown error")}finally{if(ue.value=!1,Y.value!==null&&!p){const y=Y.value;Y.value=null,await me(y)}}return()=>{p=!0}},Wt=()=>{var p;if(!A.value||!((p=u.value)!=null&&p.observeAutoSize))return;let f=!0;M=u.value.observeAutoSize({explicitWidth:void 0,explicitHeight:void 0,forceAutoSize:i.autoSize,loaderMinHeight:50,onSizeChange:O=>{c("sizeChange",O),D.value=O,f&&(f=!1,pe())}})};l.watch(()=>i.componentId,async(f,p)=>{f!==p&&(fe.value=!1,A.value=!1,b.value=!1,g.value=!0,R.value=1,u.value&&(u.value.dispose(),u.value=null),M&&(M(),M=null),ue.value?Y.value={...i}:await me(i))}),l.watch(()=>i.data,f=>{var p;if(A.value&&f!==void 0&&u.value){if(!fe.value){fe.value=!0;return}const O=(p=u.value.props)==null?void 0:p.myop_init_interface;if(O){const G=JSON.parse(JSON.stringify(f));O(G)}}},{deep:!0}),l.watch(()=>A.value,f=>{f&&i.autoSize&&Wt()}),l.onMounted(async()=>{(i.componentId||i.componentConfig)&&await me(i)}),l.onUnmounted(()=>{M&&M(),u.value&&u.value.dispose()});const Le=l.computed(()=>{var f,p;return((f=D.value)==null?void 0:f.autoSizingWidth)||((p=D.value)==null?void 0:p.autoSizingHeight)}),je=l.computed(()=>g.value?50:void 0),qt=l.computed(()=>{var f,p;return{position:"relative",width:(f=D.value)!=null&&f.autoSizingWidth?`${D.value.width}px`:"100%",height:(p=D.value)!=null&&p.autoSizingHeight?`${D.value.height}px`:"100%",minHeight:je.value?`${je.value}px`:void 0,overflow:Le.value?"hidden":"inherit"}}),Kt=l.computed(()=>({position:"absolute",inset:"0",overflow:Le.value?"hidden":void 0}));return t({myopComponent:u,isLoaded:A}),(f,p)=>(l.openBlock(),l.createElementBlock("div",{style:l.normalizeStyle(qt.value)},[l.createElementVNode("div",{ref_key:"myopContainer",ref:a,style:l.normalizeStyle(Kt.value)},null,4),g.value&&r.value?(l.openBlock(),l.createBlock(he,{key:0,opacity:R.value,"fade-duration":e.fadeDuration},{default:l.withCtx(()=>[l.renderSlot(f.$slots,"loader")]),_:3},8,["opacity","fade-duration"])):l.createCommentVNode("",!0),b.value?(l.openBlock(),l.createBlock(ye,{key:1},{default:l.withCtx(()=>[l.renderSlot(f.$slots,"fallback")]),_:3})):l.createCommentVNode("",!0)],4))}});/**
+* @vue/shared v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
-**/const dn=process.env.NODE_ENV!=="production"?Object.freeze({}):{};process.env.NODE_ENV!=="production"&&Object.freeze([]);const St=()=>{},un=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Ce=Object.assign,C=Array.isArray,S=e=>typeof e=="function",D=e=>typeof e=="string",hn=e=>typeof e=="symbol",G=e=>e!==null&&typeof e=="object",pn=e=>(G(e)||S(e))&&S(e.then)&&S(e.catch),It=e=>{const t=Object.create(null);return s=>t[s]||(t[s]=e(s))},fn=It(e=>e.charAt(0).toUpperCase()+e.slice(1)),mn=It(e=>e?`on${fn(e)}`:"");let Tt;const ee=()=>Tt||(Tt=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Se(e){if(C(e)){const t={};for(let s=0;s<e.length;s++){const n=e[s],i=D(n)?vn(n):Se(n);if(i)for(const o in i)t[o]=i[o]}return t}else if(D(e)||G(e))return e}const gn=/;(?![^(]*\))/g,yn=/:([^]+)/,wn=/\/\*[^]*?\*\//g;function vn(e){const t={};return e.replace(wn,"").split(gn).forEach(s=>{if(s){const n=s.split(yn);n.length>1&&(t[n[0].trim()]=n[1].trim())}}),t}function Ie(e){let t="";if(D(e))t=e;else if(C(e))for(let s=0;s<e.length;s++){const n=Ie(e[s]);n&&(t+=n+" ")}else if(G(e))for(const s in e)e[s]&&(t+=s+" ");return t.trim()}/**
-* @vue/reactivity v3.5.17
+**/const qe=process.env.NODE_ENV!=="production"?Object.freeze({}):{};process.env.NODE_ENV!=="production"&&Object.freeze([]);const ge=()=>{},Ke=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),X=Object.assign,_=Array.isArray,C=e=>typeof e=="function",S=e=>typeof e=="string",Ye=e=>typeof e=="symbol",H=e=>e!==null&&typeof e=="object",Ge=e=>(H(e)||C(e))&&C(e.then)&&C(e.catch),_e=e=>{const t=Object.create(null);return(n=>t[n]||(t[n]=e(n)))},Qe=_e(e=>e.charAt(0).toUpperCase()+e.slice(1)),Xe=_e(e=>e?`on${Qe(e)}`:"");let Ce;const x=()=>Ce||(Ce=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Z(e){if(_(e)){const t={};for(let n=0;n<e.length;n++){const o=e[n],s=S(o)?nt(o):Z(o);if(s)for(const r in s)t[r]=s[r]}return t}else if(S(e)||H(e))return e}const Ze=/;(?![^(]*\))/g,et=/:([^]+)/,tt=/\/\*[^]*?\*\//g;function nt(e){const t={};return e.replace(tt,"").split(Ze).forEach(n=>{if(n){const o=n.split(et);o.length>1&&(t[o[0].trim()]=o[1].trim())}}),t}function ee(e){let t="";if(S(e))t=e;else if(_(e))for(let n=0;n<e.length;n++){const o=ee(e[n]);o&&(t+=o+" ")}else if(H(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}/**
+* @vue/reactivity v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
-**/Symbol(process.env.NODE_ENV!=="production"?"Object iterate":""),Symbol(process.env.NODE_ENV!=="production"?"Map keys iterate":""),Symbol(process.env.NODE_ENV!=="production"?"Array iterate":""),new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(hn));function Te(e){return e?!!e.__v_raw:!1}function te(e){const t=e&&e.__v_raw;return t?te(t):e}function xt(e){return e?e.__v_isRef===!0:!1}/**
-* @vue/runtime-core v3.5.17
+**/process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV,new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Ye));function te(e){return e?!!e.__v_raw:!1}function L(e){const t=e&&e.__v_raw;return t?L(t):e}function Ee(e){return e?e.__v_isRef===!0:!1}/**
+* @vue/runtime-core v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
-**/const P=[];function Mn(e){P.push(e)}function _n(){P.pop()}let xe=!1;function N(e,...t){if(xe)return;xe=!0;const s=P.length?P[P.length-1].component:null,n=s&&s.appContext.config.warnHandler,i=En();if(n)se(n,s,11,[e+t.map(o=>{var r,c;return(c=(r=o.toString)==null?void 0:r.call(o))!=null?c:JSON.stringify(o)}).join(""),s&&s.proxy,i.map(({vnode:o})=>`at <${zt(s,o.type)}>`).join(`
-`),i]);else{const o=[`[Vue warn]: ${e}`,...t];i.length&&o.push(`
-`,...bn(i)),console.warn(...o)}xe=!1}function En(){let e=P[P.length-1];if(!e)return[];const t=[];for(;e;){const s=t[0];s&&s.vnode===e?s.recurseCount++:t.push({vnode:e,recurseCount:0});const n=e.component&&e.component.parent;e=n&&n.vnode}return t}function bn(e){const t=[];return e.forEach((s,n)=>{t.push(...n===0?[]:[`
-`],...Cn(s))}),t}function Cn({vnode:e,recurseCount:t}){const s=t>0?`... (${t} recursive calls)`:"",n=e.component?e.component.parent==null:!1,i=` at <${zt(e.component,e.type,n)}`,o=">"+s;return e.props?[i,...Sn(e.props),o]:[i+o]}function Sn(e){const t=[],s=Object.keys(e);return s.slice(0,3).forEach(n=>{t.push(...Rt(n,e[n]))}),s.length>3&&t.push(" ..."),t}function Rt(e,t,s){return D(t)?(t=JSON.stringify(t),s?t:[`${e}=${t}`]):typeof t=="number"||typeof t=="boolean"||t==null?s?t:[`${e}=${t}`]:xt(t)?(t=Rt(e,te(t.value),!0),s?t:[`${e}=Ref<`,t,">"]):S(t)?[`${e}=fn${t.name?`<${t.name}>`:""}`]:(t=te(t),s?t:[`${e}=`,t])}const Re={sp:"serverPrefetch hook",bc:"beforeCreate hook",c:"created hook",bm:"beforeMount hook",m:"mounted hook",bu:"beforeUpdate hook",u:"updated",bum:"beforeUnmount hook",um:"unmounted hook",a:"activated hook",da:"deactivated hook",ec:"errorCaptured hook",rtc:"renderTracked hook",rtg:"renderTriggered hook",0:"setup function",1:"render function",2:"watcher getter",3:"watcher callback",4:"watcher cleanup function",5:"native event handler",6:"component event handler",7:"vnode hook",8:"directive hook",9:"transition hook",10:"app errorHandler",11:"app warnHandler",12:"ref function",13:"async component loader",14:"scheduler flush",15:"component update",16:"app unmount cleanup function"};function se(e,t,s,n){try{return n?e(...n):e()}catch(i){ke(i,t,s)}}function kt(e,t,s,n){if(S(e)){const i=se(e,t,s,n);return i&&pn(i)&&i.catch(o=>{ke(o,t,s)}),i}if(C(e)){const i=[];for(let o=0;o<e.length;o++)i.push(kt(e[o],t,s,n));return i}else process.env.NODE_ENV!=="production"&&N(`Invalid value type passed to callWithAsyncErrorHandling(): ${typeof e}`)}function ke(e,t,s,n=!0){const i=t?t.vnode:null,{errorHandler:o,throwUnhandledErrorInProduction:r}=t&&t.appContext.config||dn;if(t){let c=t.parent;const l=t.proxy,d=process.env.NODE_ENV!=="production"?Re[s]:`https://vuejs.org/error-reference/#runtime-${s}`;for(;c;){const u=c.ec;if(u){for(let h=0;h<u.length;h++)if(u[h](e,l,d)===!1)return}c=c.parent}if(o){se(o,null,10,[e,l,d]);return}}In(e,s,i,n,r)}function In(e,t,s,n=!0,i=!1){if(process.env.NODE_ENV!=="production"){const o=Re[t];if(s&&Mn(s),N(`Unhandled error${o?` during execution of ${o}`:""}`),s&&_n(),n)throw e;console.error(e)}else{if(i)throw e;console.error(e)}}const E=[];let R=-1;const B=[];let $=null,K=0;const Tn=Promise.resolve();let He=null;const xn=100;function Rn(e){let t=R+1,s=E.length;for(;t<s;){const n=t+s>>>1,i=E[n],o=J(i);o<e||o===e&&i.flags&2?t=n+1:s=n}return t}function kn(e){if(!(e.flags&1)){const t=J(e),s=E[E.length-1];!s||!(e.flags&2)&&t>=J(s)?E.push(e):E.splice(Rn(t),0,e),e.flags|=1,Ht()}}function Ht(){He||(He=Tn.then(Ot))}function Hn(e){C(e)?B.push(...e):$&&e.id===-1?$.splice(K+1,0,e):e.flags&1||(B.push(e),e.flags|=1),Ht()}function On(e){if(B.length){const t=[...new Set(B)].sort((s,n)=>J(s)-J(n));if(B.length=0,$){$.push(...t);return}for($=t,process.env.NODE_ENV!=="production"&&(e=e||new Map),K=0;K<$.length;K++){const s=$[K];process.env.NODE_ENV!=="production"&&Dt(e,s)||(s.flags&4&&(s.flags&=-2),s.flags&8||s(),s.flags&=-2)}$=null,K=0}}const J=e=>e.id==null?e.flags&2?-1:1/0:e.id;function Ot(e){process.env.NODE_ENV!=="production"&&(e=e||new Map);const t=process.env.NODE_ENV!=="production"?s=>Dt(e,s):St;try{for(R=0;R<E.length;R++){const s=E[R];if(s&&!(s.flags&8)){if(process.env.NODE_ENV!=="production"&&t(s))continue;s.flags&4&&(s.flags&=-2),se(s,s.i,s.i?15:14),s.flags&4||(s.flags&=-2)}}}finally{for(;R<E.length;R++){const s=E[R];s&&(s.flags&=-2)}R=-1,E.length=0,On(e),He=null,(E.length||B.length)&&Ot(e)}}function Dt(e,t){const s=e.get(t)||0;if(s>xn){const n=t.i,i=n&&Ut(n.type);return ke(`Maximum recursive updates exceeded${i?` in component <${i}>`:""}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,null,10),!0}return e.set(t,s+1),!1}const Oe=new Map;process.env.NODE_ENV!=="production"&&(ee().__VUE_HMR_RUNTIME__={createRecord:De(Dn),rerender:De(Nn),reload:De($n)});const ne=new Map;function Dn(e,t){return ne.has(e)?!1:(ne.set(e,{initialDef:ie(t),instances:new Set}),!0)}function ie(e){return qt(e)?e.__vccOpts:e}function Nn(e,t){const s=ne.get(e);s&&(s.initialDef.render=t,[...s.instances].forEach(n=>{t&&(n.render=t,ie(n.type).render=t),n.renderCache=[],n.update()}))}function $n(e,t){const s=ne.get(e);if(!s)return;t=ie(t),Nt(s.initialDef,t);const n=[...s.instances];for(let i=0;i<n.length;i++){const o=n[i],r=ie(o.type);let c=Oe.get(r);c||(r!==s.initialDef&&Nt(r,t),Oe.set(r,c=new Set)),c.add(o),o.appContext.propsCache.delete(o.type),o.appContext.emitsCache.delete(o.type),o.appContext.optionsCache.delete(o.type),o.ceReload?(c.add(o),o.ceReload(t.styles),c.delete(o)):o.parent?kn(()=>{o.parent.update(),c.delete(o)}):o.appContext.reload?o.appContext.reload():typeof window<"u"?window.location.reload():console.warn("[HMR] Root or manually mounted instance modified. Full reload required."),o.root.ce&&o!==o.root&&o.root.ce._removeChildStyle(r)}Hn(()=>{Oe.clear()})}function Nt(e,t){Ce(e,t);for(const s in e)s!=="__file"&&!(s in t)&&delete e[s]}function De(e){return(t,s)=>{try{return e(t,s)}catch(n){console.error(n),console.warn("[HMR] Something went wrong during Vue component hot-reload. Full reload required.")}}}let U,oe=[];function $t(e,t){var s,n;U=e,U?(U.enabled=!0,oe.forEach(({event:i,args:o})=>U.emit(i,...o)),oe=[]):typeof window<"u"&&window.HTMLElement&&!((n=(s=window.navigator)==null?void 0:s.userAgent)!=null&&n.includes("jsdom"))?((t.__VUE_DEVTOOLS_HOOK_REPLAY__=t.__VUE_DEVTOOLS_HOOK_REPLAY__||[]).push(o=>{$t(o,t)}),setTimeout(()=>{U||(t.__VUE_DEVTOOLS_HOOK_REPLAY__=null,oe=[])},3e3)):oe=[]}let re=null,Fn=null;const Pn=e=>e.__isTeleport;function Ft(e,t){e.shapeFlag&6&&e.component?(e.transition=t,Ft(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}ee().requestIdleCallback,ee().cancelIdleCallback;function Ln(e,t,s=le,n=!1){if(s){const i=s[e]||(s[e]=[]),o=t.__weh||(t.__weh=(...r)=>{const c=Zn(s),l=kt(t,s,e,r);return c(),l});return n?i.unshift(o):i.push(o),o}else if(process.env.NODE_ENV!=="production"){const i=mn(Re[e].replace(/ hook$/,""));N(`${i} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.`)}}const An=(e=>(t,s=le)=>{(!Kt||e==="sp")&&Ln(e,(...n)=>t(...n),s)})("u"),Vn=Symbol.for("v-ndc"),Bn={};process.env.NODE_ENV!=="production"&&(Bn.ownKeys=e=>(N("Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead."),Reflect.ownKeys(e)));const Kn={},Pt=e=>Object.getPrototypeOf(e)===Kn,Un=e=>e.__isSuspense,Lt=Symbol.for("v-fgt"),zn=Symbol.for("v-txt"),qn=Symbol.for("v-cmt");function jn(e){return e?e.__v_isVNode===!0:!1}const Wn=(...e)=>Vt(...e),At=({key:e})=>e??null,ae=({ref:e,ref_key:t,ref_for:s})=>(typeof e=="number"&&(e=""+e),e!=null?D(e)||xt(e)||S(e)?{i:re,r:e,k:t,f:!!s}:e:null);function Gn(e,t=null,s=null,n=0,i=null,o=e===Lt?0:1,r=!1,c=!1){const l={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&At(t),ref:t&&ae(t),scopeId:Fn,slotScopeIds:null,children:s,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:o,patchFlag:n,dynamicProps:i,dynamicChildren:null,appContext:null,ctx:re};return c?(Ne(l,s),o&128&&e.normalize(l)):s&&(l.shapeFlag|=D(s)?8:16),process.env.NODE_ENV!=="production"&&l.key!==l.key&&N("VNode created with invalid key (NaN). VNode type:",l.type),l}const Jn=process.env.NODE_ENV!=="production"?Wn:Vt;function Vt(e,t=null,s=null,n=0,i=null,o=!1){if((!e||e===Vn)&&(process.env.NODE_ENV!=="production"&&!e&&N(`Invalid vnode type when creating vnode: ${e}.`),e=qn),jn(e)){const c=ce(e,t,!0);return s&&Ne(c,s),c.patchFlag=-2,c}if(qt(e)&&(e=e.__vccOpts),t){t=Yn(t);let{class:c,style:l}=t;c&&!D(c)&&(t.class=Ie(c)),G(l)&&(Te(l)&&!C(l)&&(l=Ce({},l)),t.style=Se(l))}const r=D(e)?1:Un(e)?128:Pn(e)?64:G(e)?4:S(e)?2:0;return process.env.NODE_ENV!=="production"&&r&4&&Te(e)&&(e=te(e),N("Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.",`
-Component that was made reactive: `,e)),Gn(e,t,s,n,i,r,o,!0)}function Yn(e){return e?Te(e)||Pt(e)?Ce({},e):e:null}function ce(e,t,s=!1,n=!1){const{props:i,ref:o,patchFlag:r,children:c,transition:l}=e,d=t?Qn(i||{},t):i,u={__v_isVNode:!0,__v_skip:!0,type:e.type,props:d,key:d&&At(d),ref:t&&t.ref?s&&o?C(o)?o.concat(ae(t)):[o,ae(t)]:ae(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:process.env.NODE_ENV!=="production"&&r===-1&&C(c)?c.map(Bt):c,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==Lt?r===-1?16:r|16:r,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:l,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&ce(e.ssContent),ssFallback:e.ssFallback&&ce(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return l&&n&&Ft(u,l.clone(u)),u}function Bt(e){const t=ce(e);return C(e.children)&&(t.children=e.children.map(Bt)),t}function Xn(e=" ",t=0){return Jn(zn,null,e,t)}function Ne(e,t){let s=0;const{shapeFlag:n}=e;if(t==null)t=null;else if(C(t))s=16;else if(typeof t=="object")if(n&65){const i=t.default;i&&(i._c&&(i._d=!1),Ne(e,i()),i._c&&(i._d=!0));return}else s=32,!t._&&!Pt(t)&&(t._ctx=re);else S(t)?(t={default:t,_ctx:re},s=32):(t=String(t),n&64?(s=16,t=[Xn(t)]):s=8);e.children=t,e.shapeFlag|=s}function Qn(...e){const t={};for(let s=0;s<e.length;s++){const n=e[s];for(const i in n)if(i==="class")t.class!==n.class&&(t.class=Ie([t.class,n.class]));else if(i==="style")t.style=Se([t.style,n.style]);else if(un(i)){const o=t[i],r=n[i];r&&o!==r&&!(C(o)&&o.includes(r))&&(t[i]=o?[].concat(o,r):r)}else i!==""&&(t[i]=n[i])}return t}let le=null,$e;{const e=ee(),t=(s,n)=>{let i;return(i=e[s])||(i=e[s]=[]),i.push(n),o=>{i.length>1?i.forEach(r=>r(o)):i[0](o)}};$e=t("__VUE_INSTANCE_SETTERS__",s=>le=s),t("__VUE_SSR_SETTERS__",s=>Kt=s)}const Zn=e=>{const t=le;return $e(e),e.scope.on(),()=>{e.scope.off(),$e(t)}};let Kt=!1;process.env.NODE_ENV;const ei=/(?:^|[-_])(\w)/g,ti=e=>e.replace(ei,t=>t.toUpperCase()).replace(/[-_]/g,"");function Ut(e,t=!0){return S(e)?e.displayName||e.name:e.name||t&&e.__name}function zt(e,t,s=!1){let n=Ut(t);if(!n&&t.__file){const i=t.__file.match(/([^/\\]+)\.\w+$/);i&&(n=i[1])}if(!n&&e&&e.parent){const i=o=>{for(const r in o)if(o[r]===t)return r};n=i(e.components||e.parent.type.components)||i(e.appContext.components)}return n?ti(n):s?"App":"Anonymous"}function qt(e){return S(e)&&"__vccOpts"in e}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;const si=m.defineComponent({inheritAttrs:!0,__name:"MyopVueComponent",props:{flowId:{},componentId:{},onReady:{type:Function}},setup(e,{expose:t}){const s=e,n=m.useAttrs(),i=m.useSlots(),o=m.ref(null),r=m.ref(!0),c=m.ref(null),l=m.ref(null),d=m.getCurrentInstance(),u=m.ref(null);An(()=>{l&&l.value&&l.value(n)}),m.onMounted(async()=>{if(o.value){const f=await ns.Main.fetchComponent(s.componentId,s.flowId);c.value=await Ct.loadComponent(f,o==null?void 0:o.value,{_environment:{props:n,slots:i,context:d==null?void 0:d.appContext,vueContainerRef:o,defineUpdater:v=>{l.value=v},defineInnerVueComponentRef:v=>{u.value=v.value}}}),r.value=!1,s.onReady&&s.onReady(c.value,u.value)}});const h=m.reactive({});return t(h),m.watchEffect(()=>{Object.assign(h,u.value)}),(f,v)=>(m.openBlock(),m.createElementBlock(m.Fragment,null,[m.createElementVNode("div",m.mergeProps(m.unref(n),{ref_key:"myopContainer",ref:o}),null,16),r.value?m.renderSlot(f.$slots,"loading",{key:0}):m.createCommentVNode("",!0)],64))}});F.MyopContainer=si,Object.defineProperty(F,Symbol.toStringTag,{value:"Module"})});
+**/const I=[];function ot(e){I.push(e)}function rt(){I.pop()}let ne=!1;function N(e,...t){if(ne)return;ne=!0;const n=I.length?I[I.length-1].component:null,o=n&&n.appContext.config.warnHandler,s=st();if(o)j(o,n,11,[e+t.map(r=>{var i,c;return(c=(i=r.toString)==null?void 0:i.call(r))!=null?c:JSON.stringify(r)}).join(""),n&&n.proxy,s.map(({vnode:r})=>`at <${He(n,r.type)}>`).join(`
+`),s]);else{const r=[`[Vue warn]: ${e}`,...t];s.length&&r.push(`
+`,...lt(s)),console.warn(...r)}ne=!1}function st(){let e=I[I.length-1];if(!e)return[];const t=[];for(;e;){const n=t[0];n&&n.vnode===e?n.recurseCount++:t.push({vnode:e,recurseCount:0});const o=e.component&&e.component.parent;e=o&&o.vnode}return t}function lt(e){const t=[];return e.forEach((n,o)=>{t.push(...o===0?[]:[`
+`],...it(n))}),t}function it({vnode:e,recurseCount:t}){const n=t>0?`... (${t} recursive calls)`:"",o=e.component?e.component.parent==null:!1,s=` at <${He(e.component,e.type,o)}`,r=">"+n;return e.props?[s,...at(e.props),r]:[s+r]}function at(e){const t=[],n=Object.keys(e);return n.slice(0,3).forEach(o=>{t.push(...Se(o,e[o]))}),n.length>3&&t.push(" ..."),t}function Se(e,t,n){return S(t)?(t=JSON.stringify(t),n?t:[`${e}=${t}`]):typeof t=="number"||typeof t=="boolean"||t==null?n?t:[`${e}=${t}`]:Ee(t)?(t=Se(e,L(t.value),!0),n?t:[`${e}=Ref<`,t,">"]):C(t)?[`${e}=fn${t.name?`<${t.name}>`:""}`]:(t=L(t),n?t:[`${e}=`,t])}const oe={sp:"serverPrefetch hook",bc:"beforeCreate hook",c:"created hook",bm:"beforeMount hook",m:"mounted hook",bu:"beforeUpdate hook",u:"updated",bum:"beforeUnmount hook",um:"unmounted hook",a:"activated hook",da:"deactivated hook",ec:"errorCaptured hook",rtc:"renderTracked hook",rtg:"renderTriggered hook",0:"setup function",1:"render function",2:"watcher getter",3:"watcher callback",4:"watcher cleanup function",5:"native event handler",6:"component event handler",7:"vnode hook",8:"directive hook",9:"transition hook",10:"app errorHandler",11:"app warnHandler",12:"ref function",13:"async component loader",14:"scheduler flush",15:"component update",16:"app unmount cleanup function"};function j(e,t,n,o){try{return o?e(...o):e()}catch(s){re(s,t,n)}}function Ne(e,t,n,o){if(C(e)){const s=j(e,t,n,o);return s&&Ge(s)&&s.catch(r=>{re(r,t,n)}),s}if(_(e)){const s=[];for(let r=0;r<e.length;r++)s.push(Ne(e[r],t,n,o));return s}else process.env.NODE_ENV!=="production"&&N(`Invalid value type passed to callWithAsyncErrorHandling(): ${typeof e}`)}function re(e,t,n,o=!0){const s=t?t.vnode:null,{errorHandler:r,throwUnhandledErrorInProduction:i}=t&&t.appContext.config||qe;if(t){let c=t.parent;const a=t.proxy,u=process.env.NODE_ENV!=="production"?oe[n]:`https://vuejs.org/error-reference/#runtime-${n}`;for(;c;){const m=c.ec;if(m){for(let g=0;g<m.length;g++)if(m[g](e,a,u)===!1)return}c=c.parent}if(r){j(r,null,10,[e,a,u]);return}}ct(e,n,s,o,i)}function ct(e,t,n,o=!0,s=!1){if(process.env.NODE_ENV!=="production"){const r=oe[t];if(n&&ot(n),N(`Unhandled error${r?` during execution of ${r}`:""}`),n&&rt(),o)throw e;console.error(e)}else{if(s)throw e;console.error(e)}}const h=[];let E=-1;const F=[];let w=null,T=0;const ut=Promise.resolve();let se=null;const ft=100;function pt(e){let t=E+1,n=h.length;for(;t<n;){const o=t+n>>>1,s=h[o],r=z(s);r<e||r===e&&s.flags&2?t=o+1:n=o}return t}function dt(e){if(!(e.flags&1)){const t=z(e),n=h[h.length-1];!n||!(e.flags&2)&&t>=z(n)?h.push(e):h.splice(pt(t),0,e),e.flags|=1,we()}}function we(){se||(se=ut.then(ke))}function mt(e){_(e)?F.push(...e):w&&e.id===-1?w.splice(T+1,0,e):e.flags&1||(F.push(e),e.flags|=1),we()}function ht(e){if(F.length){const t=[...new Set(F)].sort((n,o)=>z(n)-z(o));if(F.length=0,w){w.push(...t);return}for(w=t,process.env.NODE_ENV!=="production"&&(e=e||new Map),T=0;T<w.length;T++){const n=w[T];process.env.NODE_ENV!=="production"&&be(e,n)||(n.flags&4&&(n.flags&=-2),n.flags&8||n(),n.flags&=-2)}w=null,T=0}}const z=e=>e.id==null?e.flags&2?-1:1/0:e.id;function ke(e){process.env.NODE_ENV!=="production"&&(e=e||new Map);const t=process.env.NODE_ENV!=="production"?n=>be(e,n):ge;try{for(E=0;E<h.length;E++){const n=h[E];if(n&&!(n.flags&8)){if(process.env.NODE_ENV!=="production"&&t(n))continue;n.flags&4&&(n.flags&=-2),j(n,n.i,n.i?15:14),n.flags&4||(n.flags&=-2)}}}finally{for(;E<h.length;E++){const n=h[E];n&&(n.flags&=-2)}E=-1,h.length=0,ht(e),se=null,(h.length||F.length)&&ke(e)}}function be(e,t){const n=e.get(t)||0;if(n>ft){const o=t.i,s=o&&Me(o.type);return re(`Maximum recursive updates exceeded${s?` in component <${s}>`:""}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,null,10),!0}return e.set(t,n+1),!1}const le=new Map;process.env.NODE_ENV!=="production"&&(x().__VUE_HMR_RUNTIME__={createRecord:ie(yt),rerender:ie(gt),reload:ie(_t)});const U=new Map;function yt(e,t){return U.has(e)?!1:(U.set(e,{initialDef:v(t),instances:new Set}),!0)}function v(e){return ze(e)?e.__vccOpts:e}function gt(e,t){const n=U.get(e);n&&(n.initialDef.render=t,[...n.instances].forEach(o=>{t&&(o.render=t,v(o.type).render=t),o.renderCache=[],o.job.flags&8||o.update()}))}function _t(e,t){const n=U.get(e);if(!n)return;t=v(t),Oe(n.initialDef,t);const o=[...n.instances];for(let s=0;s<o.length;s++){const r=o[s],i=v(r.type);let c=le.get(i);c||(i!==n.initialDef&&Oe(i,t),le.set(i,c=new Set)),c.add(r),r.appContext.propsCache.delete(r.type),r.appContext.emitsCache.delete(r.type),r.appContext.optionsCache.delete(r.type),r.ceReload?(c.add(r),r.ceReload(t.styles),c.delete(r)):r.parent?dt(()=>{r.job.flags&8||(r.parent.update(),c.delete(r))}):r.appContext.reload?r.appContext.reload():typeof window<"u"?window.location.reload():console.warn("[HMR] Root or manually mounted instance modified. Full reload required."),r.root.ce&&r!==r.root&&r.root.ce._removeChildStyle(i)}mt(()=>{le.clear()})}function Oe(e,t){X(e,t);for(const n in e)n!=="__file"&&!(n in t)&&delete e[n]}function ie(e){return(t,n)=>{try{return e(t,n)}catch(o){console.error(o),console.warn("[HMR] Something went wrong during Vue component hot-reload. Full reload required.")}}}let $,B=[];function Ve(e,t){var n,o;$=e,$?($.enabled=!0,B.forEach(({event:s,args:r})=>$.emit(s,...r)),B=[]):typeof window<"u"&&window.HTMLElement&&!((o=(n=window.navigator)==null?void 0:n.userAgent)!=null&&o.includes("jsdom"))?((t.__VUE_DEVTOOLS_HOOK_REPLAY__=t.__VUE_DEVTOOLS_HOOK_REPLAY__||[]).push(r=>{Ve(r,t)}),setTimeout(()=>{$||(t.__VUE_DEVTOOLS_HOOK_REPLAY__=null,B=[])},3e3)):B=[]}let J=null,Ct=null;const Et=e=>e.__isTeleport;function Ie(e,t){e.shapeFlag&6&&e.component?(e.transition=t,Ie(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}x().requestIdleCallback,x().cancelIdleCallback;function St(e,t,n=K,o=!1){if(n){const s=n[e]||(n[e]=[]),r=t.__weh||(t.__weh=(...i)=>{const c=Ht(n),a=Ne(t,n,e,i);return c(),a});return o?s.unshift(r):s.push(r),r}else if(process.env.NODE_ENV!=="production"){const s=Xe(oe[e].replace(/ hook$/,""));N(`${s} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.`)}}const Nt=(e=>(t,n=K)=>{(!Ae||e==="sp")&&St(e,(...o)=>t(...o),n)})("u"),wt=Symbol.for("v-ndc"),kt={};process.env.NODE_ENV!=="production"&&(kt.ownKeys=e=>(N("Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead."),Reflect.ownKeys(e)));const bt={},Re=e=>Object.getPrototypeOf(e)===bt,Ot=e=>e.__isSuspense,De=Symbol.for("v-fgt"),Vt=Symbol.for("v-txt"),It=Symbol.for("v-cmt");function Rt(e){return e?e.__v_isVNode===!0:!1}const Dt=(...e)=>Te(...e),Fe=({key:e})=>e??null,W=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?S(e)||Ee(e)||C(e)?{i:J,r:e,k:t,f:!!n}:e:null);function Ft(e,t=null,n=null,o=0,s=null,r=e===De?0:1,i=!1,c=!1){const a={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Fe(t),ref:t&&W(t),scopeId:Ct,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:r,patchFlag:o,dynamicProps:s,dynamicChildren:null,appContext:null,ctx:J};return c?(ae(a,n),r&128&&e.normalize(a)):n&&(a.shapeFlag|=S(n)?8:16),process.env.NODE_ENV!=="production"&&a.key!==a.key&&N("VNode created with invalid key (NaN). VNode type:",a.type),a}const Tt=process.env.NODE_ENV!=="production"?Dt:Te;function Te(e,t=null,n=null,o=0,s=null,r=!1){if((!e||e===wt)&&(process.env.NODE_ENV!=="production"&&!e&&N(`Invalid vnode type when creating vnode: ${e}.`),e=It),Rt(e)){const c=q(e,t,!0);return n&&ae(c,n),c.patchFlag=-2,c}if(ze(e)&&(e=e.__vccOpts),t){t=$t(t);let{class:c,style:a}=t;c&&!S(c)&&(t.class=ee(c)),H(a)&&(te(a)&&!_(a)&&(a=X({},a)),t.style=Z(a))}const i=S(e)?1:Ot(e)?128:Et(e)?64:H(e)?4:C(e)?2:0;return process.env.NODE_ENV!=="production"&&i&4&&te(e)&&(e=L(e),N("Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.",`
+Component that was made reactive: `,e)),Ft(e,t,n,o,s,i,r,!0)}function $t(e){return e?te(e)||Re(e)?X({},e):e:null}function q(e,t,n=!1,o=!1){const{props:s,ref:r,patchFlag:i,children:c,transition:a}=e,u=t?Mt(s||{},t):s,m={__v_isVNode:!0,__v_skip:!0,type:e.type,props:u,key:u&&Fe(u),ref:t&&t.ref?n&&r?_(r)?r.concat(W(t)):[r,W(t)]:W(t):r,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:process.env.NODE_ENV!=="production"&&i===-1&&_(c)?c.map($e):c,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==De?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:a,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&q(e.ssContent),ssFallback:e.ssFallback&&q(e.ssFallback),placeholder:e.placeholder,el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return a&&o&&Ie(m,a.clone(m)),m}function $e(e){const t=q(e);return _(e.children)&&(t.children=e.children.map($e)),t}function At(e=" ",t=0){return Tt(Vt,null,e,t)}function ae(e,t){let n=0;const{shapeFlag:o}=e;if(t==null)t=null;else if(_(t))n=16;else if(typeof t=="object")if(o&65){const s=t.default;s&&(s._c&&(s._d=!1),ae(e,s()),s._c&&(s._d=!0));return}else n=32,!t._&&!Re(t)&&(t._ctx=J);else C(t)?(t={default:t,_ctx:J},n=32):(t=String(t),o&64?(n=16,t=[At(t)]):n=8);e.children=t,e.shapeFlag|=n}function Mt(...e){const t={};for(let n=0;n<e.length;n++){const o=e[n];for(const s in o)if(s==="class")t.class!==o.class&&(t.class=ee([t.class,o.class]));else if(s==="style")t.style=Z([t.style,o.style]);else if(Ke(s)){const r=t[s],i=o[s];i&&r!==i&&!(_(r)&&r.includes(i))&&(t[s]=r?[].concat(r,i):i)}else s!==""&&(t[s]=o[s])}return t}let K=null,ce;{const e=x(),t=(n,o)=>{let s;return(s=e[n])||(s=e[n]=[]),s.push(o),r=>{s.length>1?s.forEach(i=>i(r)):s[0](r)}};ce=t("__VUE_INSTANCE_SETTERS__",n=>K=n),t("__VUE_SSR_SETTERS__",n=>Ae=n)}const Ht=e=>{const t=K;return ce(e),e.scope.on(),()=>{e.scope.off(),ce(t)}};let Ae=!1;process.env.NODE_ENV;const zt=/(?:^|[-_])\w/g,Pt=e=>e.replace(zt,t=>t.toUpperCase()).replace(/[-_]/g,"");function Me(e,t=!0){return C(e)?e.displayName||e.name:e.name||t&&e.__name}function He(e,t,n=!1){let o=Me(t);if(!o&&t.__file){const s=t.__file.match(/([^/\\]+)\.\w+$/);s&&(o=s[1])}if(!o&&e){const s=r=>{for(const i in r)if(r[i]===t)return i};o=s(e.components)||e.parent&&s(e.parent.type.components)||s(e.appContext.components)}return o?Pt(o):n?"App":"Anonymous"}function ze(e){return C(e)&&"__vccOpts"in e}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;const xt=l.defineComponent({inheritAttrs:!0,__name:"MyopVueComponent",props:{flowId:{},componentId:{},onReady:{type:Function}},setup(e,{expose:t}){const n=e,o=l.useAttrs(),s=l.useSlots(),r=l.ref(null),i=l.ref(!0),c=l.ref(null),a=l.ref(null),u=l.getCurrentInstance(),m=l.ref(null);Nt(()=>{a&&a.value&&a.value(o)}),l.onMounted(async()=>{if(r.value){const R=await P.CloudRepository.Main.fetchComponent(n.componentId,n.flowId);c.value=await V.hostSDK.loadComponent(R,r==null?void 0:r.value,{_environment:{props:o,slots:s,context:u==null?void 0:u.appContext,vueContainerRef:r,defineUpdater:b=>{a.value=b},defineInnerVueComponentRef:b=>{m.value=b.value}}}),i.value=!1,n.onReady&&n.onReady(c.value,m.value)}});const g=l.reactive({});return t(g),l.watchEffect(()=>{Object.assign(g,m.value)}),(R,b)=>(l.openBlock(),l.createElementBlock(l.Fragment,null,[l.createElementVNode("div",l.mergeProps(l.unref(o),{ref_key:"myopContainer",ref:r}),null,16),i.value?l.renderSlot(R.$slots,"loading",{key:0}):l.createCommentVNode("",!0)],64))}});let k=P.CloudRepository.Main;const Pe=()=>k,xe=(e,t,n)=>k.isPreloaded(e,t,n),Lt=e=>k.getPreloadedParams(e),jt=()=>{k=new P.CloudRepository("http://localhost:9292")},Ut=e=>{k=new P.CloudRepository(e)},vt=e=>{k=e},Bt=e=>{k.setEnvironment(e)},Jt=async(e,t,n)=>Promise.allSettled(e.map(o=>k.fetchComponentV2(o,t,n)));d.MyopComponent=We,d.MyopContainer=xt,d.MyopFallback=ye,d.MyopLoader=he,d.enableLocalDev=jt,d.getCloudRepository=Pe,d.getPreloadedParams=Lt,d.isPreloaded=xe,d.preloadComponents=Jt,d.setCloudRepository=vt,d.setCloudRepositoryUrl=Ut,d.setEnvironment=Bt,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/dist/types.d.ts

@@ -0,0 +1,75 @@
+import type { IMyopComponent } from "@myop/sdk/host";
+export interface IComponentInstanceConfig {
+    id: string;
+    componentId: string;
+    componentName: string;
+    skinSelector: {
+        [key: string]: any;
+    };
+    nestedComponents?: IComponentInstanceConfig[];
+    resolvedExperiences?: {
+        [key: string]: any;
+    }[];
+    resolvedNestedComponents?: {
+        [key: string]: any;
+    }[];
+    [key: string]: any;
+}
+export interface SizeInfo {
+    width: number;
+    height: number;
+    autoSizingWidth: boolean;
+    autoSizingHeight: boolean;
+}
+/**
+ * Converts kebab-case string to PascalCase
+ * e.g., 'column-reordered' -> 'ColumnReordered'
+ */
+export type KebabToPascal<S extends string> = S extends `${infer First}-${infer Rest}` ? `${Capitalize<First>}${KebabToPascal<Rest>}` : Capitalize<S>;
+/**
+ * Generates typed event handler props from CTA payloads.
+ * e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }`
+ */
+export type EventHandlerProps<TPayloads extends Record<string, any>> = string extends keyof TPayloads ? {} : {
+    [K in keyof TPayloads as `on${KebabToPascal<K & string>}`]?: (payload: TPayloads[K]) => void;
+};
+/**
+ * Type for the `on` callback prop.
+ */
+export type OnCallback<TPayloads extends Record<string, any>> = string extends keyof TPayloads ? (action: string, payload: any) => void : <K extends keyof TPayloads>(action: K, payload: TPayloads[K]) => void;
+/**
+ * Typed props interface for accessing component.props with autocomplete.
+ * Contains myop_init_interface and myop_cta_handler with proper types.
+ */
+export interface IMyopComponentProps<TDataType = any, TPayloads extends Record<string, any> = Record<string, any>> {
+    /** Initialize the component with data */
+    myop_init_interface?: (data: TDataType) => void;
+    /** Handle CTA events from the component */
+    myop_cta_handler?: <K extends keyof TPayloads>(action: K, payload: TPayloads[K]) => void;
+}
+/**
+ * Typed Myop component interface with typed props.
+ * Use this type for the component returned in load event.
+ */
+export type ITypedMyopComponent<TDataType = any, TPayloads extends Record<string, any> = Record<string, any>> = Omit<IMyopComponent, 'props'> & {
+    /** Typed props for the component */
+    props: IMyopComponentProps<TDataType, TPayloads> | null;
+};
+/**
+ * Base props for MyopComponent
+ */
+export interface IBaseProps<TDataType = any, TPayloads extends Record<string, any> = Record<string, any>> {
+    componentId?: string;
+    componentConfig?: IComponentInstanceConfig;
+    data?: TDataType;
+    fadeDuration?: number;
+    autoSize?: boolean;
+    environment?: string;
+    preview?: boolean;
+    on?: OnCallback<TPayloads>;
+}
+/**
+ * Full props type including generated event handlers.
+ * Supports both generic `on` callback and individual typed handlers like `onRowClicked`.
+ */
+export type IPropTypes<TDataType = any, TPayloads extends Record<string, any> = Record<string, any>> = IBaseProps<TDataType, TPayloads> & EventHandlerProps<TPayloads>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myop/vue",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -24,13 +24,12 @@
     "preview": "vite preview",
     "release": "npm publish --access public"
   },
-  "dependencies": {
-    "@myop/sdk": "^0.1.42"
-  },
   "peerDependencies": {
+    "@myop/sdk": "*",
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@myop/sdk": "^0.3.13",
     "@types/node": "^22.14.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
@@ -39,6 +38,21 @@
     "vite": "^6.2.0",
     "vue-tsc": "^2.2.4"
   },
+  "keywords": [
+    "myop",
+    "vue",
+    "vue3",
+    "components",
+    "dynamic-ui",
+    "real-time",
+    "no-deploy",
+    "remote-components",
+    "micro-frontend",
+    "ab-testing",
+    "feature-flags",
+    "sandboxed",
+    "ai-components"
+  ],
   "files": [
     "./dist/*"
   ]