@zonos/elements 1.2.2 → 1.2.4-alpha.1

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

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

@@ -1,33 +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;
+    /**
+     * 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/zonos-badge/zonos-badge.d.ts

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

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

@@ -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;
 }