@orangelogic/design-system 2.21.0-pr77329.3 → 2.22.0-pr77364.9

package/library/components/types.js

@@ -142035,7 +142035,7 @@ var zVt = Object.defineProperty, FVt = Object.getOwnPropertyDescriptor, Ur = (n,
 };
 let Ar = class extends Fn {
   constructor() {
-    super(), this.localize = new nr(this), this.configsController = new ca(this.localize), this.initialData = "", this.device = "desktop", this.devices = HQ, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.mode = qd.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = eLt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleDataSourceChange = this.handleDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
+    super(), this.localize = new nr(this), this.configsController = new ca(this.localize), this.initialData = "", this.device = "desktop", this.devices = HQ, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.mode = qd.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = eLt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleRootToolbarRightClick = this.handleRootToolbarRightClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleDataSourceChange = this.handleDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
   }
   get teamSpaceRoles() {
     return this._teamSpaceRoles;
@@ -142192,10 +142192,13 @@ let Ar = class extends Fn {
    * Deselect all components in the content builder.
    */
   deselectAll() {
-    if (!this.contentBuilder)
-      return;
-    const n = this.contentBuilder.getSelected();
-    n && n.trigger("disable"), this.hoveredComponent = void 0, this.contentBuilder.select();
+    if (this.contentBuilder)
+      try {
+        const n = this.contentBuilder.getSelected();
+        n && n.trigger("disable"), this.hoveredComponent = void 0, this.contentBuilder.select();
+      } catch {
+        throw new Error("handle deselect all error");
+      }
   }
   async fetchTeamSpaceRoles() {
     return await j3t();
@@ -142339,6 +142342,10 @@ let Ar = class extends Fn {
     const n = this.contentBuilder?.getSelected(), e = this.childSelected;
     n && !e && this.contentBuilder?.trigger("component:selected", n), this.toggleToolbarAndBadge();
   }
+  handleRootToolbarRightClick(n) {
+    const e = n.target;
+    n.button === 2 && e instanceof Element && e.closest(".gjs-toolbar") && (n.preventDefault(), n.stopImmediatePropagation());
+  }
   handleCanvasClick(n) {
     n.target.closest("[data-cms5-page-viewer__page-content]") || this.deselectAll();
   }
@@ -142349,12 +142356,20 @@ let Ar = class extends Fn {
       if (!t || t.get("type") === "wrapper" || t === i)
         this.deselectAll();
       else if (t.get("selectable"))
-        this.contentBuilder.select(t);
+        try {
+          this.contentBuilder.select(t);
+        } catch {
+          throw new Error("handle canvas keydown error");
+        }
       else {
         let o = t.parent();
         for (; o && o !== r && o !== i; ) {
           if (o.get("selectable")) {
-            this.contentBuilder.select(o);
+            try {
+              this.contentBuilder.select(o);
+            } catch {
+              throw new Error("handle canvas keydown error 2");
+            }
             return;
           }
           o = o.parent();
@@ -142503,27 +142518,31 @@ let Ar = class extends Fn {
         return;
       this.contentBuilder.Canvas.getFrameEl().setAttribute("title", "content-builder-frame"), this.updateFrameSize(), this._teamSpaceRoles = await this.fetchTeamSpaceRoles();
     }), this.contentBuilder?.on("load", async (t) => {
-      t.UndoManager.stop();
-      const r = this.canvasDocument?.getElementById("Form1");
-      r && r.addEventListener("scroll", this.handleCanvasScroll);
+      this.contentBuilder?.getEl()?.addEventListener(
+        "mousedown",
+        this.handleRootToolbarRightClick,
+        !0
+      ), t.UndoManager.stop();
+      const i = this.canvasDocument?.getElementById("Form1");
+      i && i.addEventListener("scroll", this.handleCanvasScroll);
       try {
         t.getWrapper()?.set({
           highlightable: !1,
           hoverable: !1,
           selectable: !1
         });
-        const i = t.getWrapper(), o = t.Canvas.getBody().querySelector(
+        const o = t.getWrapper(), a = t.Canvas.getBody().querySelector(
           "[data-cms5-page-viewer]"
         );
-        if (!i)
+        if (!o)
           return;
-        let a = "12px";
-        if (o) {
-          const l = getComputedStyle(o).getPropertyValue("--row-gap").trim();
-          l && (a = l);
+        let s = "12px";
+        if (a) {
+          const c = getComputedStyle(a).getPropertyValue("--row-gap").trim();
+          c && (s = c);
         }
-        const s = Number.parseFloat(a || "12px");
-        this.defaultRowGap = Number.isFinite(s) ? s : 12, i.findType(ot.Column).length === 0 ? t.addComponents({
+        const l = Number.parseFloat(s || "12px");
+        this.defaultRowGap = Number.isFinite(l) ? l : 12, o.findType(ot.Column).length === 0 ? t.addComponents({
           copyable: !1,
           editable: !1,
           highlightable: !1,
@@ -142533,12 +142552,12 @@ let Ar = class extends Fn {
           style: {
             "--flex-content": "none",
             "--padding": "4px",
-            "--row-gap": a
+            "--row-gap": s
           },
           toolbar: [],
           type: ot.Column
-        }) : i.findType(ot.Column)?.forEach((l, c) => {
-          c === 0 && l.set({
+        }) : o.findType(ot.Column)?.forEach((c, d) => {
+          d === 0 && c.set({
             copyable: !1,
             editable: !1,
             highlightable: !1,
@@ -142548,14 +142567,14 @@ let Ar = class extends Fn {
             style: {
               "--flex-content": "none",
               "--padding": "4px",
-              "--row-gap": a
+              "--row-gap": s
             }
-          }), l.set({
+          }), c.set({
             draggable: '[data-gjs-type="BlockColumns"]',
             droppable: '[data-gjs-type="BlockButton"], [data-gjs-type="BlockColumns"], [data-gjs-type="BlockDivider"], [data-gjs-type="BlockHeader"], [data-gjs-type="BlockImage"], [data-gjs-type="BlockText"], [data-gjs-type="BlockVideo"], [data-gjs-type="BlockFontKit"], [data-gjs-type="BlockCarousel"], [data-gjs-type="BlockGallery"], [data-gjs-type="BlockTabs"], [data-gjs-type="BlockAccordion"], [data-gjs-type="BlockSearchBox"], [data-gjs-type="BlockColorSwatches"]'
           });
-        }), this.dsm?.getAll().forEach((l) => {
-          l.records.on("add", this.handleDataSourceChange);
+        }), this.dsm?.getAll().forEach((c) => {
+          c.records.on("add", this.handleDataSourceChange);
         }), this.updateDataSourceEntries(), this.resetDirtyCount();
       } finally {
         t.UndoManager.start();
@@ -142656,7 +142675,12 @@ let Ar = class extends Fn {
     }), this.contentBuilder?.on(
       "component:drag:end",
       ({ target: t }) => {
-        this.contentBuilder && (this.contentBuilder.select(), this.contentBuilder.select(t));
+        if (this.contentBuilder)
+          try {
+            this.contentBuilder.select(), this.contentBuilder.select(t);
+          } catch {
+            throw new Error("handle component:drag:end error");
+          }
       }
     ), this.contentBuilder?.on("canvas:frame:load:body", ({ window: t }) => {
       this.canvasDocument = t.document, t.document.addEventListener("click", this.handleCanvasClick), t.document.addEventListener("keydown", this.handleCanvasKeydown), t.document.addEventListener("mousemove", this.handleCanvasMouseMove), t.document.addEventListener(
@@ -142730,12 +142754,17 @@ let Ar = class extends Fn {
         "cx-template-manager-updated",
         this.handleTemplateManagerUpdated
       );
-      const n = this.canvasDocument?.getElementById("Form1");
-      n && n.removeEventListener("scroll", this.handleCanvasScroll);
+      const e = this.canvasDocument?.getElementById("Form1");
+      e && e.removeEventListener("scroll", this.handleCanvasScroll);
     }
-    this.contentBuilder?.destroy(), this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout && clearTimeout(this.newlyAddedComponentTimeout);
-    for (const n of this.containerDropdownObservers)
-      n.disconnect?.();
+    const n = this.contentBuilder?.getEl();
+    n && n.removeEventListener(
+      "mousedown",
+      this.handleRootToolbarRightClick,
+      !0
+    ), this.contentBuilder?.destroy(), this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout && clearTimeout(this.newlyAddedComponentTimeout);
+    for (const e of this.containerDropdownObservers)
+      e.disconnect?.();
     this.containerDropdownObservers = [];
   }
   handleBuilderPropsChange() {