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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/css/page-widget.scss +1 -0
  2. package/dist/{PbPropertyEditorColor-DK3I3ptt.js → PbPropertyEditorColor-ECWITss2.js} +1 -1
  3. package/dist/{PbPropertyEditorHtml-TFX1UdLf.js → PbPropertyEditorHtml-Bpa0EKp9.js} +1 -1
  4. package/dist/{PbPropertyEditorImage-C9-36J1r.js → PbPropertyEditorImage-D9sBmfaV.js} +1 -1
  5. package/dist/{PbPropertyEditorMultilineText-_sKX10aQ.js → PbPropertyEditorMultilineText-DfvOukAA.js} +1 -1
  6. package/dist/{PbPropertyEditorText-C5J3oD2S.js → PbPropertyEditorText-DmfUyQGj.js} +1 -1
  7. package/dist/{PbPropertyEditorYoutube-D0yzhz00.js → PbPropertyEditorYoutube-D0EpPwPV.js} +1 -1
  8. package/dist/{PbWidgetAddModal-DoIC_0FH.js → PbWidgetAddModal-BDzxd8h_.js} +1 -1
  9. package/dist/{index-JJUQKU18.js → index-DMnlRaKO.js} +88 -61
  10. package/dist/page-builder-editor.js +1 -1
  11. package/dist/page-builder-editor.umd.cjs +80 -53
  12. package/package.json +2 -2
package/css/page-widget.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  background-repeat: no-repeat;
6
6
  background-size: cover;
7
7
  pointer-events: auto !important;
8
+ min-height: 50px;
8
9
 
9
10
  * {
10
11
  pointer-events: none;
package/dist/{PbPropertyEditorColor-DK3I3ptt.js → PbPropertyEditorColor-ECWITss2.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
2
2
  import { BSTextInput } from "@g1cloud/bluesea";
3
- import { P as PbColorPicker } from "./index-JJUQKU18.js";
3
+ import { P as PbColorPicker } from "./index-DMnlRaKO.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-color" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
package/dist/{PbPropertyEditorHtml-TFX1UdLf.js → PbPropertyEditorHtml-Bpa0EKp9.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
2
2
  import { useModal } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-JJUQKU18.js";
3
+ import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
package/dist/{PbPropertyEditorImage-C9-36J1r.js → PbPropertyEditorImage-D9sBmfaV.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
2
- import { u as usePageBuilderEditor } from "./index-JJUQKU18.js";
2
+ import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
3
3
  import { useModal } from "@g1cloud/bluesea";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
package/dist/{PbPropertyEditorMultilineText-_sKX10aQ.js → PbPropertyEditorMultilineText-DfvOukAA.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
2
2
  import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-JJUQKU18.js";
3
+ import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
package/dist/{PbPropertyEditorText-C5J3oD2S.js → PbPropertyEditorText-DmfUyQGj.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
2
2
  import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-JJUQKU18.js";
3
+ import { u as usePageBuilderEditor } from "./index-DMnlRaKO.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
package/dist/{PbPropertyEditorYoutube-D0yzhz00.js → PbPropertyEditorYoutube-D0EpPwPV.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
2
2
  import { useModal } from "@g1cloud/bluesea";
3
- import { s as selectYoutubeVideo } from "./index-JJUQKU18.js";
3
+ import { s as selectYoutubeVideo } from "./index-DMnlRaKO.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
package/dist/{PbWidgetAddModal-DoIC_0FH.js → PbWidgetAddModal-BDzxd8h_.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
2
2
  import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
3
- import { w as widgetPartDefinitions } from "./index-JJUQKU18.js";
3
+ import { w as widgetPartDefinitions } from "./index-DMnlRaKO.js";
4
4
  const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
5
5
  const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
6
6
  const _hoisted_3 = ["onClick", "textContent"];
package/dist/{index-JJUQKU18.js → index-DMnlRaKO.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
3
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
- 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";
4
+ 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";
5
5
  import { notNull, BSTextInput, vClickOutside, useModal, BSSelect, BSTree, useContextMenu } from "@g1cloud/bluesea";
6
6
  import YouTube from "vue3-youtube";
7
7
  const create$5 = () => /* @__PURE__ */ new Map();
@@ -6715,7 +6715,7 @@ class Part {
6715
6715
  }
6716
6716
  }
6717
6717
  getStyles(isMobilePage) {
6718
- 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;
6718
+ 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;
6719
6719
  const style = {};
6720
6720
  if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
6721
6721
  style.flexDirection = "row";
@@ -6741,51 +6741,52 @@ class Part {
6741
6741
  if (justifyContent) style.justifyContent = justifyContent;
6742
6742
  if (alignSelf) style.alignSelf = alignSelf;
6743
6743
  }
6744
- if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
6745
- if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
6746
- if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
6747
- if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
6748
- if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
6749
- if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
6750
- if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6751
- if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
6752
- if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
6753
- if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6754
- if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
6755
- if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
6756
- if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
6757
- if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
6758
- if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
6759
- if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
6760
- if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
6761
- if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
6762
- if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
6763
- if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
6764
- if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
6765
- if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6766
- if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6767
- if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6768
- if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6769
- if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6770
- if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6771
- if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6772
- if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6773
- if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6774
- if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
6744
+ if ((_g = this.properties) == null ? void 0 : _g.gap) style.gap = this.properties.gap;
6745
+ if ((_h = this.properties) == null ? void 0 : _h.margin) style.margin = this.properties.margin;
6746
+ if ((_i = this.properties) == null ? void 0 : _i.marginLeft) style.marginLeft = this.properties.marginLeft;
6747
+ if ((_j = this.properties) == null ? void 0 : _j.marginRight) style.marginRight = this.properties.marginRight;
6748
+ if ((_k = this.properties) == null ? void 0 : _k.marginTop) style.marginTop = this.properties.marginTop;
6749
+ if ((_l = this.properties) == null ? void 0 : _l.marginBottom) style.marginBottom = this.properties.marginBottom;
6750
+ if ((_m = this.properties) == null ? void 0 : _m.padding) style.padding = this.properties.padding;
6751
+ if ((_n = this.properties) == null ? void 0 : _n.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6752
+ if ((_o = this.properties) == null ? void 0 : _o.paddingRight) style.paddingRight = this.properties.paddingRight;
6753
+ if ((_p = this.properties) == null ? void 0 : _p.paddingTop) style.paddingTop = this.properties.paddingTop;
6754
+ if ((_q = this.properties) == null ? void 0 : _q.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6755
+ if ((_r = this.properties) == null ? void 0 : _r.left) style.left = this.properties.left;
6756
+ if ((_s = this.properties) == null ? void 0 : _s.right) style.right = this.properties.right;
6757
+ if ((_t = this.properties) == null ? void 0 : _t.top) style.top = this.properties.top;
6758
+ if ((_u = this.properties) == null ? void 0 : _u.bottom) style.bottom = this.properties.bottom;
6759
+ if ((_v = this.properties) == null ? void 0 : _v.width) style.width = this.properties.width;
6760
+ if ((_w = this.properties) == null ? void 0 : _w.height) style.height = this.properties.height;
6761
+ if ((_x = this.properties) == null ? void 0 : _x.maxWidth) style.maxWidth = this.properties.maxWidth;
6762
+ if ((_y = this.properties) == null ? void 0 : _y.maxHeight) style.maxHeight = this.properties.maxHeight;
6763
+ if ((_z = this.properties) == null ? void 0 : _z.minWidth) style.minWidth = this.properties.minWidth;
6764
+ if ((_A = this.properties) == null ? void 0 : _A.minHeight) style.minHeight = this.properties.minHeight;
6765
+ if ((_B = this.properties) == null ? void 0 : _B.textAlign) style.textAlign = this.properties.textAlign;
6766
+ if ((_C = this.properties) == null ? void 0 : _C.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6767
+ if ((_D = this.properties) == null ? void 0 : _D.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6768
+ if ((_E = this.properties) == null ? void 0 : _E.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6769
+ if ((_F = this.properties) == null ? void 0 : _F.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6770
+ if ((_G = this.properties) == null ? void 0 : _G.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6771
+ if ((_H = this.properties) == null ? void 0 : _H.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6772
+ if ((_I = this.properties) == null ? void 0 : _I.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6773
+ if ((_J = this.properties) == null ? void 0 : _J.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6774
+ if ((_K = this.properties) == null ? void 0 : _K.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6775
+ if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderLeftWidth) {
6775
6776
  style.borderLeftStyle = "solid";
6776
- style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
6777
+ style.borderLeftColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
6777
6778
  }
6778
- if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
6779
+ if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderRightWidth) {
6779
6780
  style.borderRightStyle = "solid";
6780
- style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
6781
+ style.borderRightColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
6781
6782
  }
6782
- if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
6783
+ if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderTopWidth) {
6783
6784
  style.borderTopStyle = "solid";
6784
- style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
6785
+ style.borderTopColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
6785
6786
  }
6786
- if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
6787
+ if (((_R = this.properties) == null ? void 0 : _R.borderColor) && style.borderBottomWidth) {
6787
6788
  style.borderBottomStyle = "solid";
6788
- style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
6789
+ style.borderBottomColor = (_S = this.properties) == null ? void 0 : _S.borderColor;
6789
6790
  }
6790
6791
  return style;
6791
6792
  }
@@ -7234,20 +7235,37 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
7234
7235
  });
7235
7236
  const onReady = () => {
7236
7237
  };
7238
+ const isYTReady = ref(false);
7239
+ onMounted(() => {
7240
+ const interval = setInterval(() => {
7241
+ if (window.YT) {
7242
+ isYTReady.value = true;
7243
+ clearInterval(interval);
7244
+ }
7245
+ }, 500);
7246
+ });
7237
7247
  return (_ctx, _cache) => {
7238
7248
  var _a, _b;
7239
- return ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createBlock$1(unref(YouTube), {
7240
- key: 0,
7241
- ref: "youtube",
7242
- src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
7243
- style: normalizeStyle(style.value),
7244
- class: "youtube",
7245
- height: "100%",
7246
- width: "100%",
7247
- onReady
7248
- }, null, 8, ["src", "style"])) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
7249
- createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
7250
- ]))) : createCommentVNode("", true);
7249
+ return openBlock(), createElementBlock(Fragment, null, [
7250
+ (openBlock(), createBlock$1(resolveDynamicComponent("script"), {
7251
+ id: "youtube-iframe-js-api-script",
7252
+ src: "https://www.youtube.com/iframe_api"
7253
+ })),
7254
+ ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
7255
+ isYTReady.value ? (openBlock(), createBlock$1(unref(YouTube), {
7256
+ key: 0,
7257
+ ref: "youtube",
7258
+ src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
7259
+ style: normalizeStyle(style.value),
7260
+ class: "youtube",
7261
+ height: "100%",
7262
+ width: "100%",
7263
+ onReady
7264
+ }, null, 8, ["src", "style"])) : createCommentVNode("", true)
7265
+ ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
7266
+ createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
7267
+ ]))) : createCommentVNode("", true)
7268
+ ], 64);
7251
7269
  };
7252
7270
  }
7253
7271
  });
@@ -8153,15 +8171,15 @@ class PartManager {
8153
8171
  const defaultPartPropertyEditors = () => {
8154
8172
  return {
8155
8173
  "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
8156
- "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-C5J3oD2S.js")),
8174
+ "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DmfUyQGj.js")),
8157
8175
  "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
8158
8176
  "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
8159
- "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-_sKX10aQ.js")),
8177
+ "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DfvOukAA.js")),
8160
8178
  "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
8161
- "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DK3I3ptt.js")),
8162
- "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-C9-36J1r.js")),
8163
- "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-TFX1UdLf.js")),
8164
- "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-D0yzhz00.js"))
8179
+ "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-ECWITss2.js")),
8180
+ "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D9sBmfaV.js")),
8181
+ "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Bpa0EKp9.js")),
8182
+ "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-D0EpPwPV.js"))
8165
8183
  };
8166
8184
  };
8167
8185
  const getPropertyValueOfParts = (parts, propertyName) => {
@@ -11981,6 +11999,11 @@ const layoutGroup = () => {
11981
11999
  caption: "Wrap",
11982
12000
  propertyType: "select",
11983
12001
  params: "nowrap,wrap"
12002
+ },
12003
+ {
12004
+ propertyName: "gap",
12005
+ caption: "Gap",
12006
+ propertyType: "text"
11984
12007
  }
11985
12008
  ]
11986
12009
  };
@@ -12295,7 +12318,7 @@ const widgets = [
12295
12318
  },
12296
12319
  {
12297
12320
  propertyName: "altText",
12298
- caption: "ALT Text",
12321
+ caption: "Alt Text",
12299
12322
  propertyType: "text",
12300
12323
  params: "",
12301
12324
  multiLang: true
@@ -12510,7 +12533,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
12510
12533
  let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
12511
12534
  const openWidgetAddModal = (modal, args, callback) => {
12512
12535
  modal.openModal({
12513
- component: defineAsyncComponent(() => import("./PbWidgetAddModal-DoIC_0FH.js")),
12536
+ component: defineAsyncComponent(() => import("./PbWidgetAddModal-BDzxd8h_.js")),
12514
12537
  style: {
12515
12538
  width: "80%",
12516
12539
  height: "80%",
@@ -14552,7 +14575,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
14552
14575
  };
14553
14576
  }
14554
14577
  });
14555
- const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\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\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\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\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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\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\n.pb-section-static .pb-widget {\n outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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 pointer-events: auto !important;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\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 pointer-events: auto !important;\n}\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 pointer-events: auto !important;\n}\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\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-image-widget {\n width: 100%;\n}\n\n.pb-image-widget .image {\n width: 100%;\n}\n\n.pb-image-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\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\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\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\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\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\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\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\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\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\n.pb-add-section-handle > i {\n font-style: normal;\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
14578
+ const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\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\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\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\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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\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\n.pb-section-static .pb-widget {\n outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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 pointer-events: auto !important;\n min-height: 50px;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\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 pointer-events: auto !important;\n}\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 pointer-events: auto !important;\n}\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\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-image-widget {\n width: 100%;\n}\n\n.pb-image-widget .image {\n width: 100%;\n}\n\n.pb-image-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\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\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\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\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\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\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\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\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\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\n.pb-add-section-handle > i {\n font-style: normal;\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
14556
14579
  const _hoisted_1$2 = ["width"];
14557
14580
  const _sfc_main$2 = /* @__PURE__ */ defineComponent({
14558
14581
  __name: "PbPageFrame",
@@ -14772,6 +14795,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
14772
14795
  });
14773
14796
  return (_ctx, _cache) => {
14774
14797
  return openBlock(), createElementBlock("div", _hoisted_1, [
14798
+ (openBlock(), createBlock$1(resolveDynamicComponent("script"), {
14799
+ id: "youtube-iframe-js-api-script",
14800
+ src: "https://www.youtube.com/iframe_api"
14801
+ })),
14775
14802
  createVNode(_sfc_main$9, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
14776
14803
  createElementVNode("div", _hoisted_2, [
14777
14804
  createVNode(_sfc_main$8),
package/dist/page-builder-editor.js CHANGED
@@ -1,4 +1,4 @@
1
- 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-JJUQKU18.js";
1
+ 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";
2
2
  export {
3
3
  B as BLOCK_TYPE,
4
4
  b as Block,
package/dist/page-builder-editor.umd.cjs CHANGED
@@ -6716,7 +6716,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
6716
6716
  }
6717
6717
  }
6718
6718
  getStyles(isMobilePage) {
6719
- 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;
6719
+ 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;
6720
6720
  const style = {};
6721
6721
  if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
6722
6722
  style.flexDirection = "row";
@@ -6742,51 +6742,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
6742
6742
  if (justifyContent) style.justifyContent = justifyContent;
6743
6743
  if (alignSelf) style.alignSelf = alignSelf;
6744
6744
  }
6745
- if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
6746
- if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
6747
- if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
6748
- if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
6749
- if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
6750
- if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
6751
- if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6752
- if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
6753
- if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
6754
- if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6755
- if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
6756
- if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
6757
- if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
6758
- if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
6759
- if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
6760
- if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
6761
- if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
6762
- if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
6763
- if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
6764
- if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
6765
- if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
6766
- if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6767
- if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6768
- if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6769
- if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6770
- if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6771
- if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6772
- if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6773
- if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6774
- if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6775
- if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
6745
+ if ((_g = this.properties) == null ? void 0 : _g.gap) style.gap = this.properties.gap;
6746
+ if ((_h = this.properties) == null ? void 0 : _h.margin) style.margin = this.properties.margin;
6747
+ if ((_i = this.properties) == null ? void 0 : _i.marginLeft) style.marginLeft = this.properties.marginLeft;
6748
+ if ((_j = this.properties) == null ? void 0 : _j.marginRight) style.marginRight = this.properties.marginRight;
6749
+ if ((_k = this.properties) == null ? void 0 : _k.marginTop) style.marginTop = this.properties.marginTop;
6750
+ if ((_l = this.properties) == null ? void 0 : _l.marginBottom) style.marginBottom = this.properties.marginBottom;
6751
+ if ((_m = this.properties) == null ? void 0 : _m.padding) style.padding = this.properties.padding;
6752
+ if ((_n = this.properties) == null ? void 0 : _n.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6753
+ if ((_o = this.properties) == null ? void 0 : _o.paddingRight) style.paddingRight = this.properties.paddingRight;
6754
+ if ((_p = this.properties) == null ? void 0 : _p.paddingTop) style.paddingTop = this.properties.paddingTop;
6755
+ if ((_q = this.properties) == null ? void 0 : _q.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6756
+ if ((_r = this.properties) == null ? void 0 : _r.left) style.left = this.properties.left;
6757
+ if ((_s = this.properties) == null ? void 0 : _s.right) style.right = this.properties.right;
6758
+ if ((_t = this.properties) == null ? void 0 : _t.top) style.top = this.properties.top;
6759
+ if ((_u = this.properties) == null ? void 0 : _u.bottom) style.bottom = this.properties.bottom;
6760
+ if ((_v = this.properties) == null ? void 0 : _v.width) style.width = this.properties.width;
6761
+ if ((_w = this.properties) == null ? void 0 : _w.height) style.height = this.properties.height;
6762
+ if ((_x = this.properties) == null ? void 0 : _x.maxWidth) style.maxWidth = this.properties.maxWidth;
6763
+ if ((_y = this.properties) == null ? void 0 : _y.maxHeight) style.maxHeight = this.properties.maxHeight;
6764
+ if ((_z = this.properties) == null ? void 0 : _z.minWidth) style.minWidth = this.properties.minWidth;
6765
+ if ((_A = this.properties) == null ? void 0 : _A.minHeight) style.minHeight = this.properties.minHeight;
6766
+ if ((_B = this.properties) == null ? void 0 : _B.textAlign) style.textAlign = this.properties.textAlign;
6767
+ if ((_C = this.properties) == null ? void 0 : _C.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6768
+ if ((_D = this.properties) == null ? void 0 : _D.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6769
+ if ((_E = this.properties) == null ? void 0 : _E.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6770
+ if ((_F = this.properties) == null ? void 0 : _F.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6771
+ if ((_G = this.properties) == null ? void 0 : _G.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6772
+ if ((_H = this.properties) == null ? void 0 : _H.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6773
+ if ((_I = this.properties) == null ? void 0 : _I.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6774
+ if ((_J = this.properties) == null ? void 0 : _J.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6775
+ if ((_K = this.properties) == null ? void 0 : _K.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6776
+ if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderLeftWidth) {
6776
6777
  style.borderLeftStyle = "solid";
6777
- style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
6778
+ style.borderLeftColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
6778
6779
  }
6779
- if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
6780
+ if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderRightWidth) {
6780
6781
  style.borderRightStyle = "solid";
6781
- style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
6782
+ style.borderRightColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
6782
6783
  }
6783
- if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
6784
+ if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderTopWidth) {
6784
6785
  style.borderTopStyle = "solid";
6785
- style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
6786
+ style.borderTopColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
6786
6787
  }
6787
- if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
6788
+ if (((_R = this.properties) == null ? void 0 : _R.borderColor) && style.borderBottomWidth) {
6788
6789
  style.borderBottomStyle = "solid";
6789
- style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
6790
+ style.borderBottomColor = (_S = this.properties) == null ? void 0 : _S.borderColor;
6790
6791
  }
6791
6792
  return style;
6792
6793
  }
@@ -7235,20 +7236,37 @@ ${_html.style}
7235
7236
  });
7236
7237
  const onReady = () => {
7237
7238
  };
7239
+ const isYTReady = vue.ref(false);
7240
+ vue.onMounted(() => {
7241
+ const interval = setInterval(() => {
7242
+ if (window.YT) {
7243
+ isYTReady.value = true;
7244
+ clearInterval(interval);
7245
+ }
7246
+ }, 500);
7247
+ });
7238
7248
  return (_ctx, _cache) => {
7239
7249
  var _a, _b;
7240
- return ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
7241
- key: 0,
7242
- ref: "youtube",
7243
- src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
7244
- style: vue.normalizeStyle(style.value),
7245
- class: "youtube",
7246
- height: "100%",
7247
- width: "100%",
7248
- onReady
7249
- }, null, 8, ["src", "style"])) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
7250
- vue.createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
7251
- ]))) : vue.createCommentVNode("", true);
7250
+ return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
7251
+ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("script"), {
7252
+ id: "youtube-iframe-js-api-script",
7253
+ src: "https://www.youtube.com/iframe_api"
7254
+ })),
7255
+ ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
7256
+ isYTReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
7257
+ key: 0,
7258
+ ref: "youtube",
7259
+ src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
7260
+ style: vue.normalizeStyle(style.value),
7261
+ class: "youtube",
7262
+ height: "100%",
7263
+ width: "100%",
7264
+ onReady
7265
+ }, null, 8, ["src", "style"])) : vue.createCommentVNode("", true)
7266
+ ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
7267
+ vue.createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
7268
+ ]))) : vue.createCommentVNode("", true)
7269
+ ], 64);
7252
7270
  };
7253
7271
  }
7254
7272
  });
@@ -11982,6 +12000,11 @@ ${_html.style}
11982
12000
  caption: "Wrap",
11983
12001
  propertyType: "select",
11984
12002
  params: "nowrap,wrap"
12003
+ },
12004
+ {
12005
+ propertyName: "gap",
12006
+ caption: "Gap",
12007
+ propertyType: "text"
11985
12008
  }
11986
12009
  ]
11987
12010
  };
@@ -12296,7 +12319,7 @@ ${_html.style}
12296
12319
  },
12297
12320
  {
12298
12321
  propertyName: "altText",
12299
- caption: "ALT Text",
12322
+ caption: "Alt Text",
12300
12323
  propertyType: "text",
12301
12324
  params: "",
12302
12325
  multiLang: true
@@ -14553,7 +14576,7 @@ ${_html.style}
14553
14576
  };
14554
14577
  }
14555
14578
  });
14556
- const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\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\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\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\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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\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\n.pb-section-static .pb-widget {\n outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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 pointer-events: auto !important;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\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 pointer-events: auto !important;\n}\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 pointer-events: auto !important;\n}\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\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-image-widget {\n width: 100%;\n}\n\n.pb-image-widget .image {\n width: 100%;\n}\n\n.pb-image-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\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\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\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\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\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\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\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\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\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\n.pb-add-section-handle > i {\n font-style: normal;\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
14579
+ const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\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\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\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\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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\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\n.pb-section-static .pb-widget {\n outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\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 pointer-events: auto !important;\n min-height: 50px;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\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 pointer-events: auto !important;\n}\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 pointer-events: auto !important;\n}\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\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-image-widget {\n width: 100%;\n}\n\n.pb-image-widget .image {\n width: 100%;\n}\n\n.pb-image-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\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\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\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\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\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\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\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\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\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\n.pb-add-section-handle > i {\n font-style: normal;\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
14557
14580
  const _hoisted_1$g = ["width"];
14558
14581
  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
14559
14582
  __name: "PbPageFrame",
@@ -14773,6 +14796,10 @@ ${_html.style}
14773
14796
  });
14774
14797
  return (_ctx, _cache) => {
14775
14798
  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
14799
+ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("script"), {
14800
+ id: "youtube-iframe-js-api-script",
14801
+ src: "https://www.youtube.com/iframe_api"
14802
+ })),
14776
14803
  vue.createVNode(_sfc_main$n, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
14777
14804
  vue.createElementVNode("div", _hoisted_2$d, [
14778
14805
  vue.createVNode(_sfc_main$m),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@g1cloud/page-builder-editor",
3
3
  "private": false,
4
- "version": "1.0.0-alpha.41",
4
+ "version": "1.0.0-alpha.43",
5
5
  "engins": {
6
6
  "node": ">= 20.0.0"
7
7
  },
@@ -30,7 +30,7 @@
30
30
  "vue-router": "^4.4.3",
31
31
  "vue3-click-away": "^1.2.4",
32
32
  "yjs": "^13.6.14",
33
- "@g1cloud/page-builder-viewer": "1.0.0-alpha.41"
33
+ "@g1cloud/page-builder-viewer": "1.0.0-alpha.43"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@types/node": "^20.12.7",