@websy/websy-designs 0.0.117 → 0.0.121

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.
@@ -39,7 +39,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
39
39
  WebsyMap
40
40
  WebsyKPI
41
41
  WebsyPDFButton
42
+ WebsyTemplate
42
43
  APIService
44
+ WebsyUtils
43
45
  */
44
46
  var WebsyPopupDialog = /*#__PURE__*/function () {
45
47
  function WebsyPopupDialog(elementId, options) {
@@ -210,8 +212,10 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
210
212
  _classCallCheck(this, WebsyNavigationMenu);
211
213
 
212
214
  this.options = _extends({}, {
215
+ collapsable: false,
213
216
  orientation: 'horizontal',
214
- parentMap: {}
217
+ parentMap: {},
218
+ childIndentation: 10
215
219
  }, options);
216
220
 
217
221
  if (!elementId) {
@@ -265,8 +269,12 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
265
269
  if (el) {
266
270
  var html = "";
267
271
 
272
+ if (this.options.collapsable === true) {
273
+ html += "\n <div id='".concat(this.elementId, "_menuIcon' class='websy-menu-icon'>\n <svg viewbox=\"0 0 40 40\" width=\"30\" height=\"40\"> \n <rect x=\"0\" y=\"0\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n <rect x=\"0\" y=\"12\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n <rect x=\"0\" y=\"24\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n </svg>\n </div>\n ");
274
+ }
275
+
268
276
  if (this.options.logo) {
269
- html += "\n <div id='".concat(this.elementId, "_menuIcon' class='websy-menu-icon'>\n <svg viewbox=\"0 0 40 40\" width=\"40\" height=\"40\"> \n <rect x=\"0\" y=\"0\" width=\"40\" height=\"4\" rx=\"2\"></rect>\n <rect x=\"0\" y=\"12\" width=\"40\" height=\"4\" rx=\"2\"></rect>\n <rect x=\"0\" y=\"24\" width=\"40\" height=\"4\" rx=\"2\"></rect>\n </svg>\n </div>\n <div \n class='logo ").concat(this.options.logo.classes && this.options.logo.classes.join(' ') || '', "'\n ").concat(this.options.logo.attributes && this.options.logo.attributes.join(' '), "\n >\n <img src='").concat(this.options.logo.url, "'></img>\n </div>\n <div id='").concat(this.elementId, "_mask' class='websy-menu-mask'></div>\n <div id=\"").concat(this.elementId, "_menuContainer\" class=\"websy-menu-block-container\">\n ");
277
+ html += " \n <div \n class='logo ".concat(this.options.logo.classes && this.options.logo.classes.join(' ') || '', "'\n ").concat(this.options.logo.attributes && this.options.logo.attributes.join(' '), "\n >\n <img src='").concat(this.options.logo.url, "'></img>\n </div>\n <div id='").concat(this.elementId, "_mask' class='websy-menu-mask'></div>\n <div id=\"").concat(this.elementId, "_menuContainer\" class=\"websy-menu-block-container\">\n ");
270
278
  }
271
279
 
272
280
  html += this.renderBlock(this.options.items, 'main', 1);
@@ -295,7 +303,8 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
295
303
 
296
304
  var active = items[i]["default"] === true ? 'active' : '';
297
305
  var currentBlock = this.normaliseString(items[i].text);
298
- html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes && items[i].classes.join(' '), " ").concat(selected, " ").concat(active, "' \n\t\t\t\t\t\t id='").concat(this.elementId, "_").concat(currentBlock, "_label' \n\t\t\t\t\t\t data-id='").concat(currentBlock, "' \n\t\t\t\t\t\t data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n\t\t\t\t\t\t data-text='").concat(items[i].text, "'\n\t\t\t\t\t\t style='padding-left: ").concat(level * this.options.menuHPadding, "px'\n\t\t\t\t\t\t ").concat(items[i].attributes && items[i].attributes.join(' '), "\n >\n ");
306
+ var blockId = items[i].id || "".concat(this.elementId, "_").concat(currentBlock, "_label");
307
+ html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes && items[i].classes.join(' '), " ").concat(selected, " ").concat(active, "' \n\t\t\t\t\t\t id='").concat(blockId, "' \n\t\t\t\t\t\t data-id='").concat(currentBlock, "'\n data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n\t\t\t\t\t\t data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n\t\t\t\t\t\t data-text='").concat(items[i].text, "'\n\t\t\t\t\t\t style='padding-left: ").concat(level * this.options.childIndentation, "px'\n\t\t\t\t\t\t ").concat(items[i].attributes && items[i].attributes.join(' '), "\n >\n ");
299
308
 
300
309
  if (this.options.orientation === 'horizontal') {
301
310
  html += items[i].text;
@@ -326,6 +335,9 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
326
335
  html += "</ul>";
327
336
  return html;
328
337
  }
338
+ }, {
339
+ key: "toggleOpen",
340
+ value: function toggleOpen() {}
329
341
  }, {
330
342
  key: "toggleMobileMenu",
331
343
  value: function toggleMobileMenu(method) {
@@ -395,6 +407,16 @@ var WebsyForm = /*#__PURE__*/function () {
395
407
  }
396
408
 
397
409
  _createClass(WebsyForm, [{
410
+ key: "cancelForm",
411
+ value: function cancelForm() {
412
+ var formEl = document.getElementById("".concat(this.elementId, "Form"));
413
+ formEl.reset();
414
+
415
+ if (this.options.cancelFn) {
416
+ this.options.cancelFn(this.elementId);
417
+ }
418
+ }
419
+ }, {
398
420
  key: "checkRecaptcha",
399
421
  value: function checkRecaptcha() {
400
422
  var _this = this;
@@ -440,8 +462,12 @@ var WebsyForm = /*#__PURE__*/function () {
440
462
  }, {
441
463
  key: "handleClick",
442
464
  value: function handleClick(event) {
465
+ event.preventDefault();
466
+
443
467
  if (event.target.classList.contains('submit')) {
444
468
  this.submitForm();
469
+ } else if (event.target.classList.contains('cancel')) {
470
+ this.cancelForm();
445
471
  }
446
472
  }
447
473
  }, {
@@ -492,23 +518,28 @@ var WebsyForm = /*#__PURE__*/function () {
492
518
 
493
519
  if (el) {
494
520
  var html = "\n <form id=\"".concat(this.elementId, "Form\">\n ");
495
- this.options.fields.forEach(function (f) {
521
+ this.options.fields.forEach(function (f, i) {
496
522
  if (f.component) {
497
523
  componentsToProcess.push(f);
498
- html += "\n ".concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n <div id='").concat(_this3.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n ");
524
+ html += "\n ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes, "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n <div id='").concat(_this3.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n </div><!--\n ");
499
525
  } else if (f.type === 'longtext') {
500
- html += "\n ".concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n <textarea\n id=\"").concat(_this3.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n placeholder=\"").concat(f.placeholder || '', "\"\n name=\"").concat(f.field, "\" \n class=\"websy-input websy-textarea ").concat(f.classes, "\"\n ></textarea>\n ");
526
+ html += "\n ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes, "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n <textarea\n id=\"").concat(_this3.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n placeholder=\"").concat(f.placeholder || '', "\"\n name=\"").concat(f.field, "\" \n class=\"websy-input websy-textarea\"\n ></textarea>\n </div><!--\n ");
501
527
  } else {
502
- html += "\n ".concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n <input \n id=\"").concat(_this3.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n type=\"").concat(f.type || 'text', "\" \n class=\"websy-input ").concat(f.classes, "\" \n name=\"").concat(f.field, "\" \n placeholder=\"").concat(f.placeholder || '', "\"\n value=\"").concat(f.value || '', "\"\n oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n />\n ");
528
+ html += "\n ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes, "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n <input \n id=\"").concat(_this3.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n type=\"").concat(f.type || 'text', "\" \n class=\"websy-input\" \n name=\"").concat(f.field, "\" \n placeholder=\"").concat(f.placeholder || '', "\"\n value=\"").concat(f.value || '', "\"\n oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n />\n </div><!--\n ");
503
529
  }
504
530
  });
531
+ html += "\n --><button class=\"websy-btn submit ".concat(this.options.submit.classes, "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n ");
532
+
533
+ if (this.options.cancel) {
534
+ html += "\n --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes, "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n ");
535
+ }
536
+
505
537
  html += " \n </form>\n <div id=\"".concat(this.elementId, "_validationFail\" class=\"websy-validation-failure\"></div>\n ");
506
538
 
507
539
  if (this.options.useRecaptcha === true) {
508
540
  html += "\n <div id='".concat(this.elementId, "_recaptcha'></div>\n ");
509
541
  }
510
542
 
511
- html += "\n <button class=\"websy-btn submit ".concat(this.options.submit.classes, "\">").concat(this.options.submit.text || 'Save', "</button>\n ");
512
543
  el.innerHTML = html;
513
544
  this.processComponents(componentsToProcess, function () {
514
545
  if (_this3.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
@@ -1009,6 +1040,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
1009
1040
  Date.prototype.floor = function () {
1010
1041
  return new Date("".concat(this.getMonth() + 1, "/").concat(this.getDate(), "/").concat(this.getFullYear()));
1011
1042
  };
1043
+ /* global WebsyUtils */
1044
+
1012
1045
 
1013
1046
  var WebsyDropdown = /*#__PURE__*/function () {
1014
1047
  function WebsyDropdown(elementId, options) {
@@ -1021,8 +1054,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
1021
1054
  style: 'plain',
1022
1055
  items: [],
1023
1056
  label: '',
1057
+ disabled: false,
1024
1058
  minSearchCharacters: 2,
1025
- showCompleteSelectedList: false
1059
+ showCompleteSelectedList: false,
1060
+ closeAfterSelection: true
1026
1061
  };
1027
1062
  this.options = _extends({}, DEFAULTS, options);
1028
1063
  this.tooltipTimeoutFn = null;
@@ -1065,6 +1100,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
1065
1100
  var contentEl = document.getElementById("".concat(this.elementId, "_content"));
1066
1101
  maskEl.classList.remove('active');
1067
1102
  contentEl.classList.remove('active');
1103
+ contentEl.classList.remove('on-top');
1068
1104
  var searchEl = document.getElementById("".concat(this.elementId, "_search"));
1069
1105
 
1070
1106
  if (searchEl) {
@@ -1078,6 +1114,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
1078
1114
  }, {
1079
1115
  key: "handleClick",
1080
1116
  value: function handleClick(event) {
1117
+ if (this.options.disabled === true) {
1118
+ return;
1119
+ }
1120
+
1081
1121
  if (event.target.classList.contains('websy-dropdown-header')) {
1082
1122
  this.open();
1083
1123
  } else if (event.target.classList.contains('websy-dropdown-mask')) {
@@ -1176,6 +1216,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
1176
1216
  maskEl.classList.add('active');
1177
1217
  contentEl.classList.add('active');
1178
1218
 
1219
+ if (WebsyUtils.getElementPos(contentEl).bottom > window.innerHeight) {
1220
+ contentEl.classList.add('on-top');
1221
+ }
1222
+
1179
1223
  if (this.options.disableSearch !== true) {
1180
1224
  var searchEl = document.getElementById("".concat(this.elementId, "_search"));
1181
1225
 
@@ -1195,10 +1239,13 @@ var WebsyDropdown = /*#__PURE__*/function () {
1195
1239
  }
1196
1240
 
1197
1241
  var el = document.getElementById(this.elementId);
1242
+ var headerLabel = this.selectedItems.map(function (s) {
1243
+ return _this7.options.items[s].label || _this7.options.items[s].value;
1244
+ }).join(this.options.multiValueDelimiter);
1198
1245
  var headerValue = this.selectedItems.map(function (s) {
1199
- return _this7.options.items[s].label;
1246
+ return _this7.options.items[s].value || _this7.options.items[s].label;
1200
1247
  }).join(this.options.multiValueDelimiter);
1201
- var html = "\n <div class='websy-dropdown-container ".concat(this.options.disableSearch !== true ? 'with-search' : '', "'>\n <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n <span id='").concat(this.elementId, "_headerLabel' class='websy-dropdown-header-label'>").concat(this.options.label, "</span>\n <span data-info='").concat(headerValue, "' class='websy-dropdown-header-value' id='").concat(this.elementId, "_selectedItems'>").concat(headerValue, "</span>\n <input class='dropdown-input' id='").concat(this.elementId, "_input' name='").concat(this.options.field || this.options.label, "' value='").concat(headerValue, "'>\n <svg class='arrow' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n ");
1248
+ var html = "\n <div class='websy-dropdown-container ".concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', "'>\n <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n <span id='").concat(this.elementId, "_headerLabel' class='websy-dropdown-header-label'>").concat(this.options.label, "</span>\n <span data-info='").concat(headerLabel, "' class='websy-dropdown-header-value' id='").concat(this.elementId, "_selectedItems'>").concat(headerLabel, "</span>\n <input class='dropdown-input' id='").concat(this.elementId, "_input' name='").concat(this.options.field || this.options.label, "' value='").concat(headerValue, "'>\n <svg class='arrow' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n ");
1202
1249
 
1203
1250
  if (this.options.allowClear === true) {
1204
1251
  html += "\n <svg class='clear' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n ";
@@ -1279,19 +1326,26 @@ var WebsyDropdown = /*#__PURE__*/function () {
1279
1326
  if (this.selectedItems.length === 1) {
1280
1327
  labelEl.innerHTML = item.label;
1281
1328
  labelEl.setAttribute('data-info', item.label);
1282
- inputEl.value = item.label;
1329
+ inputEl.value = item.value;
1283
1330
  } else if (this.selectedItems.length > 1) {
1284
1331
  if (this.options.showCompleteSelectedList === true) {
1332
+ var selectedLabels = this.selectedItems.map(function (s) {
1333
+ return _this9.options.items[s].label || _this9.options.items[s].value;
1334
+ }).join(this.options.multiValueDelimiter);
1285
1335
  var selectedValues = this.selectedItems.map(function (s) {
1286
- return _this9.options.items[s].label;
1336
+ return _this9.options.items[s].value || _this9.options.items[s].label;
1287
1337
  }).join(this.options.multiValueDelimiter);
1288
- labelEl.innerHTML = selectedValues;
1289
- labelEl.setAttribute('data-info', selectedValues);
1338
+ labelEl.innerHTML = selectedLabels;
1339
+ labelEl.setAttribute('data-info', selectedLabels);
1290
1340
  inputEl.value = selectedValues;
1291
1341
  } else {
1342
+ var _selectedValues = this.selectedItems.map(function (s) {
1343
+ return _this9.options.items[s].value || _this9.options.items[s].label;
1344
+ }).join(this.options.multiValueDelimiter);
1345
+
1292
1346
  labelEl.innerHTML = "".concat(this.selectedItems.length, " selected");
1293
1347
  labelEl.setAttribute('data-info', '');
1294
- inputEl.value = this.selectedItems.join(this.options.multiValueDelimiter);
1348
+ inputEl.value = _selectedValues;
1295
1349
  }
1296
1350
  } else {
1297
1351
  labelEl.innerHTML = '';
@@ -1324,7 +1378,9 @@ var WebsyDropdown = /*#__PURE__*/function () {
1324
1378
  this.options.onItemSelected(item, this.selectedItems, this.options.items);
1325
1379
  }
1326
1380
 
1327
- this.close();
1381
+ if (this.options.closeAfterSelection === true) {
1382
+ this.close();
1383
+ }
1328
1384
  }
1329
1385
  }, {
1330
1386
  key: "selections",
@@ -1611,6 +1667,183 @@ var WebsyResultList = /*#__PURE__*/function () {
1611
1667
 
1612
1668
  return WebsyResultList;
1613
1669
  }();
1670
+ /* global WebsyDesigns */
1671
+
1672
+
1673
+ var WebsyTemplate = /*#__PURE__*/function () {
1674
+ function WebsyTemplate(elementId, options) {
1675
+ var _this14 = this;
1676
+
1677
+ _classCallCheck(this, WebsyTemplate);
1678
+
1679
+ var DEFAULTS = {
1680
+ listeners: {
1681
+ click: {}
1682
+ }
1683
+ };
1684
+ this.options = _extends({}, DEFAULTS, options);
1685
+ this.elementId = elementId;
1686
+ this.templateService = new WebsyDesigns.APIService('');
1687
+
1688
+ if (!elementId) {
1689
+ console.log('No element Id provided for Websy Template');
1690
+ return;
1691
+ }
1692
+
1693
+ var el = document.getElementById(elementId);
1694
+
1695
+ if (el) {
1696
+ el.addEventListener('click', this.handleClick.bind(this));
1697
+ }
1698
+
1699
+ if (_typeof(options.template) === 'object' && options.template.url) {
1700
+ this.templateService.get(options.template.url).then(function (templateString) {
1701
+ _this14.options.template = templateString;
1702
+
1703
+ _this14.render();
1704
+ });
1705
+ } else {
1706
+ this.render();
1707
+ }
1708
+ }
1709
+
1710
+ _createClass(WebsyTemplate, [{
1711
+ key: "buildHTML",
1712
+ value: function buildHTML() {
1713
+ var _this15 = this;
1714
+
1715
+ var html = "";
1716
+
1717
+ if (this.options.template) {
1718
+ var template = this.options.template; // find conditional elements
1719
+
1720
+ var ifMatches = _toConsumableArray(template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g));
1721
+
1722
+ ifMatches.forEach(function (m) {
1723
+ // get the condition
1724
+ if (m[0] && m.index > -1) {
1725
+ var conditionMatch = m[0].match(/(\scondition=["|']\w.+)["|']/g);
1726
+
1727
+ if (conditionMatch && conditionMatch[0]) {
1728
+ var c = conditionMatch[0].trim().replace('condition=', '');
1729
+
1730
+ if (c.split('')[0] === '"') {
1731
+ c = c.replace(/"/g, '');
1732
+ } else if (c.split('')[0] === '\'') {
1733
+ c = c.replace(/'/g, '');
1734
+ }
1735
+
1736
+ var parts = [];
1737
+ var polarity = true;
1738
+
1739
+ if (c.indexOf('===') !== -1) {
1740
+ parts = c.split('===');
1741
+ } else if (c.indexOf('!==') !== -1) {
1742
+ parts = c.split('!==');
1743
+ polarity = false;
1744
+ } else if (c.indexOf('==') !== -1) {
1745
+ parts = c.split('==');
1746
+ } else if (c.indexOf('!=') !== -1) {
1747
+ parts = c.split('!=');
1748
+ polarity = false;
1749
+ }
1750
+
1751
+ var removeAll = true;
1752
+
1753
+ if (parts.length === 2) {
1754
+ if (!isNaN(parts[1])) {
1755
+ parts[1] = +parts[1];
1756
+ }
1757
+
1758
+ if (parts[1] === 'true') {
1759
+ parts[1] = true;
1760
+ }
1761
+
1762
+ if (parts[1] === 'false') {
1763
+ parts[1] = false;
1764
+ }
1765
+
1766
+ if (typeof parts[1] === 'string') {
1767
+ if (parts[1].indexOf('"') !== -1) {
1768
+ parts[1] = parts[1].replace(/"/g, '');
1769
+ } else if (parts[1].indexOf('\'') !== -1) {
1770
+ parts[1] = parts[1].replace(/'/g, '');
1771
+ }
1772
+ }
1773
+
1774
+ if (polarity === true) {
1775
+ if (typeof _this15.options.data[parts[0]] !== 'undefined' && _this15.options.data[parts[0]] === parts[1]) {
1776
+ // remove the <if> tags
1777
+ removeAll = false;
1778
+ } else if (parts[0] === parts[1]) {
1779
+ removeAll = false;
1780
+ }
1781
+ } else if (polarity === false) {
1782
+ if (typeof _this15.options.data[parts[0]] !== 'undefined' && _this15.options.data[parts[0]] !== parts[1]) {
1783
+ // remove the <if> tags
1784
+ removeAll = false;
1785
+ }
1786
+ }
1787
+ }
1788
+
1789
+ if (removeAll === true) {
1790
+ // remove the whole markup
1791
+ template = template.replace(m[0], '');
1792
+ } else {
1793
+ // remove the <if> tags
1794
+ var newMarkup = m[0];
1795
+ newMarkup = newMarkup.replace('</if>', '').replace(/<\s*if[^>]*>/g, '');
1796
+ template = template.replace(m[0], newMarkup);
1797
+ }
1798
+ }
1799
+ }
1800
+ });
1801
+
1802
+ var tagMatches = _toConsumableArray(template.matchAll(/(\sdata-event=["|']\w.+)["|']/g));
1803
+
1804
+ tagMatches.forEach(function (m) {
1805
+ if (m[0] && m.index > -1) {
1806
+ template = template.replace(m[0], "".concat(m[0]));
1807
+ }
1808
+ });
1809
+
1810
+ for (var key in this.options.data) {
1811
+ var rg = new RegExp("{".concat(key, "}"), 'gm');
1812
+
1813
+ if (rg) {
1814
+ template = template.replace(rg, this.options.data[key]);
1815
+ }
1816
+ }
1817
+
1818
+ html = template;
1819
+ }
1820
+
1821
+ return html;
1822
+ }
1823
+ }, {
1824
+ key: "handleClick",
1825
+ value: function handleClick(event) {//
1826
+ }
1827
+ }, {
1828
+ key: "render",
1829
+ value: function render() {
1830
+ this.resize();
1831
+ }
1832
+ }, {
1833
+ key: "resize",
1834
+ value: function resize() {
1835
+ var html = this.buildHTML();
1836
+ var el = document.getElementById(this.elementId);
1837
+ el.innerHTML = html.replace(/\n/g, '');
1838
+
1839
+ if (this.options.readyCallbackFn) {
1840
+ this.options.readyCallbackFn();
1841
+ }
1842
+ }
1843
+ }]);
1844
+
1845
+ return WebsyTemplate;
1846
+ }();
1614
1847
 
1615
1848
  var WebsyPubSub = /*#__PURE__*/function () {
1616
1849
  function WebsyPubSub(elementId, options) {
@@ -2254,7 +2487,7 @@ var APIService = /*#__PURE__*/function () {
2254
2487
  query.push("id:".concat(id));
2255
2488
  }
2256
2489
 
2257
- return "".concat(this.baseUrl, "/").concat(entity).concat(query.length > 0 ? "?where=".concat(query.join(';')) : '');
2490
+ return "".concat(this.baseUrl, "/").concat(entity).concat(query.length > 0 ? "".concat(entity.indexOf('?') === -1 ? '?' : '&', "where=").concat(query.join(';')) : '');
2258
2491
  }
2259
2492
  }, {
2260
2493
  key: "delete",
@@ -2425,58 +2658,58 @@ var WebsyPDFButton = /*#__PURE__*/function () {
2425
2658
  _createClass(WebsyPDFButton, [{
2426
2659
  key: "handleClick",
2427
2660
  value: function handleClick(event) {
2428
- var _this14 = this;
2661
+ var _this16 = this;
2429
2662
 
2430
2663
  if (event.target.classList.contains('websy-pdf-button')) {
2431
2664
  this.loader.show();
2432
2665
  setTimeout(function () {
2433
- if (_this14.options.targetId) {
2434
- var el = document.getElementById(_this14.options.targetId);
2666
+ if (_this16.options.targetId) {
2667
+ var el = document.getElementById(_this16.options.targetId);
2435
2668
 
2436
2669
  if (el) {
2437
2670
  var pdfData = {
2438
2671
  options: {}
2439
2672
  };
2440
2673
 
2441
- if (_this14.options.pdfOptions) {
2442
- pdfData.options = _extends({}, _this14.options.pdfOptions);
2674
+ if (_this16.options.pdfOptions) {
2675
+ pdfData.options = _extends({}, _this16.options.pdfOptions);
2443
2676
  }
2444
2677
 
2445
- if (_this14.options.header) {
2446
- if (_this14.options.header.elementId) {
2447
- var headerEl = document.getElementById(_this14.options.header.elementId);
2678
+ if (_this16.options.header) {
2679
+ if (_this16.options.header.elementId) {
2680
+ var headerEl = document.getElementById(_this16.options.header.elementId);
2448
2681
 
2449
2682
  if (headerEl) {
2450
2683
  pdfData.header = headerEl.outerHTML;
2451
2684
 
2452
- if (_this14.options.header.css) {
2453
- pdfData.options.headerCSS = _this14.options.header.css;
2685
+ if (_this16.options.header.css) {
2686
+ pdfData.options.headerCSS = _this16.options.header.css;
2454
2687
  }
2455
2688
  }
2456
- } else if (_this14.options.header.html) {
2457
- pdfData.header = _this14.options.header.html;
2689
+ } else if (_this16.options.header.html) {
2690
+ pdfData.header = _this16.options.header.html;
2458
2691
 
2459
- if (_this14.options.header.css) {
2460
- pdfData.options.headerCSS = _this14.options.header.css;
2692
+ if (_this16.options.header.css) {
2693
+ pdfData.options.headerCSS = _this16.options.header.css;
2461
2694
  }
2462
2695
  } else {
2463
- pdfData.header = _this14.options.header;
2696
+ pdfData.header = _this16.options.header;
2464
2697
  }
2465
2698
  }
2466
2699
 
2467
- if (_this14.options.footer) {
2468
- if (_this14.options.footer.elementId) {
2469
- var footerEl = document.getElementById(_this14.options.footer.elementId);
2700
+ if (_this16.options.footer) {
2701
+ if (_this16.options.footer.elementId) {
2702
+ var footerEl = document.getElementById(_this16.options.footer.elementId);
2470
2703
 
2471
2704
  if (footerEl) {
2472
2705
  pdfData.footer = footerEl.outerHTML;
2473
2706
 
2474
- if (_this14.options.footer.css) {
2475
- pdfData.options.footerCSS = _this14.options.footer.css;
2707
+ if (_this16.options.footer.css) {
2708
+ pdfData.options.footerCSS = _this16.options.footer.css;
2476
2709
  }
2477
2710
  }
2478
2711
  } else {
2479
- pdfData.footer = _this14.options.footer;
2712
+ pdfData.footer = _this16.options.footer;
2480
2713
  }
2481
2714
  }
2482
2715
 
@@ -2485,17 +2718,17 @@ var WebsyPDFButton = /*#__PURE__*/function () {
2485
2718
  // document.getElementById(`${this.elementId}_pdfFooter`).value = pdfData.footer
2486
2719
  // document.getElementById(`${this.elementId}_form`).submit()
2487
2720
 
2488
- _this14.service.add('', pdfData, {
2721
+ _this16.service.add('', pdfData, {
2489
2722
  responseType: 'blob'
2490
2723
  }).then(function (response) {
2491
- _this14.loader.hide();
2724
+ _this16.loader.hide();
2492
2725
 
2493
2726
  var blob = new Blob([response], {
2494
2727
  type: 'application/pdf'
2495
2728
  });
2496
2729
 
2497
- _this14.popup.show({
2498
- message: "\n <div class='text-center websy-pdf-download'>\n <div>Your file is ready to download</div>\n <a href='".concat(URL.createObjectURL(blob), "' target='_blank'>\n <button class='websy-btn download-pdf'>").concat(_this14.options.buttonText, "</button>\n </a>\n </div>\n "),
2730
+ _this16.popup.show({
2731
+ message: "\n <div class='text-center websy-pdf-download'>\n <div>Your file is ready to download</div>\n <a href='".concat(URL.createObjectURL(blob), "' target='_blank'>\n <button class='websy-btn download-pdf'>").concat(_this16.options.buttonText, "</button>\n </a>\n </div>\n "),
2499
2732
  mask: true
2500
2733
  });
2501
2734
  }, function (err) {
@@ -2552,20 +2785,34 @@ var WebsyTable = /*#__PURE__*/function () {
2552
2785
  _createClass(WebsyTable, [{
2553
2786
  key: "appendRows",
2554
2787
  value: function appendRows(data) {
2555
- var _this15 = this;
2788
+ var _this17 = this;
2556
2789
 
2557
2790
  var bodyHTML = '';
2558
2791
 
2559
2792
  if (data) {
2560
2793
  bodyHTML += data.map(function (r, rowIndex) {
2561
2794
  return '<tr>' + r.map(function (c, i) {
2562
- if (_this15.options.columns[i].show !== false) {
2563
- if (_this15.options.columns[i].showAsLink === true && c.value.trim() !== '') {
2564
- return "\n <td data-row-index='".concat(_this15.rowCount + rowIndex, "' data-col-index='").concat(i, "' class='").concat(_this15.options.columns[i].classes || '', "' ").concat(_this15.options.columns[i].width ? 'style="width: ' + _this15.options.columns[i].width + '"' : '', "><a href='").concat(c.value, "' target='").concat(_this15.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(_this15.options.columns[i].linkText || c.value, "</a></td>\n ");
2565
- } else if (_this15.options.columns[i].showAsNavigatorLink === true && c.value.trim() !== '') {
2566
- return "\n <td data-view='".concat(c.value, "' data-row-index='").concat(_this15.rowCount + rowIndex, "' data-col-index='").concat(i, "' class='trigger-item ").concat(_this15.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this15.options.columns[i].classes || '', "' ").concat(_this15.options.columns[i].width ? 'style="width: ' + _this15.options.columns[i].width + '"' : '', ">").concat(_this15.options.columns[i].linkText || c.value, "</td>\n ");
2795
+ if (_this17.options.columns[i].show !== false) {
2796
+ var style = '';
2797
+
2798
+ if (_this17.options.columns[i].width) {
2799
+ style += "width: ".concat(_this17.options.columns[i].width, "; ");
2800
+ }
2801
+
2802
+ if (c.backgroundColor) {
2803
+ style += "background-color: ".concat(c.backgroundColor, "; ");
2804
+ }
2805
+
2806
+ if (c.color) {
2807
+ style += "color: ".concat(c.color, "; ");
2808
+ }
2809
+
2810
+ if (_this17.options.columns[i].showAsLink === true && c.value.trim() !== '') {
2811
+ return "\n <td \n data-row-index='".concat(_this17.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this17.options.columns[i].classes || '', "' \n style='").concat(style, "'\n >\n <a href='").concat(c.value, "' target='").concat(_this17.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(_this17.options.columns[i].linkText || c.value, "</a>\n </td>\n ");
2812
+ } else if (_this17.options.columns[i].showAsNavigatorLink === true && c.value.trim() !== '') {
2813
+ return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this17.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='trigger-item ").concat(_this17.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this17.options.columns[i].classes || '', "' \n style='").concat(style, "'\n >").concat(_this17.options.columns[i].linkText || c.value, "</td>\n ");
2567
2814
  } else {
2568
- return "\n <td data-info='".concat(c.value, "' data-row-index='").concat(_this15.rowCount + rowIndex, "' data-col-index='").concat(i, "' class='").concat(_this15.options.columns[i].classes || '', "' ").concat(_this15.options.columns[i].width ? 'style="width: ' + (_this15.options.columns[i].width || 'auto') + '"' : '', ">").concat(c.value, "</td>\n ");
2815
+ return "\n <td \n data-info='".concat(c.value, "' \n data-row-index='").concat(_this17.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this17.options.columns[i].classes || '', "' \n style='").concat(style, "'>").concat(c.value, "</td>\n ");
2569
2816
  }
2570
2817
  }
2571
2818
  }).join('') + '</tr>';
@@ -2704,7 +2951,7 @@ var WebsyTable = /*#__PURE__*/function () {
2704
2951
  }, {
2705
2952
  key: "render",
2706
2953
  value: function render(data) {
2707
- var _this16 = this;
2954
+ var _this18 = this;
2708
2955
 
2709
2956
  if (!this.options.columns) {
2710
2957
  return;
@@ -2727,7 +2974,7 @@ var WebsyTable = /*#__PURE__*/function () {
2727
2974
 
2728
2975
  var headHTML = '<tr>' + this.options.columns.map(function (c, i) {
2729
2976
  if (c.show !== false) {
2730
- return "\n <th ".concat(c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : '', ">\n <div class =\"tableHeader\">\n <div class=\"leftSection\">\n <div\n class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n data-index=\"").concat(i, "\" \n data-sort=\"").concat(c.sort, "\" \n >\n ").concat(c.name, "\n </div>\n </div>\n <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n <!--").concat(c.searchable === true ? _this16.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n </div>\n </th>\n ");
2977
+ return "\n <th ".concat(c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : '', ">\n <div class =\"tableHeader\">\n <div class=\"leftSection\">\n <div\n class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n data-index=\"").concat(i, "\" \n data-sort=\"").concat(c.sort, "\" \n >\n ").concat(c.name, "\n </div>\n </div>\n <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n <!--").concat(c.searchable === true ? _this18.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n </div>\n </th>\n ");
2731
2978
  }
2732
2979
  }).join('') + '</tr>';
2733
2980
  var headEl = document.getElementById("".concat(this.elementId, "_head"));
@@ -2862,11 +3109,11 @@ var WebsyChart = /*#__PURE__*/function () {
2862
3109
  }, {
2863
3110
  key: "handleEventMouseMove",
2864
3111
  value: function handleEventMouseMove(event, d) {
2865
- var _this17 = this;
3112
+ var _this19 = this;
2866
3113
 
2867
3114
  // console.log('mouse move', event, d, d3.pointer(event))
2868
3115
  var bisectDate = d3.bisector(function (d) {
2869
- return _this17.parseX(d.x.value);
3116
+ return _this19.parseX(d.x.value);
2870
3117
  }).left;
2871
3118
 
2872
3119
  if (this.options.showTrackingLine === true && d3.pointer(event)) {
@@ -2885,18 +3132,18 @@ var WebsyChart = /*#__PURE__*/function () {
2885
3132
  var pointB = s.data[index];
2886
3133
 
2887
3134
  if (pointA) {
2888
- xPoint = _this17.bottomAxis(_this17.parseX(pointA.x.value));
3135
+ xPoint = _this19.bottomAxis(_this19.parseX(pointA.x.value));
2889
3136
  tooltipTitle = pointA.x.value;
2890
3137
 
2891
3138
  if (typeof pointA.x.value.getTime !== 'undefined') {
2892
- tooltipTitle = d3.timeFormat(_this17.options.dateFormat)(pointA.x.value);
3139
+ tooltipTitle = d3.timeFormat(_this19.options.dateFormat)(pointA.x.value);
2893
3140
  }
2894
3141
  }
2895
3142
 
2896
3143
  if (pointA && pointB) {
2897
- var d0 = _this17.bottomAxis(_this17.parseX(pointA.x.value));
3144
+ var d0 = _this19.bottomAxis(_this19.parseX(pointA.x.value));
2898
3145
 
2899
- var d1 = _this17.bottomAxis(_this17.parseX(pointB.x.value));
3146
+ var d1 = _this19.bottomAxis(_this19.parseX(pointB.x.value));
2900
3147
 
2901
3148
  var mid = Math.abs(d0 - d1) / 2;
2902
3149
 
@@ -2905,7 +3152,7 @@ var WebsyChart = /*#__PURE__*/function () {
2905
3152
  tooltipTitle = pointB.x.value;
2906
3153
 
2907
3154
  if (typeof pointB.x.value.getTime !== 'undefined') {
2908
- tooltipTitle = d3.timeFormat(_this17.options.dateFormat)(pointB.x.value);
3155
+ tooltipTitle = d3.timeFormat(_this19.options.dateFormat)(pointB.x.value);
2909
3156
  }
2910
3157
 
2911
3158
  tooltipData.push(pointB.y);
@@ -2956,6 +3203,7 @@ var WebsyChart = /*#__PURE__*/function () {
2956
3203
  this.areaLayer = this.svg.append('g');
2957
3204
  this.lineLayer = this.svg.append('g');
2958
3205
  this.barLayer = this.svg.append('g');
3206
+ this.labelLayer = this.svg.append('g');
2959
3207
  this.symbolLayer = this.svg.append('g');
2960
3208
  this.trackingLineLayer = this.svg.append('g');
2961
3209
  this.trackingLineLayer.append('line').attr('class', 'tracking-line');
@@ -2967,7 +3215,7 @@ var WebsyChart = /*#__PURE__*/function () {
2967
3215
  }, {
2968
3216
  key: "render",
2969
3217
  value: function render(options) {
2970
- var _this18 = this;
3218
+ var _this20 = this;
2971
3219
 
2972
3220
  /* global d3 options */
2973
3221
  if (typeof options !== 'undefined') {
@@ -3150,6 +3398,7 @@ var WebsyChart = /*#__PURE__*/function () {
3150
3398
  this.areaLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3151
3399
  this.lineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3152
3400
  this.barLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3401
+ this.labelLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3153
3402
  this.symbolLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3154
3403
  this.trackingLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3155
3404
  this.eventLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
@@ -3200,7 +3449,7 @@ var WebsyChart = /*#__PURE__*/function () {
3200
3449
 
3201
3450
  if (this.options.data.bottom.formatter) {
3202
3451
  bAxisFunc.tickFormat(function (d) {
3203
- return _this18.options.data.bottom.formatter(d);
3452
+ return _this20.options.data.bottom.formatter(d);
3204
3453
  });
3205
3454
  }
3206
3455
 
@@ -3226,8 +3475,8 @@ var WebsyChart = /*#__PURE__*/function () {
3226
3475
 
3227
3476
  if (this.options.margin.axisLeft > 0) {
3228
3477
  this.leftAxisLayer.call(d3.axisLeft(this.leftAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
3229
- if (_this18.options.data.left.formatter) {
3230
- d = _this18.options.data.left.formatter(d);
3478
+ if (_this20.options.data.left.formatter) {
3479
+ d = _this20.options.data.left.formatter(d);
3231
3480
  }
3232
3481
 
3233
3482
  return d;
@@ -3262,8 +3511,8 @@ var WebsyChart = /*#__PURE__*/function () {
3262
3511
 
3263
3512
  if (this.options.margin.axisRight > 0) {
3264
3513
  this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
3265
- if (_this18.options.data.right.formatter) {
3266
- d = _this18.options.data.right.formatter(d);
3514
+ if (_this20.options.data.right.formatter) {
3515
+ d = _this20.options.data.right.formatter(d);
3267
3516
  }
3268
3517
 
3269
3518
  return d;
@@ -3289,14 +3538,16 @@ var WebsyChart = /*#__PURE__*/function () {
3289
3538
 
3290
3539
  this.options.data.series.forEach(function (series, index) {
3291
3540
  if (!series.key) {
3292
- series.key = _this18.createIdentity();
3541
+ series.key = _this20.createIdentity();
3293
3542
  }
3294
3543
 
3295
3544
  if (!series.color) {
3296
- series.color = _this18.options.colors[index % _this18.options.colors.length];
3545
+ series.color = _this20.options.colors[index % _this20.options.colors.length];
3297
3546
  }
3298
3547
 
3299
- _this18["render".concat(series.type || 'bar')](series, index);
3548
+ _this20["render".concat(series.type || 'bar')](series, index);
3549
+
3550
+ _this20.renderLabels(series, index);
3300
3551
  });
3301
3552
  }
3302
3553
  }
@@ -3304,17 +3555,17 @@ var WebsyChart = /*#__PURE__*/function () {
3304
3555
  }, {
3305
3556
  key: "renderarea",
3306
3557
  value: function renderarea(series, index) {
3307
- var _this19 = this;
3558
+ var _this21 = this;
3308
3559
 
3309
3560
  /* global d3 series index */
3310
3561
  var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
3311
3562
  return d3.area().x(function (d) {
3312
- return _this19[xAxis](_this19.parseX(d.x.value));
3563
+ return _this21[xAxis](_this21.parseX(d.x.value));
3313
3564
  }).y0(function (d) {
3314
- return _this19[yAxis](0);
3565
+ return _this21[yAxis](0);
3315
3566
  }).y1(function (d) {
3316
- return _this19[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
3317
- }).curve(d3[curveStyle || _this19.options.curveStyle]);
3567
+ return _this21[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
3568
+ }).curve(d3[curveStyle || _this21.options.curveStyle]);
3318
3569
  };
3319
3570
 
3320
3571
  var xAxis = 'bottomAxis';
@@ -3400,18 +3651,72 @@ var WebsyChart = /*#__PURE__*/function () {
3400
3651
  return "bar bar_".concat(series.key);
3401
3652
  });
3402
3653
  }
3654
+ }, {
3655
+ key: "renderLabels",
3656
+ value: function renderLabels(series, index) {
3657
+ /* global series index d3 */
3658
+ var xAxis = 'bottomAxis';
3659
+ var yAxis = 'leftAxis';
3660
+ var that = this;
3661
+
3662
+ if (this.options.orientation === 'horizontal') {
3663
+ xAxis = 'leftAxis';
3664
+ yAxis = 'bottomAxis';
3665
+ }
3666
+
3667
+ if (this.options.showLabels) {
3668
+ // need to add logic to handle positioning options
3669
+ // e.g. Inside, Outide, Auto (this will also affect the available plot space)
3670
+ // We currently only support 'Auto'
3671
+ var labels = this.labelLayer.selectAll(".label_".concat(series.key)).data(series.data);
3672
+ labels.exit().transition(this.transition).style('stroke-opacity', 1e-6).remove();
3673
+ labels.attr('x', getLabelX.bind(this)).attr('y', getLabelY.bind(this)).attr('class', ".label_".concat(series.key)).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).transition(this.transition).text(function (d) {
3674
+ return d.y.label || d.y.value;
3675
+ });
3676
+ labels.enter().append('text').attr('class', ".label_".concat(series.key)).attr('x', getLabelX.bind(this)).attr('y', getLabelY.bind(this)).attr('alignment-baseline', 'central').attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle').style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).text(function (d) {
3677
+ return d.y.label || d.y.value;
3678
+ }).each(function (d, i) {
3679
+ if (that.options.orientation === 'horizontal') {
3680
+ if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
3681
+ this.setAttribute('text-anchor', 'end');
3682
+ this.setAttribute('x', +this.getAttribute('x') - 8);
3683
+ }
3684
+ } else {
3685
+ if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {
3686
+ this.setAttribute('y', +this.getAttribute('y') + 8);
3687
+ }
3688
+ }
3689
+ });
3690
+ }
3691
+
3692
+ function getLabelX(d) {
3693
+ if (this.options.orientation === 'horizontal') {
3694
+ return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4;
3695
+ } else {
3696
+ return this[xAxis](this.parseX(d.x.value)) + this[xAxis].bandwidth() / 2;
3697
+ }
3698
+ }
3699
+
3700
+ function getLabelY(d) {
3701
+ if (this.options.orientation === 'horizontal') {
3702
+ return this[xAxis](this.parseX(d.x.value)) + this[xAxis].bandwidth() / 2;
3703
+ } else {
3704
+ return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) - 4;
3705
+ }
3706
+ }
3707
+ }
3403
3708
  }, {
3404
3709
  key: "renderline",
3405
3710
  value: function renderline(series, index) {
3406
- var _this20 = this;
3711
+ var _this22 = this;
3407
3712
 
3408
3713
  /* global series index d3 */
3409
3714
  var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
3410
3715
  return d3.line().x(function (d) {
3411
- return _this20[xAxis](_this20.parseX(d.x.value));
3716
+ return _this22[xAxis](_this22.parseX(d.x.value));
3412
3717
  }).y(function (d) {
3413
- return _this20[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
3414
- }).curve(d3[curveStyle || _this20.options.curveStyle]);
3718
+ return _this22[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
3719
+ }).curve(d3[curveStyle || _this22.options.curveStyle]);
3415
3720
  };
3416
3721
 
3417
3722
  var xAxis = 'bottomAxis';
@@ -3449,14 +3754,14 @@ var WebsyChart = /*#__PURE__*/function () {
3449
3754
  }, {
3450
3755
  key: "rendersymbol",
3451
3756
  value: function rendersymbol(series, index) {
3452
- var _this21 = this;
3757
+ var _this23 = this;
3453
3758
 
3454
3759
  /* global d3 series index series.key */
3455
3760
  var drawSymbol = function drawSymbol(size) {
3456
3761
  return d3.symbol() // .type(d => {
3457
3762
  // return d3.symbols[0]
3458
3763
  // })
3459
- .size(size || _this21.options.symbolSize);
3764
+ .size(size || _this23.options.symbolSize);
3460
3765
  };
3461
3766
 
3462
3767
  var xAxis = 'bottomAxis';
@@ -3474,7 +3779,7 @@ var WebsyChart = /*#__PURE__*/function () {
3474
3779
  symbols.attr('d', function (d) {
3475
3780
  return drawSymbol(d.y.size || series.symbolSize)(d);
3476
3781
  }).transition(this.transition).attr('fill', 'white').attr('stroke', series.color).attr('transform', function (d) {
3477
- return "translate(".concat(_this21[xAxis](_this21.parseX(d.x.value)), ", ").concat(_this21[yAxis](d.y.value), ")");
3782
+ return "translate(".concat(_this23[xAxis](_this23.parseX(d.x.value)), ", ").concat(_this23[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
3478
3783
  }); // Enter
3479
3784
 
3480
3785
  symbols.enter().append('path').attr('d', function (d) {
@@ -3483,7 +3788,7 @@ var WebsyChart = /*#__PURE__*/function () {
3483
3788
  .attr('fill', 'white').attr('stroke', series.color).attr('class', function (d) {
3484
3789
  return "symbol symbol_".concat(series.key);
3485
3790
  }).attr('transform', function (d) {
3486
- return "translate(".concat(_this21[xAxis](_this21.parseX(d.x.value)), ", ").concat(_this21[yAxis](d.y.value), ")");
3791
+ return "translate(".concat(_this23[xAxis](_this23.parseX(d.x.value)), ", ").concat(_this23[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
3487
3792
  });
3488
3793
  }
3489
3794
  }, {
@@ -3496,9 +3801,11 @@ var WebsyChart = /*#__PURE__*/function () {
3496
3801
  this.width = el.clientWidth;
3497
3802
  this.height = el.clientHeight;
3498
3803
  this.svg.attr('width', this.width).attr('height', this.height); // Define the plot height
3804
+ // this.plotWidth = this.width - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight
3805
+ // this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom
3499
3806
 
3500
3807
  this.plotWidth = this.width - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight;
3501
- this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom; // establish the space needed for the various axes
3808
+ this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom - this.options.margin.axisTop; // establish the space needed for the various axes
3502
3809
 
3503
3810
  this.longestRight = 5;
3504
3811
  this.longestBottom = 5;
@@ -3531,17 +3838,42 @@ var WebsyChart = /*#__PURE__*/function () {
3531
3838
  this.options.margin.axisBottom = 0;
3532
3839
  }
3533
3840
  } // Translate the layers
3534
-
3535
-
3536
- this.leftAxisLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3537
- this.rightAxisLayer.attr('transform', "translate(".concat(this.options.margin.left + this.plotWidth + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3538
- this.bottomAxisLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.plotHeight, ")"));
3539
- this.plotArea.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3540
- this.areaLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3541
- this.lineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3542
- this.barLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3543
- this.symbolLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3544
- this.trackingLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top, ")"));
3841
+ // this.leftAxisLayer
3842
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3843
+ // this.rightAxisLayer
3844
+ // .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3845
+ // this.bottomAxisLayer
3846
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.plotHeight})`)
3847
+ // this.plotArea
3848
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3849
+ // this.areaLayer
3850
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3851
+ // this.lineLayer
3852
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3853
+ // this.barLayer
3854
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3855
+ // this.labelLayer
3856
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3857
+ // this.symbolLayer
3858
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3859
+ // this.trackingLineLayer
3860
+ // .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
3861
+
3862
+
3863
+ this.leftAxisLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3864
+ this.rightAxisLayer.attr('transform', "translate(".concat(this.options.margin.left + this.plotWidth + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3865
+ this.bottomAxisLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")"));
3866
+ this.leftAxisLabel.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3867
+ this.rightAxisLabel.attr('transform', "translate(".concat(this.options.margin.left + this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3868
+ this.bottomAxisLabel.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight, ")"));
3869
+ this.plotArea.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3870
+ this.areaLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3871
+ this.lineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3872
+ this.barLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3873
+ this.labelLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3874
+ this.symbolLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3875
+ this.trackingLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3876
+ this.eventLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
3545
3877
  }
3546
3878
  }
3547
3879
  }, {
@@ -3689,7 +4021,7 @@ var WebsyMap = /*#__PURE__*/function () {
3689
4021
  }, {
3690
4022
  key: "render",
3691
4023
  value: function render() {
3692
- var _this22 = this;
4024
+ var _this24 = this;
3693
4025
 
3694
4026
  var el = document.getElementById("".concat(this.options.elementId, "_map"));
3695
4027
  var t = L.tileLayer(this.options.tileUrl, {
@@ -3756,30 +4088,30 @@ var WebsyMap = /*#__PURE__*/function () {
3756
4088
  if (r.Latitude.qNum !== 0 && r.Longitude.qNum !== 0) {
3757
4089
  var markerOptions = {};
3758
4090
 
3759
- if (_this22.options.simpleMarker === true) {
4091
+ if (_this24.options.simpleMarker === true) {
3760
4092
  markerOptions.icon = L.divIcon({
3761
4093
  className: 'simple-marker'
3762
4094
  });
3763
4095
  }
3764
4096
 
3765
- if (_this22.options.markerUrl) {
4097
+ if (_this24.options.markerUrl) {
3766
4098
  markerOptions.icon = L.icon({
3767
- iconUrl: _this22.options.markerUrl
4099
+ iconUrl: _this24.options.markerUrl
3768
4100
  });
3769
4101
  }
3770
4102
 
3771
4103
  markerOptions.data = r;
3772
4104
  var m = L.marker([r.Latitude.qText, r.Longitude.qText], markerOptions);
3773
- m.on('click', _this22.handleMapClick.bind(_this22));
4105
+ m.on('click', _this24.handleMapClick.bind(_this24));
3774
4106
 
3775
- if (_this22.options.useClustering === false) {
3776
- m.addTo(_this22.map);
4107
+ if (_this24.options.useClustering === false) {
4108
+ m.addTo(_this24.map);
3777
4109
  }
3778
4110
 
3779
- _this22.markers.push(m);
4111
+ _this24.markers.push(m);
3780
4112
 
3781
- if (_this22.options.useClustering === true) {
3782
- _this22.cluster.addLayer(m);
4113
+ if (_this24.options.useClustering === true) {
4114
+ _this24.cluster.addLayer(m);
3783
4115
  }
3784
4116
  }
3785
4117
  });
@@ -3864,6 +4196,30 @@ var WebsyChartTooltip = /*#__PURE__*/function () {
3864
4196
  return WebsyChartTooltip;
3865
4197
  }();
3866
4198
 
4199
+ var WebsyUtils = {
4200
+ createIdentity: function createIdentity() {
4201
+ var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
4202
+ var text = '';
4203
+ var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
4204
+
4205
+ for (var i = 0; i < size; i++) {
4206
+ text += possible.charAt(Math.floor(Math.random() * possible.length));
4207
+ }
4208
+
4209
+ return text;
4210
+ },
4211
+ getElementPos: function getElementPos(el) {
4212
+ var rect = el.getBoundingClientRect();
4213
+ var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
4214
+ var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
4215
+ return {
4216
+ top: rect.top + scrollTop,
4217
+ left: rect.left + scrollLeft,
4218
+ bottom: rect.top + scrollTop + el.clientHeight,
4219
+ right: rect.left + scrollLeft + el.clientWidth
4220
+ };
4221
+ }
4222
+ };
3867
4223
  var WebsyDesigns = {
3868
4224
  WebsyPopupDialog: WebsyPopupDialog,
3869
4225
  WebsyLoadingDialog: WebsyLoadingDialog,
@@ -3872,6 +4228,7 @@ var WebsyDesigns = {
3872
4228
  WebsyDatePicker: WebsyDatePicker,
3873
4229
  WebsyDropdown: WebsyDropdown,
3874
4230
  WebsyResultList: WebsyResultList,
4231
+ WebsyTemplate: WebsyTemplate,
3875
4232
  WebsyPubSub: WebsyPubSub,
3876
4233
  WebsyRouter: WebsyRouter,
3877
4234
  WebsyTable: WebsyTable,
@@ -3881,7 +4238,8 @@ var WebsyDesigns = {
3881
4238
  WebsyKPI: WebsyKPI,
3882
4239
  WebsyPDFButton: WebsyPDFButton,
3883
4240
  PDFButton: WebsyPDFButton,
3884
- APIService: APIService
4241
+ APIService: APIService,
4242
+ WebsyUtils: WebsyUtils
3885
4243
  };
3886
4244
  var GlobalPubSub = new WebsyPubSub('empty', {});
3887
4245