@processmaker/screen-builder 3.0.3 → 3.0.5

package/dist/vue-form-builder.es.js

@@ -7723,13 +7723,18 @@ const Z0 = "Clipboard", Zd = {
       if (!t || !(t instanceof Array))
         throw new Error("Expected a screen configuration array");
       const e = (r) => {
-        r.items.forEach((i, a) => {
-          if (i.component === Z0) {
-            const n = ie.cloneDeep(this.$store.getters["clipboardModule/clipboardItems"]);
-            n.forEach(this.updateUuids), r.items.splice(a, 1, ...n), n.length && window.ProcessMaker.alert(this.$t("Clipboard Pasted Succesfully"), "success");
-          }
-          i.items && e(i);
-        });
+        const i = (a) => {
+          a.forEach((n, s) => {
+            if (Array.isArray(n))
+              return i(n);
+            if (n.component === Z0) {
+              const o = ie.cloneDeep(this.$store.getters["clipboardModule/clipboardItems"]);
+              o.forEach(this.updateUuids), a.splice(s, 1, ...o), o.length > 0 && window.ProcessMaker.alert(this.$t("Clipboard Pasted Successfully"), "success");
+            }
+            n.items && i(n.items);
+          });
+        };
+        r && Array.isArray(r.items) ? i(r.items) : console.warn("Invalid page structure or no items to process.");
       };
       t.forEach((r) => e(r));
     },
@@ -45481,17 +45486,17 @@ const CK = {
     },
     // The fields used for our vue table
     tableFields() {
-      var e, r;
+      var e, r, i;
       const t = this.getTableFieldsFromDataSource();
-      return this.editable && !this.selfReferenced && t.push(CK), ["single-field", "single-record"].includes((e = this.source) == null ? void 0 : e.dataSelectionOptions) && t.unshift({
+      return this.editable && !this.selfReferenced && t.push(CK), ((e = this.source) == null ? void 0 : e.sourceOptions) === "Collection" && (["single-field", "single-record"].includes((r = this.source) == null ? void 0 : r.dataSelectionOptions) && t.unshift({
         key: "radio",
         label: "",
         sortable: !1
-      }), ((r = this.source) == null ? void 0 : r.dataSelectionOptions) === "multiple-records" && t.unshift({
+      }), ((i = this.source) == null ? void 0 : i.dataSelectionOptions) === "multiple-records" && t.unshift({
         key: "checkbox",
         label: "",
         sortable: !1
-      }), t;
+      })), t;
     },
     // Determines if the form used for add/edit is self referencing. If so, we should not show it
     selfReferenced() {
@@ -46420,14 +46425,14 @@ var r_ = function() {
         } }, [e.containsHTML(e.getNestedPropertyValue(i, n)) ? [r("div", { class: { "pm-table-truncate": n.truncate }, style: { maxWidth: n.width + "px" }, attrs: { id: `element-${a}-${s}` } }, [r("span", { domProps: { innerHTML: e._s(e.sanitize(e.getNestedPropertyValue(i, n))) } })]), n.truncate ? r("b-tooltip", { attrs: { target: `element-${a}-${s}`, "custom-class": "pm-table-tooltip", placement: "topright", trigger: "hover", boundary: "viewport", delay: { show: 0, hide: 0 } }, on: { show: e.checkIfTooltipIsNeeded } }, [e._v(" " + e._s(e.sanitizeTooltip(e.getNestedPropertyValue(i, n))) + " ")]) : e._e()] : [e.isComponent(i[n.field]) ? [r(i[n.field].component, e._b({ tag: "component" }, "component", i[n.field].props, !1))] : [r("div", { class: { "pm-table-truncate": n.truncate }, style: { maxWidth: n.width + "px" }, attrs: { id: `element-${a}-${s}` } }, [e._v(" " + e._s(e.getNestedPropertyValue(i, n)) + " "), n.truncate ? r("b-tooltip", { attrs: { target: `element-${a}-${s}`, "custom-class": "pm-table-tooltip", placement: "topright", trigger: "hover", boundary: "viewport", delay: { show: 0, hide: 0 } }, on: { show: e.checkIfTooltipIsNeeded } }, [e._v(" " + e._s(e.getNestedPropertyValue(i, n)) + " ")]) : e._e()], 1)]]], 2);
       });
     }, proxy: !0 };
-  })], null, !0) })], 1) : r("div", [r("formEmpty", { attrs: { link: "Requests", title: "No Cases to Show", url: e.noDataUrl } })], 1);
+  })], null, !0) })], 1) : r("div", [r("formEmpty", { attrs: { link: "Requests", title: e.$t("No Cases to Show"), url: e.noDataUrl } })], 1);
 }, i_ = [], a_ = /* @__PURE__ */ ee(
   t_,
   r_,
   i_,
   !1,
   null,
-  "7880db17",
+  "2a7e0d76",
   null,
   null
 );
@@ -46570,7 +46575,7 @@ var f_ = function() {
     return e._l(e.emptyStartEvents(i), function(n, s) {
       return r("div", { key: `process-${a}-${s}`, staticClass: "col-sm-6" }, [r("ProcessCard", { attrs: { filter: e.filter, process: i, event: n } })], 1);
     });
-  })], 2)]) : r("div", [r("formEmpty", { attrs: { link: "", title: "No Case to Start", url: "" } })], 1)]);
+  })], 2)]) : r("div", [r("formEmpty", { attrs: { link: "", title: e.$t("No Case to Start"), url: "" } })], 1)]);
 }, p_ = [], h_ = /* @__PURE__ */ ee(
   d_,
   f_,
@@ -46613,11 +46618,11 @@ const v_ = {
   },
   watch: {
     listOption() {
-      this.title = this.checkTitle(this.listOption), this.dataControl = {};
+      this.title = this.$t(this.checkTitle(this.listOption)), this.dataControl = {};
     }
   },
   mounted() {
-    this.title = this.checkTitle(this.listOption);
+    this.title = this.$t(this.checkTitle(this.listOption));
   },
   methods: {
     /**
@@ -46700,7 +46705,7 @@ var g_ = function() {
   b_,
   !1,
   null,
-  "d2551af0",
+  "c896b8d7",
   null,
   null
 );
@@ -46949,9 +46954,9 @@ const Nu = L_.exports, yg = [
 };
 var B_ = function() {
   var e = this, r = e._self._c;
-  return r("div", [r("div", [r("label", { attrs: { for: "collection" } }, [e._v(e._s(e.$t("Collection")))]), r("b-form-select", { attrs: { id: "collection", options: e.collections, "data-cy": "inspector-collection" }, model: { value: e.collectionId, callback: function(i) {
+  return r("div", [r("div", [r("label", { attrs: { for: "collection" } }, [e._v(e._s(e.$t("Collection Name")))]), r("b-form-group", [r("b-form-select", { attrs: { id: "collection", options: e.collections, "data-cy": "inspector-collection" }, model: { value: e.collectionId, callback: function(i) {
     e.collectionId = i;
-  }, expression: "collectionId" } })], 1), e.collectionId > 0 ? r("div", { staticClass: "screen-link mt-2" }, [r("a", { attrs: { href: `/designer/screen-builder/${e.screenMode === "display" ? e.idCollectionScreenView : e.idCollectionScreenEdit}/edit`, target: "_blank" } }, [e._v(" " + e._s(e.$t(e.screenMode === "display" ? "Open View Screen" : "Open Edit Screen")) + " "), r("i", { staticClass: "ml-1 fas fa-external-link-alt" })])]) : e._e()]);
+  }, expression: "collectionId" } }), r("b-form-text", { staticClass: "mt-2" }, [e._v(" " + e._s(e.$t("Collection Record Control is not available for Anonymous Web Entry")) + " ")])], 1)], 1), e.collectionId > 0 ? r("div", { staticClass: "screen-link mt-2" }, [r("a", { attrs: { href: `/designer/screen-builder/${e.screenMode === "display" ? e.idCollectionScreenView : e.idCollectionScreenEdit}/edit`, target: "_blank" } }, [e._v(" " + e._s(e.$t(e.screenMode === "display" ? "Open View Screen" : "Open Edit Screen")) + " "), r("i", { staticClass: "ml-1 fas fa-external-link-alt" })])]) : e._e()]);
 }, R_ = [], H_ = /* @__PURE__ */ ee(
   F_,
   B_,
@@ -47002,7 +47007,8 @@ const V_ = typeof window > "u" ? global : window, Jc = [
       screenType: "",
       hasMustache: !1,
       flagDraft: {},
-      taskDraft: {}
+      taskDraft: {},
+      enableDraft: !0
     };
   },
   computed: {
@@ -47050,9 +47056,9 @@ const V_ = typeof window > "u" ? global : window, Jc = [
         var o, u;
         this.placeholder = "";
         const a = i.data, n = i.collection.read_screen_id, s = i.collection.update_screen_id;
-        this.screenCollectionId = this.selDisplayMode === "View" ? n : s, this.loadScreen(this.screenCollectionId), ((u = (o = this.taskDraft) == null ? void 0 : o.draft) == null ? void 0 : u.data) == null || this.taskDraft.draft.data === "" ? this.localData = a : this.localData = ie.merge({}, a, this.taskDraft.draft.data);
+        this.screenCollectionId = typeof this.selDisplayMode == "function" ? this.collectionmode.modeId === "View" ? n : s : this.selDisplayMode === "View" ? n : s, this.loadScreen(this.screenCollectionId), ((u = (o = this.taskDraft) == null ? void 0 : o.draft) == null ? void 0 : u.data) == null || this.taskDraft.draft.data === "" || !this.enableDraft ? this.localData = a : this.localData = ie.merge({}, a, this.taskDraft.draft.data);
       }).catch(() => {
-        this.localData = {}, V_.ProcessMaker.alert(this.$t("This content does not exist. We could not locate indicated data"), "danger");
+        this.localData = {}, V_.ProcessMaker.alert(this.$t("This content does not exist. We could not locate indicated data"), "danger"), this.placeholder = "Select a collection";
       });
     },
     isMustache(t) {
@@ -47069,7 +47075,7 @@ const V_ = typeof window > "u" ? global : window, Jc = [
       t && (this.selCollectionId = t.collectionId);
     },
     record(t) {
-      this.hasMustache = !1, t && !isNaN(t) && t > 0 && this.collection.collectionId ? (this.selRecordId = t, this.loadRecordCollection(this.collection.collectionId, t, this.selDisplayMode)) : (this.isMustache(t) && this.callbackRecord(), this.localData = {});
+      this.hasMustache = !1, this.enableDraft = !1, t && !isNaN(t) && t > 0 && this.collection.collectionId ? (this.selRecordId = t, this.loadRecordCollection(this.collection.collectionId, t, this.selDisplayMode)) : (this.isMustache(t) && this.callbackRecord(), this.localData = {});
     },
     collectionmode(t) {
       t && (this.selDisplayMode = t.modeId), this.loadRecordCollection(this.selCollectionId, this.selRecordId, this.selDisplayMode);
@@ -51906,30 +51912,30 @@ var yre = function() {
         return e.inspect(a);
       } } }, [a.container ? r("div", { staticClass: "card container-lement", class: { "ai-section-card": e.isAiSection(a) }, attrs: { "data-cy": "screen-element-container" }, on: { click: function(s) {
         return e.inspect(a);
-      } } }, [e.selected === a ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center", class: { pulse: e.isAiSection(a) && e.aiPreview(a) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), a.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: a.config.icon }) : e._e(), e._v(" " + e._s(a.config.name || a.label || e.$t("Field Name")) + " "), !e.isClipboardPage(i) && e.isInClipboard(e.extendedPages[i].items[n]) ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [e.isClipboardPage(i) ? e._e() : r("clipboard-button", { attrs: { index: n, config: a.config, isInClipboard: e.isInClipboard(e.extendedPages[i].items[n]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(s) {
+      } } }, [e.selected === a ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center", class: { pulse: e.isAiSection(a) && e.aiPreview(a) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), a.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: a.config.icon }) : e._e(), e._v(" " + e._s(a.config.name || a.label || e.$t("Field Name")) + " "), !e.isClipboardPage(i) && e.isInClipboard(e.extendedPages[i].items[n]) && e.screenType === "form" ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [!e.isClipboardPage(i) && e.screenType === "form" ? r("clipboard-button", { attrs: { index: n, config: a.config, isInClipboard: e.isInClipboard(e.extendedPages[i].items[n]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(s) {
         return e.addToClipboard(e.extendedPages[i].items[n]);
       }, removeFromClipboard: function(s) {
         return e.removeFromClipboard(e.extendedPages[i].items[n]);
-      } } }), e.isAiSection(a) && e.aiPreview(a) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { "data-test": "apply-ai-btn", title: e.$t("Apply Changes") }, on: { click: function(s) {
+      } } }) : e._e(), e.isAiSection(a) && e.aiPreview(a) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { "data-test": "apply-ai-btn", title: e.$t("Apply Changes") }, on: { click: function(s) {
         return e.applyAiChanges(a);
       } } }, [e._v(" " + e._s(e.$t("Apply Changes")) + " ")]) : e._e(), e.isAiSection(a) && e.aiPreview(a) ? e._e() : r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { "data-test": "copy-control-btn", title: e.$t("Copy Control") }, on: { click: function(s) {
         return e.duplicateItem(n);
       } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { "data-test": "delete-control-btn", title: e.$t("Delete Control") }, on: { click: function(s) {
         return e.deleteItem(n);
-      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(a["editor-component"], { tag: "component", staticClass: "card-body", class: e.styleMode === "Modern" && a.component === "FormRecordList" ? e.elementCssClassModern(a) : e.elementCssClass(a), attrs: { "validation-errors": e.validationErrors, selected: e.selected, config: a.config, "ai-element": a }, on: { inspect: e.inspect, "update-state": e.updateState }, model: { value: a.items, callback: function(s) {
+      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(a["editor-component"], { tag: "component", staticClass: "card-body", class: e.styleMode === "Modern" && a.component === "FormRecordList" ? e.elementCssClassModern(a) : e.elementCssClass(a), attrs: { "validation-errors": e.validationErrors, selected: e.selected, config: a.config, "ai-element": a, "screen-type": e.screenType }, on: { inspect: e.inspect, "update-state": e.updateState }, model: { value: a.items, callback: function(s) {
         e.$set(a, "items", s);
-      }, expression: "element.items" } })], 1) : r("div", { staticClass: "card", attrs: { "data-cy": "screen-element-container" } }, [e.selected === a ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), a.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: a.config.icon }) : e._e(), e._v(" " + e._s(a.config.name || e.$t("Variable Name")) + " "), !e.isClipboardPage(i) && e.isInClipboard(e.extendedPages[i].items[n]) ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [e.isClipboardPage(i) ? e._e() : r("clipboard-button", { attrs: { index: n, config: a.config, isInClipboard: e.isInClipboard(e.extendedPages[i].items[n]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(s) {
+      }, expression: "element.items" } })], 1) : r("div", { staticClass: "card", attrs: { "data-cy": "screen-element-container" } }, [e.selected === a ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), a.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: a.config.icon }) : e._e(), e._v(" " + e._s(a.config.name || e.$t("Variable Name")) + " "), !e.isClipboardPage(i) && e.isInClipboard(e.extendedPages[i].items[n]) && e.screenType === "form" ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [!e.isClipboardPage(i) && e.screenType === "form" ? r("clipboard-button", { attrs: { index: n, config: a.config, isInClipboard: e.isInClipboard(e.extendedPages[i].items[n]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(s) {
         return e.addToClipboard(e.extendedPages[i].items[n]);
       }, removeFromClipboard: function(s) {
         return e.removeFromClipboard(e.extendedPages[i].items[n]);
-      } } }), r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(s) {
+      } } }) : e._e(), r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(s) {
         return e.duplicateItem(n);
       } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { title: e.$t("Delete Control") }, on: { click: function(s) {
         return e.deleteItem(n);
       } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(a["editor-component"], e._b({ tag: "component", staticClass: "card-body m-0 pb-4 pt-4", class: [
         e.styleMode === "Modern" && a.component === "FormRecordList" ? e.elementCssClassModern(a) : e.elementCssClass(a),
         { "prevent-interaction": !a.config.interactive }
-      ], attrs: { tabindex: a.config.interactive ? 0 : -1 }, on: { input: function(s) {
+      ], attrs: { tabindex: a.config.interactive ? 0 : -1, "screen-type": e.screenType }, on: { input: function(s) {
         a.config.interactive && (a.config.content = s);
       } }, nativeOn: { focusout: function(s) {
         return e.updateState.apply(null, arguments);
@@ -51980,7 +51986,7 @@ var yre = function() {
   xre,
   !1,
   null,
-  "08470664",
+  "a75f5502",
   null,
   null
 );
@@ -52530,7 +52536,16 @@ const Ire = Lu(Ere), hae = Lu(jre), mae = Lu([zre]), Lre = Lu([cS, uS]), Fre = N
           dataSource: yi.provideData,
           jsonData: ""
         },
-        form: ""
+        form: "",
+        source: {
+          collectionFields: [],
+          collectionFieldsColumns: [],
+          pmql: null,
+          sourceOptions: "Variable",
+          variableStore: null,
+          dataSelectionOptions: "no-selection",
+          singleField: null
+        }
       },
       inspector: [
         cr,
@@ -53919,7 +53934,7 @@ const Zre = {
     ...js
   },
   mixins: [xl, Zd],
-  props: ["value", "name", "config", "selected", "validationErrors"],
+  props: ["value", "name", "config", "selected", "validationErrors", "screenType"],
   data() {
     return {
       items: [],
@@ -53980,44 +53995,50 @@ const Zre = {
           this.$set(r.config.aiConfig, "progress", t);
         }
       });
+    },
+    /**
+     * Triggered when the draggable container is changed.
+     */
+    onChange(t) {
+      this.$emit("update-state");
     }
   }
 };
 var Kre = function() {
   var e = this, r = e._self._c;
-  return r("div", { staticClass: "column-draggable", attrs: { selector: e.config.customCssSelector } }, [r("draggable", { staticStyle: { "min-height": "80px" }, attrs: { list: e.items, group: "controls" } }, e._l(e.items, function(i, a) {
+  return r("div", { staticClass: "column-draggable", attrs: { selector: e.config.customCssSelector } }, [r("draggable", { staticStyle: { "min-height": "80px" }, attrs: { list: e.items, group: "controls" }, on: { change: e.onChange } }, e._l(e.items, function(i, a) {
     return r("div", { key: a, staticClass: "control-item", class: { selected: e.selected === i, hasError: e.hasError(i) }, on: { click: function(n) {
       return n.stopPropagation(), e.inspect(i);
     } } }, [i.container ? r("div", { on: { click: function(n) {
       return n.stopPropagation(), e.inspect(i);
     } } }, [r("div", { staticClass: "m-2 card border-0", class: {
       "ai-section-card": e.isAiSection(i) && e.selected === i
-    } }, [e.selected === i ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center border rounded", class: { pulse: e.isAiSection(i) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), i.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: i.config.icon }) : e._e(), e._v(" " + e._s(i.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(e.items[a]) ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [r("clipboard-button", { attrs: { index: a, config: i.config, isInClipboard: e.isInClipboard(e.items[a]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(n) {
+    } }, [e.selected === i ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center border rounded", class: { pulse: e.isAiSection(i) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), i.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: i.config.icon }) : e._e(), e._v(" " + e._s(i.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(e.items[a]) && e.screenType === "form" ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [e.screenType === "form" ? r("clipboard-button", { attrs: { index: a, config: i.config, isInClipboard: e.isInClipboard(e.items[a]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(n) {
       return e.addToClipboard(e.items[a]);
     }, removeFromClipboard: function(n) {
       return e.removeFromClipboard(e.items[a]);
-    } } }), e.isAiSection(i) && e.aiPreview(i) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { title: e.$t("Apply Changes") }, on: { click: function(n) {
+    } } }) : e._e(), e.isAiSection(i) && e.aiPreview(i) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { title: e.$t("Apply Changes") }, on: { click: function(n) {
       return e.applyAiChanges(i);
     } } }, [e._v(" " + e._s(e.$t("Apply Changes")) + " ")]) : e._e(), e.isAiSection(i) && e.aiPreview(i) ? e._e() : r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(n) {
       return e.duplicateItem(a);
     } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { "aria-label": e.$t("Delete") }, on: { click: function(n) {
       return e.deleteItem(a);
-    } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(i["editor-component"], { tag: "component", staticClass: "mb-3 mr-3 ml-3", class: e.elementCssClass(i), attrs: { "validation-errors": e.validationErrors, selected: e.selected, "ai-element": i, config: i.config }, on: { inspect: e.inspect, "update-state": function(n) {
+    } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(i["editor-component"], { tag: "component", staticClass: "mb-3 mr-3 ml-3", class: e.elementCssClass(i), attrs: { "validation-errors": e.validationErrors, selected: e.selected, "ai-element": i, config: i.config, "screen-type": e.screenType }, on: { inspect: e.inspect, "update-state": function(n) {
       return e.$emit("update-state");
     } }, model: { value: i.items, callback: function(n) {
       e.$set(i, "items", n);
-    }, expression: "element.items" } })], 1)]) : r("div", { attrs: { id: i.config.name ? i.config.name : void 0 } }, [r("div", { staticClass: "m-2", class: { card: e.selected === i } }, [e.selected === i ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), i.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: i.config.icon }) : e._e(), e._v(" " + e._s(i.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(e.items[a]) ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [r("clipboard-button", { attrs: { index: a, config: i.config, isInClipboard: e.isInClipboard(e.items[a]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(n) {
+    }, expression: "element.items" } })], 1)]) : r("div", { attrs: { id: i.config.name ? i.config.name : void 0 } }, [r("div", { staticClass: "m-2", class: { card: e.selected === i } }, [e.selected === i ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), i.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: i.config.icon }) : e._e(), e._v(" " + e._s(i.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(e.items[a]) && e.screenType === "form" ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [e.screenType === "form" ? r("clipboard-button", { attrs: { index: a, config: i.config, isInClipboard: e.isInClipboard(e.items[a]), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(n) {
       return e.addToClipboard(e.items[a]);
     }, removeFromClipboard: function(n) {
       return e.removeFromClipboard(e.items[a]);
-    } } }), r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(n) {
+    } } }) : e._e(), r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(n) {
       return e.duplicateItem(a);
     } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { "aria-label": e.$t("Delete") }, on: { click: function(n) {
       return e.deleteItem(a);
     } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(i["editor-component"], e._b({ tag: "component", staticClass: "p-3", class: [
       e.elementCssClass(i),
       { "prevent-interaction": !i.config.interactive }
-    ], attrs: { tabindex: i.config.interactive ? 0 : -1, config: i.config }, on: { input: function(n) {
+    ], attrs: { tabindex: i.config.interactive ? 0 : -1, config: i.config, "screen-type": e.screenType }, on: { input: function(n) {
       i.config.interactive && (i.config.content = n);
     } } }, "component", i.config, !1))], 1)])]);
   }), 0)], 1);
@@ -54027,7 +54048,7 @@ var Kre = function() {
   _re,
   !1,
   null,
-  "871c5ad6",
+  "dbf93f27",
   null,
   null
 );
@@ -54047,7 +54068,7 @@ const tie = 1, rie = {
     ...js
   },
   mixins: [xl, Zd],
-  props: ["value", "name", "config", "selected", "validationErrors"],
+  props: ["value", "name", "config", "selected", "validationErrors", "screenType"],
   data() {
     return {
       items: [],
@@ -54147,32 +54168,32 @@ var iie = function() {
         return o.stopPropagation(), e.inspect(n);
       } } }, [r("div", { staticClass: "m-2 card border-0", class: {
         "ai-section-card": e.isAiSection(n) && e.selected === n
-      } }, [e.selected === n ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center border rounded", class: { pulse: e.isAiSection(n) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), n.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: n.config.icon }) : e._e(), e._v(" " + e._s(n.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(n) ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [r("clipboard-button", { attrs: { index: a, config: n.config, isInClipboard: e.isInClipboard(n), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(o) {
+      } }, [e.selected === n ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center border rounded", class: { pulse: e.isAiSection(n) } }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), n.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: n.config.icon }) : e._e(), e._v(" " + e._s(n.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(n) && e.screenType === "form" ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [e.screenType === "form" ? r("clipboard-button", { attrs: { index: a, config: n.config, isInClipboard: e.isInClipboard(n), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(o) {
         return e.addToClipboard(n);
       }, removeFromClipboard: function(o) {
         return e.removeFromClipboard(n);
-      } } }), e.isAiSection(n) && e.aiPreview(n) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { title: e.$t("Apply Changes") }, on: { click: function(o) {
+      } } }) : e._e(), e.isAiSection(n) && e.aiPreview(n) ? r("button", { staticClass: "btn btn-sm btn-primary mr-2", attrs: { title: e.$t("Apply Changes") }, on: { click: function(o) {
         return e.applyAiChanges(n);
       } } }, [e._v(" " + e._s(e.$t("Apply Changes")) + " ")]) : e._e(), e.isAiSection(n) && e.aiPreview(n) ? e._e() : r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { "aria-label": e.$t("Duplicate") }, on: { click: function(o) {
         return e.duplicateItem(a, s);
       } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { "aria-label": e.$t("Delete") }, on: { click: function(o) {
         return e.deleteItem(a, s);
-      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(n["editor-component"], { tag: "component", staticClass: "mb-3 mr-3 ml-3", class: e.elementCssClass(n), attrs: { "validation-errors": e.validationErrors, selected: e.selected, "ai-element": n, config: n.config }, on: { inspect: e.inspect, "update-state": function(o) {
+      } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(n["editor-component"], { tag: "component", staticClass: "mb-3 mr-3 ml-3", class: e.elementCssClass(n), attrs: { "validation-errors": e.validationErrors, selected: e.selected, "ai-element": n, config: n.config, "screen-type": e.screenType }, on: { inspect: e.inspect, "update-state": function(o) {
         return e.$emit("update-state");
       } }, model: { value: n.items, callback: function(o) {
         e.$set(n, "items", o);
-      }, expression: "element.items" } })], 1)]) : r("div", { attrs: { id: n.config.name ? n.config.name : void 0 } }, [r("div", { staticClass: "m-2", class: { card: e.selected === n } }, [e.selected === n ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), n.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: n.config.icon }) : e._e(), e._v(" " + e._s(n.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(n) ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [r("clipboard-button", { attrs: { index: a, config: n.config, isInClipboard: e.isInClipboard(n), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(o) {
+      }, expression: "element.items" } })], 1)]) : r("div", { attrs: { id: n.config.name ? n.config.name : void 0 } }, [r("div", { staticClass: "m-2", class: { card: e.selected === n } }, [e.selected === n ? r("div", { staticClass: "card-header form-element-header d-flex align-items-center" }, [r("i", { staticClass: "fas fa-arrows-alt-v mr-1 text-muted" }), n.config.icon ? r("i", { staticClass: "mr-2 ml-1", class: n.config.icon }) : e._e(), e._v(" " + e._s(n.config.name || e.$t("Variable Name")) + " "), e.isInClipboard(n) && e.screenType === "form" ? r("b-badge", { staticClass: "m-2 custom-badge", attrs: { "data-cy": "copied-badge", pill: "" } }, [r("i", { staticClass: "far fa-check-circle" }), r("span", { staticClass: "pl-2" }, [e._v(e._s(e.$t("Copied")))])]) : e._e(), r("div", { staticClass: "ml-auto" }, [e.screenType === "form" ? r("clipboard-button", { attrs: { index: a, config: n.config, isInClipboard: e.isInClipboard(n), addTitle: e.$t("Add to clipboard"), removeTitle: e.$t("Remove from clipboard") }, on: { addToClipboard: function(o) {
         return e.addToClipboard(n);
       }, removeFromClipboard: function(o) {
         return e.removeFromClipboard(n);
-      } } }), r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(o) {
+      } } }) : e._e(), r("button", { staticClass: "btn btn-sm btn-secondary mr-2", attrs: { title: e.$t("Copy Control") }, on: { click: function(o) {
         return e.duplicateItem(a, s);
       } } }, [r("i", { staticClass: "fas fa-copy text-light" })]), r("button", { staticClass: "btn btn-sm btn-danger", attrs: { "aria-label": e.$t("Delete") }, on: { click: function(o) {
         return e.deleteItem(a, s);
       } } }, [r("i", { staticClass: "far fa-trash-alt text-light" })])], 1)], 1) : e._e(), r(n["editor-component"], e._b({ tag: "component", staticClass: "p-3", class: [
         e.elementCssClass(n),
         { "prevent-interaction": !n.config.interactive }
-      ], attrs: { tabindex: n.config.interactive ? 0 : -1, config: n.config }, on: { input: function(o) {
+      ], attrs: { tabindex: n.config.interactive ? 0 : -1, config: n.config, "screen-type": e.screenType }, on: { input: function(o) {
         n.config.interactive && (n.config.content = o);
       } } }, "component", n.config, !1))], 1)])]);
     }), 0)];
@@ -54183,7 +54204,7 @@ var iie = function() {
   aie,
   !1,
   null,
-  "0f4e73f7",
+  "c18cf715",
   null,
   null
 );