@processmaker/screen-builder 3.0.7 → 3.1.0

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

@@ -47278,6 +47278,7 @@ const pl = Z_.exports, js = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   "collectionId",
   "labelField",
   "valueField",
+  "ariaLabelField",
   "pmql",
   "unique"
 ], K_ = {
@@ -47285,7 +47286,7 @@ const pl = Z_.exports, js = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
     MustacheHelper: sn,
     ScreenVariableSelector: Nu
   },
-  props: ["value"],
+  props: ["value", "renderAs"],
   data() {
     return {
       collections: [],
@@ -47293,6 +47294,7 @@ const pl = Z_.exports, js = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
       collectionId: null,
       labelField: null,
       valueField: null,
+      ariaLabelField: null,
       pmql: "",
       unique: !1
     };
@@ -47333,7 +47335,7 @@ const pl = Z_.exports, js = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   },
   methods: {
     resetFields() {
-      this.labelField = null, this.valueField = null;
+      this.labelField = null, this.valueField = null, this.ariaLabelField = null;
     },
     getCollections() {
       this.$dataProvider.getCollections().then((t) => {
@@ -47374,7 +47376,9 @@ var __ = function() {
     e.labelField = i;
   }, expression: "labelField" } })], 1) : e._e(), e.fields.length > 1 ? r("div", { staticClass: "mt-3" }, [r("label", { attrs: { for: "value" } }, [e._v(e._s(e.$t("Value")))]), r("b-form-select", { attrs: { id: "value", options: e.fields, "data-cy": "inspector-collection-value" }, model: { value: e.valueField, callback: function(i) {
     e.valueField = i;
-  }, expression: "valueField" } })], 1) : e._e(), e.fields.length > 1 ? r("div", { staticClass: "mt-3" }, [r("pmql-input", { staticClass: "mb-1", attrs: { "search-type": "collections_w_mustaches", "data-cy": "inspector-collection-pmql", "input-label": "PMQL", condensed: !0, "ai-enabled": !0, placeholder: e.$t("PMQL") }, model: { value: e.pmql, callback: function(i) {
+  }, expression: "valueField" } })], 1) : e._e(), e.fields.length > 1 && e.renderAs === "checkbox" ? r("div", { staticClass: "mt-3" }, [r("label", { attrs: { for: "aria-label" } }, [e._v(e._s(e.$t("Aria Label")))]), r("b-form-select", { attrs: { id: "aria-label", options: e.fields, "data-cy": "inspector-collection-aria-label" }, model: { value: e.ariaLabelField, callback: function(i) {
+    e.ariaLabelField = i;
+  }, expression: "ariaLabelField" } })], 1) : e._e(), e.fields.length > 1 ? r("div", { staticClass: "mt-3" }, [r("pmql-input", { staticClass: "mb-1", attrs: { "search-type": "collections_w_mustaches", "data-cy": "inspector-collection-pmql", "input-label": "PMQL", condensed: !0, "ai-enabled": !0, placeholder: e.$t("PMQL") }, model: { value: e.pmql, callback: function(i) {
     e.pmql = i;
   }, expression: "pmql" } }), r("small", { staticClass: "form-text text-muted" }, [e._v(e._s(e.$t("Advanced data search")))])], 1) : e._e(), e.fields.length > 1 ? r("div", { staticClass: "mt-3" }, [r("form-checkbox", { attrs: { label: e.$t("Ignore duplicates in list"), helper: e.$t(
     "Select to show only distinct list entries if labels are repeated. Only the first value will be used if duplicate labels have different values."
@@ -48786,6 +48790,7 @@ const gee = {
       removeIndex: null,
       optionValue: "",
       optionContent: "",
+      optionAriaLabel: "",
       showRenderAs: !1,
       renderAs: "dropdown",
       allowMultiSelect: !1,
@@ -48882,6 +48887,9 @@ const gee = {
     valueField() {
       return this.value || "content";
     },
+    ariaLabelField() {
+      return this.optionAriaLabel || "ariaLabel";
+    },
     currentItemToDelete() {
       if (this.removeIndex !== null && this.optionsList.length > 0 && this.optionsList[this.removeIndex] !== void 0) {
         let t = this.optionsList[this.removeIndex][this.valueField];
@@ -48911,7 +48919,8 @@ const gee = {
         showJsonEditor: this.showJsonEditor,
         editIndex: this.editIndex,
         removeIndex: this.removeIndex,
-        valueTypeReturned: this.valueTypeReturned
+        valueTypeReturned: this.valueTypeReturned,
+        optionAriaLabel: this.optionAriaLabel
       };
     }
   },
@@ -48921,7 +48930,7 @@ const gee = {
     }, 1500);
   },
   mounted() {
-    this.dataSource = this.options.dataSource, this.jsonData = this.options.jsonData, this.dataName = this.options.dataName, this.collectionOptions = this.options.collectionOptions, this.selectedDataSource = this.options.selectedDataSource, this.selectedEndPoint = this.options.selectedEndPoint, this.key = this.options.key, this.value = this.options.value, this.pmqlQuery = this.options.pmqlQuery, this.defaultOptionKey = this.options.defaultOptionKey, this.selectedOptions = this.options.selectedOptions, this.optionsList = this.options.optionsList ? this.options.optionsList : [], this.jsonData = JSON.stringify(this.optionsList), this.showRenderAs = this.options.showRenderAs, this.renderAs = this.options.renderAs, this.allowMultiSelect = this.options.allowMultiSelect, this.valueTypeReturned = this.options.valueTypeReturned;
+    this.dataSource = this.options.dataSource, this.jsonData = this.options.jsonData, this.dataName = this.options.dataName, this.collectionOptions = this.options.collectionOptions, this.selectedDataSource = this.options.selectedDataSource, this.selectedEndPoint = this.options.selectedEndPoint, this.key = this.options.key, this.value = this.options.value, this.optionAriaLabel = this.options.optionAriaLabel, this.pmqlQuery = this.options.pmqlQuery, this.defaultOptionKey = this.options.defaultOptionKey, this.selectedOptions = this.options.selectedOptions, this.optionsList = this.options.optionsList ? this.options.optionsList : [], this.jsonData = JSON.stringify(this.optionsList), this.showRenderAs = this.options.showRenderAs, this.renderAs = this.options.renderAs, this.allowMultiSelect = this.options.allowMultiSelect, this.valueTypeReturned = this.options.valueTypeReturned;
   },
   methods: {
     monacoMounted(t) {
@@ -48966,7 +48975,8 @@ const gee = {
       t.forEach((r) => {
         e.optionsList.push({
           [e.keyField]: r[e.keyField],
-          [e.valueField]: r[e.valueField]
+          [e.valueField]: r[e.valueField],
+          [e.ariaLabelField]: r[e.ariaLabelField]
         });
       }), this.jsonError = "";
     },
@@ -48986,10 +48996,10 @@ const gee = {
       this.jsonData = JSON.stringify(this.optionsList), this.$emit("change", this.dataObjectOptions);
     },
     showEditOption(t) {
-      this.optionCardType = "edit", this.editIndex = t, this.optionContent = this.optionsList[t][this.valueField], this.optionValue = this.optionsList[t][this.keyField], this.optionError = "";
+      this.optionCardType = "edit", this.editIndex = t, this.optionContent = this.optionsList[t][this.valueField], this.optionValue = this.optionsList[t][this.keyField], this.optionAriaLabel = this.optionsList[t][this.ariaLabelField], this.optionError = "";
     },
     showAddOption() {
-      this.optionCardType = "insert", this.optionContent = "", this.optionValue = "", this.showOptionCard = !0, this.optionError = "", this.editIndex = null;
+      this.optionCardType = "insert", this.optionContent = "", this.optionValue = "", this.optionAriaLabel = "", this.showOptionCard = !0, this.optionError = "", this.editIndex = null;
     },
     addOption() {
       const t = this;
@@ -49001,7 +49011,8 @@ const gee = {
         this.optionsList.push(
           {
             [this.valueField]: this.optionContent,
-            [this.keyField]: this.optionValue
+            [this.keyField]: this.optionValue,
+            [this.ariaLabelField]: this.optionAriaLabel
           }
         );
       } else {
@@ -49009,7 +49020,7 @@ const gee = {
           this.optionError = "An item with the same key already exists";
           return;
         }
-        this.optionsList[this.editIndex][this.keyField] = this.optionValue, this.optionsList[this.editIndex][this.valueField] = this.optionContent;
+        this.optionsList[this.editIndex][this.keyField] = this.optionValue, this.optionsList[this.editIndex][this.valueField] = this.optionContent, this.optionsList[this.editIndex][this.ariaLabelField] = this.optionAriaLabel;
       }
       this.jsonData = JSON.stringify(this.optionsList), this.showOptionCard = !1, this.optionError = "", this.editIndex = null;
     },
@@ -49041,7 +49052,9 @@ var bee = function() {
     e.optionValue = i;
   }, expression: "optionValue" } }), e.optionError ? r("div", { staticClass: "invalid-feedback d-block text-right" }, [r("div", [e._v(e._s(e.optionError))])]) : e._e(), r("label", { staticClass: "mt-3", attrs: { for: "option-content" } }, [e._v(e._s(e.$t("Content")))]), r("b-form-input", { attrs: { id: "option-content", "data-cy": "inspector-option-content" }, model: { value: e.optionContent, callback: function(i) {
     e.optionContent = i;
-  }, expression: "optionContent" } })], 1), r("div", { staticClass: "card-footer text-right p-2" }, [r("button", { staticClass: "btn btn-sm btn-outline-secondary mr-2", attrs: { type: "button", "data-cy": "inspector-option-cancel" }, on: { click: function(i) {
+  }, expression: "optionContent" } }), e.renderAs === "checkbox" ? r("label", { staticClass: "mt-3", attrs: { for: "option-aria-label" } }, [e._v(e._s(e.$t("Aria Label")))]) : e._e(), e.renderAs === "checkbox" ? r("b-form-input", { attrs: { id: "option-aria-label", "data-cy": "inspector-option-aria-label" }, model: { value: e.optionAriaLabel, callback: function(i) {
+    e.optionAriaLabel = i;
+  }, expression: "optionAriaLabel" } }) : e._e()], 1), r("div", { staticClass: "card-footer text-right p-2" }, [r("button", { staticClass: "btn btn-sm btn-outline-secondary mr-2", attrs: { type: "button", "data-cy": "inspector-option-cancel" }, on: { click: function(i) {
     e.showOptionCard = !1;
   } } }, [e._v(" " + e._s(e.$t("Cancel")) + " ")]), r("button", { staticClass: "btn btn-sm btn-secondary", attrs: { type: "button", "data-cy": "inspector-option-save" }, on: { click: function(i) {
     return e.addOption();
@@ -49060,7 +49073,9 @@ var bee = function() {
       e.optionValue = n;
     }, expression: "optionValue" } }), e.optionError ? r("div", { staticClass: "invalid-feedback d-block text-right" }, [r("div", [e._v(e._s(e.optionError))])]) : e._e(), r("label", { staticClass: "mt-3", attrs: { for: "option-content" } }, [e._v(e._s(e.$t("Content")))]), r("b-form-input", { attrs: { id: "option-content", "data-cy": "inspector-option-content" }, model: { value: e.optionContent, callback: function(n) {
       e.optionContent = n;
-    }, expression: "optionContent" } })], 1), r("div", { staticClass: "card-footer text-right p-2" }, [r("button", { staticClass: "btn btn-sm btn-outline-secondary mr-2", attrs: { type: "button" }, on: { click: function(n) {
+    }, expression: "optionContent" } }), e.renderAs === "checkbox" ? r("label", { staticClass: "mt-3", attrs: { for: "option-aria-label" } }, [e._v(e._s(e.$t("Aria Label")))]) : e._e(), e.renderAs === "checkbox" ? r("b-form-input", { attrs: { id: "option-aria-label", "data-cy": "inspector-option-aria-label" }, model: { value: e.optionAriaLabel, callback: function(n) {
+      e.optionAriaLabel = n;
+    }, expression: "optionAriaLabel" } }) : e._e()], 1), r("div", { staticClass: "card-footer text-right p-2" }, [r("button", { staticClass: "btn btn-sm btn-outline-secondary mr-2", attrs: { type: "button" }, on: { click: function(n) {
       e.editIndex = null;
     } } }, [e._v(" " + e._s(e.$t("Cancel")) + " ")]), r("button", { staticClass: "btn btn-sm btn-secondary", attrs: { type: "button", "data-cy": "inspector-option-save" }, on: { click: function(n) {
       return e.addOption();
@@ -49077,7 +49092,7 @@ var bee = function() {
     e.dataName = i;
   }, expression: "dataName" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Get options from this variable. Must be an array.")))])], 1) : e._e(), e.dataSource === e.dataSourceValues.dataObject ? r("div", [r("label", { attrs: { for: "value" } }, [e._v(e._s(e.$t("Option Label Shown")))]), r("b-form-input", { attrs: { id: "value", placeholder: "Request Variable Property", "data-cy": "inspector-options-label" }, on: { change: e.valueChanged }, model: { value: e.value, callback: function(i) {
     e.value = i;
-  }, expression: "value" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Enter the property name from the Request data variable that displays to the user on the screen.")))])], 1) : e._e(), e.dataSource === e.dataSourceValues.collection ? r("div", [r("collection-select-list", { model: { value: e.collectionOptions, callback: function(i) {
+  }, expression: "value" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Enter the property name from the Request data variable that displays to the user on the screen.")))])], 1) : e._e(), e.dataSource === e.dataSourceValues.collection ? r("div", [r("collection-select-list", { attrs: { renderAs: e.renderAs }, model: { value: e.collectionOptions, callback: function(i) {
     e.collectionOptions = i;
   }, expression: "collectionOptions" } })], 1) : e._e(), e.showRenderAs ? r("div", [r("div", { staticClass: "row mb-3" }, [r("div", { staticClass: "col" }, [r("label", { attrs: { for: "render-as" } }, [e._v(e._s(e.$t("Show Control As")))]), r("b-form-select", { attrs: { id: "render-as", options: e.renderAsOptions, "data-cy": "inspector-render-as" }, model: { value: e.renderAs, callback: function(i) {
     e.renderAs = i;
@@ -49102,9 +49117,13 @@ var bee = function() {
     e.key = i;
   }, expression: "key" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Key name in the selected object to use as the value of this control. Leave blank to use the entire selected value.")))])], 1) : e._e(), r("label", { attrs: { for: "value" } }, [e._v(e._s(e.$t("Content")))]), r("mustache-helper"), r("b-form-input", { attrs: { id: "value", "data-cy": "inspector-datasource-content" }, on: { change: e.valueChanged }, model: { value: e.value, callback: function(i) {
     e.value = i;
-  }, expression: "value" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Content to display to the user in the select list.")))])], 1) : e._e(), e.valueTypeReturned === "single" && e.dataSource === e.dataSourceValues.dataObject ? r("div", [r("label", { attrs: { for: "key" } }, [e._v(e._s(e.$t("Variable Data Property")))]), r("b-form-input", { attrs: { id: "key", placeholder: "Request Variable Property", "data-cy": "inspector-options-value" }, on: { change: e.keyChanged }, model: { value: e.key, callback: function(i) {
+  }, expression: "value" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Content to display to the user in the select list.")))]), e.renderAs === "checkbox" ? r("label", { attrs: { for: "aria-label" } }, [e._v(e._s(e.$t("Aria Label")))]) : e._e(), e.renderAs === "checkbox" ? r("mustache-helper") : e._e(), e.renderAs === "checkbox" ? r("b-form-input", { attrs: { id: "aria-label", "data-cy": "inspector-datasource-aria-label" }, model: { value: e.optionAriaLabel, callback: function(i) {
+    e.optionAriaLabel = i;
+  }, expression: "optionAriaLabel" } }) : e._e(), e.renderAs === "checkbox" ? r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Aria label for accessibility support.")))]) : e._e()], 1) : e._e(), e.valueTypeReturned === "single" && e.dataSource === e.dataSourceValues.dataObject ? r("div", [r("label", { attrs: { for: "key" } }, [e._v(e._s(e.$t("Variable Data Property")))]), r("b-form-input", { attrs: { id: "key", placeholder: "Request Variable Property", "data-cy": "inspector-options-value" }, on: { change: e.keyChanged }, model: { value: e.key, callback: function(i) {
     e.key = i;
-  }, expression: "key" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Enter the property name from the Request data variable that will be passed as the value when selected.")))])], 1) : e._e(), e.dataSource === e.dataSourceValues.dataConnector ? r("div", [r("label", { attrs: { for: "data-sources-list" } }, [e._v(e._s(e.$t("Data Connector")))]), r("b-form-select", { class: e.selectedDataSource ? "" : "is-invalid", attrs: { id: "data-sources-list", options: e.dataSourcesList, "data-cy": "inspector-data-connector" }, model: { value: e.selectedDataSource, callback: function(i) {
+  }, expression: "key" } }), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Enter the property name from the Request data variable that will be passed as the value when selected.")))]), e.renderAs === "checkbox" ? r("label", { attrs: { for: "aria-label" } }, [e._v(e._s(e.$t("Aria Label")))]) : e._e(), e.renderAs === "checkbox" ? r("b-form-input", { attrs: { id: "aria-label", placeholder: "Aria Label Property", "data-cy": "inspector-options-aria-label" }, model: { value: e.optionAriaLabel, callback: function(i) {
+    e.optionAriaLabel = i;
+  }, expression: "optionAriaLabel" } }) : e._e(), e.renderAs === "checkbox" ? r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Enter the property name for the aria label from the Request data variable.")))]) : e._e()], 1) : e._e(), e.dataSource === e.dataSourceValues.dataConnector ? r("div", [r("label", { attrs: { for: "data-sources-list" } }, [e._v(e._s(e.$t("Data Connector")))]), r("b-form-select", { class: e.selectedDataSource ? "" : "is-invalid", attrs: { id: "data-sources-list", options: e.dataSourcesList, "data-cy": "inspector-data-connector" }, model: { value: e.selectedDataSource, callback: function(i) {
     e.selectedDataSource = i;
   }, expression: "selectedDataSource" } }), e.selectedDataSource ? e._e() : r("div", { staticClass: "invalid-feedback" }, [e._v(e._s(e.$t("An Data Connector must be selected")))]), r("small", { staticClass: "form-text text-muted mb-3" }, [e._v(e._s(e.$t("Data Connector to use")))])], 1) : e._e(), e.dataSource === e.dataSourceValues.dataConnector ? r("div", [r("label", { attrs: { for: "endpoint-list" } }, [e._v(e._s(e.$t("End Point")))]), r("b-form-select", { class: e.selectedDataSource && !e.selectedEndPoint ? "is-invalid" : "", attrs: { id: "endpoint-list", options: e.endPointList, "data-cy": "inspector-endpoint" }, model: { value: e.selectedEndPoint, callback: function(i) {
     e.selectedEndPoint = i;
@@ -49117,7 +49136,7 @@ var bee = function() {
   yee,
   !1,
   null,
-  "d8fa58ec",
+  "c8dcdddb",
   null,
   null
 );