@zonos/elements 1.0.16

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm-es5/index.js';

package/dist/types/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.d.ts

@@ -0,0 +1,4 @@
+export declare class ZonosCartItems {
+  errorImages: string[];
+  render(): any;
+}

package/dist/types/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.d.ts

@@ -0,0 +1,3 @@
+export declare class ZonosCartSubtotal {
+  render(): any;
+}

package/dist/types/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.d.ts

@@ -0,0 +1,36 @@
+import { type EventEmitter } from '../../../../stencil-public-runtime';
+import type { PaymentIntent } from '@stripe/stripe-js';
+import type { ElementsUiStyle } from "../../../../types/index";
+type OverrideNotification = {
+  messages: string[];
+  title: string;
+  type: 'success' | 'error';
+};
+export declare class ZonosCheckoutFinish {
+  /**
+   * The border radius style of the dialog
+   */
+  borderRadius: ElementsUiStyle;
+  /**
+   * Force status to test the UI for storybook
+   */
+  storybookForceStatus?: PaymentIntent['status'];
+  /**
+   * Override the notification message and title, bypass checking stripe payment status
+   *
+   */
+  overrideNotification?: OverrideNotification;
+  /**
+   * Event to emit when the continue button is clicked
+   */
+  closeClick: EventEmitter<void>;
+  isLoading: boolean;
+  notificationType: 'success' | 'error';
+  notificationTitle: string;
+  notificationMessages: string[];
+  private checkPaymentStatus;
+  private closeClickHandler;
+  componentDidLoad(): void;
+  render(): any;
+}
+export {};

package/dist/types/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.d.ts

@@ -0,0 +1,34 @@
+import { type EventEmitter } from '../../../../stencil-public-runtime';
+export declare class ZonosCheckoutPayment {
+  /**
+   * Error occurred during payment
+   */
+  paymentError: boolean;
+  /**
+   * Whether or not the checkout is in mobile mode
+   */
+  submitBtnType?: HTMLZonosButtonElement['variant'];
+  /**
+   * Whether or not the continue button is loading
+   */
+  continueLoading: boolean;
+  /**
+   * Submit button main color
+   */
+  submitBtnColor?: string;
+  /**
+   * Event to emit when the continue button is clicked
+   */
+  continueClicked: EventEmitter<void>;
+  /**
+   * Whether or not the continue button is disabled
+   * @default true
+   */
+  disabled: boolean;
+  watchFormComplete(): void;
+  /**
+   * handler for continue button click
+   */
+  private continueClickHandler;
+  render(): any;
+}

package/dist/types/components/checkout/zonos-checkout/zonos-checkout.d.ts

@@ -0,0 +1,86 @@
+import type { PaymentIntent, Stripe } from '@stripe/stripe-js';
+import { type CartItem } from "../../store/checkout/cart";
+import { type ContactOption } from "../../store/checkout/stripe";
+import { type AppearanceConfig } from "../../store/zonosStore";
+export declare class ZonosCheckout {
+  /**
+   * Override appearance config
+   */
+  appearanceSettingsOverride?: Partial<AppearanceConfig>;
+  /**
+   * Preview checkout without needing to click on the button. This would be useful for demo purpose
+   */
+  preview: boolean;
+  /**
+   * Flag to determine if the checkout is on mobile
+   */
+  mobile: boolean;
+  /**
+   * The button element that will open the dialog
+   */
+  buttonAnchorElements: HTMLElement[] | null;
+  /**
+   * Default address to use for the checkout (preview mode)
+   */
+  defaultAddress: ContactOption | null;
+  /**
+   * Force dialog to be open
+   */
+  forceDialogOpen: boolean;
+  /**
+   * Whether or not the dialog is open
+   */
+  open: boolean;
+  /**
+   * The stripe instance
+   */
+  stripe: Stripe | null;
+  /**
+   * Whether or not the submit button is loading in `step` component
+   */
+  submitLoading: boolean;
+  /**
+   * Error when submitting payment
+   */
+  paymentError: boolean;
+  collapseReviewMobile: boolean;
+  /**
+   * Determine if we should skip and not hijack the Checkout button click event
+   * Sometimes stripe or our api has error, we don't want to hijack the click event.
+   */
+  isAttachError: boolean;
+  isMobile: boolean;
+  zonosReviewRef?: HTMLZonosReviewElement;
+  storybookPaymentStatusOverride?: PaymentIntent['status'];
+  /**
+   * Init cart info handler event
+   */
+  initCartInfoHandler(e: CustomEvent<CartItem[]>): Promise<void>;
+  /**
+   * Close dialog action
+   */
+  closeDialogHandler(): Promise<void>;
+  private applyStripeTheme;
+  private buildCartAndInit;
+  private attachCheckout;
+  appearanceSettingsOverrideChanged(): void;
+  /**
+   * Setup all of the event listeners for the component on first load
+   */
+  init(): Promise<void>;
+  /**
+   * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
+   */
+  setToFinishStep(forcePaymentStatus?: PaymentIntent['status']): Promise<void>;
+  private handleCustomerInfoContinue;
+  private handleShippingContinue;
+  private handleCheckoutPaymentContinue;
+  private handleFinishClick;
+  private handleBackClick;
+  private getCurrentLocalePageEnum;
+  handleWindowResize(): void;
+  handleMobileChange(): void;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.d.ts

@@ -0,0 +1,35 @@
+import { type EventEmitter } from '../../../../stencil-public-runtime';
+import { type ContactOption } from "../../../store/checkout/stripe";
+export declare class ZonosCustomerInfo {
+  /**
+   * Whether or not the continue button is loading
+   */
+  continueLoading: boolean;
+  /**
+   * Whether or not the checkout is in mobile mode
+   */
+  submitBtnType?: HTMLZonosButtonElement['variant'];
+  /**
+   * Submit button main color
+   */
+  submitBtnColor?: string;
+  /**
+   * Default address to use for the checkout (preview mode)
+   */
+  defaultAddress: ContactOption | null;
+  /**
+   * Event to emit when the continue button is clicked
+   */
+  continueClicked: EventEmitter<void>;
+  /**
+   * Whether or not the continue button is disabled
+   * @default true
+   */
+  disabled: boolean;
+  watchFormComplete(): void;
+  /**
+   * handler for continue button click
+   */
+  private continueClickHandler;
+  render(): any;
+}

package/dist/types/components/checkout/zonos-checkout/zonos-review/zonos-review.d.ts

@@ -0,0 +1,16 @@
+export declare class ZonosReview {
+  /**
+   * Whether or not the component is being rendered with mobile styles
+   */
+  mobile: boolean;
+  /**
+   * Whether or not to show the collapse icon
+   * This is controled from the collapsed state of the zonos-collapse component
+   * to show the collapse icon
+   */
+  collapsed: boolean;
+  isMobile: boolean;
+  handleWindowResize(): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.d.ts

@@ -0,0 +1,33 @@
+import { type EventEmitter } from '../../../../stencil-public-runtime';
+import type { ShippingRichRadioItem } from "../../../../types/index";
+export declare class ZonosShipping {
+  /**
+   * Whether or not the continue button is loading
+   */
+  continueLoading: boolean;
+  /**
+   * Submit button main color
+   */
+  submitBtnColor?: string;
+  /**
+   * Whether or not the checkout is in mobile mode
+   */
+  submitBtnType?: HTMLZonosButtonElement['variant'];
+  /**
+   * Event to emit when the continue button is clicked
+   */
+  continueClicked: EventEmitter<void>;
+  selectedShippingMethod: ShippingRichRadioItem | null;
+  /**
+   * Whether or not the continue button is disabled
+   * @default true
+   */
+  disabled: boolean;
+  watchFormComplete(): void;
+  private handleRadioSelected;
+  /**
+   * handler for continue button click
+   */
+  private continueClickHandler;
+  render(): any;
+}

package/dist/types/components/common/countries.d.ts

@@ -0,0 +1,3 @@
+export declare const excludedCountries: string[];
+export declare const countries: readonly ["AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "Default", "EC", "EE", "EG", "EH", "ER", "ES", "ET", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB", "GD", "GE", "GF", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GT", "GU", "GW", "GY", "HK", "HM", "HN", "HR", "HT", "HU", "IC", "ID", "IE", "IL", "IM", "IN", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MF", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NC", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PM", "PN", "PR", "PS", "PT", "PW", "PY", "QA", "RE", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SH", "SI", "SJ", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TC", "TD", "TF", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "UM", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VI", "VN", "VU", "WF", "WS", "YE", "YT", "ZA", "ZM", "ZW"];
+export type Country = (typeof countries)[number];

package/dist/types/components/common/zonos-badge/zonos-badge.d.ts

@@ -0,0 +1,38 @@
+import type { ColorPrefix } from "../../../types/styles/Color";
+export declare class ZonosBadge {
+  /**
+   * Whether or not the badge is bold
+   * @default false
+   */
+  bold: boolean;
+  /**
+   * The size of the badge
+   * @default 24
+   */
+  color: ColorPrefix;
+  /**
+   * The icon element to display
+   * @default null
+   */
+  icon?: HTMLZonosIconElement;
+  /**
+   * Position the icon to the right when icon is specified
+   * @default false
+   */
+  iconRight: boolean;
+  /**
+   * The size of the badge
+   * @default 'default'
+   */
+  size: 'small' | 'default';
+  /**
+   * Whether or not the badge is rounded
+   * @default false
+   */
+  rounded: boolean;
+  /**
+   * css class for the component
+   */
+  class: string;
+  render(): any;
+}

package/dist/types/components/common/zonos-banner/zonos-banner.d.ts

@@ -0,0 +1,24 @@
+export type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';
+export declare class ZonosBanner {
+  /**
+   * Whether or not the banner is bold
+   */
+  bannerTitle?: string;
+  /**
+   * Intent of the banner (success, warning, error)
+   */
+  intent?: BannerIntent;
+  /**
+   * css class for the component
+   */
+  class: string;
+  /**
+   * Whether or not the button has content
+   */
+  hasContent: boolean;
+  /**
+   * Detect if the button has an content
+   */
+  private handleSlotChange;
+  render(): any;
+}

package/dist/types/components/common/zonos-button/zonos-button.d.ts

@@ -0,0 +1,96 @@
+import type { ElementsUiStyle, ElementsUiTheme } from "../../../types/generated/graphql.customer.types";
+import type { Color } from "../../../types/styles/Color";
+export declare class ZonosButton {
+  /**
+   * css class for the component
+   */
+  class: string;
+  /**
+   * The color of the button text and svg
+   */
+  color?: Color | (string & {
+    _placeholder?: never;
+  });
+  /**
+   * The color of the button text and svg
+   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded
+   */
+  backgroundColor?: Color | (string & {
+    _placeholder?: never;
+  });
+  /**
+   * The border style of the button
+   * @default ROUNDED
+   */
+  borderStyle?: ElementsUiStyle;
+  /**
+   * 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.
+   */
+  isDisabled: boolean;
+  /**
+   * The icon element to display
+   * @default null
+   */
+  icon: HTMLZonosIconElement | null;
+  /**
+   * Whether or not the icon is on the right
+   * @default false
+   */
+  iconRight?: boolean;
+  /**
+   * The size of the button
+   * @default 'sm'
+   */
+  size: 'sm' | 'md' | 'lg';
+  /**
+   * The variance of the button
+   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded
+   */
+  variant: 'primary' | 'success' | 'subtle' | 'outline' | 'standard' | 'danger' | 'warning';
+  /**
+   * Whether or not the button has a background
+   * @default false
+   */
+  noBackground: boolean;
+  /**
+   * Whether or not the button has a left padding
+   */
+  noPaddingLeft: boolean;
+  /**
+   * Whether or not the button has a right padding
+   */
+  noPaddingRight: boolean;
+  /**
+   * Whether or not the button is loading
+   */
+  loading: boolean;
+  /**
+   * The theme of the button
+   */
+  theme?: ElementsUiTheme;
+  /**
+   * Whether or not the button has an icon
+   */
+  hasIcon: boolean;
+  /**
+   * Detect if the icon changes and update the state accordingly
+   */
+  iconChangeHandler(): void;
+  /**
+   * Whether or not the button has content
+   */
+  hasContent: boolean;
+  clickHandler(event: MouseEvent): void;
+  /**
+   * Detect if the button has an content
+   */
+  private handleSlotChange;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/common/zonos-card/zonos-card.d.ts

@@ -0,0 +1,31 @@
+export declare class ZonosCard {
+  /**
+   * The actions to display in the header of the card
+   */
+  actions?: HTMLElement;
+  /**
+   * The CSS class to apply to the card element
+   */
+  class?: string;
+  /**
+   * The actions to display in the footer of the card
+   */
+  footerActions?: HTMLElement;
+  /**
+   * The content to display in the footer of the card
+   */
+  footerContent?: HTMLElement;
+  /**
+   * The height of the footer in pixels
+   */
+  footerHeight?: number;
+  /**
+   * The label to display in the header of the card
+   */
+  label?: HTMLElement;
+  /**
+   * The spacing to apply between elements in the card
+   */
+  spacing?: string;
+  render(): any;
+}

package/dist/types/components/common/zonos-collapse/zonos-collapse.d.ts

@@ -0,0 +1,16 @@
+export declare class ZonosCollapse {
+  /**
+   * Collapsed state of the element
+   */
+  collapsed: boolean;
+  /**
+   * Collapsed size when collapsed
+   */
+  collapseSize: number;
+  el: HTMLZonosCollapseElement;
+  height: number;
+  private getElementHeight;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/common/zonos-country-flag/zonos-country-flag.d.ts

@@ -0,0 +1,19 @@
+import type { CountryCode } from "../../../types/generated/graphql.customer.types";
+export declare class ZonosCountryFlag {
+  /**
+   * The class name for the flag
+   */
+  class?: string;
+  /**
+   * The country code for the flag
+   * @default localizationStore.selectedCountryCode
+   * @example 'US'
+   */
+  countryCode: CountryCode | null;
+  /**
+   * The size of the flag
+   */
+  size?: number;
+  el: HTMLZonosCountryFlagElement;
+  render(): any;
+}

package/dist/types/components/common/zonos-country-select/zonos-country-select.d.ts

@@ -0,0 +1,11 @@
+export declare class ZonosCountrySelect {
+  /**
+   * Function to close the country select
+   * @default () => {}
+   */
+  closeCountrySelect: () => void;
+  inputValue: string;
+  private countrySelected;
+  private handleInputChange;
+  render(): any;
+}

package/dist/types/components/common/zonos-custom-message/zonos-custom-message.d.ts

@@ -0,0 +1,11 @@
+export declare class ZonosCustomMessage {
+  /**
+   * The custom message icon
+   */
+  icon: string;
+  /**
+   * The custom message text
+   */
+  message: string;
+  render(): any;
+}

package/dist/types/components/common/zonos-dialog/zonos-dialog.d.ts

@@ -0,0 +1,79 @@
+import { type EventEmitter } from '../../../stencil-public-runtime';
+import type { ElementsUiStyle } from "../../../types/index";
+export declare class ZonosDialog {
+  /**
+   * Whether or not the dialog is open
+   * @default false
+   */
+  open: boolean;
+  /**
+   * The header text for the dialog
+   */
+  headerText: string;
+  /**
+   * The width of the dialog
+   * @default 460px
+   */
+  width: string;
+  /**
+   * The height of the dialog (max-wdith still 90vh)
+   */
+  height?: string;
+  /**
+   * Whether or not to show the header
+   * @default false
+   */
+  noHeader: boolean;
+  /**
+   * Whether or not to have body padding
+   * @default false
+   */
+  noBodyPadding: boolean;
+  /**
+   * Whether or not to have body padding
+   * @default false
+   */
+  noBorder: boolean;
+  /**
+   * The right area for the action in the footer
+   * @default null
+   */
+  footerRightAction: HTMLElement | null;
+  /**
+   * The border style of the button
+   * @default ROUNDED
+   */
+  borderStyle?: ElementsUiStyle;
+  /**
+   * Close dialog button click
+   */
+  /**
+   * Whether or not to show the close button
+   * @default false
+   */
+  noCloseButton: boolean;
+  /**
+   * Whether or not to close the dialog when clicking outside of it
+   * @default false
+   */
+  noClickOutside: boolean;
+  /**
+   * Flag to determine if the checkout is on mobile
+   */
+  mobile: boolean;
+  /**
+   * Load loading spinner for the dialog or not
+   */
+  isLoading: boolean;
+  isMobile: boolean;
+  /**
+   * Close dialog button click
+   */
+  closeDialog: EventEmitter<void>;
+  handleWindowResize(): void;
+  private isMobileMode;
+  private closeButtonHandler;
+  private clickOutsideDialogHandler;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/common/zonos-icon/zonos-icon.d.ts

@@ -0,0 +1,30 @@
+import type { Color } from "../../../types/index";
+export declare class ZonosIcon {
+  /**
+   * Determines if the icon should be auto height instead of square
+   * @default false
+   */
+  autoHeight: boolean;
+  /**
+   * Color of the SVG
+   * @default 'gray-1200'
+   */
+  color: Color;
+  /**
+   * The content of the icon (full svg)
+   * @example
+   * import RemoveIcon from './assets/removeIcon.svg';
+   * ...
+   * <zonos-icon content={RemoveIcon}></zonos-icon>
+   * // or
+   * <zonos-icon content="<svg>...</svg>"></zonos-icon>
+   */
+  content: string;
+  /**
+   * The size of the icon
+   * @default 24
+   */
+  size: number;
+  el: HTMLZonosIconElement;
+  render(): any;
+}

package/dist/types/components/common/zonos-logo/zonos-logo.d.ts

@@ -0,0 +1,16 @@
+import type { ElementsUiTheme } from "../../../types/index";
+export declare class ZonosLogo {
+  /**
+   * Theme to change the color of the logo
+   */
+  theme: ElementsUiTheme;
+  /**
+   * The width of the logo
+   */
+  width: string;
+  /**
+   * css class for the component
+   */
+  class: string;
+  render(): any;
+}