@websy/websy-designs 1.7.0 → 1.7.2

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 (8) hide show
  1. package/dist/websy-designs-es6.debug.js +91 -24
  2. package/dist/websy-designs-es6.js +108 -25
  3. package/dist/websy-designs-es6.min.js +1 -1
  4. package/dist/websy-designs.debug.js +91 -24
  5. package/dist/websy-designs.js +108 -25
  6. package/dist/websy-designs.min.css +1 -1
  7. package/dist/websy-designs.min.js +1 -1
  8. package/package.json +1 -1
package/dist/websy-designs.debug.js CHANGED
@@ -2220,6 +2220,8 @@ class WebsyForm {
2220
2220
  // }
2221
2221
  el.addEventListener('change', this.handleChange.bind(this))
2222
2222
  el.addEventListener('click', this.handleClick.bind(this))
2223
+ el.addEventListener('beforeinput', this.handleBeforeInput.bind(this))
2224
+ el.addEventListener('input', this.handleInput.bind(this))
2223
2225
  el.addEventListener('focusout', this.handleFocusOut.bind(this))
2224
2226
  el.addEventListener('keyup', this.handleKeyUp.bind(this))
2225
2227
  el.addEventListener('keydown', this.handleKeyDown.bind(this))
@@ -2312,7 +2314,7 @@ class WebsyForm {
2312
2314
  let index = event.target.getAttribute('data-index')
2313
2315
  if (this.options.fields[index] && (this.options.fields[index].required || this.options.fields[index].validate)) {
2314
2316
  this.validateField(this.options.fields[index], event.target.value)
2315
- }
2317
+ }
2316
2318
  }
2317
2319
  }
2318
2320
  handleClick (event) {
@@ -2334,20 +2336,72 @@ class WebsyForm {
2334
2336
  }
2335
2337
  }
2336
2338
  handleKeyDown (event) {
2337
- if (event.key === 'enter') {
2339
+ if (event.key === 'enter' && this.options.submitOnEnter === true) {
2338
2340
  this.submitForm()
2339
2341
  }
2342
+ // if (event.target.getAttribute('data-user-type') === 'expiry') {
2343
+ // let isNumeric = !isNaN(event.key)
2344
+ // let validKey = false
2345
+ // if (!validKey) {
2346
+ // validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
2347
+ // }
2348
+ // if ((event.target.value.length === 5 && !validKey) || (!validKey && !isNumeric)) {
2349
+ // event.preventDefault()
2350
+ // return false
2351
+ // }
2352
+ // if (event.key === 'Backspace') {
2353
+ // if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
2354
+ // let chars = event.target.value.split('')
2355
+ // chars.pop()
2356
+ // event.target.value = chars.join('')
2357
+ // }
2358
+ // }
2359
+ // }
2360
+ // if (event.target.getAttribute('data-user-type') === 'cvv') {
2361
+ // let isNumeric = !isNaN(event.key)
2362
+ // let validKey = false
2363
+ // if (!validKey) {
2364
+ // validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
2365
+ // }
2366
+ // if ((event.target.value.length === 3 && !validKey) || (!validKey && !isNumeric)) {
2367
+ // event.preventDefault()
2368
+ // return false
2369
+ // }
2370
+ // }
2371
+ }
2372
+ handleKeyUp (event) {
2373
+ // if (event.target.getAttribute('data-user-type') === 'expiry') {
2374
+ // let chars = event.target.value.split('')
2375
+ // let isNumeric = !isNaN(event.key)
2376
+ // if (event.key === 'Backspace') {
2377
+ // if (chars[chars.length - 1] === '/' && chars.length !== 3) {
2378
+ // chars.pop()
2379
+ // event.target.value = chars.join('')
2380
+ // return
2381
+ // }
2382
+ // }
2383
+ // if (event.target.selectionStart === 2) {
2384
+ // if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
2385
+ // event.target.setSelectionRange(3, 3)
2386
+ // }
2387
+ // else if (isNumeric) {
2388
+ // event.target.value += '/'
2389
+ // }
2390
+ // }
2391
+ // }
2392
+ }
2393
+ handleBeforeInput (event) {
2340
2394
  if (event.target.getAttribute('data-user-type') === 'expiry') {
2341
- let isNumeric = !isNaN(event.key)
2395
+ let isNumeric = !isNaN(+event.data)
2342
2396
  let validKey = false
2343
2397
  if (!validKey) {
2344
- validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
2398
+ validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1
2345
2399
  }
2346
2400
  if ((event.target.value.length === 5 && !validKey) || (!validKey && !isNumeric)) {
2347
2401
  event.preventDefault()
2348
2402
  return false
2349
2403
  }
2350
- if (event.key === 'Backspace') {
2404
+ if (event.inputType === 'deleteContentBackward') {
2351
2405
  if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
2352
2406
  let chars = event.target.value.split('')
2353
2407
  chars.pop()
@@ -2356,10 +2410,10 @@ class WebsyForm {
2356
2410
  }
2357
2411
  }
2358
2412
  if (event.target.getAttribute('data-user-type') === 'cvv') {
2359
- let isNumeric = !isNaN(event.key)
2413
+ let isNumeric = !isNaN(+event.data)
2360
2414
  let validKey = false
2361
2415
  if (!validKey) {
2362
- validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
2416
+ validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1
2363
2417
  }
2364
2418
  if ((event.target.value.length === 3 && !validKey) || (!validKey && !isNumeric)) {
2365
2419
  event.preventDefault()
@@ -2367,10 +2421,10 @@ class WebsyForm {
2367
2421
  }
2368
2422
  }
2369
2423
  }
2370
- handleKeyUp (event) {
2424
+ handleInput (event) {
2371
2425
  if (event.target.getAttribute('data-user-type') === 'expiry') {
2372
2426
  let chars = event.target.value.split('')
2373
- let isNumeric = !isNaN(event.key)
2427
+ let isNumeric = !isNaN(+event.data)
2374
2428
  if (event.key === 'Backspace') {
2375
2429
  if (chars[chars.length - 1] === '/' && chars.length !== 3) {
2376
2430
  chars.pop()
@@ -2379,7 +2433,7 @@ class WebsyForm {
2379
2433
  }
2380
2434
  }
2381
2435
  if (event.target.selectionStart === 2) {
2382
- if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
2436
+ if (chars[2] && ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) === -1) {
2383
2437
  event.target.setSelectionRange(3, 3)
2384
2438
  }
2385
2439
  else if (isNumeric) {
@@ -2433,7 +2487,7 @@ class WebsyForm {
2433
2487
  if (f.component) {
2434
2488
  componentsToProcess.push(f)
2435
2489
  html += `
2436
- ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' class='websy-input-container ${f.classes || ''}'>
2490
+ ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' class='websy-input-container ${f.classes ? f.classes.join(' ') : ''}'>
2437
2491
  ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}${f.required === true ? '<span class="websy-form-required-value">*</span>' : ''}
2438
2492
  <div id='${this.elementId}_input_${f.field}_component' class='form-component'></div>
2439
2493
  <span id='${this.elementId}_${f.field}_error' class='websy-form-validation-error'></span>
@@ -2442,7 +2496,7 @@ class WebsyForm {
2442
2496
  }
2443
2497
  else if (f.type === 'longtext') {
2444
2498
  html += `
2445
- ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' class='websy-input-container ${f.classes || ''}'>
2499
+ ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' class='websy-input-container ${f.classes ? f.classes.join(' ') : ''}'>
2446
2500
  ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}${f.required === true ? '<span class="websy-form-required-value">*</span>' : ''}
2447
2501
  <textarea
2448
2502
  id="${this.elementId}_input_${f.field}"
@@ -2460,7 +2514,7 @@ class WebsyForm {
2460
2514
  }
2461
2515
  else {
2462
2516
  html += `
2463
- ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' class='websy-input-container ${f.classes || ''}'>
2517
+ ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' class='websy-input-container ${f.classes ? f.classes.join(' ') : ''}'>
2464
2518
  ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}${f.required === true ? '<span class="websy-form-required-value">*</span>' : ''}
2465
2519
  <input
2466
2520
  id="${this.elementId}_input_${f.field}"
@@ -2488,11 +2542,11 @@ class WebsyForm {
2488
2542
  `
2489
2543
  }
2490
2544
  html += `
2491
- --><button class="websy-btn submit ${this.options.submit.classes || ''}">${this.options.submit.text || 'Save'}</button>${this.options.cancel ? '<!--' : ''}
2545
+ --><button class="websy-btn submit ${this.options.submit.classes ? this.options.submit.classes.join(' ') : ''}">${this.options.submit.text || 'Save'}</button>${this.options.cancel ? '<!--' : ''}
2492
2546
  `
2493
2547
  if (this.options.cancel) {
2494
2548
  html += `
2495
- --><button class="websy-btn cancel ${this.options.cancel.classes || ''}">${this.options.cancel.text || 'Cancel'}</button>
2549
+ --><button class="websy-btn cancel ${this.options.cancel.classes ? this.options.cancel.classes.join(' ') : ''}">${this.options.cancel.text || 'Cancel'}</button>
2496
2550
  `
2497
2551
  }
2498
2552
  html += `
@@ -7706,6 +7760,9 @@ this.render()
7706
7760
  /* global d3 options WebsyUtils */
7707
7761
  if (typeof options !== 'undefined') {
7708
7762
  this.options = Object.assign({}, this.options, options)
7763
+ if (this.options.legendOptions) {
7764
+ this.legend.setOptions(this.options.legendOptions)
7765
+ }
7709
7766
  }
7710
7767
  if (!this.options.data) {
7711
7768
  // tell the user no data has been provided
@@ -7767,12 +7824,19 @@ else {
7767
7824
  }
7768
7825
  if (this.options.legendPosition === 'top' || this.options.legendPosition === 'bottom') {
7769
7826
  this.legendArea.style('width', '100%')
7827
+ if (this.legend.options.maxSize) {
7828
+ this.legendArea.style('height', `${this.legend.options.maxSize}px`)
7829
+ }
7770
7830
  this.legend.options.align = 'center'
7771
7831
  }
7772
7832
  if (this.options.legendPosition === 'left' || this.options.legendPosition === 'right') {
7833
+ let longestLegendValue = legendData.reduce((a, b) => a.length > (b.value || '').length ? a : b.value, '')
7773
7834
  this.legend.options.align = 'left'
7774
7835
  this.legendArea.style('height', '100%')
7775
- this.legendArea.style('width', this.legend.testWidth(d3.max(legendData.map(d => d.value))) + 'px')
7836
+ this.legendArea.style('width', this.legend.testWidth(longestLegendValue) + 'px')
7837
+ if (this.legend.options.maxSize) {
7838
+ this.legendArea.style('width', `${this.legend.options.maxSize}px`)
7839
+ }
7776
7840
  }
7777
7841
  this.legend.data = legendData
7778
7842
  let legendSize = this.legend.getSize()
@@ -7961,7 +8025,7 @@ else {
7961
8025
  this.brushBandPadding = this.totalBandPadding / this.options.data.left.data.length
7962
8026
  }
7963
8027
  plotable = this.plotHeight - this.totalBandPadding
7964
- noOfPoints = this.options.grouping === 'grouped' ? this.options.data.left.totalValueCount : this.options.data.left.data.length
8028
+ noOfPoints = this.options.grouping === 'grouped' && this.options.allowUnevenBands === true ? this.options.data.left.totalValueCount : this.options.data.left.data.length
7965
8029
  noOfGroups = this.options.data.left.data.length
7966
8030
  }
7967
8031
  else {
@@ -7978,7 +8042,7 @@ else {
7978
8042
  this.brushBandPadding = this.totalBandPadding / this.options.data.bottom.data.length
7979
8043
  }
7980
8044
  plotable = this.plotWidth - this.totalBandPadding
7981
- noOfPoints = this.options.grouping === 'grouped' ? this.options.data.bottom.totalValueCount : this.options.data.bottom.data.length
8045
+ noOfPoints = this.options.grouping === 'grouped' && this.options.allowUnevenBands === true ? this.options.data.bottom.totalValueCount : this.options.data.bottom.data.length
7982
8046
  noOfGroups = this.options.data.bottom.data.length
7983
8047
  }
7984
8048
  if (plotable / noOfPoints > this.options.maxBandWidth) {
@@ -8132,7 +8196,7 @@ else {
8132
8196
  let pos = i * proposedBandWidth
8133
8197
  this[`custom${customRangeSide}DetailRange`].push(start + adjustment + pos)
8134
8198
  }
8135
- acc += (this.options.grouping !== 'stacked' ? (d.valueCount || 1) : 1)
8199
+ acc += (this.options.grouping !== 'stacked' && this.options.allowUnevenBands === true ? (d.valueCount || 1) : 1)
8136
8200
  let end = (this.widthForCalc / noOfPoints) * acc
8137
8201
  // this.customBottomBrushRange.push((end + adjustment) * (this.plotWidth / this.widthForCalc))
8138
8202
  return end + adjustment
@@ -8140,7 +8204,7 @@ else {
8140
8204
  acc = 0
8141
8205
  this[`custom${customRangeSide}BrushRange`] = [0, ...this.options.data[customRangeSideLC].data.map((d, index, arr) => {
8142
8206
  let adjustment = (this.brushBandPadding * index) + this.brushBandPadding
8143
- acc += (this.options.grouping !== 'stacked' ? (d.valueCount || 1) : 1)
8207
+ acc += (this.options.grouping !== 'stacked' && this.options.allowUnevenBands === true ? (d.valueCount || 1) : 1)
8144
8208
  return ((this.options.orientation === 'vertical' ? this.plotWidth : this.plotHeight) / noOfPoints) * acc
8145
8209
  })]
8146
8210
  }
@@ -9119,8 +9183,8 @@ symbols.exit()
9119
9183
  symbols
9120
9184
  .attr('d', d => drawSymbol(d.y.size || series.symbolSize)(d))
9121
9185
  .transition(this.transition)
9122
- .attr('fill', series.fillSymbols ? series.color : 'white')
9123
- .attr('stroke', series.color)
9186
+ .attr('fill', d => series.fillSymbols ? d.y.color || series.color : 'white')
9187
+ .attr('stroke', d => d.y.color || series.color)
9124
9188
  .attr('transform', d => {
9125
9189
  // let adjustment = (this.options.data[xAxis].scale === 'Time' || this.options.data[xAxis].scale === 'Linear') ? 0 : this.options.data[xAxis].bandWidth / 2
9126
9190
  // if (this.options.orientation === 'horizontal') {
@@ -9148,8 +9212,8 @@ symbols.enter()
9148
9212
  .append('path')
9149
9213
  .attr('d', d => drawSymbol(d.y.size || series.symbolSize)(d))
9150
9214
  // .transition(this.transition)
9151
- .attr('fill', series.fillSymbols ? series.color : 'white')
9152
- .attr('stroke', series.color)
9215
+ .attr('fill', d => series.fillSymbols ? d.y.color || series.color : 'white')
9216
+ .attr('stroke', d => d.y.color || series.color)
9153
9217
  .attr('class', d => { return `symbol symbol_${series.key}` })
9154
9218
  .attr('transform', d => {
9155
9219
  let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
@@ -9390,6 +9454,9 @@ class WebsyLegend {
9390
9454
  el.innerHTML = html
9391
9455
  }
9392
9456
  }
9457
+ setOptions (options) {
9458
+ this.options = Object.assign({}, this.options, options)
9459
+ }
9393
9460
  testWidth (v) {
9394
9461
  let html = this.getLegendItemHTML({value: v})
9395
9462
  const el = document.createElement('div')
package/dist/websy-designs.js CHANGED
@@ -2511,6 +2511,8 @@ var WebsyForm = /*#__PURE__*/function () {
2511
2511
  // }
2512
2512
  el.addEventListener('change', this.handleChange.bind(this));
2513
2513
  el.addEventListener('click', this.handleClick.bind(this));
2514
+ el.addEventListener('beforeinput', this.handleBeforeInput.bind(this));
2515
+ el.addEventListener('input', this.handleInput.bind(this));
2514
2516
  el.addEventListener('focusout', this.handleFocusOut.bind(this));
2515
2517
  el.addEventListener('keyup', this.handleKeyUp.bind(this));
2516
2518
  el.addEventListener('keydown', this.handleKeyDown.bind(this));
@@ -2623,16 +2625,70 @@ var WebsyForm = /*#__PURE__*/function () {
2623
2625
  }, {
2624
2626
  key: "handleKeyDown",
2625
2627
  value: function handleKeyDown(event) {
2626
- if (event.key === 'enter') {
2628
+ if (event.key === 'enter' && this.options.submitOnEnter === true) {
2627
2629
  this.submitForm();
2628
- }
2630
+ } // if (event.target.getAttribute('data-user-type') === 'expiry') {
2631
+ // let isNumeric = !isNaN(event.key)
2632
+ // let validKey = false
2633
+ // if (!validKey) {
2634
+ // validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
2635
+ // }
2636
+ // if ((event.target.value.length === 5 && !validKey) || (!validKey && !isNumeric)) {
2637
+ // event.preventDefault()
2638
+ // return false
2639
+ // }
2640
+ // if (event.key === 'Backspace') {
2641
+ // if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
2642
+ // let chars = event.target.value.split('')
2643
+ // chars.pop()
2644
+ // event.target.value = chars.join('')
2645
+ // }
2646
+ // }
2647
+ // }
2648
+ // if (event.target.getAttribute('data-user-type') === 'cvv') {
2649
+ // let isNumeric = !isNaN(event.key)
2650
+ // let validKey = false
2651
+ // if (!validKey) {
2652
+ // validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1
2653
+ // }
2654
+ // if ((event.target.value.length === 3 && !validKey) || (!validKey && !isNumeric)) {
2655
+ // event.preventDefault()
2656
+ // return false
2657
+ // }
2658
+ // }
2629
2659
 
2660
+ }
2661
+ }, {
2662
+ key: "handleKeyUp",
2663
+ value: function handleKeyUp(event) {// if (event.target.getAttribute('data-user-type') === 'expiry') {
2664
+ // let chars = event.target.value.split('')
2665
+ // let isNumeric = !isNaN(event.key)
2666
+ // if (event.key === 'Backspace') {
2667
+ // if (chars[chars.length - 1] === '/' && chars.length !== 3) {
2668
+ // chars.pop()
2669
+ // event.target.value = chars.join('')
2670
+ // return
2671
+ // }
2672
+ // }
2673
+ // if (event.target.selectionStart === 2) {
2674
+ // if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
2675
+ // event.target.setSelectionRange(3, 3)
2676
+ // }
2677
+ // else if (isNumeric) {
2678
+ // event.target.value += '/'
2679
+ // }
2680
+ // }
2681
+ // }
2682
+ }
2683
+ }, {
2684
+ key: "handleBeforeInput",
2685
+ value: function handleBeforeInput(event) {
2630
2686
  if (event.target.getAttribute('data-user-type') === 'expiry') {
2631
- var isNumeric = !isNaN(event.key);
2687
+ var isNumeric = !isNaN(+event.data);
2632
2688
  var validKey = false;
2633
2689
 
2634
2690
  if (!validKey) {
2635
- validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1;
2691
+ validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1;
2636
2692
  }
2637
2693
 
2638
2694
  if (event.target.value.length === 5 && !validKey || !validKey && !isNumeric) {
@@ -2640,7 +2696,7 @@ var WebsyForm = /*#__PURE__*/function () {
2640
2696
  return false;
2641
2697
  }
2642
2698
 
2643
- if (event.key === 'Backspace') {
2699
+ if (event.inputType === 'deleteContentBackward') {
2644
2700
  if (event.target.value.indexOf('/') === event.target.selectionStart - 1) {
2645
2701
  var chars = event.target.value.split('');
2646
2702
  chars.pop();
@@ -2650,12 +2706,12 @@ var WebsyForm = /*#__PURE__*/function () {
2650
2706
  }
2651
2707
 
2652
2708
  if (event.target.getAttribute('data-user-type') === 'cvv') {
2653
- var _isNumeric = !isNaN(event.key);
2709
+ var _isNumeric = !isNaN(+event.data);
2654
2710
 
2655
2711
  var _validKey = false;
2656
2712
 
2657
2713
  if (!_validKey) {
2658
- _validKey = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].indexOf(event.key) !== -1;
2714
+ _validKey = ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) !== -1;
2659
2715
  }
2660
2716
 
2661
2717
  if (event.target.value.length === 3 && !_validKey || !_validKey && !_isNumeric) {
@@ -2665,11 +2721,11 @@ var WebsyForm = /*#__PURE__*/function () {
2665
2721
  }
2666
2722
  }
2667
2723
  }, {
2668
- key: "handleKeyUp",
2669
- value: function handleKeyUp(event) {
2724
+ key: "handleInput",
2725
+ value: function handleInput(event) {
2670
2726
  if (event.target.getAttribute('data-user-type') === 'expiry') {
2671
2727
  var chars = event.target.value.split('');
2672
- var isNumeric = !isNaN(event.key);
2728
+ var isNumeric = !isNaN(+event.data);
2673
2729
 
2674
2730
  if (event.key === 'Backspace') {
2675
2731
  if (chars[chars.length - 1] === '/' && chars.length !== 3) {
@@ -2680,7 +2736,7 @@ var WebsyForm = /*#__PURE__*/function () {
2680
2736
  }
2681
2737
 
2682
2738
  if (event.target.selectionStart === 2) {
2683
- if (chars[2] && ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].indexOf(event.key) === -1) {
2739
+ if (chars[2] && ['deleteContentBackward', 'deleteContentForward'].indexOf(event.inputType) === -1) {
2684
2740
  event.target.setSelectionRange(3, 3);
2685
2741
  } else if (isNumeric) {
2686
2742
  event.target.value += '/';
@@ -2743,11 +2799,11 @@ var WebsyForm = /*#__PURE__*/function () {
2743
2799
 
2744
2800
  if (f.component) {
2745
2801
  componentsToProcess.push(f);
2746
- html += "\n ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' class='websy-input-container ").concat(f.classes || '', "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n <div id='").concat(_this18.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n </div><!--\n ");
2802
+ html += "\n ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n <div id='").concat(_this18.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n </div><!--\n ");
2747
2803
  } else if (f.type === 'longtext') {
2748
- html += "\n ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' class='websy-input-container ").concat(f.classes || '', "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n <textarea\n id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n placeholder=\"").concat(f.placeholder || '', "\"\n data-user-type=\"").concat(f.type, "\"\n data-index=\"").concat(i, "\"\n name=\"").concat(f.field, "\" \n ").concat((f.attributes || []).join(' '), "\n class=\"websy-input websy-textarea\"\n ></textarea>\n <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n </div><!--\n ");
2804
+ html += "\n ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n <textarea\n id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n placeholder=\"").concat(f.placeholder || '', "\"\n data-user-type=\"").concat(f.type, "\"\n data-index=\"").concat(i, "\"\n name=\"").concat(f.field, "\" \n ").concat((f.attributes || []).join(' '), "\n class=\"websy-input websy-textarea\"\n ></textarea>\n <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n </div><!--\n ");
2749
2805
  } else {
2750
- html += "\n ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' class='websy-input-container ").concat(f.classes || '', "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n <input \n id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n type=\"").concat((f.type === 'expiry' ? 'text' : f.type === 'cvv' ? 'number' : f.type) || 'text', "\" \n data-user-type=\"").concat(f.type, "\"\n data-index=\"").concat(i, "\"\n class=\"websy-input\" \n ").concat((f.attributes || []).join(' '), "\n name=\"").concat(f.field, "\" \n placeholder=\"").concat(f.placeholder || '', "\"\n value=\"").concat(f.value || '', "\"\n valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n />\n <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n </div><!--\n ");
2806
+ html += "\n ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n <input \n id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n ").concat(f.required === true ? 'required' : '', " \n type=\"").concat((f.type === 'expiry' ? 'text' : f.type === 'cvv' ? 'number' : f.type) || 'text', "\" \n data-user-type=\"").concat(f.type, "\"\n data-index=\"").concat(i, "\"\n class=\"websy-input\" \n ").concat((f.attributes || []).join(' '), "\n name=\"").concat(f.field, "\" \n placeholder=\"").concat(f.placeholder || '', "\"\n value=\"").concat(f.value || '', "\"\n valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n />\n <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n </div><!--\n ");
2751
2807
  }
2752
2808
  });
2753
2809
 
@@ -2755,10 +2811,10 @@ var WebsyForm = /*#__PURE__*/function () {
2755
2811
  html += "\n --><div id='".concat(this.elementId, "_recaptcha' data-sitekey='").concat(ENVIRONMENT.RECAPTCHA_KEY, "' class='websy-form-recaptcha'></div>\n <div id='").concat(this.elementId, "_recaptchaError' class='websy-alert websy-alert-error websy-hidden'>Invalid recaptcha response</div><!--\n ");
2756
2812
  }
2757
2813
 
2758
- html += "\n --><button class=\"websy-btn submit ".concat(this.options.submit.classes || '', "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n ");
2814
+ html += "\n --><button class=\"websy-btn submit ".concat(this.options.submit.classes ? this.options.submit.classes.join(' ') : '', "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n ");
2759
2815
 
2760
2816
  if (this.options.cancel) {
2761
- html += "\n --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes || '', "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n ");
2817
+ html += "\n --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes ? this.options.cancel.classes.join(' ') : '', "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n ");
2762
2818
  }
2763
2819
 
2764
2820
  html += " \n </form>\n <div id=\"".concat(this.elementId, "_validationFail\" class=\"websy-validation-failure\"></div>\n ");
@@ -8521,6 +8577,10 @@ var WebsyChart = /*#__PURE__*/function () {
8521
8577
  /* global d3 options WebsyUtils */
8522
8578
  if (typeof options !== 'undefined') {
8523
8579
  this.options = _extends({}, this.options, options);
8580
+
8581
+ if (this.options.legendOptions) {
8582
+ this.legend.setOptions(this.options.legendOptions);
8583
+ }
8524
8584
  }
8525
8585
 
8526
8586
  if (!this.options.data) {// tell the user no data has been provided
@@ -8598,15 +8658,25 @@ var WebsyChart = /*#__PURE__*/function () {
8598
8658
 
8599
8659
  if (this.options.legendPosition === 'top' || this.options.legendPosition === 'bottom') {
8600
8660
  this.legendArea.style('width', '100%');
8661
+
8662
+ if (this.legend.options.maxSize) {
8663
+ this.legendArea.style('height', "".concat(this.legend.options.maxSize, "px"));
8664
+ }
8665
+
8601
8666
  this.legend.options.align = 'center';
8602
8667
  }
8603
8668
 
8604
8669
  if (this.options.legendPosition === 'left' || this.options.legendPosition === 'right') {
8670
+ var longestLegendValue = legendData.reduce(function (a, b) {
8671
+ return a.length > (b.value || '').length ? a : b.value;
8672
+ }, '');
8605
8673
  this.legend.options.align = 'left';
8606
8674
  this.legendArea.style('height', '100%');
8607
- this.legendArea.style('width', this.legend.testWidth(d3.max(legendData.map(function (d) {
8608
- return d.value;
8609
- }))) + 'px');
8675
+ this.legendArea.style('width', this.legend.testWidth(longestLegendValue) + 'px');
8676
+
8677
+ if (this.legend.options.maxSize) {
8678
+ this.legendArea.style('width', "".concat(this.legend.options.maxSize, "px"));
8679
+ }
8610
8680
  }
8611
8681
 
8612
8682
  this.legend.data = legendData;
@@ -8827,7 +8897,7 @@ var WebsyChart = /*#__PURE__*/function () {
8827
8897
  }
8828
8898
 
8829
8899
  plotable = this.plotHeight - this.totalBandPadding;
8830
- noOfPoints = this.options.grouping === 'grouped' ? this.options.data.left.totalValueCount : this.options.data.left.data.length;
8900
+ noOfPoints = this.options.grouping === 'grouped' && this.options.allowUnevenBands === true ? this.options.data.left.totalValueCount : this.options.data.left.data.length;
8831
8901
  noOfGroups = this.options.data.left.data.length;
8832
8902
  } else {
8833
8903
  this.options.data.bottom.totalValueCount = this.options.data.bottom.data.reduce(function (a, b) {
@@ -8846,7 +8916,7 @@ var WebsyChart = /*#__PURE__*/function () {
8846
8916
  }
8847
8917
 
8848
8918
  plotable = this.plotWidth - this.totalBandPadding;
8849
- noOfPoints = this.options.grouping === 'grouped' ? this.options.data.bottom.totalValueCount : this.options.data.bottom.data.length;
8919
+ noOfPoints = this.options.grouping === 'grouped' && this.options.allowUnevenBands === true ? this.options.data.bottom.totalValueCount : this.options.data.bottom.data.length;
8850
8920
  noOfGroups = this.options.data.bottom.data.length;
8851
8921
  }
8852
8922
 
@@ -8977,7 +9047,7 @@ var WebsyChart = /*#__PURE__*/function () {
8977
9047
  _this49["custom".concat(customRangeSide, "DetailRange")].push(start + adjustment + pos);
8978
9048
  }
8979
9049
 
8980
- acc += _this49.options.grouping !== 'stacked' ? d.valueCount || 1 : 1;
9050
+ acc += _this49.options.grouping !== 'stacked' && _this49.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
8981
9051
  var end = _this49.widthForCalc / noOfPoints * acc; // this.customBottomBrushRange.push((end + adjustment) * (this.plotWidth / this.widthForCalc))
8982
9052
 
8983
9053
  return end + adjustment;
@@ -8985,7 +9055,7 @@ var WebsyChart = /*#__PURE__*/function () {
8985
9055
  acc = 0;
8986
9056
  this["custom".concat(customRangeSide, "BrushRange")] = [0].concat(_toConsumableArray(this.options.data[customRangeSideLC].data.map(function (d, index, arr) {
8987
9057
  var adjustment = _this49.brushBandPadding * index + _this49.brushBandPadding;
8988
- acc += _this49.options.grouping !== 'stacked' ? d.valueCount || 1 : 1;
9058
+ acc += _this49.options.grouping !== 'stacked' && _this49.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
8989
9059
  return (_this49.options.orientation === 'vertical' ? _this49.plotWidth : _this49.plotHeight) / noOfPoints * acc;
8990
9060
  })));
8991
9061
  } // }
@@ -9909,7 +9979,11 @@ var WebsyChart = /*#__PURE__*/function () {
9909
9979
 
9910
9980
  symbols.attr('d', function (d) {
9911
9981
  return drawSymbol(d.y.size || series.symbolSize)(d);
9912
- }).transition(this.transition).attr('fill', series.fillSymbols ? series.color : 'white').attr('stroke', series.color).attr('transform', function (d) {
9982
+ }).transition(this.transition).attr('fill', function (d) {
9983
+ return series.fillSymbols ? d.y.color || series.color : 'white';
9984
+ }).attr('stroke', function (d) {
9985
+ return d.y.color || series.color;
9986
+ }).attr('transform', function (d) {
9913
9987
  // let adjustment = (this.options.data[xAxis].scale === 'Time' || this.options.data[xAxis].scale === 'Linear') ? 0 : this.options.data[xAxis].bandWidth / 2
9914
9988
  // if (this.options.orientation === 'horizontal') {
9915
9989
  // return `translate(${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)}, ${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment})`
@@ -9938,7 +10012,11 @@ var WebsyChart = /*#__PURE__*/function () {
9938
10012
  symbols.enter().append('path').attr('d', function (d) {
9939
10013
  return drawSymbol(d.y.size || series.symbolSize)(d);
9940
10014
  }) // .transition(this.transition)
9941
- .attr('fill', series.fillSymbols ? series.color : 'white').attr('stroke', series.color).attr('class', function (d) {
10015
+ .attr('fill', function (d) {
10016
+ return series.fillSymbols ? d.y.color || series.color : 'white';
10017
+ }).attr('stroke', function (d) {
10018
+ return d.y.color || series.color;
10019
+ }).attr('class', function (d) {
9942
10020
  return "symbol symbol_".concat(series.key);
9943
10021
  }).attr('transform', function (d) {
9944
10022
  var xIndex = _this55[xAxis + 'Axis'].domain().indexOf(d.x.value);
@@ -10196,6 +10274,11 @@ var WebsyLegend = /*#__PURE__*/function () {
10196
10274
  el.innerHTML = html;
10197
10275
  }
10198
10276
  }
10277
+ }, {
10278
+ key: "setOptions",
10279
+ value: function setOptions(options) {
10280
+ this.options = _extends({}, this.options, options);
10281
+ }
10199
10282
  }, {
10200
10283
  key: "testWidth",
10201
10284
  value: function testWidth(v) {