@myop/sdk 0.2.6 → 0.2.7

package/README.md

@@ -11,9 +11,9 @@
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/v/@myop/sdk.svg?style=flat-square" alt="npm version"></a>
-  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/dm/@myop/sdk.svg?style=flat-square" alt="npm downloads"></a>
-  <a href="https://myop.dev/discord"><img src="https://img.shields.io/badge/Discord-Join%20Us-7289da?style=flat-square&logo=discord&logoColor=white" alt="Discord"></a>
+  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/v/@myop/sdk.svg?style=flat-square" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@myop/sdk"><img src="https://img.shields.io/npm/dm/@myop/sdk.svg?style=flat-square" alt="npm downloads" /></a>
+  <a href="https://myop.dev/discord"><img src="https://img.shields.io/badge/Discord-Join%20Us-7289da?style=flat-square&logo=discord&logoColor=white" alt="Discord" /></a>
 </p>
 
 <p align="center">

package/dist/bundled-declarations.d.ts

@@ -576,6 +576,7 @@ declare module "@myop/sdk/host" {
     export * from "@myop/sdk/host/components/IMyopComponent";
     export * from "@myop/sdk/host/loaders/IMyopLoader";
     export * from "@myop/sdk/host/componentCore";
+    export type { CleanupHandler } from "@myop/sdk/common";
 }
 declare module "@myop/sdk/messages/BaseMessage" {
     import { MyopMessageKey } from "@myop/sdk/common/MyopMessages";
@@ -914,6 +915,42 @@ declare module "@myop/sdk/host/components/IMyopComponent" {
     import { BaseMyopMessage, Ref } from "@myop/sdk/messages";
     import { CleanupHandler, IComponentDefinitionConfig } from "@myop/sdk/common";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
+    /**
+     * Result returned by observeAutoSize callback
+     */
+    export interface AutoSizeResult {
+        /** Current width (from content) */
+        width: number;
+        /** Current height (from content) */
+        height: number;
+        /** Whether width is being auto-sized */
+        autoSizingWidth: boolean;
+        /** Whether height is being auto-sized */
+        autoSizingHeight: boolean;
+    }
+    /**
+     * Options for observeAutoSize method
+     */
+    export interface AutoSizeOptions {
+        /** Callback called with size info whenever size changes */
+        onSizeChange?: (result: AutoSizeResult) => void;
+        /** Minimum width constraint */
+        minWidth?: number | string;
+        /** Maximum width constraint */
+        maxWidth?: number | string;
+        /** Minimum height constraint */
+        minHeight?: number | string;
+        /** Maximum height constraint */
+        maxHeight?: number | string;
+        /** Explicit width set by host - if defined, don't auto-size width */
+        explicitWidth?: string | number;
+        /** Explicit height set by host - if defined, don't auto-size height */
+        explicitHeight?: string | number;
+        /** Force auto-size even if container has dimensions */
+        forceAutoSize?: boolean;
+        /** Min height used by loader to detect collapse (default: 50) */
+        loaderMinHeight?: number;
+    }
     type RefTypes = {
         [key: string]: IMyopComponent | Ref;
     };
@@ -934,6 +971,13 @@ declare module "@myop/sdk/host/components/IMyopComponent" {
         hide(): void;
         show(): void;
         inspect(): void;
+        /**
+         * Observes the iframe content size and automatically syncs it to the iframe element.
+         * Only available for iframe-based components. Uses direct contentDocument access.
+         * @param options - Configuration options including size change callback and min/max constraints
+         * @returns Cleanup function to stop observing
+         */
+        observeAutoSize?: (options?: AutoSizeOptions) => CleanupHandler;
         parent?: IMyopComponent;
         props: P;
         refs: R;
@@ -983,7 +1027,7 @@ declare module "@myop/sdk/host/loaders/IMyopLoader" {
     }
 }
 declare module "@myop/sdk/host/components/myopIframeComponent" {
-    import { BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
+    import { AutoSizeOptions, BaseMyopComponent } from "@myop/sdk/host/components/IMyopComponent";
     import { BaseMyopMessage } from "@myop/sdk/messages";
     import { CleanupHandler, IComponentDefinitionConfig, ISkinConfig } from "@myop/sdk/common";
     import { loaderOptions } from "@myop/sdk/host/hostSDK";
@@ -998,6 +1042,13 @@ declare module "@myop/sdk/host/components/myopIframeComponent" {
         show(): void;
         setHeightBasedOnDocumentElement: () => void;
         observeSizeBasedOnDocumentElement: () => CleanupHandler;
+        /**
+         * Observes the iframe content size and automatically syncs it to the iframe element.
+         * Uses direct contentDocument access (same-origin only) for accurate measurements.
+         * @param options - Configuration options including size change callback and min/max constraints
+         * @returns Cleanup function to stop observing
+         */
+        observeAutoSize: (options?: AutoSizeOptions) => CleanupHandler;
         setSizeBasedOnDocumentElement: () => void;
         setHeightBasedOnScrollHeight: () => void;
         send: (message: BaseMyopMessage) => CleanupHandler;
@@ -1436,7 +1487,7 @@ declare module "@myop/sdk/helpers/configBuilder" {
     }
 }
 declare module "@myop/sdk/helpers/CloudRepository" {
-    import { IUserFlow, v2_IVariantConfig } from "@myop/sdk/common";
+    import { IComponentConfig, IUserFlow } from "@myop/sdk/common";
     /**
      * CloudRepository - Unified cloud data access layer for Myop components
      *
@@ -1449,26 +1500,35 @@ declare module "@myop/sdk/helpers/CloudRepository" {
         static Main: CloudRepository;
         private variants;
         private userFlows;
+        private _defaultEnv;
         constructor(_baseUrl?: string);
+        /**
+         * Set the default environment for this CloudRepository instance
+         */
+        setEnvironment(env: string): void;
+        /**
+         * Get the current default environment
+         */
+        getDefaultEnvironment(): string;
         /**
          * Check if a component is already cached/preloaded (v2)
          */
-        isPreloaded(componentId: string): boolean;
+        isPreloaded(componentId: string, env?: string, preview?: boolean): boolean;
         /**
-         * Fetch a v2 component variant
+         * Fetch a v2 component config
          */
-        fetchComponentV2(componentId: string, environmentIdentifier?: string): Promise<v2_IVariantConfig>;
+        fetchComponentV2(componentId: string, environmentIdentifier?: string, preview?: boolean): Promise<IComponentConfig>;
         /**
          * Fetch a v1 component from a flow
          */
-        fetchComponentV1(componentId: string, flowId?: string): Promise<import("common").IComponentConfig>;
+        fetchComponentV1(componentId: string, flowId?: string): Promise<IComponentConfig>;
         fetchAutoFlow(componentId: string): Promise<IUserFlow>;
         fetchFlow(flowId: string): Promise<IUserFlow>;
         /**
          * @deprecated Use fetchComponentV2 or fetchComponentV1 explicitly
          * Defaults to v1 behavior for backward compatibility with existing code
          */
-        fetchComponent(componentId: string, flowId?: string): Promise<import("common").IComponentConfig>;
+        fetchComponent(componentId: string, flowId?: string): Promise<IComponentConfig>;
     }
     /**
      * @deprecated Use CloudRepository instead

package/dist/cjs/_IframeSDK.43696632.min.js

@@ -0,0 +1 @@
+var kt=Object.defineProperty,nn=Object.defineProperties;var on=Object.getOwnPropertyDescriptors;var vt=Object.getOwnPropertySymbols;var sn=Object.prototype.hasOwnProperty,rn=Object.prototype.propertyIsEnumerable;var ot=(o,n,e)=>n in o?kt(o,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[n]=e,y=(o,n)=>{for(var e in n||(n={}))sn.call(n,e)&&ot(o,e,n[e]);if(vt)for(var e of vt(n))rn.call(n,e)&&ot(o,e,n[e]);return o},_=(o,n)=>nn(o,on(n));var an=(o,n)=>{for(var e in n)kt(o,e,{get:n[e],enumerable:!0})};var s=(o,n,e)=>ot(o,typeof n!="symbol"?n+"":n,e);var Y=class{constructor(n,e,t,r,i){this.myopId=n;this.htmlTagName=e;this.BoundingRect=t;this.offsetTop=r;this.offsetLeft=i;s(this,"type","MyopElementRef")}};var Ht=async o=>{if(typeof o=="function")o();else if(o instanceof Promise){let n=await o;typeof n=="function"&&n()}},h=class{constructor(n){this.messageToHost=n}},Ce=class extends h{constructor(e,t){super(e);this.messageToHost=e;this.context=t}};var d={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",GetAttributeMessage:"GetAttributeMessage",SetInnerHtml:"SetInnerHtml",ExecuteComponentMethod:"ExecuteComponentMethod",SetMutationObserverMessage:"SetMutationObserverMessage",SetResizeObserverMessage:"SetResizeObserverMessage",CleanupMessage:"CleanupMessage",In:{DetectedMyopRefsMessage:"DetectedMyopRefsMessage",ClickReplayMessage:"ClickReplayMessage",ExecuteScriptReplyMessage:"ExecuteScriptReplyMessage",EventListenerCallbackMessage:"EventListenerCallbackMessage",ElementValueReplayMessage:"ElementValueReplayMessage",GetAttributeReplayMessage:"GetAttributeReplayMessage",RefComponentCreatedMessage:"RefComponentCreatedMessage",EnvelopedMessage:"EnvelopedMessage",MutationObserverMessage:"MutationObserverMessage",CleanupReplayMessage:"CleanupReplayMessage",ResizeObserverMessage:"ResizeObserverMessage"}};var xe={};an(xe,{AddEventListenerMessage:()=>pt,BaseMyopMessage:()=>M,BindClickMessage:()=>it,ChangeTextMessage:()=>at,CleanupMessage:()=>fe,CleanupReplayMessage:()=>ge,ClickReplayMessage:()=>U,CreateRefComponentMessage:()=>ce,CustomRefMessage:()=>W,DetectMyopRefsMessage:()=>lt,DetectedMyopRefsMessage:()=>G,DisposeMessage:()=>ue,ElementValueReplayMessage:()=>q,EnvelopedMessage:()=>me,EventListenerCallbackMessage:()=>V,ExecuteComponentMethod:()=>H,ExecuteScriptMessage:()=>R,ExecuteScriptReplyMessage:()=>N,GetAttributeMessage:()=>ft,GetAttributeReplayMessage:()=>de,GetElementValueMessage:()=>mt,InitMessage:()=>Z,InitRequest:()=>j,InitResponse:()=>pe,MessageDirection:()=>b,MutationObserverMessage:()=>le,MyopBindMessage:()=>S,MyopBindReplayMessage:()=>w,MyopElementMessage:()=>rt,Ref:()=>K,RefComponentCreatedMessage:()=>O,ResizeObserverMessage:()=>ye,SetAttributeMessage:()=>ct,SetInnerHtml:()=>dt,SetMutationObserverMessage:()=>gt,SetResizeObserverMessage:()=>ut,stripFunction:()=>_t});var k=()=>"10000000-1000-4000-8000-100000000000".replace(/[018]/g,o=>(+o^crypto.getRandomValues(new Uint8Array(1))[0]&15>>+o/4).toString(16));var pn=o=>{let n=[...o].map(e=>e.toString(16).padStart(2,"0")).join("");return[n.slice(0,8),n.slice(8,12),n.slice(12,16),n.slice(16,20),n.slice(20)].join("-")};var cn=o=>{let n=o.replace(/-/g,"+").replace(/_/g,"/");for(;n.length%4;)n+="=";let e=atob(n);return Uint8Array.from(e,t=>t.charCodeAt(0))};var st=o=>{let n=cn(o);if(n.length%16!==0)throw new Error("Invalid input length");let e=[];for(let t=0;t<n.length;t+=16)e.push(pn(n.slice(t,t+16)));return e};var Bt=o=>new Promise(n=>setTimeout(n,o));var b=class{};s(b,"down","down"),s(b,"up","up");var M=class{constructor(){s(this,"id",k());s(this,"myop",!0);s(this,"content");s(this,"source");s(this,"destination");s(this,"route");s(this,"ref");s(this,"direction");s(this,"cleanable",!1)}static create(...n){return new this(...n)}isTypeof(n){return n.messageType===this.messageType}},rt=class extends M{constructor(e){super();this.ref=e}},w=class extends M{constructor(e){super();this.replayToHandler=e}},S=class extends M{constructor(e){super();this.handler=e;s(this,"handlerUniqueId",k())}},K=class o{constructor(n,e){this.refConfig=n;this.component=e;s(this,"myop",!0);s(this,"__nonProxied");this.__nonProxied=_(y({},this),{component:null})}static create(n,e,t){let r=e;return r||(r={id:"",name:"",description:"",selectorType:"id-attribute",selector:n,behavior:{type:"code"}}),new o(r,t)}};var Dt="ClickReplayMessage",it=class extends S{constructor(e,t){super(t);this.ref=e;s(this,"replyMessageKey",Dt);s(this,"messageType","BindClickMessage");s(this,"cleanable",!0)}},U=class extends w{constructor(){super(...arguments);s(this,"messageType",Dt)}};var at=class extends M{constructor(e,t){super();this.ref=e;s(this,"messageType","ChangeTextMessage");this.content=t}};var Lt="ExecuteScriptReplyMessage",mn=/(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/,dn=/\(\s*[^)]+\s*\)\s*=>\s*(.+)/,_t=o=>{let n=o.match(mn);if(n)return n[1]||n[3];{let e=o.match(dn);if(e)return e[1].trim()}},R=class extends S{constructor(e,t=()=>{},r){super(t);this.scriptInputs=r;s(this,"replyMessageKey",Lt);s(this,"messageType","ExecuteScriptMessage");s(this,"script","");this.script=e.toString(),this.content=e.toString(),this.content=_t(this.content)}};s(R,"replierKey","send"),s(R,"completeStreamKey","completeStream");var N=class extends w{constructor(e,t){super(e);this.replayToHandler=e;this.content=t;s(this,"messageType",Lt)}};var W=class extends R{constructor(e,t,r=()=>{}){super(({rootRef:i,elementId:a,_script:p,__scriptInputs:c})=>{let m=(i.shadowRoot||i.container).querySelectorAll("[myop-id='".concat(a,"']"));return m.length?(c.ref=m[0],new Function("return (".concat(p,")(...arguments)"))(c)):null},r);this.scriptInputs=t;this.scriptInputs=_(y({},t),{_script:e.toString()})}};var Ot="EventListenerCallbackMessage",pt=class extends S{constructor(e,t,r){super(r);this.ref=e;this.type=t;this.handler=r;s(this,"replyMessageKey",Ot);s(this,"messageType","AddEventListenerMessage");s(this,"cleanable",!0);s(this,"serializableSkeleton",!1)}withSerializableSkeleton(e){return this.serializableSkeleton=e,this}},V=class extends w{constructor(e,t){super(e);this.replayToHandler=e;this.e=t;s(this,"messageType",Ot);this.content={e:t}}};var ct=class extends M{constructor(e,t,r){super();this.ref=e;this.name=t;this.value=r;s(this,"messageType","SetAttributeMessage")}};var Pt="ElementValueReplayMessage",mt=class extends S{constructor(e,t){super(t);this.ref=e;s(this,"replyMessageKey",Pt);s(this,"messageType","GetElementValueMessage")}},q=class extends w{constructor(e){super();this.content=e;s(this,"messageType",Pt)}};var dt=class extends M{constructor(e,t){super();this.ref=e;s(this,"messageType","SetInnerHtml");this.content=t}};var Z=class extends M{constructor(e){super();s(this,"messageType","InitMessage");this.content={id:e}}isTypeof(e){return e.messageType===this.messageType}},pe=class extends Z{constructor(){super(...arguments);s(this,"messageType","InitResponse")}},j=class extends M{constructor(){super(...arguments);s(this,"messageType","InitRequest")}};var At="RefComponentCreatedMessage",ce=class extends S{constructor(e,t,r,i){super(i);this.refConfig=e;this.nestedComponentConfig=t;this.options=r;s(this,"replyMessageKey",At);s(this,"messageType","CreateRefComponentMessage")}},O=class extends w{constructor(e,t,r){super(e);this.replayToHandler=e;this.nestedRefs=t;this.failed=r;s(this,"messageType",At)}};var me=class extends M{constructor(e,t){super();this.destination=e;this.message=t;s(this,"messageType","EnvelopedMessage");let r=t;this.route=[e,...r.route?r.route:[]]}};var Kt="DetectedMyopRefsMessage",lt=class extends S{constructor(){super(...arguments);s(this,"messageType","DetectMyopRefsMessage");s(this,"replyMessageKey",Kt)}},G=class extends w{constructor(e,t){super(e);this.replayToHandler=e;s(this,"messageType",Kt);this.content=t}isTypeof(e){return e.messageType===this.messageType}};var zt="GetAttributeReplayMessage",ft=class extends S{constructor(e,t,r){super(r);this.ref=e;this.name=t;s(this,"replyMessageKey",zt);s(this,"messageType","GetAttributeMessage")}},de=class extends w{constructor(e){super();this.content=e;s(this,"messageType",zt)}};var H=class extends M{constructor(e){super();this.method=e;s(this,"messageType","ExecuteComponentMethod")}};var gt=class extends M{constructor(){super(...arguments);s(this,"messageType","SetMutationObserverMessage")}},le=class extends M{constructor(){super(...arguments);s(this,"messageType","MutationObserverMessage")}};var Ft="CleanupReplayMessage",fe=class extends S{constructor(e,t){super(t);this.cleanupForMessageId=e;s(this,"replyMessageKey",Ft);s(this,"messageType","CleanupMessage")}},ge=class extends w{constructor(e){super();this.customCleanup=e;s(this,"messageType",Ft)}};var ue=class extends M{constructor(){super(...arguments);s(this,"messageType","DisposeMessage")}};var ut=class extends M{constructor(){super(...arguments);s(this,"cleanable",!0);s(this,"messageType","SetResizeObserverMessage")}},ye=class extends M{constructor(){super(...arguments);s(this,"messageType","ResizeObserverMessage")}};var yt=class{constructor(n,e){this.id=n;this.context=e;s(this,"send",n=>{})}},ee=class{constructor(){s(this,"messageToHandleAfterInit",[]);s(this,"components",{});s(this,"alwaysPassEnvelopesToHost",!1);s(this,"messageCleanupCache",{})}handleIncomeMessages(n){let e=n.data?n.data:n.detail;if(!(!e||!e.myop)){let t=e;if(t.direction!==b.down)return;if(t.messageType===d.DisposeMessage){t.destination&&delete this.components[t.destination];return}if(t.messageType===d.InitMessage){let r=t.content.id;if(this.components[r])return;this.components[r]=new yt(r),this.messageToHost(new pe(r));return}if(t.messageType===d.EnvelopedMessage){let r=t,i=r.message;if(t=i,this.alwaysPassEnvelopesToHost||this.components[t.destination]){let a=myop.hostSDK.components.find(c=>c.id===i.destination);if(a){a.send(i);return}let p=myop.hostSDK.components.find(c=>c.id===r.destination);if(p){p.send(i);return}}else return}if(t.messageType){if(t.messageType===d.CleanupMessage){let i=t,a=this.messageCleanupCache[i.cleanupForMessageId],p=new ge(!!a);p.destination=t.destination,a?(delete this.messageCleanupCache[i.cleanupForMessageId],Ht(a).then(()=>{this.messageToHost(p,i)}).catch(()=>{})):this.messageToHost(p,i);return}let r=!1;this.supportedHandlers.forEach(i=>{if(i.messageType===t.messageType){r=!0;let a=i.executor(t);if(t.cleanable&&a&&(this.messageCleanupCache[t.id]=a),a&&!t.cleanable)throw new Error("Cleanup handler generated for non-cleanable message. \nmessageType - ".concat(t.messageType,", handler executor was - ").concat(i.executor,"\n\nPlease review the message definition object & message handler.\nTo ensure cleanup properly set 'cleanable' true at message definition and return IMessageExecutorCleanup from your handlers."));if(!a&&t.cleanable)throw new Error("No cleanup handler generated for a cleanable message. \nmessageType - ".concat(t.messageType,", handler executor was - ").concat(i.executor,"\n\nPlease review the message definition object & message handler.\nTo ensure cleanup properly set 'cleanable' true at message definition and return IMessageExecutorCleanup from your handlers."))}})}else console.log("unsupported message type")}}};var P={IframeLoader:"IframeLoader",WebComponentLoader:"WebComponentLoader",HTMLLoader:"HTMLLoader",MinimizedLoader:"MinimizedLoader"};var X={open:"open",closed:"closed",none:"none",localFrame:"localFrame"};var oe={message:"message",code:"code"},te=class{};s(te,"code","code"),s(te,"component","component");var J={Segmented:"Segmented",Dedicated:"Dedicated",Default:"Default"},be={Segment:"Segment",Promo:"Promo",AB:"AB"},ne=class{constructor(n,e){this.container=n;this.shadowRoot=e;s(this,"getRootDiv",()=>(this.shadowRoot||this.container).querySelector("div"));s(this,"getRoot",()=>this.shadowRoot||this.container)}};var T={id:"myop-id"};var we=class extends h{constructor(){super(...arguments);s(this,"messageType",d.DetectMyopRefsMessage);s(this,"executor",e=>{let t=document.querySelectorAll("[".concat(T.id,"]")),r=[];t.forEach(i=>{let a=i.getAttribute(T.id);a&&r.push(new Y(a,i.tagName,i.getBoundingClientRect()))}),this.messageToHost(new G(e.handlerUniqueId,r))})}};var I=(o,n)=>n.querySelectorAll("[".concat(T.id,"='").concat(o.refConfig.selector,"']")),$t=(o,n)=>{let e=I(o,n);return e.length?e.item(0):null};var Se=class extends h{constructor(){super(...arguments);s(this,"messageType",d.BindClickMessage);s(this,"executor",e=>{let t=[];return I(e.ref,document).forEach(i=>{let a=()=>{this.messageToHost(new U,e)};i.addEventListener("click",a);let p=()=>{i.removeEventListener("click",a)};t.push(p)}),()=>{t.forEach(i=>i())}})}};var Te=class extends h{constructor(){super(...arguments);s(this,"messageType",d.ChangeTextMessage);s(this,"executor",e=>{I(e.ref,document).forEach(r=>{r.textContent=e.content})})}};var ht=o=>o!==Object(o),ln=o=>typeof o=="function",Mt=o=>{if(ht(o))return!0;if(ln(o)||Object.getPrototypeOf(o))return!1;for(let n in o){let e=o[n];if(typeof e=="object"){if(!Mt(e))return!1}else{if(ht(e))continue;return!1}}return!0},v=(o,n={},e=!0,t=new WeakMap)=>{if(ht(o))return o;if(Array.isArray(o)){if(t.has(o))return t.get(o);let r=[];t.set(o,r);for(let i=0;i<o.length;i++){let a=o[i];r[i]=v(a,n,e,t)}return r}if(o!==null&&typeof o=="object"){if(t.has(o))return t.get(o);let r={};t.set(o,r);for(let i in o){let a=typeof n=="boolean"?n:n[i];a&&(a===!0?(e?o[i]!==void 0:o[i])&&(r[i]=v(o[i],!0,e,t)):typeof a=="object"&&(r[i]=v(o[i],a,e,t)))}return r}return{}};var Ee=(o,n,e)=>{let t=o.scriptInputs?o.scriptInputs:{};t.makeSerializable=v,t.send=n,t.rootRef=e,t.__scriptInputs=t;let i=new Function("return (".concat(o.script,")(...arguments)"))(t);n(i)};var Re=class extends h{constructor(){super(...arguments);s(this,"messageType",d.ExecuteScriptMessage);s(this,"executor",e=>{Ee(e,r=>{this.messageToHost(new N(e.handlerUniqueId,r))},new ne(document.documentElement))})}};var ve="__federation__",Ut="onLoad";var se=(o,n)=>{window[ve]&&window[ve][o]&&window[ve][o][Ut]&&window[ve][o][Ut]({[o]:n})};var ke=class extends h{constructor(){super(...arguments);s(this,"messageType",d.AddEventListenerMessage);s(this,"executor",e=>{let t=I(e.ref,document),r=[];return t.forEach(i=>{let a=p=>{requestAnimationFrame(()=>{this.messageToHost(new V(e.handlerUniqueId,v(p,e.serializableSkeleton)))})};i.addEventListener(e.type,a),r.push(()=>{i.removeEventListener(e.type,a)})}),()=>{r.forEach(i=>{i()})}})}};var He=class extends h{constructor(){super(...arguments);s(this,"messageType",d.SetAttributeMessage);s(this,"executor",e=>{I(e.ref,document).forEach(r=>{r.setAttribute(e.name,e.value)})})}};var z=class{constructor(n,e,t){this.componentDefinition=n;this.container=e;s(this,"id","");s(this,"messageHandlers",{});s(this,"element");s(this,"_markedForDisposed",!1);s(this,"bind",(n,e)=>{this.messageHandlers[n]||(this.messageHandlers[n]=[]),this.messageHandlers[n].includes(e)||this.messageHandlers[n].push(e)});s(this,"bindWhen",(n,e,t)=>{if(!t)throw new Error("can't use component.bindWhen without an handler");this.messageHandlers[n]||(this.messageHandlers[n]=[]);let r=this.messageHandlers[n],i=a=>e(a)?(t(a),!0):!1;return r.push(i),()=>{let a=r.indexOf(i);a>-1&&r.splice(a,1)}});s(this,"setInitiated",()=>{this.isInitiated=!0,this._whenInitiatedResolve&&this._whenInitiatedResolve()});s(this,"isInitiated",!1);s(this,"_whenInitiatedResolve");s(this,"_whenInitiatedReject");s(this,"_whenInitiated",new Promise((n,e)=>{this._whenInitiatedResolve=n,this._whenInitiatedReject=e}));s(this,"initiated",()=>this._whenInitiated);s(this,"props",{});s(this,"refs",{});this.id=(t==null?void 0:t.id)||B.Instance().assignId(n);let r=t!=null&&t.timeout?t==null?void 0:t.timeout:5*1e3;setTimeout(()=>{!this.isInitiated&&this._whenInitiatedReject&&!this._markedForDisposed&&this._whenInitiatedReject("timeout_".concat(r," ").concat(this.id))},r),this.initiated().then(()=>{window.myop.hostSDK.inspected&&this.inspect()})}get markedForDisposed(){return this._markedForDisposed}set markedForDisposed(n){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=n}onMessageReceived(n){if(n.messageType===d.ExecuteComponentMethod){let t=n;return this[t.method]?this[t.method](t.content):console.log("method not found ".concat(t.method," on component"),this),!0}let e=this.messageHandlers[n.messageType];if(e&&e.length){let t=!1;return e.forEach(r=>{t=t||r(n)}),t}return!1}sendCleanupMessage(n){n.source=this.id,n.destination=this.id,n.direction=b.down;let e=this.bindWhen(n.replyMessageKey,r=>r.replayToHandler===n.handlerUniqueId,r=>{n.handler(r),e()}),t=n.handler;delete n.handler,this.send(n),n.handler=t}send(n){n.source||(n.source=this.id),n.destination||(n.destination=this.id),n.direction=b.down;let e;if(n.handler){let t=n;e=this.bindWhen(t.replyMessageKey,r=>r.replayToHandler===t.handlerUniqueId,t.handler),delete n.handler}return n.ref&&(n.ref=n.ref.__nonProxied||n.ref),n.cleanable?()=>{this.sendCleanupMessage(new fe(n.id,t=>{})),e&&e()}:()=>{}}dispose(){if(this.markedForDisposed=!0,!this.isInitiated)return;console.log("disposing component",this.id),this.send(new ue);let n=this.messageHandlers.onDispose;n&&n.forEach(e=>{e(null)}),this.messageHandlers={},this.id+="_disposed",this.isInitiated=!1}};var Nt={notSerializableRefCall:(o,n)=>{throw new Error("\nThe input provided to '".concat(o.toString(),"' is not serializable. Serialization is required to ensure that the data can be safely transferred to the skin implementation. \nThe following types of data are considered non-serializable and cannot be processed:\n\n- Functions\n- DOM elements\n- Class instances\n- Circular references\n- Symbols\n- BigInt values\n\nIn the following execution we detected :\n~~~~~~~~\n").concat(n," \n~~~~~~~~\nas not serializable.\n\nTo resolve this issue, please ensure that all inputs passed to '").concat(o.toString(),"' are in a serializable format.\nThis typically includes primitive types (strings, numbers, booleans), arrays, and plain objects. \nIf you need to include complex data types, consider converting them to a serializable structure before passing them to the function.\nOr use Myop message that support it: CustomRefMessage, AddEventListenerMessage or ExecuteScriptMessage.\n\nSuggested Fix:\n1. Remove or replace non-serializable values from your input.\n2. If using objects, ensure they do not contain any functions or circular references.\n3. Convert any class instances to plain objects or JSON-compatible formats.\n4. Use dedicated Myop message.\n\nFor more details on serialization and Myop message examples, refer to https://docs.myop.dev.\n\n"))}};var he=class extends z{constructor(e,t,r){super(e,t.container,r);this.componentDefinition=e;this.parent=t;s(this,"send",e=>{let t=e.handler,r=super.send(e);return this.parent.send(new me(this.id,e)),e.handler=t,r});s(this,"dispose",()=>{this.isInitiated&&this.send(new H("dispose")),super.dispose()})}hide(){this.send(new H("hide"))}show(){this.send(new H("show"))}inspect(){return this.send(new H("inspect"))}setHeightBasedOnDocumentElement(){this.send(new H("setHeightBasedOnDocumentElement"))}setHeightBasedOnScrollHeight(){this.send(new H("setHeightBasedOnScrollHeight"))}onMessageReceived(e){return super.onMessageReceived(e)}};var fn=(o,n,e)=>{let t=document.createElement("a");return t.textContent=o,t.style.position="relative",t.style.padding="0 5px",t.style.fontSize="14px",t.style.top="0",t.style.top="".concat(n,"px"),t.style.transform="translateX(-50%)",t.target="_blank",t.href="https://dashboard.myop.dev/dashboard/component/".concat(e.id),t},Be=(o,n,e,t,r,i)=>{let a=fn("".concat(i.name," : ").concat(n),e,i);return t.insertBefore(a,r),r.style.border="1px solid #007BFF",r.style.display="block",()=>{r.style.border="unset",t.removeChild(a)}},Wt=(o,n,e)=>o?!1:(console.error("Error: Undefined Prop\n\nIt looks like you've tried to use a prop that hasn't been defined.\nPlease check the prop name for any typos or ensure that it is properly defined in the component's prop list.\n\n"+"Prop Name: ".concat(n,"\n")+"Component: ".concat(e.componentDefinition.name,", ID: ").concat(e.componentDefinition.id,"\n\n")+"For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/".concat(e.componentDefinition.id," or consult the developer guide.")),!0),Vt=(o,n,e)=>{console.error("Error: Code Prop Not Supported\n\nCurrently, code props are only supported in local frame components.\n\u26A0\uFE0F This is a work in progress feature \u2014 code props will be supported in upcoming versions.\n\nIn the meantime, you can use message props.\n\n"+"Prop Name: ".concat(n,"\n")+"Component: ".concat(e.componentDefinition.name,", ID: ").concat(e.componentDefinition.id,"\n\n")+"For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/".concat(e.componentDefinition.id," or consult the developer guide."))},qt=(o,n,e)=>{let t=n.reduce((i,a)=>_(y({},i),{[a.name]:y({},a)}),{}),r={get:(i,a)=>{let p=t[a];if(Wt(p,a,o))return!1;if(p.behavior.type===oe.code){if(e.loader.type===P.HTMLLoader&&e.loader.shadowRootMode===X.localFrame){let m=p.behavior;return o.element.contentWindow[m.remap||a]}return Vt(p,a,o),!1}return p.mode==="output"?new Promise(c=>{let m=[];p.behavior.ref&&m.push(K.create(p.behavior.ref)),m.push(l=>{c(l)}),p.behavior.params&&m.push(...p.behavior.params);let f=xe[p.behavior.message];o.send(new f(...m))}):null},set:(i,a,p)=>{let c=t[a];if(Wt(c,a,o))return!1;if(c.behavior.type===oe.code){if(e.loader.type===P.HTMLLoader&&e.loader.shadowRootMode===X.localFrame){let f=c.behavior;return o.element.contentWindow[f.remap||a]=p,!0}return Vt(c,a,o),!1}else if(c.mode==="input")if(c.behavior.type==="message"){let m=[];c.behavior.ref&&m.push(K.create(c.behavior.ref)),m.push(p),c.behavior.params&&m.push(...c.behavior.params);let f=xe[c.behavior.message];return o.send(new f(...m)),!0}else throw new Error("Error: Unsupported Behavior\n\nThe 'behavior' field provided is not supported.\n"+"Component: ".concat(o.componentDefinition.name,", ID: ").concat(o.componentDefinition.id,"\n\n")+"Prop Name: ".concat(a,"\n")+"Behavior Field: ".concat(c.behavior.type,"\n\n")+"Check the documentation for valid behavior options.");return!1}};return o.props={},o.props=new Proxy(o.props,r),o},gn=(o,n)=>new Proxy(o,{get(e,t){return e[t]?e[t]:(...i)=>new Promise(a=>{i.forEach(p=>{Mt(p)||Nt.notSerializableRefCall(t,p)}),n.send(new W(({ref:p,propName:c,functionArgs:m,makeSerializable:f})=>{if(p){let l=p[c];return f(typeof l=="function"?p[c](...m):l,!0)}return null},{elementId:e.refConfig.selector,propName:t,functionArgs:i},p=>{a(p.content)}))})},set(e,t,r){return n.send(new W(({ref:i,propName:a,propValue:p})=>{i&&(i[a]=p)},{elementId:e.refConfig.selector,propValue:r,propName:t},i=>{})),!0}}),It=async(o,n,e,t)=>{let r=o.component;if(!r)throw new Error("cant createRefComponent with detached ref");return new Promise(async(i,a)=>{let p=new he(n.type,r,t);e.push(p),await r.initiated();let c=setTimeout(()=>{a("timeout")},5e3);r.send(new ce(o.refConfig,n,_(y({},t||{}),{id:p.id,_hasParent:!0}),async m=>{if(clearTimeout(c),m.failed){a("CreateRefComponentMessage failed");return}let f=e.find(l=>l.id==p.id);if(f!==p){r.refs[o.refConfig.name]=f,i(f);return}else p.setInitiated(),r.refs[o.refConfig.name]=p;m.nestedRefs.forEach(l=>{let g=n.instance.resolvedNestedComponents.find(C=>C.type.id===l.componentDefinitionId).type,u=new he(g,p);u.setInitiated(),p.refs[l.refName]=u,e.push(u)});try{await Ct(p,n,e,!0),r.setHeightBasedOnScrollHeight&&r.setHeightBasedOnScrollHeight(),i(p)}catch(l){a(l)}}))})},Ct=async(o,n,e,t=!1)=>{o.refs||(o.refs={});let r=Object.values(o.componentDefinition.refs).map(i=>new Promise(async(a,p)=>{var c;if(i.behavior.type==te.component){if(t){a();return}let m=i.behavior.componentId;m||(m=i.behavior.instance.componentId);let f=(c=n.instance.resolvedNestedComponents)==null?void 0:c.find(g=>g.type.id===m);if(!f)throw new Error("componentConfig provided without nestedComponentConfig check the config object");let l=K.create("",i,o);try{let g=await It(l,f,e);o.refs[i.name]=g,a()}catch(g){p(g)}}else try{let m=K.create("",i,o);o.refs[i.name]=gn(m,o),a()}catch(m){}}));try{await Promise.all(r)}catch(i){throw i}};var re=class extends z{constructor(e,t,r,i,a){super(e,r,a);this.componentConfig=e;this.container=r;this.IframeElement=i;s(this,"cleanupInspect");s(this,"setHeightBasedOnDocumentElement",()=>{let e=this.send(new R(()=>window.document.documentElement.scrollHeight,t=>{this.IframeElement.style.height="".concat(t.content,"px"),e()}))});s(this,"observeSizeBasedOnDocumentElement",()=>this.send(new R(({send:t})=>{let{height:r,width:i}=document.documentElement.getBoundingClientRect(),a=new ResizeObserver(()=>{let{height:p,width:c}=document.documentElement.getBoundingClientRect();t({height:p,width:c})});return a.observe(document.documentElement),a.observe(document.body),{height:r,width:i}},t=>{this.IframeElement.style.width="".concat(t.content.width,"px"),this.IframeElement.style.height="".concat(t.content.height,"px")})));s(this,"observeAutoSize",e=>{var wt;let t=this.IframeElement,r=t.contentDocument;if(!r)return console.warn("[MyopIframeComponent] Cannot observe auto size: contentDocument not accessible"),()=>{};let i=(E,L,Q)=>L!==void 0&&E<L?L:Q!==void 0&&E>Q?Q:E,a=E=>{if(E===void 0)return;if(typeof E=="number")return E;let L=parseFloat(E);return isNaN(L)?void 0:L},p=a(e==null?void 0:e.minWidth),c=a(e==null?void 0:e.maxWidth),m=a(e==null?void 0:e.minHeight),f=a(e==null?void 0:e.maxHeight),l=(wt=e==null?void 0:e.loaderMinHeight)!=null?wt:50,g=(e==null?void 0:e.explicitWidth)!==void 0,u=(e==null?void 0:e.explicitHeight)!==void 0,C=this.container.getBoundingClientRect(),tt=C.width===0,D=C.height===0||C.height===l,A=(e!=null&&e.forceAutoSize||tt)&&!g,$=(e!=null&&e.forceAutoSize||D)&&!u;if(!A&&!$)return()=>{};let ae=()=>{var L;let E=t.contentDocument;if(E){let Q=E.documentElement.getBoundingClientRect(),St=Math.ceil(Q.width),Tt=Math.ceil(Q.height),Et=i(St,p,c),Rt=i(Tt,m,f);A&&(t.style.width="".concat(Et,"px")),$&&(t.style.height="".concat(Rt,"px"));let en=A&&c!==void 0&&St>c,tn=$&&f!==void 0&&Tt>f;E.documentElement.style.overflowX=en?"auto":"hidden",E.documentElement.style.overflowY=tn?"auto":"hidden",(L=e==null?void 0:e.onSizeChange)==null||L.call(e,{width:Et,height:Rt,autoSizingWidth:A,autoSizingHeight:$})}};ae();let nt=new ResizeObserver(ae);return nt.observe(r.body),nt.observe(r.documentElement),()=>{nt.disconnect()}});s(this,"setSizeBasedOnDocumentElement",()=>{let e=this.send(new R(()=>{let{height:t,width:r}=document.documentElement.getBoundingClientRect();return{height:t,width:r}},t=>{this.IframeElement.style.width="".concat(t.content.width,"px"),this.IframeElement.style.height="".concat(t.content.height,"px"),e()}))});s(this,"setHeightBasedOnScrollHeight",()=>{let e=this.send(new R(()=>{let r=0;return r++,r--,Math.max(Math.max(window.document.body.clientHeight,window.document.body.scrollHeight),window.document.body.offsetHeight)+r+"px"},t=>{this.IframeElement.style.height=t.content,e()}))});s(this,"send",e=>{var i,a;let t=y({},e);if(t.messageType===d.ExecuteComponentMethod)return this[t.method](),()=>{};t.direction=b.down;let r=super.send(t);return(a=(i=this.IframeElement)==null?void 0:i.contentWindow)==null||a.postMessage(t,"*"),r});s(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=Be(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===d.In.MutationObserverMessage||e.messageType===d.In.ResizeObserverMessage?(this.setHeightBasedOnScrollHeight(),!0):super.onMessageReceived(e)}};var F=class{constructor(){s(this,"appendChild",(n,e,t)=>{var r;if(t!=null&&t.relative){if(t.relative.direction==="before")return n.insertBefore(e,t.relative.child);if(t.relative.direction==="after"){let i=(r=t.relative.child)==null?void 0:r.nextSibling;return n.insertBefore(e,i||null)}}else return n.appendChild(e)})}};var un=(o,n,e)=>{let t=new URL(o);return t.searchParams.append(n,e),t.toString()},De=class extends F{constructor(){super(...arguments);s(this,"type",P.IframeLoader);s(this,"load",async(e,t,r,i)=>{let a,p=t.loader;if((r==null?void 0:r.nodeName)==="IFRAME")console.log("needs to load into an exsisting Iframe...",p.url,r),a=r,a.src=p.url;else{let c=k(),m="myop-comp-".concat(c);a=document.createElement("iframe"),a.id=m;let f="\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                height: ".concat(p.autoHeight||!p.height?"100%":p.height,";\n                width: 100%;\n                overflow: hidden;\n                border: none;\n                opacity: ").concat(i!=null&&i.hidden?"0":"1",";\n                pointer-events: ").concat(i!=null&&i.hidden?"none":"all",";\n            ");a.style.cssText=f,i!=null&&i.elementAttributes&&Object.entries(i.elementAttributes).forEach(([g,u])=>{u===""||u===null||u===void 0?a.setAttribute(g,""):a.setAttribute(g,String(u))});let l=t.loader.url;i!=null&&i._hasParent&&(l=un(l,"_myop-comp",c)),a.src=l,r.querySelector('[id^="myop-comp-"]')||(r.innerHTML=""),a=this.appendChild(r,a,i)}return new re(e,t,r,a,i)})}};var Le={webcomponent_message_key:"myop_webcomponent_message"};var ie=class extends z{constructor(e,t,r,i,a){super(e,r,a);this.container=r;this.customElement=i;s(this,"cleanupInspect",()=>{});s(this,"send",e=>{let t=y({},e),r=super.send(t),i=new CustomEvent(Le.webcomponent_message_key,{detail:t});try{this.customElement.dispatchEvent(i)}catch(a){console.log("error while trying to dispatchEvent",a)}return r});s(this,"dispose",()=>{var e;super.dispose(),(e=this.customElement.parentNode)==null||e.removeChild(this.customElement)});this.element=i}inspect(){return this.cleanupInspect=Be(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=""}};var xt={},_e=class extends F{constructor(){super(...arguments);s(this,"type",P.WebComponentLoader);s(this,"load",async(e,t,r,i)=>{let a=t.loader;xt[a.url]?console.log("Module alreday loaded or in loading process"):xt[a.url]=new Promise((m,f)=>{let l=a.url,g=document.createElement("script");g.type="module",g.src=l,g.onload=()=>{m()},g.onerror=()=>{f()},document.head.appendChild(g)}),await xt[a.url],await Bt(1);let p="myop-comp-".concat(k()),c=document.createElement(a.tag);return r.querySelector('[id^="myop-comp-"]')||(r.innerHTML=""),c.id=p,i!=null&&i.hidden&&(c.style.opacity="0",c.style.position="absolute",c.style.height="0",c.style.width="0",c.style.pointerEvents="none",c.style.visibility="hidden"),i!=null&&i._environment&&(c._myopEnvironment=i==null?void 0:i._environment),this.appendChild(r,c,i),new ie(e,t,r,c,i)})}};var Oe="0.2.7";var x=class extends Ce{constructor(e,t){super(e);this.context=t;s(this,"executor",e=>{if(e.destination){let t=e.destination;if(this.context[t].context){let r=(i,a)=>{this.messageToHost(_(y({},i),{source:e.destination?e.destination:e.source,destination:e.source?e.source:e.destination}),a)};return this.innerExecutor(e,this.context[t].context,r)}else debugger}else debugger})}};var Pe=class extends x{constructor(){super(...arguments);s(this,"messageType",d.BindClickMessage);s(this,"innerExecutor",(e,t,r)=>{let i=I(e.ref,t.shadowRoot),a=[];return i.forEach(p=>{let c=()=>{r(new U(e.handlerUniqueId))};p.addEventListener("click",c),a.push(()=>{p.removeEventListener("click",c)})}),()=>{a.forEach(p=>p())}})}};var Ae=class extends x{constructor(){super(...arguments);s(this,"messageType",d.ChangeTextMessage);s(this,"innerExecutor",(e,t)=>{I(e.ref,t.shadowRoot).forEach(i=>{i.textContent=e.content})})}};var Ke=class extends ne{constructor(e,t){super(e,t);this.container=e;this.shadowRoot=t}};var ze=class extends x{constructor(){super(...arguments);s(this,"innerExecutor",(e,t)=>{let r=t.shadowRoot.querySelectorAll("[".concat(T.id,"]")),i=[];r.forEach(a=>{let p=a.getAttribute(T.id);p&&i.push(new Y(p,a.tagName,a.getBoundingClientRect(),a.offsetTop,a.offsetLeft))}),this.messageToHost(new G(e.handlerUniqueId,i))});s(this,"messageType",d.DetectMyopRefsMessage)}};var Fe=class extends x{constructor(){super(...arguments);s(this,"messageType",d.SetAttributeMessage);s(this,"innerExecutor",(e,t)=>{I(e.ref,t.shadowRoot).forEach(i=>{i.setAttribute(e.name,e.value)})})}};var $e=class extends x{constructor(){super(...arguments);s(this,"messageType",d.AddEventListenerMessage);s(this,"innerExecutor",(e,t,r)=>{let i=I(e.ref,t.shadowRoot),a=[];return i.forEach(p=>{let c=m=>{r(new V(e.handlerUniqueId,v(m,e.serializableSkeleton)))};p.addEventListener(e.type,c),a.push(()=>{p.removeEventListener(e.type,c)})}),()=>{a.forEach(p=>p())}})}};var Ue=class extends x{constructor(){super(...arguments);s(this,"messageType",d.CreateRefComponentMessage);s(this,"innerExecutor",(e,t,r)=>{(async()=>{let a=t.shadowRoot.querySelectorAll("[".concat(T.id,"='").concat(e.refConfig.selector,"']"));if(a.length===1){let p=B.Instance(),c=p.components.find(g=>g.id===e.options.id);c&&c.dispose();let m=p.components.indexOf(c);m!==-1&&p.components.splice(m,1);let f=await p.loadComponent(e.nestedComponentConfig,a.item(0),e.options),l=[];Object.keys(f.refs).forEach(g=>{let u=f.refs[g];u=u.__nonProxied||u,u.componentDefinition&&l.push({refName:g,componentDefinitionId:u.componentDefinition.id})}),r(new O(e.handlerUniqueId,l))}else{console.error("CreateRefComponentMessageHandler - DOM element not found"),this.messageToHost(new O(e.handlerUniqueId,[],!0));debugger}})().then()})}};var Ne=class extends x{constructor(){super(...arguments);s(this,"messageType",d.ExecuteScriptMessage);s(this,"innerExecutor",(e,t,r)=>{Ee(e,a=>{r(new N(e.handlerUniqueId,a))},t)})}};var jt=o=>{if(!o)return null;if(o.tagName==="FORM"){let n=new FormData(o),e={formData:{},unmappedData:[]},t=o.querySelectorAll("input, select, textarea"),r=-1;return t.forEach(i=>{if(typeof i.value=="string"){let a=i.getAttribute(T.id),p=i.getAttribute("name"),c={id:i.id,name:p,value:jt(i),required:i.required,validity:v(i.validity,!0),myopId:a};p?e.formData[p]?e.formData[p].value?e.unmappedData.push(c):(e.unmappedData.push(e.formData[p]),e.formData[p]=c):e.formData[p]=c:e.unmappedData.push(c)}}),e}return o.type==="checkbox"||o.type==="radio"?o.checked?o.value:null:o.tagName==="INPUT"||o.tagName==="TEXTAREA"||o.tagName==="SELECT"?o.value:o.isContentEditable?o.innerText||o.textContent:null},We=class extends x{constructor(){super(...arguments);s(this,"messageType",d.GetElementValueMessage);s(this,"innerExecutor",(e,t,r)=>{I(e.ref,t.shadowRoot).forEach(a=>{r(new q(jt(a)),e)})})}};var Ve=class extends x{constructor(){super(...arguments);s(this,"messageType",d.SetInnerHtml);s(this,"innerExecutor",(e,t)=>{I(e.ref,t.shadowRoot).forEach(i=>{i.innerHTML=e.content})})}};var Me=class extends ee{constructor(){super(...arguments);s(this,"alwaysPassEnvelopesToHost",!0);s(this,"connectedCallback",(e,t)=>{e.addEventListener(Le.webcomponent_message_key,r=>{let i=r.data?r.data:r.detail;if(!i||!i.myop){debugger;throw new Error("recvied webcomponent_message with wrong type")}else{let a=i;if(this.handleIncomeMessages(r),a.messageType===d.InitMessage){let p=a.content.id;this.components[p].context=new Ke(e,t)}}}),setTimeout(()=>{this.messageToHost(new j)},1)});s(this,"messageToHost",(e,t)=>{e.direction=b.up,!e.replayToHandler&&(t!=null&&t.handlerUniqueId)&&(e.replayToHandler=t.handlerUniqueId),window.myop.hostSDK.send(e)});s(this,"supportedHandlers",[new Ae(this.messageToHost,this.components),new Ve(this.messageToHost,this.components),new Pe(this.messageToHost,this.components),new ze(this.messageToHost,this.components),new Fe(this.messageToHost,this.components),new $e(this.messageToHost,this.components),new Ne(this.messageToHost,this.components),new We(this.messageToHost,this.components),new Ue(this.messageToHost,this.components)]);s(this,"init",()=>{})}};se("WebComponentSDK",Me);var Gt=[],qe,Xt=async()=>(qe||(qe=new Me,qe.init()),qe);function yn(o,n){return class extends HTMLElement{connectedCallback(){let e=n===X.open?"open":"closed",t=this.attachShadow({mode:e});Xt().then(r=>{r.connectedCallback(this,t),t.innerHTML=o})}}}var hn=(o,n,e)=>{customElements.define(o,yn(n,e)),console.log("define('".concat(o,"') was called, web component ready to use"))},Mn=o=>o.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/(\d+)/g,"-$1").toLowerCase(),In=o=>(o=Mn(o),o.replace(/_/g,"-"));var je=class extends F{constructor(){super(...arguments);s(this,"type",P.HTMLLoader);s(this,"load",async(e,t,r,i)=>{let a=t.loader,p="myop-comp-".concat(k()),c;if(a.shadowRootMode===X.localFrame){let m=k(),f="myop-comp-".concat(m),l=document.createElement("iframe");l.id=f,l.style.cssText="\n                display: block;\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                overflow: hidden;\n                border: none;\n                opacity: ".concat(i!=null&&i.hidden?"0":"1",";\n                width: 100%;\n                height: 100%;\n                pointer-events: ").concat(i!=null&&i.hidden?"none":"all",";\n            "),r.querySelector('[id^="myop-comp-"]')||(r.innerHTML=""),l=this.appendChild(r,l,i);let g=l.contentDocument||l.contentWindow.document;g.open();let u=a.HTML;if(i!=null&&i._inspection){let D=new DOMParser().parseFromString(a.HTML,"text/html"),A=D.getElementById("myop_preview");A==null||A.removeAttribute("type");let $=D.implementation.createHTMLDocument();$.body.innerHTML="<script>\n                        const beforeKeysWindow = new Set(Object.keys(window));\n                        window.myopState = {\n                            beforeKeysWindow,\n                        };\n                <\/script>";let ae=$.body.firstChild;ae&&D.head&&D.head.insertBefore(D.importNode(ae,!0),D.head.firstChild),u=D.documentElement.outerHTML}g.writeln(u),g.writeln('<script src="'.concat(window.myop.__ROOT_SDK_PUBLIC_URL__,'"><\/script>\n                    <script>\n                  \n                   window.__federation__.__public_path__ =  window.__federation__.__public_path__;\n                  \n                   const __myop_init = async () => {\n                        const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());\n                        const sdk = new IframeSDK()\n                        sdk.init();\n                   }\n                    \n                   __myop_init().then();\n                    \n              <\/script>')),g.close();let C=new re(e,t,r,l,i);return a.autoHeight&&(l.onload=()=>{C.observeSizeBasedOnDocumentElement()}),C}if(a.shadowRootMode===X.none){let m=document.createElement("template");m.innerHTML=a.HTML,c=m.content.firstElementChild,Xt().then(f=>{f.connectedCallback(c,c)})}else{let m=In(e.name+t.id);Gt.includes(m)||(hn(m,a.HTML,a.shadowRootMode),Gt.push(m)),c=document.createElement(m)}return r.querySelector('[id^="myop-comp-"]')||(r.innerHTML=""),c.id=p,i!=null&&i.hidden&&(c.style.opacity="0",c.style.position="absolute",c.style.height="0",c.style.width="0",c.style.pointerEvents="none",c.style.visibility="hidden"),this.appendChild(r,c,i),new ie(e,t,r,c,i)})}};var Cn=o=>({instance:{id:"auto",componentId:o.componentId,componentName:o.name,skinSelector:{type:"Dedicated",skin:{id:"skin_auto_v2_converted"}}},type:{id:o.id,name:o.name,description:o.description,props:[{id:"in_auto_v2_converted",name:"myop_init_interface",type:"any",behavior:{type:oe.code}},{id:"out_auto_v2_converted",name:"myop_cta_handler",type:"any",behavior:{type:oe.code}}],refs:[],skins:[{id:"skin_auto_v2_converted",name:"auto_v2_converted",description:"",loader:o.consume_variant[0].loader}],defaultSkin:0},name:o.name}),Ge=class Ge{constructor(n="https://cloud.myop.dev"){this._baseUrl=n;s(this,"variants",{});s(this,"userFlows",{});s(this,"_defaultEnv","production")}setEnvironment(n){this._defaultEnv=n}getDefaultEnvironment(){return this._defaultEnv}isPreloaded(n,e,t){return"".concat(n,":").concat(e||this._defaultEnv,":").concat(t?"preview":"live")in this.variants}async fetchComponentV2(n,e,t){let r=e||this._defaultEnv,i="".concat(n,":").concat(r,":").concat(t?"preview":"live");return this.variants[i]||(this.variants[i]=new Promise(async(a,p)=>{try{let c="".concat(this._baseUrl,"/consume?id=").concat(n,"&env=").concat(r);t&&(c+="&preview=true");let l=(await(await fetch(c)).json()).item;if(!l){p(new Error('Component "'.concat(n,'" not found')));return}if(!l.consume_variant||!l.consume_variant.length){p(new Error('Component "'.concat(n,'" has no implementation for environment "').concat(r,'"')));return}let g=Cn(l);a(g)}catch(c){p(c)}})),await this.variants[i]}async fetchComponentV1(n,e){return e?(await this.fetchFlow(e)).components.find(r=>r.type.id===n):(await this.fetchAutoFlow(n)).components[0]}async fetchAutoFlow(n){return this.userFlows[n]||(this.userFlows[n]=new Promise(async(e,t)=>{try{let i=await(await fetch("".concat(this._baseUrl,"/flow?id=").concat(n,"&auto=true"))).json();e(i.item)}catch(r){t(r)}})),await this.userFlows[n]}async fetchFlow(n){return this.userFlows[n]||(this.userFlows[n]=new Promise(async(e,t)=>{try{let i=await(await fetch("".concat(this._baseUrl,"/flow?id=").concat(n,"&resolve=components"))).json();e(i.item)}catch(r){t(r)}})),await this.userFlows[n]}async fetchComponent(n,e){return this.fetchComponentV1(n,e)}};s(Ge,"Main",new Ge);var Ie=Ge;var Jt=async o=>{try{let n=new URL(window.location.href),t=new URLSearchParams(n.search).get("myopOverride");if(t){let[r,...i]=st(t);switch(r){case"component":{let[a,p]=i,c=await Ie.Main.fetchComponent(a);if(c&&c.type.skins.find(f=>f.id===p))return c.instance.skinSelector={type:J.Dedicated,skin:{id:p}},c}break;default:{let[a,p]=st(t),m=(await Ie.Main.fetchFlow(a)).components.find(f=>f.type.id===o.type.id);if(m&&m.instance.skinSelector.type===J.Segmented&&m.instance.resolvedExperiences){let f=m.instance.resolvedExperiences.find(l=>l.id===p);if((f==null?void 0:f.type)===be.Segment){let l=f,u=m.instance.skinSelector.segments.find(C=>C.segmentId===l.segment.id);if(u)return m.instance.skinSelector=u==null?void 0:u.skinSelector,m}}}break}}}finally{return null}};var Qt="https://cdn.myop.dev/sdk/next/myop_sdk.min.js",B=class{constructor(){s(this,"components2init",[]);s(this,"components",[]);s(this,"componentsLoaders",[]);s(this,"initiated",!1);s(this,"version",Oe);s(this,"type2InstanceCount",{});s(this,"assignId",n=>(this.type2InstanceCount[n.id]||(this.type2InstanceCount[n.id]=0),"".concat(n.id,"_").concat(++this.type2InstanceCount[n.id])));s(this,"inspected",!1);s(this,"inspect",()=>{this.inspected||(this.inspected=!0,this.components.forEach(n=>{n.inspect&&n.inspect()}))});s(this,"incomingMessageHandler",n=>{if(n.origin,document.location.origin,n.data.myop){if(n.data.direction!==b.up&&n.data.messageType!==d.EnvelopedMessage)return;let e=n.data;if(e.messageType===d.InitRequest){this.components2init.forEach(r=>{r.send(new Z(r.id))});return}if(e.messageType===d.InitResponse){this.components2init=this.components2init.filter(i=>i.id!==e.content.id);let r=this.components.find(i=>{var a;return i.id===((a=e.content)==null?void 0:a.id)});r==null||r.setInitiated();return}if(e.messageType===d.EnvelopedMessage){let r=e,i=this.components.find(a=>a.id===r.destination);if(i){if(r.direction===b.down){r.message.messageType===H.name?i.onMessageReceived(r.message):(r.message.route=r.route,i.send(r.message));return}}else{let a=this.components.find(p=>p.id===r.message.destination);a&&a.send(r.message)}return}let t=this.components.find(r=>r.id===e.destination);if(!t){window.myop.IframeSDK&&window.myop.IframeSDK.messageToHost(e);return}if(t){if(t.onMessageReceived(e))return;window.myop.IframeSDK&&window.myop.IframeSDK.messageToHost(e)}}});s(this,"send",n=>{let e=new MessageEvent("",{data:n});this.incomingMessageHandler(e)});s(this,"init",n=>{if(this.initiated)throw new Error("hostSDK already initiated");let e=[new De,new _e,new je];if(this.componentsLoaders=[...e],n){let t={};n.forEach(r=>{let i=new r(this.componentsLoaders);t[i.type]=i}),this.componentsLoaders.forEach(r=>{t[r.type]||(t[r.type]=r)}),this.componentsLoaders=Object.values(t)}window.addEventListener("message",this.incomingMessageHandler,!1),console.log("myop hostSDK initiated",document.location.href),this.initiated=!0});s(this,"_getSkinIdBySkinSelector",async(n,e=[],t)=>{var i;async function r(a,p){for(let c of a)if(await p(c))return c}switch(n.type){case"DedicatedSkin":case J.Dedicated:return((i=n.skin)==null?void 0:i.id)||n.skins[0].id;case J.Segmented:{let p=await r(n.segments,async c=>{if(c.segmentId==="Default")return!0;let m=e.find(u=>u.type===be.Segment?u.segment.id===c.segmentId:!1);if(!m)throw new Error("experience not found");let l=m.segment,g=(t||{})[l.function];return g?await g():(console.warn("segmentId:".concat(c.segmentId,", ").concat(l.function," function not provided !")),!1)});if(p)return this._getSkinIdBySkinSelector(p.skinSelector,e);debugger}break;default:debugger}return""});s(this,"runSkinSelector",async(n,e)=>{let t=await this._getSkinIdBySkinSelector(n.instance.skinSelector,n.instance.resolvedExperiences,e);return n.type.skins.find(r=>r.id===t)});s(this,"loaderHooks");s(this,"loadComponent",async(n,e,t)=>{var f,l,g,u;if(!e){debugger;throw new Error("no container was found for this component")}let r=await Jt(n);r&&(n=r);let i=y(y({},(f=this.loaderHooks)!=null?f:{}),(l=t==null?void 0:t.hooks)!=null?l:{}),a=e;if(a.myop)if(a.component){n=y({},n),n.instance=y({},n.instance);let C=await this.runSkinSelector(n,i);if(!C)throw new Error("runSkinSelector failed to choose skin, check the provided config");return(g=t==null?void 0:t.hooks)!=null&&g.afterSkinSelected&&(C=await t.hooks.afterSkinSelected(y({},C))),n.instance.skinSelector={type:J.Dedicated,skin:C},t&&(t=y({},t),delete t.hooks),await It(a,n,this.components,t)}else throw new Error("load component got a detached ref.");e=e;let p=await this.runSkinSelector(n,i);if(!p)throw new Error("runSkinSelector failed to choose skin, check the provided config");(u=t==null?void 0:t.hooks)!=null&&u.afterSkinSelected&&(p=await t.hooks.afterSkinSelected(y({},p)));let c=this.componentsLoaders.find(C=>C.type===p.loader.type);if(!c){debugger;throw new Error('no loader "'.concat(p.loader.type,'" was found for component'))}let m=await c.load(n.type,p,e,t);m.isInitiated||this.components2init.push(m),m.bind("onDispose",()=>(this.components=this.components.filter(C=>C!==m),this.components2init=this.components2init.filter(C=>C!==m),!0)),this.components.push(m),(!t||t.connectProps!==!1)&&(m=qt(m,n.type.props,p));try{await Ct(m,n,this.components)}catch(C){throw C}return t!=null&&t.skipInit||await m.initiated(),m});s(this,"navigate",async(n,e,t)=>{if(n.parent)throw new Error("Navigating on remote ref components is not implemented yet");if(t!=null&&t.staged){let r=await this.loadComponent(e,n.container,y({hidden:!0,relative:{direction:"after",child:n.element}},t));return t.init&&await t.init(r),r.show(),n.dispose(),r}else{let r=n.element.nextSibling;return n.dispose(),this.loadComponent(e,n.container,y({relative:{direction:"before",child:r}},t))}})}};s(B,"Instance",()=>window.myop.hostSDK);window.myop||(window.myop={__ROOT_SDK_PUBLIC_URL__:Qt});if(!window.myop.hostSDK){let o=new B;o.init(),window.myop||(window.myop={__ROOT_SDK_PUBLIC_URL__:Qt}),window.myop.hostSDK=o}var xn=window.myop.hostSDK;se("hostSDK",xn);var Xe=class extends h{constructor(){super(...arguments);s(this,"messageType",d.CreateRefComponentMessage);s(this,"executor",e=>{(async()=>{let r=document.querySelectorAll("[".concat(T.id,"='").concat(e.refConfig.selector,"']"));if(r.length===1){let a=await B.Instance().loadComponent(e.nestedComponentConfig,r.item(0),e.options),p=[];Object.keys(a.refs).forEach(c=>{let m=a.refs[c];m=m.__nonProxied||m,m.componentDefinition&&p.push({refName:c,componentDefinitionId:m.componentDefinition.id})}),this.messageToHost(new O(e.handlerUniqueId,p))}else{console.error("CreateRefComponentMessageHandler - DOM element not found"),this.messageToHost(new O(e.handlerUniqueId,[],!0));debugger}})().then()})}};var Yt=(o,n)=>{if(!o){console.log("n");return}let e=window.MutationObserver||window.WebKitMutationObserver;if(!(!o||o.nodeType!==1))if(e){let t=new e(n),r={attributes:!0,childList:!0,subtree:!0};return t.observe(o,r),t}else window.addEventListener&&(o.addEventListener("DOMNodeInserted",n,!1),o.addEventListener("DOMNodeRemoved",n,!1))};var Je=class extends h{constructor(){super(...arguments);s(this,"messageType",d.SetMutationObserverMessage);s(this,"executor",e=>{e.source&&Yt(document.body,()=>{this.messageToHost(new le)})})}};var Zt=o=>{if(!o)return null;if(o.tagName==="FORM"){let n=new FormData(o),e={formData:{},unmappedData:[]},t=o.querySelectorAll("input, select, textarea"),r=-1;return t.forEach(i=>{if(typeof i.value=="string"){let a=i.getAttribute(T.id),p=i.getAttribute("name"),c={id:i.id,name:p,value:Zt(i),required:i.required,validity:v(i.validity,!0),myopId:a};e.unmappedData.push(c),p&&(!e.formData[p]||!e.formData[p].value||c.value)&&(e.formData[p]=c)}}),e}return o.type==="checkbox"||o.type==="radio"?o.checked?o.value:null:o.tagName==="INPUT"||o.tagName==="TEXTAREA"||o.tagName==="SELECT"?o.value:o.isContentEditable?o.innerText||o.textContent:null},Qe=class extends h{constructor(){super(...arguments);s(this,"messageType",d.GetElementValueMessage);s(this,"executor",e=>{I(e.ref,document).forEach(r=>{this.messageToHost(new q(Zt(r)),e)})})}};var Ye=class extends h{constructor(){super(...arguments);s(this,"messageType",d.GetAttributeMessage);s(this,"executor",e=>{let t=$t(e.ref,document);t&&this.messageToHost(new de(t.getAttribute(e.name)),e)})}};var Ze=class extends h{constructor(){super(...arguments);s(this,"messageType",d.SetResizeObserverMessage);s(this,"executor",e=>{let t=new ResizeObserver(r=>{this.messageToHost(new ye)});return t.observe(document.body),()=>{t.disconnect()}})}};var et=class extends h{constructor(){super(...arguments);s(this,"messageType",d.SetInnerHtml);s(this,"executor",e=>{I(e.ref,document).forEach(r=>{r.innerHTML=e.content})})}};var bt=class extends ee{constructor(){super();s(this,"version",Oe);s(this,"messageToHost",(e,t)=>{var i;!e.replayToHandler&&(t!=null&&t.handlerUniqueId)&&(e.replayToHandler=t.handlerUniqueId);let r=Object.keys(this.components);e.destination||(t!=null&&t.route?e.destination=t.route[t.route.length-1]:e.destination=r[0]),e.source||(e.source=r[0]),e.direction=b.up,(i=window.parent)==null||i.postMessage(y({},e),"*")});s(this,"supportedHandlers",[new Te(this.messageToHost),new et(this.messageToHost),new Se(this.messageToHost),new we(this.messageToHost),new Re(this.messageToHost),new ke(this.messageToHost),new He(this.messageToHost),new Qe(this.messageToHost),new Je(this.messageToHost),new Ze(this.messageToHost),new Ye(this.messageToHost),new Xe(this.messageToHost)]);s(this,"init",()=>{window.onmessage=this.handleIncomeMessages.bind(this),this.messageToHost(new j)});window.myop||(window.myop={}),window.myop.IframeSDK=this}};se("IframeSDK",bt);export{bt as IframeSDK};

package/dist/cjs/{_IframeSDK.2793f0c2.js → _IframeSDK.65146759.js}

@@ -1467,6 +1467,83 @@ var MyopIframeComponent = class extends BaseMyopComponent {
       }));
       return cleanupHandler;
     });
+    /**
+     * Observes the iframe content size and automatically syncs it to the iframe element.
+     * Uses direct contentDocument access (same-origin only) for accurate measurements.
+     * @param options - Configuration options including size change callback and min/max constraints
+     * @returns Cleanup function to stop observing
+     */
+    __publicField(this, "observeAutoSize", (options) => {
+      var _a;
+      const iframe = this.IframeElement;
+      const doc = iframe.contentDocument;
+      if (!doc) {
+        console.warn("[MyopIframeComponent] Cannot observe auto size: contentDocument not accessible");
+        return () => {
+        };
+      }
+      const clamp = (value, min, max) => {
+        if (min !== void 0 && value < min) return min;
+        if (max !== void 0 && value > max) return max;
+        return value;
+      };
+      const parseSize = (value) => {
+        if (value === void 0) return void 0;
+        if (typeof value === "number") return value;
+        const parsed = parseFloat(value);
+        return isNaN(parsed) ? void 0 : parsed;
+      };
+      const minWidth = parseSize(options == null ? void 0 : options.minWidth);
+      const maxWidth = parseSize(options == null ? void 0 : options.maxWidth);
+      const minHeight = parseSize(options == null ? void 0 : options.minHeight);
+      const maxHeight = parseSize(options == null ? void 0 : options.maxHeight);
+      const loaderMinHeight = (_a = options == null ? void 0 : options.loaderMinHeight) != null ? _a : 50;
+      const hasExplicitWidth = (options == null ? void 0 : options.explicitWidth) !== void 0;
+      const hasExplicitHeight = (options == null ? void 0 : options.explicitHeight) !== void 0;
+      const containerRect = this.container.getBoundingClientRect();
+      const collapsedWidth = containerRect.width === 0;
+      const collapsedHeight = containerRect.height === 0 || containerRect.height === loaderMinHeight;
+      const shouldAutoWidth = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitWidth : collapsedWidth && !hasExplicitWidth;
+      const shouldAutoHeight = (options == null ? void 0 : options.forceAutoSize) ? !hasExplicitHeight : collapsedHeight && !hasExplicitHeight;
+      if (!shouldAutoWidth && !shouldAutoHeight) {
+        return () => {
+        };
+      }
+      const updateSize = () => {
+        var _a2;
+        const contentDoc = iframe.contentDocument;
+        if (contentDoc) {
+          const rect = contentDoc.documentElement.getBoundingClientRect();
+          const contentWidth = Math.ceil(rect.width);
+          const contentHeight = Math.ceil(rect.height);
+          const width = clamp(contentWidth, minWidth, maxWidth);
+          const height = clamp(contentHeight, minHeight, maxHeight);
+          if (shouldAutoWidth) {
+            iframe.style.width = "".concat(width, "px");
+          }
+          if (shouldAutoHeight) {
+            iframe.style.height = "".concat(height, "px");
+          }
+          const isWidthConstrained = shouldAutoWidth && maxWidth !== void 0 && contentWidth > maxWidth;
+          const isHeightConstrained = shouldAutoHeight && maxHeight !== void 0 && contentHeight > maxHeight;
+          contentDoc.documentElement.style.overflowX = isWidthConstrained ? "auto" : "hidden";
+          contentDoc.documentElement.style.overflowY = isHeightConstrained ? "auto" : "hidden";
+          (_a2 = options == null ? void 0 : options.onSizeChange) == null ? void 0 : _a2.call(options, {
+            width,
+            height,
+            autoSizingWidth: shouldAutoWidth,
+            autoSizingHeight: shouldAutoHeight
+          });
+        }
+      };
+      updateSize();
+      const resizeObserver = new ResizeObserver(updateSize);
+      resizeObserver.observe(doc.body);
+      resizeObserver.observe(doc.documentElement);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    });
     __publicField(this, "setSizeBasedOnDocumentElement", () => {
       const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
         const { height, width } = document.documentElement.getBoundingClientRect();
@@ -1597,25 +1674,25 @@ var MyopIframeLoader = class extends BaseMyopLoader {
         const uniqId = uuidv4();
         const domId = "myop-comp-".concat(uniqId);
         IframeElement = document.createElement("iframe");
-        if (!container.querySelector('[id^="myop-comp-"]'))
-          container.innerHTML = "";
-        if (options == null ? void 0 : options.hidden) {
-          IframeElement.style.visibility = "hidden";
+        IframeElement.id = domId;
+        const iframeStyles = "\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                height: ".concat(typedLoaderConfig.autoHeight || !typedLoaderConfig.height ? "100%" : typedLoaderConfig.height, ";\n                width: 100%;\n                overflow: hidden;\n                border: none;\n                opacity: ").concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n            ");
+        IframeElement.style.cssText = iframeStyles;
+        if (options == null ? void 0 : options.elementAttributes) {
+          Object.entries(options.elementAttributes).forEach(([key, value]) => {
+            if (value === "" || value === null || value === void 0) {
+              IframeElement.setAttribute(key, "");
+            } else {
+              IframeElement.setAttribute(key, String(value));
+            }
+          });
         }
-        IframeElement = this.appendChild(container, IframeElement, options);
         let url2load = skin.loader.url;
         if (options == null ? void 0 : options._hasParent)
           url2load = addQueryParam(url2load, "_myop-comp", uniqId);
-        let elementAttributesString = "";
-        if (options == null ? void 0 : options.elementAttributes)
-          elementAttributesString = Object.entries(options == null ? void 0 : options.elementAttributes).map(([key, value]) => {
-            if (value === "" || value === null || value === void 0) {
-              return key;
-            }
-            return "".concat(key, '="').concat(String(value), '"');
-          }).join(" ");
-        IframeElement.outerHTML = '<iframe \n               id="'.concat(domId, '"\n               style="\n                   padding: 0;\n                   margin: 0;\n                   height: ').concat(typedLoaderConfig.autoHeight || !typedLoaderConfig.height ? "" : typedLoaderConfig.height, ";    \n                   width : 100%;\n                   overflow: hidden;\n                   border: none;\n                   opacity: ").concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                   position: ").concat((options == null ? void 0 : options.hidden) ? "absolute" : "static", ";\n                   pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ';\n               "\n            src="').concat(url2load, '"\n            ').concat(elementAttributesString, "\n            ></iframe>");
-        IframeElement = container.querySelector("#".concat(domId));
+        IframeElement.src = url2load;
+        if (!container.querySelector('[id^="myop-comp-"]'))
+          container.innerHTML = "";
+        IframeElement = this.appendChild(container, IframeElement, options);
       }
       return new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
     });
@@ -1731,7 +1808,7 @@ var WebcomponentLoader = class extends BaseMyopLoader {
 };
 
 // version:myop-sdk-version
-var myop_sdk_version_default = "0.2.6";
+var myop_sdk_version_default = "0.2.7";
 
 // src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
 var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
@@ -2101,15 +2178,11 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
         const uniqId = uuidv4();
         const domId2 = "myop-comp-".concat(uniqId);
         let IframeElement = document.createElement("iframe");
+        IframeElement.id = domId2;
+        IframeElement.style.cssText = "\n                display: block;\n                padding: 0;\n                margin: 0;\n                position: absolute;\n                inset: 0;\n                overflow: hidden;\n                border: none;\n                opacity: ".concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                width: 100%;\n                height: 100%;\n                pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n            ");
         if (!container.querySelector('[id^="myop-comp-"]'))
           container.innerHTML = "";
-        if (options == null ? void 0 : options.hidden) {
-          IframeElement.style.visibility = "hidden";
-        }
         IframeElement = this.appendChild(container, IframeElement, options);
-        IframeElement.id = domId2;
-        IframeElement.setAttribute("style", "\n                   display: block;\n                   padding: 0;\n                   margin: 0;\n                   overflow: hidden;\n                   border: none;\n                   opacity: ".concat((options == null ? void 0 : options.hidden) ? "0" : "1", ";\n                   width: 100%;\n                   height: 100%;\n                   position: ").concat((options == null ? void 0 : options.hidden) ? "absolute" : "static", ";\n                   pointer-events: ").concat((options == null ? void 0 : options.hidden) ? "none" : "all", ";\n               "));
-        container.appendChild(IframeElement);
         const doc = IframeElement.contentDocument || IframeElement.contentWindow.document;
         doc.open();
         let HTML2Render = loaderConfig.HTML;
@@ -2170,6 +2243,57 @@ var HTMLComponentLoader = class extends BaseMyopLoader {
 };
 
 // src/helpers/CloudRepository.ts
+var convertV2VariantToComponentConfig = (config) => {
+  return {
+    instance: {
+      id: "auto",
+      componentId: config.componentId,
+      componentName: config.name,
+      skinSelector: {
+        type: "Dedicated",
+        skin: {
+          id: "skin_auto_v2_converted"
+        }
+      }
+    },
+    type: {
+      id: config.id,
+      name: config.name,
+      description: config.description,
+      props: [
+        {
+          id: "in_auto_v2_converted",
+          name: "myop_init_interface",
+          type: "any",
+          behavior: {
+            type: PropConfigBehaviorTypes.code
+          }
+        },
+        {
+          id: "out_auto_v2_converted",
+          name: "myop_cta_handler",
+          type: "any",
+          behavior: {
+            type: PropConfigBehaviorTypes.code
+          }
+        }
+      ],
+      refs: [],
+      skins: [
+        {
+          id: "skin_auto_v2_converted",
+          name: "auto_v2_converted",
+          description: "",
+          //TODO : handle empty :
+          // @ts-ignore
+          loader: config.consume_variant[0].loader
+        }
+      ],
+      defaultSkin: 0
+    },
+    name: config.name
+  };
+};
 var _CloudRepository = class _CloudRepository {
   constructor(_baseUrl = "https://cloud.myop.dev") {
     this._baseUrl = _baseUrl;
@@ -2177,34 +2301,62 @@ var _CloudRepository = class _CloudRepository {
     __publicField(this, "variants", {});
     // v1 cache
     __publicField(this, "userFlows", {});
+    __publicField(this, "_defaultEnv", "production");
+  }
+  /**
+   * Set the default environment for this CloudRepository instance
+   */
+  setEnvironment(env) {
+    this._defaultEnv = env;
+  }
+  /**
+   * Get the current default environment
+   */
+  getDefaultEnvironment() {
+    return this._defaultEnv;
   }
   // ============ V2 Methods (Default) ============
   /**
    * Check if a component is already cached/preloaded (v2)
    */
-  isPreloaded(componentId) {
-    return componentId in this.variants;
+  isPreloaded(componentId, env, preview) {
+    const cacheKey = "".concat(componentId, ":").concat(env || this._defaultEnv, ":").concat(preview ? "preview" : "live");
+    return cacheKey in this.variants;
   }
   /**
-   * Fetch a v2 component variant
+   * Fetch a v2 component config
    */
-  async fetchComponentV2(componentId, environmentIdentifier) {
-    if (!this.variants[componentId]) {
-      this.variants[componentId] = new Promise(
+  async fetchComponentV2(componentId, environmentIdentifier, preview) {
+    const env = environmentIdentifier || this._defaultEnv;
+    const cacheKey = "".concat(componentId, ":").concat(env, ":").concat(preview ? "preview" : "live");
+    if (!this.variants[cacheKey]) {
+      this.variants[cacheKey] = new Promise(
         async (resolve, reject) => {
           try {
-            const res = await fetch(
-              "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(environmentIdentifier)
-            );
+            let url = "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(env);
+            if (preview) {
+              url += "&preview=true";
+            }
+            const res = await fetch(url);
             const json = await res.json();
-            resolve(json.item);
+            const variant = json.item;
+            if (!variant) {
+              reject(new Error('Component "'.concat(componentId, '" not found')));
+              return;
+            }
+            if (!variant.consume_variant || !variant.consume_variant.length) {
+              reject(new Error('Component "'.concat(componentId, '" has no implementation for environment "').concat(env, '"')));
+              return;
+            }
+            const componentConfig = convertV2VariantToComponentConfig(variant);
+            resolve(componentConfig);
           } catch (e) {
             reject(e);
           }
         }
       );
     }
-    return await this.variants[componentId];
+    return await this.variants[cacheKey];
   }
   // ============ V1 Methods (Legacy) ============
   /**