@biggive/components 202303061752.0.0 → 202303171148.0.0

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.
@@ -1102,6 +1102,12 @@ const BiggiveTippingSlider = class {
1102
1102
  this.donationAmount = undefined;
1103
1103
  this.donationCurrency = undefined;
1104
1104
  }
1105
+ format(currencyCode, amount) {
1106
+ return Intl.NumberFormat('en-GB', {
1107
+ style: 'currency',
1108
+ currency: currencyCode,
1109
+ }).format(amount);
1110
+ }
1105
1111
  componentDidRender() {
1106
1112
  var _a, _b;
1107
1113
  var isMoving = false;
@@ -1113,14 +1119,22 @@ const BiggiveTippingSlider = class {
1113
1119
  var _a;
1114
1120
  if (isMoving) {
1115
1121
  const max = bar.offsetWidth - handle.offsetWidth;
1116
- const pageX = e instanceof TouchEvent ? (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX : e.pageX;
1122
+ let pageX;
1123
+ if (window.TouchEvent && e instanceof TouchEvent) {
1124
+ pageX = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX;
1125
+ }
1126
+ else {
1127
+ // we Know e is a MouseEvent because all platforms that supports TouchEvent would also have
1128
+ // a truthy window.TouchEvent - see https://stackoverflow.com/a/32882849/2803757
1129
+ pageX = e.pageX;
1130
+ }
1117
1131
  if (typeof pageX != 'undefined') {
1118
1132
  const mousePos = pageX - bar.offsetLeft - handle.offsetWidth / 2;
1119
1133
  const position = mousePos > max ? max : mousePos < 0 ? 0 : mousePos;
1120
1134
  const percentage = (position / max) * this.percentageEnd;
1121
1135
  const donation = Math.round(this.donationAmount * (percentage / 100));
1122
1136
  percentageWrap.innerHTML = Math.round(percentage).toString();
1123
- donationWrap.innerHTML = Math.round(donation).toString();
1137
+ donationWrap.innerHTML = this.format(this.donationCurrency, donation);
1124
1138
  handle.style.marginLeft = position + 'px';
1125
1139
  }
1126
1140
  }
@@ -1147,7 +1161,8 @@ const BiggiveTippingSlider = class {
1147
1161
  });
1148
1162
  }
1149
1163
  render() {
1150
- return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", { class: "bar" }, index.h("div", { class: "handle", id: "handle" }, index.h("div", { class: "tooltip" }, index.h("span", { class: "donation" }, this.donationCurrency, index.h("span", { class: "donation-value" }, "0")), "\u00A0", index.h("span", { class: "percentage" }, "(", index.h("span", { class: "percentage-value" }, "0"), "%)")))), index.h("div", { class: "labels" }, index.h("div", { class: "label-start" }, this.percentageStart, "%"), index.h("div", { class: "label-end" }, this.percentageEnd, "%")), index.h("div", { class: "reset" }, index.h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
1164
+ const currencyFormatted = this.format(this.donationCurrency, 0);
1165
+ return (index.h("div", { class: 'container space-below-' + this.spaceBelow }, index.h("div", { class: "bar" }, index.h("div", { class: "handle", id: "handle" }, index.h("div", { class: "tooltip" }, index.h("span", { class: "donation" }, index.h("span", { class: "donation-value" }, currencyFormatted)), "\u00A0", index.h("span", { class: "percentage" }, "(", index.h("span", { class: "percentage-value" }, "0"), "%)")))), index.h("div", { class: "labels" }, index.h("div", { class: "label-start" }, this.percentageStart, "%"), index.h("div", { class: "label-end" }, this.percentageEnd, "%")), index.h("div", { class: "reset" }, index.h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
1151
1166
  }
1152
1167
  get host() { return index.getElement(this); }
1153
1168
  };
@@ -17,6 +17,12 @@ export class BiggiveTippingSlider {
17
17
  this.donationAmount = undefined;
18
18
  this.donationCurrency = undefined;
19
19
  }
20
+ format(currencyCode, amount) {
21
+ return Intl.NumberFormat('en-GB', {
22
+ style: 'currency',
23
+ currency: currencyCode,
24
+ }).format(amount);
25
+ }
20
26
  componentDidRender() {
21
27
  var _a, _b;
22
28
  var isMoving = false;
@@ -28,14 +34,22 @@ export class BiggiveTippingSlider {
28
34
  var _a;
29
35
  if (isMoving) {
30
36
  const max = bar.offsetWidth - handle.offsetWidth;
31
- const pageX = e instanceof TouchEvent ? (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX : e.pageX;
37
+ let pageX;
38
+ if (window.TouchEvent && e instanceof TouchEvent) {
39
+ pageX = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX;
40
+ }
41
+ else {
42
+ // we Know e is a MouseEvent because all platforms that supports TouchEvent would also have
43
+ // a truthy window.TouchEvent - see https://stackoverflow.com/a/32882849/2803757
44
+ pageX = e.pageX;
45
+ }
32
46
  if (typeof pageX != 'undefined') {
33
47
  const mousePos = pageX - bar.offsetLeft - handle.offsetWidth / 2;
34
48
  const position = mousePos > max ? max : mousePos < 0 ? 0 : mousePos;
35
49
  const percentage = (position / max) * this.percentageEnd;
36
50
  const donation = Math.round(this.donationAmount * (percentage / 100));
37
51
  percentageWrap.innerHTML = Math.round(percentage).toString();
38
- donationWrap.innerHTML = Math.round(donation).toString();
52
+ donationWrap.innerHTML = this.format(this.donationCurrency, donation);
39
53
  handle.style.marginLeft = position + 'px';
40
54
  }
41
55
  }
@@ -62,7 +76,8 @@ export class BiggiveTippingSlider {
62
76
  });
63
77
  }
64
78
  render() {
65
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "bar" }, h("div", { class: "handle", id: "handle" }, h("div", { class: "tooltip" }, h("span", { class: "donation" }, this.donationCurrency, h("span", { class: "donation-value" }, "0")), "\u00A0", h("span", { class: "percentage" }, "(", h("span", { class: "percentage-value" }, "0"), "%)")))), h("div", { class: "labels" }, h("div", { class: "label-start" }, this.percentageStart, "%"), h("div", { class: "label-end" }, this.percentageEnd, "%")), h("div", { class: "reset" }, h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
79
+ const currencyFormatted = this.format(this.donationCurrency, 0);
80
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "bar" }, h("div", { class: "handle", id: "handle" }, h("div", { class: "tooltip" }, h("span", { class: "donation" }, h("span", { class: "donation-value" }, currencyFormatted)), "\u00A0", h("span", { class: "percentage" }, "(", h("span", { class: "percentage-value" }, "0"), "%)")))), h("div", { class: "labels" }, h("div", { class: "label-start" }, this.percentageStart, "%"), h("div", { class: "label-end" }, this.percentageEnd, "%")), h("div", { class: "reset" }, h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
66
81
  }
67
82
  static get is() { return "biggive-tipping-slider"; }
68
83
  static get encapsulation() { return "shadow"; }
@@ -179,15 +194,15 @@ export class BiggiveTippingSlider {
179
194
  "type": "string",
180
195
  "mutable": false,
181
196
  "complexType": {
182
- "original": "'\u00A3'",
183
- "resolved": "\"\u00A3\"",
197
+ "original": "'GBP' | 'USD'",
198
+ "resolved": "\"GBP\" | \"USD\"",
184
199
  "references": {}
185
200
  },
186
- "required": false,
201
+ "required": true,
187
202
  "optional": false,
188
203
  "docs": {
189
204
  "tags": [],
190
- "text": ""
205
+ "text": "ISO-4217 currency code (e.g. GBP, USD)"
191
206
  },
192
207
  "attribute": "donation-currency",
193
208
  "reflect": false
@@ -36,7 +36,8 @@ export default {
36
36
  donationCurrency: {
37
37
  name: 'Donation Currency',
38
38
  control: {
39
- type: 'string',
39
+ type: 'select',
40
+ options: ['GBP', 'USD'],
40
41
  },
41
42
  },
42
43
  },
@@ -47,16 +48,16 @@ const Template = args => `
47
48
  colour-scheme="${args.colourScheme}"
48
49
  percentage-start="${args.percentageStart}"
49
50
  percentage-end="${args.percentageEnd}"
50
- donation-amount="${args.donationAmount}"/>
51
- donation-currency="${args.donationCurrency}"/>
52
- </biggive-tipping-slider>
51
+ donation-amount="${args.donationAmount}"
52
+ donation-currency="${args.donationCurrency}"
53
+ ></biggive-tipping-slider>
53
54
  `;
54
55
  export const TippingSliderComponent = Template.bind({});
55
56
  TippingSliderComponent.args = {
56
57
  spaceBelow: 4,
57
58
  colourScheme: 'primary',
58
- percentageStart: '0',
59
- percentageEnd: '30',
60
- donationAmount: '200',
61
- donationCurrency: '£',
59
+ percentageStart: 0,
60
+ percentageEnd: 30,
61
+ donationAmount: 200,
62
+ donationCurrency: 'GBP',
62
63
  };
@@ -23,6 +23,12 @@ const BiggiveTippingSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
23
23
  this.donationAmount = undefined;
24
24
  this.donationCurrency = undefined;
25
25
  }
26
+ format(currencyCode, amount) {
27
+ return Intl.NumberFormat('en-GB', {
28
+ style: 'currency',
29
+ currency: currencyCode,
30
+ }).format(amount);
31
+ }
26
32
  componentDidRender() {
27
33
  var _a, _b;
28
34
  var isMoving = false;
@@ -34,14 +40,22 @@ const BiggiveTippingSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
34
40
  var _a;
35
41
  if (isMoving) {
36
42
  const max = bar.offsetWidth - handle.offsetWidth;
37
- const pageX = e instanceof TouchEvent ? (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX : e.pageX;
43
+ let pageX;
44
+ if (window.TouchEvent && e instanceof TouchEvent) {
45
+ pageX = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX;
46
+ }
47
+ else {
48
+ // we Know e is a MouseEvent because all platforms that supports TouchEvent would also have
49
+ // a truthy window.TouchEvent - see https://stackoverflow.com/a/32882849/2803757
50
+ pageX = e.pageX;
51
+ }
38
52
  if (typeof pageX != 'undefined') {
39
53
  const mousePos = pageX - bar.offsetLeft - handle.offsetWidth / 2;
40
54
  const position = mousePos > max ? max : mousePos < 0 ? 0 : mousePos;
41
55
  const percentage = (position / max) * this.percentageEnd;
42
56
  const donation = Math.round(this.donationAmount * (percentage / 100));
43
57
  percentageWrap.innerHTML = Math.round(percentage).toString();
44
- donationWrap.innerHTML = Math.round(donation).toString();
58
+ donationWrap.innerHTML = this.format(this.donationCurrency, donation);
45
59
  handle.style.marginLeft = position + 'px';
46
60
  }
47
61
  }
@@ -68,7 +82,8 @@ const BiggiveTippingSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
68
82
  });
69
83
  }
70
84
  render() {
71
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "bar" }, h("div", { class: "handle", id: "handle" }, h("div", { class: "tooltip" }, h("span", { class: "donation" }, this.donationCurrency, h("span", { class: "donation-value" }, "0")), "\u00A0", h("span", { class: "percentage" }, "(", h("span", { class: "percentage-value" }, "0"), "%)")))), h("div", { class: "labels" }, h("div", { class: "label-start" }, this.percentageStart, "%"), h("div", { class: "label-end" }, this.percentageEnd, "%")), h("div", { class: "reset" }, h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
85
+ const currencyFormatted = this.format(this.donationCurrency, 0);
86
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "bar" }, h("div", { class: "handle", id: "handle" }, h("div", { class: "tooltip" }, h("span", { class: "donation" }, h("span", { class: "donation-value" }, currencyFormatted)), "\u00A0", h("span", { class: "percentage" }, "(", h("span", { class: "percentage-value" }, "0"), "%)")))), h("div", { class: "labels" }, h("div", { class: "label-start" }, this.percentageStart, "%"), h("div", { class: "label-end" }, this.percentageEnd, "%")), h("div", { class: "reset" }, h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
72
87
  }
73
88
  get host() { return this; }
74
89
  static get style() { return biggiveTippingSliderCss; }
@@ -1098,6 +1098,12 @@ const BiggiveTippingSlider = class {
1098
1098
  this.donationAmount = undefined;
1099
1099
  this.donationCurrency = undefined;
1100
1100
  }
1101
+ format(currencyCode, amount) {
1102
+ return Intl.NumberFormat('en-GB', {
1103
+ style: 'currency',
1104
+ currency: currencyCode,
1105
+ }).format(amount);
1106
+ }
1101
1107
  componentDidRender() {
1102
1108
  var _a, _b;
1103
1109
  var isMoving = false;
@@ -1109,14 +1115,22 @@ const BiggiveTippingSlider = class {
1109
1115
  var _a;
1110
1116
  if (isMoving) {
1111
1117
  const max = bar.offsetWidth - handle.offsetWidth;
1112
- const pageX = e instanceof TouchEvent ? (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX : e.pageX;
1118
+ let pageX;
1119
+ if (window.TouchEvent && e instanceof TouchEvent) {
1120
+ pageX = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX;
1121
+ }
1122
+ else {
1123
+ // we Know e is a MouseEvent because all platforms that supports TouchEvent would also have
1124
+ // a truthy window.TouchEvent - see https://stackoverflow.com/a/32882849/2803757
1125
+ pageX = e.pageX;
1126
+ }
1113
1127
  if (typeof pageX != 'undefined') {
1114
1128
  const mousePos = pageX - bar.offsetLeft - handle.offsetWidth / 2;
1115
1129
  const position = mousePos > max ? max : mousePos < 0 ? 0 : mousePos;
1116
1130
  const percentage = (position / max) * this.percentageEnd;
1117
1131
  const donation = Math.round(this.donationAmount * (percentage / 100));
1118
1132
  percentageWrap.innerHTML = Math.round(percentage).toString();
1119
- donationWrap.innerHTML = Math.round(donation).toString();
1133
+ donationWrap.innerHTML = this.format(this.donationCurrency, donation);
1120
1134
  handle.style.marginLeft = position + 'px';
1121
1135
  }
1122
1136
  }
@@ -1143,7 +1157,8 @@ const BiggiveTippingSlider = class {
1143
1157
  });
1144
1158
  }
1145
1159
  render() {
1146
- return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "bar" }, h("div", { class: "handle", id: "handle" }, h("div", { class: "tooltip" }, h("span", { class: "donation" }, this.donationCurrency, h("span", { class: "donation-value" }, "0")), "\u00A0", h("span", { class: "percentage" }, "(", h("span", { class: "percentage-value" }, "0"), "%)")))), h("div", { class: "labels" }, h("div", { class: "label-start" }, this.percentageStart, "%"), h("div", { class: "label-end" }, this.percentageEnd, "%")), h("div", { class: "reset" }, h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
1160
+ const currencyFormatted = this.format(this.donationCurrency, 0);
1161
+ return (h("div", { class: 'container space-below-' + this.spaceBelow }, h("div", { class: "bar" }, h("div", { class: "handle", id: "handle" }, h("div", { class: "tooltip" }, h("span", { class: "donation" }, h("span", { class: "donation-value" }, currencyFormatted)), "\u00A0", h("span", { class: "percentage" }, "(", h("span", { class: "percentage-value" }, "0"), "%)")))), h("div", { class: "labels" }, h("div", { class: "label-start" }, this.percentageStart, "%"), h("div", { class: "label-end" }, this.percentageEnd, "%")), h("div", { class: "reset" }, h("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
1147
1162
  }
1148
1163
  get host() { return getElement(this); }
1149
1164
  };
@@ -7,7 +7,11 @@ export declare class BiggiveTippingSlider {
7
7
  percentageStart: number;
8
8
  percentageEnd: number;
9
9
  donationAmount: number;
10
- donationCurrency: '£';
10
+ /**
11
+ * ISO-4217 currency code (e.g. GBP, USD)
12
+ */
13
+ donationCurrency: 'GBP' | 'USD';
14
+ format(currencyCode: 'GBP' | 'USD', amount: number): string;
11
15
  componentDidRender(): void;
12
16
  resetSlider: () => void;
13
17
  render(): any;
@@ -37,6 +37,7 @@ declare const _default: {
37
37
  name: string;
38
38
  control: {
39
39
  type: string;
40
+ options: string[];
40
41
  };
41
42
  };
42
43
  };
@@ -954,7 +954,10 @@ export namespace Components {
954
954
  interface BiggiveTippingSlider {
955
955
  "colourScheme": brandColour;
956
956
  "donationAmount": number;
957
- "donationCurrency": '£';
957
+ /**
958
+ * ISO-4217 currency code (e.g. GBP, USD)
959
+ */
960
+ "donationCurrency": 'GBP' | 'USD';
958
961
  "percentageEnd": number;
959
962
  "percentageStart": number;
960
963
  "spaceBelow": spacingOption;
@@ -2430,7 +2433,10 @@ declare namespace LocalJSX {
2430
2433
  interface BiggiveTippingSlider {
2431
2434
  "colourScheme"?: brandColour;
2432
2435
  "donationAmount"?: number;
2433
- "donationCurrency"?: '£';
2436
+ /**
2437
+ * ISO-4217 currency code (e.g. GBP, USD)
2438
+ */
2439
+ "donationCurrency": 'GBP' | 'USD';
2434
2440
  "percentageEnd"?: number;
2435
2441
  "percentageStart"?: number;
2436
2442
  "spaceBelow"?: spacingOption;
package/hydrate/index.js CHANGED
@@ -8290,6 +8290,12 @@ class BiggiveTippingSlider {
8290
8290
  this.donationAmount = undefined;
8291
8291
  this.donationCurrency = undefined;
8292
8292
  }
8293
+ format(currencyCode, amount) {
8294
+ return Intl.NumberFormat('en-GB', {
8295
+ style: 'currency',
8296
+ currency: currencyCode,
8297
+ }).format(amount);
8298
+ }
8293
8299
  componentDidRender() {
8294
8300
  var _a, _b;
8295
8301
  var isMoving = false;
@@ -8301,14 +8307,22 @@ class BiggiveTippingSlider {
8301
8307
  var _a;
8302
8308
  if (isMoving) {
8303
8309
  const max = bar.offsetWidth - handle.offsetWidth;
8304
- const pageX = e instanceof TouchEvent ? (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX : e.pageX;
8310
+ let pageX;
8311
+ if (window.TouchEvent && e instanceof TouchEvent) {
8312
+ pageX = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.pageX;
8313
+ }
8314
+ else {
8315
+ // we Know e is a MouseEvent because all platforms that supports TouchEvent would also have
8316
+ // a truthy window.TouchEvent - see https://stackoverflow.com/a/32882849/2803757
8317
+ pageX = e.pageX;
8318
+ }
8305
8319
  if (typeof pageX != 'undefined') {
8306
8320
  const mousePos = pageX - bar.offsetLeft - handle.offsetWidth / 2;
8307
8321
  const position = mousePos > max ? max : mousePos < 0 ? 0 : mousePos;
8308
8322
  const percentage = (position / max) * this.percentageEnd;
8309
8323
  const donation = Math.round(this.donationAmount * (percentage / 100));
8310
8324
  percentageWrap.innerHTML = Math.round(percentage).toString();
8311
- donationWrap.innerHTML = Math.round(donation).toString();
8325
+ donationWrap.innerHTML = this.format(this.donationCurrency, donation);
8312
8326
  handle.style.marginLeft = position + 'px';
8313
8327
  }
8314
8328
  }
@@ -8335,7 +8349,8 @@ class BiggiveTippingSlider {
8335
8349
  });
8336
8350
  }
8337
8351
  render() {
8338
- return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "bar" }, hAsync("div", { class: "handle", id: "handle" }, hAsync("div", { class: "tooltip" }, hAsync("span", { class: "donation" }, this.donationCurrency, hAsync("span", { class: "donation-value" }, "0")), "\u00A0", hAsync("span", { class: "percentage" }, "(", hAsync("span", { class: "percentage-value" }, "0"), "%)")))), hAsync("div", { class: "labels" }, hAsync("div", { class: "label-start" }, this.percentageStart, "%"), hAsync("div", { class: "label-end" }, this.percentageEnd, "%")), hAsync("div", { class: "reset" }, hAsync("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
8352
+ const currencyFormatted = this.format(this.donationCurrency, 0);
8353
+ return (hAsync("div", { class: 'container space-below-' + this.spaceBelow }, hAsync("div", { class: "bar" }, hAsync("div", { class: "handle", id: "handle" }, hAsync("div", { class: "tooltip" }, hAsync("span", { class: "donation" }, hAsync("span", { class: "donation-value" }, currencyFormatted)), "\u00A0", hAsync("span", { class: "percentage" }, "(", hAsync("span", { class: "percentage-value" }, "0"), "%)")))), hAsync("div", { class: "labels" }, hAsync("div", { class: "label-start" }, this.percentageStart, "%"), hAsync("div", { class: "label-end" }, this.percentageEnd, "%")), hAsync("div", { class: "reset" }, hAsync("span", { class: "button", onClick: this.resetSlider }, "Back to default"))));
8339
8354
  }
8340
8355
  get host() { return getElement(this); }
8341
8356
  static get style() { return biggiveTippingSliderCss; }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@biggive/components",
3
3
  "_comment": "Version number below is automatically replaced during CircleCI build.",
4
- "version": "202303061752.0.0",
4
+ "version": "202303171148.0.0",
5
5
  "description": "Big Give Components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",