@websy/websy-designs 1.1.12 → 1.2.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 (15) hide show
  1. package/dist/server/helpers/v1/authHelper.js +29 -19
  2. package/dist/server/helpers/v1/pgHelper.js +57 -11
  3. package/dist/server/helpers/v1/sessionHelper.js +7 -5
  4. package/dist/server/routes/v1/auth.js +28 -6
  5. package/dist/server/routes/v1/recaptcha.js +4 -2
  6. package/dist/server/websy-designs-server.js +36 -9
  7. package/dist/websy-designs-es6.debug.js +185 -62
  8. package/dist/websy-designs-es6.js +208 -68
  9. package/dist/websy-designs-es6.min.js +1 -1
  10. package/dist/websy-designs.debug.js +356 -85
  11. package/dist/websy-designs.js +362 -89
  12. package/dist/websy-designs.min.css +1 -1
  13. package/dist/websy-designs.min.js +1 -1
  14. package/dist/websy-icons.min.css +1 -0
  15. package/package.json +2 -4
package/dist/websy-designs.js CHANGED
@@ -35,6 +35,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
35
35
  WebsyResultList
36
36
  WebsyTable
37
37
  WebsyTable2
38
+ WebsyIcons
38
39
  WebsyChart
39
40
  WebsyChartTooltip
40
41
  WebsyLegend
@@ -47,6 +48,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
47
48
  ButtonGroup
48
49
  WebsyUtils
49
50
  WebsyCarousel
51
+ WebsyLogin
52
+ WebsySignup
50
53
  Pager
51
54
  */
52
55
 
@@ -150,7 +153,8 @@ var APIService = /*#__PURE__*/function () {
150
153
  xhr.withCredentials = true;
151
154
 
152
155
  xhr.onload = function () {
153
- if (xhr.status === 401 || xhr.status === 403) {
156
+ if (xhr.status === 401) {
157
+ // || xhr.status === 403) {
154
158
  if (ENV && ENV.AUTH_REDIRECT) {
155
159
  window.location = ENV.AUTH_REDIRECT;
156
160
  } else {
@@ -298,7 +302,9 @@ var WebsyCarousel = /*#__PURE__*/function () {
298
302
  currentFrame: 0,
299
303
  frameDuration: 4000,
300
304
  showFrameSelector: true,
301
- showPrevNext: true
305
+ showPrevNext: true,
306
+ autoPlay: true,
307
+ frames: []
302
308
  };
303
309
  this.playTimeoutFn = null;
304
310
  this.options = _extends({}, DEFAULTS, options);
@@ -347,11 +353,7 @@ var WebsyCarousel = /*#__PURE__*/function () {
347
353
  }
348
354
 
349
355
  this.showFrame(prevFrameIndex, this.options.currentFrame);
350
- this.play(); // document.getElementById(`${this.elementId}_frame_${this.options.currentFrame}`)
351
- // .style.transform = `translateX(-100%)`
352
- // if (`${this.options.currentFrame === this.options.frames.length - 1}`) {
353
- // document.getElementById`${this.elementId}_frame_${this.options.currentFrame}`.style.transform = `translateX('-100%')`
354
- // }
356
+ this.play();
355
357
  }
356
358
  }, {
357
359
  key: "pause",
@@ -365,6 +367,10 @@ var WebsyCarousel = /*#__PURE__*/function () {
365
367
  value: function play() {
366
368
  var _this2 = this;
367
369
 
370
+ if (this.options.autoPlay !== true) {
371
+ return;
372
+ }
373
+
368
374
  this.playTimeoutFn = setTimeout(function () {
369
375
  var prevFrameIndex = _this2.options.currentFrame;
370
376
 
@@ -392,8 +398,7 @@ var WebsyCarousel = /*#__PURE__*/function () {
392
398
  }
393
399
 
394
400
  this.showFrame(prevFrameIndex, this.options.currentFrame);
395
- this.play(); // document.getElementById(`${this.elementId}_frame_${this.options.currentFrame}`)
396
- // .style.transform = `translateX(100%)`
401
+ this.play();
397
402
  }
398
403
  }, {
399
404
  key: "render",
@@ -411,7 +416,7 @@ var WebsyCarousel = /*#__PURE__*/function () {
411
416
  if (el) {
412
417
  var html = "\n <div class=\"websy-carousel\">\n ";
413
418
  this.options.frames.forEach(function (frame, frameIndex) {
414
- html += "\n <div id=\"".concat(_this3.elementId, "_frame_").concat(frameIndex, "\" class=\"websy-frame-container animate\" style=\"transform: translateX(").concat(frameIndex === 0 ? '0' : '100%', ")\">\n ");
419
+ html += "\n <div id=\"".concat(_this3.elementId, "_frame_").concat(frameIndex, "\" class=\"websy-frame-container animate\" style=\"transform: translateX(").concat(frameIndex === 0 ? '0' : '101%', ")\">\n ");
415
420
  frame.images.forEach(function (image) {
416
421
  html += "\n <div style=\"".concat(image.style || 'position: absolute; width: 100%; height: 100%; top: 0; left: 0;', " background-image: url('").concat(image.url, "')\" class=\"").concat(image.classes || '', " websy-carousel-image\">\n </div>\n ");
417
422
  });
@@ -421,7 +426,7 @@ var WebsyCarousel = /*#__PURE__*/function () {
421
426
  html += "</div>";
422
427
  });
423
428
 
424
- if (this.options.showFrameSelector === true) {
429
+ if (this.options.showFrameSelector === true && this.options.frames.length > 1) {
425
430
  html += "<div class=\"websy-btn-parent\">";
426
431
  this.options.frames.forEach(function (frame, frameIndex) {
427
432
  html += "\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 512 512\" data-index=\"".concat(frameIndex, "\" id=\"").concat(_this3.elementId, "_selector_").concat(frameIndex, "\" \n class=\"websy-progress-btn ").concat(_this3.options.currentFrame === frameIndex ? 'websy-progress-btn-active' : '', "\">\n <title>Ellipse</title><circle cx=\"256\" cy=\"256\" r=\"192\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\"/>\n </svg>\n ");
@@ -429,7 +434,7 @@ var WebsyCarousel = /*#__PURE__*/function () {
429
434
  html += "</div>";
430
435
  }
431
436
 
432
- if (this.options.showPrevNext === true) {
437
+ if (this.options.showPrevNext === true && this.options.frames.length > 1) {
433
438
  html += "\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"websy-prev-arrow\"\n viewBox=\"0 0 512 512\">\n <title>Caret Back</title>\n <path d=\"M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z\"/>\n </svg>\n \n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"websy-next-arrow\">\n <title>Caret Forward</title>\n <path d=\"M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z\"/>\n </svg>\n ";
434
439
  }
435
440
 
@@ -442,15 +447,15 @@ var WebsyCarousel = /*#__PURE__*/function () {
442
447
  }, {
443
448
  key: "showFrame",
444
449
  value: function showFrame(prevFrameIndex, currFrameIndex) {
445
- var prevTranslateX = prevFrameIndex > currFrameIndex ? '100%' : '-100%';
446
- var nextTranslateX = prevFrameIndex < currFrameIndex ? '100%' : '-100%';
450
+ var prevTranslateX = prevFrameIndex > currFrameIndex ? '101%' : '-101%';
451
+ var nextTranslateX = prevFrameIndex < currFrameIndex ? '101%' : '-101%';
447
452
 
448
453
  if (currFrameIndex === 0 && prevFrameIndex === this.options.frames.length - 1) {
449
- prevTranslateX = '-100%';
450
- nextTranslateX = '100%';
454
+ prevTranslateX = '-101%';
455
+ nextTranslateX = '101%';
451
456
  } else if (prevFrameIndex === 0 && currFrameIndex === this.options.frames.length - 1) {
452
- prevTranslateX = '100%';
453
- nextTranslateX = '-100%';
457
+ prevTranslateX = '101%';
458
+ nextTranslateX = '-101%';
454
459
  }
455
460
 
456
461
  var prevF = document.getElementById("".concat(this.elementId, "_frame_").concat(prevFrameIndex));
@@ -488,6 +493,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
488
493
  this.shiftPressed = false;
489
494
  var DEFAULTS = {
490
495
  defaultRange: 0,
496
+ allowClear: true,
491
497
  minAllowedDate: this.floorDate(new Date(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).setDate(1))),
492
498
  maxAllowedDate: this.floorDate(new Date(new Date())),
493
499
  minAllowedYear: 1970,
@@ -569,7 +575,13 @@ var WebsyDatePicker = /*#__PURE__*/function () {
569
575
  el.addEventListener('mouseup', this.handleMouseUp.bind(this));
570
576
  document.addEventListener('keydown', this.handleKeyDown.bind(this));
571
577
  document.addEventListener('keyup', this.handleKeyUp.bind(this));
572
- var html = "\n <div class='websy-date-picker-container'>\n <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n <div class='websy-date-picker-header'>\n <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n <svg 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 </div>\n <div id='").concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-date-picker-content'>\n <div class='websy-date-picker-ranges'>\n <ul id='").concat(this.elementId, "_rangelist'>\n ").concat(this.renderRanges(), "\n </ul>\n </div><!--\n --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n <div class='websy-dp-button-container'>\n <span class=\"dp-footnote\">Click and drag or hold Shift and click to select a range of values</span>\n <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n </button>\n <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n </button>\n </div>\n </div> \n </div>\n ");
578
+ var html = "\n <div class='websy-date-picker-container'>\n <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n <div id=\"").concat(this.elementId, "_header\" class='websy-date-picker-header ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n <svg 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 ");
579
+
580
+ if (this.options.allowClear === true) {
581
+ html += "\n <svg class='clear-selection' 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 ";
582
+ }
583
+
584
+ html += "\n </div>\n <div id='".concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-date-picker-content'>\n <div class='websy-date-picker-ranges'>\n <ul id='").concat(this.elementId, "_rangelist'>\n ").concat(this.renderRanges(), "\n </ul>\n </div><!--\n --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n <div class='websy-dp-button-container'>\n <span class=\"dp-footnote\">Click and drag or hold Shift and click to select a range of values</span>\n <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n </button>\n <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n </button>\n </div>\n </div> \n </div>\n ");
573
585
  el.innerHTML = html;
574
586
  this.render();
575
587
  } else {
@@ -582,6 +594,12 @@ var WebsyDatePicker = /*#__PURE__*/function () {
582
594
  value: function close(confirm) {
583
595
  var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
584
596
  var contentEl = document.getElementById("".concat(this.elementId, "_content"));
597
+ var el = document.getElementById(this.elementId);
598
+
599
+ if (el) {
600
+ el.style.zIndex = '';
601
+ }
602
+
585
603
  maskEl.classList.remove('active');
586
604
  contentEl.classList.remove('active');
587
605
 
@@ -636,13 +654,14 @@ var WebsyDatePicker = /*#__PURE__*/function () {
636
654
  this.close(true);
637
655
  } else if (event.target.classList.contains('websy-dp-cancel')) {
638
656
  this.close();
657
+ } else if (event.target.classList.contains('clear-selection')) {
658
+ this.selectRange(0);
659
+ this.updateRange(0);
639
660
  }
640
661
  }
641
662
  }, {
642
663
  key: "handleKeyDown",
643
664
  value: function handleKeyDown(event) {
644
- console.log('key down', event);
645
-
646
665
  if (event.key === 'Shift') {
647
666
  this.dragging = true;
648
667
  this.shiftPressed = true;
@@ -721,14 +740,13 @@ var WebsyDatePicker = /*#__PURE__*/function () {
721
740
  }
722
741
 
723
742
  if (this.customRangeSelected === true) {
743
+ console.log('if date selection', this.currentselection);
724
744
  var diff;
725
745
 
726
746
  if (this.options.mode === 'date') {
727
- diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay);
728
-
729
- if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
730
- diff += 1;
731
- }
747
+ diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay); // if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
748
+ // diff += 1
749
+ // }
732
750
  } else if (this.options.mode === 'year') {
733
751
  diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0];
734
752
 
@@ -794,6 +812,12 @@ var WebsyDatePicker = /*#__PURE__*/function () {
794
812
  var override = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
795
813
  var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
796
814
  var contentEl = document.getElementById("".concat(this.elementId, "_content"));
815
+ var el = document.getElementById(this.elementId);
816
+
817
+ if (el) {
818
+ el.style.zIndex = 999;
819
+ }
820
+
797
821
  maskEl.classList.add('active');
798
822
  contentEl.classList.add('active');
799
823
  this.priorSelectedDates = _toConsumableArray(this.selectedRangeDates);
@@ -1057,6 +1081,16 @@ var WebsyDatePicker = /*#__PURE__*/function () {
1057
1081
  this.selectedRangeDates = _toConsumableArray(this.options.ranges[this.options.mode][index].range);
1058
1082
  this.currentselection = _toConsumableArray(this.options.ranges[this.options.mode][index].range);
1059
1083
  this.selectedRange = +index;
1084
+ var el = document.getElementById("".concat(this.elementId, "_header"));
1085
+
1086
+ if (el) {
1087
+ if (this.selectedRange === 0) {
1088
+ el.classList.remove('range-selected');
1089
+ } else {
1090
+ el.classList.add('range-selected');
1091
+ }
1092
+ }
1093
+
1060
1094
  this.highlightRange();
1061
1095
  this.close(true);
1062
1096
  }
@@ -1244,6 +1278,12 @@ var WebsyDropdown = /*#__PURE__*/function () {
1244
1278
  var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
1245
1279
  var contentEl = document.getElementById("".concat(this.elementId, "_content"));
1246
1280
  var scrollEl = document.getElementById("".concat(this.elementId, "_itemsContainer"));
1281
+ var el = document.getElementById(this.elementId);
1282
+
1283
+ if (el) {
1284
+ el.style.zIndex = '';
1285
+ }
1286
+
1247
1287
  scrollEl.scrollTop = 0;
1248
1288
  maskEl.classList.remove('active');
1249
1289
  contentEl.classList.remove('active');
@@ -1375,6 +1415,12 @@ var WebsyDropdown = /*#__PURE__*/function () {
1375
1415
  var override = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
1376
1416
  var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
1377
1417
  var contentEl = document.getElementById("".concat(this.elementId, "_content"));
1418
+ var el = document.getElementById(this.elementId);
1419
+
1420
+ if (el) {
1421
+ el.style.zIndex = 999;
1422
+ }
1423
+
1378
1424
  maskEl.classList.add('active');
1379
1425
  contentEl.classList.add('active');
1380
1426
 
@@ -1605,8 +1651,10 @@ var WebsyForm = /*#__PURE__*/function () {
1605
1651
  text: 'Save',
1606
1652
  classes: ''
1607
1653
  },
1654
+ useRecaptcha: false,
1608
1655
  clearAfterSave: false,
1609
1656
  fields: [],
1657
+ mode: 'add',
1610
1658
  onSuccess: function onSuccess(data) {},
1611
1659
  onError: function onError(err) {
1612
1660
  console.log('Error submitting form data:', err);
@@ -1654,19 +1702,27 @@ var WebsyForm = /*#__PURE__*/function () {
1654
1702
 
1655
1703
  return new Promise(function (resolve, reject) {
1656
1704
  if (_this11.options.useRecaptcha === true) {
1657
- if (_this11.recaptchaValue) {
1658
- _this11.apiService.add('/google/checkrecaptcha', JSON.stringify({
1659
- grecaptcharesponse: _this11.recaptchaValue
1660
- })).then(function (response) {
1661
- if (response.success && response.success === true) {
1662
- resolve(true);
1663
- } else {
1664
- reject(false);
1665
- }
1705
+ // if (this.recaptchaValue) {
1706
+ grecaptcha.ready(function () {
1707
+ grecaptcha.execute(ENVIRONMENT.RECAPTCHA_KEY, {
1708
+ action: 'submit'
1709
+ }).then(function (token) {
1710
+ _this11.apiService.add('google/checkrecaptcha', {
1711
+ grecaptcharesponse: token
1712
+ }).then(function (response) {
1713
+ if (response.success && response.success === true) {
1714
+ resolve(true);
1715
+ } else {
1716
+ reject(false);
1717
+ }
1718
+ });
1719
+ }, function (err) {
1720
+ reject(err);
1666
1721
  });
1667
- } else {
1668
- reject(false);
1669
- }
1722
+ }); // }
1723
+ // else {
1724
+ // reject(false)
1725
+ // }
1670
1726
  } else {
1671
1727
  resolve(true);
1672
1728
  }
@@ -1748,15 +1804,15 @@ var WebsyForm = /*#__PURE__*/function () {
1748
1804
  var componentsToProcess = [];
1749
1805
 
1750
1806
  if (el) {
1751
- var html = "\n <form id=\"".concat(this.elementId, "Form\" class=\"").concat(this.options.classes || '', "\">\n ");
1807
+ var html = "\n <form id=\"".concat(this.elementId, "Form\" class=\"websy-form ").concat(this.options.classes || '', "\">\n ");
1752
1808
  this.options.fields.forEach(function (f, i) {
1753
1809
  if (f.component) {
1754
1810
  componentsToProcess.push(f);
1755
1811
  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(_this13.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n </div><!--\n ");
1756
1812
  } else if (f.type === 'longtext') {
1757
- 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(_this13.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 ");
1813
+ 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(_this13.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n placeholder=\"").concat(f.placeholder || '', "\"\n name=\"").concat(f.field, "\" \n ").concat((f.attributes || []).join(' '), "\n class=\"websy-input websy-textarea\"\n ></textarea>\n </div><!--\n ");
1758
1814
  } else {
1759
- 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(_this13.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 valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n />\n </div><!--\n ");
1815
+ 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(_this13.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n type=\"").concat(f.type || 'text', "\" \n class=\"websy-input\" \n ").concat((f.attributes || []).join(' '), "\n name=\"").concat(f.field, "\" \n placeholder=\"").concat(f.placeholder || '', "\"\n value=\"").concat(f.value || '', "\"\n valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n />\n </div><!--\n ");
1760
1816
  }
1761
1817
  });
1762
1818
  html += "\n --><button class=\"websy-btn submit ".concat(this.options.submit.classes || '', "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n ");
@@ -1773,8 +1829,7 @@ var WebsyForm = /*#__PURE__*/function () {
1773
1829
 
1774
1830
  el.innerHTML = html;
1775
1831
  this.processComponents(componentsToProcess, function () {
1776
- if (_this13.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
1777
- _this13.recaptchaReady();
1832
+ if (_this13.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {// this.recaptchaReady()
1778
1833
  }
1779
1834
  });
1780
1835
  }
@@ -1797,7 +1852,17 @@ var WebsyForm = /*#__PURE__*/function () {
1797
1852
  });
1798
1853
 
1799
1854
  if (_this14.options.url) {
1800
- _this14.apiService.add(_this14.options.url, data).then(function (result) {
1855
+ var _this14$apiService;
1856
+
1857
+ var params = [_this14.options.url];
1858
+
1859
+ if (_this14.options.mode === 'update') {
1860
+ params.push(_this14.options.id);
1861
+ }
1862
+
1863
+ params.push(data);
1864
+
1865
+ (_this14$apiService = _this14.apiService)[_this14.options.mode].apply(_this14$apiService, params).then(function (result) {
1801
1866
  if (_this14.options.clearAfterSave === true) {
1802
1867
  // this.render()
1803
1868
  formEl.reset();
@@ -1857,6 +1922,14 @@ var WebsyForm = /*#__PURE__*/function () {
1857
1922
 
1858
1923
  return WebsyForm;
1859
1924
  }();
1925
+ /* global include */
1926
+
1927
+
1928
+ var WebsyIcons = {
1929
+ 'search-icon': "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 500 500\" xml:space=\"preserve\">\n<path d=\"M481.4,468.6c-17.2-17.2-34.4-34.4-51.6-51.6c-27.4-27.4-54.8-54.8-82.2-82.2c-4.8-4.8-9.5-9.5-14.3-14.3\n\tc29.4-32.5,47.4-75.5,47.4-122.7C380.7,97,298.7,15,197.9,15S15,97,15,197.9s82,182.9,182.9,182.9c47.2,0,90.3-18,122.7-47.4\n\tc15.7,15.7,31.4,31.4,47.1,47.1c27.4,27.4,54.8,54.8,82.2,82.2c6.3,6.3,12.5,12.5,18.8,18.8C476.8,489.6,489.6,476.8,481.4,468.6z\n\t M35,197.9C35,108.1,108.1,35,197.9,35s162.9,73.1,162.9,162.9s-73.1,162.9-162.9,162.9S35,287.7,35,197.9z\"/>\n</svg>\n\n ",
1930
+ 'bag-icon': "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 500 500\" style=\"enable-background:new 0 0 500 500;\" xml:space=\"preserve\">\n<path d=\"M456.6,472.3H43.4c-5.3,0-10.2-2.1-13.7-6c-3.6-3.9-5.2-9.2-4.5-14.4l37-285.4c1.2-9,9-15.9,18.2-15.9h339.2\n\tc9.2,0,17,6.8,18.2,15.8l37,285.4c0.7,5.2-1,10.5-4.5,14.4l0,0C466.8,470.1,461.9,472.3,456.6,472.3z M46.5,451.2h407l-36.3-279.6\n\tH82.8L46.5,451.2z\"/>\n<g>\n\t<path d=\"M361.3,157.1C357.3,94.8,308.4,46,249.9,46c-28,0-54.8,11.1-75.4,31.4c-20.7,20.3-33.5,47.9-35.9,77.8l-21.5-1.6\n\t\tc2.8-34.8,17.7-67.1,42.1-91C183.9,38.3,216.1,25,249.9,25c34.2,0,66.6,13.6,91.5,38.3c24.5,24.3,39.2,57.2,41.5,92.5L361.3,157.1z\n\t\t\"/>\n</g>\n</svg>\n\n ",
1931
+ 'user-icon': "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 500 500\" style=\"enable-background:new 0 0 500 500;\" xml:space=\"preserve\">\n<g>\n\t<path d=\"M248,260.5c-62,0-112.5-52.8-112.5-117.7S186,25,248,25s112.5,52.8,112.5,117.7S310,260.5,248,260.5z M248,45.9\n\t\tc-51,0-92.5,43.4-92.5,96.8s41.5,96.8,92.5,96.8c51,0,92.5-43.4,92.5-96.8S299,45.9,248,45.9z\"/>\n</g>\n<path d=\"M45,475C45,475,45,475,45,475c0-118.3,92-214.5,205-214.5c113,0,205,96.2,205,214.5c0,0,0,0,0,0h20c0,0,0,0,0,0\n\tc0-62.9-23.4-122-65.9-166.5c-42.5-44.5-99-69-159.1-69s-116.6,24.5-159.1,69C48.4,353,25,412.1,25,475c0,0,0,0,0,0H45z\"/>\n</svg>\n\n "
1932
+ };
1860
1933
 
1861
1934
  var WebsyLoadingDialog = /*#__PURE__*/function () {
1862
1935
  function WebsyLoadingDialog(elementId, options) {
@@ -1919,6 +1992,60 @@ var WebsyLoadingDialog = /*#__PURE__*/function () {
1919
1992
 
1920
1993
  return WebsyLoadingDialog;
1921
1994
  }();
1995
+ /* global WebsyDesigns ENVIRONMENT */
1996
+
1997
+
1998
+ var WebsyLogin = /*#__PURE__*/function () {
1999
+ function WebsyLogin(elementId, options) {
2000
+ _classCallCheck(this, WebsyLogin);
2001
+
2002
+ var DEFAULTS = {
2003
+ loginType: 'email',
2004
+ classes: [],
2005
+ url: 'auth/login'
2006
+ };
2007
+ this.elementId = elementId;
2008
+ this.options = _extends({}, DEFAULTS, options);
2009
+ var el = document.getElementById(this.elementId);
2010
+
2011
+ if (el) {
2012
+ var formOptions = {
2013
+ useRecaptcha: this.options.useRecaptcha || ENVIRONMENT.useRecaptcha || false,
2014
+ submit: {
2015
+ text: this.options.buttonText || 'Log in',
2016
+ classes: (this.options.buttonClasses || []).join(' ') || ''
2017
+ },
2018
+ submitFn: this.submitForm.bind(this),
2019
+ fields: [{
2020
+ label: this.options.loginType === 'email' ? 'Email' : 'Username',
2021
+ placeholder: "Enter your ".concat(this.options.loginType === 'email' ? 'email address' : 'Username'),
2022
+ field: this.options.loginType,
2023
+ type: this.options.loginType,
2024
+ required: true
2025
+ }, {
2026
+ label: 'Password',
2027
+ placeholder: 'Enter your password',
2028
+ field: this.options.passwordField || 'password',
2029
+ type: 'password',
2030
+ required: true
2031
+ }]
2032
+ };
2033
+ this.loginForm = new WebsyDesigns.WebsyForm(this.elementId, _extends({}, this.options, formOptions));
2034
+ } else {
2035
+ console.error("No element with ID ".concat(this.elementId, " found for WebsyLogin component."));
2036
+ }
2037
+ }
2038
+
2039
+ _createClass(WebsyLogin, [{
2040
+ key: "submitForm",
2041
+ value: function submitForm(data, b, c) {
2042
+ console.log(data);
2043
+ console.log(b, c);
2044
+ }
2045
+ }]);
2046
+
2047
+ return WebsyLogin;
2048
+ }();
1922
2049
  /* global */
1923
2050
 
1924
2051
 
@@ -2067,7 +2194,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
2067
2194
  items[i].classes = items[i].classes.join(' ');
2068
2195
  }
2069
2196
 
2070
- 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 || '', " ").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 ");
2197
+ html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes || '', " ").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 ");
2071
2198
 
2072
2199
  if (this.options.orientation === 'horizontal') {
2073
2200
  html += items[i].text;
@@ -2409,7 +2536,9 @@ var WebsyPopupDialog = /*#__PURE__*/function () {
2409
2536
  _classCallCheck(this, WebsyPopupDialog);
2410
2537
 
2411
2538
  this.DEFAULTS = {
2412
- buttons: []
2539
+ buttons: [],
2540
+ classes: [],
2541
+ style: ''
2413
2542
  };
2414
2543
  this.options = _extends({}, this.DEFAULTS, options);
2415
2544
 
@@ -2473,7 +2602,7 @@ var WebsyPopupDialog = /*#__PURE__*/function () {
2473
2602
  html += "<div class='websy-mask'></div>";
2474
2603
  }
2475
2604
 
2476
- html += "\n\t\t\t<div class='websy-popup-dialog-container'>\n\t\t\t\t<div class='websy-popup-dialog'>\n\t\t";
2605
+ html += "\n\t\t\t<div class='websy-popup-dialog-container'>\n\t\t\t\t<div class='websy-popup-dialog ".concat(this.options.classes.join(' '), "' style='").concat(this.options.style, "'>\n\t\t");
2477
2606
 
2478
2607
  if (this.options.title) {
2479
2608
  html += "<h1>".concat(this.options.title, "</h1>");
@@ -2871,7 +3000,6 @@ var WebsyRouter = /*#__PURE__*/function () {
2871
3000
  var els = document.querySelectorAll(".websy-view[data-group=\"".concat(group, "\"]"));
2872
3001
 
2873
3002
  if (els) {
2874
- console.log('els', els);
2875
3003
  this.getClosestParent(els[0], function (parent) {
2876
3004
  _this23.groups[group] = {
2877
3005
  activeView: '',
@@ -3368,8 +3496,10 @@ var WebsyRouter = /*#__PURE__*/function () {
3368
3496
  var historyUrl = inputPath;
3369
3497
 
3370
3498
  if (this.options.urlPrefix) {
3371
- historyUrl = "/".concat(this.options.urlPrefix, "/").concat(historyUrl);
3372
- inputPath = "/".concat(this.options.urlPrefix, "/").concat(inputPath);
3499
+ historyUrl = historyUrl === '/' ? '' : "/".concat(historyUrl);
3500
+ inputPath = inputPath === '/' ? '' : "/".concat(inputPath);
3501
+ historyUrl = "/".concat(this.options.urlPrefix).concat(historyUrl).replace(/\/\//g, '/');
3502
+ inputPath = "/".concat(this.options.urlPrefix).concat(inputPath).replace(/\/\//g, '/');
3373
3503
  }
3374
3504
 
3375
3505
  if (this.currentParams && this.currentParams.path) {
@@ -3492,6 +3622,65 @@ var WebsyRouter = /*#__PURE__*/function () {
3492
3622
 
3493
3623
  return WebsyRouter;
3494
3624
  }();
3625
+ /* global WebsyDesigns ENVIRONMENT */
3626
+
3627
+
3628
+ var WebsySignup = /*#__PURE__*/function () {
3629
+ function WebsySignup(elementId, options) {
3630
+ _classCallCheck(this, WebsySignup);
3631
+
3632
+ var DEFAULTS = {
3633
+ loginType: 'email',
3634
+ classes: [],
3635
+ url: 'auth/signup'
3636
+ };
3637
+ this.elementId = elementId;
3638
+ this.options = _extends({}, DEFAULTS, options);
3639
+
3640
+ if (!this.options.fields) {
3641
+ this.options.fields = [{
3642
+ label: this.options.loginType === 'email' ? 'Email' : 'Username',
3643
+ placeholder: "Enter ".concat(this.options.loginType === 'email' ? 'your email address' : 'your chosen Username'),
3644
+ field: this.options.loginType,
3645
+ type: this.options.loginType,
3646
+ required: true
3647
+ }, {
3648
+ label: 'Password',
3649
+ placeholder: 'Enter your password',
3650
+ field: this.options.passwordField || 'password',
3651
+ type: 'password',
3652
+ required: true
3653
+ }];
3654
+ }
3655
+
3656
+ var el = document.getElementById(this.elementId);
3657
+
3658
+ if (el) {
3659
+ var formOptions = {
3660
+ useRecaptcha: this.options.useRecaptcha || ENVIRONMENT.useRecaptcha || false,
3661
+ submit: {
3662
+ text: this.options.buttonText || 'Sign up',
3663
+ classes: (this.options.buttonClasses || []).join(' ') || ''
3664
+ },
3665
+ submitFn: this.submitForm.bind(this),
3666
+ fields: this.options.fields
3667
+ };
3668
+ this.signupForm = new WebsyDesigns.WebsyForm(this.elementId, _extends({}, this.options, formOptions));
3669
+ } else {
3670
+ console.error("No element with ID ".concat(this.elementId, " found for WebsyLogin component."));
3671
+ }
3672
+ }
3673
+
3674
+ _createClass(WebsySignup, [{
3675
+ key: "submitForm",
3676
+ value: function submitForm(data, b, c) {
3677
+ console.log(data);
3678
+ console.log(b, c);
3679
+ }
3680
+ }]);
3681
+
3682
+ return WebsySignup;
3683
+ }();
3495
3684
  /* global */
3496
3685
 
3497
3686
 
@@ -3793,6 +3982,25 @@ var WebsyUtils = {
3793
3982
 
3794
3983
  return red * 0.299 + green * 0.587 + blue * 0.114 > 186 ? darkColor : lightColor;
3795
3984
  },
3985
+ measureText: function measureText(text) {
3986
+ var rotation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
3987
+ var fontSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '12px';
3988
+
3989
+ if (!isNaN(fontSize)) {
3990
+ fontSize = "".concat(fontSize, "px");
3991
+ }
3992
+
3993
+ var html = "<div style='display: inline-block; width: auto; font-size: ".concat(fontSize, "'>").concat(text, "</div>");
3994
+ var el = document.createElement('div');
3995
+ el.style.position = 'absolute';
3996
+ el.style.visibility = 'hidden';
3997
+ el.style.transform = "rotate(".concat(rotation, "deg)");
3998
+ el.innerHTML = html;
3999
+ document.body.appendChild(el);
4000
+ var w = el.getBoundingClientRect();
4001
+ el.remove();
4002
+ return w;
4003
+ },
3796
4004
  parseUrlParams: function parseUrlParams() {
3797
4005
  var queryString = window.location.search.replace('?', '');
3798
4006
  var params = {};
@@ -4039,7 +4247,7 @@ var WebsyTable = /*#__PURE__*/function () {
4039
4247
  if (_this28.options.columns[i].showAsLink === true && c.value.trim() !== '') {
4040
4248
  return "\n <td \n data-row-index='".concat(_this28.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this28.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >\n <a href='").concat(c.value, "' target='").concat(_this28.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this28.options.columns[i].linkText || c.value, "</a>\n </td>\n ");
4041
4249
  } else if ((_this28.options.columns[i].showAsNavigatorLink === true || _this28.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
4042
- return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this28.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='trigger-item ").concat(_this28.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this28.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.displayText || _this28.options.columns[i].linkText || c.value, "</td>\n ");
4250
+ return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this28.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='websy-trigger trigger-item ").concat(_this28.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this28.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.displayText || _this28.options.columns[i].linkText || c.value, "</td>\n ");
4043
4251
  } else {
4044
4252
  var info = c.value;
4045
4253
 
@@ -4103,21 +4311,34 @@ var WebsyTable = /*#__PURE__*/function () {
4103
4311
  }, function () {
4104
4312
  event.target.classList.remove('active');
4105
4313
  });
4106
- } else if (event.target.classList.contains('clickable')) {
4107
- var _colIndex = +event.target.getAttribute('data-col-index');
4314
+ } // else if (event.target.classList.contains('clickable')) {
4315
+ // const colIndex = +event.target.getAttribute('data-col-index')
4316
+ // const rowIndex = +event.target.getAttribute('data-row-index')
4317
+ // if (this.options.onClick) {
4318
+ // this.options.onClick(event, this.data[rowIndex][colIndex], this.data[rowIndex], this.options.columns[colIndex])
4319
+ // }
4320
+ // }
4321
+ else if (event.target.classList.contains('websy-page-num')) {
4322
+ var pageNum = +event.target.getAttribute('data-page');
4108
4323
 
4109
- var rowIndex = +event.target.getAttribute('data-row-index');
4324
+ if (this.options.onSetPage) {
4325
+ this.options.onSetPage(pageNum);
4326
+ }
4327
+ } else {
4328
+ var _colIndex = +event.target.getAttribute('data-col-index');
4110
4329
 
4111
- if (this.options.onClick) {
4112
- this.options.onClick(event, this.data[rowIndex][_colIndex], this.data[rowIndex], this.options.columns[_colIndex]);
4113
- }
4114
- } else if (event.target.classList.contains('websy-page-num')) {
4115
- var pageNum = +event.target.getAttribute('data-page');
4330
+ var rowIndex = +event.target.getAttribute('data-row-index');
4116
4331
 
4117
- if (this.options.onSetPage) {
4118
- this.options.onSetPage(pageNum);
4332
+ if (this.options.onClick) {
4333
+ this.options.onClick(event, {
4334
+ cell: this.data[rowIndex][_colIndex],
4335
+ row: this.data[rowIndex],
4336
+ column: this.options.columns[_colIndex],
4337
+ colIndex: _colIndex,
4338
+ rowIndex: rowIndex
4339
+ });
4340
+ }
4119
4341
  }
4120
- }
4121
4342
  }
4122
4343
  }, {
4123
4344
  key: "handleMouseMove",
@@ -4419,7 +4640,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
4419
4640
  if (_this31.options.columns[i].showAsLink === true && c.value.trim() !== '') {
4420
4641
  return "\n <td \n data-row-index='".concat(_this31.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this31.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >\n <a href='").concat(c.value, "' target='").concat(_this31.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this31.options.columns[i].linkText || c.value, "</a>\n </td>\n ");
4421
4642
  } else if ((_this31.options.columns[i].showAsNavigatorLink === true || _this31.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
4422
- return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this31.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='trigger-item ").concat(_this31.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this31.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.displayText || _this31.options.columns[i].linkText || c.value, "</td>\n ");
4643
+ return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this31.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='websy-trigger trigger-item ").concat(_this31.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this31.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.displayText || _this31.options.columns[i].linkText || c.value, "</td>\n ");
4423
4644
  } else {
4424
4645
  var info = c.value;
4425
4646
 
@@ -4517,6 +4738,18 @@ var WebsyTable2 = /*#__PURE__*/function () {
4517
4738
  if (this.options.onSetPage) {
4518
4739
  this.options.onSetPage(pageNum);
4519
4740
  }
4741
+ } else if (event.target.classList.contains('websy-h-scroll-container')) {
4742
+ console.log('scroll handle clicked', event);
4743
+ var clickX = event.clientX;
4744
+ var elX = event.target.getBoundingClientRect().left;
4745
+ var handleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
4746
+ var startPoint = clickX - elX - handleEl.clientWidth / 2;
4747
+ startPoint = Math.max(0, Math.min(startPoint, event.target.clientWidth - handleEl.clientWidth));
4748
+ handleEl.style.left = "".concat(startPoint, "px");
4749
+
4750
+ if (this.options.onScrollX) {
4751
+ this.options.onScrollX(startPoint);
4752
+ }
4520
4753
  }
4521
4754
  }
4522
4755
  }, {
@@ -4696,7 +4929,17 @@ var WebsyTable2 = /*#__PURE__*/function () {
4696
4929
 
4697
4930
  var headHTML = '<tr>' + this.options.columns.map(function (c, i) {
4698
4931
  if (c.show !== false) {
4699
- 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 ? _this32.buildSearchIcon(i) : '', "\n </div>\n </th>\n ");
4932
+ var style = '';
4933
+
4934
+ if (c.style) {
4935
+ style += c.style;
4936
+ }
4937
+
4938
+ if (c.width) {
4939
+ style += "width: ".concat(c.width || 'auto', "; ");
4940
+ }
4941
+
4942
+ return "\n <th style=\"".concat(style, "\">\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 ? _this32.buildSearchIcon(i) : '', "\n </div>\n </th>\n ");
4700
4943
  }
4701
4944
  }).join('') + '</tr>';
4702
4945
  var headEl = document.getElementById("".concat(this.elementId, "_head"));
@@ -4823,13 +5066,14 @@ var WebsyTable2 = /*#__PURE__*/function () {
4823
5066
  tableEl.style.width = 'auto';
4824
5067
  var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
4825
5068
  bodyEl.innerHTML = '<tr>' + values.map(function (c) {
4826
- return "\n <td \n style='height: ".concat(_this33.options.cellSize, "px; line-height: ").concat(_this33.options.cellSize, "px;'\n >").concat(c.value || '&nbsp;', "</td>\n ");
5069
+ return "\n <td \n style='height: ".concat(_this33.options.cellSize, "px; line-height: ").concat(_this33.options.cellSize, "px; padding: 10px 5px;'\n >").concat(c.value || '&nbsp;', "</td>\n ");
4827
5070
  }).join('') + '</tr>'; // get height of the first data cell
4828
5071
 
4829
5072
  var cells = bodyEl.querySelectorAll("tr:first-of-type td");
4830
5073
  var tableContainerEl = document.getElementById("".concat(this.elementId, "_tableContainer"));
4831
5074
  var cellHeight = cells[0].offsetHeight || cells[0].clientHeight;
4832
5075
  var cellWidths = [];
5076
+ var accWidth = 0;
4833
5077
  var nonScrollableWidth = 0;
4834
5078
 
4835
5079
  for (var i = 0; i < cells.length; i++) {
@@ -4838,6 +5082,14 @@ var WebsyTable2 = /*#__PURE__*/function () {
4838
5082
  }
4839
5083
 
4840
5084
  cellWidths.push(values[i].width || cells[i].offsetWidth || cells[i].clientWidth);
5085
+ accWidth += values[i].width || cells[i].offsetWidth || cells[i].clientWidth;
5086
+ } // if the table doesn't fill the available space we adjust the space so that the columns grow
5087
+
5088
+
5089
+ if (accWidth < (tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth) {
5090
+ for (var _i7 = this.options.leftColumns; _i7 < cellWidths.length; _i7++) {
5091
+ cellWidths[_i7] = ((tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth) / (cellWidths.length - this.options.leftColumns);
5092
+ }
4841
5093
  } // const cellWidth = firstDataCell.offsetWidth || firstDataCell.clientWidth
4842
5094
  // tableEl.style.width = ''
4843
5095
 
@@ -4883,6 +5135,7 @@ var WebsyChart = /*#__PURE__*/function () {
4883
5135
  legendRight: 0,
4884
5136
  legendTop: 0
4885
5137
  },
5138
+ axis: {},
4886
5139
  orientation: 'vertical',
4887
5140
  colors: ['#5e4fa2', '#3288bd', '#66c2a5', '#abdda4', '#e6f598', '#fee08b', '#fdae61', '#f46d43', '#d53e4f', '#9e0142'],
4888
5141
  transitionDuration: 650,
@@ -5256,7 +5509,7 @@ var WebsyChart = /*#__PURE__*/function () {
5256
5509
  value: function render(options) {
5257
5510
  var _this36 = this;
5258
5511
 
5259
- /* global d3 options */
5512
+ /* global d3 options WebsyUtils */
5260
5513
  if (typeof options !== 'undefined') {
5261
5514
  this.options = _extends({}, this.options, options);
5262
5515
  }
@@ -5379,10 +5632,10 @@ var WebsyChart = /*#__PURE__*/function () {
5379
5632
  }
5380
5633
 
5381
5634
  if (this.options.data.bottom && typeof this.options.data.bottom.max !== 'undefined') {
5382
- this.longestBottom = this.options.data.bottom.max.toString().length;
5635
+ this.longestBottom = this.options.data.bottom.max.toString();
5383
5636
 
5384
5637
  if (this.options.data.bottom.formatter) {
5385
- this.longestBottom = this.options.data.bottom.formatter(this.options.data.bottom.max).toString().length;
5638
+ this.longestBottom = this.options.data.bottom.formatter(this.options.data.bottom.max).toString();
5386
5639
  }
5387
5640
  }
5388
5641
 
@@ -5404,10 +5657,10 @@ var WebsyChart = /*#__PURE__*/function () {
5404
5657
  }
5405
5658
 
5406
5659
  if (this.options.data.left && typeof this.options.data.left.max !== 'undefined') {
5407
- this.longestLeft = this.options.data.left.max.toString().length;
5660
+ this.longestLeft = this.options.data.left.max.toString();
5408
5661
 
5409
5662
  if (this.options.data.left.formatter) {
5410
- this.longestLeft = this.options.data.left.formatter(this.options.data.left.max).toString().length;
5663
+ this.longestLeft = this.options.data.left.formatter(this.options.data.left.max).toString();
5411
5664
  }
5412
5665
  }
5413
5666
 
@@ -5417,17 +5670,23 @@ var WebsyChart = /*#__PURE__*/function () {
5417
5670
  }
5418
5671
 
5419
5672
  if (this.options.data.right && typeof this.options.data.right.max !== 'undefined') {
5420
- this.longestRight = this.options.data.right.max.toString().length;
5673
+ this.longestRight = this.options.data.right.max.toString();
5421
5674
 
5422
5675
  if (this.options.data.right.formatter) {
5423
- this.longestRight = this.options.data.right.formatter(this.options.data.right.max).toString().length;
5676
+ this.longestRight = this.options.data.right.formatter(this.options.data.right.max).toString();
5424
5677
  }
5425
5678
  } // establish the space needed for the various axes
5679
+ // this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
5680
+ // this.options.margin.axisRight = this.longestRight * ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize) * 0.7
5681
+ // this.options.margin.axisBottom = ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize) + 10
5426
5682
 
5427
5683
 
5428
- this.options.margin.axisLeft = this.longestLeft * (this.options.data.left && this.options.data.left.fontSize || this.options.fontSize) * 0.7;
5429
- this.options.margin.axisRight = this.longestRight * (this.options.data.right && this.options.data.right.fontSize || this.options.fontSize) * 0.7;
5430
- this.options.margin.axisBottom = (this.options.data.bottom && this.options.data.bottom.fontSize || this.options.fontSize) + 10;
5684
+ var longestLeftBounds = WebsyUtils.measureText(this.longestLeft, 0, this.options.data.left && this.options.data.left.fontSize || this.options.fontSize);
5685
+ var longestRightBounds = WebsyUtils.measureText(this.longestRight, 0, this.options.data.right && this.options.data.right.fontSize || this.options.fontSize);
5686
+ var longestBottomBounds = WebsyUtils.measureText(this.longestBottom, this.options.data.bottom && this.options.data.bottom.rotate || 0, this.options.data.bottom && this.options.data.bottom.fontSize || this.options.fontSize);
5687
+ this.options.margin.axisLeft = longestLeftBounds.width;
5688
+ this.options.margin.axisRight = longestRightBounds.width;
5689
+ this.options.margin.axisBottom = longestBottomBounds.height + 10;
5431
5690
  this.options.margin.axisTop = 0; // adjust axis margins based on title options
5432
5691
 
5433
5692
  if (this.options.data.left && this.options.data.left.showTitle === true) {
@@ -5446,10 +5705,18 @@ var WebsyChart = /*#__PURE__*/function () {
5446
5705
  }
5447
5706
  }
5448
5707
 
5449
- if (this.options.data.bottom.rotate) {
5450
- // this.options.margin.bottom = this.longestBottom * ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)
5451
- this.options.margin.axisBottom = this.longestBottom * (this.options.data.bottom && this.options.data.bottom.fontSize || this.options.fontSize) * 0.4; // this.options.margin.bottom = this.options.margin.bottom * (1 + this.options.data.bottom.rotate / 100)
5452
- } // hide the margin if necessary
5708
+ if ((this.options.data.bottom && this.options.data.bottom.rotate || 0) === 0 && this.options.axis.hideBottom !== true) {
5709
+ this.options.margin.axisLeft = Math.max(this.options.margin.axisLeft, longestBottomBounds.width / 2);
5710
+ } else if ((this.options.data.bottom && this.options.data.bottom.rotate || 0) < 0 && this.options.axis.hideBottom !== true) {
5711
+ this.options.margin.axisLeft = Math.max(this.options.margin.axisLeft, longestBottomBounds.width);
5712
+ } else if ((this.options.data.bottom && this.options.data.bottom.rotate || 0) > 0 && this.options.axis.hideBottom !== true) {
5713
+ this.options.margin.axisRight = Math.max(this.options.margin.axisRight, longestBottomBounds.width);
5714
+ } // if (this.options.data.bottom.rotate) {
5715
+ // // this.options.margin.bottom = this.longestBottom * ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)
5716
+ // this.options.margin.axisBottom = this.longestBottom * ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize) * 0.4
5717
+ // // this.options.margin.bottom = this.options.margin.bottom * (1 + this.options.data.bottom.rotate / 100)
5718
+ // }
5719
+ // hide the margin if necessary
5453
5720
 
5454
5721
 
5455
5722
  if (this.options.axis) {
@@ -5556,9 +5823,8 @@ var WebsyChart = /*#__PURE__*/function () {
5556
5823
 
5557
5824
  this.options.calculatedTimeFormatPattern = timeFormatPattern;
5558
5825
  var bAxisFunc = d3.axisBottom(this.bottomAxis) // .ticks(this.options.data.bottom.ticks || Math.min(this.options.data.bottom.data.length, 5))
5559
- .ticks(tickDefinition);
5560
- console.log('tickDefinition', tickDefinition);
5561
- console.log(bAxisFunc);
5826
+ .ticks(tickDefinition); // console.log('tickDefinition', tickDefinition)
5827
+ // console.log(bAxisFunc)
5562
5828
 
5563
5829
  if (this.options.data.bottom.formatter) {
5564
5830
  bAxisFunc.tickFormat(function (d) {
@@ -5566,11 +5832,10 @@ var WebsyChart = /*#__PURE__*/function () {
5566
5832
  });
5567
5833
  }
5568
5834
 
5569
- this.bottomAxisLayer.call(bAxisFunc);
5570
- console.log(this.bottomAxisLayer.ticks);
5835
+ this.bottomAxisLayer.call(bAxisFunc); // console.log(this.bottomAxisLayer.ticks)
5571
5836
 
5572
5837
  if (this.options.data.bottom.rotate) {
5573
- this.bottomAxisLayer.selectAll('text').attr('transform', "rotate(".concat(this.options.data.bottom.rotate, ")")).style('text-anchor', 'end');
5838
+ this.bottomAxisLayer.selectAll('text').attr('transform', "rotate(".concat(this.options.data.bottom && this.options.data.bottom.rotate || 0, ")")).style('text-anchor', "".concat((this.options.data.bottom && this.options.data.bottom.rotate || 0) === 0 ? 'middle' : 'end')).style('transform-origin', (this.options.data.bottom && this.options.data.bottom.rotate || 0) === 0 ? '0 0' : "0 ".concat(this.options.data.bottom && this.options.data.bottom.fontSize || this.options.fontSize, "px"));
5574
5839
  }
5575
5840
  } // Configure the left axis
5576
5841
 
@@ -6571,20 +6836,28 @@ var WebsyDesigns = {
6571
6836
  ButtonGroup: ButtonGroup,
6572
6837
  WebsySwitch: Switch,
6573
6838
  Pager: Pager,
6574
- Switch: Switch
6839
+ Switch: Switch,
6840
+ Carousel: WebsyCarousel,
6841
+ WebsyIcons: WebsyIcons,
6842
+ Icons: WebsyIcons,
6843
+ WebsyLogin: WebsyLogin,
6844
+ Login: WebsyLogin,
6845
+ WebsySignup: WebsySignup,
6846
+ Signup: WebsySignup
6575
6847
  };
6576
6848
  WebsyDesigns.service = new WebsyDesigns.APIService('');
6577
6849
  var GlobalPubSub = new WebsyPubSub('empty', {});
6578
6850
 
6579
6851
  function recaptchaReadyCallBack() {
6852
+ console.log('recaptchaready');
6580
6853
  GlobalPubSub.publish('recaptchaready');
6581
6854
  } // need a way of initializing these based on environment variables
6582
6855
 
6583
6856
 
6584
- function useGoogleRecaptcha() {
6857
+ function useGoogleRecaptcha(key) {
6585
6858
  var rcs = document.createElement('script');
6586
- rcs.src = '//www.google.com/recaptcha/api.js?onload=recaptchaReadyCallBack';
6587
- document.getElementsByTagName('body')[0].appendChild(rcs);
6859
+ rcs.src = "//www.google.com/recaptcha/api.js?render=".concat(key);
6860
+ document.body.appendChild(rcs);
6588
6861
  }
6589
6862
 
6590
6863
  function usePayPal() {