@myop/sdk 0.1.46 → 0.2.1

package/dist/cjs/_MyopHelpers.70503082.js

@@ -0,0 +1,2810 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/dynamicImport/defineDynamicImport.ts
+var __federation__ = "__federation__";
+var onLoadKey = "onLoad";
+var defineDynamicImport = (globalName, module) => {
+  if (window[__federation__] && window[__federation__][globalName] && window[__federation__][globalName][onLoadKey]) {
+    window[__federation__][globalName][onLoadKey]({ [globalName]: module });
+  } else {
+  }
+};
+
+// src/helpers/index.ts
+var helpers_exports = {};
+__export(helpers_exports, {
+  CloudRepository: () => CloudRepository,
+  ComponentConfig: () => ComponentConfig,
+  SkinConfig: () => SkinConfig,
+  addClass: () => addClass,
+  applyStylesheet: () => applyStylesheet,
+  applyStylesheetLink: () => applyStylesheetLink,
+  changeSkinUrlByTokenizer: () => changeSkinUrlByTokenizer,
+  createIframeSkinByTokenizer: () => createIframeSkinByTokenizer,
+  enableV2: () => enableV2,
+  exec: () => exec,
+  removeClass: () => removeClass,
+  v2_CloudRepository: () => v2_CloudRepository
+});
+
+// src/utils/uuid.ts
+var uuidv4 = () => {
+  return "10000000-1000-4000-8000-100000000000".replace(
+    /[018]/g,
+    (c) => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+  );
+};
+var bytesToUuid = (bytes) => {
+  const hex = [...bytes].map((b) => b.toString(16).padStart(2, "0")).join("");
+  return [
+    hex.slice(0, 8),
+    hex.slice(8, 12),
+    hex.slice(12, 16),
+    hex.slice(16, 20),
+    hex.slice(20)
+  ].join("-");
+};
+var base64UrlDecode = (str) => {
+  let base64 = str.replace(/-/g, "+").replace(/_/g, "/");
+  while (base64.length % 4) base64 += "=";
+  const binary = atob(base64);
+  return Uint8Array.from(binary, (char) => char.charCodeAt(0));
+};
+var decompressUUIDs = (encoded) => {
+  const bytes = base64UrlDecode(encoded);
+  if (bytes.length % 16 !== 0) throw new Error("Invalid input length");
+  const uuids = [];
+  for (let i = 0; i < bytes.length; i += 16) {
+    uuids.push(bytesToUuid(bytes.slice(i, i + 16)));
+  }
+  return uuids;
+};
+
+// src/utils/utils.ts
+var wait = (ms) => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+// src/messages/index.ts
+var messages_exports = {};
+__export(messages_exports, {
+  AddEventListenerMessage: () => AddEventListenerMessage,
+  BaseMyopMessage: () => BaseMyopMessage,
+  BindClickMessage: () => BindClickMessage,
+  ChangeTextMessage: () => ChangeTextMessage,
+  CleanupMessage: () => CleanupMessage,
+  CleanupReplayMessage: () => CleanupReplayMessage,
+  ClickReplayMessage: () => ClickReplayMessage,
+  CreateRefComponentMessage: () => CreateRefComponentMessage,
+  CustomRefMessage: () => CustomRefMessage,
+  DetectMyopRefsMessage: () => DetectMyopRefsMessage,
+  DetectedMyopRefsMessage: () => DetectedMyopRefsMessage,
+  DisposeMessage: () => DisposeMessage,
+  ElementValueReplayMessage: () => ElementValueReplayMessage,
+  EnvelopedMessage: () => EnvelopedMessage,
+  EventListenerCallbackMessage: () => EventListenerCallbackMessage,
+  ExecuteComponentMethod: () => ExecuteComponentMethod,
+  ExecuteScriptMessage: () => ExecuteScriptMessage,
+  ExecuteScriptReplyMessage: () => ExecuteScriptReplyMessage,
+  GetAttributeMessage: () => GetAttributeMessage,
+  GetAttributeReplayMessage: () => GetAttributeReplayMessage,
+  GetElementValueMessage: () => GetElementValueMessage,
+  InitMessage: () => InitMessage,
+  InitRequest: () => InitRequest,
+  InitResponse: () => InitResponse,
+  MessageDirection: () => MessageDirection,
+  MutationObserverMessage: () => MutationObserverMessage,
+  MyopBindMessage: () => MyopBindMessage,
+  MyopBindReplayMessage: () => MyopBindReplayMessage,
+  MyopElementMessage: () => MyopElementMessage,
+  Ref: () => Ref,
+  RefComponentCreatedMessage: () => RefComponentCreatedMessage,
+  ResizeObserverMessage: () => ResizeObserverMessage,
+  SetAttributeMessage: () => SetAttributeMessage,
+  SetInnerHtml: () => SetInnerHtml,
+  SetMutationObserverMessage: () => SetMutationObserverMessage,
+  SetResizeObserverMessage: () => SetResizeObserverMessage,
+  stripFunction: () => stripFunction
+});
+
+// src/messages/BaseMessage.ts
+var MessageDirection = class {
+};
+__publicField(MessageDirection, "down", "down");
+__publicField(MessageDirection, "up", "up");
+var BaseMyopMessage = class {
+  constructor() {
+    __publicField(this, "id", uuidv4());
+    __publicField(this, "myop", true);
+    __publicField(this, "content");
+    // TODO : cant be optional 
+    __publicField(this, "source");
+    __publicField(this, "destination");
+    __publicField(this, "route");
+    __publicField(this, "ref");
+    __publicField(this, "direction");
+    __publicField(this, "cleanable", false);
+  }
+  static create(...args) {
+    return new this(...args);
+  }
+  isTypeof(msg) {
+    return msg.messageType === this.messageType;
+  }
+};
+var MyopElementMessage = class extends BaseMyopMessage {
+  constructor(ref) {
+    super();
+    this.ref = ref;
+  }
+};
+var MyopBindReplayMessage = class extends BaseMyopMessage {
+  constructor(replayToHandler) {
+    super();
+    this.replayToHandler = replayToHandler;
+  }
+};
+var MyopBindMessage = class extends BaseMyopMessage {
+  constructor(handler) {
+    super();
+    this.handler = handler;
+    __publicField(this, "handlerUniqueId", uuidv4());
+  }
+};
+var Ref = class _Ref {
+  constructor(refConfig, component) {
+    this.refConfig = refConfig;
+    this.component = component;
+    __publicField(this, "myop", true);
+    __publicField(this, "__nonProxied");
+    this.__nonProxied = __spreadProps(__spreadValues({}, this), {
+      component: null
+      // in order to be serializable
+    });
+  }
+  static create(selector, refConfig, component) {
+    let _refConfig = refConfig;
+    if (!_refConfig) {
+      _refConfig = {
+        id: "",
+        name: "",
+        description: "",
+        selectorType: "id-attribute",
+        selector,
+        behavior: {
+          type: "code"
+        }
+      };
+    }
+    return new _Ref(_refConfig, component);
+  }
+};
+
+// src/messages/BindClickMessage.ts
+var ReplayMessageKey = "ClickReplayMessage";
+var BindClickMessage = class extends MyopBindMessage {
+  constructor(ref, handler) {
+    super(handler);
+    this.ref = ref;
+    __publicField(this, "replyMessageKey", ReplayMessageKey);
+    __publicField(this, "messageType", "BindClickMessage");
+    __publicField(this, "cleanable", true);
+  }
+};
+var ClickReplayMessage = class extends MyopBindReplayMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", ReplayMessageKey);
+  }
+};
+
+// src/messages/ChangeTextMessage.ts
+var ChangeTextMessage = class extends BaseMyopMessage {
+  constructor(ref, text) {
+    super();
+    this.ref = ref;
+    __publicField(this, "messageType", "ChangeTextMessage");
+    this.content = text;
+  }
+};
+
+// src/messages/ExecuteScriptMessage.ts
+var ReplayMessageKey2 = "ExecuteScriptReplyMessage";
+var functionBodyRegex = /(?:function\s*\w*\s*\([^)]*\)\s*\{([\s\S]*?)\}|(\([^)]*\)\s*=>\s*\{([\s\S]*?)\}))\s*$/;
+var expressionBodyRegex = /\(\s*[^)]+\s*\)\s*=>\s*(.+)/;
+var stripFunction = (content) => {
+  let match = content.match(functionBodyRegex);
+  if (match) {
+    return match[1] || match[3];
+  } else {
+    let match2 = content.match(expressionBodyRegex);
+    if (match2)
+      return match2[1].trim();
+  }
+};
+var ExecuteScriptMessage = class extends MyopBindMessage {
+  constructor(script, handler = () => {
+  }, scriptInputs2) {
+    super(handler);
+    this.scriptInputs = scriptInputs2;
+    __publicField(this, "replyMessageKey", ReplayMessageKey2);
+    __publicField(this, "messageType", "ExecuteScriptMessage");
+    __publicField(this, "script", "");
+    this.script = script.toString();
+    this.content = script.toString();
+    this.content = stripFunction(this.content);
+  }
+};
+__publicField(ExecuteScriptMessage, "replierKey", "send");
+__publicField(ExecuteScriptMessage, "completeStreamKey", "completeStream");
+var ExecuteScriptReplyMessage = class extends MyopBindReplayMessage {
+  constructor(replayToHandler, content) {
+    super(replayToHandler);
+    this.replayToHandler = replayToHandler;
+    this.content = content;
+    __publicField(this, "messageType", ReplayMessageKey2);
+  }
+};
+
+// src/messages/CustomRefMessage.ts
+var CustomRefMessage = class extends ExecuteScriptMessage {
+  constructor(script, scriptInputs2, handler = () => {
+  }) {
+    super(({ rootRef, elementId, _script, __scriptInputs }) => {
+      const refs = (rootRef.shadowRoot || rootRef.container).querySelectorAll("[".concat("myop-id", "='").concat(elementId, "']"));
+      if (refs.length) {
+        __scriptInputs.ref = refs[0];
+        const dynamicFunction = new Function("return (".concat(_script, ")(...arguments)"));
+        return dynamicFunction(__scriptInputs);
+      }
+      return null;
+    }, handler);
+    this.scriptInputs = scriptInputs2;
+    this.scriptInputs = __spreadProps(__spreadValues({}, scriptInputs2), {
+      //_script: stripFunction(script.toString()),
+      _script: script.toString()
+    });
+  }
+};
+
+// src/messages/AddEventListenerMessage.ts
+var ReplayMessageKey3 = "EventListenerCallbackMessage";
+var AddEventListenerMessage = class extends MyopBindMessage {
+  // {} // empty
+  constructor(ref, type, handler) {
+    super(handler);
+    this.ref = ref;
+    this.type = type;
+    this.handler = handler;
+    __publicField(this, "replyMessageKey", ReplayMessageKey3);
+    __publicField(this, "messageType", "AddEventListenerMessage");
+    __publicField(this, "cleanable", true);
+    __publicField(this, "serializableSkeleton", false);
+  }
+  withSerializableSkeleton(serializableSkeleton) {
+    this.serializableSkeleton = serializableSkeleton;
+    return this;
+  }
+};
+var EventListenerCallbackMessage = class extends MyopBindReplayMessage {
+  constructor(replayToHandler, e) {
+    super(replayToHandler);
+    this.replayToHandler = replayToHandler;
+    this.e = e;
+    __publicField(this, "messageType", ReplayMessageKey3);
+    this.content = {
+      e
+    };
+  }
+};
+
+// src/messages/SetAttributeMessage.ts
+var SetAttributeMessage = class extends BaseMyopMessage {
+  constructor(ref, name, value) {
+    super();
+    this.ref = ref;
+    this.name = name;
+    this.value = value;
+    __publicField(this, "messageType", "SetAttributeMessage");
+  }
+};
+
+// src/messages/GetElementValueMessage.ts
+var ReplayMessageKey4 = "ElementValueReplayMessage";
+var GetElementValueMessage = class extends MyopBindMessage {
+  constructor(ref, handler) {
+    super(handler);
+    this.ref = ref;
+    __publicField(this, "replyMessageKey", ReplayMessageKey4);
+    __publicField(this, "messageType", "GetElementValueMessage");
+  }
+};
+var ElementValueReplayMessage = class extends MyopBindReplayMessage {
+  constructor(content) {
+    super();
+    this.content = content;
+    __publicField(this, "messageType", ReplayMessageKey4);
+  }
+};
+
+// src/messages/SetInnerHtml.ts
+var SetInnerHtml = class extends BaseMyopMessage {
+  constructor(ref, innerHtml) {
+    super();
+    this.ref = ref;
+    __publicField(this, "messageType", "SetInnerHtml");
+    this.content = innerHtml;
+  }
+};
+
+// src/messages/InitMessage.ts
+var InitMessage = class extends BaseMyopMessage {
+  constructor(id) {
+    super();
+    __publicField(this, "messageType", "InitMessage");
+    this.content = { id };
+  }
+  isTypeof(msg) {
+    return msg.messageType === this.messageType;
+  }
+};
+var InitResponse = class extends InitMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", "InitResponse");
+  }
+};
+var InitRequest = class extends BaseMyopMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", "InitRequest");
+  }
+};
+
+// src/messages/CreateRefComponentMessage.ts
+var ReplayMessageKey5 = "RefComponentCreatedMessage";
+var CreateRefComponentMessage = class extends MyopBindMessage {
+  constructor(refConfig, nestedComponentConfig, options, handler) {
+    super(handler);
+    this.refConfig = refConfig;
+    this.nestedComponentConfig = nestedComponentConfig;
+    this.options = options;
+    __publicField(this, "replyMessageKey", ReplayMessageKey5);
+    __publicField(this, "messageType", "CreateRefComponentMessage");
+  }
+};
+var RefComponentCreatedMessage = class extends MyopBindReplayMessage {
+  constructor(replayToHandler, nestedRefs, failed) {
+    super(replayToHandler);
+    this.replayToHandler = replayToHandler;
+    this.nestedRefs = nestedRefs;
+    this.failed = failed;
+    __publicField(this, "messageType", ReplayMessageKey5);
+  }
+};
+
+// src/messages/EnvelopedMessage.ts
+var EnvelopedMessage = class extends BaseMyopMessage {
+  constructor(destination, message) {
+    super();
+    this.destination = destination;
+    this.message = message;
+    __publicField(this, "messageType", "EnvelopedMessage");
+    const innerEnvelopedMessage = message;
+    this.route = [destination, ...innerEnvelopedMessage.route ? innerEnvelopedMessage.route : []];
+  }
+};
+
+// src/messages/DetectMyopRefsMessage.ts
+var ReplayMessageKey6 = "DetectedMyopRefsMessage";
+var DetectMyopRefsMessage = class extends MyopBindMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", "DetectMyopRefsMessage");
+    __publicField(this, "replyMessageKey", ReplayMessageKey6);
+  }
+};
+var DetectedMyopRefsMessage = class extends MyopBindReplayMessage {
+  constructor(replayToHandler, myopElementRefs) {
+    super(replayToHandler);
+    this.replayToHandler = replayToHandler;
+    __publicField(this, "messageType", ReplayMessageKey6);
+    this.content = myopElementRefs;
+  }
+  isTypeof(msg) {
+    return msg.messageType === this.messageType;
+  }
+};
+
+// src/messages/GetAttributeMessage.ts
+var ReplayMessageKey7 = "GetAttributeReplayMessage";
+var GetAttributeMessage = class extends MyopBindMessage {
+  constructor(ref, name, handler) {
+    super(handler);
+    this.ref = ref;
+    this.name = name;
+    __publicField(this, "replyMessageKey", ReplayMessageKey7);
+    __publicField(this, "messageType", "GetAttributeMessage");
+  }
+};
+var GetAttributeReplayMessage = class extends MyopBindReplayMessage {
+  constructor(content) {
+    super();
+    this.content = content;
+    __publicField(this, "messageType", ReplayMessageKey7);
+  }
+};
+
+// src/messages/componentMessages/ExecuteComponentMethod.ts
+var ExecuteComponentMethod = class extends BaseMyopMessage {
+  constructor(method) {
+    super();
+    this.method = method;
+    __publicField(this, "messageType", "ExecuteComponentMethod");
+  }
+};
+
+// src/messages/componentMessages/SetMutationObserverMessage.ts
+var SetMutationObserverMessage = class extends BaseMyopMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", "SetMutationObserverMessage");
+  }
+};
+var MutationObserverMessage = class extends BaseMyopMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", "MutationObserverMessage");
+  }
+};
+
+// src/messages/CleanupMessage.ts
+var ReplayMessageKey8 = "CleanupReplayMessage";
+var CleanupMessage = class extends MyopBindMessage {
+  constructor(cleanupForMessageId, handler) {
+    super(handler);
+    this.cleanupForMessageId = cleanupForMessageId;
+    __publicField(this, "replyMessageKey", ReplayMessageKey8);
+    __publicField(this, "messageType", "CleanupMessage");
+  }
+};
+var CleanupReplayMessage = class extends MyopBindReplayMessage {
+  constructor(customCleanup) {
+    super();
+    this.customCleanup = customCleanup;
+    __publicField(this, "messageType", ReplayMessageKey8);
+  }
+};
+
+// src/messages/DisposeMessage.ts
+var DisposeMessage = class extends BaseMyopMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", "DisposeMessage");
+  }
+};
+
+// src/messages/componentMessages/SetResizeObserverMessage.ts
+var SetResizeObserverMessage = class extends BaseMyopMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "cleanable", true);
+    __publicField(this, "messageType", "SetResizeObserverMessage");
+  }
+};
+var ResizeObserverMessage = class extends BaseMyopMessage {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", "ResizeObserverMessage");
+  }
+};
+
+// src/helpers/applyStylesheet.ts
+var applyStylesheet = (component, stylesheet, css) => {
+  const tagId = "myop-css-".concat(uuidv4());
+  component.send(new ExecuteScriptMessage(({ rootRef, _stylesheet, _tagId, _css }) => {
+    const styleTag = document.createElement("style");
+    styleTag.type = "text/css";
+    let cssString = _css;
+    for (const selector in _stylesheet) {
+      cssString += "".concat(selector, " { ");
+      const properties = _stylesheet[selector];
+      for (const property in properties) {
+        cssString += "".concat(property, ": ").concat(properties[property], "; ");
+      }
+      cssString += "} ";
+    }
+    styleTag.appendChild(document.createTextNode(cssString));
+    styleTag.id = _tagId;
+    (rootRef.shadowRoot || rootRef.container).appendChild(styleTag);
+  }, () => {
+  }, {
+    _stylesheet: stylesheet,
+    _css: css ? css : "",
+    _tagId: tagId
+  }));
+  return () => {
+    component.send(new ExecuteScriptMessage(({ rootRef, _tagId }) => {
+      const element = (rootRef.shadowRoot || document).getElementById(_tagId);
+      if (element) {
+        element.remove();
+      }
+    }, () => {
+    }, {
+      _tagId: tagId
+    }));
+  };
+};
+var applyStylesheetLink = (component, link) => {
+  const tagId = "myop-css-".concat(uuidv4());
+  component.send(new ExecuteScriptMessage(({ rootRef, _tagId, _link }) => {
+    const linkElement = document.createElement("link");
+    linkElement.id = _tagId;
+    linkElement.rel = "stylesheet";
+    linkElement.href = _link;
+    document.head.appendChild(linkElement);
+    (rootRef.shadowRoot || rootRef.container).appendChild(linkElement);
+  }, () => {
+  }, {
+    _link: link,
+    _tagId: tagId
+  }));
+  return () => {
+    component.send(new ExecuteScriptMessage(({ rootRef, _tagId }) => {
+      const element = (rootRef.shadowRoot || document).getElementById(_tagId);
+      if (element) {
+        element.remove();
+      }
+    }, () => {
+    }, {
+      _tagId: tagId
+    }));
+  };
+};
+
+// src/helpers/iframeSkinUrlTokenizer.ts
+var replaceTokens = (input, tokenMap) => {
+  const pattern = new RegExp(Object.keys(tokenMap).join("|"), "g");
+  return input.replace(pattern, (matched) => {
+    return (tokenMap[matched] || matched).toString();
+  });
+};
+var createIframeSkinByTokenizer = (selectedSkin, tokenMap) => {
+  const typedSkinConfig = selectedSkin.loader;
+  if (typedSkinConfig.type !== "IframeLoader") {
+    throw new Error('iframeSkinUrlTokenizer received skin with loader type "'.concat(typedSkinConfig.type, '", currently only "IframeLoader" is supported'));
+  }
+  selectedSkin.loader = __spreadValues({}, selectedSkin.loader);
+  selectedSkin.loader.url = replaceTokens(selectedSkin.loader.url, tokenMap);
+  return selectedSkin;
+};
+var changeSkinUrlByTokenizer = (tokenMap) => {
+  return async (selectedSkin) => {
+    return createIframeSkinByTokenizer(selectedSkin, tokenMap);
+  };
+};
+
+// src/helpers/classList.ts
+var addClass = (component, className, myopId) => {
+  component.send(new CustomRefMessage(({ ref, _className }) => {
+    ref == null ? void 0 : ref.classList.add(_className);
+  }, {
+    elementId: myopId,
+    _className: className
+  }));
+};
+var removeClass = (component, className, myopId) => {
+  component.send(new CustomRefMessage(({ ref, _className }) => {
+    ref == null ? void 0 : ref.classList.remove(_className);
+  }, {
+    elementId: myopId,
+    _className: className
+  }));
+};
+
+// src/helpers/configBuilder.ts
+var _SkinConfig = class _SkinConfig {
+  constructor() {
+    __publicField(this, "_runTimeInstanceId", "runtime-instance-id-" + uuidv4());
+    __publicField(this, "_runTimeId", "runtime-id-" + uuidv4());
+    __publicField(this, "_runTimeName", "runtime-name-" + uuidv4());
+    __publicField(this, "id", this._runTimeId);
+    __publicField(this, "name", this._runTimeName);
+    __publicField(this, "description", "");
+    __publicField(this, "loader", null);
+    __publicField(this, "withLoader", (loader) => {
+      this.loader = loader;
+      return this;
+    });
+    __publicField(this, "withHTMLLoader", (loader) => {
+      loader.type = "HTMLLoader";
+      this.loader = loader;
+      return this;
+    });
+    __publicField(this, "build", () => {
+      return this;
+    });
+  }
+};
+__publicField(_SkinConfig, "create", () => {
+  return new _SkinConfig();
+});
+var SkinConfig = _SkinConfig;
+var _ComponentConfig = class _ComponentConfig {
+  constructor() {
+    __publicField(this, "_runTimeInstanceId", "runtime-instance-id-" + uuidv4());
+    __publicField(this, "_runTimeId", "runtime-id-" + uuidv4());
+    __publicField(this, "_runTimeName", "runtime-name-" + uuidv4());
+    __publicField(this, "instance", {
+      id: this._runTimeInstanceId,
+      componentId: this._runTimeId,
+      componentName: this._runTimeName,
+      skinSelector: null
+    });
+    __publicField(this, "name", this._runTimeName);
+    __publicField(this, "type", {
+      id: this._runTimeId,
+      name: this._runTimeName,
+      description: "",
+      props: [],
+      refs: [],
+      skins: [],
+      defaultSkin: 0
+    });
+    __publicField(this, "withInstance", (instance) => {
+      this.instance = instance;
+      return this;
+    });
+    __publicField(this, "withType", (type) => {
+      this.type = type;
+      return this;
+    });
+    __publicField(this, "withName", (name) => {
+      this.name = name;
+      return this;
+    });
+    __publicField(this, "withDefaultSkin", (defaultSkin) => {
+      this.type.skins.push(defaultSkin);
+      this.type.defaultSkin = this.type.skins.length - 1;
+      this.instance.skinSelector = {
+        type: "Dedicated",
+        skin: {
+          id: defaultSkin.id
+        }
+      };
+      return this;
+    });
+    __publicField(this, "withRef", (ref) => {
+      this.type.refs.push(ref);
+      return this;
+    });
+    __publicField(this, "withBasicRef", (refSelector) => {
+      const newBasicRef = {
+        id: "",
+        name: refSelector,
+        description: "",
+        selectorType: "id-attribute",
+        selector: refSelector,
+        behavior: {
+          type: "code"
+        }
+      };
+      this.type.refs.push(newBasicRef);
+      return this;
+    });
+    __publicField(this, "build", () => {
+      return JSON.parse(JSON.stringify(this));
+    });
+  }
+};
+__publicField(_ComponentConfig, "create", () => {
+  return new _ComponentConfig();
+});
+var ComponentConfig = _ComponentConfig;
+
+// src/helpers/CloudRepository.ts
+var _CloudRepository = class _CloudRepository {
+  // private components: Record<string, Promise<IUserFlow>> = {};
+  constructor(_baseUrl = "https://cloud.myop.dev") {
+    this._baseUrl = _baseUrl;
+    __publicField(this, "userFlows", {});
+  }
+  async fetchComponent(componentId, flowId) {
+    if (flowId) {
+      const flow = await this.fetchFlow(flowId);
+      return flow.components.find((c) => c.type.id === componentId);
+    } else {
+      const flow = await this.fetchAutoFlow(componentId);
+      return flow.components[0];
+    }
+  }
+  async fetchAutoFlow(componentId) {
+    if (!this.userFlows[componentId]) {
+      this.userFlows[componentId] = new Promise(
+        async (resolve, reject) => {
+          try {
+            const res = await fetch(
+              "".concat(this._baseUrl, "/flow?id=").concat(componentId, "&auto=true")
+            );
+            const json = await res.json();
+            resolve(json.item);
+          } catch (e) {
+            reject(e);
+          }
+        }
+      );
+    }
+    return await this.userFlows[componentId];
+  }
+  async fetchFlow(flowId) {
+    if (!this.userFlows[flowId]) {
+      this.userFlows[flowId] = new Promise(
+        async (resolve, reject) => {
+          try {
+            const res = await fetch(
+              "".concat(this._baseUrl, "/flow?id=").concat(flowId, "&resolve=components")
+            );
+            const json = await res.json();
+            resolve(json.item);
+          } catch (e) {
+            reject(e);
+          }
+        }
+      );
+    }
+    return await this.userFlows[flowId];
+  }
+};
+__publicField(_CloudRepository, "Main", new _CloudRepository());
+var CloudRepository = _CloudRepository;
+
+// src/helpers/exec.ts
+var exec = async (getter) => {
+  return await getter();
+};
+
+// src/common/MyopMessages.ts
+var MyopMessages = {
+  //host to component
+  "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",
+  //component messages
+  "ExecuteComponentMethod": "ExecuteComponentMethod",
+  "SetMutationObserverMessage": "SetMutationObserverMessage",
+  "SetResizeObserverMessage": "SetResizeObserverMessage",
+  "CleanupMessage": "CleanupMessage",
+  // external to host :
+  In: {
+    "DetectedMyopRefsMessage": "DetectedMyopRefsMessage",
+    "ClickReplayMessage": "ClickReplayMessage",
+    "ExecuteScriptReplyMessage": "ExecuteScriptReplyMessage",
+    "EventListenerCallbackMessage": "EventListenerCallbackMessage",
+    "ElementValueReplayMessage": "ElementValueReplayMessage",
+    "GetAttributeReplayMessage": "GetAttributeReplayMessage",
+    "RefComponentCreatedMessage": "RefComponentCreatedMessage",
+    "EnvelopedMessage": "EnvelopedMessage",
+    "MutationObserverMessage": "MutationObserverMessage",
+    "CleanupReplayMessage": "CleanupReplayMessage",
+    "ResizeObserverMessage": "ResizeObserverMessage"
+  }
+};
+
+// src/host/components/IMyopComponent.ts
+var BaseMyopComponent = class {
+  constructor(componentDefinition, container, options) {
+    this.componentDefinition = componentDefinition;
+    this.container = container;
+    __publicField(this, "id", "");
+    __publicField(this, "messageHandlers", {});
+    __publicField(this, "element");
+    __publicField(this, "_markedForDisposed", false);
+    //TODO: use bindWhen with return true predicate ...
+    __publicField(this, "bind", (messageType, handler) => {
+      if (!this.messageHandlers[messageType]) {
+        this.messageHandlers[messageType] = [];
+      }
+      if (!this.messageHandlers[messageType].includes(handler)) {
+        this.messageHandlers[messageType].push(handler);
+      }
+    });
+    __publicField(this, "bindWhen", (messageType, predicate, handler) => {
+      if (!handler) {
+        throw new Error("can't use component.bindWhen without an handler");
+      }
+      if (!this.messageHandlers[messageType]) {
+        this.messageHandlers[messageType] = [];
+      }
+      const handlers = this.messageHandlers[messageType];
+      const predicateWrappedHandler = (e) => {
+        if (predicate(e)) {
+          handler(e);
+          return true;
+        }
+        return false;
+      };
+      handlers.push(predicateWrappedHandler);
+      return () => {
+        const index = handlers.indexOf(predicateWrappedHandler);
+        if (index > -1) {
+          handlers.splice(index, 1);
+        }
+      };
+    });
+    __publicField(this, "setInitiated", () => {
+      this.isInitiated = true;
+      if (this._whenInitiatedResolve)
+        this._whenInitiatedResolve();
+    });
+    __publicField(this, "isInitiated", false);
+    __publicField(this, "_whenInitiatedResolve");
+    __publicField(this, "_whenInitiatedReject");
+    __publicField(this, "_whenInitiated", new Promise((resolve, reject) => {
+      this._whenInitiatedResolve = resolve;
+      this._whenInitiatedReject = reject;
+    }));
+    __publicField(this, "initiated", () => {
+      return this._whenInitiated;
+    });
+    __publicField(this, "props", {});
+    __publicField(this, "refs", {});
+    this.id = (options == null ? void 0 : options.id) || HostSDK.Instance().assignId(componentDefinition);
+    const timeout = (options == null ? void 0 : options.timeout) ? options == null ? void 0 : options.timeout : 5 * 1e3;
+    setTimeout(() => {
+      if (!this.isInitiated && this._whenInitiatedReject && !this._markedForDisposed) {
+        this._whenInitiatedReject("timeout_".concat(timeout, " ").concat(this.id));
+      }
+    }, timeout);
+    this.initiated().then(() => {
+      if (window.myop.hostSDK.inspected) {
+        this.inspect();
+      }
+    });
+  }
+  get markedForDisposed() {
+    return this._markedForDisposed;
+  }
+  set markedForDisposed(value) {
+    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 = value;
+  }
+  onMessageReceived(incomeMessage) {
+    if (incomeMessage.messageType === MyopMessages.ExecuteComponentMethod) {
+      const typedMessage = incomeMessage;
+      if (this[typedMessage.method]) {
+        this[typedMessage.method](typedMessage.content);
+      } else {
+        console.log("method not found ".concat(typedMessage.method, " on component"), this);
+      }
+      return true;
+    }
+    const handlers = this.messageHandlers[incomeMessage.messageType];
+    if (handlers && handlers.length) {
+      let handled = false;
+      handlers.forEach((handler) => {
+        handled = handled || handler(incomeMessage);
+      });
+      return handled;
+    } else {
+    }
+    return false;
+  }
+  sendCleanupMessage(message) {
+    message.source = this.id;
+    message.destination = this.id;
+    message.direction = MessageDirection.down;
+    const cleanupHandler = this.bindWhen(message.replyMessageKey, (msg) => {
+      return msg.replayToHandler === message.handlerUniqueId;
+    }, (m) => {
+      message.handler(m);
+      cleanupHandler();
+    });
+    const handler = message.handler;
+    delete message.handler;
+    this.send(message);
+    message.handler = handler;
+  }
+  send(message) {
+    if (!message.source)
+      message.source = this.id;
+    if (!message.destination)
+      message.destination = this.id;
+    message.direction = MessageDirection.down;
+    let cleanupHandler;
+    if (message.handler) {
+      const typedMessage = message;
+      cleanupHandler = this.bindWhen(typedMessage.replyMessageKey, (msg) => {
+        return msg.replayToHandler === typedMessage.handlerUniqueId;
+      }, typedMessage.handler);
+      delete message.handler;
+    }
+    if (message.ref) {
+      message.ref = message.ref.__nonProxied || message.ref;
+    }
+    if (message.cleanable) {
+      return () => {
+        this.sendCleanupMessage(new CleanupMessage(message.id, (replay) => {
+        }));
+        if (cleanupHandler) {
+          cleanupHandler();
+        }
+      };
+    } else {
+      return () => {
+      };
+    }
+  }
+  dispose() {
+    this.markedForDisposed = true;
+    if (!this.isInitiated) {
+      return;
+    }
+    console.log("disposing component", this.id);
+    this.send(new DisposeMessage());
+    const onDisposeHandlers = this.messageHandlers["onDispose"];
+    if (onDisposeHandlers) {
+      onDisposeHandlers.forEach((disposeHandler) => {
+        disposeHandler(null);
+      });
+    }
+    this.messageHandlers = {};
+    this.id += "_disposed";
+    this.isInitiated = false;
+  }
+};
+
+// src/common/MyopElementRef.ts
+var MyopElementRef = class {
+  constructor(myopId, htmlTagName, BoundingRect, offsetTop, offsetLeft) {
+    this.myopId = myopId;
+    this.htmlTagName = htmlTagName;
+    this.BoundingRect = BoundingRect;
+    this.offsetTop = offsetTop;
+    this.offsetLeft = offsetLeft;
+    __publicField(this, "type", "MyopElementRef");
+  }
+};
+
+// src/common/baseMessageHandler.ts
+var runExecutorCleanup = async (task) => {
+  if (typeof task === "function") {
+    task();
+  } else if (task instanceof Promise) {
+    const result = await task;
+    if (typeof result === "function") {
+      result();
+    }
+  }
+};
+var BaseMessageHandler = class {
+  //TODO : add dispose method
+  constructor(messageToHost) {
+    this.messageToHost = messageToHost;
+  }
+};
+var BaseContextMessageHandler = class extends BaseMessageHandler {
+  constructor(messageToHost, context) {
+    super(messageToHost);
+    this.messageToHost = messageToHost;
+    this.context = context;
+  }
+};
+
+// src/common/BaseMyopSDK.ts
+var HostedComponent = class {
+  //onMessageReceived: (msg: IMyopMessage) => void;
+  constructor(id, context) {
+    this.id = id;
+    this.context = context;
+    __publicField(this, "send", (message) => {
+    });
+  }
+};
+var BaseMyopSDK = class {
+  constructor() {
+    __publicField(this, "messageToHandleAfterInit", []);
+    __publicField(this, "components", {});
+    __publicField(this, "alwaysPassEnvelopesToHost", false);
+    __publicField(this, "messageCleanupCache", {});
+  }
+  handleIncomeMessages(event) {
+    const eventContent = event.data ? event.data : event.detail;
+    if (!eventContent || !eventContent.myop) {
+      return;
+    } else {
+      let message = eventContent;
+      if (message.direction !== MessageDirection.down) {
+        return;
+      }
+      if (message.messageType === MyopMessages.DisposeMessage) {
+        if (message.destination)
+          delete this.components[message.destination];
+        return;
+      }
+      if (message.messageType === MyopMessages.InitMessage) {
+        const newComponentId = message.content.id;
+        if (this.components[newComponentId]) {
+          return;
+        }
+        this.components[newComponentId] = new HostedComponent(newComponentId);
+        this.messageToHost(new InitResponse(newComponentId));
+        return;
+      }
+      if (message.messageType === MyopMessages.EnvelopedMessage) {
+        const envelopedMessage = message;
+        const innerMessage = envelopedMessage.message;
+        message = innerMessage;
+        if (this.alwaysPassEnvelopesToHost || this.components[message.destination]) {
+          const destinationComponent = myop.hostSDK.components.find((c) => c.id === innerMessage.destination);
+          if (destinationComponent) {
+            destinationComponent.send(innerMessage);
+            return;
+          }
+          const envelopedDestinationComponent = myop.hostSDK.components.find((c) => c.id === envelopedMessage.destination);
+          if (envelopedDestinationComponent) {
+            envelopedDestinationComponent.send(innerMessage);
+            return;
+          }
+        } else {
+          return;
+        }
+      }
+      if (message.messageType) {
+        if (message.messageType === MyopMessages.CleanupMessage) {
+          const typedMessage = message;
+          const cleanup = this.messageCleanupCache[typedMessage.cleanupForMessageId];
+          const cleanupMessage = new CleanupReplayMessage(!!cleanup);
+          cleanupMessage.destination = message.destination;
+          if (!!cleanup) {
+            delete this.messageCleanupCache[typedMessage.cleanupForMessageId];
+            runExecutorCleanup(cleanup).then(() => {
+              this.messageToHost(cleanupMessage, typedMessage);
+            }).catch(() => {
+            });
+          } else {
+            this.messageToHost(cleanupMessage, typedMessage);
+          }
+          return;
+        }
+        let actionHandlerFound = false;
+        this.supportedHandlers.forEach((handler) => {
+          if (handler.messageType === message.messageType) {
+            actionHandlerFound = true;
+            const cleanup = handler.executor(message);
+            if (message.cleanable && cleanup) {
+              this.messageCleanupCache[message.id] = cleanup;
+            }
+            if (cleanup && !message.cleanable) {
+              throw new Error("Cleanup handler generated for non-cleanable message. \nmessageType - ".concat(message.messageType, ", handler executor was - ").concat(handler.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 (!cleanup && message.cleanable) {
+              throw new Error("No cleanup handler generated for a cleanable message. \nmessageType - ".concat(message.messageType, ", handler executor was - ").concat(handler.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 (!actionHandlerFound) {
+        }
+      } else {
+        console.log("unsupported message type");
+      }
+    }
+  }
+};
+
+// src/common/index.ts
+var SkinLoaders = {
+  "IframeLoader": "IframeLoader",
+  "WebComponentLoader": "WebComponentLoader",
+  "HTMLLoader": "HTMLLoader",
+  "MinimizedLoader": "MinimizedLoader"
+};
+var ShadowRootModeType = {
+  "open": "open",
+  "closed": "closed",
+  "none": "none",
+  "localFrame": "localFrame"
+};
+var PropConfigBehaviorTypes = {
+  "message": "message",
+  "code": "code"
+};
+var RefBehaviorType = class {
+};
+__publicField(RefBehaviorType, "code", "code");
+__publicField(RefBehaviorType, "component", "component");
+var SkinSelectorTypes = {
+  "Segmented": "Segmented",
+  "Dedicated": "Dedicated",
+  /**
+   * This Selector Type is not yet supported but will be added in a future release.
+   * Please check the documentation for updates.
+   *
+   * @type {string}
+   */
+  "Default": "Default"
+};
+var ExperienceTypes = {
+  "Segment": "Segment",
+  "Promo": "Promo",
+  "AB": "AB"
+};
+var RootRef = class {
+  constructor(container, shadowRoot) {
+    this.container = container;
+    this.shadowRoot = shadowRoot;
+    __publicField(this, "getRootDiv", () => {
+      return (this.shadowRoot || this.container).querySelector("div");
+    });
+    __publicField(this, "getRoot", () => {
+      return this.shadowRoot || this.container;
+    });
+  }
+};
+
+// src/common/utils/serialization.ts
+var isPrimitive = (value) => {
+  return value !== Object(value);
+};
+var isFunction = (value) => {
+  return typeof value === "function";
+};
+var containsPrimitivesOnly = (obj) => {
+  if (isPrimitive(obj)) {
+    return true;
+  }
+  if (isFunction(obj)) {
+    return false;
+  }
+  if (Object.getPrototypeOf(obj)) {
+    return false;
+  }
+  for (const key in obj) {
+    const value = obj[key];
+    if (typeof value === "object") {
+      if (!containsPrimitivesOnly(value)) {
+        return false;
+      }
+    } else if (isPrimitive(value)) {
+      continue;
+    } else {
+      return false;
+    }
+  }
+  return true;
+};
+var makeSerializable = (obj, skeleton = {}, includeFalsyKeys = true, seen3 = /* @__PURE__ */ new WeakMap()) => {
+  if (isPrimitive(obj)) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    if (seen3.has(obj)) {
+      return seen3.get(obj);
+    }
+    const serializableArray = [];
+    seen3.set(obj, serializableArray);
+    for (let index = 0; index < obj.length; index++) {
+      const element = obj[index];
+      serializableArray[index] = makeSerializable(element, skeleton, includeFalsyKeys, seen3);
+    }
+    return serializableArray;
+  }
+  if (obj !== null && typeof obj === "object") {
+    if (seen3.has(obj)) {
+      return seen3.get(obj);
+    }
+    const serializableObject = {};
+    seen3.set(obj, serializableObject);
+    for (const key in obj) {
+      const keyInSkeleton = typeof skeleton == "boolean" ? skeleton : skeleton[key];
+      if (keyInSkeleton) {
+        if (keyInSkeleton === true) {
+          if (includeFalsyKeys ? obj[key] !== void 0 : obj[key]) {
+            serializableObject[key] = makeSerializable(obj[key], true, includeFalsyKeys, seen3);
+          }
+        } else if (typeof keyInSkeleton === "object") {
+          serializableObject[key] = makeSerializable(obj[key], keyInSkeleton, includeFalsyKeys, seen3);
+        }
+      }
+    }
+    return serializableObject;
+  }
+  return {};
+};
+
+// src/host/logMessages.ts
+var Errors = {
+  notSerializableRefCall: (prop, arg) => {
+    throw new Error("\nThe input provided to '".concat(prop.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(arg, " \n~~~~~~~~\nas not serializable.\n\nTo resolve this issue, please ensure that all inputs passed to '").concat(prop.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"));
+  }
+};
+
+// src/host/components/myopRefComponent.ts
+var MyopRefComponent = class extends BaseMyopComponent {
+  constructor(componentDefinition, parent, options) {
+    super(componentDefinition, parent.container, options);
+    this.componentDefinition = componentDefinition;
+    this.parent = parent;
+    __publicField(this, "send", (message) => {
+      const handler = message.handler;
+      const cleanupHandler = super.send(message);
+      this.parent.send(new EnvelopedMessage(this.id, message));
+      message.handler = handler;
+      return cleanupHandler;
+    });
+    __publicField(this, "dispose", () => {
+      if (this.isInitiated)
+        this.send(new ExecuteComponentMethod("dispose"));
+      super.dispose();
+    });
+  }
+  hide() {
+    this.send(new ExecuteComponentMethod("hide"));
+  }
+  show() {
+    this.send(new ExecuteComponentMethod("show"));
+  }
+  inspect() {
+    return this.send(new ExecuteComponentMethod("inspect"));
+  }
+  setHeightBasedOnDocumentElement() {
+    this.send(new ExecuteComponentMethod("setHeightBasedOnDocumentElement"));
+  }
+  setHeightBasedOnScrollHeight() {
+    this.send(new ExecuteComponentMethod("setHeightBasedOnScrollHeight"));
+  }
+  onMessageReceived(incomeMessage) {
+    return super.onMessageReceived(incomeMessage);
+  }
+};
+
+// src/host/componentCore.ts
+var createDebugTitle = (text, top, componentDefinitionConfig) => {
+  const titleEl = document.createElement("a");
+  titleEl.textContent = text;
+  titleEl.style.position = "relative";
+  titleEl.style.padding = "0 5px";
+  titleEl.style.fontSize = "14px";
+  titleEl.style["top"] = "0";
+  titleEl.style.top = "".concat(top, "px");
+  titleEl.style.transform = "translateX(-50%)";
+  titleEl.target = "_blank";
+  titleEl.href = "https://dashboard.myop.dev/dashboard/component/".concat(componentDefinitionConfig.id);
+  return titleEl;
+};
+var setDebugStyle = (id, type, top, container, componentElement, componentDefinitionConfig) => {
+  const topText = createDebugTitle("".concat(componentDefinitionConfig.name, " : ").concat(type), top, componentDefinitionConfig);
+  container.insertBefore(topText, componentElement);
+  componentElement.style.border = "1px solid #007BFF";
+  componentElement.style.display = "block";
+  return () => {
+    componentElement.style.border = "unset";
+    container.removeChild(topText);
+  };
+};
+var reportError = (propConfig, propName, component) => {
+  if (!propConfig) {
+    console.error(
+      // throw new 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(propName, "\n") + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/".concat(component.componentDefinition.id, " or consult the developer guide.")
+    );
+    return true;
+  }
+  return false;
+};
+var reportUnsupported = (propConfig, propName, component) => {
+  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(propName, "\n") + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "For more information, refer to the component page https://dashboard.myop.dev/dashboard/component/".concat(component.componentDefinition.id, " or consult the developer guide.")
+  );
+};
+var connectProps = (component, propsConfig, selectedSkin) => {
+  const propsMap = propsConfig.reduce((previousValue, currentValue) => {
+    return __spreadProps(__spreadValues({}, previousValue), {
+      [currentValue.name]: __spreadValues({}, currentValue)
+    });
+  }, {});
+  const propsHandler = {
+    get: (_, prop) => {
+      const propConfig = propsMap[prop];
+      if (reportError(propConfig, prop, component)) {
+        return false;
+      }
+      if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
+          const typedLoader = selectedSkin.loader;
+          if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
+            const typedPropBehavior = propConfig.behavior;
+            return component.element.contentWindow[typedPropBehavior.remap || prop];
+          }
+        }
+        reportUnsupported(propConfig, prop, component);
+        return false;
+      }
+      if (propConfig.mode === "output") {
+        return new Promise((resolve) => {
+          const messageParams = [];
+          if (propConfig.behavior.ref) {
+            messageParams.push(Ref.create(propConfig.behavior.ref));
+          }
+          messageParams.push((data) => {
+            resolve(data);
+          });
+          if (propConfig.behavior.params) {
+            messageParams.push(...propConfig.behavior.params);
+          }
+          const messageCtor = messages_exports[propConfig.behavior.message];
+          component.send(new messageCtor(...messageParams));
+        });
+      }
+      return null;
+    },
+    set: (_, prop, value) => {
+      const propConfig = propsMap[prop];
+      if (reportError(propConfig, prop, component)) {
+        return false;
+      }
+      if (propConfig.behavior.type === PropConfigBehaviorTypes.code) {
+        if (selectedSkin.loader.type === SkinLoaders.HTMLLoader) {
+          const typedLoader = selectedSkin.loader;
+          if (typedLoader.shadowRootMode === ShadowRootModeType.localFrame) {
+            const typedPropBehavior = propConfig.behavior;
+            component.element.contentWindow[typedPropBehavior.remap || prop] = value;
+            return true;
+          }
+        }
+        reportUnsupported(propConfig, prop, component);
+        return false;
+      } else {
+        if (propConfig.mode === "input") {
+          if (propConfig.behavior.type === "message") {
+            const messageParams = [];
+            if (propConfig.behavior.ref) {
+              messageParams.push(Ref.create(propConfig.behavior.ref));
+            }
+            messageParams.push(value);
+            if (propConfig.behavior.params) {
+              messageParams.push(...propConfig.behavior.params);
+            }
+            const messageCtor = messages_exports[propConfig.behavior.message];
+            component.send(new messageCtor(...messageParams));
+            return true;
+          } else {
+            throw new Error(
+              "Error: Unsupported Behavior\n\nThe 'behavior' field provided is not supported.\n" + "Component: ".concat(component.componentDefinition.name, ", ID: ").concat(component.componentDefinition.id, "\n\n") + "Prop Name: ".concat(prop, "\n") + "Behavior Field: ".concat(propConfig.behavior.type, "\n\n") + "Check the documentation for valid behavior options."
+            );
+            return false;
+          }
+        }
+      }
+      return false;
+    }
+  };
+  component.props = {};
+  component.props = new Proxy(component.props, propsHandler);
+  return component;
+};
+var createRefProxy = (target, component) => {
+  return new Proxy(target, {
+    get(target2, prop) {
+      if (target2[prop]) {
+        return target2[prop];
+      }
+      const getterFunction = (...args) => {
+        return new Promise((resolve) => {
+          args.forEach((arg) => {
+            if (!containsPrimitivesOnly(arg)) {
+              Errors.notSerializableRefCall(prop, arg);
+            }
+          });
+          component.send(new CustomRefMessage(
+            ({ ref, propName, functionArgs, makeSerializable: makeSerializable2 }) => {
+              if (ref) {
+                const value = ref[propName];
+                if (typeof value === "function") {
+                  return makeSerializable2(ref[propName](...functionArgs), true);
+                } else {
+                  return makeSerializable2(value, true);
+                }
+              }
+              return null;
+            },
+            {
+              //TODO : turn it to config
+              elementId: target2.refConfig.selector,
+              propName: prop,
+              functionArgs: args
+            },
+            (msg) => {
+              resolve(msg.content);
+            }
+          ));
+        });
+      };
+      return getterFunction;
+    },
+    set(target2, prop, value) {
+      component.send(new CustomRefMessage(
+        ({ ref, propName, propValue }) => {
+          if (ref)
+            ref[propName] = propValue;
+        },
+        {
+          //TODO : fix that
+          elementId: target2.refConfig.selector,
+          propValue: value,
+          propName: prop
+        },
+        (msg) => {
+        }
+      ));
+      return true;
+    }
+  });
+};
+var createRefComponent = async (ref, componentConfig, components, options) => {
+  const component = ref.component;
+  if (!component)
+    throw new Error("cant createRefComponent with detached ref");
+  return new Promise(async (resolve, reject) => {
+    const refComponent = new MyopRefComponent(componentConfig.type, component, options);
+    components.push(refComponent);
+    await component.initiated();
+    const timeout = setTimeout(() => {
+      reject("timeout");
+    }, 5e3);
+    component.send(new CreateRefComponentMessage(
+      ref.refConfig,
+      componentConfig,
+      __spreadProps(__spreadValues({}, options ? options : {}), {
+        id: refComponent.id,
+        _hasParent: true
+      }),
+      async (message) => {
+        clearTimeout(timeout);
+        if (message.failed) {
+          reject("CreateRefComponentMessage failed");
+          return;
+        }
+        const implementationComponent = components.find((c) => c.id == refComponent.id);
+        if (implementationComponent !== refComponent) {
+          component.refs[ref.refConfig.name] = implementationComponent;
+          resolve(implementationComponent);
+          return;
+        } else {
+          refComponent.setInitiated();
+          component.refs[ref.refConfig.name] = refComponent;
+        }
+        message.nestedRefs.forEach((nestedRefConfig) => {
+          const nestedComponentDefinition = componentConfig.instance.resolvedNestedComponents.find((c) => c.type.id === nestedRefConfig.componentDefinitionId).type;
+          const nestedComponent = new MyopRefComponent(nestedComponentDefinition, refComponent);
+          nestedComponent.setInitiated();
+          refComponent.refs[nestedRefConfig.refName] = nestedComponent;
+          components.push(nestedComponent);
+        });
+        try {
+          await connectRefs(refComponent, componentConfig, components, true);
+          if (component.setHeightBasedOnScrollHeight)
+            component.setHeightBasedOnScrollHeight();
+          resolve(refComponent);
+        } catch (e) {
+          reject(e);
+        }
+      }
+    ));
+  });
+};
+var connectRefs = async (component, componentConfig, components, withoutRefComponents = false) => {
+  if (!component.refs)
+    component.refs = {};
+  const waitFor = Object.values(component.componentDefinition.refs).map((ref) => {
+    return new Promise(async (resolve, reject) => {
+      var _a;
+      if (ref.behavior.type == RefBehaviorType.component) {
+        if (withoutRefComponents) {
+          resolve();
+          return;
+        }
+        let refComponentId = ref.behavior.componentId;
+        if (!refComponentId)
+          refComponentId = ref.behavior.instance.componentId;
+        const nestedComponentConfig = (_a = componentConfig.instance.resolvedNestedComponents) == null ? void 0 : _a.find((nestedComponent) => nestedComponent.type.id === refComponentId);
+        if (!nestedComponentConfig) {
+          throw new Error("componentConfig provided without nestedComponentConfig check the config object");
+          return;
+        }
+        const _ref = Ref.create("", ref, component);
+        try {
+          const nestedComponent = await createRefComponent(_ref, nestedComponentConfig, components);
+          component.refs[ref.name] = nestedComponent;
+          resolve();
+        } catch (e) {
+          reject(e);
+        }
+      } else {
+        try {
+          const __nonProxied = Ref.create("", ref, component);
+          component.refs[ref.name] = createRefProxy(__nonProxied, component);
+          resolve();
+        } catch (e) {
+        }
+      }
+    });
+  });
+  try {
+    await Promise.all(waitFor);
+  } catch (e) {
+    throw e;
+  }
+};
+
+// src/host/components/myopIframeComponent.ts
+var MyopIframeComponent = class extends BaseMyopComponent {
+  constructor(componentConfig, skin, container, IframeElement, options) {
+    super(componentConfig, container, options);
+    this.componentConfig = componentConfig;
+    this.container = container;
+    this.IframeElement = IframeElement;
+    __publicField(this, "cleanupInspect");
+    __publicField(this, "setHeightBasedOnDocumentElement", () => {
+      const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
+        return window.document.documentElement.scrollHeight;
+      }, (ret) => {
+        this.IframeElement.style.height = "".concat(ret.content, "px");
+        cleanupHandler();
+      }));
+    });
+    __publicField(this, "observeSizeBasedOnDocumentElement", () => {
+      const cleanupHandler = this.send(new ExecuteScriptMessage(({ send }) => {
+        const { height, width } = document.documentElement.getBoundingClientRect();
+        const observer = new ResizeObserver(() => {
+          const { height: height2, width: width2 } = document.documentElement.getBoundingClientRect();
+          send({ height: height2, width: width2 });
+        });
+        observer.observe(document.documentElement);
+        observer.observe(document.body);
+        return { height, width };
+      }, (ret) => {
+        this.IframeElement.style.width = "".concat(ret.content.width, "px");
+        this.IframeElement.style.height = "".concat(ret.content.height, "px");
+      }));
+      return cleanupHandler;
+    });
+    __publicField(this, "setSizeBasedOnDocumentElement", () => {
+      const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
+        const { height, width } = document.documentElement.getBoundingClientRect();
+        return { height, width };
+      }, (ret) => {
+        this.IframeElement.style.width = "".concat(ret.content.width, "px");
+        this.IframeElement.style.height = "".concat(ret.content.height, "px");
+        cleanupHandler();
+      }));
+    });
+    __publicField(this, "setHeightBasedOnScrollHeight", () => {
+      const cleanupHandler = this.send(new ExecuteScriptMessage(() => {
+        const noOp = () => {
+          return 0;
+        };
+        let x = noOp();
+        x++;
+        x--;
+        return Math.max(
+          Math.max(
+            window.document.body.clientHeight,
+            window.document.body.scrollHeight
+          ),
+          window.document.body.offsetHeight
+        ) + x + "px";
+      }, (ret) => {
+        this.IframeElement.style.height = ret.content;
+        cleanupHandler();
+      }));
+    });
+    __publicField(this, "send", (message) => {
+      var _a, _b;
+      let message_ = __spreadValues({}, message);
+      if (message_.messageType === MyopMessages.ExecuteComponentMethod) {
+        const typedMessage = message_;
+        this[typedMessage.method]();
+        return () => {
+        };
+      }
+      message_.direction = MessageDirection.down;
+      const cleanupHandler = super.send(message_);
+      (_b = (_a = this.IframeElement) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage(message_, "*");
+      return cleanupHandler;
+    });
+    __publicField(this, "dispose", () => {
+      if (this.cleanupInspect)
+        this.cleanupInspect();
+      super.dispose();
+      this.IframeElement.parentNode.removeChild(this.IframeElement);
+    });
+    if (skin.loader.autoHeight) {
+      this.initiated().then(() => {
+        this.setHeightBasedOnScrollHeight();
+      });
+    }
+    this.element = this.IframeElement;
+  }
+  inspect() {
+    if (this.cleanupInspect) {
+      return this.cleanupInspect;
+    }
+    this.cleanupInspect = setDebugStyle(this.id, "MyopIframeComponent", 10, this.container, this.IframeElement, this.componentDefinition);
+    return () => {
+      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(incomeMessage) {
+    if (incomeMessage.messageType === MyopMessages.In.MutationObserverMessage || incomeMessage.messageType === MyopMessages.In.ResizeObserverMessage) {
+      this.setHeightBasedOnScrollHeight();
+      return true;
+    }
+    return super.onMessageReceived(incomeMessage);
+  }
+};
+
+// src/host/loaders/IMyopLoader.ts
+var BaseMyopLoader = class {
+  constructor() {
+    __publicField(this, "appendChild", (container, element, options) => {
+      var _a;
+      if (options == null ? void 0 : options.relative) {
+        if (options.relative.direction === "before") {
+          return container.insertBefore(element, options.relative.child);
+        }
+        if (options.relative.direction === "after") {
+          const nextSibling = (_a = options.relative.child) == null ? void 0 : _a.nextSibling;
+          return container.insertBefore(element, nextSibling ? nextSibling : null);
+        }
+      } else {
+        return container.appendChild(element);
+      }
+    });
+  }
+};
+
+// src/host/loaders/iframeLoader.ts
+var addQueryParam = (url, param, value) => {
+  const urlObj = new URL(url);
+  urlObj.searchParams.append(param, value);
+  return urlObj.toString();
+};
+var MyopIframeLoader = class extends BaseMyopLoader {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", SkinLoaders.IframeLoader);
+    // @ts-ignore
+    __publicField(this, "load", async (componentDefinition, skin, container, options) => {
+      let IframeElement;
+      const typedLoaderConfig = skin.loader;
+      if ((container == null ? void 0 : container.nodeName) === "IFRAME") {
+        console.log("needs to load into an exsisting Iframe...", typedLoaderConfig.url, container);
+        IframeElement = container;
+        IframeElement.src = typedLoaderConfig.url;
+      } else {
+        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 = 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));
+      }
+      return new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
+    });
+  }
+};
+
+// src/webcomponent/consts.ts
+var myopWebcomponentConsts = {
+  webcomponent_message_key: "myop_webcomponent_message"
+};
+
+// src/host/components/myopWebcomponent.ts
+var MyopWebComponent = class extends BaseMyopComponent {
+  constructor(componentDefinition, skin, container, customElement, options) {
+    super(componentDefinition, container, options);
+    this.container = container;
+    this.customElement = customElement;
+    __publicField(this, "cleanupInspect", () => {
+    });
+    __publicField(this, "send", (message) => {
+      let message_ = __spreadValues({}, message);
+      const cleanupHandler = super.send(message_);
+      const msg = new CustomEvent(myopWebcomponentConsts.webcomponent_message_key, {
+        // @ts-ignore
+        detail: message_
+        // bubbles: true,
+        // cancelable: false,
+        // composed: true
+      });
+      try {
+        this.customElement.dispatchEvent(msg);
+      } catch (e) {
+        console.log("error while trying to dispatchEvent", e);
+      }
+      return cleanupHandler;
+    });
+    __publicField(this, "dispose", () => {
+      var _a;
+      super.dispose();
+      (_a = this.customElement.parentNode) == null ? void 0 : _a.removeChild(this.customElement);
+    });
+    this.element = customElement;
+  }
+  inspect() {
+    this.cleanupInspect = setDebugStyle(this.id, "MyopWebComponent", 0, this.container, this.customElement, this.componentDefinition);
+    return 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 = "";
+  }
+};
+
+// src/host/loaders/webcomponentLoader.ts
+var seen = {};
+var WebcomponentLoader = class extends BaseMyopLoader {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", SkinLoaders.WebComponentLoader);
+    __publicField(this, "load", async (componentDefinition, skin, container, options) => {
+      const loaderConfig = skin.loader;
+      if (!seen[loaderConfig.url]) {
+        seen[loaderConfig.url] = new Promise((resolve, reject) => {
+          const webComponentLoadUrl = loaderConfig.url;
+          const script = document.createElement("script");
+          script.type = "module";
+          script.src = webComponentLoadUrl;
+          script.onload = () => {
+            resolve();
+          };
+          script.onerror = () => {
+            reject();
+          };
+          document.head.appendChild(script);
+        });
+      } else {
+        console.log("Module alreday loaded or in loading process");
+      }
+      await seen[loaderConfig.url];
+      await wait(1);
+      let domId = "myop-comp-".concat(uuidv4());
+      const element = document.createElement(loaderConfig.tag);
+      if (!container.querySelector('[id^="myop-comp-"]'))
+        container.innerHTML = "";
+      element.id = domId;
+      if (options == null ? void 0 : options.hidden) {
+        element.style.opacity = "0";
+        element.style.position = "absolute";
+        element.style.height = "0";
+        element.style.width = "0";
+        element.style.pointerEvents = "none";
+        element.style.visibility = "hidden";
+      }
+      if (options == null ? void 0 : options._environment) {
+        element._myopEnvironment = options == null ? void 0 : options._environment;
+      }
+      this.appendChild(container, element, options);
+      return new MyopWebComponent(componentDefinition, skin, container, element, options);
+    });
+  }
+};
+
+// version:myop-sdk-version
+var myop_sdk_version_default = "0.2.1";
+
+// src/webcomponent/messageHandlers/BaseWebComponentMessageHandler.ts
+var BaseWebComponentMessageHandler = class extends BaseContextMessageHandler {
+  constructor(messageToHost, context) {
+    super(messageToHost);
+    this.context = context;
+    __publicField(this, "executor", (event) => {
+      if (event.destination) {
+        const destination = event.destination;
+        if (this.context[destination].context) {
+          const _messageToHost = (message, replayTo) => {
+            this.messageToHost(__spreadProps(__spreadValues({}, message), {
+              source: event.destination ? event.destination : event.source,
+              destination: event.source ? event.source : event.destination
+            }), replayTo);
+          };
+          return this.innerExecutor(event, this.context[destination].context, _messageToHost);
+        } else {
+          debugger;
+        }
+      } else {
+        debugger;
+      }
+    });
+  }
+};
+
+// src/consts.ts
+var myopAttributes = {
+  id: "myop-id"
+};
+
+// src/common/messageHandlers/helpers.ts
+var getElementsByRef = (ref, el) => {
+  return el.querySelectorAll("[".concat(myopAttributes.id, "='").concat(ref.refConfig.selector, "']"));
+};
+
+// src/webcomponent/messageHandlers/bindOnClickHandler.ts
+var BindOnClickHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.BindClickMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      const cleanupTasks = [];
+      items.forEach((item) => {
+        const handler = () => {
+          messageToHost(new ClickReplayMessage(event.handlerUniqueId));
+        };
+        item.addEventListener("click", handler);
+        cleanupTasks.push(() => {
+          item.removeEventListener("click", handler);
+        });
+      });
+      return () => {
+        cleanupTasks.forEach((task) => task());
+      };
+    });
+  }
+};
+
+// src/webcomponent/messageHandlers/changeTextHandler.ts
+var ChangeTextHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.ChangeTextMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        item.textContent = event.content;
+      });
+    });
+  }
+};
+
+// src/webcomponent/shadowRootRef.ts
+var ShadowRootRef = class extends RootRef {
+  constructor(container, shadowRoot) {
+    super(container, shadowRoot);
+    this.container = container;
+    this.shadowRoot = shadowRoot;
+  }
+};
+
+// src/webcomponent/messageHandlers/DetectMyopRefsMessageHandler.ts
+var DetectMyopRefsMessageHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const allMyopItems = shadowRootRef.shadowRoot.querySelectorAll("[".concat(myopAttributes.id, "]"));
+      let myopRefs = [];
+      allMyopItems.forEach((item) => {
+        const myopId = item.getAttribute(myopAttributes.id);
+        if (myopId) {
+          myopRefs.push(new MyopElementRef(myopId, item.tagName, item.getBoundingClientRect(), item.offsetTop, item.offsetLeft));
+        }
+      });
+      this.messageToHost(new DetectedMyopRefsMessage(event.handlerUniqueId, myopRefs));
+    });
+    __publicField(this, "messageType", MyopMessages.DetectMyopRefsMessage);
+  }
+};
+
+// src/webcomponent/messageHandlers/setAttributeHandler.ts
+var setAttributeHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.SetAttributeMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        item.setAttribute(event.name, event.value);
+      });
+    });
+  }
+};
+
+// src/webcomponent/messageHandlers/addEventListenerHandler.ts
+var AddEventListenerHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.AddEventListenerMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      const cleanupTasks = [];
+      items.forEach((item) => {
+        const handler = (e) => {
+          messageToHost(new EventListenerCallbackMessage(event.handlerUniqueId, makeSerializable(e, event.serializableSkeleton)));
+        };
+        item.addEventListener(event.type, handler);
+        cleanupTasks.push(() => {
+          item.removeEventListener(event.type, handler);
+        });
+      });
+      return () => {
+        cleanupTasks.forEach((task) => task());
+      };
+    });
+  }
+};
+
+// src/webcomponent/messageHandlers/CreateRefComponentMessageHandler.ts
+var CreateRefComponentMessageHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.CreateRefComponentMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const createRef = async () => {
+        const allItems = shadowRootRef.shadowRoot.querySelectorAll("[".concat(myopAttributes.id, "='").concat(event.refConfig.selector, "']"));
+        if (allItems.length === 1) {
+          const hostSDK2 = HostSDK.Instance();
+          const refComponent = hostSDK2.components.find((c) => c.id === event.options.id);
+          if (refComponent) {
+            refComponent.dispose();
+          } else {
+          }
+          const index = hostSDK2.components.indexOf(refComponent);
+          if (index !== -1) {
+            hostSDK2.components.splice(index, 1);
+          } else {
+          }
+          const implementationComponent = await hostSDK2.loadComponent(
+            event.nestedComponentConfig,
+            allItems.item(0),
+            event.options
+          );
+          const nestedRefConfig = [];
+          Object.keys(implementationComponent.refs).forEach((refName) => {
+            let ref = implementationComponent.refs[refName];
+            ref = ref.__nonProxied || ref;
+            if (ref.componentDefinition) {
+              nestedRefConfig.push({
+                refName,
+                componentDefinitionId: ref.componentDefinition.id
+              });
+            }
+          });
+          messageToHost(new RefComponentCreatedMessage(event.handlerUniqueId, nestedRefConfig));
+        } else {
+          console.error("CreateRefComponentMessageHandler - DOM element not found");
+          this.messageToHost(new RefComponentCreatedMessage(event.handlerUniqueId, [], true));
+          debugger;
+        }
+      };
+      createRef().then();
+    });
+  }
+};
+
+// src/common/messageHandlers/executeScriptHandler.ts
+var ExecuteScriptHandlerExecutor = (event, replier, rootRef) => {
+  const __scriptInputs = event.scriptInputs ? event.scriptInputs : {};
+  __scriptInputs.makeSerializable = makeSerializable;
+  __scriptInputs.send = replier;
+  __scriptInputs.rootRef = rootRef;
+  __scriptInputs.__scriptInputs = __scriptInputs;
+  const dynamicFunction = new Function("return (".concat(event.script, ")(...arguments)"));
+  const ret = dynamicFunction(__scriptInputs);
+  replier(ret);
+};
+
+// src/webcomponent/messageHandlers/executeScriptHandler.ts
+var ExecuteScriptHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.ExecuteScriptMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const replier = (data) => {
+        messageToHost(new ExecuteScriptReplyMessage(event.handlerUniqueId, data));
+      };
+      ExecuteScriptHandlerExecutor(event, replier, shadowRootRef);
+    });
+  }
+};
+
+// src/webcomponent/messageHandlers/GetElementValueHandler.ts
+var getInputValue = (element) => {
+  if (!element) return null;
+  if (element.tagName === "FORM") {
+    const formData = new FormData(element);
+    const dataObject = {
+      formData: {},
+      unmappedData: []
+    };
+    const elements = element.querySelectorAll("input, select, textarea");
+    let autoNameIndexer = -1;
+    elements.forEach((element2) => {
+      if (typeof element2.value === "string") {
+        const myopId = element2.getAttribute(myopAttributes.id);
+        let key = element2.getAttribute("name");
+        const nodeData = {
+          id: element2.id,
+          name: key,
+          value: getInputValue(element2),
+          required: element2.required,
+          validity: makeSerializable(element2.validity, true),
+          myopId
+        };
+        if (!key) {
+          dataObject.unmappedData.push(nodeData);
+        } else {
+          if (dataObject.formData[key]) {
+            if (dataObject.formData[key].value) {
+              dataObject.unmappedData.push(nodeData);
+            } else {
+              dataObject.unmappedData.push(dataObject.formData[key]);
+              dataObject.formData[key] = nodeData;
+            }
+          } else {
+            dataObject.formData[key] = nodeData;
+          }
+        }
+      }
+    });
+    return dataObject;
+  }
+  if (element.type === "checkbox" || element.type === "radio") {
+    return element.checked ? element.value : null;
+  }
+  if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
+    return element.value;
+  }
+  if (element.tagName === "SELECT") {
+    return element.value;
+  }
+  if (element.isContentEditable) {
+    return element.innerText || element.textContent;
+  }
+  return null;
+};
+var GetElementValueHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.GetElementValueMessage);
+    __publicField(this, "innerExecutor", (event, shadowRootRef, messageToHost) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        messageToHost(new ElementValueReplayMessage(getInputValue(item)), event);
+      });
+    });
+  }
+};
+
+// src/webcomponent/messageHandlers/setInnerHtmlHandler.ts
+var SetInnerHtmlHandler = class extends BaseWebComponentMessageHandler {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "messageType", MyopMessages.SetInnerHtml);
+    __publicField(this, "innerExecutor", (event, shadowRootRef) => {
+      const items = getElementsByRef(event.ref, shadowRootRef.shadowRoot);
+      items.forEach((item) => {
+        item.innerHTML = event.content;
+      });
+    });
+  }
+};
+
+// src/webcomponent/WebComponentSDK.ts
+var WebComponentSDK = class extends BaseMyopSDK {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "alwaysPassEnvelopesToHost", true);
+    //when new web component created.
+    __publicField(this, "connectedCallback", (container, shadow) => {
+      container.addEventListener(myopWebcomponentConsts.webcomponent_message_key, (e) => {
+        const eventContent = e.data ? e.data : e.detail;
+        if (!eventContent || !eventContent.myop) {
+          debugger;
+          throw new Error("recvied webcomponent_message with wrong type");
+        } else {
+          const message = eventContent;
+          this.handleIncomeMessages(e);
+          if (message.messageType === MyopMessages.InitMessage) {
+            const newComponentId = message.content.id;
+            this.components[newComponentId].context = new ShadowRootRef(container, shadow);
+          }
+        }
+      });
+      setTimeout(() => {
+        this.messageToHost(new InitRequest());
+      }, 1);
+    });
+    __publicField(this, "messageToHost", (message, replayTo) => {
+      message.direction = MessageDirection.up;
+      if (!message.replayToHandler && (replayTo == null ? void 0 : replayTo.handlerUniqueId))
+        message.replayToHandler = replayTo.handlerUniqueId;
+      window.myop.hostSDK.send(message);
+    });
+    __publicField(this, "supportedHandlers", [
+      new ChangeTextHandler(this.messageToHost, this.components),
+      new SetInnerHtmlHandler(this.messageToHost, this.components),
+      new BindOnClickHandler(this.messageToHost, this.components),
+      new DetectMyopRefsMessageHandler(this.messageToHost, this.components),
+      new setAttributeHandler(this.messageToHost, this.components),
+      new AddEventListenerHandler(this.messageToHost, this.components),
+      new ExecuteScriptHandler(this.messageToHost, this.components),
+      new GetElementValueHandler(this.messageToHost, this.components),
+      //
+      new CreateRefComponentMessageHandler(this.messageToHost, this.components)
+    ]);
+    __publicField(this, "init", () => {
+    });
+  }
+};
+defineDynamicImport("WebComponentSDK", WebComponentSDK);
+
+// src/host/loaders/HTMLComponentLoader.ts
+var seen2 = [];
+var sdk;
+var getInitiatedSdk = async () => {
+  if (!sdk) {
+    sdk = new WebComponentSDK();
+    sdk.init();
+  }
+  return sdk;
+};
+function createHTMLElementConstructor(htmlString, ShadowRootMode) {
+  return class extends HTMLElement {
+    connectedCallback() {
+      const mode = ShadowRootMode === ShadowRootModeType.open ? "open" : "closed";
+      const shadow = this.attachShadow({ mode });
+      getInitiatedSdk().then((sdk2) => {
+        sdk2.connectedCallback(this, shadow);
+        shadow.innerHTML = htmlString;
+      });
+    }
+  };
+}
+var createCustomWebComponent = (componentName, html, ShadowRootMode) => {
+  customElements.define(componentName, createHTMLElementConstructor(html, ShadowRootMode));
+  console.log("define('".concat(componentName, "') was called, web component ready to use"));
+};
+var toWebComponentName = (str) => {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/(\d+)/g, "-$1").toLowerCase();
+};
+var toCustomElementName = (name) => {
+  name = toWebComponentName(name);
+  return name.replace(/_/g, "-");
+};
+var HTMLComponentLoader = class extends BaseMyopLoader {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "type", SkinLoaders.HTMLLoader);
+    __publicField(this, "load", async (componentDefinition, skin, container, options) => {
+      const loaderConfig = skin.loader;
+      let domId = "myop-comp-".concat(uuidv4());
+      let element;
+      if (loaderConfig.shadowRootMode === ShadowRootModeType.localFrame) {
+        const uniqId = uuidv4();
+        const domId2 = "myop-comp-".concat(uniqId);
+        let IframeElement = document.createElement("iframe");
+        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                   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;
+        if (options == null ? void 0 : options._inspection) {
+          const parser = new DOMParser();
+          const _doc = parser.parseFromString(loaderConfig.HTML, "text/html");
+          const myop_preview_script = _doc.getElementById("myop_preview");
+          myop_preview_script == null ? void 0 : myop_preview_script.removeAttribute("type");
+          const temp = _doc.implementation.createHTMLDocument();
+          temp.body.innerHTML = "<script>\n                        const beforeKeysWindow = new Set(Object.keys(window));\n                        window.myopState = {\n                            beforeKeysWindow,\n                        };\n                <\/script>";
+          const node = temp.body.firstChild;
+          if (node && _doc.head) {
+            _doc.head.insertBefore(_doc.importNode(node, true), _doc.head.firstChild);
+          }
+          HTML2Render = _doc.documentElement.outerHTML;
+        }
+        doc.writeln(HTML2Render);
+        doc.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>'));
+        doc.close();
+        const comp = new MyopIframeComponent(componentDefinition, skin, container, IframeElement, options);
+        if (loaderConfig.autoHeight) {
+          IframeElement.onload = () => {
+            comp.observeSizeBasedOnDocumentElement();
+          };
+        }
+        return comp;
+      }
+      if (loaderConfig.shadowRootMode === ShadowRootModeType.none) {
+        const template = document.createElement("template");
+        template.innerHTML = loaderConfig.HTML;
+        element = template.content.firstElementChild;
+        getInitiatedSdk().then((sdk2) => {
+          sdk2.connectedCallback(element, element);
+        });
+      } else {
+        const customElementName = toCustomElementName(componentDefinition.name + skin.id);
+        if (!seen2.includes(customElementName)) {
+          createCustomWebComponent(customElementName, loaderConfig.HTML, loaderConfig.shadowRootMode);
+          seen2.push(customElementName);
+        }
+        element = document.createElement(customElementName);
+      }
+      if (!container.querySelector('[id^="myop-comp-"]'))
+        container.innerHTML = "";
+      element.id = domId;
+      if (options == null ? void 0 : options.hidden) {
+        element.style.opacity = "0";
+        element.style.position = "absolute";
+        element.style.height = "0";
+        element.style.width = "0";
+        element.style.pointerEvents = "none";
+        element.style.visibility = "hidden";
+      }
+      this.appendChild(container, element, options);
+      return new MyopWebComponent(componentDefinition, skin, container, element, options);
+    });
+  }
+};
+
+// src/host/myopOverride.ts
+var checkMyopOverride = async (componentConfig) => {
+  try {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    const myopOverride = params.get("myopOverride");
+    if (myopOverride) {
+      const [source, ...uuids] = decompressUUIDs(myopOverride);
+      switch (source) {
+        case "component":
+          {
+            const [componentId, skinId] = uuids;
+            const componentToOverride = await CloudRepository.Main.fetchComponent(componentId);
+            if (componentToOverride) {
+              const skin = componentToOverride.type.skins.find((skin2) => skin2.id === skinId);
+              if (skin) {
+                componentToOverride.instance.skinSelector = {
+                  type: SkinSelectorTypes.Dedicated,
+                  skin: {
+                    id: skinId
+                  }
+                };
+                return componentToOverride;
+              }
+            }
+          }
+          break;
+        //    case 'flow': {
+        default:
+          {
+            const [flowId, experimentId] = decompressUUIDs(myopOverride);
+            const flow = await CloudRepository.Main.fetchFlow(flowId);
+            const componentToOverride = flow.components.find((c) => c.type.id === componentConfig.type.id);
+            if (componentToOverride) {
+              if (componentToOverride.instance.skinSelector.type === SkinSelectorTypes.Segmented) {
+                if (componentToOverride.instance.resolvedExperiences) {
+                  const resolvedExperience = componentToOverride.instance.resolvedExperiences.find((e) => e.id === experimentId);
+                  if ((resolvedExperience == null ? void 0 : resolvedExperience.type) === ExperienceTypes.Segment) {
+                    const typedResolvedExperience = resolvedExperience;
+                    const typedSkinSelector = componentToOverride.instance.skinSelector;
+                    const segment = typedSkinSelector.segments.find((s) => s.segmentId === typedResolvedExperience.segment.id);
+                    if (segment) {
+                      componentToOverride.instance.skinSelector = segment == null ? void 0 : segment.skinSelector;
+                      return componentToOverride;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          break;
+      }
+    }
+  } finally {
+    return null;
+  }
+};
+
+// src/host/hostSDK.ts
+var __ROOT_SDK_PUBLIC_URL__ = "https://cdn.myop.dev/sdk/next/myop_sdk.min.js";
+var HostSDK = class {
+  constructor() {
+    __publicField(this, "components2init", []);
+    __publicField(this, "components", []);
+    __publicField(this, "componentsLoaders", []);
+    __publicField(this, "initiated", false);
+    __publicField(this, "version", myop_sdk_version_default);
+    __publicField(this, "type2InstanceCount", {});
+    __publicField(this, "assignId", (componentDefinition) => {
+      if (!this.type2InstanceCount[componentDefinition.id]) {
+        this.type2InstanceCount[componentDefinition.id] = 0;
+      }
+      return "".concat(componentDefinition.id, "_").concat(++this.type2InstanceCount[componentDefinition.id]);
+    });
+    //TODO : fix the inspect implementation inside refComponent
+    //then inspected maybe can be dropped
+    __publicField(this, "inspected", false);
+    __publicField(this, "inspect", () => {
+      if (this.inspected)
+        return;
+      this.inspected = true;
+      this.components.forEach((component) => {
+        if (component.inspect) {
+          component.inspect();
+        }
+      });
+    });
+    __publicField(this, "incomingMessageHandler", (event) => {
+      if (event.origin === document.location.origin) {
+      }
+      if (event.data.myop) {
+        if (event.data.direction !== MessageDirection.up && event.data.messageType !== MyopMessages.EnvelopedMessage) {
+          return;
+        }
+        const myopMessage = event.data;
+        if (myopMessage.messageType === MyopMessages.InitRequest) {
+          this.components2init.forEach((component2) => {
+            component2.send(new InitMessage(component2.id));
+          });
+          return;
+        }
+        if (myopMessage.messageType === MyopMessages.InitResponse) {
+          this.components2init = this.components2init.filter((component2) => component2.id !== myopMessage.content.id);
+          const initiatedComponent = this.components.find((component2) => {
+            var _a;
+            return component2.id === ((_a = myopMessage.content) == null ? void 0 : _a.id);
+          });
+          initiatedComponent == null ? void 0 : initiatedComponent.setInitiated();
+          return;
+        }
+        if (myopMessage.messageType === MyopMessages.EnvelopedMessage) {
+          const typedMessage = myopMessage;
+          const refComponent = this.components.find((component2) => component2.id === typedMessage.destination);
+          if (refComponent) {
+            if (typedMessage.direction === MessageDirection.down) {
+              if (typedMessage.message.messageType === ExecuteComponentMethod.name) {
+                refComponent.onMessageReceived(typedMessage.message);
+              } else {
+                typedMessage.message.route = typedMessage.route;
+                refComponent.send(typedMessage.message);
+              }
+              return;
+            }
+          } else {
+            const innerComponent = this.components.find((component2) => component2.id === typedMessage.message.destination);
+            if (innerComponent) {
+              innerComponent.send(typedMessage.message);
+            } else {
+            }
+          }
+          return;
+        }
+        const component = this.components.find((component2) => component2.id === myopMessage.destination);
+        if (!component) {
+          if (window.myop.IframeSDK) {
+            window.myop.IframeSDK.messageToHost(myopMessage);
+          }
+          return;
+        }
+        if (component) {
+          if (component.onMessageReceived(myopMessage)) {
+            return;
+          } else {
+            if (window.myop.IframeSDK)
+              window.myop.IframeSDK.messageToHost(myopMessage);
+          }
+        }
+      }
+    });
+    __publicField(this, "send", (message) => {
+      const syntheticEvent = new MessageEvent(
+        "",
+        { data: message }
+      );
+      this.incomingMessageHandler(syntheticEvent);
+    });
+    __publicField(this, "init", (customComponentLoaderCreators) => {
+      if (this.initiated) {
+        throw new Error("hostSDK already initiated");
+      }
+      const basicLoaders = [
+        new MyopIframeLoader(),
+        new WebcomponentLoader(),
+        new HTMLComponentLoader()
+      ];
+      this.componentsLoaders = [
+        ...basicLoaders
+      ];
+      if (customComponentLoaderCreators) {
+        const loaderByType = {};
+        customComponentLoaderCreators.forEach((customComponentLoaderCreator) => {
+          const customLoader = new customComponentLoaderCreator(this.componentsLoaders);
+          loaderByType[customLoader.type] = customLoader;
+        });
+        this.componentsLoaders.forEach((loader) => {
+          if (!loaderByType[loader.type])
+            loaderByType[loader.type] = loader;
+        });
+        this.componentsLoaders = Object.values(loaderByType);
+      }
+      window.addEventListener(
+        "message",
+        this.incomingMessageHandler,
+        false
+      );
+      console.log("myop hostSDK initiated", document.location.href);
+      this.initiated = true;
+    });
+    __publicField(this, "_getSkinIdBySkinSelector", async (skinSelector, experiences = [], hooks) => {
+      var _a;
+      async function asyncFind(array, predicate) {
+        for (const item of array) {
+          if (await predicate(item)) {
+            return item;
+          }
+        }
+        return void 0;
+      }
+      switch (skinSelector.type) {
+        // @ts-ignore
+        case "DedicatedSkin":
+        //backward compatibility
+        case SkinSelectorTypes.Dedicated:
+          {
+            let selectedSkinId = ((_a = skinSelector.skin) == null ? void 0 : _a.id) || skinSelector.skins[0].id;
+            return selectedSkinId;
+          }
+          break;
+        case SkinSelectorTypes.Segmented:
+          {
+            const typedSkinSelector = skinSelector;
+            const segment = await asyncFind(typedSkinSelector.segments, async (segment2) => {
+              if (segment2.segmentId === "Default") {
+                return true;
+              }
+              const experience = experiences.find((experience2) => {
+                if (experience2.type === ExperienceTypes.Segment) {
+                  return experience2.segment.id === segment2.segmentId;
+                }
+                return false;
+              });
+              if (!experience) {
+                throw new Error("experience not found");
+              }
+              const typedExperience = experience;
+              const typedSegment = typedExperience.segment;
+              const segmentFunction = (hooks ? hooks : {})[typedSegment.function];
+              if (segmentFunction) {
+                const results = await segmentFunction();
+                return results;
+              } else {
+                console.warn("segmentId:".concat(segment2.segmentId, ", ").concat(typedSegment.function, " function not provided !"));
+              }
+              return false;
+            });
+            if (segment)
+              return this._getSkinIdBySkinSelector(segment.skinSelector, experiences);
+            else {
+              debugger;
+            }
+          }
+          break;
+        default: {
+          debugger;
+        }
+      }
+      return "";
+    });
+    __publicField(this, "runSkinSelector", async (componentConfig, hooks) => {
+      const skinId = await this._getSkinIdBySkinSelector(componentConfig.instance.skinSelector, componentConfig.instance.resolvedExperiences, hooks);
+      return componentConfig.type.skins.find((skin) => skin.id === skinId);
+    });
+    __publicField(this, "loaderHooks");
+    __publicField(this, "loadComponent", async (componentConfig, container, options) => {
+      var _a, _b, _c, _d;
+      if (!container) {
+        debugger;
+        throw new Error("no container was found for this component");
+      }
+      const overriddenConfig = await checkMyopOverride(componentConfig);
+      if (overriddenConfig) {
+        componentConfig = overriddenConfig;
+      }
+      const hooks = __spreadValues(__spreadValues({}, (_a = this.loaderHooks) != null ? _a : {}), (_b = options == null ? void 0 : options.hooks) != null ? _b : {});
+      const ref = container;
+      if (ref.myop) {
+        if (ref.component) {
+          componentConfig = __spreadValues({}, componentConfig);
+          componentConfig.instance = __spreadValues({}, componentConfig.instance);
+          let selectedSkin2 = await this.runSkinSelector(componentConfig, hooks);
+          if (!selectedSkin2) {
+            throw new Error("runSkinSelector failed to choose skin, check the provided config");
+          }
+          if ((_c = options == null ? void 0 : options.hooks) == null ? void 0 : _c.afterSkinSelected) {
+            selectedSkin2 = await options.hooks.afterSkinSelected(__spreadValues({}, selectedSkin2));
+          }
+          componentConfig.instance.skinSelector = {
+            type: SkinSelectorTypes.Dedicated,
+            skin: selectedSkin2
+            //  skins: [selectedSkin]
+          };
+          if (options) {
+            options = __spreadValues({}, options);
+            delete options.hooks;
+          }
+          const refComponent = await createRefComponent(ref, componentConfig, this.components, options);
+          return refComponent;
+        } else {
+          throw new Error("load component got a detached ref.");
+        }
+      }
+      container = container;
+      let selectedSkin = await this.runSkinSelector(componentConfig, hooks);
+      if (!selectedSkin) {
+        throw new Error("runSkinSelector failed to choose skin, check the provided config");
+      }
+      if ((_d = options == null ? void 0 : options.hooks) == null ? void 0 : _d.afterSkinSelected) {
+        selectedSkin = await options.hooks.afterSkinSelected(__spreadValues({}, selectedSkin));
+      }
+      const componentLoader = this.componentsLoaders.find((loader) => loader.type === selectedSkin.loader.type);
+      if (!componentLoader) {
+        debugger;
+        throw new Error('no loader "'.concat(selectedSkin.loader.type, '" was found for component'));
+      }
+      let component = await componentLoader.load(componentConfig.type, selectedSkin, container, options);
+      if (!component.isInitiated)
+        this.components2init.push(component);
+      component.bind("onDispose", () => {
+        this.components = this.components.filter((c) => c !== component);
+        this.components2init = this.components2init.filter((c) => c !== component);
+        return true;
+      });
+      this.components.push(component);
+      if (!options || options.connectProps !== false) {
+        component = connectProps(component, componentConfig.type.props, selectedSkin);
+      }
+      try {
+        await connectRefs(component, componentConfig, this.components);
+      } catch (e) {
+        throw e;
+      }
+      if (!(options == null ? void 0 : options.skipInit))
+        await component.initiated();
+      return component;
+    });
+    __publicField(this, "navigate", async (component, newComponentConfig, options) => {
+      if (component.parent) {
+        throw new Error("Navigating on remote ref components is not implemented yet");
+      }
+      if (options == null ? void 0 : options.staged) {
+        let newComponent = await this.loadComponent(newComponentConfig, component.container, __spreadValues({
+          hidden: true,
+          relative: { direction: "after", child: component.element }
+        }, options));
+        if (options.init)
+          await options.init(newComponent);
+        newComponent.show();
+        component.dispose();
+        return newComponent;
+      } else {
+        const nextSibling = component.element.nextSibling;
+        component.dispose();
+        return this.loadComponent(newComponentConfig, component.container, __spreadValues({
+          relative: {
+            direction: "before",
+            child: nextSibling
+          }
+        }, options));
+      }
+    });
+  }
+};
+__publicField(HostSDK, "Instance", () => window.myop.hostSDK);
+if (!window.myop) {
+  window.myop = {
+    __ROOT_SDK_PUBLIC_URL__
+  };
+}
+if (!window.myop.hostSDK) {
+  const _hostSDK = new HostSDK();
+  _hostSDK.init();
+  if (!window.myop) {
+    window.myop = {
+      __ROOT_SDK_PUBLIC_URL__
+    };
+  }
+  window.myop.hostSDK = _hostSDK;
+}
+var hostSDK = window.myop.hostSDK;
+defineDynamicImport("hostSDK", hostSDK);
+
+// src/helpers/EnableV2.ts
+var _v2_CloudRepository = class _v2_CloudRepository {
+  constructor(_baseUrl = "https://cloud.myop.dev") {
+    this._baseUrl = _baseUrl;
+    __publicField(this, "variants", {});
+  }
+  async fetchComponent(componentId, environmentIdentifier) {
+    if (!this.variants[componentId]) {
+      this.variants[componentId] = new Promise(
+        async (resolve, reject) => {
+          try {
+            const res = await fetch(
+              "".concat(this._baseUrl, "/consume?id=").concat(componentId, "&env=").concat(environmentIdentifier)
+            );
+            const json = await res.json();
+            resolve(json.item);
+          } catch (e) {
+            reject(e);
+          }
+        }
+      );
+    }
+    return await this.variants[componentId];
+  }
+};
+__publicField(_v2_CloudRepository, "Main", new _v2_CloudRepository());
+var v2_CloudRepository = _v2_CloudRepository;
+var enableV2 = (environmentIdentifier, cloudRepository) => {
+  const _cloudRepository = cloudRepository ? cloudRepository : new v2_CloudRepository();
+  return {
+    loadComponent: async (componentId, container, options) => {
+      const config = await _cloudRepository.fetchComponent(componentId, environmentIdentifier);
+      if (!config.consume_variant || !config.consume_variant.length) {
+        console.warn(
+          '[Myop Warning] Component "'.concat(componentId, '" has no implementation for environment "').concat(environmentIdentifier, '".')
+        );
+      }
+      const componentConfig = {
+        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
+      };
+      return await hostSDK.loadComponent(componentConfig, container, options);
+    }
+  };
+};
+
+// src/helpers/MyopHelpers.ts
+defineDynamicImport("MyopHelpers", helpers_exports);
+export {
+  CloudRepository,
+  ComponentConfig,
+  SkinConfig,
+  addClass,
+  applyStylesheet,
+  applyStylesheetLink,
+  changeSkinUrlByTokenizer,
+  createIframeSkinByTokenizer,
+  enableV2,
+  exec,
+  removeClass,
+  v2_CloudRepository
+};
+//# sourceMappingURL=_MyopHelpers.js.map