@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.
- package/dist/biggive/biggive.esm.js +1 -1
- package/dist/biggive/{p-ee4f16a8.entry.js → p-2d024615.entry.js} +1 -1
- package/dist/cjs/biggive-accordion_35.cjs.entry.js +18 -3
- package/dist/collection/components/biggive-tipping-slider/biggive-tipping-slider.js +22 -7
- package/dist/collection/components/biggive-tipping-slider/biggive-tipping-slider.stories.js +9 -8
- package/dist/components/biggive-tipping-slider.js +18 -3
- package/dist/esm/biggive-accordion_35.entry.js +18 -3
- package/dist/types/components/biggive-tipping-slider/biggive-tipping-slider.d.ts +5 -1
- package/dist/types/components/biggive-tipping-slider/biggive-tipping-slider.stories.d.ts +1 -0
- package/dist/types/components.d.ts +8 -2
- package/hydrate/index.js +18 -3
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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 =
|
|
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
|
-
|
|
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
|
-
|
|
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 =
|
|
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
|
-
|
|
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": "'
|
|
183
|
-
"resolved": "\"\
|
|
197
|
+
"original": "'GBP' | 'USD'",
|
|
198
|
+
"resolved": "\"GBP\" | \"USD\"",
|
|
184
199
|
"references": {}
|
|
185
200
|
},
|
|
186
|
-
"required":
|
|
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: '
|
|
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
|
-
|
|
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:
|
|
59
|
-
percentageEnd:
|
|
60
|
-
donationAmount:
|
|
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
|
-
|
|
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 =
|
|
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
|
-
|
|
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
|
-
|
|
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 =
|
|
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
|
-
|
|
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
|
-
|
|
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;
|
|
@@ -954,7 +954,10 @@ export namespace Components {
|
|
|
954
954
|
interface BiggiveTippingSlider {
|
|
955
955
|
"colourScheme": brandColour;
|
|
956
956
|
"donationAmount": number;
|
|
957
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 =
|
|
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
|
-
|
|
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": "
|
|
4
|
+
"version": "202303171148.0.0",
|
|
5
5
|
"description": "Big Give Components",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
7
7
|
"module": "dist/index.js",
|