@zonos/elements 1.3.11 → 1.3.12-alpha.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.
- package/dist/cjs/zonos-address_4.cjs.entry.js +5 -1
- package/dist/cjs/zonos-button_2.cjs.entry.js +10 -17
- package/dist/cjs/zonos-cart-items_10.cjs.entry.js +17 -3
- package/dist/collection/components/common/zonos-button/zonos-button.css +1 -1
- package/dist/collection/components/common/zonos-button/zonos-button.js +10 -16
- package/dist/collection/components/utils/containsNonLatinChars.js +5 -1
- package/dist/components/zonos-address2.js +5 -1
- package/dist/components/zonos-button2.js +10 -17
- package/dist/components/zonos-checkout-progress-tabs2.js +16 -1
- package/dist/esm/zonos-address_4.entry.js +5 -1
- package/dist/esm/zonos-button_2.entry.js +10 -17
- package/dist/esm/zonos-cart-items_10.entry.js +16 -2
- package/dist/esm-es5/zonos-address_4.entry.js +1 -1
- package/dist/esm-es5/zonos-button_2.entry.js +1 -1
- package/dist/esm-es5/zonos-cart-items_10.entry.js +1 -1
- package/dist/scripts/loadZonos.js +1 -1
- package/dist/scripts/zonos.js +1 -1
- package/dist/scripts/zonosBase.js +1 -1
- package/dist/zonos-elements/p-0679e872.system.entry.js +1 -0
- package/dist/zonos-elements/p-09dbb0e9.entry.js +1 -0
- package/dist/zonos-elements/p-5c9c2973.system.entry.js +1 -0
- package/dist/zonos-elements/p-5dbb80df.system.entry.js +1 -0
- package/dist/zonos-elements/p-5f662cf2.entry.js +1 -0
- package/dist/zonos-elements/p-6e81adba.system.js +1 -1
- package/dist/zonos-elements/p-6f5cc827.entry.js +1 -0
- package/dist/zonos-elements/zonos-elements.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/getContrastColor-c72796c6.js +0 -20
- package/dist/components/getContrastColor.js +0 -18
- package/dist/esm/getContrastColor-5fbc4746.js +0 -18
- package/dist/esm-es5/getContrastColor-5fbc4746.js +0 -1
- package/dist/zonos-elements/p-145dd34a.system.entry.js +0 -1
- package/dist/zonos-elements/p-223d72d8.entry.js +0 -1
- package/dist/zonos-elements/p-397d8268.entry.js +0 -1
- package/dist/zonos-elements/p-6484bf31.system.js +0 -1
- package/dist/zonos-elements/p-7575a42a.js +0 -1
- package/dist/zonos-elements/p-93dafeea.system.entry.js +0 -1
- package/dist/zonos-elements/p-e5b5cbfd.system.entry.js +0 -1
- package/dist/zonos-elements/p-fe8de89b.entry.js +0 -1
|
@@ -15,12 +15,16 @@ const isDarkColor = require('./isDarkColor-7faf0a82.js');
|
|
|
15
15
|
* @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
|
|
16
16
|
*/
|
|
17
17
|
const containsNonLatinChars = (params) => {
|
|
18
|
+
const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
|
|
18
19
|
/**
|
|
19
20
|
* This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
|
|
20
21
|
* I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
|
|
21
22
|
**/
|
|
22
23
|
const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
|
|
23
|
-
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value)
|
|
24
|
+
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
|
|
25
|
+
// allow special characters like web apostrophe and quotation mark
|
|
26
|
+
!specialCharacters.test(value)
|
|
27
|
+
? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
|
|
24
28
|
return nonLatinValueList;
|
|
25
29
|
};
|
|
26
30
|
|
|
@@ -8,7 +8,6 @@ const classes = require('./classes-b7918f56.js');
|
|
|
8
8
|
const getBorderRadius = require('./getBorderRadius-4fa738c3.js');
|
|
9
9
|
const isColorVariable = require('./isColorVariable-fff5e469.js');
|
|
10
10
|
const isDarkColor = require('./isDarkColor-7faf0a82.js');
|
|
11
|
-
const getContrastColor = require('./getContrastColor-c72796c6.js');
|
|
12
11
|
|
|
13
12
|
/**
|
|
14
13
|
* Get theme for button text based on background color
|
|
@@ -37,7 +36,7 @@ const styles = (props) => {
|
|
|
37
36
|
}, {});
|
|
38
37
|
};
|
|
39
38
|
|
|
40
|
-
const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--
|
|
39
|
+
const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-500)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
|
|
41
40
|
const ZonosButtonStyle0 = zonosButtonCss;
|
|
42
41
|
|
|
43
42
|
const ZonosButton = class {
|
|
@@ -95,24 +94,18 @@ const ZonosButton = class {
|
|
|
95
94
|
// only set theme for button to change text color if variant is standard and override background is set
|
|
96
95
|
const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
|
|
97
96
|
const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
|
|
98
|
-
const
|
|
99
|
-
|
|
97
|
+
const backgroundActualColor = isColorVariable.isColorVariable(overrideBackground) && overrideBackground
|
|
98
|
+
? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
|
|
99
|
+
: overrideBackground;
|
|
100
|
+
const spinnerColor = backgroundActualColor && isDarkColor.isDarkColor(backgroundActualColor)
|
|
101
|
+
? 'white'
|
|
102
|
+
: 'black';
|
|
103
|
+
return (index.h(index.Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
|
|
100
104
|
'--background-color': overrideBackground,
|
|
101
105
|
'--border-radius': borderStyle,
|
|
102
106
|
'--color': color,
|
|
103
107
|
'--font-family': zonosStore.zonosStoreFontFamily(),
|
|
104
|
-
|
|
105
|
-
? // for the subtle variant, the hover background should contrast with the text color
|
|
106
|
-
getContrastColor.getContrastColor({
|
|
107
|
-
backgroundColor: 'white',
|
|
108
|
-
color: isColorVariable.isColorVariable(this.buttonColor)
|
|
109
|
-
? window
|
|
110
|
-
.getComputedStyle(this.ele)
|
|
111
|
-
.getPropertyValue(`--amino-${this.buttonColor}`)
|
|
112
|
-
: this.buttonColor,
|
|
113
|
-
})
|
|
114
|
-
: undefined,
|
|
115
|
-
}) }, index.h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes.classes([
|
|
108
|
+
}) }, index.h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes.classes([
|
|
116
109
|
this.hasIcon && 'has-icon',
|
|
117
110
|
this.hasContent && 'has-content',
|
|
118
111
|
this.noBackground && 'no-background',
|
|
@@ -125,7 +118,7 @@ const ZonosButton = class {
|
|
|
125
118
|
overrideBackground &&
|
|
126
119
|
variant === 'standard' &&
|
|
127
120
|
'override-background',
|
|
128
|
-
]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: '
|
|
121
|
+
]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
|
|
129
122
|
}
|
|
130
123
|
get ele() { return index.getElement(this); }
|
|
131
124
|
static get watchers() { return {
|
|
@@ -10,9 +10,8 @@ const getBorderRadius = require('./getBorderRadius-4fa738c3.js');
|
|
|
10
10
|
const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
|
|
11
11
|
const classes = require('./classes-b7918f56.js');
|
|
12
12
|
const ILanguage = require('./ILanguage-d247b45b.js');
|
|
13
|
-
const
|
|
13
|
+
const isDarkColor = require('./isDarkColor-7faf0a82.js');
|
|
14
14
|
const isColorVariable = require('./isColorVariable-fff5e469.js');
|
|
15
|
-
require('./isDarkColor-7faf0a82.js');
|
|
16
15
|
|
|
17
16
|
const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
|
|
18
17
|
? `${new Intl.NumberFormat('en-US', {
|
|
@@ -349,6 +348,21 @@ const ZonosCheckoutPayment = class {
|
|
|
349
348
|
};
|
|
350
349
|
ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
|
|
351
350
|
|
|
351
|
+
const getContrastColor = ({ backgroundColor, color, }) => {
|
|
352
|
+
// get readibility of the color
|
|
353
|
+
const colorReadibilityValue = isDarkColor.tinycolor.readability(color, backgroundColor);
|
|
354
|
+
if (colorReadibilityValue > 2.5) {
|
|
355
|
+
// no need to change the color if it's already contrast enough
|
|
356
|
+
return color;
|
|
357
|
+
}
|
|
358
|
+
if (isDarkColor.isDarkColor(color)) {
|
|
359
|
+
return '#ffffff';
|
|
360
|
+
}
|
|
361
|
+
else {
|
|
362
|
+
return isDarkColor.tinycolor(color).darken(25).toHexString();
|
|
363
|
+
}
|
|
364
|
+
};
|
|
365
|
+
|
|
352
366
|
const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
353
367
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
|
|
354
368
|
</svg>
|
|
@@ -405,7 +419,7 @@ const ZonosCheckoutProgressTabs = class {
|
|
|
405
419
|
const labelSelectedColor = this.tabColor || zonosStore.zonosStore.appearance.colorSecondary;
|
|
406
420
|
// If the background color and the tab color are not contrat enough, increase the contrast of the label color
|
|
407
421
|
const contrastLabelColor = this.backgroundColor && labelSelectedColor
|
|
408
|
-
? getContrastColor
|
|
422
|
+
? getContrastColor({
|
|
409
423
|
backgroundColor: isColorVariable.isColorVariable(this.backgroundColor)
|
|
410
424
|
? window
|
|
411
425
|
.getComputedStyle(this.ele)
|
|
@@ -228,7 +228,7 @@
|
|
|
228
228
|
outline: none;
|
|
229
229
|
}
|
|
230
230
|
:host button:not(.override-background).subtle:not([disabled]):hover {
|
|
231
|
-
background: var(--
|
|
231
|
+
background: var(--amino-gray-500);
|
|
232
232
|
}
|
|
233
233
|
:host button:not(.override-background).subtle:not([disabled]):active {
|
|
234
234
|
background: var(--amino-gray-200);
|
|
@@ -3,8 +3,8 @@ import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
|
|
|
3
3
|
import { classes } from "../../utils/classes";
|
|
4
4
|
import { getBorderRadius } from "../../utils/getBorderRadius";
|
|
5
5
|
import { getButtonTheme } from "../../utils/getButtonTheme";
|
|
6
|
-
import { getContrastColor } from "../../utils/getContrastColor";
|
|
7
6
|
import { isColorVariable } from "../../utils/isColorVariable";
|
|
7
|
+
import { isDarkColor } from "../../utils/isDarkColor";
|
|
8
8
|
import { styles } from "../../utils/styles";
|
|
9
9
|
export class ZonosButton {
|
|
10
10
|
constructor() {
|
|
@@ -60,24 +60,18 @@ export class ZonosButton {
|
|
|
60
60
|
// only set theme for button to change text color if variant is standard and override background is set
|
|
61
61
|
const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
|
|
62
62
|
const borderStyle = getBorderRadius(this.borderStyle);
|
|
63
|
-
const
|
|
64
|
-
|
|
63
|
+
const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
|
|
64
|
+
? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
|
|
65
|
+
: overrideBackground;
|
|
66
|
+
const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
|
|
67
|
+
? 'white'
|
|
68
|
+
: 'black';
|
|
69
|
+
return (h(Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
|
|
65
70
|
'--background-color': overrideBackground,
|
|
66
71
|
'--border-radius': borderStyle,
|
|
67
72
|
'--color': color,
|
|
68
73
|
'--font-family': zonosStoreFontFamily(),
|
|
69
|
-
|
|
70
|
-
? // for the subtle variant, the hover background should contrast with the text color
|
|
71
|
-
getContrastColor({
|
|
72
|
-
backgroundColor: 'white',
|
|
73
|
-
color: isColorVariable(this.buttonColor)
|
|
74
|
-
? window
|
|
75
|
-
.getComputedStyle(this.ele)
|
|
76
|
-
.getPropertyValue(`--amino-${this.buttonColor}`)
|
|
77
|
-
: this.buttonColor,
|
|
78
|
-
})
|
|
79
|
-
: undefined,
|
|
80
|
-
}) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
|
|
74
|
+
}) }, h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes([
|
|
81
75
|
this.hasIcon && 'has-icon',
|
|
82
76
|
this.hasContent && 'has-content',
|
|
83
77
|
this.noBackground && 'no-background',
|
|
@@ -90,7 +84,7 @@ export class ZonosButton {
|
|
|
90
84
|
overrideBackground &&
|
|
91
85
|
variant === 'standard' &&
|
|
92
86
|
'override-background',
|
|
93
|
-
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '
|
|
87
|
+
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
|
|
94
88
|
}
|
|
95
89
|
static get is() { return "zonos-button"; }
|
|
96
90
|
static get encapsulation() { return "shadow"; }
|
|
@@ -3,11 +3,15 @@
|
|
|
3
3
|
* @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
|
|
4
4
|
*/
|
|
5
5
|
export const containsNonLatinChars = (params) => {
|
|
6
|
+
const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
|
|
6
7
|
/**
|
|
7
8
|
* This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
|
|
8
9
|
* I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
|
|
9
10
|
**/
|
|
10
11
|
const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
|
|
11
|
-
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value)
|
|
12
|
+
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
|
|
13
|
+
// allow special characters like web apostrophe and quotation mark
|
|
14
|
+
!specialCharacters.test(value)
|
|
15
|
+
? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
|
|
12
16
|
return nonLatinValueList;
|
|
13
17
|
};
|
|
@@ -10,12 +10,16 @@ import { d as defineCustomElement$1 } from './zonos-text2.js';
|
|
|
10
10
|
* @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
|
|
11
11
|
*/
|
|
12
12
|
const containsNonLatinChars = (params) => {
|
|
13
|
+
const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
|
|
13
14
|
/**
|
|
14
15
|
* This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
|
|
15
16
|
* I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
|
|
16
17
|
**/
|
|
17
18
|
const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
|
|
18
|
-
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value)
|
|
19
|
+
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
|
|
20
|
+
// allow special characters like web apostrophe and quotation mark
|
|
21
|
+
!specialCharacters.test(value)
|
|
22
|
+
? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
|
|
19
23
|
return nonLatinValueList;
|
|
20
24
|
};
|
|
21
25
|
|
|
@@ -4,7 +4,6 @@ import { c as classes } from './classes.js';
|
|
|
4
4
|
import { g as getBorderRadius } from './getBorderRadius.js';
|
|
5
5
|
import { i as isColorVariable } from './isColorVariable.js';
|
|
6
6
|
import { i as isDarkColor } from './isDarkColor.js';
|
|
7
|
-
import { g as getContrastColor } from './getContrastColor.js';
|
|
8
7
|
import { d as defineCustomElement$1 } from './zonos-spinner2.js';
|
|
9
8
|
|
|
10
9
|
/**
|
|
@@ -34,7 +33,7 @@ const styles = (props) => {
|
|
|
34
33
|
}, {});
|
|
35
34
|
};
|
|
36
35
|
|
|
37
|
-
const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--
|
|
36
|
+
const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-500)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
|
|
38
37
|
const ZonosButtonStyle0 = zonosButtonCss;
|
|
39
38
|
|
|
40
39
|
const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
|
|
@@ -94,24 +93,18 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
|
|
|
94
93
|
// only set theme for button to change text color if variant is standard and override background is set
|
|
95
94
|
const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
|
|
96
95
|
const borderStyle = getBorderRadius(this.borderStyle);
|
|
97
|
-
const
|
|
98
|
-
|
|
96
|
+
const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
|
|
97
|
+
? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
|
|
98
|
+
: overrideBackground;
|
|
99
|
+
const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
|
|
100
|
+
? 'white'
|
|
101
|
+
: 'black';
|
|
102
|
+
return (h(Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
|
|
99
103
|
'--background-color': overrideBackground,
|
|
100
104
|
'--border-radius': borderStyle,
|
|
101
105
|
'--color': color,
|
|
102
106
|
'--font-family': zonosStoreFontFamily(),
|
|
103
|
-
|
|
104
|
-
? // for the subtle variant, the hover background should contrast with the text color
|
|
105
|
-
getContrastColor({
|
|
106
|
-
backgroundColor: 'white',
|
|
107
|
-
color: isColorVariable(this.buttonColor)
|
|
108
|
-
? window
|
|
109
|
-
.getComputedStyle(this.ele)
|
|
110
|
-
.getPropertyValue(`--amino-${this.buttonColor}`)
|
|
111
|
-
: this.buttonColor,
|
|
112
|
-
})
|
|
113
|
-
: undefined,
|
|
114
|
-
}) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
|
|
107
|
+
}) }, h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes([
|
|
115
108
|
this.hasIcon && 'has-icon',
|
|
116
109
|
this.hasContent && 'has-content',
|
|
117
110
|
this.noBackground && 'no-background',
|
|
@@ -124,7 +117,7 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
|
|
|
124
117
|
overrideBackground &&
|
|
125
118
|
variant === 'standard' &&
|
|
126
119
|
'override-background',
|
|
127
|
-
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '
|
|
120
|
+
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
|
|
128
121
|
}
|
|
129
122
|
get ele() { return this; }
|
|
130
123
|
static get watchers() { return {
|
|
@@ -2,11 +2,26 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
2
2
|
import { c as cartStore, t as translate } from './stripe.js';
|
|
3
3
|
import { z as zonosStore } from './zonosStore.js';
|
|
4
4
|
import { c as classes } from './classes.js';
|
|
5
|
-
import {
|
|
5
|
+
import { t as tinycolor, i as isDarkColor } from './isDarkColor.js';
|
|
6
6
|
import { i as isColorVariable } from './isColorVariable.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './zonos-icon2.js';
|
|
8
8
|
import { d as defineCustomElement$1 } from './zonos-text2.js';
|
|
9
9
|
|
|
10
|
+
const getContrastColor = ({ backgroundColor, color, }) => {
|
|
11
|
+
// get readibility of the color
|
|
12
|
+
const colorReadibilityValue = tinycolor.readability(color, backgroundColor);
|
|
13
|
+
if (colorReadibilityValue > 2.5) {
|
|
14
|
+
// no need to change the color if it's already contrast enough
|
|
15
|
+
return color;
|
|
16
|
+
}
|
|
17
|
+
if (isDarkColor(color)) {
|
|
18
|
+
return '#ffffff';
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
return tinycolor(color).darken(25).toHexString();
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
10
25
|
const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
11
26
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
|
|
12
27
|
</svg>
|
|
@@ -11,12 +11,16 @@ import { i as isDarkColor } from './isDarkColor-6bf71e51.js';
|
|
|
11
11
|
* @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
|
|
12
12
|
*/
|
|
13
13
|
const containsNonLatinChars = (params) => {
|
|
14
|
+
const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
|
|
14
15
|
/**
|
|
15
16
|
* This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
|
|
16
17
|
* I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
|
|
17
18
|
**/
|
|
18
19
|
const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
|
|
19
|
-
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value)
|
|
20
|
+
const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
|
|
21
|
+
// allow special characters like web apostrophe and quotation mark
|
|
22
|
+
!specialCharacters.test(value)
|
|
23
|
+
? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
|
|
20
24
|
return nonLatinValueList;
|
|
21
25
|
};
|
|
22
26
|
|
|
@@ -4,7 +4,6 @@ import { c as classes } from './classes-0d95c529.js';
|
|
|
4
4
|
import { g as getBorderRadius } from './getBorderRadius-a89e45fb.js';
|
|
5
5
|
import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
|
|
6
6
|
import { i as isDarkColor } from './isDarkColor-6bf71e51.js';
|
|
7
|
-
import { g as getContrastColor } from './getContrastColor-5fbc4746.js';
|
|
8
7
|
|
|
9
8
|
/**
|
|
10
9
|
* Get theme for button text based on background color
|
|
@@ -33,7 +32,7 @@ const styles = (props) => {
|
|
|
33
32
|
}, {});
|
|
34
33
|
};
|
|
35
34
|
|
|
36
|
-
const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--
|
|
35
|
+
const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-500)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
|
|
37
36
|
const ZonosButtonStyle0 = zonosButtonCss;
|
|
38
37
|
|
|
39
38
|
const ZonosButton = class {
|
|
@@ -91,24 +90,18 @@ const ZonosButton = class {
|
|
|
91
90
|
// only set theme for button to change text color if variant is standard and override background is set
|
|
92
91
|
const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
|
|
93
92
|
const borderStyle = getBorderRadius(this.borderStyle);
|
|
94
|
-
const
|
|
95
|
-
|
|
93
|
+
const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
|
|
94
|
+
? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
|
|
95
|
+
: overrideBackground;
|
|
96
|
+
const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
|
|
97
|
+
? 'white'
|
|
98
|
+
: 'black';
|
|
99
|
+
return (h(Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
|
|
96
100
|
'--background-color': overrideBackground,
|
|
97
101
|
'--border-radius': borderStyle,
|
|
98
102
|
'--color': color,
|
|
99
103
|
'--font-family': zonosStoreFontFamily(),
|
|
100
|
-
|
|
101
|
-
? // for the subtle variant, the hover background should contrast with the text color
|
|
102
|
-
getContrastColor({
|
|
103
|
-
backgroundColor: 'white',
|
|
104
|
-
color: isColorVariable(this.buttonColor)
|
|
105
|
-
? window
|
|
106
|
-
.getComputedStyle(this.ele)
|
|
107
|
-
.getPropertyValue(`--amino-${this.buttonColor}`)
|
|
108
|
-
: this.buttonColor,
|
|
109
|
-
})
|
|
110
|
-
: undefined,
|
|
111
|
-
}) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
|
|
104
|
+
}) }, h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes([
|
|
112
105
|
this.hasIcon && 'has-icon',
|
|
113
106
|
this.hasContent && 'has-content',
|
|
114
107
|
this.noBackground && 'no-background',
|
|
@@ -121,7 +114,7 @@ const ZonosButton = class {
|
|
|
121
114
|
overrideBackground &&
|
|
122
115
|
variant === 'standard' &&
|
|
123
116
|
'override-background',
|
|
124
|
-
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '
|
|
117
|
+
]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
|
|
125
118
|
}
|
|
126
119
|
get ele() { return getElement(this); }
|
|
127
120
|
static get watchers() { return {
|
|
@@ -6,9 +6,8 @@ import { g as getBorderRadius } from './getBorderRadius-a89e45fb.js';
|
|
|
6
6
|
import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
|
|
7
7
|
import { c as classes } from './classes-0d95c529.js';
|
|
8
8
|
import { l as languages } from './ILanguage-97790bee.js';
|
|
9
|
-
import {
|
|
9
|
+
import { t as tinycolor, i as isDarkColor } from './isDarkColor-6bf71e51.js';
|
|
10
10
|
import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
|
|
11
|
-
import './isDarkColor-6bf71e51.js';
|
|
12
11
|
|
|
13
12
|
const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
|
|
14
13
|
? `${new Intl.NumberFormat('en-US', {
|
|
@@ -345,6 +344,21 @@ const ZonosCheckoutPayment = class {
|
|
|
345
344
|
};
|
|
346
345
|
ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
|
|
347
346
|
|
|
347
|
+
const getContrastColor = ({ backgroundColor, color, }) => {
|
|
348
|
+
// get readibility of the color
|
|
349
|
+
const colorReadibilityValue = tinycolor.readability(color, backgroundColor);
|
|
350
|
+
if (colorReadibilityValue > 2.5) {
|
|
351
|
+
// no need to change the color if it's already contrast enough
|
|
352
|
+
return color;
|
|
353
|
+
}
|
|
354
|
+
if (isDarkColor(color)) {
|
|
355
|
+
return '#ffffff';
|
|
356
|
+
}
|
|
357
|
+
else {
|
|
358
|
+
return tinycolor(color).darken(25).toHexString();
|
|
359
|
+
}
|
|
360
|
+
};
|
|
361
|
+
|
|
348
362
|
const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
349
363
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
|
|
350
364
|
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(t,e,o,s){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,i){function a(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s["throw"](t))}catch(t){i(t)}}function c(t){t.done?o(t.value):n(t.value).then(a,r)}c((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,n,i,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return c([t,e])}}function c(r){if(s)throw new TypeError("Generator is already executing.");while(a&&(a=0,r[0]&&(o=0)),o)try{if(s=1,n&&(i=r[0]&2?n["return"]:r[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;if(n=0,i)r=[r[0]&2,i.value];switch(r[0]){case 0:case 1:i=r;break;case 4:o.label++;return{value:r[1],done:false};case 5:o.label++;n=r[1];r=[0];continue;case 7:r=o.ops.pop();o.trys.pop();continue;default:if(!(i=o.trys,i=i.length>0&&i[i.length-1])&&(r[0]===6||r[0]===2)){o=0;continue}if(r[0]===3&&(!i||r[1]>i[0]&&r[1]<i[3])){o.label=r[1];break}if(r[0]===6&&o.label<i[1]){o.label=i[1];i=r;break}if(i&&o.label<i[2]){o.label=i[2];o.ops.push(r);break}if(i[2])o.ops.pop();o.trys.pop();continue}r=e.call(t,o)}catch(t){r=[6,t];n=0}finally{s=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,d as getElement}from"./index-dd40cc85.js";import{j as stripeStore,d as logError,l as localizationStore,t as translate,n as stripeStorePrefetchLandedCost}from"./cart-228e1ef7.js";import{z as zonosStore,d as zonosStoreFontFamily}from"./zonosStore-c4c45591.js";import{i as isCheckoutMobile}from"./isCheckoutMobile-8846dccb.js";import{c as classes}from"./classes-0d95c529.js";import{g as getBorderRadius}from"./getBorderRadius-a89e45fb.js";import{i as isDarkColor}from"./isDarkColor-6bf71e51.js";var containsNonLatinChars=function(t){var e=/[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;var o=Object.entries(t).reduce((function(t,o){var s;var n=o[0],i=o[1];return e.test(i)?Object.assign(Object.assign({},t),(s={},s[n]=true,s)):t}),{});return o};var zonosAddressCss=".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:var(--amino-space-8)}";var ZonosAddressStyle0=zonosAddressCss;var ZonosAddress=function(){function t(t){registerInstance(this,t);this.invalidCharacters=createEvent(this,"invalidCharacters",7);this.type=undefined;this.titleText=undefined;this.defaultAddress=null;this.stripe=window.Zonos.stripe;this.hasInvalidCharacters=false;this.isDirtyAddress=false}t.prototype.getStripeAddressInstance=function(){if(this.type==="billing"){return{stripeAddressElement:stripeStore.stripeBillingAddressElement,stripeAddressEventData:stripeStore.stripeBillingAddressEventData,stripeElements:stripeStore.stripeElementsForBillingAddress}}return{stripeAddressElement:stripeStore.stripeAddressElement,stripeAddressEventData:stripeStore.stripeAddressEventData,stripeElements:stripeStore.stripeElements}};t.prototype.updateAddressEventData=function(t){var e=t.event,o=t.type;switch(o){case"billing":stripeStore.stripeBillingAddressEventData=e;break;default:stripeStore.stripeAddressEventData=e;break}var s=this.checkInvalidCharacters(e);this.invalidCharacters.emit(s);this.hasInvalidCharacters=s;if(s){return}};t.prototype.updateAddressElement=function(t){var e=t.stripeAddressElement,o=t.type;if(o==="shipping"){stripeStore.stripeAddressElement=e;return}stripeStore.stripeBillingAddressElement=e};t.prototype.checkInvalidCharacters=function(t){if(!t.complete||zonosStore.checkoutSettings.allowedCharacterSets==="ALL"){return false}var e=t.value,o=e.address,s=e.firstName,n=e.lastName,i=e.name;var a=o.city,r=o.country,c=o.line1,h=o.line2,l=o.postal_code,d=o.state;var u=containsNonLatinChars({city:a,country:r,line1:c,line2:h||"",name:i||"".concat(s," ").concat(n),postal_code:l,state:d});if(Object.keys(u).length){return true}return false};t.prototype.watchInitStripe=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,o,s,n,i,a,r,c;var h=this;return __generator(this,(function(l){this.stripe=window.Zonos.stripe;o=this.getStripeAddressInstance(),s=o.stripeAddressEventData,n=o.stripeElements;if(!this.stripe||!n){logError("Stripe is not initialized. Couldn't load stripe element.");return[2]}i=(t=this.defaultAddress)===null||t===void 0?void 0:t.phone;if(!i){(e=this.defaultAddress)===null||e===void 0?true:delete e.phone}a=localizationStore.shippingZoneCountries;r=a?Object.values(a).map((function(t){return t.code})):[];c=n.create("address",{allowedCountries:this.type==="shipping"?r:[],contacts:this.defaultAddress&&!s?[this.defaultAddress]:[],defaultValues:{address:Object.assign(Object.assign({},s===null||s===void 0?void 0:s.value.address),{country:(s===null||s===void 0?void 0:s.value.address.country)||localizationStore.selectedCountryCode||"AL"}),firstName:s===null||s===void 0?void 0:s.value.firstName,lastName:s===null||s===void 0?void 0:s.value.lastName,phone:s===null||s===void 0?void 0:s.value.phone},display:{name:"split"},fields:{phone:"always"},mode:this.type,validation:{phone:{required:"always"}}});c.mount(this.el.querySelector(".zonos--address-component"));c.on("change",(function(t){var e=t.value;if(!h.isDirtyAddress&&e.address.line1.length>=3){h.isDirtyAddress=true;setTimeout((function(){if(isCheckoutMobile()){h.el.scrollIntoView({behavior:"smooth",block:"end"})}else{var t=h.type==="shipping"?100:600;var e=h.el.closest(".zonos--group");var o=h.el.getBoundingClientRect().top+t;e===null||e===void 0?void 0:e.scrollTo({behavior:"smooth",top:o})}}),600)}h.updateAddressEventData({event:Object.assign(Object.assign({},t),{elementMode:h.type,elementType:"address",value:Object.assign(Object.assign({},e),{firstName:e.firstName||e.name.split(" ")[0],lastName:e.lastName||e.name.split(" ")[1]})}),type:h.type})}));this.updateAddressElement({stripeAddressElement:c,type:this.type});return[2]}))}))};t.prototype.disconnectedCallback=function(){var t=this.getStripeAddressInstance().stripeAddressElement;t===null||t===void 0?void 0:t.destroy()};t.prototype.componentDidLoad=function(){var t=this;var e=this.getStripeAddressInstance().stripeAddressEventData;this.isDirtyAddress=!!e&&e.value.address.line1.length>0;void this.watchInitStripe();setTimeout((function(){var e=t.getStripeAddressInstance().stripeAddressEventData;if(e){t.checkInvalidCharacters(e)}}),500)};t.prototype.render=function(){return h(Host,{key:"81b9d2e822eea4eb85a3d7d21ff645c9f0841f30",class:"zonos--address zonos--elements"},h("zonos-text",{key:"cd180e130f161233fd05365f9250913214846ced",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"b4d15f56e1215305367c071c4d9be985b09245b8",class:"zonos--address-component"}),this.hasInvalidCharacters&&h("zonos-banner",{bannerTitle:translate("Please ensure your text uses the Latin alphabet only (A-Z, a-z)."),intent:"error"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosAddress.style=ZonosAddressStyle0;var colorPrefixes=["blue","cyan","green","orange","purple","red","gray","glass"];var zonosCheckboxCss=":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:var(--amino-space-8);-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";var ZonosCheckboxStyle0=zonosCheckboxCss;var ZonosCheckbox=function(){function t(t){registerInstance(this,t);this.checkboxSelected=createEvent(this,"checkboxSelected",7);this.backgroundColor="blue";this.label=undefined;this.isChecked=false;this.isDisabled=false;this.size=12;this.fontSize="base";this.borderStyle=undefined}t.prototype.render=function(){var t=this;var e=colorPrefixes.includes(this.backgroundColor);var o=e?"var(--amino-".concat(this.backgroundColor,"-600)"):this.backgroundColor;var s=e?"var(--amino-".concat(this.backgroundColor,"-200)"):!isDarkColor(o)?"var(--amino-gray-800)":"var(--amino-gray-0)";var n=getBorderRadius(this.borderStyle,"4px");return h(Host,{key:"2ae2a0d33d34aafe96cc91e1cd7c7ee530dede4b",class:classes(["zonos--elements zonos--checkbox"]),style:{"--background-color":o,"--border-radius":n,"--font-family":zonosStoreFontFamily(),"--size":"".concat(this.size,"px")}},h("label",{key:"b9630027581a9f20374c2dfe88faa94cb50203c9",class:classes([this.isDisabled&&"disabled"])},h("input",{key:"d1b2411d9f906692f18514a15df1bb290f662164",checked:this.isChecked,disabled:this.isDisabled,hidden:true,onChange:function(e){t.checkboxSelected.emit(e.target.checked)},type:"checkbox"}),h("span",{key:"8fc3cda232615f446aff5db71cd992de5327b8e7",class:"checkmark-container"},h("svg",{key:"5b91a7a26abfd80850eb3c2bb2e045ef73abfd7a",class:"checkmark",color:s,fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},h("path",{key:"2046a40a75da63ac288c5def90d82ab0d0e0523c","clip-rule":"evenodd",d:"M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z",fill:"currentColor","fill-rule":"evenodd"}))),this.label&&h("zonos-text",{size:this.fontSize},this.label)))};return t}();ZonosCheckbox.style=ZonosCheckboxStyle0;var zonosCollapseCss=":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";var ZonosCollapseStyle0=zonosCollapseCss;var ZonosCollapse=function(){function t(t){registerInstance(this,t);this.collapsed=false;this.collapseSize=0;this.height=this.el.scrollHeight;this.iframe=null}t.prototype.getElementHeight=function(){var t="".concat(this.height,"px");var e="".concat(this.collapseSize,"px");return this.collapsed?e:t};t.prototype.componentDidLoad=function(){this.height=this.el.scrollHeight};t.prototype.componentDidRender=function(){var t=this;var e,o,s;this.iframe=((e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("iframe"))||null;(s=(o=this.iframe)===null||o===void 0?void 0:o.contentWindow)===null||s===void 0?void 0:s.addEventListener("resize",(function(){if(!t.iframe){return}t.height=parseFloat(getComputedStyle(t.iframe).height)}))};t.prototype.render=function(){var t=this;if(!this.collapsed){setTimeout((function(){if(!t.collapsed){t.el.style.overflow="visible"}}),300)}else{this.el.style.overflow="hidden"}return h(Host,{key:"032f5818dd8394b5111927907c8fa135a55fef5c",class:"zonos--elements zonos--collapse",style:{"--font-family":zonosStoreFontFamily(),height:this.getElementHeight()}},h("div",{key:"5ddbf406c93f37c9e23375f11dd8439934c0d2a5"},h("iframe",{key:"b3efa8bc198918dbb3284e8ce658ffca6249eaa8",class:"height-change-listener",tabindex:"-1",title:"collapse-height-change-listener"}),h("slot",{key:"ffcd123c3a046e62855a650da9972cde94a7774c"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZonosCollapse.style=ZonosCollapseStyle0;var zonosLinkAuthenticationCss=".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";var ZonosLinkAuthenticationStyle0=zonosLinkAuthenticationCss;var ZonosLinkAuthentication=function(){function t(t){registerInstance(this,t);this.titleText=undefined;this.stripe=stripeStore.stripe}t.prototype.watchInitStripe=function(){if(!this.stripe||!stripeStore.stripeElements){return}var t=stripeStore.stripeLinkElement||stripeStore.stripeElements.create("linkAuthentication");var e=this.el.querySelector(".zonos--link-authentication-component");if(!e){logError("Cannot find container element for linkAuthenticationElement");return}t.mount(e);t.on("change",(function(t){stripeStore.stripeLinkEventData=t;void stripeStorePrefetchLandedCost()}));stripeStore.stripeLinkElement=t};t.prototype.componentDidLoad=function(){this.watchInitStripe()};t.prototype.render=function(){return h(Host,{key:"a434761e3f237cd44971e458512c7649f214eb4d",class:"zonos--link-authentication zonos--elements"},h("zonos-text",{key:"0c350ff6dabb1c71376e4e6539a68613d7174189",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"e9cc2bd1e68b64e2fed41851a0d2f2be40583337",class:"zonos--link-authentication-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosLinkAuthentication.style=ZonosLinkAuthenticationStyle0;export{ZonosAddress as zonos_address,ZonosCheckbox as zonos_checkbox,ZonosCollapse as zonos_collapse,ZonosLinkAuthentication as zonos_link_authentication};
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(t,e,o,s){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,i){function a(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s["throw"](t))}catch(t){i(t)}}function c(t){t.done?o(t.value):n(t.value).then(a,r)}c((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,n,i,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return c([t,e])}}function c(r){if(s)throw new TypeError("Generator is already executing.");while(a&&(a=0,r[0]&&(o=0)),o)try{if(s=1,n&&(i=r[0]&2?n["return"]:r[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;if(n=0,i)r=[r[0]&2,i.value];switch(r[0]){case 0:case 1:i=r;break;case 4:o.label++;return{value:r[1],done:false};case 5:o.label++;n=r[1];r=[0];continue;case 7:r=o.ops.pop();o.trys.pop();continue;default:if(!(i=o.trys,i=i.length>0&&i[i.length-1])&&(r[0]===6||r[0]===2)){o=0;continue}if(r[0]===3&&(!i||r[1]>i[0]&&r[1]<i[3])){o.label=r[1];break}if(r[0]===6&&o.label<i[1]){o.label=i[1];i=r;break}if(i&&o.label<i[2]){o.label=i[2];o.ops.push(r);break}if(i[2])o.ops.pop();o.trys.pop();continue}r=e.call(t,o)}catch(t){r=[6,t];n=0}finally{s=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,d as getElement}from"./index-dd40cc85.js";import{j as stripeStore,d as logError,l as localizationStore,t as translate,n as stripeStorePrefetchLandedCost}from"./cart-228e1ef7.js";import{z as zonosStore,d as zonosStoreFontFamily}from"./zonosStore-c4c45591.js";import{i as isCheckoutMobile}from"./isCheckoutMobile-8846dccb.js";import{c as classes}from"./classes-0d95c529.js";import{g as getBorderRadius}from"./getBorderRadius-a89e45fb.js";import{i as isDarkColor}from"./isDarkColor-6bf71e51.js";var containsNonLatinChars=function(t){var e=/[ʼˮ՚ߴߵ']{1}/u;var o=/[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;var s=Object.entries(t).reduce((function(t,s){var n;var i=s[0],a=s[1];return o.test(a)&&!e.test(a)?Object.assign(Object.assign({},t),(n={},n[i]=true,n)):t}),{});return s};var zonosAddressCss=".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:var(--amino-space-8)}";var ZonosAddressStyle0=zonosAddressCss;var ZonosAddress=function(){function t(t){registerInstance(this,t);this.invalidCharacters=createEvent(this,"invalidCharacters",7);this.type=undefined;this.titleText=undefined;this.defaultAddress=null;this.stripe=window.Zonos.stripe;this.hasInvalidCharacters=false;this.isDirtyAddress=false}t.prototype.getStripeAddressInstance=function(){if(this.type==="billing"){return{stripeAddressElement:stripeStore.stripeBillingAddressElement,stripeAddressEventData:stripeStore.stripeBillingAddressEventData,stripeElements:stripeStore.stripeElementsForBillingAddress}}return{stripeAddressElement:stripeStore.stripeAddressElement,stripeAddressEventData:stripeStore.stripeAddressEventData,stripeElements:stripeStore.stripeElements}};t.prototype.updateAddressEventData=function(t){var e=t.event,o=t.type;switch(o){case"billing":stripeStore.stripeBillingAddressEventData=e;break;default:stripeStore.stripeAddressEventData=e;break}var s=this.checkInvalidCharacters(e);this.invalidCharacters.emit(s);this.hasInvalidCharacters=s;if(s){return}};t.prototype.updateAddressElement=function(t){var e=t.stripeAddressElement,o=t.type;if(o==="shipping"){stripeStore.stripeAddressElement=e;return}stripeStore.stripeBillingAddressElement=e};t.prototype.checkInvalidCharacters=function(t){if(!t.complete||zonosStore.checkoutSettings.allowedCharacterSets==="ALL"){return false}var e=t.value,o=e.address,s=e.firstName,n=e.lastName,i=e.name;var a=o.city,r=o.country,c=o.line1,h=o.line2,l=o.postal_code,d=o.state;var u=containsNonLatinChars({city:a,country:r,line1:c,line2:h||"",name:i||"".concat(s," ").concat(n),postal_code:l,state:d});if(Object.keys(u).length){return true}return false};t.prototype.watchInitStripe=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,o,s,n,i,a,r,c;var h=this;return __generator(this,(function(l){this.stripe=window.Zonos.stripe;o=this.getStripeAddressInstance(),s=o.stripeAddressEventData,n=o.stripeElements;if(!this.stripe||!n){logError("Stripe is not initialized. Couldn't load stripe element.");return[2]}i=(t=this.defaultAddress)===null||t===void 0?void 0:t.phone;if(!i){(e=this.defaultAddress)===null||e===void 0?true:delete e.phone}a=localizationStore.shippingZoneCountries;r=a?Object.values(a).map((function(t){return t.code})):[];c=n.create("address",{allowedCountries:this.type==="shipping"?r:[],contacts:this.defaultAddress&&!s?[this.defaultAddress]:[],defaultValues:{address:Object.assign(Object.assign({},s===null||s===void 0?void 0:s.value.address),{country:(s===null||s===void 0?void 0:s.value.address.country)||localizationStore.selectedCountryCode||"AL"}),firstName:s===null||s===void 0?void 0:s.value.firstName,lastName:s===null||s===void 0?void 0:s.value.lastName,phone:s===null||s===void 0?void 0:s.value.phone},display:{name:"split"},fields:{phone:"always"},mode:this.type,validation:{phone:{required:"always"}}});c.mount(this.el.querySelector(".zonos--address-component"));c.on("change",(function(t){var e=t.value;if(!h.isDirtyAddress&&e.address.line1.length>=3){h.isDirtyAddress=true;setTimeout((function(){if(isCheckoutMobile()){h.el.scrollIntoView({behavior:"smooth",block:"end"})}else{var t=h.type==="shipping"?100:600;var e=h.el.closest(".zonos--group");var o=h.el.getBoundingClientRect().top+t;e===null||e===void 0?void 0:e.scrollTo({behavior:"smooth",top:o})}}),600)}h.updateAddressEventData({event:Object.assign(Object.assign({},t),{elementMode:h.type,elementType:"address",value:Object.assign(Object.assign({},e),{firstName:e.firstName||e.name.split(" ")[0],lastName:e.lastName||e.name.split(" ")[1]})}),type:h.type})}));this.updateAddressElement({stripeAddressElement:c,type:this.type});return[2]}))}))};t.prototype.disconnectedCallback=function(){var t=this.getStripeAddressInstance().stripeAddressElement;t===null||t===void 0?void 0:t.destroy()};t.prototype.componentDidLoad=function(){var t=this;var e=this.getStripeAddressInstance().stripeAddressEventData;this.isDirtyAddress=!!e&&e.value.address.line1.length>0;void this.watchInitStripe();setTimeout((function(){var e=t.getStripeAddressInstance().stripeAddressEventData;if(e){t.checkInvalidCharacters(e)}}),500)};t.prototype.render=function(){return h(Host,{key:"81b9d2e822eea4eb85a3d7d21ff645c9f0841f30",class:"zonos--address zonos--elements"},h("zonos-text",{key:"cd180e130f161233fd05365f9250913214846ced",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"b4d15f56e1215305367c071c4d9be985b09245b8",class:"zonos--address-component"}),this.hasInvalidCharacters&&h("zonos-banner",{bannerTitle:translate("Please ensure your text uses the Latin alphabet only (A-Z, a-z)."),intent:"error"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosAddress.style=ZonosAddressStyle0;var colorPrefixes=["blue","cyan","green","orange","purple","red","gray","glass"];var zonosCheckboxCss=":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:var(--amino-space-8);-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";var ZonosCheckboxStyle0=zonosCheckboxCss;var ZonosCheckbox=function(){function t(t){registerInstance(this,t);this.checkboxSelected=createEvent(this,"checkboxSelected",7);this.backgroundColor="blue";this.label=undefined;this.isChecked=false;this.isDisabled=false;this.size=12;this.fontSize="base";this.borderStyle=undefined}t.prototype.render=function(){var t=this;var e=colorPrefixes.includes(this.backgroundColor);var o=e?"var(--amino-".concat(this.backgroundColor,"-600)"):this.backgroundColor;var s=e?"var(--amino-".concat(this.backgroundColor,"-200)"):!isDarkColor(o)?"var(--amino-gray-800)":"var(--amino-gray-0)";var n=getBorderRadius(this.borderStyle,"4px");return h(Host,{key:"2ae2a0d33d34aafe96cc91e1cd7c7ee530dede4b",class:classes(["zonos--elements zonos--checkbox"]),style:{"--background-color":o,"--border-radius":n,"--font-family":zonosStoreFontFamily(),"--size":"".concat(this.size,"px")}},h("label",{key:"b9630027581a9f20374c2dfe88faa94cb50203c9",class:classes([this.isDisabled&&"disabled"])},h("input",{key:"d1b2411d9f906692f18514a15df1bb290f662164",checked:this.isChecked,disabled:this.isDisabled,hidden:true,onChange:function(e){t.checkboxSelected.emit(e.target.checked)},type:"checkbox"}),h("span",{key:"8fc3cda232615f446aff5db71cd992de5327b8e7",class:"checkmark-container"},h("svg",{key:"5b91a7a26abfd80850eb3c2bb2e045ef73abfd7a",class:"checkmark",color:s,fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},h("path",{key:"2046a40a75da63ac288c5def90d82ab0d0e0523c","clip-rule":"evenodd",d:"M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z",fill:"currentColor","fill-rule":"evenodd"}))),this.label&&h("zonos-text",{size:this.fontSize},this.label)))};return t}();ZonosCheckbox.style=ZonosCheckboxStyle0;var zonosCollapseCss=":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";var ZonosCollapseStyle0=zonosCollapseCss;var ZonosCollapse=function(){function t(t){registerInstance(this,t);this.collapsed=false;this.collapseSize=0;this.height=this.el.scrollHeight;this.iframe=null}t.prototype.getElementHeight=function(){var t="".concat(this.height,"px");var e="".concat(this.collapseSize,"px");return this.collapsed?e:t};t.prototype.componentDidLoad=function(){this.height=this.el.scrollHeight};t.prototype.componentDidRender=function(){var t=this;var e,o,s;this.iframe=((e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("iframe"))||null;(s=(o=this.iframe)===null||o===void 0?void 0:o.contentWindow)===null||s===void 0?void 0:s.addEventListener("resize",(function(){if(!t.iframe){return}t.height=parseFloat(getComputedStyle(t.iframe).height)}))};t.prototype.render=function(){var t=this;if(!this.collapsed){setTimeout((function(){if(!t.collapsed){t.el.style.overflow="visible"}}),300)}else{this.el.style.overflow="hidden"}return h(Host,{key:"032f5818dd8394b5111927907c8fa135a55fef5c",class:"zonos--elements zonos--collapse",style:{"--font-family":zonosStoreFontFamily(),height:this.getElementHeight()}},h("div",{key:"5ddbf406c93f37c9e23375f11dd8439934c0d2a5"},h("iframe",{key:"b3efa8bc198918dbb3284e8ce658ffca6249eaa8",class:"height-change-listener",tabindex:"-1",title:"collapse-height-change-listener"}),h("slot",{key:"ffcd123c3a046e62855a650da9972cde94a7774c"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZonosCollapse.style=ZonosCollapseStyle0;var zonosLinkAuthenticationCss=".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";var ZonosLinkAuthenticationStyle0=zonosLinkAuthenticationCss;var ZonosLinkAuthentication=function(){function t(t){registerInstance(this,t);this.titleText=undefined;this.stripe=stripeStore.stripe}t.prototype.watchInitStripe=function(){if(!this.stripe||!stripeStore.stripeElements){return}var t=stripeStore.stripeLinkElement||stripeStore.stripeElements.create("linkAuthentication");var e=this.el.querySelector(".zonos--link-authentication-component");if(!e){logError("Cannot find container element for linkAuthenticationElement");return}t.mount(e);t.on("change",(function(t){stripeStore.stripeLinkEventData=t;void stripeStorePrefetchLandedCost()}));stripeStore.stripeLinkElement=t};t.prototype.componentDidLoad=function(){this.watchInitStripe()};t.prototype.render=function(){return h(Host,{key:"a434761e3f237cd44971e458512c7649f214eb4d",class:"zonos--link-authentication zonos--elements"},h("zonos-text",{key:"0c350ff6dabb1c71376e4e6539a68613d7174189",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"e9cc2bd1e68b64e2fed41851a0d2f2be40583337",class:"zonos--link-authentication-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosLinkAuthentication.style=ZonosLinkAuthenticationStyle0;export{ZonosAddress as zonos_address,ZonosCheckbox as zonos_checkbox,ZonosCollapse as zonos_collapse,ZonosLinkAuthentication as zonos_link_authentication};
|