@g1cloud/page-builder-editor 1.0.0-alpha.42 → 1.0.0-alpha.43

package/dist/{PbPropertyEditorColor-gKz7L5Vh.js → PbPropertyEditorColor-ECWITss2.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-BbIzDh8j.js";
+import { P as PbColorPicker } from "./index-DMnlRaKO.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-C0As3WsD.js → PbPropertyEditorHtml-Bpa0EKp9.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BbIzDh8j.js";
+import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorImage-BtbEwUi1.js → PbPropertyEditorImage-D9sBmfaV.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { u as usePageBuilderEditor } from "./index-BbIzDh8j.js";
+import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
 import { useModal } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-DsXFyiQW.js → PbPropertyEditorMultilineText-DfvOukAA.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BbIzDh8j.js";
+import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorText-VZuU9jHY.js → PbPropertyEditorText-DmfUyQGj.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BbIzDh8j.js";
+import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorYoutube-C2L0H_Y4.js → PbPropertyEditorYoutube-D0EpPwPV.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-BbIzDh8j.js";
+import { s as selectYoutubeVideo } from "./index-DMnlRaKO.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbWidgetAddModal-BMmYmDVy.js → PbWidgetAddModal-BDzxd8h_.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-BbIzDh8j.js";
+import { w as widgetPartDefinitions } from "./index-DMnlRaKO.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];

package/dist/{index-BbIzDh8j.js → index-DMnlRaKO.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, unref, provide, inject, watch, renderList, resolveDynamicComponent, normalizeProps, mergeProps, normalizeClass, reactive, defineAsyncComponent, withDirectives, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
+import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, unref, provide, inject, watch, renderList, normalizeProps, mergeProps, normalizeClass, reactive, defineAsyncComponent, withDirectives, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
 import { notNull, BSTextInput, vClickOutside, useModal, BSSelect, BSTree, useContextMenu } from "@g1cloud/bluesea";
 import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
@@ -6715,7 +6715,7 @@ class Part {
     }
   }
   getStyles(isMobilePage) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S;
     const style = {};
     if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
       style.flexDirection = "row";
@@ -6741,51 +6741,52 @@ class Part {
       if (justifyContent) style.justifyContent = justifyContent;
       if (alignSelf) style.alignSelf = alignSelf;
     }
-    if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
-    if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
-    if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
-    if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
-    if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
-    if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
-    if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
-    if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
-    if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
-    if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
-    if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
-    if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
-    if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
-    if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
-    if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
-    if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
-    if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
-    if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
-    if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
-    if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
-    if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
-    if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
-    if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
-    if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
-    if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
-    if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
-    if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-    if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
-    if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-    if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-    if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
+    if ((_g = this.properties) == null ? void 0 : _g.gap) style.gap = this.properties.gap;
+    if ((_h = this.properties) == null ? void 0 : _h.margin) style.margin = this.properties.margin;
+    if ((_i = this.properties) == null ? void 0 : _i.marginLeft) style.marginLeft = this.properties.marginLeft;
+    if ((_j = this.properties) == null ? void 0 : _j.marginRight) style.marginRight = this.properties.marginRight;
+    if ((_k = this.properties) == null ? void 0 : _k.marginTop) style.marginTop = this.properties.marginTop;
+    if ((_l = this.properties) == null ? void 0 : _l.marginBottom) style.marginBottom = this.properties.marginBottom;
+    if ((_m = this.properties) == null ? void 0 : _m.padding) style.padding = this.properties.padding;
+    if ((_n = this.properties) == null ? void 0 : _n.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
+    if ((_o = this.properties) == null ? void 0 : _o.paddingRight) style.paddingRight = this.properties.paddingRight;
+    if ((_p = this.properties) == null ? void 0 : _p.paddingTop) style.paddingTop = this.properties.paddingTop;
+    if ((_q = this.properties) == null ? void 0 : _q.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
+    if ((_r = this.properties) == null ? void 0 : _r.left) style.left = this.properties.left;
+    if ((_s = this.properties) == null ? void 0 : _s.right) style.right = this.properties.right;
+    if ((_t = this.properties) == null ? void 0 : _t.top) style.top = this.properties.top;
+    if ((_u = this.properties) == null ? void 0 : _u.bottom) style.bottom = this.properties.bottom;
+    if ((_v = this.properties) == null ? void 0 : _v.width) style.width = this.properties.width;
+    if ((_w = this.properties) == null ? void 0 : _w.height) style.height = this.properties.height;
+    if ((_x = this.properties) == null ? void 0 : _x.maxWidth) style.maxWidth = this.properties.maxWidth;
+    if ((_y = this.properties) == null ? void 0 : _y.maxHeight) style.maxHeight = this.properties.maxHeight;
+    if ((_z = this.properties) == null ? void 0 : _z.minWidth) style.minWidth = this.properties.minWidth;
+    if ((_A = this.properties) == null ? void 0 : _A.minHeight) style.minHeight = this.properties.minHeight;
+    if ((_B = this.properties) == null ? void 0 : _B.textAlign) style.textAlign = this.properties.textAlign;
+    if ((_C = this.properties) == null ? void 0 : _C.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
+    if ((_D = this.properties) == null ? void 0 : _D.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
+    if ((_E = this.properties) == null ? void 0 : _E.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
+    if ((_F = this.properties) == null ? void 0 : _F.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
+    if ((_G = this.properties) == null ? void 0 : _G.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
+    if ((_H = this.properties) == null ? void 0 : _H.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+    if ((_I = this.properties) == null ? void 0 : _I.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
+    if ((_J = this.properties) == null ? void 0 : _J.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+    if ((_K = this.properties) == null ? void 0 : _K.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+    if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderLeftWidth) {
       style.borderLeftStyle = "solid";
-      style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
+      style.borderLeftColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
     }
-    if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
+    if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderRightWidth) {
       style.borderRightStyle = "solid";
-      style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
+      style.borderRightColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
     }
-    if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
+    if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderTopWidth) {
       style.borderTopStyle = "solid";
-      style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
+      style.borderTopColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
     }
-    if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
+    if (((_R = this.properties) == null ? void 0 : _R.borderColor) && style.borderBottomWidth) {
       style.borderBottomStyle = "solid";
-      style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
+      style.borderBottomColor = (_S = this.properties) == null ? void 0 : _S.borderColor;
     }
     return style;
   }
@@ -7234,20 +7235,37 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     });
     const onReady = () => {
     };
+    const isYTReady = ref(false);
+    onMounted(() => {
+      const interval = setInterval(() => {
+        if (window.YT) {
+          isYTReady.value = true;
+          clearInterval(interval);
+        }
+      }, 500);
+    });
     return (_ctx, _cache) => {
       var _a, _b;
-      return ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createBlock$1(unref(YouTube), {
-        key: 0,
-        ref: "youtube",
-        src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
-        style: normalizeStyle(style.value),
-        class: "youtube",
-        height: "100%",
-        width: "100%",
-        onReady
-      }, null, 8, ["src", "style"])) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
-        createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
-      ]))) : createCommentVNode("", true);
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(), createBlock$1(resolveDynamicComponent("script"), {
+          id: "youtube-iframe-js-api-script",
+          src: "https://www.youtube.com/iframe_api"
+        })),
+        ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          isYTReady.value ? (openBlock(), createBlock$1(unref(YouTube), {
+            key: 0,
+            ref: "youtube",
+            src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
+            style: normalizeStyle(style.value),
+            class: "youtube",
+            height: "100%",
+            width: "100%",
+            onReady
+          }, null, 8, ["src", "style"])) : createCommentVNode("", true)
+        ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
+          createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
+        ]))) : createCommentVNode("", true)
+      ], 64);
     };
   }
 });
@@ -8153,15 +8171,15 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-VZuU9jHY.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DmfUyQGj.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DsXFyiQW.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DfvOukAA.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-gKz7L5Vh.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BtbEwUi1.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-C0As3WsD.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-C2L0H_Y4.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-ECWITss2.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D9sBmfaV.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Bpa0EKp9.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-D0EpPwPV.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -11981,6 +11999,11 @@ const layoutGroup = () => {
         caption: "Wrap",
         propertyType: "select",
         params: "nowrap,wrap"
+      },
+      {
+        propertyName: "gap",
+        caption: "Gap",
+        propertyType: "text"
       }
     ]
   };
@@ -12295,7 +12318,7 @@ const widgets = [
           },
           {
             propertyName: "altText",
-            caption: "ALT Text",
+            caption: "Alt Text",
             propertyType: "text",
             params: "",
             multiLang: true
@@ -12510,7 +12533,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BMmYmDVy.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BDzxd8h_.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -14772,6 +14795,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(), createBlock$1(resolveDynamicComponent("script"), {
+          id: "youtube-iframe-js-api-script",
+          src: "https://www.youtube.com/iframe_api"
+        })),
         createVNode(_sfc_main$9, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
         createElementVNode("div", _hoisted_2, [
           createVNode(_sfc_main$8),

package/dist/page-builder-editor.js

@@ -1,4 +1,4 @@
-import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-BbIzDh8j.js";
+import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-DMnlRaKO.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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

@@ -6716,7 +6716,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     getStyles(isMobilePage) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S;
       const style = {};
       if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
         style.flexDirection = "row";
@@ -6742,51 +6742,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (justifyContent) style.justifyContent = justifyContent;
         if (alignSelf) style.alignSelf = alignSelf;
       }
-      if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
-      if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
-      if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
-      if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
-      if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
-      if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
-      if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
-      if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
-      if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
-      if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
-      if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
-      if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
-      if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
-      if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
-      if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
-      if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
-      if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
-      if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
-      if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
-      if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
-      if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
-      if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
-      if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
-      if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
-      if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
-      if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
-      if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-      if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
-      if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-      if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-      if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
+      if ((_g = this.properties) == null ? void 0 : _g.gap) style.gap = this.properties.gap;
+      if ((_h = this.properties) == null ? void 0 : _h.margin) style.margin = this.properties.margin;
+      if ((_i = this.properties) == null ? void 0 : _i.marginLeft) style.marginLeft = this.properties.marginLeft;
+      if ((_j = this.properties) == null ? void 0 : _j.marginRight) style.marginRight = this.properties.marginRight;
+      if ((_k = this.properties) == null ? void 0 : _k.marginTop) style.marginTop = this.properties.marginTop;
+      if ((_l = this.properties) == null ? void 0 : _l.marginBottom) style.marginBottom = this.properties.marginBottom;
+      if ((_m = this.properties) == null ? void 0 : _m.padding) style.padding = this.properties.padding;
+      if ((_n = this.properties) == null ? void 0 : _n.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
+      if ((_o = this.properties) == null ? void 0 : _o.paddingRight) style.paddingRight = this.properties.paddingRight;
+      if ((_p = this.properties) == null ? void 0 : _p.paddingTop) style.paddingTop = this.properties.paddingTop;
+      if ((_q = this.properties) == null ? void 0 : _q.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
+      if ((_r = this.properties) == null ? void 0 : _r.left) style.left = this.properties.left;
+      if ((_s = this.properties) == null ? void 0 : _s.right) style.right = this.properties.right;
+      if ((_t = this.properties) == null ? void 0 : _t.top) style.top = this.properties.top;
+      if ((_u = this.properties) == null ? void 0 : _u.bottom) style.bottom = this.properties.bottom;
+      if ((_v = this.properties) == null ? void 0 : _v.width) style.width = this.properties.width;
+      if ((_w = this.properties) == null ? void 0 : _w.height) style.height = this.properties.height;
+      if ((_x = this.properties) == null ? void 0 : _x.maxWidth) style.maxWidth = this.properties.maxWidth;
+      if ((_y = this.properties) == null ? void 0 : _y.maxHeight) style.maxHeight = this.properties.maxHeight;
+      if ((_z = this.properties) == null ? void 0 : _z.minWidth) style.minWidth = this.properties.minWidth;
+      if ((_A = this.properties) == null ? void 0 : _A.minHeight) style.minHeight = this.properties.minHeight;
+      if ((_B = this.properties) == null ? void 0 : _B.textAlign) style.textAlign = this.properties.textAlign;
+      if ((_C = this.properties) == null ? void 0 : _C.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
+      if ((_D = this.properties) == null ? void 0 : _D.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
+      if ((_E = this.properties) == null ? void 0 : _E.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
+      if ((_F = this.properties) == null ? void 0 : _F.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
+      if ((_G = this.properties) == null ? void 0 : _G.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
+      if ((_H = this.properties) == null ? void 0 : _H.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+      if ((_I = this.properties) == null ? void 0 : _I.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
+      if ((_J = this.properties) == null ? void 0 : _J.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+      if ((_K = this.properties) == null ? void 0 : _K.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+      if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderLeftWidth) {
         style.borderLeftStyle = "solid";
-        style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
+        style.borderLeftColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
       }
-      if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
+      if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderRightWidth) {
         style.borderRightStyle = "solid";
-        style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
+        style.borderRightColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
       }
-      if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
+      if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderTopWidth) {
         style.borderTopStyle = "solid";
-        style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
+        style.borderTopColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
       }
-      if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
+      if (((_R = this.properties) == null ? void 0 : _R.borderColor) && style.borderBottomWidth) {
         style.borderBottomStyle = "solid";
-        style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
+        style.borderBottomColor = (_S = this.properties) == null ? void 0 : _S.borderColor;
       }
       return style;
     }
@@ -7235,20 +7236,37 @@ ${_html.style}
       });
       const onReady = () => {
       };
+      const isYTReady = vue.ref(false);
+      vue.onMounted(() => {
+        const interval = setInterval(() => {
+          if (window.YT) {
+            isYTReady.value = true;
+            clearInterval(interval);
+          }
+        }, 500);
+      });
       return (_ctx, _cache) => {
         var _a, _b;
-        return ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
-          key: 0,
-          ref: "youtube",
-          src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
-          style: vue.normalizeStyle(style.value),
-          class: "youtube",
-          height: "100%",
-          width: "100%",
-          onReady
-        }, null, 8, ["src", "style"])) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
-          vue.createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
-        ]))) : vue.createCommentVNode("", true);
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("script"), {
+            id: "youtube-iframe-js-api-script",
+            src: "https://www.youtube.com/iframe_api"
+          })),
+          ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            isYTReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
+              key: 0,
+              ref: "youtube",
+              src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
+              style: vue.normalizeStyle(style.value),
+              class: "youtube",
+              height: "100%",
+              width: "100%",
+              onReady
+            }, null, 8, ["src", "style"])) : vue.createCommentVNode("", true)
+          ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
+            vue.createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
+          ]))) : vue.createCommentVNode("", true)
+        ], 64);
       };
     }
   });
@@ -11982,6 +12000,11 @@ ${_html.style}
           caption: "Wrap",
           propertyType: "select",
           params: "nowrap,wrap"
+        },
+        {
+          propertyName: "gap",
+          caption: "Gap",
+          propertyType: "text"
         }
       ]
     };
@@ -12296,7 +12319,7 @@ ${_html.style}
             },
             {
               propertyName: "altText",
-              caption: "ALT Text",
+              caption: "Alt Text",
               propertyType: "text",
               params: "",
               multiLang: true
@@ -14773,6 +14796,10 @@ ${_html.style}
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("script"), {
+            id: "youtube-iframe-js-api-script",
+            src: "https://www.youtube.com/iframe_api"
+          })),
           vue.createVNode(_sfc_main$n, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
           vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(_sfc_main$m),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.42",
+  "version": "1.0.0-alpha.43",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -30,7 +30,7 @@
     "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.42"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.43"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",