@websy/websy-designs 1.0.3 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/server/helpers/v1/puppeteer-report/examples/package-lock.json +972 -0
  2. package/dist/server/routes/v1/shop.js +2 -2
  3. package/dist/websy-designs-es6.debug.js +5734 -0
  4. package/dist/websy-designs-es6.js +6338 -0
  5. package/dist/websy-designs-es6.min.js +1 -0
  6. package/dist/websy-designs.debug.js +1121 -218
  7. package/dist/websy-designs.js +1271 -320
  8. package/dist/websy-designs.min.css +1 -1
  9. package/dist/websy-designs.min.js +1 -1
  10. package/package.json +1 -1
package/dist/websy-designs.js CHANGED
@@ -1,10 +1,5 @@
1
1
  "use strict";
2
2
 
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
3
  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
9
4
 
10
5
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -39,6 +34,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
39
34
  WebsyRouter
40
35
  WebsyResultList
41
36
  WebsyTable
37
+ WebsyTable2
42
38
  WebsyChart
43
39
  WebsyChartTooltip
44
40
  WebsyLegend
@@ -50,6 +46,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
50
46
  APIService
51
47
  ButtonGroup
52
48
  WebsyUtils
49
+ Pager
53
50
  */
54
51
 
55
52
  /* global XMLHttpRequest fetch ENV */
@@ -297,11 +294,16 @@ var WebsyDatePicker = /*#__PURE__*/function () {
297
294
  this.oneDay = 1000 * 60 * 60 * 24;
298
295
  this.currentselection = [];
299
296
  this.validDates = [];
297
+ this.validYears = [];
298
+ this.customRangeSelected = true;
300
299
  var DEFAULTS = {
301
300
  defaultRange: 0,
302
301
  minAllowedDate: this.floorDate(new Date(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).setDate(1))),
303
302
  maxAllowedDate: this.floorDate(new Date(new Date())),
303
+ minAllowedYear: 1970,
304
+ maxAllowedYear: new Date().getFullYear(),
304
305
  daysOfWeek: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
306
+ mode: 'date',
305
307
  monthMap: {
306
308
  0: 'Jan',
307
309
  1: 'Feb',
@@ -318,35 +320,49 @@ var WebsyDatePicker = /*#__PURE__*/function () {
318
320
  },
319
321
  ranges: []
320
322
  };
321
- DEFAULTS.ranges = [{
322
- label: 'All Dates',
323
- range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
324
- }, {
325
- label: 'Today',
326
- range: [this.floorDate(new Date())]
327
- }, {
328
- label: 'Yesterday',
329
- range: [this.floorDate(new Date().setDate(new Date().getDate() - 1))]
330
- }, {
331
- label: 'Last 7 Days',
332
- range: [this.floorDate(new Date().setDate(new Date().getDate() - 6)), this.floorDate(new Date())]
333
- }, {
334
- label: 'This Month',
335
- range: [this.floorDate(new Date().setDate(1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() + 1) - this.oneDay)]
336
- }, {
337
- label: 'Last Month',
338
- range: [this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth()) - this.oneDay)]
339
- }, {
340
- label: 'This Year',
341
- range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear()))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear())))]
342
- }, {
343
- label: 'Last Year',
344
- range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear() - 1))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear() - 1)))]
345
- }];
323
+ DEFAULTS.ranges = {
324
+ date: [{
325
+ label: 'All Dates',
326
+ range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
327
+ }, {
328
+ label: 'Today',
329
+ range: [this.floorDate(new Date())]
330
+ }, {
331
+ label: 'Yesterday',
332
+ range: [this.floorDate(new Date().setDate(new Date().getDate() - 1))]
333
+ }, {
334
+ label: 'Last 7 Days',
335
+ range: [this.floorDate(new Date().setDate(new Date().getDate() - 6)), this.floorDate(new Date())]
336
+ }, {
337
+ label: 'This Month',
338
+ range: [this.floorDate(new Date().setDate(1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() + 1) - this.oneDay)]
339
+ }, {
340
+ label: 'Last Month',
341
+ range: [this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth()) - this.oneDay)]
342
+ }, {
343
+ label: 'This Year',
344
+ range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear()))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear())))]
345
+ }, {
346
+ label: 'Last Year',
347
+ range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear() - 1))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear() - 1)))]
348
+ }],
349
+ year: [{
350
+ label: 'All Years',
351
+ range: [DEFAULTS.minAllowedYear, DEFAULTS.maxAllowedYear]
352
+ }, {
353
+ label: 'Last 5 Years',
354
+ range: [new Date().getFullYear() - 4, DEFAULTS.maxAllowedYear]
355
+ }, {
356
+ label: 'Last 10 Years',
357
+ range: [new Date().getFullYear() - 9, DEFAULTS.maxAllowedYear]
358
+ }]
359
+ };
346
360
  this.options = _extends({}, DEFAULTS, options);
347
361
  this.selectedRange = this.options.defaultRange || 0;
348
- this.selectedRangeDates = _toConsumableArray(this.options.ranges[this.options.defaultRange || 0].range);
362
+ this.selectedRangeDates = _toConsumableArray(this.options.ranges[this.options.mode][this.options.defaultRange || 0].range);
349
363
  this.priorSelectedDates = null;
364
+ this.priorselection = null;
365
+ this.priorCustomRangeSelected = null;
350
366
 
351
367
  if (!elementId) {
352
368
  console.log('No element Id provided');
@@ -358,7 +374,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
358
374
  if (el) {
359
375
  this.elementId = elementId;
360
376
  el.addEventListener('click', this.handleClick.bind(this));
361
- 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.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 <button class='websy-btn websy-dp-cancel'>Cancel</button>\n <button class='websy-btn websy-dp-confirm'>Confirm</button>\n </div>\n </div> \n </div>\n ");
377
+ el.addEventListener('mousedown', this.handleMouseDown.bind(this));
378
+ el.addEventListener('mouseover', this.handleMouseOver.bind(this));
379
+ el.addEventListener('mouseup', this.handleMouseUp.bind(this));
380
+ 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 <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 ");
362
381
  el.innerHTML = html;
363
382
  this.render();
364
383
  } else {
@@ -376,13 +395,20 @@ var WebsyDatePicker = /*#__PURE__*/function () {
376
395
 
377
396
  if (confirm === true) {
378
397
  if (this.options.onChange) {
379
- this.options.onChange(this.selectedRangeDates);
398
+ if (this.customRangeSelected === true) {
399
+ this.options.onChange(this.selectedRangeDates, true);
400
+ } else {
401
+ this.options.onChange(this.currentselection, false);
402
+ }
380
403
  }
381
404
 
382
405
  this.updateRange();
383
406
  } else {
384
407
  this.selectedRangeDates = _toConsumableArray(this.priorSelectedDates);
385
408
  this.selectedRange = this.priorSelectedRange;
409
+ this.customRangeSelected = this.priorCustomRangeSelected;
410
+ this.currentselection = _toConsumableArray(this.priorselection);
411
+ this.highlightRange();
386
412
  }
387
413
  }
388
414
  }, {
@@ -409,22 +435,65 @@ var WebsyDatePicker = /*#__PURE__*/function () {
409
435
  var index = event.target.getAttribute('data-index');
410
436
  this.selectRange(index);
411
437
  this.updateRange(index);
412
- } else if (event.target.classList.contains('websy-dp-date')) {
413
- if (event.target.classList.contains('websy-disabled-date')) {
414
- return;
415
- }
416
-
417
- var timestamp = event.target.id.split('_')[0];
418
- this.selectDate(+timestamp);
438
+ } else if (event.target.classList.contains('websy-dp-date')) {// if (event.target.classList.contains('websy-disabled-date')) {
439
+ // return
440
+ // }
441
+ // const timestamp = event.target.id.split('_')[0]
442
+ // this.selectDate(+timestamp)
419
443
  } else if (event.target.classList.contains('websy-dp-confirm')) {
420
444
  this.close(true);
421
445
  } else if (event.target.classList.contains('websy-dp-cancel')) {
422
446
  this.close();
423
447
  }
424
448
  }
449
+ }, {
450
+ key: "handleMouseDown",
451
+ value: function handleMouseDown(event) {
452
+ this.mouseDown = true;
453
+ this.dragging = false;
454
+
455
+ if (event.target.classList.contains('websy-dp-date')) {
456
+ if (event.target.classList.contains('websy-disabled-date')) {
457
+ return;
458
+ }
459
+
460
+ if (this.customRangeSelected === true) {
461
+ this.currentselection = [];
462
+ this.customRangeSelected = false;
463
+ }
464
+
465
+ this.mouseDownId = +event.target.id.split('_')[0];
466
+ this.selectDate(this.mouseDownId);
467
+ }
468
+ }
469
+ }, {
470
+ key: "handleMouseOver",
471
+ value: function handleMouseOver(event) {
472
+ if (this.mouseDown === true) {
473
+ if (event.target.classList.contains('websy-dp-date')) {
474
+ if (event.target.classList.contains('websy-disabled-date')) {
475
+ return;
476
+ }
477
+
478
+ if (event.target.id.split('_')[0] !== this.mouseDownId) {
479
+ this.dragging = true;
480
+ this.selectDate(+event.target.id.split('_')[0]);
481
+ }
482
+ }
483
+ }
484
+ }
485
+ }, {
486
+ key: "handleMouseUp",
487
+ value: function handleMouseUp(event) {
488
+ this.mouseDown = false;
489
+ this.dragging = false;
490
+ this.mouseDownId = null;
491
+ }
425
492
  }, {
426
493
  key: "highlightRange",
427
494
  value: function highlightRange() {
495
+ var _this2 = this;
496
+
428
497
  var el = document.getElementById("".concat(this.elementId, "_dateList"));
429
498
  var dateEls = el.querySelectorAll('.websy-dp-date');
430
499
 
@@ -438,27 +507,72 @@ var WebsyDatePicker = /*#__PURE__*/function () {
438
507
  return;
439
508
  }
440
509
 
441
- var daysDiff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay);
510
+ if (this.customRangeSelected === true) {
511
+ var diff;
442
512
 
443
- if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
444
- daysDiff += 1;
445
- }
513
+ if (this.options.mode === 'date') {
514
+ diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay);
446
515
 
447
- for (var _i = 0; _i < daysDiff + 1; _i++) {
448
- var d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + _i * this.oneDay));
449
- var dateEl = document.getElementById("".concat(d.getTime(), "_date"));
516
+ if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
517
+ diff += 1;
518
+ }
519
+ } else if (this.options.mode === 'year') {
520
+ diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0];
450
521
 
451
- if (dateEl) {
452
- dateEl.classList.add('selected');
522
+ if (this.selectedRangeDates[this.selectedRangeDates.length - 1] !== this.selectedRangeDates[0]) {// diff += 1
523
+ }
524
+ }
525
+
526
+ for (var _i = 0; _i < diff + 1; _i++) {
527
+ var d = void 0;
528
+ var rangeStart = void 0;
529
+ var rangeEnd = void 0;
530
+
531
+ if (this.options.mode === 'date') {
532
+ d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + _i * this.oneDay));
533
+ d = d.getTime();
534
+ rangeStart = this.selectedRangeDates[0].getTime();
535
+ rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime();
536
+ } else if (this.options.mode === 'year') {
537
+ d = this.selectedRangeDates[0] + _i;
538
+ rangeStart = this.selectedRangeDates[0];
539
+ rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1];
540
+ }
541
+
542
+ var dateEl = void 0;
453
543
 
454
- if (d.getTime() === this.selectedRangeDates[0].getTime()) {
455
- dateEl.classList.add('first');
544
+ if (this.options.mode === 'date') {
545
+ dateEl = document.getElementById("".concat(d.getTime(), "_date"));
546
+ } else if (this.options.mode === 'year') {
547
+ dateEl = document.getElementById("".concat(d, "_year"));
456
548
  }
457
549
 
458
- if (d.getTime() === this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()) {
459
- dateEl.classList.add('last');
550
+ if (dateEl) {
551
+ dateEl.classList.add('selected');
552
+
553
+ if (d === rangeStart) {
554
+ dateEl.classList.add("".concat(this.options.sortDirection === 'desc' ? 'last' : 'first'));
555
+ }
556
+
557
+ if (d === rangeEnd) {
558
+ dateEl.classList.add("".concat(this.options.sortDirection === 'desc' ? 'first' : 'last'));
559
+ }
460
560
  }
461
561
  }
562
+ } else {
563
+ this.currentselection.forEach(function (d) {
564
+ var dateEl;
565
+
566
+ if (_this2.options.mode === 'date') {
567
+ dateEl = document.getElementById("".concat(d, "_date"));
568
+ } else if (_this2.options.mode === 'year') {
569
+ dateEl = document.getElementById("".concat(d, "_year"));
570
+ }
571
+
572
+ dateEl.classList.add('selected');
573
+ dateEl.classList.add('first');
574
+ dateEl.classList.add('last');
575
+ });
462
576
  }
463
577
  }
464
578
  }, {
@@ -471,6 +585,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
471
585
  contentEl.classList.add('active');
472
586
  this.priorSelectedDates = _toConsumableArray(this.selectedRangeDates);
473
587
  this.priorSelectedRange = this.selectedRange;
588
+ this.priorselection = _toConsumableArray(this.currentselection);
589
+ this.priorCustomRangeSelected = this.customRangeSelected;
474
590
  this.scrollRangeIntoView();
475
591
  }
476
592
  }, {
@@ -498,61 +614,111 @@ var WebsyDatePicker = /*#__PURE__*/function () {
498
614
  }, {
499
615
  key: "renderDates",
500
616
  value: function renderDates(disabledDates) {
617
+ var _this3 = this;
618
+
501
619
  var disabled = [];
502
620
  this.validDates = [];
621
+ this.validYears = [];
503
622
 
504
623
  if (disabledDates) {
505
624
  disabled = disabledDates.map(function (d) {
625
+ if (_this3.options.mode === 'date') {
626
+ return d.getTime();
627
+ } else if (_this3.options.mode === 'year') {
628
+ return d;
629
+ }
630
+
506
631
  return d.getTime();
507
632
  });
508
633
  } // first disabled all of the ranges
509
634
 
510
635
 
511
- this.options.ranges.forEach(function (r) {
636
+ this.options.ranges[this.options.mode].forEach(function (r) {
512
637
  return r.disabled = true;
513
638
  });
514
- var daysDiff = Math.ceil((this.options.maxAllowedDate.getTime() - this.options.minAllowedDate.getTime()) / this.oneDay) + 1;
639
+ var diff;
640
+
641
+ if (this.options.mode === 'date') {
642
+ diff = Math.ceil((this.options.maxAllowedDate.getTime() - this.options.minAllowedDate.getTime()) / this.oneDay) + 1;
643
+ } else if (this.options.mode === 'year') {
644
+ diff = this.options.maxAllowedYear - this.options.minAllowedYear + 1;
645
+ }
646
+
515
647
  var months = {};
648
+ var yearList = [];
516
649
 
517
- for (var i = 0; i < daysDiff; i++) {
518
- var d = this.floorDate(new Date(this.options.minAllowedDate.getTime() + i * this.oneDay));
519
- var monthYear = "".concat(this.options.monthMap[d.getMonth()], " ").concat(d.getFullYear());
650
+ for (var i = 0; i < diff; i++) {
651
+ if (this.options.mode === 'date') {
652
+ var d = this.floorDate(new Date(this.options.minAllowedDate.getTime() + i * this.oneDay));
653
+ var monthYear = "".concat(this.options.monthMap[d.getMonth()], " ").concat(d.getFullYear());
520
654
 
521
- if (!months[monthYear]) {
522
- months[monthYear] = [];
523
- }
655
+ if (!months[monthYear]) {
656
+ months[monthYear] = [];
657
+ }
524
658
 
525
- if (disabled.indexOf(d.getTime()) === -1) {
526
- this.validDates.push(d.getTime());
527
- }
659
+ if (disabled.indexOf(d.getTime()) === -1) {
660
+ this.validDates.push(d.getTime());
661
+ }
528
662
 
529
- months[monthYear].push({
530
- date: d,
531
- dayOfMonth: d.getDate(),
532
- dayOfWeek: d.getDay(),
533
- id: d.getTime(),
534
- disabled: disabled.indexOf(d.getTime()) !== -1
535
- });
663
+ months[monthYear].push({
664
+ date: d,
665
+ dayOfMonth: d.getDate(),
666
+ dayOfWeek: d.getDay(),
667
+ id: d.getTime(),
668
+ disabled: disabled.indexOf(d.getTime()) !== -1
669
+ });
670
+ } else if (this.options.mode === 'year') {
671
+ var _d = this.options.minAllowedYear + i;
672
+
673
+ yearList.push({
674
+ year: _d,
675
+ id: _d,
676
+ disabled: disabled.indexOf(_d) !== -1
677
+ });
678
+
679
+ if (disabled.indexOf(_d) === -1) {
680
+ this.validYears.push(_d);
681
+ }
682
+ }
536
683
  } // check each range to see if it can be enabled
537
684
 
538
685
 
539
- for (var _i2 = 0; _i2 < this.options.ranges.length; _i2++) {
540
- var r = this.options.ranges[_i2]; // check the first date
686
+ for (var _i2 = 0; _i2 < this.options.ranges[this.options.mode].length; _i2++) {
687
+ var r = this.options.ranges[this.options.mode][_i2];
541
688
 
542
- if (this.validDates.indexOf(r.range[0].getTime()) !== -1) {
543
- r.disabled = false;
544
- } else if (r.range[1]) {
545
- // check the last date
546
- if (this.validDates.indexOf(r.range[1].getTime()) !== -1) {
689
+ if (this.options.mode === 'date') {
690
+ // check the first date
691
+ if (this.validDates.indexOf(r.range[0].getTime()) !== -1) {
547
692
  r.disabled = false;
548
- } else {
549
- // check the full range until a match is found
550
- for (var _i3 = r.range[0].getTime(); _i3 <= r.range[1].getTime(); _i3 += this.oneDay) {
551
- var testDate = this.floorDate(new Date(_i3));
693
+ } else if (r.range[1]) {
694
+ // check the last date
695
+ if (this.validDates.indexOf(r.range[1].getTime()) !== -1) {
696
+ r.disabled = false;
697
+ } else {
698
+ // check the full range until a match is found
699
+ for (var _i3 = r.range[0].getTime(); _i3 <= r.range[1].getTime(); _i3 += this.oneDay) {
700
+ var testDate = this.floorDate(new Date(_i3));
552
701
 
553
- if (this.validDates.indexOf(testDate.getTime()) !== -1) {
554
- r.disabled = false;
555
- break;
702
+ if (this.validDates.indexOf(testDate.getTime()) !== -1) {
703
+ r.disabled = false;
704
+ break;
705
+ }
706
+ }
707
+ }
708
+ }
709
+ } else if (this.options.mode === 'year') {
710
+ if (this.validYears.indexOf(r.range[0]) !== -1) {
711
+ r.disabled = false;
712
+ } else if (r.range[1]) {
713
+ if (this.validYears.indexOf(r.range[1]) !== -1) {
714
+ r.disabled = false;
715
+ } else {
716
+ // check the full range until a match is found
717
+ for (var _i4 = r.range[0]; _i4 <= r.range[1]; _i4++) {
718
+ if (this.validYears.indexOf(r.range[0] + _i4) !== -1) {
719
+ r.disabled = false;
720
+ break;
721
+ }
556
722
  }
557
723
  }
558
724
  }
@@ -560,48 +726,73 @@ var WebsyDatePicker = /*#__PURE__*/function () {
560
726
  }
561
727
 
562
728
  var html = '';
563
- html += "\n <ul class='websy-dp-days-header'>\n ";
564
- html += this.options.daysOfWeek.map(function (d) {
565
- return "<li>".concat(d, "</li>");
566
- }).join('');
567
- html += "\n </ul>\n <div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'>\n ");
568
729
 
569
- for (var key in months) {
570
- html += "\n <div class='websy-dp-month-container'>\n <span id='".concat(key.replace(/\s/g, '_'), "'>").concat(key, "</span>\n <ul>\n ");
730
+ if (this.options.mode === 'date') {
731
+ html += "\n <ul class='websy-dp-days-header'>\n ";
732
+ html += this.options.daysOfWeek.map(function (d) {
733
+ return "<li>".concat(d, "</li>");
734
+ }).join('');
735
+ html += "\n </ul> \n <div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'>\n ");
736
+
737
+ for (var key in months) {
738
+ html += "\n <div class='websy-dp-month-container'>\n <span id='".concat(key.replace(/\s/g, '_'), "'>").concat(key, "</span>\n <ul>\n ");
571
739
 
572
- if (months[key][0].dayOfWeek > 0) {
573
- var paddedDays = [];
740
+ if (months[key][0].dayOfWeek > 0) {
741
+ var paddedDays = [];
574
742
 
575
- for (var _i4 = 0; _i4 < months[key][0].dayOfWeek; _i4++) {
576
- paddedDays.push("<li>&nbsp;</li>");
743
+ for (var _i5 = 0; _i5 < months[key][0].dayOfWeek; _i5++) {
744
+ paddedDays.push("<li>&nbsp;</li>");
745
+ }
746
+
747
+ html += paddedDays.join('');
577
748
  }
578
749
 
579
- html += paddedDays.join('');
750
+ html += months[key].map(function (d) {
751
+ return "<li id='".concat(d.id, "_date' class='websy-dp-date ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.dayOfMonth, "</li>");
752
+ }).join('');
753
+ html += "\n </ul>\n </div>\n ";
754
+ }
755
+
756
+ html += '</div>';
757
+ } else if (this.options.mode === 'year') {
758
+ if (this.options.sortDirection === 'desc') {
759
+ yearList.reverse();
580
760
  }
581
761
 
582
- html += months[key].map(function (d) {
583
- return "<li id='".concat(d.id, "_date' class='websy-dp-date ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.dayOfMonth, "</li>");
762
+ html += "<div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'><ul>");
763
+ html += yearList.map(function (d) {
764
+ return "<li id='".concat(d.id, "_year' class='websy-dp-date websy-dp-year ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.year, "</li>");
584
765
  }).join('');
585
- html += "\n </ul>\n </div>\n ";
766
+ html += "</ul></div>";
586
767
  }
587
768
 
588
- html += '</div>';
589
769
  return html;
590
770
  }
591
771
  }, {
592
772
  key: "renderRanges",
593
773
  value: function renderRanges() {
594
- var _this2 = this;
774
+ var _this4 = this;
595
775
 
596
- return this.options.ranges.map(function (r, i) {
597
- return "\n <li data-index='".concat(i, "' class='websy-date-picker-range ").concat(i === _this2.selectedRange ? 'active' : '', " ").concat(r.disabled === true ? 'websy-disabled-range' : '', "'>").concat(r.label, "</li>\n ");
598
- }).join('');
776
+ return this.options.ranges[this.options.mode].map(function (r, i) {
777
+ return "\n <li data-index='".concat(i, "' class='websy-date-picker-range ").concat(i === _this4.selectedRange ? 'active' : '', " ").concat(r.disabled === true ? 'websy-disabled-range' : '', "'>").concat(r.label, "</li>\n ");
778
+ }).join('') + "<li data-index='-1' class='websy-date-picker-range ".concat(this.selectedRange === -1 ? 'active' : '', "'>Custom</li>");
599
779
  }
600
780
  }, {
601
781
  key: "scrollRangeIntoView",
602
782
  value: function scrollRangeIntoView() {
603
783
  if (this.selectedRangeDates[0]) {
604
- var el = document.getElementById("".concat(this.selectedRangeDates[0].getTime(), "_date"));
784
+ var el;
785
+
786
+ if (this.options.mode === 'date') {
787
+ el = document.getElementById("".concat(this.selectedRangeDates[0].getTime(), "_date"));
788
+ } else if (this.options.mode === 'year') {
789
+ if (this.options.sortDirection === 'desc') {
790
+ el = document.getElementById("".concat(this.selectedRangeDates[this.selectedRangeDates.length - 1], "_year"));
791
+ } else {
792
+ el = document.getElementById("".concat(this.selectedRangeDates[0], "_year"));
793
+ }
794
+ }
795
+
605
796
  var parentEl = document.getElementById("".concat(this.elementId, "_dateList"));
606
797
 
607
798
  if (el && parentEl) {
@@ -615,18 +806,33 @@ var WebsyDatePicker = /*#__PURE__*/function () {
615
806
  if (this.currentselection.length === 0) {
616
807
  this.currentselection.push(timestamp);
617
808
  } else {
618
- if (timestamp > this.currentselection[0]) {
619
- this.currentselection.push(timestamp);
809
+ if (this.dragging === true) {
810
+ this.currentselection = [this.mouseDownId];
811
+
812
+ if (timestamp > this.currentselection[0]) {
813
+ this.currentselection.push(timestamp);
814
+ } else {
815
+ this.currentselection.splice(0, 0, timestamp);
816
+ }
817
+
818
+ this.customRangeSelected = true;
620
819
  } else {
621
- this.currentselection.splice(0, 0, timestamp);
820
+ this.currentselection.push(timestamp);
821
+ this.currentselection.sort(function (a, b) {
822
+ return a - b;
823
+ });
824
+ this.customRangeSelected = false;
622
825
  }
623
826
  }
624
827
 
625
- this.selectedRangeDates = [new Date(this.currentselection[0]), new Date(this.currentselection[1] || this.currentselection[0])];
828
+ if (this.options.mode === 'date') {
829
+ this.selectedRangeDates = [new Date(this.currentselection[0]), new Date(this.currentselection[1] || this.currentselection[0])];
830
+ } else if (this.options.mode === 'year') {
831
+ this.selectedRangeDates = [this.currentselection[0], this.currentselection[1] || this.currentselection[0]];
832
+ } // if (this.currentselection.length === 2) {
833
+ // this.currentselection = []
834
+ // }
626
835
 
627
- if (this.currentselection.length === 2) {
628
- this.currentselection = [];
629
- }
630
836
 
631
837
  this.selectedRange = -1;
632
838
  this.highlightRange();
@@ -634,8 +840,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
634
840
  }, {
635
841
  key: "selectRange",
636
842
  value: function selectRange(index) {
637
- if (this.options.ranges[index]) {
638
- this.selectedRangeDates = _toConsumableArray(this.options.ranges[index].range);
843
+ if (this.options.ranges[this.options.mode][index]) {
844
+ this.selectedRangeDates = _toConsumableArray(this.options.ranges[this.options.mode][index].range);
845
+ this.currentselection = _toConsumableArray(this.options.ranges[this.options.mode][index].range);
639
846
  this.selectedRange = +index;
640
847
  this.highlightRange();
641
848
  this.close(true);
@@ -645,38 +852,69 @@ var WebsyDatePicker = /*#__PURE__*/function () {
645
852
  key: "selectCustomRange",
646
853
  value: function selectCustomRange(range) {
647
854
  this.selectedRange = -1;
648
- this.selectedRangeDates = range;
855
+ this.selectedRangeDates = range; // check if the custom range matches a configured range
856
+
857
+ for (var i = 0; i < this.options.ranges[this.options.mode].length; i++) {
858
+ if (this.options.ranges[this.options.mode][i].range.length === 1) {
859
+ if (this.options.ranges[this.options.mode][i].range[0] === range[0]) {
860
+ this.selectedRange = i;
861
+ break;
862
+ }
863
+ } else if (this.options.ranges[this.options.mode][i].range.length === 2) {
864
+ if (this.options.ranges[this.options.mode][i].range[0] === range[0] && this.options.ranges[this.options.mode][i].range[1] === range[1]) {
865
+ this.selectedRange = i;
866
+ break;
867
+ }
868
+ }
869
+ }
870
+
649
871
  this.highlightRange();
650
872
  this.updateRange();
651
873
  }
652
874
  }, {
653
875
  key: "setDateBounds",
654
876
  value: function setDateBounds(range) {
655
- if (this.options.ranges[0].label === 'All Dates') {
656
- this.options.ranges[0].range = [range[0], range[1] || range[0]];
877
+ if (['All Dates', 'All Years'].indexOf(this.options.ranges[this.options.mode][0].label) !== -1) {
878
+ this.options.ranges[this.options.mode][0].range = [range[0], range[1] || range[0]];
657
879
  }
658
880
 
659
- this.options.minAllowedDate = range[0];
660
- this.options.maxAllowedDate = range[1] || range[0];
881
+ if (this.options.mode === 'date') {
882
+ this.options.minAllowedDate = range[0];
883
+ this.options.maxAllowedDate = range[1] || range[0];
884
+ } else if (this.options.mode === 'year') {
885
+ this.options.minAllowedYear = range[0];
886
+ this.options.maxAllowedYear = range[1] || range[0];
887
+ }
661
888
  }
662
889
  }, {
663
890
  key: "updateRange",
664
891
  value: function updateRange() {
892
+ var _this5 = this;
893
+
665
894
  var range;
666
895
 
667
896
  if (this.selectedRange === -1) {
668
- var start = this.selectedRangeDates[0].toLocaleDateString();
897
+ var list = (this.currentselection.length > 0 ? this.currentselection : this.selectedRangeDates).map(function (d) {
898
+ if (_this5.options.mode === 'date') {
899
+ return d.toLocaleDateString();
900
+ } else if (_this5.options.mode === 'year') {
901
+ return d;
902
+ }
903
+ });
904
+ var start = list[0];
669
905
  var end = '';
670
906
 
671
- if (this.selectedRangeDates[1] && this.selectedRangeDates[0].getTime() !== this.selectedRangeDates[1].getTime()) {
672
- end = " - ".concat(this.selectedRangeDates[1].toLocaleDateString());
907
+ if (this.customRangeSelected === true) {
908
+ end = " - ".concat(list[list.length - 1]);
909
+ } else {
910
+ start = "".concat(list.length, " selected");
673
911
  }
674
912
 
675
913
  range = {
676
914
  label: "".concat(start).concat(end)
677
915
  };
678
916
  } else {
679
- range = this.options.ranges[this.selectedRange];
917
+ range = this.options.ranges[this.options.mode][this.selectedRange];
680
918
  }
681
919
 
682
920
  var el = document.getElementById(this.elementId);
@@ -708,6 +946,8 @@ Date.prototype.floor = function () {
708
946
 
709
947
  var WebsyDropdown = /*#__PURE__*/function () {
710
948
  function WebsyDropdown(elementId, options) {
949
+ var _this6 = this;
950
+
711
951
  _classCallCheck(this, WebsyDropdown);
712
952
 
713
953
  var DEFAULTS = {
@@ -740,6 +980,28 @@ var WebsyDropdown = /*#__PURE__*/function () {
740
980
  el.addEventListener('keyup', this.handleKeyUp.bind(this));
741
981
  el.addEventListener('mouseout', this.handleMouseOut.bind(this));
742
982
  el.addEventListener('mousemove', this.handleMouseMove.bind(this));
983
+ var headerLabel = this.selectedItems.map(function (s) {
984
+ return _this6.options.items[s].label || _this6.options.items[s].value;
985
+ }).join(this.options.multiValueDelimiter);
986
+ var headerValue = this.selectedItems.map(function (s) {
987
+ return _this6.options.items[s].value || _this6.options.items[s].label;
988
+ }).join(this.options.multiValueDelimiter);
989
+ var html = "\n <div id='".concat(this.elementId, "_container' class='websy-dropdown-container ").concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', " ").concat(this.options.style, "'>\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 <svg class='search' width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>\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 ");
990
+
991
+ if (this.options.allowClear === true) {
992
+ 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 ";
993
+ }
994
+
995
+ html += " \n </div>\n <div id='".concat(this.elementId, "_mask' class='websy-dropdown-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-dropdown-content'>\n ");
996
+
997
+ if (this.options.disableSearch !== true) {
998
+ html += "\n <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n ");
999
+ }
1000
+
1001
+ html += "\n <div id='".concat(this.elementId, "_itemsContainer' class='websy-dropdown-items'>\n <ul id='").concat(this.elementId, "_items'> \n </ul>\n </div><!--\n --><div class='websy-dropdown-custom'></div>\n </div>\n </div>\n ");
1002
+ el.innerHTML = html;
1003
+ var scrollEl = document.getElementById("".concat(this.elementId, "_itemsContainer"));
1004
+ scrollEl.addEventListener('scroll', this.handleScroll.bind(this));
743
1005
  this.render();
744
1006
  } else {
745
1007
  console.log('No element found with Id', elementId);
@@ -747,6 +1009,9 @@ var WebsyDropdown = /*#__PURE__*/function () {
747
1009
  }
748
1010
 
749
1011
  _createClass(WebsyDropdown, [{
1012
+ key: "appendRows",
1013
+ value: function appendRows() {}
1014
+ }, {
750
1015
  key: "clearSelected",
751
1016
  value: function clearSelected() {
752
1017
  this.selectedItems = [];
@@ -789,6 +1054,9 @@ var WebsyDropdown = /*#__PURE__*/function () {
789
1054
  this.updateSelected(+index);
790
1055
  } else if (event.target.classList.contains('clear')) {
791
1056
  this.clearSelected();
1057
+ } else if (event.target.classList.contains('search')) {
1058
+ var el = document.getElementById("".concat(this.elementId, "_container"));
1059
+ el.classList.toggle('search-open');
792
1060
  }
793
1061
  }
794
1062
  }, {
@@ -869,6 +1137,15 @@ var WebsyDropdown = /*#__PURE__*/function () {
869
1137
  clearTimeout(this.tooltipTimeoutFn);
870
1138
  }
871
1139
  }
1140
+ }, {
1141
+ key: "handleScroll",
1142
+ value: function handleScroll(event) {
1143
+ if (event.target.classList.contains('websy-dropdown-items')) {
1144
+ if (this.options.onScroll) {
1145
+ this.options.onScroll(event);
1146
+ }
1147
+ }
1148
+ }
872
1149
  }, {
873
1150
  key: "open",
874
1151
  value: function open(options) {
@@ -893,43 +1170,56 @@ var WebsyDropdown = /*#__PURE__*/function () {
893
1170
  }, {
894
1171
  key: "render",
895
1172
  value: function render() {
896
- var _this3 = this;
897
-
898
1173
  if (!this.elementId) {
899
1174
  console.log('No element Id provided for Websy Dropdown');
900
1175
  return;
901
- }
902
-
903
- var el = document.getElementById(this.elementId);
904
- var headerLabel = this.selectedItems.map(function (s) {
905
- return _this3.options.items[s].label || _this3.options.items[s].value;
906
- }).join(this.options.multiValueDelimiter);
907
- var headerValue = this.selectedItems.map(function (s) {
908
- return _this3.options.items[s].value || _this3.options.items[s].label;
909
- }).join(this.options.multiValueDelimiter);
910
- 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 ");
911
-
912
- if (this.options.allowClear === true) {
913
- 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 ";
914
- }
915
-
916
- html += " \n </div>\n <div id='".concat(this.elementId, "_mask' class='websy-dropdown-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-dropdown-content'>\n ");
1176
+ } // const el = document.getElementById(this.elementId)
1177
+ // const headerLabel = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
1178
+ // const headerValue = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
1179
+ // let html = `
1180
+ // <div class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''}'>
1181
+ // <div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
1182
+ // <span id='${this.elementId}_headerLabel' class='websy-dropdown-header-label'>${this.options.label}</span>
1183
+ // <span data-info='${headerLabel}' class='websy-dropdown-header-value' id='${this.elementId}_selectedItems'>${headerLabel}</span>
1184
+ // <input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
1185
+ // <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>
1186
+ // `
1187
+ // if (this.options.allowClear === true) {
1188
+ // html += `
1189
+ // <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>
1190
+ // `
1191
+ // }
1192
+ // html += `
1193
+ // </div>
1194
+ // <div id='${this.elementId}_mask' class='websy-dropdown-mask'></div>
1195
+ // <div id='${this.elementId}_content' class='websy-dropdown-content'>
1196
+ // `
1197
+ // if (this.options.disableSearch !== true) {
1198
+ // html += `
1199
+ // <input id='${this.elementId}_search' class='websy-dropdown-search' placeholder='${this.options.searchPlaceholder || 'Search'}'>
1200
+ // `
1201
+ // }
1202
+ // html += `
1203
+ // <div class='websy-dropdown-items'>
1204
+ // <ul id='${this.elementId}_items'>
1205
+ // </ul>
1206
+ // </div><!--
1207
+ // --><div class='websy-dropdown-custom'></div>
1208
+ // </div>
1209
+ // </div>
1210
+ // `
1211
+ // el.innerHTML = html
917
1212
 
918
- if (this.options.disableSearch !== true) {
919
- html += "\n <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n ");
920
- }
921
1213
 
922
- html += "\n <div class='websy-dropdown-items'>\n <ul id='".concat(this.elementId, "_items'> \n </ul>\n </div><!--\n --><div class='websy-dropdown-custom'></div>\n </div>\n </div>\n ");
923
- el.innerHTML = html;
924
1214
  this.renderItems();
925
1215
  }
926
1216
  }, {
927
1217
  key: "renderItems",
928
1218
  value: function renderItems() {
929
- var _this4 = this;
1219
+ var _this7 = this;
930
1220
 
931
1221
  var html = this.options.items.map(function (r, i) {
932
- return "\n <li data-index='".concat(i, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this4.selectedItems.indexOf(i) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n ");
1222
+ return "\n <li data-index='".concat(i, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this7.selectedItems.indexOf(i) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n ");
933
1223
  }).join('');
934
1224
  var el = document.getElementById("".concat(this.elementId, "_items"));
935
1225
 
@@ -948,7 +1238,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
948
1238
  }, {
949
1239
  key: "updateHeader",
950
1240
  value: function updateHeader(item) {
951
- var _this5 = this;
1241
+ var _this8 = this;
952
1242
 
953
1243
  var el = document.getElementById(this.elementId);
954
1244
  var headerEl = document.getElementById("".concat(this.elementId, "_header"));
@@ -986,23 +1276,25 @@ var WebsyDropdown = /*#__PURE__*/function () {
986
1276
 
987
1277
  if (labelEl) {
988
1278
  if (this.selectedItems.length === 1) {
989
- labelEl.innerHTML = item.label;
990
- labelEl.setAttribute('data-info', item.label);
991
- inputEl.value = item.value;
1279
+ if (item) {
1280
+ labelEl.innerHTML = item.label;
1281
+ labelEl.setAttribute('data-info', item.label);
1282
+ inputEl.value = item.value;
1283
+ }
992
1284
  } else if (this.selectedItems.length > 1) {
993
1285
  if (this.options.showCompleteSelectedList === true) {
994
1286
  var selectedLabels = this.selectedItems.map(function (s) {
995
- return _this5.options.items[s].label || _this5.options.items[s].value;
1287
+ return _this8.options.items[s].label || _this8.options.items[s].value;
996
1288
  }).join(this.options.multiValueDelimiter);
997
1289
  var selectedValues = this.selectedItems.map(function (s) {
998
- return _this5.options.items[s].value || _this5.options.items[s].label;
1290
+ return _this8.options.items[s].value || _this8.options.items[s].label;
999
1291
  }).join(this.options.multiValueDelimiter);
1000
1292
  labelEl.innerHTML = selectedLabels;
1001
1293
  labelEl.setAttribute('data-info', selectedLabels);
1002
1294
  inputEl.value = selectedValues;
1003
1295
  } else {
1004
1296
  var _selectedValues = this.selectedItems.map(function (s) {
1005
- return _this5.options.items[s].value || _this5.options.items[s].label;
1297
+ return _this8.options.items[s].value || _this8.options.items[s].label;
1006
1298
  }).join(this.options.multiValueDelimiter);
1007
1299
 
1008
1300
  labelEl.innerHTML = "".concat(this.selectedItems.length, " selected");
@@ -1108,12 +1400,9 @@ var WebsyForm = /*#__PURE__*/function () {
1108
1400
  var el = document.getElementById(elementId);
1109
1401
 
1110
1402
  if (el) {
1111
- if (this.options.classes) {
1112
- this.options.classes.forEach(function (c) {
1113
- return el.classList.add(c);
1114
- });
1115
- }
1116
-
1403
+ // if (this.options.classes) {
1404
+ // this.options.classes.forEach(c => el.classList.add(c))
1405
+ // }
1117
1406
  el.addEventListener('click', this.handleClick.bind(this));
1118
1407
  el.addEventListener('keyup', this.handleKeyUp.bind(this));
1119
1408
  el.addEventListener('keydown', this.handleKeyDown.bind(this));
@@ -1134,13 +1423,13 @@ var WebsyForm = /*#__PURE__*/function () {
1134
1423
  }, {
1135
1424
  key: "checkRecaptcha",
1136
1425
  value: function checkRecaptcha() {
1137
- var _this6 = this;
1426
+ var _this9 = this;
1138
1427
 
1139
1428
  return new Promise(function (resolve, reject) {
1140
- if (_this6.options.useRecaptcha === true) {
1141
- if (_this6.recaptchaValue) {
1142
- _this6.apiService.add('/google/checkrecaptcha', JSON.stringify({
1143
- grecaptcharesponse: _this6.recaptchaValue
1429
+ if (_this9.options.useRecaptcha === true) {
1430
+ if (_this9.recaptchaValue) {
1431
+ _this9.apiService.add('/google/checkrecaptcha', JSON.stringify({
1432
+ grecaptcharesponse: _this9.recaptchaValue
1144
1433
  })).then(function (response) {
1145
1434
  if (response.success && response.success === true) {
1146
1435
  resolve(true);
@@ -1198,14 +1487,14 @@ var WebsyForm = /*#__PURE__*/function () {
1198
1487
  }, {
1199
1488
  key: "processComponents",
1200
1489
  value: function processComponents(components, callbackFn) {
1201
- var _this7 = this;
1490
+ var _this10 = this;
1202
1491
 
1203
1492
  if (components.length === 0) {
1204
1493
  callbackFn();
1205
1494
  } else {
1206
1495
  components.forEach(function (c) {
1207
1496
  if (typeof WebsyDesigns[c.component] !== 'undefined') {
1208
- var comp = new WebsyDesigns[c.component]("".concat(_this7.elementId, "_input_").concat(c.field, "_component"), c.options);
1497
+ c.instance = new WebsyDesigns[c.component]("".concat(_this10.elementId, "_input_").concat(c.field, "_component"), c.options);
1209
1498
  } else {// some user feedback here
1210
1499
  }
1211
1500
  });
@@ -1226,27 +1515,27 @@ var WebsyForm = /*#__PURE__*/function () {
1226
1515
  }, {
1227
1516
  key: "render",
1228
1517
  value: function render(update, data) {
1229
- var _this8 = this;
1518
+ var _this11 = this;
1230
1519
 
1231
1520
  var el = document.getElementById(this.elementId);
1232
1521
  var componentsToProcess = [];
1233
1522
 
1234
1523
  if (el) {
1235
- var html = "\n <form id=\"".concat(this.elementId, "Form\">\n ");
1524
+ var html = "\n <form id=\"".concat(this.elementId, "Form\" class=\"").concat(this.options.classes || '', "\">\n ");
1236
1525
  this.options.fields.forEach(function (f, i) {
1237
1526
  if (f.component) {
1238
1527
  componentsToProcess.push(f);
1239
- 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(_this8.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n </div><!--\n ");
1528
+ 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(_this11.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n </div><!--\n ");
1240
1529
  } else if (f.type === 'longtext') {
1241
- 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(_this8.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 ");
1530
+ 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(_this11.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 ");
1242
1531
  } else {
1243
- 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(_this8.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 ");
1532
+ 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(_this11.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 ");
1244
1533
  }
1245
1534
  });
1246
- html += "\n --><button class=\"websy-btn submit ".concat(this.options.submit.classes, "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n ");
1535
+ html += "\n --><button class=\"websy-btn submit ".concat(this.options.submit.classes || '', "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n ");
1247
1536
 
1248
1537
  if (this.options.cancel) {
1249
- html += "\n --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes, "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n ");
1538
+ html += "\n --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes || '', "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n ");
1250
1539
  }
1251
1540
 
1252
1541
  html += " \n </form>\n <div id=\"".concat(this.elementId, "_validationFail\" class=\"websy-validation-failure\"></div>\n ");
@@ -1257,8 +1546,8 @@ var WebsyForm = /*#__PURE__*/function () {
1257
1546
 
1258
1547
  el.innerHTML = html;
1259
1548
  this.processComponents(componentsToProcess, function () {
1260
- if (_this8.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
1261
- _this8.recaptchaReady();
1549
+ if (_this11.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
1550
+ _this11.recaptchaReady();
1262
1551
  }
1263
1552
  });
1264
1553
  }
@@ -1266,7 +1555,7 @@ var WebsyForm = /*#__PURE__*/function () {
1266
1555
  }, {
1267
1556
  key: "submitForm",
1268
1557
  value: function submitForm() {
1269
- var _this9 = this;
1558
+ var _this12 = this;
1270
1559
 
1271
1560
  var formEl = document.getElementById("".concat(this.elementId, "Form"));
1272
1561
 
@@ -1280,22 +1569,22 @@ var WebsyForm = /*#__PURE__*/function () {
1280
1569
  data[key] = value;
1281
1570
  });
1282
1571
 
1283
- if (_this9.options.url) {
1284
- _this9.apiService.add(_this9.options.url, data).then(function (result) {
1285
- if (_this9.options.clearAfterSave === true) {
1572
+ if (_this12.options.url) {
1573
+ _this12.apiService.add(_this12.options.url, data).then(function (result) {
1574
+ if (_this12.options.clearAfterSave === true) {
1286
1575
  // this.render()
1287
1576
  formEl.reset();
1288
1577
  }
1289
1578
 
1290
- _this9.options.onSuccess.call(_this9, result);
1579
+ _this12.options.onSuccess.call(_this12, result);
1291
1580
  }, function (err) {
1292
1581
  console.log('Error submitting form data:', err);
1293
1582
 
1294
- _this9.options.onError.call(_this9, err);
1583
+ _this12.options.onError.call(_this12, err);
1295
1584
  });
1296
- } else if (_this9.options.submitFn) {
1297
- _this9.options.submitFn(data, function () {
1298
- if (_this9.options.clearAfterSave === true) {
1585
+ } else if (_this12.options.submitFn) {
1586
+ _this12.options.submitFn(data, function () {
1587
+ if (_this12.options.clearAfterSave === true) {
1299
1588
  // this.render()
1300
1589
  formEl.reset();
1301
1590
  }
@@ -1315,17 +1604,17 @@ var WebsyForm = /*#__PURE__*/function () {
1315
1604
  }, {
1316
1605
  key: "data",
1317
1606
  set: function set(d) {
1318
- var _this10 = this;
1607
+ var _this13 = this;
1319
1608
 
1320
1609
  if (!this.options.fields) {
1321
1610
  this.options.fields = [];
1322
1611
  }
1323
1612
 
1324
1613
  var _loop = function _loop(key) {
1325
- _this10.options.fields.forEach(function (f) {
1614
+ _this13.options.fields.forEach(function (f) {
1326
1615
  if (f.field === key) {
1327
1616
  f.value = d[key];
1328
- var el = document.getElementById("".concat(_this10.elementId, "_input_").concat(f.field));
1617
+ var el = document.getElementById("".concat(_this13.elementId, "_input_").concat(f.field));
1329
1618
  el.value = f.value;
1330
1619
  }
1331
1620
  });
@@ -1525,10 +1814,6 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
1525
1814
  html += this.renderBlock(this.options.items, 'main', 0);
1526
1815
  html += "</div>";
1527
1816
  el.innerHTML = html;
1528
-
1529
- if (this.options.navigator) {
1530
- this.options.navigator.registerElements(el);
1531
- }
1532
1817
  }
1533
1818
  }
1534
1819
  }, {
@@ -1624,6 +1909,122 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
1624
1909
 
1625
1910
  return WebsyNavigationMenu;
1626
1911
  }();
1912
+ /* global WebsyDesigns */
1913
+
1914
+
1915
+ var Pager = /*#__PURE__*/function () {
1916
+ function Pager(elementId, options) {
1917
+ var _this14 = this;
1918
+
1919
+ _classCallCheck(this, Pager);
1920
+
1921
+ this.elementId = elementId;
1922
+ var DEFAULTS = {
1923
+ pageSizePrefix: 'Show',
1924
+ pageSizeSuffix: 'rows',
1925
+ pageSizeOptions: [{
1926
+ label: '10',
1927
+ value: 10
1928
+ }, {
1929
+ label: '20',
1930
+ value: 20
1931
+ }, {
1932
+ label: '50',
1933
+ value: 50
1934
+ }, {
1935
+ label: '100',
1936
+ value: 100
1937
+ }],
1938
+ selectedPageSize: 20,
1939
+ pageLabel: 'Page',
1940
+ showPageSize: true,
1941
+ activePage: 0,
1942
+ pages: []
1943
+ };
1944
+ this.options = _extends({}, DEFAULTS, options);
1945
+ var el = document.getElementById(this.elementId);
1946
+
1947
+ if (el) {
1948
+ var html = "\n <div class=\"websy-pager-container\">\n ";
1949
+
1950
+ if (this.options.showPageSize === true) {
1951
+ html += "\n ".concat(this.options.pageSizePrefix, " <div id=\"").concat(this.elementId, "_pageSizeSelector\" class=\"websy-page-selector\"></div> ").concat(this.options.pageSizeSuffix, " \n ");
1952
+ }
1953
+
1954
+ html += "\n <ul id=\"".concat(this.elementId, "_pageList\" class=\"websy-page-list\"></ul> \n </div> \n ");
1955
+ el.innerHTML = html;
1956
+ el.addEventListener('click', this.handleClick.bind(this));
1957
+
1958
+ if (this.options.showPageSize === true) {
1959
+ this.pageSizeSelector = new WebsyDesigns.Dropdown("".concat(this.elementId, "_pageSizeSelector"), {
1960
+ selectedItems: [this.options.pageSizeOptions.indexOf(this.options.selectedPageSize)],
1961
+ items: this.pageSizeOptions.map(function (p) {
1962
+ return {
1963
+ label: p.toString(),
1964
+ value: p
1965
+ };
1966
+ }),
1967
+ allowClear: false,
1968
+ disableSearch: true,
1969
+ onItemSelected: function onItemSelected(selectedItem) {
1970
+ if (_this14.options.onChangePageSize) {
1971
+ _this14.options.onChangePageSize(selectedItem.value);
1972
+ }
1973
+ }
1974
+ });
1975
+ }
1976
+
1977
+ this.render();
1978
+ }
1979
+ }
1980
+
1981
+ _createClass(Pager, [{
1982
+ key: "handleClick",
1983
+ value: function handleClick(event) {
1984
+ if (event.target.classList.contains('websy-page-num')) {
1985
+ var pageNum = +event.target.getAttribute('data-index');
1986
+
1987
+ if (this.options.onSetPage) {
1988
+ this.options.onSetPage(this.options.pages[pageNum]);
1989
+ }
1990
+ }
1991
+ }
1992
+ }, {
1993
+ key: "render",
1994
+ value: function render() {
1995
+ var _this15 = this;
1996
+
1997
+ var el = document.getElementById("".concat(this.elementId, "_pageList"));
1998
+
1999
+ if (el) {
2000
+ var pages = this.options.pages.map(function (item, index) {
2001
+ return "<li data-index=\"".concat(index, "\" class=\"websy-page-num ").concat(_this15.options.activePage === index ? 'active' : '', "\">").concat(index + 1, "</li>");
2002
+ });
2003
+ var startIndex = 0;
2004
+
2005
+ if (this.options.pages.length > 8) {
2006
+ startIndex = Math.max(0, this.options.activePage - 4);
2007
+ pages = pages.splice(startIndex, 10);
2008
+
2009
+ if (startIndex > 0) {
2010
+ pages.splice(0, 0, "<li>".concat(this.options.pageLabel, "&nbsp;</li><li data-page=\"0\" class=\"websy-page-num\">First</li><li>...</li>"));
2011
+ } else {
2012
+ pages.splice(0, 0, "<li>".concat(this.options.pageLabel, "&nbsp;</li>"));
2013
+ }
2014
+
2015
+ if (this.options.activePage < this.options.pages.length - 1) {
2016
+ pages.push('<li>...</li>');
2017
+ pages.push("<li data-page=\"".concat(this.options.pages.length - 1, "\" class=\"websy-page-num\">Last</li>"));
2018
+ }
2019
+ }
2020
+
2021
+ el.innerHTML = pages.join('');
2022
+ }
2023
+ }
2024
+ }]);
2025
+
2026
+ return Pager;
2027
+ }();
1627
2028
  /* global WebsyDesigns Blob */
1628
2029
 
1629
2030
 
@@ -1665,58 +2066,58 @@ var WebsyPDFButton = /*#__PURE__*/function () {
1665
2066
  _createClass(WebsyPDFButton, [{
1666
2067
  key: "handleClick",
1667
2068
  value: function handleClick(event) {
1668
- var _this11 = this;
2069
+ var _this16 = this;
1669
2070
 
1670
2071
  if (event.target.classList.contains('websy-pdf-button')) {
1671
2072
  this.loader.show();
1672
2073
  setTimeout(function () {
1673
- if (_this11.options.targetId) {
1674
- var el = document.getElementById(_this11.options.targetId);
2074
+ if (_this16.options.targetId) {
2075
+ var el = document.getElementById(_this16.options.targetId);
1675
2076
 
1676
2077
  if (el) {
1677
2078
  var pdfData = {
1678
2079
  options: {}
1679
2080
  };
1680
2081
 
1681
- if (_this11.options.pdfOptions) {
1682
- pdfData.options = _extends({}, _this11.options.pdfOptions);
2082
+ if (_this16.options.pdfOptions) {
2083
+ pdfData.options = _extends({}, _this16.options.pdfOptions);
1683
2084
  }
1684
2085
 
1685
- if (_this11.options.header) {
1686
- if (_this11.options.header.elementId) {
1687
- var headerEl = document.getElementById(_this11.options.header.elementId);
2086
+ if (_this16.options.header) {
2087
+ if (_this16.options.header.elementId) {
2088
+ var headerEl = document.getElementById(_this16.options.header.elementId);
1688
2089
 
1689
2090
  if (headerEl) {
1690
2091
  pdfData.header = headerEl.outerHTML;
1691
2092
 
1692
- if (_this11.options.header.css) {
1693
- pdfData.options.headerCSS = _this11.options.header.css;
2093
+ if (_this16.options.header.css) {
2094
+ pdfData.options.headerCSS = _this16.options.header.css;
1694
2095
  }
1695
2096
  }
1696
- } else if (_this11.options.header.html) {
1697
- pdfData.header = _this11.options.header.html;
2097
+ } else if (_this16.options.header.html) {
2098
+ pdfData.header = _this16.options.header.html;
1698
2099
 
1699
- if (_this11.options.header.css) {
1700
- pdfData.options.headerCSS = _this11.options.header.css;
2100
+ if (_this16.options.header.css) {
2101
+ pdfData.options.headerCSS = _this16.options.header.css;
1701
2102
  }
1702
2103
  } else {
1703
- pdfData.header = _this11.options.header;
2104
+ pdfData.header = _this16.options.header;
1704
2105
  }
1705
2106
  }
1706
2107
 
1707
- if (_this11.options.footer) {
1708
- if (_this11.options.footer.elementId) {
1709
- var footerEl = document.getElementById(_this11.options.footer.elementId);
2108
+ if (_this16.options.footer) {
2109
+ if (_this16.options.footer.elementId) {
2110
+ var footerEl = document.getElementById(_this16.options.footer.elementId);
1710
2111
 
1711
2112
  if (footerEl) {
1712
2113
  pdfData.footer = footerEl.outerHTML;
1713
2114
 
1714
- if (_this11.options.footer.css) {
1715
- pdfData.options.footerCSS = _this11.options.footer.css;
2115
+ if (_this16.options.footer.css) {
2116
+ pdfData.options.footerCSS = _this16.options.footer.css;
1716
2117
  }
1717
2118
  }
1718
2119
  } else {
1719
- pdfData.footer = _this11.options.footer;
2120
+ pdfData.footer = _this16.options.footer;
1720
2121
  }
1721
2122
  }
1722
2123
 
@@ -1725,23 +2126,23 @@ var WebsyPDFButton = /*#__PURE__*/function () {
1725
2126
  // document.getElementById(`${this.elementId}_pdfFooter`).value = pdfData.footer
1726
2127
  // document.getElementById(`${this.elementId}_form`).submit()
1727
2128
 
1728
- _this11.service.add('', pdfData, {
2129
+ _this16.service.add('', pdfData, {
1729
2130
  responseType: 'blob'
1730
2131
  }).then(function (response) {
1731
- _this11.loader.hide();
2132
+ _this16.loader.hide();
1732
2133
 
1733
2134
  var blob = new Blob([response], {
1734
2135
  type: 'application/pdf'
1735
2136
  });
1736
2137
  var msg = "\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 ");
1737
2138
 
1738
- if (_this11.options.directDownload === true) {
1739
- msg += "download='".concat(_this11.options.fileName || 'Export', ".pdf'");
2139
+ if (_this16.options.directDownload === true) {
2140
+ msg += "download='".concat(_this16.options.fileName || 'Export', ".pdf'");
1740
2141
  }
1741
2142
 
1742
- msg += "\n >\n <button class='websy-btn download-pdf'>".concat(_this11.options.buttonText, "</button>\n </a>\n </div>\n ");
2143
+ msg += "\n >\n <button class='websy-btn download-pdf'>".concat(_this16.options.buttonText, "</button>\n </a>\n </div>\n ");
1743
2144
 
1744
- _this11.popup.show({
2145
+ _this16.popup.show({
1745
2146
  message: msg,
1746
2147
  mask: true
1747
2148
  });
@@ -1926,7 +2327,7 @@ var WebsyPubSub = /*#__PURE__*/function () {
1926
2327
 
1927
2328
  var WebsyResultList = /*#__PURE__*/function () {
1928
2329
  function WebsyResultList(elementId, options) {
1929
- var _this12 = this;
2330
+ var _this17 = this;
1930
2331
 
1931
2332
  _classCallCheck(this, WebsyResultList);
1932
2333
 
@@ -1954,9 +2355,9 @@ var WebsyResultList = /*#__PURE__*/function () {
1954
2355
 
1955
2356
  if (_typeof(options.template) === 'object' && options.template.url) {
1956
2357
  this.templateService.get(options.template.url).then(function (templateString) {
1957
- _this12.options.template = templateString;
2358
+ _this17.options.template = templateString;
1958
2359
 
1959
- _this12.render();
2360
+ _this17.render();
1960
2361
  });
1961
2362
  } else {
1962
2363
  this.render();
@@ -1975,7 +2376,7 @@ var WebsyResultList = /*#__PURE__*/function () {
1975
2376
  }, {
1976
2377
  key: "buildHTML",
1977
2378
  value: function buildHTML(d) {
1978
- var _this13 = this;
2379
+ var _this18 = this;
1979
2380
 
1980
2381
  var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
1981
2382
  var html = "";
@@ -1983,7 +2384,7 @@ var WebsyResultList = /*#__PURE__*/function () {
1983
2384
  if (this.options.template) {
1984
2385
  if (d.length > 0) {
1985
2386
  d.forEach(function (row, ix) {
1986
- var template = "".concat(ix > 0 ? '-->' : '').concat(_this13.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
2387
+ var template = "".concat(ix > 0 ? '-->' : '').concat(_this18.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
1987
2388
 
1988
2389
  var ifMatches = _toConsumableArray(template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g));
1989
2390
 
@@ -2103,7 +2504,7 @@ var WebsyResultList = /*#__PURE__*/function () {
2103
2504
  }, {
2104
2505
  key: "handleClick",
2105
2506
  value: function handleClick(event) {
2106
- var _this14 = this;
2507
+ var _this19 = this;
2107
2508
 
2108
2509
  if (event.target.classList.contains('clickable')) {
2109
2510
  var l = event.target.getAttribute('data-event');
@@ -2121,8 +2522,8 @@ var WebsyResultList = /*#__PURE__*/function () {
2121
2522
  l = l[0];
2122
2523
  params = params.map(function (p) {
2123
2524
  if (typeof p !== 'string' && typeof p !== 'number') {
2124
- if (_this14.rows[+id]) {
2125
- p = _this14.rows[+id][p];
2525
+ if (_this19.rows[+id]) {
2526
+ p = _this19.rows[+id][p];
2126
2527
  }
2127
2528
  } else if (typeof p === 'string') {
2128
2529
  p = p.replace(/"/g, '').replace(/'/g, '');
@@ -2144,13 +2545,13 @@ var WebsyResultList = /*#__PURE__*/function () {
2144
2545
  }, {
2145
2546
  key: "render",
2146
2547
  value: function render() {
2147
- var _this15 = this;
2548
+ var _this20 = this;
2148
2549
 
2149
2550
  if (this.options.entity) {
2150
2551
  this.apiService.get(this.options.entity).then(function (results) {
2151
- _this15.rows = results.rows;
2552
+ _this20.rows = results.rows;
2152
2553
 
2153
- _this15.resize();
2554
+ _this20.resize();
2154
2555
  });
2155
2556
  } else {
2156
2557
  this.resize();
@@ -2229,7 +2630,7 @@ var WebsyRouter = /*#__PURE__*/function () {
2229
2630
  _createClass(WebsyRouter, [{
2230
2631
  key: "addGroup",
2231
2632
  value: function addGroup(group) {
2232
- var _this16 = this;
2633
+ var _this21 = this;
2233
2634
 
2234
2635
  if (!this.groups[group]) {
2235
2636
  var els = document.querySelectorAll(".websy-view[data-group=\"".concat(group, "\"]"));
@@ -2237,7 +2638,7 @@ var WebsyRouter = /*#__PURE__*/function () {
2237
2638
  if (els) {
2238
2639
  console.log('els', els);
2239
2640
  this.getClosestParent(els[0], function (parent) {
2240
- _this16.groups[group] = {
2641
+ _this21.groups[group] = {
2241
2642
  activeView: '',
2242
2643
  views: [],
2243
2644
  parent: parent.getAttribute('data-view')
@@ -2558,12 +2959,12 @@ var WebsyRouter = /*#__PURE__*/function () {
2558
2959
  }, {
2559
2960
  key: "showComponents",
2560
2961
  value: function showComponents(view) {
2561
- var _this17 = this;
2962
+ var _this22 = this;
2562
2963
 
2563
2964
  if (this.options.views && this.options.views[view] && this.options.views[view].components) {
2564
2965
  this.options.views[view].components.forEach(function (c) {
2565
2966
  if (typeof c.instance === 'undefined') {
2566
- _this17.prepComponent(c.elementId, c.options);
2967
+ _this22.prepComponent(c.elementId, c.options);
2567
2968
 
2568
2969
  c.instance = new c.Component(c.elementId, c.options);
2569
2970
  } else if (c.instance.render) {
@@ -2930,7 +3331,7 @@ var Switch = /*#__PURE__*/function () {
2930
3331
 
2931
3332
  var WebsyTemplate = /*#__PURE__*/function () {
2932
3333
  function WebsyTemplate(elementId, options) {
2933
- var _this18 = this;
3334
+ var _this23 = this;
2934
3335
 
2935
3336
  _classCallCheck(this, WebsyTemplate);
2936
3337
 
@@ -2956,9 +3357,9 @@ var WebsyTemplate = /*#__PURE__*/function () {
2956
3357
 
2957
3358
  if (_typeof(options.template) === 'object' && options.template.url) {
2958
3359
  this.templateService.get(options.template.url).then(function (templateString) {
2959
- _this18.options.template = templateString;
3360
+ _this23.options.template = templateString;
2960
3361
 
2961
- _this18.render();
3362
+ _this23.render();
2962
3363
  });
2963
3364
  } else {
2964
3365
  this.render();
@@ -2968,7 +3369,7 @@ var WebsyTemplate = /*#__PURE__*/function () {
2968
3369
  _createClass(WebsyTemplate, [{
2969
3370
  key: "buildHTML",
2970
3371
  value: function buildHTML() {
2971
- var _this19 = this;
3372
+ var _this24 = this;
2972
3373
 
2973
3374
  var html = "";
2974
3375
 
@@ -3030,14 +3431,14 @@ var WebsyTemplate = /*#__PURE__*/function () {
3030
3431
  }
3031
3432
 
3032
3433
  if (polarity === true) {
3033
- if (typeof _this19.options.data[parts[0]] !== 'undefined' && _this19.options.data[parts[0]] === parts[1]) {
3434
+ if (typeof _this24.options.data[parts[0]] !== 'undefined' && _this24.options.data[parts[0]] === parts[1]) {
3034
3435
  // remove the <if> tags
3035
3436
  removeAll = false;
3036
3437
  } else if (parts[0] === parts[1]) {
3037
3438
  removeAll = false;
3038
3439
  }
3039
3440
  } else if (polarity === false) {
3040
- if (typeof _this19.options.data[parts[0]] !== 'undefined' && _this19.options.data[parts[0]] !== parts[1]) {
3441
+ if (typeof _this24.options.data[parts[0]] !== 'undefined' && _this24.options.data[parts[0]] !== parts[1]) {
3041
3442
  // remove the <if> tags
3042
3443
  removeAll = false;
3043
3444
  }
@@ -3264,10 +3665,10 @@ var WebsyUtils = {
3264
3665
  var s = '';
3265
3666
  var d = 1; // let out
3266
3667
 
3267
- for (var _i5 = 0; _i5 < ranges.length; _i5++) {
3268
- if (n >= ranges[_i5].divider) {
3269
- d = ranges[_i5].divider;
3270
- s = ranges[_i5].suffix; // out = (n / ranges[i].divider).toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')
3668
+ for (var _i6 = 0; _i6 < ranges.length; _i6++) {
3669
+ if (n >= ranges[_i6].divider) {
3670
+ d = ranges[_i6].divider;
3671
+ s = ranges[_i6].suffix; // out = (n / ranges[i].divider).toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')
3271
3672
 
3272
3673
  break;
3273
3674
  }
@@ -3305,7 +3706,7 @@ var WebsyUtils = {
3305
3706
 
3306
3707
  var WebsyTable = /*#__PURE__*/function () {
3307
3708
  function WebsyTable(elementId, options) {
3308
- var _this20 = this;
3709
+ var _this25 = this;
3309
3710
 
3310
3711
  _classCallCheck(this, WebsyTable);
3311
3712
 
@@ -3343,8 +3744,8 @@ var WebsyTable = /*#__PURE__*/function () {
3343
3744
  allowClear: false,
3344
3745
  disableSearch: true,
3345
3746
  onItemSelected: function onItemSelected(selectedItem) {
3346
- if (_this20.options.onChangePageSize) {
3347
- _this20.options.onChangePageSize(selectedItem.value);
3747
+ if (_this25.options.onChangePageSize) {
3748
+ _this25.options.onChangePageSize(selectedItem.value);
3348
3749
  }
3349
3750
  }
3350
3751
  });
@@ -3365,7 +3766,7 @@ var WebsyTable = /*#__PURE__*/function () {
3365
3766
  _createClass(WebsyTable, [{
3366
3767
  key: "appendRows",
3367
3768
  value: function appendRows(data) {
3368
- var _this21 = this;
3769
+ var _this26 = this;
3369
3770
 
3370
3771
  this.hideError();
3371
3772
  var bodyHTML = '';
@@ -3373,37 +3774,41 @@ var WebsyTable = /*#__PURE__*/function () {
3373
3774
  if (data) {
3374
3775
  bodyHTML += data.map(function (r, rowIndex) {
3375
3776
  return '<tr>' + r.map(function (c, i) {
3376
- if (_this21.options.columns[i].show !== false) {
3777
+ if (_this26.options.columns[i].show !== false) {
3377
3778
  var style = '';
3378
3779
 
3379
3780
  if (c.style) {
3380
3781
  style += c.style;
3381
3782
  }
3382
3783
 
3383
- if (_this21.options.columns[i].width) {
3384
- style += "width: ".concat(_this21.options.columns[i].width, "; ");
3784
+ if (_this26.options.columns[i].width) {
3785
+ style += "width: ".concat(_this26.options.columns[i].width, "; ");
3385
3786
  }
3386
3787
 
3387
3788
  if (c.backgroundColor) {
3388
3789
  style += "background-color: ".concat(c.backgroundColor, "; ");
3790
+
3791
+ if (!c.color) {
3792
+ style += "color: ".concat(WebsyDesigns.Utils.getLightDark(c.backgroundColor), "; ");
3793
+ }
3389
3794
  }
3390
3795
 
3391
3796
  if (c.color) {
3392
3797
  style += "color: ".concat(c.color, "; ");
3393
3798
  }
3394
3799
 
3395
- if (_this21.options.columns[i].showAsLink === true && c.value.trim() !== '') {
3396
- return "\n <td \n data-row-index='".concat(_this21.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this21.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(_this21.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this21.options.columns[i].linkText || c.value, "</a>\n </td>\n ");
3397
- } else if ((_this21.options.columns[i].showAsNavigatorLink === true || _this21.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
3398
- return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this21.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='trigger-item ").concat(_this21.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this21.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.displayText || _this21.options.columns[i].linkText || c.value, "</td>\n ");
3800
+ if (_this26.options.columns[i].showAsLink === true && c.value.trim() !== '') {
3801
+ return "\n <td \n data-row-index='".concat(_this26.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this26.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(_this26.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this26.options.columns[i].linkText || c.value, "</a>\n </td>\n ");
3802
+ } else if ((_this26.options.columns[i].showAsNavigatorLink === true || _this26.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
3803
+ return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this26.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='trigger-item ").concat(_this26.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this26.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.displayText || _this26.options.columns[i].linkText || c.value, "</td>\n ");
3399
3804
  } else {
3400
3805
  var info = c.value;
3401
3806
 
3402
- if (_this21.options.columns[i].showAsImage === true) {
3807
+ if (_this26.options.columns[i].showAsImage === true) {
3403
3808
  c.value = "\n <img src='".concat(c.value, "'>\n ");
3404
3809
  }
3405
3810
 
3406
- return "\n <td \n data-info='".concat(info, "' \n data-row-index='").concat(_this21.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this21.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.value, "</td>\n ");
3811
+ return "\n <td \n data-info='".concat(info, "' \n data-row-index='").concat(_this26.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this26.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.value, "</td>\n ");
3407
3812
  }
3408
3813
  }
3409
3814
  }).join('') + '</tr>';
@@ -3562,7 +3967,7 @@ var WebsyTable = /*#__PURE__*/function () {
3562
3967
  }, {
3563
3968
  key: "render",
3564
3969
  value: function render(data) {
3565
- var _this22 = this;
3970
+ var _this27 = this;
3566
3971
 
3567
3972
  if (!this.options.columns) {
3568
3973
  return;
@@ -3587,7 +3992,7 @@ var WebsyTable = /*#__PURE__*/function () {
3587
3992
 
3588
3993
  var headHTML = '<tr>' + this.options.columns.map(function (c, i) {
3589
3994
  if (c.show !== false) {
3590
- 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 ? _this22.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n </div>\n </th>\n ");
3995
+ 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 ? _this27.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n </div>\n </th>\n ");
3591
3996
  }
3592
3997
  }).join('') + '</tr>';
3593
3998
  var headEl = document.getElementById("".concat(this.elementId, "_head"));
@@ -3606,7 +4011,7 @@ var WebsyTable = /*#__PURE__*/function () {
3606
4011
 
3607
4012
  if (pagingEl) {
3608
4013
  var pages = new Array(this.options.pageCount).fill('').map(function (item, index) {
3609
- return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this22.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
4014
+ return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this27.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
3610
4015
  });
3611
4016
  var startIndex = 0;
3612
4017
 
@@ -3669,12 +4074,558 @@ var WebsyTable = /*#__PURE__*/function () {
3669
4074
 
3670
4075
  return WebsyTable;
3671
4076
  }();
4077
+ /* global WebsyDesigns */
4078
+
4079
+
4080
+ var WebsyTable2 = /*#__PURE__*/function () {
4081
+ function WebsyTable2(elementId, options) {
4082
+ var _this28 = this;
4083
+
4084
+ _classCallCheck(this, WebsyTable2);
4085
+
4086
+ var DEFAULTS = {
4087
+ pageSize: 20,
4088
+ paging: 'scroll',
4089
+ cellSize: 35,
4090
+ virtualScroll: false,
4091
+ leftColumns: 0
4092
+ };
4093
+ this.elementId = elementId;
4094
+ this.options = _extends({}, DEFAULTS, options);
4095
+ this.rowCount = 0;
4096
+ this.busy = false;
4097
+ this.tooltipTimeoutFn = null;
4098
+ this.data = [];
4099
+ var el = document.getElementById(this.elementId);
4100
+
4101
+ if (el) {
4102
+ var html = "\n <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', "'>\n <!--<div class=\"download-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n </div>-->\n <table id=\"").concat(this.elementId, "_table\"> \n <thead id=\"").concat(this.elementId, "_head\">\n </thead>\n <tbody id=\"").concat(this.elementId, "_body\">\n </tbody>\n <tfoot id=\"").concat(this.elementId, "_foot\">\n </tfoot>\n </table> \n <div id=\"").concat(this.elementId, "_errorContainer\" class='websy-vis-error-container'>\n <div>\n <div id=\"").concat(this.elementId, "_errorTitle\"></div>\n <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n </div> \n </div>\n <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n </div>\n <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n </div>\n <div id=\"").concat(this.elementId, "_dropdownContainer\"></div>\n <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n </div>\n ");
4103
+
4104
+ if (this.options.paging === 'pages') {
4105
+ html += "\n <div class=\"websy-table-paging-container\">\n Show <div id=\"".concat(this.elementId, "_pageSizeSelector\" class=\"websy-vis-page-selector\"></div> rows\n <ul id=\"").concat(this.elementId, "_pageList\" class=\"websy-vis-page-list\"></ul>\n </div>\n ");
4106
+ }
4107
+
4108
+ var pageOptions = [10, 20, 50, 100, 200];
4109
+ el.innerHTML = html;
4110
+
4111
+ if (this.options.paging === 'pages') {
4112
+ this.pageSizeSelector = new WebsyDesigns.Dropdown("".concat(this.elementId, "_pageSizeSelector"), {
4113
+ selectedItems: [pageOptions.indexOf(this.options.pageSize)],
4114
+ items: pageOptions.map(function (p) {
4115
+ return {
4116
+ label: p.toString(),
4117
+ value: p
4118
+ };
4119
+ }),
4120
+ allowClear: false,
4121
+ disableSearch: true,
4122
+ onItemSelected: function onItemSelected(selectedItem) {
4123
+ if (_this28.options.onChangePageSize) {
4124
+ _this28.options.onChangePageSize(selectedItem.value);
4125
+ }
4126
+ }
4127
+ });
4128
+ }
4129
+
4130
+ el.addEventListener('click', this.handleClick.bind(this));
4131
+ el.addEventListener('mouseout', this.handleMouseOut.bind(this));
4132
+ el.addEventListener('mousemove', this.handleMouseMove.bind(this));
4133
+ el.addEventListener('mousedown', this.handleMouseDown.bind(this));
4134
+ el.addEventListener('mouseup', this.handleMouseUp.bind(this));
4135
+ document.addEventListener('mouseup', this.handleGlobalMouseUp.bind(this));
4136
+ var scrollEl = document.getElementById("".concat(this.elementId, "_tableContainer"));
4137
+ scrollEl.addEventListener('scroll', this.handleScroll.bind(this));
4138
+ this.loadingDialog = new WebsyDesigns.LoadingDialog("".concat(this.elementId, "_loadingContainer"));
4139
+ this.render();
4140
+ } else {
4141
+ console.error("No element found with ID ".concat(this.elementId));
4142
+ }
4143
+ }
4144
+
4145
+ _createClass(WebsyTable2, [{
4146
+ key: "appendRows",
4147
+ value: function appendRows(data) {
4148
+ var _this29 = this;
4149
+
4150
+ this.hideError();
4151
+ var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
4152
+ var bodyHTML = '';
4153
+
4154
+ if (data) {
4155
+ bodyHTML += data.map(function (r, rowIndex) {
4156
+ return '<tr>' + r.map(function (c, i) {
4157
+ if (_this29.options.columns[i].show !== false) {
4158
+ var style = "height: ".concat(_this29.options.cellSize, "px; line-height: ").concat(_this29.options.cellSize, "px;");
4159
+
4160
+ if (c.style) {
4161
+ style += c.style;
4162
+ }
4163
+
4164
+ if (_this29.options.columns[i].width) {
4165
+ style += "width: ".concat(_this29.options.columns[i].width, "; ");
4166
+ }
4167
+
4168
+ if (c.backgroundColor) {
4169
+ style += "background-color: ".concat(c.backgroundColor, "; ");
4170
+
4171
+ if (!c.color) {
4172
+ style += "color: ".concat(WebsyDesigns.Utils.getLightDark(c.backgroundColor), "; ");
4173
+ }
4174
+ }
4175
+
4176
+ if (c.color) {
4177
+ style += "color: ".concat(c.color, "; ");
4178
+ }
4179
+
4180
+ if (_this29.options.columns[i].showAsLink === true && c.value.trim() !== '') {
4181
+ return "\n <td \n data-row-index='".concat(_this29.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this29.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(_this29.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this29.options.columns[i].linkText || c.value, "</a>\n </td>\n ");
4182
+ } else if ((_this29.options.columns[i].showAsNavigatorLink === true || _this29.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
4183
+ return "\n <td \n data-view='".concat(c.value, "' \n data-row-index='").concat(_this29.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='trigger-item ").concat(_this29.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this29.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.displayText || _this29.options.columns[i].linkText || c.value, "</td>\n ");
4184
+ } else {
4185
+ var info = c.value;
4186
+
4187
+ if (_this29.options.columns[i].showAsImage === true) {
4188
+ c.value = "\n <img src='".concat(c.value, "'>\n ");
4189
+ }
4190
+
4191
+ return "\n <td \n data-info='".concat(info, "' \n data-row-index='").concat(_this29.rowCount + rowIndex, "' \n data-col-index='").concat(i, "' \n class='").concat(_this29.options.columns[i].classes || '', "' \n style='").concat(style, "'\n colspan='").concat(c.colspan || 1, "'\n rowspan='").concat(c.rowspan || 1, "'\n >").concat(c.value, "</td>\n ");
4192
+ }
4193
+ }
4194
+ }).join('') + '</tr>';
4195
+ }).join('');
4196
+ this.data = this.data.concat(data);
4197
+ this.rowCount = this.data.length;
4198
+ }
4199
+
4200
+ bodyEl.innerHTML += bodyHTML;
4201
+
4202
+ if (this.options.virtualScroll === true) {
4203
+ // get height of the thead
4204
+ if (this.options.paging !== 'pages') {
4205
+ var headEl = document.getElementById("".concat(this.elementId, "_head"));
4206
+ var vScrollContainerEl = document.getElementById("".concat(this.elementId, "_vScrollContainer"));
4207
+ vScrollContainerEl.style.top = "".concat(headEl.clientHeight, "px");
4208
+ }
4209
+
4210
+ var hScrollContainerEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
4211
+ var left = 0;
4212
+ var cells = bodyEl.querySelectorAll("tr:first-of-type td");
4213
+
4214
+ for (var i = 0; i < this.options.leftColumns; i++) {
4215
+ left += cells[i].offsetWidth || cells[i].clientWidth;
4216
+ }
4217
+
4218
+ hScrollContainerEl.style.left = "".concat(left, "px");
4219
+ }
4220
+ }
4221
+ }, {
4222
+ key: "buildSearchIcon",
4223
+ value: function buildSearchIcon(columnIndex) {
4224
+ return "\n <div class=\"websy-table-search-icon\" data-col-index=\"".concat(columnIndex, "\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><title>ionicons-v5-f</title><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>\n </div>\n ");
4225
+ }
4226
+ }, {
4227
+ key: "handleClick",
4228
+ value: function handleClick(event) {
4229
+ if (event.target.classList.contains('download-button')) {
4230
+ window.viewManager.dataExportController.exportData(this.options.model);
4231
+ }
4232
+
4233
+ if (event.target.classList.contains('sortable-column')) {
4234
+ var colIndex = +event.target.getAttribute('data-index');
4235
+ var column = this.options.columns[colIndex];
4236
+
4237
+ if (this.options.onSort) {
4238
+ this.options.onSort(event, column, colIndex);
4239
+ } else {
4240
+ this.internalSort(column, colIndex);
4241
+ } // const colIndex = +event.target.getAttribute('data-index')
4242
+ // const dimIndex = +event.target.getAttribute('data-dim-index')
4243
+ // const expIndex = +event.target.getAttribute('data-exp-index')
4244
+ // const reverse = event.target.getAttribute('data-reverse') === 'true'
4245
+ // const patchDefs = [{
4246
+ // qOp: 'replace',
4247
+ // qPath: '/qHyperCubeDef/qInterColumnSortOrder',
4248
+ // qValue: JSON.stringify([colIndex])
4249
+ // }]
4250
+ // patchDefs.push({
4251
+ // qOp: 'replace',
4252
+ // qPath: `/qHyperCubeDef/${dimIndex > -1 ? 'qDimensions' : 'qMeasures'}/${dimIndex > -1 ? dimIndex : expIndex}/qDef/qReverseSort`,
4253
+ // qValue: JSON.stringify(reverse)
4254
+ // })
4255
+ // this.options.model.applyPatches(patchDefs) // .then(() => this.render())
4256
+
4257
+ } else if (event.target.classList.contains('websy-table-search-icon')) {
4258
+ // let field = event.target.getAttribute('data-field')
4259
+ // window.viewManager.views.global.objects[1].instance.show(field, { x: event.pageX, y: event.pageY }, () => {
4260
+ // event.target.classList.remove('active')
4261
+ // })
4262
+ var _colIndex2 = +event.target.getAttribute('data-col-index');
4263
+
4264
+ if (this.options.columns[_colIndex2].onSearch) {
4265
+ this.options.columns[_colIndex2].onSearch(event, this.options.columns[_colIndex2]);
4266
+ }
4267
+ } else if (event.target.classList.contains('clickable')) {
4268
+ var _colIndex3 = +event.target.getAttribute('data-col-index');
4269
+
4270
+ var rowIndex = +event.target.getAttribute('data-row-index');
4271
+
4272
+ if (this.options.onClick) {
4273
+ this.options.onClick(event, this.data[rowIndex][_colIndex3], this.data[rowIndex], this.options.columns[_colIndex3]);
4274
+ }
4275
+ } else if (event.target.classList.contains('websy-page-num')) {
4276
+ var pageNum = +event.target.getAttribute('data-page');
4277
+
4278
+ if (this.options.onSetPage) {
4279
+ this.options.onSetPage(pageNum);
4280
+ }
4281
+ }
4282
+ }
4283
+ }, {
4284
+ key: "handleMouseDown",
4285
+ value: function handleMouseDown(event) {
4286
+ if (event.target.classList.contains('websy-scroll-handle')) {
4287
+ this.scrolling = true;
4288
+ var el = document.getElementById(this.elementId);
4289
+ el.classList.add('scrolling');
4290
+ }
4291
+
4292
+ if (event.target.classList.contains('websy-scroll-handle-x')) {
4293
+ var handleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
4294
+ this.handleXStart = handleEl.offsetLeft;
4295
+ this.scrollXStart = event.clientX;
4296
+ this.scrollDirection = 'X';
4297
+ }
4298
+ }
4299
+ }, {
4300
+ key: "handleGlobalMouseUp",
4301
+ value: function handleGlobalMouseUp(event) {
4302
+ this.scrolling = false;
4303
+ var el = document.getElementById(this.elementId);
4304
+ el.classList.remove('scrolling');
4305
+ }
4306
+ }, {
4307
+ key: "handleMouseUp",
4308
+ value: function handleMouseUp(event) {
4309
+ this.scrolling = false;
4310
+ var el = document.getElementById(this.elementId);
4311
+ el.classList.remove('scrolling');
4312
+ }
4313
+ }, {
4314
+ key: "handleMouseMove",
4315
+ value: function handleMouseMove(event) {
4316
+ if (this.tooltipTimeoutFn) {
4317
+ event.target.classList.remove('websy-delayed-info');
4318
+ clearTimeout(this.tooltipTimeoutFn);
4319
+ }
4320
+
4321
+ if (event.target.tagName === 'TD') {
4322
+ this.tooltipTimeoutFn = setTimeout(function () {
4323
+ event.target.classList.add('websy-delayed-info');
4324
+ }, 500);
4325
+ }
4326
+
4327
+ if (this.scrolling === true && this.options.virtualScroll === true) {
4328
+ var tableContainerEl = document.getElementById("".concat(this.elementId, "_tableContainer"));
4329
+
4330
+ if (this.scrollDirection === 'X') {
4331
+ var handleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle")); // console.log(this.handleXStart + handleEl.offsetWidth + (event.clientX - this.scrollXStart), this.columnParameters.scrollableWidth)
4332
+
4333
+ var startPoint = 0;
4334
+
4335
+ if (this.handleXStart + (event.clientX - this.scrollXStart) < this.columnParameters.scrollableWidth - handleEl.offsetWidth) {
4336
+ handleEl.style.left = "".concat(this.handleXStart + (event.clientX - this.scrollXStart), "px");
4337
+ startPoint = this.handleXStart + (event.clientX - this.scrollXStart);
4338
+ } else {
4339
+ startPoint = this.columnParameters.scrollableWidth - handleEl.offsetWidth;
4340
+ }
4341
+
4342
+ if (this.handleXStart + (event.clientX - this.scrollXStart) < 0) {
4343
+ handleEl.style.left = 0;
4344
+ startPoint = 0;
4345
+ }
4346
+
4347
+ if (this.options.onScrollX) {
4348
+ this.options.onScrollX(startPoint);
4349
+ }
4350
+ }
4351
+ }
4352
+ }
4353
+ }, {
4354
+ key: "handleMouseOut",
4355
+ value: function handleMouseOut(event) {
4356
+ if (this.tooltipTimeoutFn) {
4357
+ event.target.classList.remove('websy-delayed-info');
4358
+ clearTimeout(this.tooltipTimeoutFn);
4359
+ }
4360
+ }
4361
+ }, {
4362
+ key: "handleScroll",
4363
+ value: function handleScroll(event) {
4364
+ if (this.options.onScroll && this.options.paging === 'scroll') {
4365
+ this.options.onScroll(event);
4366
+ }
4367
+ }
4368
+ }, {
4369
+ key: "hideError",
4370
+ value: function hideError() {
4371
+ var el = document.getElementById("".concat(this.elementId, "_tableContainer"));
4372
+
4373
+ if (el) {
4374
+ el.classList.remove('has-error');
4375
+ }
4376
+
4377
+ var tableEl = document.getElementById("".concat(this.elementId, "_table"));
4378
+ tableEl.classList.remove('hidden');
4379
+ var containerEl = document.getElementById("".concat(this.elementId, "_errorContainer"));
4380
+
4381
+ if (containerEl) {
4382
+ containerEl.classList.remove('active');
4383
+ }
4384
+ }
4385
+ }, {
4386
+ key: "hideLoading",
4387
+ value: function hideLoading() {
4388
+ this.loadingDialog.hide();
4389
+ }
4390
+ }, {
4391
+ key: "internalSort",
4392
+ value: function internalSort(column, colIndex) {
4393
+ this.options.columns.forEach(function (c, i) {
4394
+ c.activeSort = i === colIndex;
4395
+ });
4396
+
4397
+ if (column.sortFunction) {
4398
+ this.data = column.sortFunction(this.data, column);
4399
+ } else {
4400
+ var sortProp = 'value';
4401
+ var sortOrder = column.sort === 'asc' ? 'desc' : 'asc';
4402
+ column.sort = sortOrder;
4403
+ var sortType = column.sortType || 'alphanumeric';
4404
+
4405
+ if (column.sortProp) {
4406
+ sortProp = column.sortProp;
4407
+ }
4408
+
4409
+ this.data.sort(function (a, b) {
4410
+ switch (sortType) {
4411
+ case 'numeric':
4412
+ if (sortOrder === 'asc') {
4413
+ return a[colIndex][sortProp] - b[colIndex][sortProp];
4414
+ } else {
4415
+ return b[colIndex][sortProp] - a[colIndex][sortProp];
4416
+ }
4417
+
4418
+ default:
4419
+ if (sortOrder === 'asc') {
4420
+ return a[colIndex][sortProp] > b[colIndex][sortProp] ? 1 : -1;
4421
+ } else {
4422
+ return a[colIndex][sortProp] < b[colIndex][sortProp] ? 1 : -1;
4423
+ }
4424
+
4425
+ }
4426
+ });
4427
+ }
4428
+
4429
+ this.render(this.data);
4430
+ }
4431
+ }, {
4432
+ key: "render",
4433
+ value: function render(data) {
4434
+ var _this30 = this;
4435
+
4436
+ if (!this.options.columns) {
4437
+ return;
4438
+ }
4439
+
4440
+ this.hideError();
4441
+ this.data = [];
4442
+ this.rowCount = 0;
4443
+ var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
4444
+ bodyEl.innerHTML = '';
4445
+
4446
+ if (this.options.allowDownload === true) {
4447
+ // doesn't do anything yet
4448
+ var el = document.getElementById(this.elementId);
4449
+
4450
+ if (el) {
4451
+ el.classList.add('allow-download');
4452
+ } else {
4453
+ el.classList.remove('allow-download');
4454
+ }
4455
+ } // let colGroupHTML = this.options.columns.map(c => `<col style="${c.width ? 'width: ' + c.width : ''}"></col>`)
4456
+
4457
+
4458
+ var headHTML = '<tr>' + this.options.columns.map(function (c, i) {
4459
+ if (c.show !== false) {
4460
+ 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 ? _this30.buildSearchIcon(i) : '', "\n </div>\n </th>\n ");
4461
+ }
4462
+ }).join('') + '</tr>';
4463
+ var headEl = document.getElementById("".concat(this.elementId, "_head"));
4464
+ headEl.innerHTML = headHTML;
4465
+ var dropdownEl = document.getElementById("".concat(this.elementId, "_dropdownContainer"));
4466
+
4467
+ if (dropdownEl.innerHTML === '') {
4468
+ var dropdownHTML = "";
4469
+ this.options.columns.forEach(function (c, i) {
4470
+ if (c.searchable && c.searchField) {
4471
+ dropdownHTML += "\n <div id=\"".concat(_this30.elementId, "_columnSearch_").concat(i, "\" class=\"websy-modal-dropdown\"></div>\n ");
4472
+ }
4473
+ });
4474
+ dropdownEl.innerHTML = dropdownHTML;
4475
+ } // const colGroupEl = document.getElementById(`${this.elementId}_cols`)
4476
+ // colGroupEl.innerHTML = colGroupHTML
4477
+ // let footHTML = '<tr>' + this.options.columns.map((c, i) => {
4478
+ // if (c.show !== false) {
4479
+ // return `
4480
+ // <th></th>
4481
+ // `
4482
+ // }
4483
+ // }).join('') + '</tr>'
4484
+ // const footEl = document.getElementById(`${this.elementId}_foot`)
4485
+ // footEl.innerHTML = footHTML
4486
+
4487
+
4488
+ if (this.options.paging === 'pages') {
4489
+ var pagingEl = document.getElementById("".concat(this.elementId, "_pageList"));
4490
+
4491
+ if (pagingEl) {
4492
+ var pages = new Array(this.options.pageCount).fill('').map(function (item, index) {
4493
+ return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this30.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
4494
+ });
4495
+ var startIndex = 0;
4496
+
4497
+ if (this.options.pageCount > 8) {
4498
+ startIndex = Math.max(0, this.options.pageNum - 4);
4499
+ pages = pages.splice(startIndex, 10);
4500
+
4501
+ if (startIndex > 0) {
4502
+ pages.splice(0, 0, "<li>Page&nbsp;</li><li data-page=\"0\" class=\"websy-page-num\">First</li><li>...</li>");
4503
+ } else {
4504
+ pages.splice(0, 0, '<li>Page&nbsp;</li>');
4505
+ }
4506
+
4507
+ if (this.options.pageNum < this.options.pageCount - 1) {
4508
+ pages.push('<li>...</li>');
4509
+ pages.push("<li data-page=\"".concat(this.options.pageCount - 1, "\" class=\"websy-page-num\">Last</li>"));
4510
+ }
4511
+ }
4512
+
4513
+ pagingEl.innerHTML = pages.join('');
4514
+ }
4515
+ }
4516
+
4517
+ if (data) {
4518
+ this.appendRows(data);
4519
+ }
4520
+ }
4521
+ }, {
4522
+ key: "showError",
4523
+ value: function showError(options) {
4524
+ var el = document.getElementById("".concat(this.elementId, "_tableContainer"));
4525
+
4526
+ if (el) {
4527
+ el.classList.add('has-error');
4528
+ }
4529
+
4530
+ var tableEl = document.getElementById("".concat(this.elementId, "_table"));
4531
+ tableEl.classList.add('hidden');
4532
+ var containerEl = document.getElementById("".concat(this.elementId, "_errorContainer"));
4533
+
4534
+ if (containerEl) {
4535
+ containerEl.classList.add('active');
4536
+ }
4537
+
4538
+ if (options.title) {
4539
+ var titleEl = document.getElementById("".concat(this.elementId, "_errorTitle"));
4540
+
4541
+ if (titleEl) {
4542
+ titleEl.innerHTML = options.title;
4543
+ }
4544
+ }
4545
+
4546
+ if (options.message) {
4547
+ var messageEl = document.getElementById("".concat(this.elementId, "_errorMessage"));
4548
+
4549
+ if (messageEl) {
4550
+ messageEl.innerHTML = options.message;
4551
+ }
4552
+ }
4553
+ }
4554
+ }, {
4555
+ key: "setHorizontalScroll",
4556
+ value: function setHorizontalScroll(options) {
4557
+ var el = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
4558
+
4559
+ if (options.width) {
4560
+ el.style.width = "".concat(options.width, "px");
4561
+ }
4562
+ }
4563
+ }, {
4564
+ key: "setWidth",
4565
+ value: function setWidth(width) {
4566
+ var el = document.getElementById("".concat(this.elementId, "_table"));
4567
+
4568
+ if (el) {
4569
+ el.style.width = "".concat(width, "px");
4570
+ }
4571
+ }
4572
+ }, {
4573
+ key: "showLoading",
4574
+ value: function showLoading(options) {
4575
+ this.loadingDialog.show(options);
4576
+ }
4577
+ }, {
4578
+ key: "getColumnParameters",
4579
+ value: function getColumnParameters(values) {
4580
+ var _this31 = this;
4581
+
4582
+ var tableEl = document.getElementById("".concat(this.elementId, "_table"));
4583
+ tableEl.style.tableLayout = 'auto';
4584
+ tableEl.style.width = 'auto';
4585
+ var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
4586
+ bodyEl.innerHTML = '<tr>' + values.map(function (c) {
4587
+ return "\n <td \n style='height: ".concat(_this31.options.cellSize, "px; line-height: ").concat(_this31.options.cellSize, "px;'\n >").concat(c.value || '&nbsp;', "</td>\n ");
4588
+ }).join('') + '</tr>'; // get height of the first data cell
4589
+
4590
+ var cells = bodyEl.querySelectorAll("tr:first-of-type td");
4591
+ var tableContainerEl = document.getElementById("".concat(this.elementId, "_tableContainer"));
4592
+ var cellHeight = cells[0].offsetHeight || cells[0].clientHeight;
4593
+ var cellWidths = [];
4594
+ var nonScrollableWidth = 0;
4595
+
4596
+ for (var i = 0; i < cells.length; i++) {
4597
+ if (i < this.options.leftColumns) {
4598
+ nonScrollableWidth += values[i].width || cells[i].offsetWidth || cells[i].clientWidth;
4599
+ }
4600
+
4601
+ cellWidths.push(values[i].width || cells[i].offsetWidth || cells[i].clientWidth);
4602
+ } // const cellWidth = firstDataCell.offsetWidth || firstDataCell.clientWidth
4603
+ // tableEl.style.width = ''
4604
+
4605
+
4606
+ this.columnParameters = {
4607
+ cellHeight: cellHeight,
4608
+ cellWidths: cellWidths,
4609
+ availableHeight: tableContainerEl.offsetHeight || tableContainerEl.clientHeight,
4610
+ availableWidth: tableContainerEl.offsetWidth || tableContainerEl.clientWidth,
4611
+ nonScrollableWidth: nonScrollableWidth,
4612
+ scrollableWidth: (tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth
4613
+ };
4614
+ bodyEl.innerHTML = '';
4615
+ tableEl.style.tableLayout = '';
4616
+ tableEl.style.width = '';
4617
+ return this.columnParameters;
4618
+ }
4619
+ }]);
4620
+
4621
+ return WebsyTable2;
4622
+ }();
3672
4623
  /* global d3 include WebsyDesigns */
3673
4624
 
3674
4625
 
3675
4626
  var WebsyChart = /*#__PURE__*/function () {
3676
4627
  function WebsyChart(elementId, options) {
3677
- var _this23 = this;
4628
+ var _this32 = this;
3678
4629
 
3679
4630
  _classCallCheck(this, WebsyChart);
3680
4631
 
@@ -3722,22 +4673,22 @@ var WebsyChart = /*#__PURE__*/function () {
3722
4673
  this.invertOverride = function (input, input2) {
3723
4674
  var xAxis = 'bottomAxis';
3724
4675
 
3725
- if (_this23.options.orientation === 'horizontal') {
4676
+ if (_this32.options.orientation === 'horizontal') {
3726
4677
  xAxis = 'leftAxis';
3727
4678
  }
3728
4679
 
3729
- var width = _this23[xAxis].step();
4680
+ var width = _this32[xAxis].step();
3730
4681
 
3731
4682
  var output;
3732
4683
 
3733
- var domain = _toConsumableArray(_this23[xAxis].domain());
4684
+ var domain = _toConsumableArray(_this32[xAxis].domain());
3734
4685
 
3735
- if (_this23.options.orientation === 'horizontal') {
4686
+ if (_this32.options.orientation === 'horizontal') {
3736
4687
  domain = domain.reverse();
3737
4688
  }
3738
4689
 
3739
4690
  for (var j = 0; j < domain.length; j++) {
3740
- var breakA = _this23[xAxis](domain[j]) - width / 2;
4691
+ var breakA = _this32[xAxis](domain[j]) - width / 2;
3741
4692
  var breakB = breakA + width;
3742
4693
 
3743
4694
  if (input > breakA && input <= breakB) {
@@ -3837,10 +4788,10 @@ var WebsyChart = /*#__PURE__*/function () {
3837
4788
  }, {
3838
4789
  key: "handleEventMouseMove",
3839
4790
  value: function handleEventMouseMove(event, d) {
3840
- var _this24 = this;
4791
+ var _this33 = this;
3841
4792
 
3842
4793
  var bisectDate = d3.bisector(function (d) {
3843
- return _this24.parseX(d.x.value);
4794
+ return _this33.parseX(d.x.value);
3844
4795
  }).left;
3845
4796
 
3846
4797
  if (this.options.showTrackingLine === true && d3.pointer(event)) {
@@ -3879,8 +4830,8 @@ var WebsyChart = /*#__PURE__*/function () {
3879
4830
  }
3880
4831
 
3881
4832
  this.options.data.series.forEach(function (s) {
3882
- if (_this24.options.data[xData].scale !== 'Time') {
3883
- xPoint = _this24[xAxis](_this24.parseX(xLabel));
4833
+ if (_this33.options.data[xData].scale !== 'Time') {
4834
+ xPoint = _this33[xAxis](_this33.parseX(xLabel));
3884
4835
  s.data.forEach(function (d) {
3885
4836
  if (d.x.value === xLabel) {
3886
4837
  if (!d.y.color) {
@@ -3895,13 +4846,13 @@ var WebsyChart = /*#__PURE__*/function () {
3895
4846
  var pointA = s.data[index - 1];
3896
4847
  var pointB = s.data[index];
3897
4848
 
3898
- if (_this24.options.orientation === 'horizontal') {
4849
+ if (_this33.options.orientation === 'horizontal') {
3899
4850
  pointA = _toConsumableArray(s.data).reverse()[index - 1];
3900
4851
  pointB = _toConsumableArray(s.data).reverse()[index];
3901
4852
  }
3902
4853
 
3903
4854
  if (pointA && !pointB) {
3904
- xPoint = _this24[xAxis](_this24.parseX(pointA.x.value));
4855
+ xPoint = _this33[xAxis](_this33.parseX(pointA.x.value));
3905
4856
  tooltipTitle = pointA.x.value;
3906
4857
 
3907
4858
  if (!pointA.y.color) {
@@ -3911,12 +4862,12 @@ var WebsyChart = /*#__PURE__*/function () {
3911
4862
  tooltipData.push(pointA.y);
3912
4863
 
3913
4864
  if (typeof pointA.x.value.getTime !== 'undefined') {
3914
- tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointA.x.value);
4865
+ tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointA.x.value);
3915
4866
  }
3916
4867
  }
3917
4868
 
3918
4869
  if (pointB && !pointA) {
3919
- xPoint = _this24[xAxis](_this24.parseX(pointB.x.value));
4870
+ xPoint = _this33[xAxis](_this33.parseX(pointB.x.value));
3920
4871
  tooltipTitle = pointB.x.value;
3921
4872
 
3922
4873
  if (!pointB.y.color) {
@@ -3926,14 +4877,14 @@ var WebsyChart = /*#__PURE__*/function () {
3926
4877
  tooltipData.push(pointB.y);
3927
4878
 
3928
4879
  if (typeof pointB.x.value.getTime !== 'undefined') {
3929
- tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointB.x.value);
4880
+ tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointB.x.value);
3930
4881
  }
3931
4882
  }
3932
4883
 
3933
4884
  if (pointA && pointB) {
3934
- var d0 = _this24[xAxis](_this24.parseX(pointA.x.value));
4885
+ var d0 = _this33[xAxis](_this33.parseX(pointA.x.value));
3935
4886
 
3936
- var d1 = _this24[xAxis](_this24.parseX(pointB.x.value));
4887
+ var d1 = _this33[xAxis](_this33.parseX(pointB.x.value));
3937
4888
 
3938
4889
  var mid = Math.abs(d0 - d1) / 2;
3939
4890
 
@@ -3942,7 +4893,7 @@ var WebsyChart = /*#__PURE__*/function () {
3942
4893
  tooltipTitle = pointB.x.value;
3943
4894
 
3944
4895
  if (typeof pointB.x.value.getTime !== 'undefined') {
3945
- tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointB.x.value);
4896
+ tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointB.x.value);
3946
4897
  }
3947
4898
 
3948
4899
  if (!pointB.y.color) {
@@ -3955,7 +4906,7 @@ var WebsyChart = /*#__PURE__*/function () {
3955
4906
  tooltipTitle = pointA.x.value;
3956
4907
 
3957
4908
  if (typeof pointB.x.value.getTime !== 'undefined') {
3958
- tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointB.x.value);
4909
+ tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointB.x.value);
3959
4910
  }
3960
4911
 
3961
4912
  if (!pointA.y.color) {
@@ -4010,7 +4961,7 @@ var WebsyChart = /*#__PURE__*/function () {
4010
4961
  }
4011
4962
 
4012
4963
  this.tooltip.setHeight(this.plotHeight);
4013
- this.tooltip.show(tooltipTitle, tooltipHTML, posOptions); // }
4964
+ this.options.showTooltip && this.tooltip.show(tooltipTitle, tooltipHTML, posOptions); // }
4014
4965
  // else {
4015
4966
  // xPoint = x0
4016
4967
  // }
@@ -4060,7 +5011,7 @@ var WebsyChart = /*#__PURE__*/function () {
4060
5011
  }, {
4061
5012
  key: "render",
4062
5013
  value: function render(options) {
4063
- var _this25 = this;
5014
+ var _this34 = this;
4064
5015
 
4065
5016
  /* global d3 options */
4066
5017
  if (typeof options !== 'undefined') {
@@ -4129,7 +5080,7 @@ var WebsyChart = /*#__PURE__*/function () {
4129
5080
  var legendData = this.options.data.series.map(function (s, i) {
4130
5081
  return {
4131
5082
  value: s.label || s.key,
4132
- color: s.color || _this25.options.colors[i % _this25.options.colors.length]
5083
+ color: s.color || _this34.options.colors[i % _this34.options.colors.length]
4133
5084
  };
4134
5085
  });
4135
5086
 
@@ -4368,7 +5319,7 @@ var WebsyChart = /*#__PURE__*/function () {
4368
5319
 
4369
5320
  if (this.options.data.bottom.formatter) {
4370
5321
  bAxisFunc.tickFormat(function (d) {
4371
- return _this25.options.data.bottom.formatter(d);
5322
+ return _this34.options.data.bottom.formatter(d);
4372
5323
  });
4373
5324
  }
4374
5325
 
@@ -4395,8 +5346,8 @@ var WebsyChart = /*#__PURE__*/function () {
4395
5346
 
4396
5347
  if (this.options.margin.axisLeft > 0) {
4397
5348
  this.leftAxisLayer.call(d3.axisLeft(this.leftAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
4398
- if (_this25.options.data.left.formatter) {
4399
- d = _this25.options.data.left.formatter(d);
5349
+ if (_this34.options.data.left.formatter) {
5350
+ d = _this34.options.data.left.formatter(d);
4400
5351
  }
4401
5352
 
4402
5353
  return d;
@@ -4433,8 +5384,8 @@ var WebsyChart = /*#__PURE__*/function () {
4433
5384
 
4434
5385
  if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
4435
5386
  this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
4436
- if (_this25.options.data.right.formatter) {
4437
- d = _this25.options.data.right.formatter(d);
5387
+ if (_this34.options.data.right.formatter) {
5388
+ d = _this34.options.data.right.formatter(d);
4438
5389
  }
4439
5390
 
4440
5391
  return d;
@@ -4460,16 +5411,16 @@ var WebsyChart = /*#__PURE__*/function () {
4460
5411
 
4461
5412
  this.options.data.series.forEach(function (series, index) {
4462
5413
  if (!series.key) {
4463
- series.key = _this25.createIdentity();
5414
+ series.key = _this34.createIdentity();
4464
5415
  }
4465
5416
 
4466
5417
  if (!series.color) {
4467
- series.color = _this25.options.colors[index % _this25.options.colors.length];
5418
+ series.color = _this34.options.colors[index % _this34.options.colors.length];
4468
5419
  }
4469
5420
 
4470
- _this25["render".concat(series.type || 'bar')](series, index);
5421
+ _this34["render".concat(series.type || 'bar')](series, index);
4471
5422
 
4472
- _this25.renderLabels(series, index);
5423
+ _this34.renderLabels(series, index);
4473
5424
  });
4474
5425
  }
4475
5426
  }
@@ -4477,17 +5428,17 @@ var WebsyChart = /*#__PURE__*/function () {
4477
5428
  }, {
4478
5429
  key: "renderarea",
4479
5430
  value: function renderarea(series, index) {
4480
- var _this26 = this;
5431
+ var _this35 = this;
4481
5432
 
4482
5433
  /* global d3 series index */
4483
5434
  var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
4484
5435
  return d3.area().x(function (d) {
4485
- return _this26[xAxis](_this26.parseX(d.x.value));
5436
+ return _this35[xAxis](_this35.parseX(d.x.value));
4486
5437
  }).y0(function (d) {
4487
- return _this26[yAxis](0);
5438
+ return _this35[yAxis](0);
4488
5439
  }).y1(function (d) {
4489
- return _this26[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
4490
- }).curve(d3[curveStyle || _this26.options.curveStyle]);
5440
+ return _this35[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
5441
+ }).curve(d3[curveStyle || _this35.options.curveStyle]);
4491
5442
  };
4492
5443
 
4493
5444
  var xAxis = 'bottomAxis';
@@ -4565,7 +5516,7 @@ var WebsyChart = /*#__PURE__*/function () {
4565
5516
  return 0;
4566
5517
  }
4567
5518
  } else {
4568
- if (this.options.grouping === 'stacked') {
5519
+ if (this.options.grouping !== 'stacked') {
4569
5520
  return this[xAxis](this.parseX(d.x.value));
4570
5521
  } else {
4571
5522
  return this[xAxis](this.parseX(d.x.value)) + i * barWidth;
@@ -4575,7 +5526,7 @@ var WebsyChart = /*#__PURE__*/function () {
4575
5526
 
4576
5527
  function getBarY(d, i) {
4577
5528
  if (this.options.orientation === 'horizontal') {
4578
- if (this.options.grouping === 'stacked') {
5529
+ if (this.options.grouping !== 'stacked') {
4579
5530
  return this[xAxis](this.parseX(d.x.value));
4580
5531
  } else {
4581
5532
  return this[xAxis](this.parseX(d.x.value)) + (d.y.index || i) * barWidth;
@@ -4660,15 +5611,15 @@ var WebsyChart = /*#__PURE__*/function () {
4660
5611
  }, {
4661
5612
  key: "renderline",
4662
5613
  value: function renderline(series, index) {
4663
- var _this27 = this;
5614
+ var _this36 = this;
4664
5615
 
4665
5616
  /* global series index d3 */
4666
5617
  var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
4667
5618
  return d3.line().x(function (d) {
4668
- return _this27[xAxis](_this27.parseX(d.x.value));
5619
+ return _this36[xAxis](_this36.parseX(d.x.value));
4669
5620
  }).y(function (d) {
4670
- return _this27[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
4671
- }).curve(d3[curveStyle || _this27.options.curveStyle]);
5621
+ return _this36[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
5622
+ }).curve(d3[curveStyle || _this36.options.curveStyle]);
4672
5623
  };
4673
5624
 
4674
5625
  var xAxis = 'bottomAxis';
@@ -4706,14 +5657,14 @@ var WebsyChart = /*#__PURE__*/function () {
4706
5657
  }, {
4707
5658
  key: "rendersymbol",
4708
5659
  value: function rendersymbol(series, index) {
4709
- var _this28 = this;
5660
+ var _this37 = this;
4710
5661
 
4711
5662
  /* global d3 series index series.key */
4712
5663
  var drawSymbol = function drawSymbol(size) {
4713
5664
  return d3.symbol() // .type(d => {
4714
5665
  // return d3.symbols[0]
4715
5666
  // })
4716
- .size(size || _this28.options.symbolSize);
5667
+ .size(size || _this37.options.symbolSize);
4717
5668
  };
4718
5669
 
4719
5670
  var xAxis = 'bottomAxis';
@@ -4731,7 +5682,7 @@ var WebsyChart = /*#__PURE__*/function () {
4731
5682
  symbols.attr('d', function (d) {
4732
5683
  return drawSymbol(d.y.size || series.symbolSize)(d);
4733
5684
  }).transition(this.transition).attr('fill', 'white').attr('stroke', series.color).attr('transform', function (d) {
4734
- return "translate(".concat(_this28[xAxis](_this28.parseX(d.x.value)), ", ").concat(_this28[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
5685
+ return "translate(".concat(_this37[xAxis](_this37.parseX(d.x.value)), ", ").concat(_this37[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
4735
5686
  }); // Enter
4736
5687
 
4737
5688
  symbols.enter().append('path').attr('d', function (d) {
@@ -4740,7 +5691,7 @@ var WebsyChart = /*#__PURE__*/function () {
4740
5691
  .attr('fill', 'white').attr('stroke', series.color).attr('class', function (d) {
4741
5692
  return "symbol symbol_".concat(series.key);
4742
5693
  }).attr('transform', function (d) {
4743
- return "translate(".concat(_this28[xAxis](_this28.parseX(d.x.value)), ", ").concat(_this28[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
5694
+ return "translate(".concat(_this37[xAxis](_this37.parseX(d.x.value)), ", ").concat(_this37[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
4744
5695
  });
4745
5696
  }
4746
5697
  }, {
@@ -4895,7 +5846,7 @@ var WebsyLegend = /*#__PURE__*/function () {
4895
5846
  }, {
4896
5847
  key: "resize",
4897
5848
  value: function resize() {
4898
- var _this29 = this;
5849
+ var _this38 = this;
4899
5850
 
4900
5851
  var el = document.getElementById(this.elementId);
4901
5852
 
@@ -4908,7 +5859,7 @@ var WebsyLegend = /*#__PURE__*/function () {
4908
5859
  // }
4909
5860
  var html = "\n <div class='text-".concat(this.options.align, "'>\n ");
4910
5861
  html += this._data.map(function (d, i) {
4911
- return _this29.getLegendItemHTML(d);
5862
+ return _this38.getLegendItemHTML(d);
4912
5863
  }).join('');
4913
5864
  html += "\n <div>\n ";
4914
5865
  el.innerHTML = html;
@@ -5081,7 +6032,7 @@ var WebsyMap = /*#__PURE__*/function () {
5081
6032
  }, {
5082
6033
  key: "render",
5083
6034
  value: function render() {
5084
- var _this30 = this;
6035
+ var _this39 = this;
5085
6036
 
5086
6037
  var mapEl = document.getElementById("".concat(this.elementId, "_map"));
5087
6038
  var legendEl = document.getElementById("".concat(this.elementId, "_map"));
@@ -5090,7 +6041,7 @@ var WebsyMap = /*#__PURE__*/function () {
5090
6041
  var legendData = this.options.data.polygons.map(function (s, i) {
5091
6042
  return {
5092
6043
  value: s.label || s.key,
5093
- color: s.color || _this30.options.colors[i % _this30.options.colors.length]
6044
+ color: s.color || _this39.options.colors[i % _this39.options.colors.length]
5094
6045
  };
5095
6046
  });
5096
6047
  var longestValue = legendData.map(function (s) {
@@ -5154,7 +6105,7 @@ var WebsyMap = /*#__PURE__*/function () {
5154
6105
 
5155
6106
  if (this.polygons) {
5156
6107
  this.polygons.forEach(function (p) {
5157
- return _this30.map.removeLayer(p);
6108
+ return _this39.map.removeLayer(p);
5158
6109
  });
5159
6110
  }
5160
6111
 
@@ -5212,18 +6163,18 @@ var WebsyMap = /*#__PURE__*/function () {
5212
6163
  }
5213
6164
 
5214
6165
  if (!p.options.color) {
5215
- p.options.color = _this30.options.colors[i % _this30.options.colors.length];
6166
+ p.options.color = _this39.options.colors[i % _this39.options.colors.length];
5216
6167
  }
5217
6168
 
5218
6169
  var pol = L.polygon(p.data.map(function (c) {
5219
6170
  return c.map(function (d) {
5220
6171
  return [d.Latitude, d.Longitude];
5221
6172
  });
5222
- }), p.options).addTo(_this30.map);
6173
+ }), p.options).addTo(_this39.map);
5223
6174
 
5224
- _this30.polygons.push(pol);
6175
+ _this39.polygons.push(pol);
5225
6176
 
5226
- _this30.map.fitBounds(pol.getBounds());
6177
+ _this39.map.fitBounds(pol.getBounds());
5227
6178
  });
5228
6179
  } // if (this.data.markers.length > 0) {
5229
6180
  // el.classList.remove('hidden')
@@ -5355,7 +6306,9 @@ var WebsyDesigns = {
5355
6306
  WebsyRouter: WebsyRouter,
5356
6307
  Router: WebsyRouter,
5357
6308
  WebsyTable: WebsyTable,
6309
+ WebsyTable2: WebsyTable2,
5358
6310
  Table: WebsyTable,
6311
+ Table2: WebsyTable2,
5359
6312
  WebsyChart: WebsyChart,
5360
6313
  Chart: WebsyChart,
5361
6314
  WebsyChartTooltip: WebsyChartTooltip,
@@ -5372,6 +6325,7 @@ var WebsyDesigns = {
5372
6325
  Utils: WebsyUtils,
5373
6326
  ButtonGroup: ButtonGroup,
5374
6327
  WebsySwitch: Switch,
6328
+ Pager: Pager,
5375
6329
  Switch: Switch
5376
6330
  };
5377
6331
  WebsyDesigns.service = new WebsyDesigns.APIService('');
@@ -5393,6 +6347,3 @@ function usePayPal() {
5393
6347
  pps.src = '//www.paypal.com/sdk/js';
5394
6348
  document.getElementsByTagName('body')[0].appendChild(pps);
5395
6349
  }
5396
-
5397
- var _default = WebsyDesigns;
5398
- exports["default"] = _default;