@zonos/elements 1.3.203 → 1.3.205

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

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

@@ -17,30 +17,55 @@ export class ZonosStripeSelect {
          */
         this.inheritedAttributes = {};
         this.selectId = `zonos--select-${++selectId}`;
-        this.handleClear = (e) => {
-            e.stopPropagation();
-            this.internalValue = '';
-            this.selectChange.emit('');
-            this.el.selectedValue = '';
-            this.el.dispatchEvent(new Event('change'));
-        };
-        this.name = undefined;
+        /**
+         * Selected value of the select
+         */
         this.selectedValue = '';
-        this.selectLabel = undefined;
-        this.overridePrimaryColor = undefined;
-        this.overrideSecondaryColor = undefined;
+        /**
+         * Disables the select
+         */
         this.isDisabled = false;
+        /**
+         * Error state of the select
+         */
         this.isError = false;
+        /**
+         * Error message of the select
+         */
         this.error = '';
+        /**
+         * Placeholder for the select
+         */
         this.selectPlaceholder = '';
+        /**
+         * Options for the select. Must be set using a query selector.
+         */
         this.options = [];
+        /**
+         * The autoComplete attribute for the select.
+         */
         this.autoComplete = '';
+        /**
+         * The value of the select.
+         */
         this.value = '';
+        /**
+         * Whether the select is required
+         */
         this.required = false;
+        /**
+         * Whether the select can be cleared
+         */
         this.isClearable = false;
-        this.minWidth = undefined;
         this.internalValue = this.selectedValue;
         this.internalOptions = this.options;
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.internalValue = '';
+            this.selectChange.emit('');
+            this.el.selectedValue = '';
+            this.el.dispatchEvent(new Event('change'));
+        };
     }
     onOptionsChange(newValue) {
         this.internalOptions = newValue;

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

@@ -6,10 +6,17 @@ import { styles } from "../../utils/styles";
 import { textOptions, } from "../../../types/styles/Text";
 export class ZonosText {
     constructor() {
+        /**
+         * The icon element to display
+         */
         this.textColor = 'gray-1000';
-        this.size = undefined;
+        /**
+         * Type of the text to display
+         */
         this.type = 'body';
-        this.weight = undefined;
+        /**
+         * Whether or not the component is ready
+         */
         this.ready = false;
     }
     componentDidRender() {

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

@@ -3,8 +3,10 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosToggle {
     constructor() {
+        /**
+         * Options for the toggle
+         */
         this.options = [];
-        this.value = undefined;
     }
     render() {
         return (h(Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes(['zonos--elements zonos--toggle']), style: {

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

@@ -2,7 +2,13 @@ import { h, Host } from "@stencil/core";
 import { classes } from "../../utils/classes";
 export class ZonosTooltip {
     constructor() {
+        /**
+         * The title of the tooltip
+         */
         this.label = '';
+        /**
+         * The subtitle of the tooltip
+         */
         this.subtitle = '';
         this.showTooltip = false;
     }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -4,6 +4,10 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class VStack {
     constructor() {
+        /**
+         * The spacing between elements in the stack
+         * @default 24
+         */
         this.spacing = 24;
     }
     render() {