@zonos/elements 1.3.204 → 1.3.205

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() {

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -6,16 +6,11 @@ import { h, Host } from "@stencil/core";
  */
 export class ZonosVirtualScroll {
     constructor() {
+        this.scrollTop = 0;
+        this.totalHeight = 1;
         this.scrollListener = (_ev) => {
             this.scrollTop = this.ele.scrollTop;
         };
-        this.container = undefined;
-        this.renderItem = undefined;
-        this.itemWidth = undefined;
-        this.fallbackItemHeight = undefined;
-        this.itemHeights = undefined;
-        this.scrollTop = 0;
-        this.totalHeight = 1;
     }
     updateTotalHeight() {
         this.totalHeight = this.itemHeights.reduce((acc, height) => acc + (height || this.fallbackItemHeight), 0);

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -2,8 +2,17 @@ import { h } from "@stencil/core";
 import { format } from "../../../utils/format";
 export class ZonosComponent {
     constructor() {
+        /**
+         * The first name
+         */
         this.first = '';
+        /**
+         * The middle name
+         */
         this.middle = '';
+        /**
+         * The last name
+         */
         this.last = '';
     }
     getText() {

package/dist/collection/components/hello/zonos-hello/zonos-hello.js

@@ -19,6 +19,31 @@ import { mergeConfig } from "../../utils/mergeConfig";
 const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
 export class ZonosHello {
     constructor() {
+        this.showPeekMessage = false;
+        this.zonosStoreHelloSettings = zonosStore.helloSettings;
+        this.showDialog = false;
+        this.peekMessage = '';
+        this.initialUrl = '';
+        /**
+         * This array will hold all restricted items handled by Hello thus far
+         */
+        this.allRestrictedItems = [];
+        /**
+         * This array will hold all products handled by Hello thus far
+         */
+        this.allFoundProducts = [];
+        /**
+         * This array will hold all products currently on the page
+         */
+        this.productsOnPage = [];
+        /**
+         * Hello widget is rendered on the screen, this should only triggered once
+         */
+        this.isHelloWidgetRendered = false;
+        /**
+         * Determine if the window is mobile
+         */
+        this.isMobile = false;
         this.getHelloPeekMessage = (organizationName) => {
             const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
                 zonosStore.currentHelloPage === 'productList';
@@ -193,19 +218,6 @@ export class ZonosHello {
             }
             return showForCountries === null || showForCountries === void 0 ? void 0 : showForCountries.includes(localizationStore.selectedCountryCode || '');
         };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettingsOverride = undefined;
-        this.showPeekMessage = false;
-        this.zonosStoreHelloSettings = zonosStore.helloSettings;
-        this.showDialog = false;
-        this.peekMessage = '';
-        this.initialUrl = '';
-        this.allRestrictedItems = [];
-        this.allFoundProducts = [];
-        this.productsOnPage = [];
-        this.isHelloWidgetRendered = false;
-        this.isMobile = false;
     }
     /**
      * Get the country list the hello widget's country select is using

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -8,8 +8,15 @@ import Globe from "./assets/globe.svg";
 import ZonosIcon from "./assets/zonosIcon.svg";
 export class ZonosHelloDialogFooter {
     constructor() {
-        this.appearanceSettings = undefined;
+        /**
+         * Whether or not the country select dialog is open
+         * @default false
+         */
         this.setShowCountrySelect = () => { };
+        /**
+         * Whether or not the language select dialog is open
+         * @default false
+         */
         this.setShowLanguageSelect = () => { };
     }
     render() {

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.css

@@ -187,8 +187,6 @@
   :host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left {
     transform-origin: bottom;
   }
-}
-@media (max-width: 768px) {
   :host .zonos--hello-dialog.zonos--hello-dialog-open {
     opacity: 1;
     transform: scaleY(1);

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

@@ -26,6 +26,23 @@ const dutyTaxMessage_AU_lowValueGST = `${translate('The low-value GST law passed
 })}`;
 export class ZonosHelloDialog {
     constructor() {
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isOpen = false;
+        /**
+         * The function to set the open state
+         * @default () => {}
+         */
+        this.setIsOpen = () => { };
+        /**
+         * Item restrictions array if any
+         * @default []
+         */
+        this.restrictedItems = [];
+        this.welcomeMessage = 'Welcome to our Demo App!';
+        this.showCountrySelect = false;
+        this.showLanguageSelect = false;
         this.clickOutsideDialogHandler = (e) => {
             if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
                 this.setIsOpen(false);
@@ -190,15 +207,6 @@ export class ZonosHelloDialog {
                     return null;
             }
         };
-        this.isOpen = false;
-        this.setIsOpen = () => { };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettings = undefined;
-        this.restrictedItems = [];
-        this.welcomeMessage = 'Welcome to our Demo App!';
-        this.showCountrySelect = false;
-        this.showLanguageSelect = false;
     }
     globalClickHandler(e) {
         this.clickOutsideDialogHandler(e);

package/dist/collection/components/main/zonos-controller.js

@@ -11,10 +11,6 @@ import { CheckoutAddressService } from "../utils/iframe/CheckoutAddressService";
 import { iframeServices, injectPrivateIframe, } from "../utils/iframe/IframeHelpers";
 import { log } from "../utils/logging/log";
 export class ZonosController {
-    constructor() {
-        this.config = undefined;
-        this.zonosApiKey = undefined;
-    }
     /**
      * Method to initialize checkout element
      */