@zonos/elements 1.2.3 → 1.2.4-alpha.1

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

@@ -1,96 +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;
+    /**
+     * 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

@@ -1,31 +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;
+    /**
+     * 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

@@ -1,16 +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;
+    /**
+     * 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

@@ -1,19 +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;
+    /**
+     * 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

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

@@ -1,11 +1,11 @@
 export declare class ZonosCustomMessage {
-  /**
-   * The custom message icon
-   */
-  icon: string;
-  /**
-   * The custom message text
-   */
-  message: string;
-  render(): any;
+    /**
+     * 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

@@ -1,79 +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;
+    /**
+     * 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

@@ -1,30 +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;
+    /**
+     * 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

@@ -1,16 +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;
+    /**
+     * 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;
 }