@zonos/elements 1.3.204 → 1.3.206

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -14,6 +14,75 @@ export class ZonosButton {
          * Inherited attributes from the host element
          */
         this.inheritedAttributes = {};
+        /**
+         * Whether or not the button is disabled
+         * @note Prop should not conflict name with native html attribute if the prop is also affected by another prop.
+         * The issue is the component has internal disabled @prop(). @prop decorator is to watch the update of the attribute of the component in the dom.
+         * And `disabled` prop is not an only factor to determine the component is disabled. isLoading @prop() also affect that.
+         * <Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.
+         *  So let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.
+         * It accidentally turns the disabled prop on even thought the disabled state is not changed from the outside.
+         */
+        this.isDisabled = false;
+        /**
+         * The icon element to display
+         * @default null
+         */
+        this.icon = null;
+        /**
+         * Whether or not the icon is on the right
+         * @default false
+         */
+        this.iconRight = false;
+        /**
+         * The size of the button
+         * @default 'sm'
+         */
+        this.size = 'sm';
+        /**
+         * The variance of the button
+         * @note If the button `variant` is set to 'standard', backgroundColor will be disregarded
+         * @default standard
+         */
+        this.variant = 'standard';
+        /**
+         * Whether or not the button has a background
+         * @default false
+         */
+        this.noBackground = false;
+        /**
+         * Whether or not the button has a box shadow
+         */
+        this.withBoxShadow = false;
+        /**
+         * Whether or not the button has a left padding
+         */
+        this.noPaddingLeft = false;
+        /**
+         * Whether or not the button has a right padding
+         */
+        this.noPaddingRight = false;
+        /**
+         * Whether or not the button is loading
+         */
+        this.loading = false;
+        /**
+         * The content alignment within the button
+         * @default 'center'
+         */
+        this.justifyContent = 'center';
+        /**
+         * Whether or not the button text color is bold
+         */
+        this.bold = false;
+        /**
+         * Whether or not the button has an icon
+         */
+        this.hasIcon = !!this.icon;
+        /**
+         * Whether or not the button has content
+         */
+        this.hasContent = false;
         /**
          * Detect if the button has an content
          */
@@ -84,24 +153,6 @@ export class ZonosButton {
                 }
             }
         };
-        this.buttonColor = undefined;
-        this.backgroundColor = undefined;
-        this.borderStyle = undefined;
-        this.isDisabled = false;
-        this.icon = null;
-        this.iconRight = false;
-        this.size = 'sm';
-        this.variant = 'standard';
-        this.noBackground = false;
-        this.withBoxShadow = false;
-        this.noPaddingLeft = false;
-        this.noPaddingRight = false;
-        this.loading = false;
-        this.justifyContent = 'center';
-        this.bold = false;
-        this.theme = undefined;
-        this.hasIcon = !!this.icon;
-        this.hasContent = false;
     }
     /**
      * Detect if the icon changes and update the state accordingly

package/dist/collection/components/common/zonos-card/zonos-card.js

@@ -5,13 +5,14 @@ import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 export class ZonosCard {
     constructor() {
-        this.actions = undefined;
-        this.backgroundColor = undefined;
+        /**
+         * The border radius of the card
+         * @default 6
+         */
         this.borderRadius = 6;
-        this.footerActions = undefined;
-        this.footerContent = undefined;
-        this.footerHeight = undefined;
-        this.label = undefined;
+        /**
+         * The spacing to apply between elements in the card
+         */
         this.spacing = '24px';
     }
     render() {

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -8,13 +8,26 @@ let inputId = 0;
 export class ZonosCheckbox {
     constructor() {
         this.inputId = `zonos--checkbox-${++inputId}`;
+        /**
+         * background color of the checkbox
+         */
         this.backgroundColor = 'blue';
-        this.label = undefined;
+        /**
+         * Whether or not the checkbox is checked
+         */
         this.isChecked = false;
+        /**
+         * Whether or not the checkbox is disabled
+         */
         this.isDisabled = false;
+        /**
+         * Size of the checkbox
+         */
         this.size = 12;
+        /**
+         * Font size of the checkbox text
+         */
         this.fontSize = 'base';
-        this.borderStyle = undefined;
     }
     onClick() {
         if (this.isDisabled) {

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -10,6 +10,14 @@ import { resetToSelectedTab } from "../../utils/resetToSelectedTab";
 import TabCheckmark from "./assets/TabCheckmark.svg";
 export class ZonosCheckoutProgressTabs {
     constructor() {
+        /**
+         * Color of the tab progress bar and label, override the secondary color of the appearance settings
+         */
+        this.tabColor = null;
+        /**
+         * Background color of the parent that's wrapped around the tab progress bar
+         */
+        this.backgroundColor = null;
         /**
          * The total number of steps that's done
          */
@@ -33,8 +41,6 @@ export class ZonosCheckoutProgressTabs {
                 .slice(0, currentTab.index - 1)
                 .every(tab => tab.isDone);
         };
-        this.tabColor = null;
-        this.backgroundColor = null;
     }
     /**
      * Set the tab items data. This is to be used in storybook

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -3,7 +3,13 @@ import { Host } from "@stencil/core/internal";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 export class ZonosCollapse {
     constructor() {
+        /**
+         * Collapsed state of the element
+         */
         this.collapsed = false;
+        /**
+         * Collapsed size when collapsed
+         */
         this.collapseSize = 0;
         this.height = this.el.scrollHeight;
         this.iframe = null;

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.js

@@ -11,22 +11,47 @@ import HelpDuotoneIcon from "./assets/HelpDuotoneIcon.svg";
 import WarningDuotoneIcon from "./assets/WarningDuotoneIcon.svg";
 export class ZonosConfirmDialog {
     constructor() {
-        this.clickOutsideDialogHandler = (event) => {
-            if (event.target === event.currentTarget && !this.noClickOutside) {
-                this.closeDialogHandler();
-            }
-        };
+        /**
+         * Dialog title text
+         * @default "Are you sure?"
+         */
         this.dialogTitle = translate('Are you sure?');
+        /**
+         * Dialog intent (for icon and button color)
+         * @default "info"
+         */
         this.dialogIntent = 'info';
+        /**
+         * Dialog subtitle text
+         * @default null No subtitle
+         */
         this.dialogSubtitle = null;
-        this.submitBtnColor = undefined;
-        this.dialogConfirmBtnText = undefined;
+        /**
+         * Dialog width
+         * @default 350 px
+         */
         this.dialogWidth = 350;
-        this.dialogCancelBtnText = undefined;
+        /**
+         * Type of dialog
+         * - "alert" - Only confirm button
+         * - "confirm" - Both Confirm and cancel buttons
+         * @default "confirm"
+         */
         this.dialogType = 'confirm';
+        /**
+         * Whether or not the dialog is open
+         */
         this.isMobile = false;
-        this.dialogOpen = undefined;
+        /**
+         * Whether or not to close the dialog when clicking outside of it
+         * @default false
+         */
         this.noClickOutside = false;
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialogHandler();
+            }
+        };
     }
     handleKeyDown(ev) {
         if (ev.key === 'Escape') {

package/dist/collection/components/common/zonos-country-flag/zonos-country-flag.js

@@ -5,8 +5,12 @@ import { classes } from "../../utils/classes";
 const FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;
 export class ZonosCountryFlag {
     constructor() {
+        /**
+         * The country code for the flag
+         * @default localizationStore.selectedCountryCode
+         * @example 'US'
+         */
         this.countryCode = localizationStore.selectedCountryCode;
-        this.size = undefined;
     }
     render() {
         if (!this.el.shadowRoot || !this.countryCode) {

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -7,6 +7,12 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import GreenCheckDuotoneIcon from "./assets/greenCheckDuotone.svg";
 export class ZonosCountrySelect {
     constructor() {
+        /**
+         * Function to close the country select
+         * @default () => {}
+         */
+        this.handleOnClose = () => { };
+        this.inputValue = '';
         this.countrySelected = (countryCode) => {
             // mutate the selected country code in store
             void localizationStoreUpdateSelectedCountryCode(countryCode);
@@ -23,8 +29,6 @@ export class ZonosCountrySelect {
                 countryListSelector.scrollTop = 0;
             }
         };
-        this.handleOnClose = () => { };
-        this.inputValue = '';
     }
     componentDidRender() {
         var _a, _b;

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -3,7 +3,13 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { formatStringWithLinks } from "../../utils/formatStringWithLinks";
 export class ZonosCustomMessage {
     constructor() {
+        /**
+         * The custom message icon
+         */
         this.icon = '';
+        /**
+         * The custom message text
+         */
         this.message = '';
     }
     render() {

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js

@@ -7,6 +7,54 @@ import { getBorderRadius } from "../../utils/getBorderRadius";
 import RemoveIcon from "./assets/removeIcon.svg";
 export class ZonosDialog {
     constructor() {
+        /**
+         * Whether or not the dialog is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * The header text for the dialog
+         */
+        this.headerText = '';
+        /**
+         * The width of the dialog
+         * @default 460px
+         */
+        this.width = '460px';
+        /**
+         * Whether or not to show the header
+         * @default false
+         */
+        this.noHeader = false;
+        /**
+         * Whether or not to have body padding
+         * @default false
+         */
+        this.noBodyPadding = false;
+        /**
+         * Whether or not to have body padding
+         * @default false
+         */
+        this.noBorder = false;
+        /**
+         * Whether or not to show the close button
+         * @default false
+         */
+        this.noCloseButton = false;
+        /**
+         * Whether or not to close the dialog when clicking outside of it
+         * @default false
+         */
+        this.noClickOutside = false;
+        /**
+         * Flag to determine if the checkout is on mobile
+         */
+        this.mobile = false;
+        /**
+         * Load loading spinner for the dialog or not
+         */
+        this.isLoading = true;
+        this.isMobile = false;
         this.isMobileMode = () => {
             return this.mobile || window.innerWidth <= 768;
         };
@@ -22,20 +70,6 @@ export class ZonosDialog {
                 this.closeDialog.emit();
             }
         };
-        this.open = false;
-        this.headerText = '';
-        this.width = '460px';
-        this.height = undefined;
-        this.minHeight = undefined;
-        this.noHeader = false;
-        this.noBodyPadding = false;
-        this.noBorder = false;
-        this.borderStyle = undefined;
-        this.noCloseButton = false;
-        this.noClickOutside = false;
-        this.mobile = false;
-        this.isLoading = true;
-        this.isMobile = false;
     }
     handleWindowResize() {
         this.isMobile = this.isMobileMode();

package/dist/collection/components/common/zonos-icon/zonos-icon.js

@@ -3,9 +3,20 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { isColorVariable } from "../../utils/isColorVariable";
 export class ZonosIcon {
     constructor() {
+        /**
+         * Determines if the icon should be auto height instead of square
+         * @default false
+         */
         this.autoHeight = false;
+        /**
+         * Color of the SVG
+         * @default 'gray-1000'
+         */
         this.iconColor = 'gray-1000';
-        this.content = undefined;
+        /**
+         * The size of the icon
+         * @default 24
+         */
         this.size = 24;
     }
     render() {

package/dist/collection/components/common/zonos-input/zonos-input.js

@@ -4,11 +4,25 @@ import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 export class ZonosInput {
     constructor() {
+        /**
+         * Value of the input
+         */
         this.inputValue = '';
-        this.inputLabel = undefined;
+        /**
+         * Input size
+         */
         this.inputSize = 'md';
+        /**
+         * Disables the input
+         */
         this.isDisabled = false;
+        /**
+         * Error state of the input
+         */
         this.isError = false;
+        /**
+         * Placeholder for the input
+         */
         this.inputPlaceholder = '';
         this.value = this.inputValue;
     }

package/dist/collection/components/common/zonos-language-select/zonos-language-select.js

@@ -7,12 +7,16 @@ import { languages } from "../../../types/ILanguage";
 import GreenCheckDuotoneIcon from "./assets/greenCheckDuotone.svg";
 export class ZonosLanguageSelect {
     constructor() {
+        /**
+         * Function to close the language select
+         * @default () => {}
+         */
+        this.handleOnClose = () => { };
         this.languageSelected = (languageCode) => {
             // mutate the selected language code in store
             void localizationStoreUpdateSelectedLocale(languageCode);
             this.handleOnClose();
         };
-        this.handleOnClose = () => { };
     }
     render() {
         const { selectedLocale } = localizationStore;

package/dist/collection/components/common/zonos-link/zonos-link.js

@@ -1,10 +1,10 @@
 import { h, Host } from "@stencil/core";
 export class ZonosLink {
     constructor() {
+        /**
+         * The href for the link
+         */
         this.href = '';
-        this.rel = undefined;
-        this.target = undefined;
-        this.linkTitle = undefined;
     }
     render() {
         return (h(Host, { key: '41f0a757a334338631250764599ac99e28c41ed2', class: "zonos--elements" }, h("a", { key: 'b6e84f40141e8de85d005c05426f885f242ffc53', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'dd5ed33f163d7958fb7806992e003d2279ee1f5b' }))));

package/dist/collection/components/common/zonos-loading-overlay/zonos-loading-overlay.js

@@ -2,8 +2,14 @@ import { h, Host } from "@stencil/core";
 import { classes } from "../../utils/classes";
 export class ZonosLoadingOverlay {
     constructor() {
+        /**
+         * Whether or not the overlay is open
+         * @default false
+         */
         this.open = false;
-        this.spinnerColor = undefined;
+        /**
+         * Spinner size (optional, default 40)
+         */
         this.size = 40;
     }
     render() {

package/dist/collection/components/common/zonos-logo/zonos-logo.js

@@ -3,7 +3,13 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosLogo {
     constructor() {
+        /**
+         * Theme to change the color of the logo
+         */
         this.theme = 'LIGHT';
+        /**
+         * The width of the logo
+         */
         this.width = 'auto';
     }
     render() {

package/dist/collection/components/common/zonos-rest-state/zonos-rest-state.js

@@ -3,14 +3,14 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosRestState {
     constructor() {
+        /**
+         * Whether or not the image failed to load
+         */
+        this.isErrorImageLoad = false;
         this.getImageRestState = () => {
             const imageSrc = getAssetPath(`./assets/${this.restStateType}.png`);
             return imageSrc;
         };
-        this.restStateSubtitle = undefined;
-        this.restStateTitle = undefined;
-        this.restStateType = undefined;
-        this.isErrorImageLoad = false;
     }
     render() {
         const imageUrl = this.getImageRestState();

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.js

@@ -4,7 +4,14 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import RemoveIcon from "./assets/removeIcon.svg";
 export class ZonosSelectDialogHeader {
     constructor() {
+        /**
+         * Callback to do something on close
+         * @default () => {}
+         */
         this.handleOnClose = () => { };
+        /**
+         * The label for the select dialog
+         */
         this.label = '';
     }
     render() {

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -5,6 +5,11 @@ import { getBorderRadius } from "../../utils/getBorderRadius";
 import { isColorVariable } from "../../utils/isColorVariable";
 export class ZonosShippingRichRadio {
     constructor() {
+        /**
+         * Selected item
+         * @default {null|firstItem}
+         */
+        this.selectedItem = null;
         this.handleRichRadioSelect = (item) => {
             var _a;
             (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
@@ -21,11 +26,6 @@ export class ZonosShippingRichRadio {
                 '--zonos--selected-border-color': secondaryColor || 'unset',
             };
         };
-        this.items = undefined;
-        this.borderColor = undefined;
-        this.borderStyle = undefined;
-        this.theme = undefined;
-        this.selectedItem = null;
     }
     render() {
         var _a;

package/dist/collection/components/common/zonos-spinner/zonos-spinner.js

@@ -2,8 +2,11 @@ import { h, Host } from "@stencil/core";
 import { classes } from "../../utils/classes";
 export class ZonosSpinner {
     constructor() {
+        /**
+         * The size of the spinner
+         * @default 32
+         */
         this.size = 32;
-        this.spinnerColor = undefined;
     }
     render() {
         if (!this.el.shadowRoot) {

package/dist/collection/components/common/zonos-stripe-input/zonos-stripe-input.js

@@ -15,17 +15,33 @@ export class ZonosStripeInput {
          */
         this.inheritedAttributes = {};
         this.inputId = `zonos--input-${++inputId}`;
-        this.name = undefined;
-        this.autoComplete = undefined;
+        /**
+         * Value of the stripeInput
+         */
         this.inputValue = '';
-        this.inputLabel = undefined;
-        this.overridePrimaryColor = undefined;
-        this.overrideSecondaryColor = undefined;
+        /**
+         * Disables the input
+         */
         this.isDisabled = false;
+        /**
+         * Error state of the input
+         */
         this.isError = false;
+        /**
+         * Error message of the input
+         */
         this.error = '';
+        /**
+         * Placeholder for the input
+         */
         this.inputPlaceholder = '';
+        /**
+         * The value of the input.
+         */
         this.value = '';
+        /**
+         * Whether the input is required
+         */
         this.required = false;
         this.internalValue = this.inputValue;
     }

package/dist/collection/components/common/zonos-stripe-phone-input/zonos-stripe-phone-input.js

@@ -16,6 +16,25 @@ export class ZonosStripePhoneInput {
          * Inherited attributes from the host element
          */
         this.inheritedAttributes = {};
+        /**
+         * The autoComplete attribute for the phone input
+         */
+        this.autoComplete = '';
+        /**
+         * Available country options for the select dropdown
+         */
+        this.countryOptions = null;
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * The country code of the phone input
+         */
+        this.countryCode = null;
+        this.phoneNumber = '';
+        this.isFocused = false;
+        this.isSelectOpen = false;
         this.handleCountryChange = (event) => {
             var _a;
             const select = event.target;
@@ -102,20 +121,6 @@ export class ZonosStripePhoneInput {
             // Update the phone formatter to use the new country code
             this.updatePhoneFormatter();
         };
-        this.autoComplete = '';
-        this.countryOptions = null;
-        this.disabled = false;
-        this.error = undefined;
-        this.inputLabel = undefined;
-        this.overridePrimaryColor = undefined;
-        this.overrideSecondaryColor = undefined;
-        this.inputValue = undefined;
-        this.countryCode = null;
-        this.minWidth = undefined;
-        this.selectedCountry = undefined;
-        this.phoneNumber = '';
-        this.isFocused = false;
-        this.isSelectOpen = false;
     }
     onCountryOptionsChange() {
         // Re-initialize the phone number value when the country options change