@g1cloud/page-builder-editor 1.0.0-alpha.15 → 1.0.0-alpha.17

package/dist/page-builder-editor.umd.cjs

@@ -6894,12 +6894,12 @@ var __publicField = (obj, key, value) => {
       this.rootPart = vue.ref(new RootPart());
     }
   };
-  const _hoisted_1$7$1 = ["data-model-id"];
-  const _hoisted_2$3$1 = {
+  const _hoisted_1$8$1 = ["data-model-id"];
+  const _hoisted_2$5$1 = {
     key: 1,
     class: "pb-nested-widget"
   };
-  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {}
@@ -6921,7 +6921,7 @@ var __publicField = (obj, key, value) => {
             key: 0,
             part: _ctx.part
           }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3$1, [
+          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5$1, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
                 key: child.part.partId,
@@ -6929,12 +6929,12 @@ var __publicField = (obj, key, value) => {
               }, null, 8, ["part"]);
             }), 128))
           ])) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$7$1);
+        ], 16, _hoisted_1$8$1);
       };
     }
   });
-  const _hoisted_1$6$1 = ["data-model-id"];
-  const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7$1 = ["data-model-id"];
+  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {}
@@ -6952,17 +6952,17 @@ var __publicField = (obj, key, value) => {
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
         }, properties.value), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
               key: child.partId,
               part: child
             }, null, 8, ["part"]);
           }), 128))
-        ], 16, _hoisted_1$6$1);
+        ], 16, _hoisted_1$7$1);
       };
     }
   });
-  const _hoisted_1$5$1 = { class: "pb-block" };
-  const _hoisted_2$2$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_1$6$1 = { class: "pb-block" };
+  const _hoisted_2$4$1 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "pb-widget",
     style: { "margin": "0 auto" }
   }, [
@@ -6970,22 +6970,22 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ vue.createElementVNode("h3", null, "Login Design Part")
     ])
   ], -1);
-  const _hoisted_3$1$1 = [
-    _hoisted_2$2$1
+  const _hoisted_3$4$1 = [
+    _hoisted_2$4$1
   ];
-  const _sfc_main$7$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
       part: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5$1, _hoisted_3$1$1);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
       };
     }
   });
-  const _hoisted_1$4$1 = ["data-model-id"];
-  const _sfc_main$6$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$5$1 = ["data-model-id"];
+  const _sfc_main$7$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {}
@@ -7001,94 +7001,74 @@ var __publicField = (obj, key, value) => {
           "data-model-id": _ctx.part.partId,
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
         }, properties.value), [
-          ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$7$1, {
+          ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$8$1, {
             key: 0,
             part: _ctx.part
           }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.part.children, (block) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$8$1, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
               key: block.partId,
               part: block
             }, null, 8, ["part"]);
           }), 128)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$4$1);
+        ], 16, _hoisted_1$5$1);
       };
     }
   });
-  const _hoisted_1$3$1 = { class: "pb-image-widget" };
-  const _hoisted_2$1$1 = ["src"];
-  const _hoisted_3$s = {
+  const _hoisted_1$4$1 = { class: "pb-image-widget" };
+  const _hoisted_2$3$1 = ["src"];
+  const _hoisted_3$3$1 = {
     key: 1,
-    class: "empty"
+    class: "placeholder"
   };
   const _hoisted_4$i = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "image", -1);
-  const _hoisted_5$8 = [
+  const _hoisted_5$9 = [
     _hoisted_4$i
   ];
-  const _sfc_main$5$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbImageWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       return (_ctx, _cache) => {
         var _a, _b;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4$1, [
           ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (vue.openBlock(), vue.createElementBlock("img", {
             key: 0,
             src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
             alt: "",
             class: "image"
-          }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s, _hoisted_5$8)) : vue.createCommentVNode("", true)
+          }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3$1, _hoisted_5$9)) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$2$1 = ["textContent"];
-  const _sfc_main$4$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$3$1 = { class: "pb-text-widget" };
+  const _hoisted_2$2$1 = ["textContent"];
+  const _hoisted_3$2$1 = {
+    key: 1,
+    class: "placeholder",
+    textContent: "Empty Text"
+  };
+  const _sfc_main$5$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbTextWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilder();
-      const emptyClass = vue.computed(() => {
-        var _a;
-        if (props.viewMode) {
-          return false;
-        } else if ((_a = props.part.properties) == null ? void 0 : _a.text) {
-          if (typeof props.part.properties.text === "string") {
-            return true;
-          } else {
-            return !props.part.properties.text[pageBuilder.locale.value];
-          }
-        } else {
-          return true;
-        }
-      });
       const text = vue.computed(() => {
         var _a;
         if ((_a = props.part.properties) == null ? void 0 : _a.text) {
           if (typeof props.part.properties.text === "string") {
-            if (props.viewMode) {
-              return "";
-            } else {
-              return "Empty text";
-            }
+            return props.part.properties.text;
           } else {
-            const t = props.part.properties.text[pageBuilder.locale.value];
-            if (props.viewMode) {
-              return t || "";
-            } else {
-              return t || "Empty text";
-            }
+            const locale = pageBuilder.getLocale();
+            return props.part.properties.text[locale] || "";
           }
-        } else if (props.viewMode) {
-          return "";
-        } else {
-          return "Empty text";
         }
       });
       const style = vue.computed(() => {
@@ -7101,23 +7081,29 @@ var __publicField = (obj, key, value) => {
         };
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([[emptyClass.value ? "empty" : ""], "pb-text-widget"])
-        }, [
-          vue.createElementVNode("div", vue.mergeProps({ class: "text" }, style.value, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, [
+          text.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            key: 0,
+            class: "text"
+          }, style.value, {
             textContent: vue.toDisplayString(text.value)
-          }), null, 16, _hoisted_1$2$1)
-        ], 2);
+          }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2$1)) : vue.createCommentVNode("", true)
+        ]);
       };
     }
   });
-  const _hoisted_1$1$1 = ["innerHTML"];
-  const _hoisted_2$v = { key: 1 };
-  const _sfc_main$3$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$2$1 = { class: "pb-html-widget" };
+  const _hoisted_2$1$1 = ["innerHTML"];
+  const _hoisted_3$1$1 = {
+    key: 1,
+    class: "placeholder",
+    textContent: "Empty HTML"
+  };
+  const _sfc_main$4$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbHtmlWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -7144,23 +7130,69 @@ ${_html.style}
         var _a;
         return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
       });
-      const emptyClass = vue.computed(() => {
-        if (props.viewMode) {
-          return false;
-        } else {
-          return !html.value;
-        }
-      });
+      vue.computed(() => props.placeholder ? !html.value : false);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([[emptyClass.value ? "empty" : ""], "pb-html-widget"])
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2$1, [
           html.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: "html",
             innerHTML: html.value
-          }, null, 8, _hoisted_1$1$1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$v, "Empty HTML"))
-        ], 2);
+          }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1$1)) : vue.createCommentVNode("", true)
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
+  const _hoisted_2$v = ["src"];
+  const _hoisted_3$s = {
+    key: 1,
+    class: "placeholder",
+    textContent: "Empty URL"
+  };
+  const _sfc_main$3$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PbIframeWidget",
+    props: {
+      part: {},
+      placeholder: { type: Boolean }
+    },
+    setup(__props) {
+      const props = __props;
+      const pageBuilder = usePageBuilder();
+      const url = vue.computed(() => {
+        var _a;
+        const url2 = (_a = props.part.properties) == null ? void 0 : _a.url;
+        if (!url2)
+          return;
+        if (typeof url2 !== "object")
+          return;
+        const locale = pageBuilder.getLocale();
+        return url2[locale];
+      });
+      const style = vue.computed(() => ({
+        style: {
+          width: "100%",
+          height: `${height.value}px`
+        }
+      }));
+      const height = vue.ref(200);
+      const updateHeight = (event) => {
+        if (event.data && event.data.height) {
+          height.value = event.data.height;
+        }
+      };
+      vue.onMounted(() => {
+        window.addEventListener("message", updateHeight);
+      });
+      vue.onBeforeUnmount(() => {
+        window.removeEventListener("message", updateHeight);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1$1, [
+          url.value ? (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({
+            key: 0,
+            src: url.value
+          }, style.value), null, 16, _hoisted_2$v)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s)) : vue.createCommentVNode("", true)
+        ]);
       };
     }
   });
@@ -7168,41 +7200,46 @@ ${_html.style}
     "Section": {
       partType: "Section",
       partName: "Section",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "GlobalDesignPart": {
       partType: "Section",
       partName: "GlobalDesignPart",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "LocalDesignPart": {
       partType: "Section",
       partName: "LocalDesignPart",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "LocalMarketingPart": {
       partType: "Section",
       partName: "LocalMarketingPart",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "Block": {
       partType: "Block",
       partName: "Block",
-      creator: () => _sfc_main$8$1
+      creator: () => _sfc_main$9$1
     },
     "TextWidget": {
       partType: "Widget",
       partName: "TextWidget",
-      creator: () => _sfc_main$4$1
+      creator: () => _sfc_main$5$1
     },
     "ImageWidget": {
       partType: "Widget",
       partName: "ImageWidget",
-      creator: () => _sfc_main$5$1
+      creator: () => _sfc_main$6$1
     },
     "HtmlWidget": {
       partType: "Widget",
       partName: "HtmlWidget",
+      creator: () => _sfc_main$4$1
+    },
+    "IframeWidget": {
+      partType: "Widget",
+      partName: "IframeWidget",
       creator: () => _sfc_main$3$1
     }
   };
@@ -7225,15 +7262,25 @@ ${_html.style}
     registerCustomPlugin(plugin) {
       if (plugin.widgets) {
         plugin.widgets.forEach((v) => {
-          partDefinitions$1[v.partName] = {
-            partType: "Widget",
-            partName: v.partName,
-            creator: () => _sfc_main$B,
-            component: v.component
-          };
+          const w = { ...v };
+          w.partType = "Widget";
+          w.creator = () => _sfc_main$B;
+          partDefinitions$1[v.partName] = w;
         });
       }
     }
+    watchCustomWidgetData(part) {
+      const def = partDefinitions$1[part.partName];
+      if (!def || !def.dataWatcher)
+        return false;
+      return def.dataWatcher(part.properties);
+    }
+    provideCustomWidgetData(part) {
+      const def = partDefinitions$1[part.partName];
+      if (!def || !def.dataProvider)
+        return Promise.resolve();
+      return def.dataProvider(part.properties);
+    }
     render(pageContent) {
       const rootPart = new RootPart();
       rootPart.pageBuilderId = this.instanceId;
@@ -7338,7 +7385,7 @@ ${_html.style}
             class: vue.normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$6$1, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$7$1, {
                 key: section.partId,
                 part: section
               }, null, 8, ["part"]);
@@ -7396,17 +7443,28 @@ ${_html.style}
     __name: "PbCustomWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      dataWatcher: { type: Function },
+      dataProvider: { type: Function }
     },
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilder();
       const comp = vue.computed(() => pageBuilder.getCustomWidgetComponent(props.part));
+      const data = vue.ref({});
       const bind = vue.computed(() => ({
         pageBuilderId: pageBuilder.instanceId,
-        properties: props.part.properties,
-        placeholder: true
+        ...props.part.properties || {},
+        placeholder: true,
+        ...data.value || {}
       }));
+      const updateData = async () => {
+        data.value = await pageBuilder.provideCustomWidgetData(props.part);
+      };
+      vue.onMounted(updateData);
+      vue.watch(
+        () => pageBuilder.watchCustomWidgetData(props.part),
+        () => updateData()
+      );
       return (_ctx, _cache) => {
         return comp.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(comp.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : vue.createCommentVNode("", true);
       };
@@ -7938,20 +7996,6 @@ ${_html.style}
         }
       }
     }
-    getLocalDesignPartPropertyDefinitions(partName) {
-      let properties;
-      const partDef = this.getPartDefinition(partName);
-      if (!partDef || !partDef.propertyGroups)
-        return;
-      for (const group of partDef.propertyGroups) {
-        for (const property of group.properties) {
-          if (property.localized) {
-            properties = [...properties || [], property];
-          }
-        }
-      }
-      return properties;
-    }
     createPartComponent(part) {
       if (part) {
         const def = this.getPartDefinition(part.partName);
@@ -8760,13 +8804,15 @@ ${_html.style}
         }, properties.value), [
           thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
             key: 0,
-            part: _ctx.part
+            part: _ctx.part,
+            placeholder: true
           }, null, 8, ["part"])) : vue.createCommentVNode("", true),
           childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
                 key: child.part.partId,
-                part: child.part
+                part: child.part,
+                placeholder: true
               }, null, 8, ["part"]);
             }), 128))
           ])) : vue.createCommentVNode("", true),
@@ -9150,10 +9196,10 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Position" })
   ], -1);
   const _hoisted_4$g = { class: "flex-grow-1" };
-  const _hoisted_5$7 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$6 = { class: "text-center" };
-  const _hoisted_7$5 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$5 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_5$8 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$7 = { class: "text-center" };
+  const _hoisted_7$6 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$6 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
@@ -9188,8 +9234,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$r, [
             _hoisted_3$p,
             vue.createElementVNode("div", _hoisted_4$g, [
-              vue.createElementVNode("div", _hoisted_5$7, [
-                vue.createElementVNode("div", _hoisted_6$6, [
+              vue.createElementVNode("div", _hoisted_5$8, [
+                vue.createElementVNode("div", _hoisted_6$7, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -9198,7 +9244,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$5, [
+                vue.createElementVNode("div", _hoisted_7$6, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -9206,7 +9252,7 @@ ${_html.style}
                     width: "30%",
                     "onUpdate:modelValue": updateLeft
                   }, null, 8, ["model-value"]),
-                  _hoisted_8$5,
+                  _hoisted_8$6,
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": right.value,
                     class: "ml-4",
@@ -10979,13 +11025,13 @@ ${_html.style}
   const _hoisted_2$l = { class: "vc-sketch-controls" };
   const _hoisted_3$j = { class: "vc-sketch-sliders" };
   const _hoisted_4$b = { class: "vc-sketch-hue-wrap" };
-  const _hoisted_5$6 = {
+  const _hoisted_5$7 = {
     key: 0,
     class: "vc-sketch-alpha-wrap"
   };
-  const _hoisted_6$5 = { class: "vc-sketch-color-wrap" };
-  const _hoisted_7$4 = ["aria-label"];
-  const _hoisted_8$4 = {
+  const _hoisted_6$6 = { class: "vc-sketch-color-wrap" };
+  const _hoisted_7$5 = ["aria-label"];
+  const _hoisted_8$5 = {
     key: 0,
     class: "vc-sketch-field"
   };
@@ -11032,23 +11078,23 @@ ${_html.style}
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ]),
-            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
+            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
               vue.createVNode(_component_Alpha, {
                 value: _ctx.colors,
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ])) : vue.createCommentVNode("v-if", true)
           ]),
-          vue.createElementVNode("div", _hoisted_6$5, [
+          vue.createElementVNode("div", _hoisted_6$6, [
             vue.createElementVNode("div", {
               "aria-label": `Current color is ${$options.activeColor}`,
               class: "vc-sketch-active-color",
               style: vue.normalizeStyle({ background: $options.activeColor })
-            }, null, 12, _hoisted_7$4),
+            }, null, 12, _hoisted_7$5),
             vue.createVNode(_component_Checkboard)
           ])
         ]),
-        !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$4, [
+        !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
           vue.createCommentVNode(" rgba "),
           vue.createElementVNode("div", _hoisted_9$4, [
             vue.createVNode(_component_EdIn, {
@@ -11241,7 +11287,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Background" })
   ], -1);
   const _hoisted_4$9 = { class: "bs-layout-horizontal" };
-  const _hoisted_5$5 = { class: "color" };
+  const _hoisted_5$6 = { class: "color" };
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
@@ -11276,7 +11322,7 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$j, [
             _hoisted_3$h,
             vue.createElementVNode("div", _hoisted_4$9, [
-              vue.createElementVNode("div", _hoisted_5$5, [
+              vue.createElementVNode("div", _hoisted_5$6, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
                   "hide-delete": "",
@@ -11311,12 +11357,12 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border" })
   ], -1);
   const _hoisted_4$8 = { class: "" };
-  const _hoisted_5$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
+  const _hoisted_5$5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Color" })
   ], -1);
-  const _hoisted_6$4 = { class: "color" };
-  const _hoisted_7$3 = { class: "mt-8" };
-  const _hoisted_8$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
+  const _hoisted_6$5 = { class: "color" };
+  const _hoisted_7$4 = { class: "mt-8" };
+  const _hoisted_8$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border Width" })
   ], -1);
   const _hoisted_9$3 = { class: "flex-grow-1 mt-4" };
@@ -11380,8 +11426,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$i, [
             _hoisted_3$g,
             vue.createElementVNode("div", _hoisted_4$8, [
-              _hoisted_5$4,
-              vue.createElementVNode("div", _hoisted_6$4, [
+              _hoisted_5$5,
+              vue.createElementVNode("div", _hoisted_6$5, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
                   "hide-delete": "",
@@ -11399,8 +11445,8 @@ ${_html.style}
                 }, null, 8, ["model-value"])
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_7$3, [
-              _hoisted_8$3,
+            vue.createElementVNode("div", _hoisted_7$4, [
+              _hoisted_8$4,
               vue.createElementVNode("div", _hoisted_9$3, [
                 vue.createElementVNode("div", _hoisted_10$1, [
                   vue.createElementVNode("div", _hoisted_11$1, [
@@ -11491,10 +11537,10 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Margin" })
   ], -1);
   const _hoisted_4$7 = { class: "flex-grow-1" };
-  const _hoisted_5$3 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$3 = { class: "text-center" };
-  const _hoisted_7$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$2 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$4 = { class: "text-center" };
+  const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$3 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
@@ -11529,8 +11575,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$h, [
             _hoisted_3$f,
             vue.createElementVNode("div", _hoisted_4$7, [
-              vue.createElementVNode("div", _hoisted_5$3, [
-                vue.createElementVNode("div", _hoisted_6$3, [
+              vue.createElementVNode("div", _hoisted_5$4, [
+                vue.createElementVNode("div", _hoisted_6$4, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -11539,7 +11585,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$2, [
+                vue.createElementVNode("div", _hoisted_7$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -11547,7 +11593,7 @@ ${_html.style}
                     width: "30%",
                     "onUpdate:modelValue": updateLeft
                   }, null, 8, ["model-value"]),
-                  _hoisted_8$2,
+                  _hoisted_8$3,
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": right.value,
                     class: "ml-4",
@@ -11578,10 +11624,10 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Padding" })
   ], -1);
   const _hoisted_4$6 = { class: "flex-grow-1" };
-  const _hoisted_5$2 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$2 = { class: "text-center" };
-  const _hoisted_7$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_5$3 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$3 = { class: "text-center" };
+  const _hoisted_7$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$2 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
@@ -11616,8 +11662,8 @@ ${_html.style}
           vue.createElementVNode("div", _hoisted_2$g, [
             _hoisted_3$e,
             vue.createElementVNode("div", _hoisted_4$6, [
-              vue.createElementVNode("div", _hoisted_5$2, [
-                vue.createElementVNode("div", _hoisted_6$2, [
+              vue.createElementVNode("div", _hoisted_5$3, [
+                vue.createElementVNode("div", _hoisted_6$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -11626,7 +11672,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$1, [
+                vue.createElementVNode("div", _hoisted_7$2, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -11634,7 +11680,7 @@ ${_html.style}
                     width: "30%",
                     "onUpdate:modelValue": updateLeft
                   }, null, 8, ["model-value"]),
-                  _hoisted_8$1,
+                  _hoisted_8$2,
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": right.value,
                     class: "ml-4",
@@ -11998,7 +12044,7 @@ ${_html.style}
     {
       partType: "Widget",
       partName: "TextWidget",
-      caption: "Text Widget",
+      caption: "Text",
       icon: "insert_text",
       propertyGroups: [
         {
@@ -12036,12 +12082,12 @@ ${_html.style}
       },
       localized: true,
       allowsChild: () => false,
-      creator: () => _sfc_main$4$1
+      creator: () => _sfc_main$5$1
     },
     {
       partType: "Widget",
       partName: "ImageWidget",
-      caption: "Image Widget",
+      caption: "Image",
       icon: "imagesmode",
       propertyGroups: [
         {
@@ -12062,12 +12108,12 @@ ${_html.style}
       initialProperties: {},
       localized: true,
       allowsChild: () => false,
-      creator: () => _sfc_main$5$1
+      creator: () => _sfc_main$6$1
     },
     {
       partType: "Widget",
       partName: "HtmlWidget",
-      caption: "HTML Widget",
+      caption: "HTML",
       icon: "code",
       propertyGroups: [
         {
@@ -12089,6 +12135,33 @@ ${_html.style}
       initialProperties: {},
       localized: true,
       allowsChild: () => false,
+      creator: () => _sfc_main$4$1
+    },
+    {
+      partType: "Widget",
+      partName: "IframeWidget",
+      caption: "IFrame",
+      icon: "code",
+      propertyGroups: [
+        {
+          groupName: "iframe",
+          caption: "Iframe",
+          properties: [
+            {
+              propertyName: "url",
+              caption: "URL",
+              propertyType: "text",
+              params: "",
+              localized: true,
+              multiLang: true
+            }
+          ]
+        },
+        ...defaultWidgetPropertyGroups()
+      ],
+      initialProperties: {},
+      localized: true,
+      allowsChild: () => false,
       creator: () => _sfc_main$3$1
     }
   ];
@@ -12122,6 +12195,13 @@ ${_html.style}
       ]
     }
   ];
+  const widgetPartDefinitions = [
+    {
+      groupName: "Widget",
+      caption: "Widget",
+      partDefinitions: widgets
+    }
+  ];
   const blockWidgetPartDefinitions = [
     {
       groupName: "Block",
@@ -12315,6 +12395,36 @@ ${_html.style}
   };
   __publicField(_AddPartCommand, "COMMAND_ID", "AddPart");
   let AddPartCommand = _AddPartCommand;
+  const _AddSectionCommand = class _AddSectionCommand {
+    constructor(modal) {
+      __publicField(this, "commandId", _AddSectionCommand.COMMAND_ID);
+      __publicField(this, "caption", "Add Section");
+      this.modal = modal;
+    }
+    execute(pageBuilder, args) {
+      const def = pageBuilder.partManager.getSectionDefinition();
+      if (!def)
+        return;
+      addPart(pageBuilder, def);
+    }
+  };
+  __publicField(_AddSectionCommand, "COMMAND_ID", "AddSection");
+  let AddSectionCommand = _AddSectionCommand;
+  const _AddBlockCommand = class _AddBlockCommand {
+    constructor(modal) {
+      __publicField(this, "commandId", _AddBlockCommand.COMMAND_ID);
+      __publicField(this, "caption", "Add Block");
+      this.modal = modal;
+    }
+    execute(pageBuilder, args) {
+      const def = pageBuilder.partManager.getBlockDefinition();
+      if (!def)
+        return;
+      addPart(pageBuilder, def);
+    }
+  };
+  __publicField(_AddBlockCommand, "COMMAND_ID", "AddBlock");
+  let AddBlockCommand = _AddBlockCommand;
   const addPart = (pageBuilder, def, attrs) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const selected = pageBuilder.context.getSelectedParts()[0];
@@ -12403,29 +12513,13 @@ ${_html.style}
     }
   };
   const addSectionBefore = (pageBuilder, modal, args) => {
-    const def = args && args.partDefinition;
-    if (!def) {
-      const partDefinitionGroups = designPartDefinitions;
-      openPartAddModal(modal, {
-        ...args || {},
-        pageBuilder,
-        partDefinitionGroups
-      }, (part, attrs) => {
-        addSectionBefore(pageBuilder, modal, {
-          ...args || {},
-          partDefinition: part,
-          ...attrs || {}
-        });
-      });
-      return;
-    }
     const selected = pageBuilder.context.getSelectedParts()[0];
     if (!selected)
       return;
     const section = pageBuilder.partManager.findNearestSection(selected);
     if (!section || !section.parent || !section.parent.children)
       return;
-    const newSection = createPartWithDefinition(def);
+    const newSection = createSection(pageBuilder);
     if (!newSection)
       return;
     const child = createBlock(pageBuilder);
@@ -12434,29 +12528,13 @@ ${_html.style}
     insertParts(pageBuilder, section.parent.partId, index, [newSection], true);
   };
   const addSectionAfter = (pageBuilder, modal, args) => {
-    const def = args && args.partDefinition;
-    if (!def) {
-      const partDefinitionGroups = designPartDefinitions;
-      openPartAddModal(modal, {
-        ...args || {},
-        pageBuilder,
-        partDefinitionGroups
-      }, (part, attrs) => {
-        addSectionAfter(pageBuilder, modal, {
-          ...args || {},
-          partDefinition: part,
-          ...attrs || {}
-        });
-      });
-      return;
-    }
     const selected = pageBuilder.context.getSelectedParts()[0];
     if (!selected)
       return;
     const section = pageBuilder.partManager.findNearestSection(selected);
     if (!section || !section.parent || !section.parent.children)
       return;
-    const newSection = createPartWithDefinition(def);
+    const newSection = createSection(pageBuilder);
     if (!newSection)
       return;
     const child = createBlock(pageBuilder);
@@ -12579,7 +12657,7 @@ ${_html.style}
       this.modal = modal;
     }
     execute(pageBuilder, args) {
-      addSectionBefore(pageBuilder, this.modal, args);
+      addSectionBefore(pageBuilder, this.modal);
     }
   };
   __publicField(_AddSectionAboveCommand, "COMMAND_ID", "AddSectionAbove");
@@ -12592,7 +12670,7 @@ ${_html.style}
       this.modal = modal;
     }
     execute(pageBuilder, args) {
-      addSectionAfter(pageBuilder, this.modal, args);
+      addSectionAfter(pageBuilder, this.modal);
     }
   };
   __publicField(_AddSectionBelowCommand, "COMMAND_ID", "AddSectionBelow");
@@ -12804,6 +12882,8 @@ ${_html.style}
       new OpenAddPartModalCommand(modal),
       new OpenAddWidgetModalCommand(modal),
       new AddPartCommand(modal),
+      new AddSectionCommand(modal),
+      new AddBlockCommand(modal),
       new AddSectionAboveCommand(modal),
       new AddSectionBelowCommand(modal),
       new AddBlockLeftCommand(),
@@ -13096,14 +13176,20 @@ ${_html.style}
         groupId: "add",
         buttons: [
           {
-            buttonId: "core:openAddPartLayer",
-            caption: "Add Design Part...",
+            buttonId: "core:addSection",
+            caption: "Add Section",
             icon: "add_row_below",
-            handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID)
+            handler: (modeler) => modeler.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID)
+          },
+          {
+            buttonId: "core:addBlock",
+            caption: "Add Block",
+            icon: "add_column_right",
+            handler: (modeler) => modeler.commandRegistry.executeCommand(AddBlockCommand.COMMAND_ID)
           },
           {
-            buttonId: "core:openAddWidgetLayer",
-            caption: "Add Widget...",
+            buttonId: "core:addWidget",
+            caption: "Add Widget",
             icon: "desktop_landscape_add",
             handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID)
           }
@@ -13309,6 +13395,8 @@ ${_html.style}
       __publicField(this, "scale", vue.ref(1));
       __publicField(this, "locale", vue.ref("en"));
       __publicField(this, "locales", vue.ref(["en"]));
+      __publicField(this, "customWidgets", []);
+      __publicField(this, "providers", {});
       this.model = new Model();
       this.context = new PageBuilderContextImpl(this);
       this.editMode = "free";
@@ -13333,6 +13421,21 @@ ${_html.style}
         return def.component;
       }
     }
+    getProvider(name) {
+      return this.providers[name];
+    }
+    watchCustomWidgetData(part) {
+      const def = this.partManager.getPartDefinition(part.partName);
+      if (!def || !def.dataWatcher)
+        return false;
+      return def.dataWatcher(part.properties);
+    }
+    provideCustomWidgetData(part) {
+      const def = this.partManager.getPartDefinition(part.partName);
+      if (!def || !def.dataProvider)
+        return Promise.resolve();
+      return def.dataProvider(part.properties);
+    }
     registerPlugin(plugin) {
       if (plugin.partDefinitions)
         this.partManager.registerPartDefinitions(plugin.partDefinitions);
@@ -13354,13 +13457,23 @@ ${_html.style}
         const partDefinitions2 = {};
         plugin.widgets.forEach((v) => {
           const w = { ...v };
-          w.partName = "Widget";
+          w.partType = "Widget";
           w.creator = () => _sfc_main$B;
           w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
           partDefinitions2[v.partName] = w;
+          const found = this.customWidgets.find((x) => x.partName === v.partName);
+          if (!found) {
+            this.customWidgets.push(w);
+          }
         });
         this.partManager.registerPartDefinitions(partDefinitions2);
       }
+      if (plugin.providers) {
+        this.providers = {
+          ...this.providers,
+          ...plugin.providers
+        };
+      }
       if (plugin.propertyEditors) {
         this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
       }
@@ -13436,6 +13549,9 @@ ${_html.style}
         ]
       });
     }
+    getCustomWidgets() {
+      return this.customWidgets;
+    }
     getEmptyPageContent() {
       const block = new Block();
       const section = new Section();
@@ -13481,7 +13597,7 @@ ${_html.style}
       const insertSection = (index) => {
         if (!props.page)
           return;
-        editor.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID);
+        editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
       };
       return (_ctx, _cache) => {
         var _a;
@@ -13574,7 +13690,7 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
   const _hoisted_1$l = { class: "pb-canvas-frame" };
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
@@ -13588,7 +13704,7 @@ ${_html.style}
           return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
         },
         () => {
-          var _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f, _g, _h;
           if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
             const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
             head.innerHTML = `
@@ -13611,6 +13727,16 @@ ${_html.style}
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
           <style>${canvasStyle}</style>
         `;
+            const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
+            script2.innerHTML = `
+          function forwardPostMessage(event) {
+            if (event.data) {
+              window.parent.postMessage(event.data, '*');
+            }
+          }
+          window.addEventListener('message', forwardPostMessage);
+        `;
+            (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
             pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
             stopIframeWatch();
           }
@@ -14171,9 +14297,9 @@ ${_html.style}
   ], -1);
   const _hoisted_3$b = { class: "bs-layout-horizontal" };
   const _hoisted_4$4 = { class: "mr-2" };
-  const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
-  const _hoisted_6$1 = [
-    _hoisted_5$1
+  const _hoisted_5$2 = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
+  const _hoisted_6$2 = [
+    _hoisted_5$2
   ];
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyLocalMarketingPart",
@@ -14256,7 +14382,7 @@ ${_html.style}
               }, null, 8, ["from-value", "to-value"])
             ]),
             vue.createElementVNode("div", null, [
-              vue.createElementVNode("button", { onClick: selectSchedule }, _hoisted_6$1)
+              vue.createElementVNode("button", { onClick: selectSchedule }, _hoisted_6$2)
             ])
           ])
         ]);
@@ -14427,6 +14553,8 @@ ${_html.style}
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
+      const pageBuilder = usePageBuilderEditor();
+      const locales = vue.computed(() => pageBuilder.getLocales());
       const emitUpdatePropertyValue = (value) => {
         const properties = {};
         properties[props.property.propertyName] = value;
@@ -14440,11 +14568,18 @@ ${_html.style}
             }, null, 8, _hoisted_3$9)
           ]),
           vue.createElementVNode("div", null, [
-            vue.createVNode(vue.unref(bluesea.BSTextInput), {
+            _ctx.property.multiLang ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSMultiLangTextInput), {
+              key: 0,
+              locales: locales.value,
               "model-value": _ctx.value,
               width: "100%",
               "onUpdate:modelValue": emitUpdatePropertyValue
-            }, null, 8, ["model-value"])
+            }, null, 8, ["locales", "model-value"])) : (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSTextInput), {
+              key: 1,
+              "model-value": _ctx.value,
+              width: "100%",
+              "onUpdate:modelValue": emitUpdatePropertyValue
+            }, null, 8, ["model-value"]))
           ])
         ]);
       };
@@ -14628,16 +14763,16 @@ ${_html.style}
     },
     emits: ["update-property-value"],
     setup(__props, { emit: __emit }) {
-      bluesea.useModal();
       const pageBuilder = usePageBuilderEditor();
+      const modal = bluesea.useModal();
       const emit = __emit;
       const selectImage = () => {
-        PageBuilderEditorEvent.emit.requestImage({
-          pageBuilderId: pageBuilder.instanceId,
-          callback: (url) => {
+        const imageProvider = pageBuilder.getProvider("image");
+        if (imageProvider) {
+          imageProvider({ modal }, (url) => {
             emit("update-property-value", { image: url });
-          }
-        });
+          });
+        }
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
@@ -14763,9 +14898,19 @@ ${_html.style}
     default: _sfc_main$3
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$2 = { class: "bs-layout-vertical pb-part-add-modal" };
-  const _hoisted_2$2 = ["textContent"];
+  const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("div", {
+    class: "mb-8",
+    textContent: "Basic Widgets"
+  }, null, -1);
   const _hoisted_3$2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
   const _hoisted_4$1 = ["onClick", "textContent"];
+  const _hoisted_5$1 = { class: "group mb-16" };
+  const _hoisted_6$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+    class: "mb-8",
+    textContent: "Custom Widgets"
+  }, null, -1);
+  const _hoisted_7$1 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
+  const _hoisted_8$1 = ["onClick", "textContent"];
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidgetAddModal",
     props: {
@@ -14774,9 +14919,12 @@ ${_html.style}
     },
     emits: ["selectHandler"],
     setup(__props, { emit: __emit }) {
+      const props = __props;
       const emit = __emit;
       const modalHandle = bluesea.useModalHandle();
+      const customWidgets = vue.computed(() => props.pageBuilder.getCustomWidgets());
       const select = (partDefinition) => {
+        console.log(partDefinition);
         emit("selectHandler", partDefinition);
         modalHandle.close();
       };
@@ -14784,15 +14932,12 @@ ${_html.style}
         return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Add Block/Widget" }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$2, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.partDefinitionGroups, (group) => {
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(widgetPartDefinitions), (group) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: group.groupName,
                   class: "group mb-16"
                 }, [
-                  vue.createElementVNode("div", {
-                    class: "mb-8",
-                    textContent: vue.toDisplayString(group.caption)
-                  }, null, 8, _hoisted_2$2),
+                  _hoisted_2$2,
                   vue.createElementVNode("div", _hoisted_3$2, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.partDefinitions, (part) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
@@ -14804,7 +14949,20 @@ ${_html.style}
                     }), 128))
                   ])
                 ]);
-              }), 128))
+              }), 128)),
+              vue.createElementVNode("div", _hoisted_5$1, [
+                _hoisted_6$1,
+                vue.createElementVNode("div", _hoisted_7$1, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(customWidgets.value, (part) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: part.partName,
+                      class: "part",
+                      onClick: ($event) => select(part),
+                      textContent: vue.toDisplayString(part.caption)
+                    }, null, 8, _hoisted_8$1);
+                  }), 128))
+                ])
+              ])
             ])
           ]),
           _: 1
@@ -15024,9 +15182,10 @@ ${_html.style}
   exports2.PageBuilderViewerEvent = PageBuilderViewerEvent;
   exports2.Part = Part;
   exports2.PbCustomWidget = _sfc_main$B;
-  exports2.PbHtmlWidget = _sfc_main$3$1;
-  exports2.PbImageWidget = _sfc_main$5$1;
-  exports2.PbTextWidget = _sfc_main$4$1;
+  exports2.PbHtmlWidget = _sfc_main$4$1;
+  exports2.PbIframeWidget = _sfc_main$3$1;
+  exports2.PbImageWidget = _sfc_main$6$1;
+  exports2.PbTextWidget = _sfc_main$5$1;
   exports2.ROOT_TYPE = ROOT_TYPE$1;
   exports2.RootPart = RootPart;
   exports2.SECTION_TYPE = SECTION_TYPE$1;