formeo 4.1.0 → 4.1.1

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 (29) hide show
  1. package/dist/demo/assets/css/demo.min.css +1 -1
  2. package/dist/demo/assets/css/demo.min.css.gz +0 -0
  3. package/dist/demo/assets/css/formeo.min.css +1 -1
  4. package/dist/demo/assets/js/demo.min.js +2 -2
  5. package/dist/demo/assets/js/demo.min.js.gz +0 -0
  6. package/dist/demo/assets/js/formeo.cjs.js +94 -93
  7. package/dist/demo/assets/js/formeo.es.js +6 -6
  8. package/dist/demo/assets/js/formeo.min.cjs.js +3 -3
  9. package/dist/demo/assets/js/formeo.min.es.js +6 -6
  10. package/dist/demo/assets/js/formeo.min.js +94 -93
  11. package/dist/demo/assets/js/formeo.min.umd.js +3 -3
  12. package/dist/demo/assets/js/formeo.umd.js +94 -93
  13. package/dist/demo/assets/js/index.min.js +1 -1
  14. package/dist/demo/assets/js/index.min2.js +1 -1
  15. package/dist/demo/assets/js/index.min3.js +1 -1
  16. package/dist/demo/assets/js/mode-json.min.js +1 -1
  17. package/dist/demo/assets/js/mode-json.min.js.gz +0 -0
  18. package/dist/demo/assets/js/theme-github_light_default.min.js +1 -1
  19. package/dist/demo/index.html +1 -1
  20. package/dist/formeo.cjs.js +94 -93
  21. package/dist/formeo.css +1 -1
  22. package/dist/formeo.es.js +6 -6
  23. package/dist/formeo.min.cjs.js +3 -3
  24. package/dist/formeo.min.css +1 -1
  25. package/dist/formeo.min.es.js +6 -6
  26. package/dist/formeo.min.js +94 -93
  27. package/dist/formeo.min.umd.js +3 -3
  28. package/dist/formeo.umd.js +94 -93
  29. package/package.json +1 -1
package/dist/demo/index.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><nav aria-label="Footer navigation"><ul><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select> <label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.0.0</li></ul></nav><span id="formeo-logo-wrap"></span></header><section id="main_content" class="inner"><form class="build-form"></form><div class="render-form"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>
1
+ <!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag &amp; Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><nav aria-label="Footer navigation"><ul><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文（中国）</option><option value="zh-HK" dir="ltr">中文（中國香港特別行政區）</option></select> <label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v4.1.0</li></ul></nav><span id="formeo-logo-wrap"></span></header><section id="main_content" class="inner"><form class="build-form"></form><div class="render-form"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>
package/dist/formeo.cjs.js CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.0.0
4
+ Version: 4.1.0
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -9,6 +9,7 @@ Author: Draggable https://draggable.io
9
9
  var __defProp = Object.defineProperty;
10
10
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
11
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
12
+ var _a;
12
13
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
13
14
  async function fetchData(url) {
14
15
  try {
@@ -86,8 +87,8 @@ class I18N {
86
87
  * @return {String} language string or undefined
87
88
  */
88
89
  getValue(key, locale = this.locale) {
89
- var _a;
90
- const value = (_a = this.langs[locale]) == null ? void 0 : _a[key];
90
+ var _a2;
91
+ const value = (_a2 = this.langs[locale]) == null ? void 0 : _a2[key];
91
92
  return value || this.getFallbackValue(key);
92
93
  }
93
94
  /**
@@ -436,7 +437,7 @@ if (window !== void 0) {
436
437
  window.SmartTooltip = SmartTooltip;
437
438
  }
438
439
  const name$1 = "formeo";
439
- const version$2 = "4.0.0";
440
+ const version$2 = "4.1.0";
440
441
  const type = "module";
441
442
  const main = "dist/formeo.cjs.js";
442
443
  const module$1 = "dist/formeo.es.js";
@@ -1557,14 +1558,14 @@ const remove = (arr, val) => {
1557
1558
  }
1558
1559
  };
1559
1560
  const componentType = (node) => {
1560
- var _a;
1561
- const classMatch = (_a = node.className) == null ? void 0 : _a.match(COMPONENT_TYPE_CLASSNAMES_REGEXP);
1561
+ var _a2;
1562
+ const classMatch = (_a2 = node.className) == null ? void 0 : _a2.match(COMPONENT_TYPE_CLASSNAMES_REGEXP);
1562
1563
  return classMatch && COMPONENT_TYPE_CLASSNAMES_LOOKUP[classMatch[0]];
1563
1564
  };
1564
1565
  const unique = (array) => Array.from(new Set(array));
1565
1566
  const uuid = (elem) => {
1566
- var _a;
1567
- return ((_a = elem == null ? void 0 : elem.attrs) == null ? void 0 : _a.id) || (elem == null ? void 0 : elem.id) || shortId();
1567
+ var _a2;
1568
+ return ((_a2 = elem == null ? void 0 : elem.attrs) == null ? void 0 : _a2.id) || (elem == null ? void 0 : elem.id) || shortId();
1568
1569
  };
1569
1570
  const merge = (obj1, obj2) => {
1570
1571
  const customizer = (objValue, srcValue) => {
@@ -1618,8 +1619,8 @@ const numToPercent = (num) => `${num.toString()}%`;
1618
1619
  const sessionStorage = Object.create(null, {
1619
1620
  get: {
1620
1621
  value: (key) => {
1621
- var _a;
1622
- const itemValue = (_a = window.sessionStorage) == null ? void 0 : _a.getItem(key);
1622
+ var _a2;
1623
+ const itemValue = (_a2 = window.sessionStorage) == null ? void 0 : _a2.getItem(key);
1623
1624
  try {
1624
1625
  return JSON.parse(itemValue);
1625
1626
  } catch (_err) {
@@ -1629,9 +1630,9 @@ const sessionStorage = Object.create(null, {
1629
1630
  },
1630
1631
  set: {
1631
1632
  value: (key, itemValue) => {
1632
- var _a;
1633
+ var _a2;
1633
1634
  try {
1634
- return (_a = window.sessionStorage) == null ? void 0 : _a.setItem(key, JSON.stringify(itemValue));
1635
+ return (_a2 = window.sessionStorage) == null ? void 0 : _a2.setItem(key, JSON.stringify(itemValue));
1635
1636
  } catch (error) {
1636
1637
  console.error(error);
1637
1638
  }
@@ -1681,7 +1682,7 @@ function parseData(data = /* @__PURE__ */ Object.create(null)) {
1681
1682
  }
1682
1683
  const cleanFormData = (formData) => formData ? clone$1(parseData(formData)) : DEFAULT_FORMDATA();
1683
1684
  function buildFlatDataStructure(data, componentId, componentType2, result = {}) {
1684
- var _a;
1685
+ var _a2;
1685
1686
  if (!componentId || !data[componentType2][componentId]) {
1686
1687
  return result;
1687
1688
  }
@@ -1689,7 +1690,7 @@ function buildFlatDataStructure(data, componentId, componentType2, result = {})
1689
1690
  result[key] = data[componentType2][componentId];
1690
1691
  const childType = CHILD_TYPE_INDEX_MAP.get(componentType2);
1691
1692
  if (childType) {
1692
- const childrenIds = ((_a = data[componentType2][componentId].data) == null ? void 0 : _a.children) || [];
1693
+ const childrenIds = ((_a2 = data[componentType2][componentId].data) == null ? void 0 : _a2.children) || [];
1693
1694
  for (const childId of childrenIds) {
1694
1695
  buildFlatDataStructure(data, childId, childType, result);
1695
1696
  }
@@ -1707,7 +1708,7 @@ const POLYFILLS = [
1707
1708
  ];
1708
1709
  const relativeSpritePath = `../../lib/icons/${formeoSpriteId}.svg`;
1709
1710
  const localSpriteUrl = false ? (void 0)(relativeSpritePath) : relativeSpritePath;
1710
- const isDev = process.env.NODE_ENV === "development" || false;
1711
+ const isDev = typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) === "development" || false;
1711
1712
  const SVG_SPRITE_URL = isDev ? localSpriteUrl : `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/${formeoSpriteId}.svg`;
1712
1713
  const FALLBACK_SVG_SPRITE_URL = `https://draggable.github.io/formeo/assets/img/${formeoSpriteId}.svg`;
1713
1714
  const CSS_URL = `https://cdn.jsdelivr.net/npm/formeo@${version$1}/dist/formeo.min.css`;
@@ -4954,8 +4955,8 @@ const iconFontTemplates = {
4954
4955
  };
4955
4956
  const inputTags = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
4956
4957
  const getName = (elem = {}) => {
4957
- var _a, _b, _c;
4958
- let name2 = ((_a = elem == null ? void 0 : elem.attrs) == null ? void 0 : _a.name) || (elem == null ? void 0 : elem.name);
4958
+ var _a2, _b, _c;
4959
+ let name2 = ((_a2 = elem == null ? void 0 : elem.attrs) == null ? void 0 : _a2.name) || (elem == null ? void 0 : elem.name);
4959
4960
  if (name2) {
4960
4961
  return name2;
4961
4962
  }
@@ -5289,12 +5290,12 @@ class DOM {
5289
5290
  * @return {String} icon markup
5290
5291
  */
5291
5292
  icon(name2, config2) {
5292
- var _a, _b;
5293
+ var _a2, _b;
5293
5294
  if (!name2) {
5294
5295
  return;
5295
5296
  }
5296
5297
  const cacheKey = `${name2}?${new URLSearchParams(config2).toString()}`;
5297
- if ((_a = this.cachedIcons) == null ? void 0 : _a[cacheKey]) {
5298
+ if ((_a2 = this.cachedIcons) == null ? void 0 : _a2[cacheKey]) {
5298
5299
  return this.cachedIcons[cacheKey];
5299
5300
  }
5300
5301
  const iconConfig = this.icons[name2];
@@ -5365,7 +5366,7 @@ class DOM {
5365
5366
  const fieldType = attrs.type || elem.tag;
5366
5367
  const id = attrs.id || elem.id;
5367
5368
  const optionMap = (option2, i) => {
5368
- var _a;
5369
+ var _a2;
5369
5370
  const { label, value, ...rest } = option2;
5370
5371
  const defaultInput = () => {
5371
5372
  const input = {
@@ -5432,7 +5433,7 @@ class DOM {
5432
5433
  checkbox: defaultInput,
5433
5434
  radio: defaultInput
5434
5435
  };
5435
- return (_a = optionMarkup[fieldType]) == null ? void 0 : _a.call(optionMarkup, option2);
5436
+ return (_a2 = optionMarkup[fieldType]) == null ? void 0 : _a2.call(optionMarkup, option2);
5436
5437
  };
5437
5438
  const mappedOptions = options.map(optionMap);
5438
5439
  return mappedOptions;
@@ -6107,7 +6108,7 @@ class Autocomplete {
6107
6108
  * @param {Object} selectedOption - option - 'li' element - to be selected in autocomplete list
6108
6109
  */
6109
6110
  selectOption(selectedOption, list = this.list) {
6110
- var _a;
6111
+ var _a2;
6111
6112
  const options = list.querySelectorAll("li");
6112
6113
  for (const option2 of options) {
6113
6114
  const {
@@ -6116,7 +6117,7 @@ class Autocomplete {
6116
6117
  option2.classList.remove("active-option");
6117
6118
  if (isAddress(value)) {
6118
6119
  const component = components.getAddress(value);
6119
- (_a = component == null ? void 0 : component.dom) == null ? void 0 : _a.classList.remove(HIGHLIGHT_CLASSNAME);
6120
+ (_a2 = component == null ? void 0 : component.dom) == null ? void 0 : _a2.classList.remove(HIGHLIGHT_CLASSNAME);
6120
6121
  }
6121
6122
  }
6122
6123
  if (selectedOption) {
@@ -6137,7 +6138,7 @@ class Autocomplete {
6137
6138
  * Highlight a component that maps to the option
6138
6139
  */
6139
6140
  highlightComponent(option2) {
6140
- var _a;
6141
+ var _a2;
6141
6142
  const {
6142
6143
  dataset: { value }
6143
6144
  } = option2;
@@ -6166,7 +6167,7 @@ class Autocomplete {
6166
6167
  component.dom.classList.add(HIGHLIGHT_CLASSNAME);
6167
6168
  if (isOptionAddress) {
6168
6169
  const checkboxes = component.dom.querySelectorAll(".field-preview .f-checkbox, .field-preview .f-radio");
6169
- (_a = checkboxes[optionIndex]) == null ? void 0 : _a.classList.add(HIGHLIGHT_CLASSNAME);
6170
+ (_a2 = checkboxes[optionIndex]) == null ? void 0 : _a2.classList.add(HIGHLIGHT_CLASSNAME);
6170
6171
  }
6171
6172
  }
6172
6173
  }
@@ -6185,13 +6186,13 @@ class Autocomplete {
6185
6186
  * @param {String} value display text
6186
6187
  */
6187
6188
  setValue(target) {
6188
- var _a;
6189
+ var _a2;
6189
6190
  const { label, value } = target.dataset;
6190
6191
  this.displayField.value = label;
6191
6192
  this.hiddenField.value = value;
6192
6193
  this.value = value;
6193
6194
  this.clearButton.classList.toggle("hidden", !value.length);
6194
- (_a = this.onChange) == null ? void 0 : _a.call(this, { target: this.hiddenField });
6195
+ (_a2 = this.onChange) == null ? void 0 : _a2.call(this, { target: this.hiddenField });
6195
6196
  }
6196
6197
  }
6197
6198
  function inputConfigBase({ key, value, type: type2 = "text", checked }) {
@@ -6393,16 +6394,16 @@ const fieldVisibilityMap = {
6393
6394
  }
6394
6395
  };
6395
6396
  const toggleFieldVisibility = (fields2) => {
6396
- var _a;
6397
+ var _a2;
6397
6398
  for (const [fieldName, field2] of fields2) {
6398
- const shouldHide = !!((_a = fieldVisibilityMap[fieldName]) == null ? void 0 : _a.call(fieldVisibilityMap, fields2)) || false;
6399
+ const shouldHide = !!((_a2 = fieldVisibilityMap[fieldName]) == null ? void 0 : _a2.call(fieldVisibilityMap, fields2)) || false;
6399
6400
  field2.classList.toggle(hiddenPropertyClassname, shouldHide);
6400
6401
  }
6401
6402
  };
6402
6403
  const isCheckedValue = "isChecked";
6403
6404
  const isCheckedOption = (option2) => option2.value.endsWith("Checked");
6404
6405
  const toggleCheckablePropertyOptions = (isCheckable, propertyField) => {
6405
- var _a;
6406
+ var _a2;
6406
6407
  if (isCheckable && isCheckedOption(propertyField)) {
6407
6408
  return null;
6408
6409
  }
@@ -6417,7 +6418,7 @@ const toggleCheckablePropertyOptions = (isCheckable, propertyField) => {
6417
6418
  option2.classList.toggle(hiddenOptionClassname, shouldHide);
6418
6419
  }
6419
6420
  if (hiddenOptionValues.includes(propertyField.value)) {
6420
- propertyField.value = isCheckable ? isCheckedValue : ((_a = options.find((opt) => !isCheckedOption(opt))) == null ? void 0 : _a.value) || propertyField.value;
6421
+ propertyField.value = isCheckable ? isCheckedValue : ((_a2 = options.find((opt) => !isCheckedOption(opt))) == null ? void 0 : _a2.value) || propertyField.value;
6421
6422
  }
6422
6423
  };
6423
6424
  function orderConditionValues(conditionValues, fieldOrder = CONDITION_INPUT_ORDER) {
@@ -6714,9 +6715,9 @@ class EditPanelItem {
6714
6715
  return controls;
6715
6716
  }
6716
6717
  itemInput(key, value) {
6717
- var _a, _b;
6718
+ var _a2, _b;
6718
6719
  const valType = dom.childType(value) || "string";
6719
- const dataKey = ((_a = panelDataKeyMap.get(this.panelName)) == null ? void 0 : _a({ itemKey: this.itemKey, key })) || this.itemKey;
6720
+ const dataKey = ((_a2 = panelDataKeyMap.get(this.panelName)) == null ? void 0 : _a2({ itemKey: this.itemKey, key })) || this.itemKey;
6720
6721
  const labelKey = dataKey.split(".").filter(Number.isNaN).join(".") || key;
6721
6722
  const baseConfig = ITEM_INPUT_TYPE_MAP[valType]({ key, value });
6722
6723
  const name2 = `${this.field.shortId}-${slugifyAddress(dataKey).replace(/-\d+-(selected)/g, "-$1")}`;
@@ -6761,7 +6762,7 @@ class EditPanel {
6761
6762
  * @param {String|Array} val
6762
6763
  */
6763
6764
  __publicField(this, "addAttribute", (attr, valArg) => {
6764
- var _a;
6765
+ var _a2;
6765
6766
  let val = valArg;
6766
6767
  const safeAttr = safeAttrName(attr);
6767
6768
  const itemKey = `attrs.${safeAttr}`;
@@ -6772,7 +6773,7 @@ class EditPanel {
6772
6773
  val = JSON.parse(val);
6773
6774
  }
6774
6775
  this.component.set(`attrs.${attr}`, val);
6775
- (_a = addAttributeActions[safeAttr]) == null ? void 0 : _a.call(addAttributeActions, val, this.component);
6776
+ (_a2 = addAttributeActions[safeAttr]) == null ? void 0 : _a2.call(addAttributeActions, val, this.component);
6776
6777
  const existingAttr = this.props.querySelector(`.${this.component.name}-attrs-${safeAttr}`);
6777
6778
  const newAttr = new EditPanelItem({
6778
6779
  key: itemKey,
@@ -6990,10 +6991,10 @@ class Panels {
6990
6991
  */
6991
6992
  constructor(options) {
6992
6993
  __publicField(this, "toggleTabbedLayout", () => {
6993
- var _a;
6994
+ var _a2;
6994
6995
  this.getPanelDisplay();
6995
6996
  const isTabbed = this.isTabbed;
6996
- (_a = this.panelsWrap.parentElement) == null ? void 0 : _a.classList.toggle("tabbed-panels", isTabbed);
6997
+ (_a2 = this.panelsWrap.parentElement) == null ? void 0 : _a2.classList.toggle("tabbed-panels", isTabbed);
6997
6998
  if (isTabbed) {
6998
6999
  this.panelNav.removeAttribute("style");
6999
7000
  }
@@ -7543,8 +7544,8 @@ class Component extends Data {
7543
7544
  * @param {function} handler - Event handler function to remove
7544
7545
  */
7545
7546
  removeEventListener(eventName, handler) {
7546
- var _a;
7547
- if (!((_a = this.eventListeners) == null ? void 0 : _a.has(eventName))) {
7547
+ var _a2;
7548
+ if (!((_a2 = this.eventListeners) == null ? void 0 : _a2.has(eventName))) {
7548
7549
  return;
7549
7550
  }
7550
7551
  const handlers = this.eventListeners.get(eventName);
@@ -7559,14 +7560,14 @@ class Component extends Data {
7559
7560
  * @param {object} eventData - Data to pass to event handlers
7560
7561
  */
7561
7562
  dispatchComponentEvent(eventName, eventData = {}) {
7562
- var _a;
7563
+ var _a2;
7563
7564
  const fullEventData = {
7564
7565
  component: this,
7565
7566
  type: eventName,
7566
7567
  timestamp: Date.now(),
7567
7568
  ...eventData
7568
7569
  };
7569
- if ((_a = this.eventListeners) == null ? void 0 : _a.has(eventName)) {
7570
+ if ((_a2 = this.eventListeners) == null ? void 0 : _a2.has(eventName)) {
7570
7571
  this.eventListeners.get(eventName).forEach((handler) => {
7571
7572
  try {
7572
7573
  if (typeof handler === "function") {
@@ -7744,8 +7745,8 @@ class Component extends Data {
7744
7745
  const { buttons, disabled } = this.config.actionButtons;
7745
7746
  const activeButtons = buttons.filter((btn) => !disabled.includes(btn));
7746
7747
  const actionButtonsConfigs = activeButtons.map((btn) => {
7747
- var _a;
7748
- return ((_a = buttonConfig[btn]) == null ? void 0 : _a.call(buttonConfig)) || btn;
7748
+ var _a2;
7749
+ return ((_a2 = buttonConfig[btn]) == null ? void 0 : _a2.call(buttonConfig)) || btn;
7749
7750
  });
7750
7751
  this.actionButtons = actionButtonsConfigs;
7751
7752
  return this.actionButtons;
@@ -7786,7 +7787,7 @@ class Component extends Data {
7786
7787
  * @return {Object} child DOM element
7787
7788
  */
7788
7789
  addChild(childData = {}, index2 = this.domChildren.length) {
7789
- var _a, _b;
7790
+ var _a2, _b;
7790
7791
  let data = childData;
7791
7792
  if (typeof childData !== "object") {
7792
7793
  data = { id: data };
@@ -7817,7 +7818,7 @@ class Component extends Data {
7817
7818
  addedVia: "addChild"
7818
7819
  // indicate how the component was added
7819
7820
  });
7820
- (_b = (_a = this.config.events) == null ? void 0 : _a.onAddChild) == null ? void 0 : _b.call(_a, { parent: this, child });
7821
+ (_b = (_a2 = this.config.events) == null ? void 0 : _a2.onAddChild) == null ? void 0 : _b.call(_a2, { parent: this, child });
7821
7822
  const grandChildren = child.get("children");
7822
7823
  if (grandChildren == null ? void 0 : grandChildren.length) {
7823
7824
  child.loadChildren(grandChildren);
@@ -7833,7 +7834,7 @@ class Component extends Data {
7833
7834
  * @return {Object} Component
7834
7835
  */
7835
7836
  onAdd({ from, to, item, newIndex: newIndex2 }) {
7836
- var _a;
7837
+ var _a2;
7837
7838
  if (!from.classList.contains(CONTROL_GROUP_CLASSNAME)) {
7838
7839
  from = from.parentElement;
7839
7840
  }
@@ -7924,7 +7925,7 @@ class Component extends Data {
7924
7925
  return action == null ? void 0 : action(item.id);
7925
7926
  }
7926
7927
  };
7927
- const component = (_a = onAddConditions[fromType]) == null ? void 0 : _a.call(onAddConditions, item, newIndex2);
7928
+ const component = (_a2 = onAddConditions[fromType]) == null ? void 0 : _a2.call(onAddConditions, item, newIndex2);
7928
7929
  this.dispatchComponentEvent("onAdd", {
7929
7930
  from,
7930
7931
  to,
@@ -8883,8 +8884,8 @@ class Control {
8883
8884
  this.id = controlData.id || uuid();
8884
8885
  }
8885
8886
  get controlId() {
8886
- var _a, _b;
8887
- return ((_a = this.controlData.meta) == null ? void 0 : _a.id) || ((_b = this.controlData.config) == null ? void 0 : _b.controlId);
8887
+ var _a2, _b;
8888
+ return ((_a2 = this.controlData.meta) == null ? void 0 : _a2.id) || ((_b = this.controlData.config) == null ? void 0 : _b.controlId);
8888
8889
  }
8889
8890
  get dom() {
8890
8891
  const { meta, config: config2 } = this.controlData;
@@ -8906,8 +8907,8 @@ class Control {
8906
8907
  return group && Controls$2.panels.nav.refresh(indexOfNode(group));
8907
8908
  },
8908
8909
  click: ({ target }) => {
8909
- var _a;
8910
- const controlId = (_a = target.closest(".field-control")) == null ? void 0 : _a.id;
8910
+ var _a2;
8911
+ const controlId = (_a2 = target.closest(".field-control")) == null ? void 0 : _a2.id;
8911
8912
  if (controlId) {
8912
8913
  Controls$2.addElement(controlId);
8913
8914
  }
@@ -8935,9 +8936,9 @@ class Control {
8935
8936
  * @return {String} the translated label
8936
8937
  */
8937
8938
  i18n(lookup, args) {
8938
- var _a, _b;
8939
+ var _a2, _b;
8939
8940
  const locale = mi18n.locale;
8940
- const controlTranslations = (_a = this.definition) == null ? void 0 : _a.i18n;
8941
+ const controlTranslations = (_a2 = this.definition) == null ? void 0 : _a2.i18n;
8941
8942
  const localeTranslations = (controlTranslations == null ? void 0 : controlTranslations[locale]) || {};
8942
8943
  return (((_b = localeTranslations[lookup]) == null ? void 0 : _b.call(localeTranslations)) ?? localeTranslations[lookup]) || mi18n.get(lookup, args);
8943
8944
  }
@@ -9314,8 +9315,8 @@ class Field extends Component {
9314
9315
  this.controlId = this.get("config.controlId") || this.get("meta.id");
9315
9316
  const actionButtons = this.getActionButtons();
9316
9317
  const hasEditButton = this.actionButtons.some((child) => {
9317
- var _a;
9318
- return ((_a = child.meta) == null ? void 0 : _a.id) === "edit";
9318
+ var _a2;
9319
+ return ((_a2 = child.meta) == null ? void 0 : _a2.id) === "edit";
9319
9320
  });
9320
9321
  this.updateEditPanels();
9321
9322
  const field2 = dom.create({
@@ -9398,13 +9399,13 @@ class Field extends Component {
9398
9399
  get defaultPreviewActions() {
9399
9400
  return {
9400
9401
  change: (evt) => {
9401
- var _a;
9402
+ var _a2;
9402
9403
  const { target } = evt;
9403
9404
  const { type: type2 } = target;
9404
9405
  if (isSelectableType.has(type2)) {
9405
9406
  const selectedOptions = this.preview.querySelectorAll(":checked");
9406
9407
  const optionsData = this.get("options");
9407
- const checkedType = ((_a = optionsData == null ? void 0 : optionsData[0]) == null ? void 0 : _a.selected) !== void 0 ? "selected" : "checked";
9408
+ const checkedType = ((_a2 = optionsData == null ? void 0 : optionsData[0]) == null ? void 0 : _a2.selected) !== void 0 ? "selected" : "checked";
9408
9409
  const optionsDataMap = optionsData.reduce((acc, option2) => {
9409
9410
  acc[option2.value] = option2;
9410
9411
  acc[option2.value][checkedType] = false;
@@ -9423,12 +9424,12 @@ class Field extends Component {
9423
9424
  }
9424
9425
  },
9425
9426
  input: ({ target }) => {
9426
- var _a;
9427
+ var _a2;
9427
9428
  if (["input", "meter", "progress", "button"].includes(target.tagName.toLowerCase())) {
9428
9429
  super.set("attrs.value", target.value);
9429
9430
  return this.debouncedUpdateEditPanels();
9430
9431
  }
9431
- if (target.contentEditable && !((_a = target.type) == null ? void 0 : _a.startsWith("select-"))) {
9432
+ if (target.contentEditable && !((_a2 = target.type) == null ? void 0 : _a2.startsWith("select-"))) {
9432
9433
  const parentClassList = target.parentElement.classList;
9433
9434
  const isOption = parentClassList.contains("f-checkbox") || parentClassList.contains("f-radio");
9434
9435
  if (isOption) {
@@ -9447,14 +9448,14 @@ class Field extends Component {
9447
9448
  * @return {Object} fieldPreview
9448
9449
  */
9449
9450
  fieldPreview() {
9450
- var _a;
9451
+ var _a2;
9451
9452
  const { action = {}, ...prevData } = clone$1(this.data);
9452
9453
  prevData.id = `prev-${this.id}`;
9453
9454
  prevData.action = Object.entries(action).reduce((acc, [key, value]) => {
9454
9455
  acc[key] = value.bind(this);
9455
9456
  return acc;
9456
9457
  }, {});
9457
- if ((_a = this.data) == null ? void 0 : _a.config.editableContent) {
9458
+ if ((_a2 = this.data) == null ? void 0 : _a2.config.editableContent) {
9458
9459
  prevData.attrs = { ...prevData.attrs, contenteditable: true };
9459
9460
  }
9460
9461
  const fieldPreview = {
@@ -9674,28 +9675,28 @@ const defaults$1 = {
9674
9675
  },
9675
9676
  onChange: (...args) => defaults$1.onUpdate(...args),
9676
9677
  onUpdate: (evt) => {
9677
- var _a;
9678
- return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
9678
+ var _a2;
9679
+ return ((_a2 = events.opts) == null ? void 0 : _a2.debug) && console.log(evt);
9679
9680
  },
9680
9681
  onUpdateStage: (evt) => {
9681
- var _a;
9682
- return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
9682
+ var _a2;
9683
+ return ((_a2 = events.opts) == null ? void 0 : _a2.debug) && console.log(evt);
9683
9684
  },
9684
9685
  onUpdateRow: (evt) => {
9685
- var _a;
9686
- return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
9686
+ var _a2;
9687
+ return ((_a2 = events.opts) == null ? void 0 : _a2.debug) && console.log(evt);
9687
9688
  },
9688
9689
  onUpdateColumn: (evt) => {
9689
- var _a;
9690
- return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
9690
+ var _a2;
9691
+ return ((_a2 = events.opts) == null ? void 0 : _a2.debug) && console.log(evt);
9691
9692
  },
9692
9693
  onUpdateField: (evt) => {
9693
- var _a;
9694
- return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
9694
+ var _a2;
9695
+ return ((_a2 = events.opts) == null ? void 0 : _a2.debug) && console.log(evt);
9695
9696
  },
9696
9697
  onRender: (evt) => {
9697
- var _a;
9698
- return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
9698
+ var _a2;
9699
+ return ((_a2 = events.opts) == null ? void 0 : _a2.debug) && console.log(evt);
9699
9700
  },
9700
9701
  onSave: (_evt) => {
9701
9702
  },
@@ -9706,10 +9707,10 @@ const defaults$1 = {
9706
9707
  }
9707
9708
  };
9708
9709
  const defaultCustomEvent = ({ src, ...evtData }, type2 = EVENT_FORMEO_UPDATED) => {
9709
- var _a, _b;
9710
+ var _a2, _b;
9710
9711
  const evt = new window.CustomEvent(type2, {
9711
9712
  detail: evtData,
9712
- bubbles: ((_a = events.opts) == null ? void 0 : _a.debug) || ((_b = events.opts) == null ? void 0 : _b.bubbles)
9713
+ bubbles: ((_a2 = events.opts) == null ? void 0 : _a2.debug) || ((_b = events.opts) == null ? void 0 : _b.bubbles)
9713
9714
  });
9714
9715
  evt.data = (src || document).dispatchEvent(evt);
9715
9716
  return evt;
@@ -9970,7 +9971,7 @@ let FormeoEditor$1 = class FormeoEditor {
9970
9971
  * @return {Promise} asynchronously loaded remote resources
9971
9972
  */
9972
9973
  async loadResources() {
9973
- var _a;
9974
+ var _a2;
9974
9975
  document.removeEventListener("DOMContentLoaded", this.loadResources);
9975
9976
  const promises = [];
9976
9977
  if (this.opts.polyfills) {
@@ -9978,7 +9979,7 @@ let FormeoEditor$1 = class FormeoEditor {
9978
9979
  }
9979
9980
  await fetchIcons(this.opts.svgSprite);
9980
9981
  promises.push(fetchFormeoStyle(this.opts.style));
9981
- promises.push(mi18n.init({ ...this.opts.i18n, locale: (_a = window.sessionStorage) == null ? void 0 : _a.getItem(SESSION_LOCALE_KEY) }));
9982
+ promises.push(mi18n.init({ ...this.opts.i18n, locale: (_a2 = window.sessionStorage) == null ? void 0 : _a2.getItem(SESSION_LOCALE_KEY) }));
9982
9983
  const resolvedPromises = await Promise.all(promises);
9983
9984
  if (this.opts.allowEdit) {
9984
9985
  this.init();
@@ -9992,21 +9993,21 @@ let FormeoEditor$1 = class FormeoEditor {
9992
9993
  */
9993
9994
  init() {
9994
9995
  return Controls$2.init(this.opts.controls, this.opts.stickyControls).then((controls) => {
9995
- var _a, _b;
9996
+ var _a2, _b;
9996
9997
  this.controls = controls;
9997
9998
  this.load(this.userFormData, this.opts);
9998
9999
  this.formId = components.get("id");
9999
10000
  this.i18n = {
10000
10001
  setLang: (formeoLocale) => {
10001
- var _a2;
10002
- (_a2 = window.sessionStorage) == null ? void 0 : _a2.setItem(SESSION_LOCALE_KEY, formeoLocale);
10002
+ var _a3;
10003
+ (_a3 = window.sessionStorage) == null ? void 0 : _a3.setItem(SESSION_LOCALE_KEY, formeoLocale);
10003
10004
  const loadLang = mi18n.setCurrent(formeoLocale);
10004
10005
  loadLang.then(() => {
10005
10006
  this.init();
10006
10007
  }, console.error);
10007
10008
  }
10008
10009
  };
10009
- (_b = (_a = this.opts).onLoad) == null ? void 0 : _b.call(_a, this);
10010
+ (_b = (_a2 = this.opts).onLoad) == null ? void 0 : _b.call(_a2, this);
10010
10011
  });
10011
10012
  }
10012
10013
  load(formData = this.userFormData, opts = this.opts) {
@@ -10131,8 +10132,8 @@ const targetPropertyMap = {
10131
10132
  elem.checked = false;
10132
10133
  },
10133
10134
  value: (elem, { assignment, ...rest }) => {
10134
- var _a;
10135
- const assignmentAction = (_a = assignmentMap[assignment]) == null ? void 0 : _a.call(assignmentMap, elem, rest);
10135
+ var _a2;
10136
+ const assignmentAction = (_a2 = assignmentMap[assignment]) == null ? void 0 : _a2.call(assignmentMap, elem, rest);
10136
10137
  const event = new Event("input", { bubbles: true });
10137
10138
  elem.dispatchEvent(event);
10138
10139
  return assignmentAction;
@@ -10240,8 +10241,8 @@ let FormeoRenderer$1 = class FormeoRenderer {
10240
10241
  );
10241
10242
  });
10242
10243
  __publicField(this, "processFields", (fieldIds) => this.orderChildren("fields", fieldIds).map(({ id, ...field2 }) => {
10243
- var _a, _b;
10244
- const controlId = ((_a = field2.config) == null ? void 0 : _a.controlId) || ((_b = field2.meta) == null ? void 0 : _b.id);
10244
+ var _a2, _b;
10245
+ const controlId = ((_a2 = field2.config) == null ? void 0 : _a2.controlId) || ((_b = field2.meta) == null ? void 0 : _b.id);
10245
10246
  const { action = {}, dependencies: dependencies2 = {} } = this.elements[controlId] || {};
10246
10247
  if (dependencies2) {
10247
10248
  fetchDependencies(dependencies2);
@@ -10307,27 +10308,27 @@ let FormeoRenderer$1 = class FormeoRenderer {
10307
10308
  * Evaulate conditions
10308
10309
  */
10309
10310
  __publicField(this, "evaluateCondition", ({ source, sourceProperty, targetProperty, comparison, target }) => {
10310
- var _a;
10311
+ var _a2;
10311
10312
  const sourceValue = this.getComponentProperty(source, sourceProperty);
10312
10313
  if (typeof sourceValue === "boolean") {
10313
10314
  return sourceValue;
10314
10315
  }
10315
10316
  const targetValue = String(isAddress(target) ? this.getComponentProperty(target, targetProperty) : target);
10316
- return (_a = comparisonMap[comparison]) == null ? void 0 : _a.call(comparisonMap, sourceValue, targetValue);
10317
+ return (_a2 = comparisonMap[comparison]) == null ? void 0 : _a2.call(comparisonMap, sourceValue, targetValue);
10317
10318
  });
10318
10319
  __publicField(this, "execResult", ({ target, targetProperty, assignment, value }) => {
10319
- var _a;
10320
+ var _a2;
10320
10321
  if (isAddress(target)) {
10321
10322
  const { component, option: option2 } = this.getComponent(target);
10322
10323
  const elem = option2 || component;
10323
- (_a = targetPropertyMap[targetProperty]) == null ? void 0 : _a.call(targetPropertyMap, elem, { targetProperty, assignment, value });
10324
+ (_a2 = targetPropertyMap[targetProperty]) == null ? void 0 : _a2.call(targetPropertyMap, elem, { targetProperty, assignment, value });
10324
10325
  }
10325
10326
  });
10326
10327
  __publicField(this, "getComponentProperty", (address, propertyName) => {
10327
- var _a;
10328
+ var _a2;
10328
10329
  const { component, option: option2 } = this.getComponent(address);
10329
10330
  const elem = option2 || component;
10330
- return ((_a = propertyMap[propertyName]) == null ? void 0 : _a.call(propertyMap, elem)) || elem[propertyName];
10331
+ return ((_a2 = propertyMap[propertyName]) == null ? void 0 : _a2.call(propertyMap, elem)) || elem[propertyName];
10331
10332
  });
10332
10333
  __publicField(this, "getComponent", (address) => {
10333
10334
  const result = {
@@ -10701,7 +10702,7 @@ class RadioGroupControl extends Control {
10701
10702
  }
10702
10703
  class SelectControl extends Control {
10703
10704
  constructor(controlConfig = {}) {
10704
- var _a;
10705
+ var _a2;
10705
10706
  const selectConfig = {
10706
10707
  tag: "select",
10707
10708
  config: {
@@ -10717,7 +10718,7 @@ class SelectControl extends Control {
10717
10718
  icon: "select",
10718
10719
  id: "select"
10719
10720
  },
10720
- options: generateOptionConfig({ type: "option", isMultiple: (_a = controlConfig.attrs) == null ? void 0 : _a.multiple })
10721
+ options: generateOptionConfig({ type: "option", isMultiple: (_a2 = controlConfig.attrs) == null ? void 0 : _a2.multiple })
10721
10722
  };
10722
10723
  const mergedConfig = merge(selectConfig, controlConfig);
10723
10724
  super(mergedConfig);
package/dist/formeo.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 4.0.0
4
+ Version: 4.1.0
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7