@zonos/elements 1.1.2 → 1.2.1

package/dist/esm/zonos-button_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"zonos-button.zonos-spinner.entry.js","mappings":"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","names":[],"sources":["src/components/utils/getButtonTheme.ts","src/components/common/zonos-button/zonos-button.scss?tag=zonos-button&encapsulation=shadow","src/components/common/zonos-button/zonos-button.tsx","src/components/common/zonos-spinner/zonos-spinner.scss?tag=zonos-spinner&encapsulation=shadow","src/components/common/zonos-spinner/zonos-spinner.tsx"],"sourcesContent":["import { zonosStore } from 'src/components/store/zonosStore';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport { isDarkColor } from 'src/components/utils/isDarkColor';\nimport type { ElementsUiTheme } from 'src/types/generated/graphql.customer.types';\n\n/**\n * Get theme for button text based on background color\n */\nexport const getButtonTheme = (overrideBackground?: string) => {\n  // use override background if it exists, otherwise use color from setting\n  const background = overrideBackground || zonosStore.appearance.colorSecondary;\n\n  const backgroundColor =\n    background && isColorVariable(background)\n      ? `var(--amino-${background})`\n      : background;\n\n  // determine theme based on background color (to change button text color if needed)\n  const buttonTheme: ElementsUiTheme =\n    backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';\n\n  return buttonTheme;\n};\n","$color: var(--color, $amino-gray-1200);\n\n$border-radius: var(--border-radius, $amino-radius-10);\n\n@function get-text-color($defaultColor) {\n  @return var(--color, $defaultColor);\n}\n@function get-background-color($defaultColor) {\n  @return var(--background-color, $defaultColor);\n}\n\n:host {\n  display: inline-flex;\n\n  .zonos--spinner-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    background-color: $amino-surface-color;\n    justify-content: center;\n    border-radius: $amino-radius-10;\n    gap: $amino-space-8;\n  }\n\n  button {\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    outline: none;\n    font-size: 14px;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    padding: 0 $amino-space-16;\n    background-color: $amino-surface-color;\n    border: none;\n    outline: 1px solid $amino-surface-color;\n    border-radius: $border-radius;\n    transition: $amino-transition;\n    font-weight: 500;\n    user-select: none;\n    font-family: $amino-font-sans;\n    letter-spacing: normal;\n    cursor: pointer;\n    white-space: nowrap;\n    padding: $amino-space-8 $amino-space-24;\n    color: $color;\n\n    &.sm,\n    &.md,\n    &.lg {\n      &.no-background {\n        background: none;\n        outline: none;\n      }\n      &.no-padding-left {\n        padding-left: 0;\n      }\n      &.no-padding-right {\n        padding-right: 0;\n      }\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      background-color: $amino-gray-200;\n      .zonos--spinner-wrapper {\n        background-color: $amino-gray-200;\n      }\n    }\n\n    &:active {\n      transform: scale(0.99);\n    }\n\n    /** Button size */\n    &.sm {\n      height: $amino-size-sm;\n      line-height: $amino-size-sm;\n      padding: $amino-space-4 $amino-space-8;\n      // only icon and no content\n      &:not(.has-content).has-icon {\n        padding: 0 $amino-space-4;\n      }\n    }\n    &.md {\n      height: $amino-size-md;\n      line-height: $amino-size-md;\n      padding: $amino-space-8 $amino-space-16;\n      // only icon and no content\n      &:not(.has-content).has-icon {\n        padding: 0 $amino-space-8;\n      }\n    }\n    &.lg {\n      height: $amino-size-lg;\n      line-height: $amino-size-lg;\n      padding: $amino-space-12 $amino-space-24;\n      // only icon and no content\n      &:not(.has-content).has-icon {\n        padding: 0 $amino-space-16;\n      }\n    }\n\n    &:not(.only-icon).has-icon {\n      gap: $amino-space-8;\n    }\n\n    // styling button with override background color setting\n    &.override-background {\n      background-color: get-background-color($amino-gray-0);\n      color: get-text-color($amino-gray-1200);\n      outline: 1px solid get-background-color($amino-gray-0);\n      &:disabled {\n        opacity: 0.8;\n      }\n      &:not(:disabled):hover {\n        opacity: 0.9;\n      }\n    }\n\n    &:not(.override-background) {\n      /** Button variant */\n      &.primary {\n        background: $amino-blue-600;\n        outline: 1px solid $amino-blue-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-primary-hover;\n          }\n          &:active {\n            background: $amino-blue-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-blue-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-blue-400;\n          }\n        }\n\n        .zonos--spinner-wrapper {\n          background-color: $amino-blue-600;\n        }\n      }\n      &.success {\n        background: $amino-green-600;\n        outline: 1px solid $amino-green-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-success-hover;\n          }\n          &:active {\n            background: $amino-green-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-green-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-green-400;\n          }\n        }\n      }\n      &.danger {\n        background: $amino-red-600;\n        outline: 1px solid $amino-red-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-danger-hover;\n          }\n          &:active {\n            background: $amino-red-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-red-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-red-400;\n          }\n        }\n      }\n      &.warning {\n        background: $amino-orange-600;\n        outline: 1px solid $amino-orange-600;\n        color: $amino-gray-0;\n\n        &:not([disabled]) {\n          &:hover {\n            background-image: $amino-button-warning-hover;\n          }\n          &:active {\n            background: $amino-orange-700;\n          }\n          &:focus {\n            box-shadow: $amino-focus-button;\n          }\n        }\n\n        &[disabled] {\n          background: $amino-orange-400;\n          .zonos--spinner-wrapper {\n            background-color: $amino-orange-400;\n          }\n        }\n      }\n      &.subtle {\n        background: transparent;\n        color: var(--color);\n\n        &:not([disabled]) {\n          &:hover {\n            background: $amino-gray-100;\n          }\n          &:active {\n            background: $amino-gray-200;\n          }\n        }\n\n        &:focus {\n          box-shadow: $amino-button-focus-ring;\n        }\n\n        &[disabled] {\n          .content {\n            opacity: 0.6;\n          }\n          .zonos--spinner-wrapper {\n            background-color: $amino-gray-0;\n          }\n        }\n      }\n      &.outline {\n        background: transparent;\n        outline: 1px solid $amino-gray-700;\n\n        &:not([disabled]) {\n          &:hover {\n            background-color: $amino-gray-100;\n          }\n          &:active {\n            background: $amino-gray-200;\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { getButtonTheme } from 'src/components/utils/getButtonTheme';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport type {\n  ElementsUiStyle,\n  ElementsUiTheme,\n} from 'src/types/generated/graphql.customer.types';\nimport type { Color } from 'src/types/styles/Color';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-button.scss',\n  tag: 'zonos-button',\n})\nexport class ZonosButton {\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  /**\n   * The color of the button text and svg\n   */\n  @Prop() color?: Color | (string & { _placeholder?: never });\n\n  /**\n   * The color of the button text and svg\n   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded\n   */\n  @Prop() backgroundColor?: Color | (string & { _placeholder?: never });\n\n  /**\n   * The border style of the button\n   * @default ROUNDED\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Whether or not the button is disabled\n   * @note Prop should not conflict name with native html attribute if the prop is also affected by another prop.\n   * 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.\n   * And `disabled` prop is not an only factor to determine the component is disabled. isLoading @prop() also affect that.\n   * <Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.\n   *  So let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.\n   * It accidentally turns the disabled prop on even thought the disabled state is not changed from the outside.\n   */\n  @Prop() isDisabled: boolean = false;\n\n  /**\n   * The icon element to display\n   * @default null\n   */\n  @Prop() icon: HTMLZonosIconElement | null = null;\n\n  /**\n   * Whether or not the icon is on the right\n   * @default false\n   */\n  @Prop() iconRight?: boolean = false;\n\n  /**\n   * The size of the button\n   * @default 'sm'\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * The variance of the button\n   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded\n   */\n  @Prop() variant:\n    | 'primary'\n    | 'success'\n    | 'subtle'\n    | 'outline'\n    | 'standard'\n    | 'danger'\n    | 'warning' = 'standard';\n\n  /**\n   * Whether or not the button has a background\n   * @default false\n   */\n  @Prop() noBackground: boolean = false;\n\n  /**\n   * Whether or not the button has a left padding\n   */\n  @Prop() noPaddingLeft: boolean = false;\n\n  /**\n   * Whether or not the button has a right padding\n   */\n  @Prop() noPaddingRight: boolean = false;\n\n  /**\n   * Whether or not the button is loading\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The theme of the button\n   */\n  @Prop() theme?: ElementsUiTheme;\n\n  /**\n   * Whether or not the button has an icon\n   */\n  @State() hasIcon: boolean = !!this.icon;\n  /**\n   * Detect if the icon changes and update the state accordingly\n   */\n  @Watch('icon')\n  iconChangeHandler() {\n    this.hasIcon = !!this.icon;\n  }\n\n  /**\n   * Whether or not the button has content\n   */\n  @State() hasContent: boolean = false;\n\n  @Listen('click', {\n    capture: true,\n  })\n  clickHandler(event: MouseEvent) {\n    if (this.loading || this.isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Detect if the button has an content\n   */\n  private handleSlotChange = () => {\n    this.hasContent = true;\n  };\n\n  componentWillLoad() {\n    this.iconChangeHandler();\n  }\n\n  render() {\n    const disabled = this.loading || this.isDisabled;\n\n    const color =\n      this.color && isColorVariable(this.color)\n        ? `var(--amino-${this.color})`\n        : this.color;\n\n    // use override background if it exists, otherwise use color from setting\n    const overrideBackground =\n      this.backgroundColor || zonosStore.appearance.colorSecondary;\n    // only set theme for button to change text color if variant is standard and override background is set\n    const buttonTheme =\n      this.variant === 'standard'\n        ? getButtonTheme(overrideBackground)\n        : undefined;\n\n    const borderStyle = getBorderRadius(this.borderStyle);\n    return (\n      <Host\n        class={classes(['zonos--elements', this.class])}\n        data-theme={this.theme || buttonTheme}\n        disabled={disabled}\n        style={{\n          '--background-color': overrideBackground,\n          '--border-radius': borderStyle,\n          '--color': color,\n        }}\n      >\n        <button\n          class={classes([\n            this.hasIcon && 'has-icon',\n            this.hasContent && 'has-content',\n            this.noBackground && 'no-background',\n            this.noPaddingLeft && 'no-padding-left',\n            this.noPaddingRight && 'no-padding-right',\n            this.iconRight && 'icon-right',\n            this.variant,\n            this.size,\n            // only override background if variant is set to standard\n            this.backgroundColor &&\n              this.variant === 'standard' &&\n              'override-background',\n          ])}\n          disabled={disabled}\n        >\n          {this.loading && (\n            <div class=\"zonos--spinner-wrapper\">\n              <zonos-spinner size={16}></zonos-spinner>\n            </div>\n          )}\n          {/* show content if not loading */}\n          {!this.loading && !this.iconRight && this.icon}\n          <slot onSlotchange={this.handleSlotChange} />\n          {!this.loading && this.iconRight && this.icon}\n        </button>\n      </Host>\n    );\n  }\n}\n","$size: var(--size);\n\n:host {\n  position: relative;\n  overflow: hidden;\n  width: $size;\n  height: $size;\n  display: inline-flex;\n  svg {\n    width: $size;\n    height: $size;\n    stroke: $amino-blue-600;\n    animation: rotate 2s linear infinite;\n  }\n\n  circle.track {\n    stroke: $amino-gray-200;\n  }\n\n  &.black {\n    stroke: $amino-spinner-stroke-black;\n\n    circle.track {\n      stroke: $amino-spinner-track-black;\n    }\n  }\n  &.white {\n    stroke: $amino-spinner-stroke-white;\n\n    circle.track {\n      stroke: $amino-spinner-track-white;\n    }\n  }\n  &.info {\n    stroke: $amino-blue-600;\n    circle.track {\n      stroke: $amino-blue-100;\n    }\n  }\n  &.success {\n    stroke: $amino-green-600;\n    circle.track {\n      stroke: $amino-green-100;\n    }\n  }\n  &.danger {\n    stroke: $amino-red-600;\n    circle.track {\n      stroke: $amino-red-100;\n    }\n  }\n  &.warning {\n    stroke: $amino-orange-600;\n    circle.track {\n      stroke: $amino-orange-100;\n    }\n  }\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n\n  circle:not(.track) {\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type SpinnerColor =\n  | 'primary'\n  | 'info'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'black'\n  | 'white';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-spinner.scss',\n  tag: 'zonos-spinner',\n})\nexport class ZonosSpinner {\n  /**\n   * The size of the spinner\n   * @default 32\n   */\n  @Prop() size: number = 32;\n\n  /**\n   * Color of the spinner\n   */\n  @Prop() color?: SpinnerColor;\n\n  @Element() el!: HTMLZonosSpinnerElement;\n\n  render() {\n    if (!this.el.shadowRoot) {\n      return null;\n    }\n\n    return (\n      <Host\n        class={classes(['zonos--elements', this.color])}\n        style={{\n          '--size': `${this.size}px`,\n        }}\n      >\n        <svg viewBox=\"0 0 50 50\">\n          <circle\n            class=\"track\"\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/zonos-card_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"zonos-card.zonos-v-stack.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,mgDAAmgD;;MCU3gD,SAAS;;;;;;;;;mBAkCO,MAAM;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE,OAAO,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAE/B,IAAI,CAAC,KAAK,KACT,cAAQ,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAC1D,sBAAgB,IAAI,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAkB,EAE9D,eAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,OAAO,CAAW,CACtC,CACV,EAGD,eAAa,EAEZ,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,MACxC,cACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,GAAG,MAAM;QAC7D,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,IAED,eAAM,IAAI,CAAC,aAAa,CAAO,EAC/B,eAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,aAAa,CAAW,CAC5C,CACV,CACG,CACD,EACP;GACH;;;;AC/EH,MAAM,cAAc,GAAG,sXAAsX;;MCWhY,MAAM;;;mBAKc,EAAE;iBAKT,EAAE;;EAE1B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EACtC,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,IAE9C,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/common/zonos-card/zonos-card.scss?tag=zonos-card&encapsulation=shadow","src/components/common/zonos-card/zonos-card.tsx","src/components/common/zonos-v-stack/zonos-v-stack.scss?tag=zonos-v-stack&encapsulation=shadow","src/components/common/zonos-v-stack/zonos-v-stack.tsx"],"sourcesContent":[":host {\n  .styled-card {\n    border: $amino-border;\n    border-radius: $amino-radius-6;\n    padding: var(--spacing, $amino-space-24);\n    text-align: left;\n\n    hr {\n      margin-left: calc(var(--spacing, $amino-space-24) * -1);\n      margin-right: calc(var(--spacing, $amino-space-24) * -1);\n    }\n\n    .card-header {\n      margin: calc(var(--spacing, $amino-space-24) * -1);\n      padding: var(--spacing, $amino-space-24);\n      display: flex;\n      align-items: center;\n      margin-bottom: var(--spacing, $amino-space-24);\n      border-bottom: $amino-border;\n      height: 65px;\n      line-height: 65px;\n      user-select: none;\n\n      h5 {\n        margin-bottom: 0;\n        flex: 1;\n      }\n    }\n\n    .card-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin: calc(var(--spacing, $amino-space-24) * -1);\n      padding: var(--spacing, $amino-space-24);\n      border-top: $amino-border;\n      background: $amino-surface-color-secondary;\n      margin-top: var(--spacing, $amino-space-24);\n      border-bottom-left-radius: $amino-radius-8;\n      border-bottom-right-radius: $amino-radius-8;\n      height: var(--footerHeight);\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Host } from '@stencil/core/internal';\n\nimport { classes } from 'src/components/utils/classes';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-card.scss',\n  tag: 'zonos-card',\n})\nexport class ZonosCard {\n  /**\n   * The actions to display in the header of the card\n   */\n  @Prop() actions?: HTMLElement;\n\n  /**\n   * The CSS class to apply to the card element\n   */\n  @Prop() class?: string;\n\n  /**\n   * The actions to display in the footer of the card\n   */\n  @Prop() footerActions?: HTMLElement;\n\n  /**\n   * The content to display in the footer of the card\n   */\n  @Prop() footerContent?: HTMLElement;\n\n  /**\n   * The height of the footer in pixels\n   */\n  @Prop() footerHeight?: number;\n\n  /**\n   * The label to display in the header of the card\n   */\n  @Prop() label?: HTMLElement;\n\n  /**\n   * The spacing to apply between elements in the card\n   */\n  @Prop() spacing?: string = '24px';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={classes(['styled-card', this.class])}\n          style={{ padding: this.spacing }}\n        >\n          {this.label && (\n            <header class=\"card-header\" style={{ padding: this.spacing }}>\n              <text-component type=\"subheader\">{this.label}</text-component>\n\n              <h-stack spacing={8}>{this.actions}</h-stack>\n            </header>\n          )}\n\n          {/* Slot automatically inherits the children passed in */}\n          <slot></slot>\n\n          {(this.footerActions || this.footerContent) && (\n            <footer\n              class=\"card-footer\"\n              style={{\n                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',\n                padding: this.spacing,\n              }}\n            >\n              <div>{this.footerContent}</div>\n              <h-stack spacing={8}>{this.footerActions}</h-stack>\n            </footer>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  .vstack {\n    display: grid;\n    grid-auto-columns: minmax(0, 1fr);\n    grid-row-gap: var(--spacing, 24px);\n    grid-auto-flow: row;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Host } from '@stencil/core/internal';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { GridSpacing } from 'src/types/styles/GridSpacing';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-v-stack.scss',\n  tag: 'zonos-v-stack',\n})\nexport class VStack {\n  /**\n   * The spacing between elements in the stack\n   * @default 24\n   */\n  @Prop() spacing: GridSpacing = 24;\n\n  /**\n   * The CSS class to apply to the stack element\n   */\n  @Prop() class: string = '';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={classes(['vstack', this.class])}\n          style={{ 'grid-row-gap': `${this.spacing}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/zonos-cart-items_10.entry.js.map

@@ -1 +0,0 @@
-{"file":"zonos-cart-items.zonos-cart-subtotal.zonos-checkout-finish.zonos-checkout-payment.zonos-collapse.zonos-customer-info.zonos-dialog.zonos-logo.zonos-review.zonos-shipping.entry.js","mappings":"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","names":["RemoveIcon"],"sources":["src/components/utils/formatCurrency.ts","src/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.scss?tag=zonos-cart-items&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.tsx","src/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.scss?tag=zonos-cart-subtotal&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.tsx","src/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.scss?tag=zonos-checkout-finish&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.tsx","src/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.scss?tag=zonos-checkout-payment&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.tsx","src/components/common/zonos-collapse/zonos-collapse.scss?tag=zonos-collapse&encapsulation=shadow","src/components/common/zonos-collapse/zonos-collapse.tsx","src/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.scss?tag=zonos-customer-info&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.tsx","src/components/common/zonos-dialog/zonos-dialog.scss?tag=zonos-dialog&encapsulation=shadow","src/components/common/zonos-dialog/zonos-dialog.tsx","src/components/common/zonos-logo/zonos-logo.scss?tag=zonos-logo&encapsulation=shadow","src/components/common/zonos-logo/zonos-logo.tsx","src/components/checkout/zonos-checkout/zonos-review/zonos-review.scss?tag=zonos-review&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-review/zonos-review.tsx","src/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.scss?tag=zonos-shipping&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.tsx"],"sourcesContent":["export const formatCurrency = ({\n  amount,\n  currency,\n  showCurrencyText,\n}: {\n  amount: number;\n  currency: string;\n  showCurrencyText?: boolean;\n}) =>\n  showCurrencyText\n    ? `${new Intl.NumberFormat('en-US', {\n        currency,\n        style: 'currency',\n      }).format(amount)} ${currency}`\n    : new Intl.NumberFormat('en-US', {\n        currency,\n        style: 'currency',\n      }).format(amount);\n",":host {\n  .zonos--cart-table {\n    width: 100%;\n    border: none;\n    border-collapse: collapse;\n    overflow: auto;\n    font-size: $amino-font-size-base;\n    .zonos--column {\n      padding: $amino-space-8;\n      font-size: $amino-font-size-base;\n      &:last-child {\n        text-align: right;\n      }\n      &:first-child {\n        width: 60px;\n      }\n    }\n  }\n  img {\n    min-width: 40px;\n  }\n}\n","import { Component, getAssetPath, h, Host, State } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-cart-items.scss',\n  tag: 'zonos-cart-items',\n})\nexport class ZonosCartItems {\n  @State() errorImages: string[] = [];\n\n  render() {\n    const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');\n    const rate = cartStore.exchangeRate?.rate || 1;\n    return (\n      <Host class=\"zonos--cart-items zonos--elements\">\n        <table class=\"zonos--cart-table\">\n          <tbody>\n            {cartStore.items.map(item => {\n              const itemImg = item.imageUrl;\n              return (\n                <tr class=\"zonos--cart-item\">\n                  <td class=\"zonos--column zonos--cart-item-image\">\n                    {itemImg && !this.errorImages.includes(itemImg) ? (\n                      <img\n                        alt={item.name}\n                        onError={() => {\n                          this.errorImages = [...this.errorImages, itemImg];\n                        }}\n                        src={item.imageUrl}\n                        style={{\n                          'min-width': '40px',\n                        }}\n                        width={40}\n                      />\n                    ) : (\n                      <img alt={item.name} src={emptyItemImg} width={40} />\n                    )}\n                  </td>\n                  <td class=\"zonos--column zonos--cart-item-name\">\n                    <zonos-text type=\"label\">{item.name}</zonos-text>\n                  </td>\n                  <td class=\"zonos--column zonos--cart-item-price\">\n                    <zonos-text type=\"semiBoldLabel\">\n                      {formatCurrency({\n                        amount: item.amount * item.quantity * rate,\n                        currency: cartStore.currency,\n                      })}\n                    </zonos-text>\n                  </td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </Host>\n    );\n  }\n}\n",":host {\n  .zonos--cart-table {\n    width: 100%;\n    border: none;\n    border-collapse: collapse;\n    overflow: auto;\n    font-size: $amino-font-size-base;\n    .zonos--column {\n      padding: $amino-space-20 $amino-space-8;\n      vertical-align: top;\n      &:last-child {\n        text-align: right;\n      }\n      &:first-child {\n        width: 60px;\n      }\n    }\n  }\n  .zonos--title-with-icon {\n    display: flex;\n    align-items: center;\n    gap: $amino-space-8;\n  }\n  .zonos--cart-subtotal-title,\n  .zonos--cart-subtotal-price {\n    border-bottom: 1px solid $amino-gray-200;\n  }\n\n  .zonos--cart-subtotal-price {\n    text-align: right;\n  }\n}\n","import { Component, Fragment, h, Host } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\n\n// These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport InfoIcon from './assets/InfoIcon.svg';\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-cart-subtotal.scss',\n  tag: 'zonos-cart-subtotal',\n})\nexport class ZonosCartSubtotal {\n  render() {\n    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;\n    const renderShippingInfo = () => {\n      if (!cartStore.selectedShippingOption) {\n        return (\n          <>\n            <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n              {translate('Shipping')}\n            </zonos-text>\n            <zonos-text class=\"zonos--caption\" type=\"caption\">\n              {translate('No shipping method selected')}\n            </zonos-text>\n          </>\n        );\n      }\n      return (\n        <>\n          <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n            {cartStore.selectedShippingOption.displayName}\n          </zonos-text>\n          {cartStore.selectedShippingOptionTransitTime && (\n            <zonos-text class=\"zonos--caption\" type=\"caption\">\n              {cartStore.selectedShippingOptionTransitTime}{' '}\n              {translate('business days')}\n            </zonos-text>\n          )}\n        </>\n      );\n    };\n    return (\n      <Host class=\"zonos--cart-subtotal zonos--elements\">\n        <table class=\"zonos--cart-table\">\n          <tr class=\"zonos--row zonos--cart-subtotal\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column zonos--cart-subtotal-title\">\n              <zonos-text type=\"semiBoldLabel\">\n                {translate('Cart subtotal')}\n              </zonos-text>\n            </td>\n            <td class=\"zonos--column zonos--cart-subtotal-price\">\n              <zonos-text type=\"semiBoldLabel\">\n                {formatCurrency({\n                  amount: cartStore.subtotal,\n                  currency: cartStore.currency,\n                })}\n              </zonos-text>\n            </td>\n          </tr>\n          <tr class=\"zonos--row zonos--cart-shipping\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column zonos--cart-subtotal-title\">\n              {renderShippingInfo()}\n            </td>\n            <td class=\"zonos--column zonos--cart-subtotal-price\">\n              {cartStore.shipping\n                ? formatCurrency({\n                    amount: cartStore.shipping,\n                    currency: cartStore.currency,\n                  })\n                : '-'}\n            </td>\n          </tr>\n          {/* Only show fee row when step is payment */}\n          {cartStore.step === 'payment' && (\n            <tr class=\"zonos--row zonos--cart-duties\">\n              <td class=\"zonos--column\"></td>\n              <td class=\"zonos--column zonos--cart-subtotal-title\">\n                <div class=\"zonos--title-with-icon\">\n                  <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n                    {translate('Duties, taxes, and fees')}\n                  </zonos-text>\n                  <zonos-icon content={InfoIcon} size={16}></zonos-icon>\n                </div>\n                {!!cartStore.isSelectedShippingAboveDeminimis && (\n                  <zonos-text color=\"gray-800\" type=\"body\">\n                    {translate(\n                      'Order is over the de minimis threshold for both duty and tax',\n                    )}\n                  </zonos-text>\n                )}\n              </td>\n              <td class=\"zonos--column zonos--cart-subtotal-price\">\n                {cartStore.dutiesTaxFees\n                  ? formatCurrency({\n                      amount: cartStore.dutiesTaxFees,\n                      currency: cartStore.currency,\n                    })\n                  : '-'}\n                {cartStore.isSelectedShippingGuarantee && (\n                  <zonos-badge>{translate('Guaranteed')}</zonos-badge>\n                )}\n              </td>\n            </tr>\n          )}\n          <tr class=\"zonos--row zonos--cart-pay-total\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column\">\n              <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n                {translate('Order total')}\n              </zonos-text>\n            </td>\n            <td class=\"zonos--column\">\n              <zonos-text type=\"semiBoldLabel\">\n                {formatCurrency({\n                  amount:\n                    // show total without taxes when step is shipping, show total with taxes when step is payment\n                    cartStore.step === 'shipping'\n                      ? totalWithoutTaxes\n                      : cartStore.total,\n                  currency: cartStore.currency,\n                })}\n              </zonos-text>\n            </td>\n          </tr>\n        </table>\n      </Host>\n    );\n  }\n}\n","$border-radius: var(--border-radius, 10px);\n\n:host {\n  display: flex;\n  flex-direction: column;\n  .zonos--group {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: $amino-space-24;\n    border-radius: $border-radius;\n    gap: $amino-space-24;\n    max-width: 360px;\n    width: auto;\n    margin: auto;\n    margin-top: $amino-space-24;\n    background-color: $amino-gray-50;\n    padding: $amino-space-20;\n  }\n  zonos-button {\n    width: 100%;\n  }\n  .loading-wrapper {\n    min-height: 300px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { PaymentIntent } from '@stripe/stripe-js';\n\nimport {\n  stripeStore,\n  stripeStoreReset,\n  stripeStoreRetrievePayment,\n} from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ElementsUiStyle } from 'src/types';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/RemoveIcon.svg';\n/* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport SuccessIcon from './assets/SuccessIcon.svg';\n\ntype OverrideNotification = {\n  messages: string[];\n  title: string;\n  type: 'success' | 'error';\n};\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-checkout-finish.scss',\n  tag: 'zonos-checkout-finish',\n})\nexport class ZonosCheckoutFinish {\n  /**\n   * The border radius style of the dialog\n   */\n  @Prop() borderRadius: ElementsUiStyle = 'ROUNDED';\n\n  /**\n   * Force status to test the UI for storybook\n   */\n  @Prop() storybookForceStatus?: PaymentIntent['status'];\n\n  /**\n   * Override the notification message and title, bypass checking stripe payment status\n   *\n   */\n  @Prop() overrideNotification?: OverrideNotification;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() closeClick!: EventEmitter<void>;\n\n  @State() isLoading: boolean = true;\n  @State() notificationType: 'success' | 'error' = 'success';\n  @State() notificationTitle: string = '';\n  @State() notificationMessages: string[] = [];\n\n  private checkPaymentStatus = async () => {\n    this.isLoading = true;\n    const clientSecret =\n      new URLSearchParams(window.location.search).get(\n        'payment_intent_client_secret',\n      ) || stripeStore.clientSecret;\n    if (clientSecret || this.storybookForceStatus) {\n      const { error, messages } = await stripeStoreRetrievePayment({\n        clientSecret,\n        storybookForceStatus: this.storybookForceStatus,\n      });\n      this.notificationType = error ? 'error' : 'success';\n      this.notificationMessages = messages || [];\n      this.notificationTitle = error\n        ? translate('Payment failed')\n        : translate(\"You're all set!\");\n\n      if (error) {\n        submitGtag('zonos-checkout-payment-fail');\n      } else {\n        submitGtag('zonos-checkout-success');\n      }\n    }\n    stripeStoreReset();\n    this.isLoading = false;\n  };\n\n  private closeClickHandler = () => {\n    this.closeClick.emit();\n  };\n\n  componentDidLoad() {\n    if (this.overrideNotification) {\n      // just show the notification and don't check any of the payment status\n      this.notificationType = this.overrideNotification.type;\n      this.notificationTitle = this.overrideNotification.title;\n      this.notificationMessages = this.overrideNotification.messages;\n      return;\n    }\n    void this.checkPaymentStatus();\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"zonos--checkout-finish zonos--elements\"\n        style={{\n          '--border-radius': getBorderRadius(this.borderRadius),\n        }}\n      >\n        {this.isLoading && (\n          <div class=\"loading-wrapper\">\n            <zonos-spinner></zonos-spinner>\n          </div>\n        )}\n        {!this.isLoading && (\n          <div class=\"zonos--group\">\n            {this.notificationType === 'success' ? (\n              <zonos-icon\n                color={'blue-800'}\n                content={SuccessIcon}\n                size={50}\n              ></zonos-icon>\n            ) : (\n              <zonos-icon\n                color={'red-800'}\n                content={RemoveIcon}\n                size={50}\n              ></zonos-icon>\n            )}\n            <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n              {this.notificationTitle}\n            </zonos-text>\n            <zonos-text>\n              {this.notificationMessages.map(message => (\n                <>\n                  {message}\n                  <br />\n                </>\n              ))}\n            </zonos-text>\n            <zonos-button\n              onClick={() => this.closeClickHandler()}\n              size=\"md\"\n              variant=\"primary\"\n            >\n              {translate('Keep shopping')}\n            </zonos-button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  .zonos--title {\n    margin-bottom: $amino-space-24;\n  }\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding: 0 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  .zonos--payment-error-banner {\n    margin-bottom: $amino-space-8;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\nimport { submitGtag } from 'src/components/utils/submitGtag';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  scoped: true,\n  styleUrl: 'zonos-checkout-payment.scss',\n  tag: 'zonos-checkout-payment',\n})\nexport class ZonosCheckoutPayment {\n  /**\n   * Error occurred during payment\n   */\n  @Prop() paymentError: boolean = false;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-payment-info');\n    }\n  }\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    if (!stripeStore.stripeElements) {\n      return null;\n    }\n\n    this.disabled = !stripeStore.stripePaymentEventData?.complete;\n\n    return (\n      <Host class=\"zonos--checkout-payment zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Payment method')}\n          </zonos-text>\n          {this.paymentError && (\n            <zonos-banner class=\"zonos--payment-error-banner\" intent=\"error\">\n              {translate(\n                \"We couldn't complete your payment. Please verify the payment details and try again.\",\n              )}\n            </zonos-banner>\n          )}\n          <zonos-payment></zonos-payment>\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          is-disabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          Pay{' '}\n          {formatCurrency({\n            amount: cartStore.total,\n            currency: cartStore.currency,\n          })}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n",":host {\n  transition: all 0.3s ease-in-out;\n  overflow: hidden;\n  div {\n    position: relative;\n  }\n  iframe {\n    width: 0;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    border: 0;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Element, Host, State } from '@stencil/core/internal';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-collapse.scss',\n  tag: 'zonos-collapse',\n})\nexport class ZonosCollapse {\n  /**\n   * Collapsed state of the element\n   */\n  @Prop() collapsed: boolean = false;\n  /**\n   * Collapsed size when collapsed\n   */\n  @Prop() collapseSize: number = 0;\n\n  @Element() el!: HTMLZonosCollapseElement;\n\n  @State() height: number = this.el.scrollHeight;\n\n  private getElementHeight() {\n    const fullHeight = `${this.height}px`;\n    const collapsedHeight = `${this.collapseSize}px`;\n    return this.collapsed ? collapsedHeight : fullHeight;\n  }\n\n  componentDidLoad() {\n    this.height = this.el.scrollHeight;\n  }\n\n  componentDidRender() {\n    this.el.shadowRoot\n      ?.querySelector('iframe')\n      ?.contentWindow?.addEventListener('resize', () => {\n        this.height = this.el.scrollHeight;\n      });\n  }\n\n  render() {\n    this.height = this.el.scrollHeight;\n    return (\n      <Host\n        class={'zonos--elements zonos--collapse'}\n        style={{\n          height: this.getElementHeight(),\n        }}\n      >\n        <div>\n          <iframe\n            class=\"height-change-listener\"\n            tabindex=\"-1\"\n            title=\"collapse-height-change-listener\"\n          ></iframe>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  .zonos--title {\n    margin-bottom: $amino-space-20;\n  }\n  .zonos--link-authentication {\n    margin-bottom: $amino-space-32;\n  }\n\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding: 0 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport {\n  type ContactOption,\n  stripeStore,\n} from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { submitGtag } from 'src/components/utils/submitGtag';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  scoped: true,\n  styleUrl: 'zonos-customer-info.scss',\n  tag: 'zonos-customer-info',\n})\nexport class ZonosCustomerInfo {\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Default address to use for the checkout (preview mode)\n   */\n  @Prop() defaultAddress: ContactOption | null = null;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-customer-info');\n    }\n  }\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    if (!stripeStore.stripeElements) {\n      return null;\n    }\n    // make sure data is valid\n    this.disabled =\n      !stripeStore.stripeAddressEventData?.complete ||\n      !stripeStore.stripeLinkEventData?.complete;\n\n    return (\n      <Host class=\"zonos--customer-info zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Customer information')}\n          </zonos-text>\n          <zonos-link-authentication\n            titleText={translate('Contact')}\n          ></zonos-link-authentication>\n          <zonos-address\n            defaultAddress={this.defaultAddress}\n            titleText={translate('Address')}\n            type=\"shipping\"\n          ></zonos-address>\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          isDisabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          {translate('Continue to shipping')}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n","$border-radius: var(--border-radius, $amino-radius-10);\n$height: var(--height, auto);\n$width: var(--width, auto);\n\n:host {\n  .zonos--backdrop,\n  .zonos--dialog-layout {\n    opacity: 0;\n    z-index: -999;\n    visibility: hidden;\n    transition: 0.3s all ease;\n  }\n  // close by default\n  .zonos--backdrop {\n    width: 100vw;\n    height: 100vh;\n    left: 0px;\n    top: 0px;\n    background: $amino-backdrop-color;\n    z-index: -999;\n    opacity: 0;\n    visibility: hidden;\n    position: fixed;\n  }\n  .zonos--loading {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1002;\n    background: white;\n  }\n\n  // close by default\n  .zonos--dialog-layout {\n    width: 100vw;\n    height: 100vh;\n    left: 0;\n    top: 0;\n    position: fixed;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: $amino-text-color;\n    visibility: hidden;\n  }\n\n  .zonos--dialog {\n    position: relative;\n    z-index: 1001;\n    background: $amino-gray-0;\n    max-width: calc(90vw);\n    max-height: 90vh;\n    min-height: 500px;\n    height: $height;\n    width: $width;\n    border-radius: $border-radius;\n    outline: none;\n    box-shadow: $amino-v3-shadow-xxl;\n    border: $amino-border;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .zonos--header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    padding: $amino-space-16 $amino-space-24;\n\n    .-zonos-stencil-library--header-text {\n      flex-grow: 1;\n    }\n\n    .zonos--close-button {\n      width: $amino-size-md;\n      height: $amino-size-md;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      border-radius: $amino-radius-10;\n      &:hover {\n        background: $amino-hover-color;\n      }\n    }\n  }\n\n  .zonos--body {\n    padding: $amino-space-8 $amino-space-24;\n    max-height: 100%;\n    height: 100%;\n    overflow: auto;\n    &.zonos--no-body-padding {\n      padding: 0;\n    }\n  }\n\n  .zonos--footer {\n    padding: $amino-space-16 $amino-space-24;\n  }\n}\n\n:host(.open) {\n  .zonos--dialog-layout,\n  .zonos--backdrop {\n    visibility: visible;\n  }\n  .zonos--backdrop {\n    z-index: 1001;\n    opacity: 0.65;\n  }\n  .zonos--dialog-layout {\n    opacity: 1;\n    z-index: 1002;\n    transform: scale(1);\n  }\n}\n\n:host(.no-border) {\n  .zonos--dialog {\n    border: none;\n  }\n}\n\n:host(.mobile) {\n  .zonos--dialog {\n    max-width: 100vw;\n    max-height: 100vh;\n    height: 100%;\n    width: 100%;\n    border-radius: 0;\n    box-shadow: none;\n    border: none;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport type { ElementsUiStyle } from 'src/types';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/removeIcon.svg';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-dialog.scss',\n  tag: 'zonos-dialog',\n})\nexport class ZonosDialog {\n  /**\n   * Whether or not the dialog is open\n   * @default false\n   */\n  @Prop() open: boolean = false;\n  /**\n   * The header text for the dialog\n   */\n  @Prop() headerText: string = '';\n  /**\n   * The width of the dialog\n   * @default 460px\n   */\n  @Prop() width: string = '460px';\n  /**\n   * The height of the dialog (max-wdith still 90vh)\n   */\n  @Prop() height?: string;\n  /**\n   * Whether or not to show the header\n   * @default false\n   */\n  @Prop() noHeader: boolean = false;\n\n  /**\n   * Whether or not to have body padding\n   * @default false\n   */\n  @Prop() noBodyPadding: boolean = false;\n\n  /**\n   * Whether or not to have body padding\n   * @default false\n   */\n  @Prop() noBorder: boolean = false;\n\n  /**\n   * The right area for the action in the footer\n   * @default null\n   */\n  @Prop() footerRightAction: HTMLElement | null = null;\n\n  /**\n   * The border style of the button\n   * @default ROUNDED\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Close dialog button click\n   */\n  // @Prop() onCloseDialog!: () => void;\n\n  /**\n   * Whether or not to show the close button\n   * @default false\n   */\n  @Prop() noCloseButton: boolean = false;\n\n  /**\n   * Whether or not to close the dialog when clicking outside of it\n   * @default false\n   */\n  @Prop() noClickOutside: boolean = false;\n\n  /**\n   * Flag to determine if the checkout is on mobile\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * Load loading spinner for the dialog or not\n   */\n  @Prop() isLoading: boolean = true;\n\n  @State() isMobile: boolean = false;\n\n  /**\n   * Close dialog button click\n   */\n  @Event() closeDialog!: EventEmitter<void>;\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = this.isMobileMode();\n  }\n\n  private isMobileMode = () => {\n    return this.mobile || window.innerWidth <= 768;\n  };\n\n  private closeButtonHandler = () => {\n    this.closeDialog.emit();\n  };\n\n  private clickOutsideDialogHandler = (event: MouseEvent) => {\n    if (event.target === event.currentTarget && !this.noClickOutside) {\n      this.closeDialog.emit();\n    }\n  };\n\n  componentDidLoad() {\n    this.isMobile = this.isMobileMode();\n  }\n\n  render() {\n    // disable scroll on the body when dialog is open\n    if (this.open) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = 'auto';\n    }\n\n    const borderStyle = getBorderRadius(this.borderStyle);\n    return (\n      <Host\n        class={classes([\n          'zonos--elements',\n          this.open && 'open',\n          this.isLoading && 'is-loading',\n          this.noBorder && 'no-border',\n          this.isMobile && 'mobile',\n        ])}\n        style={{\n          '--border-radius': borderStyle,\n          '--height': this.height || 'initial',\n          '--width': this.width,\n        }}\n      >\n        <div class=\"zonos--backdrop\"></div>\n        <div\n          aria-hidden=\"true\"\n          class=\"zonos--dialog-layout\"\n          onClick={this.clickOutsideDialogHandler}\n        >\n          <div class=\"zonos--dialog\">\n            {this.isLoading && (\n              <div class=\"zonos--loading\">\n                <zonos-spinner size={30}></zonos-spinner>\n              </div>\n            )}\n            {(this.headerText || !this.noCloseButton) && (\n              <div class=\"zonos--header\">\n                {this.headerText && (\n                  <h3 class=\"zonos--header-text\">{this.headerText}</h3>\n                )}\n                {!this.noCloseButton && (\n                  <zonos-button\n                    class=\"zonos--close-button\"\n                    icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                    noBackground\n                    onClick={this.closeButtonHandler}\n                  ></zonos-button>\n                )}\n              </div>\n            )}\n            <div\n              class={classes([\n                'zonos--body',\n                this.noBodyPadding && 'zonos--no-body-padding',\n              ])}\n            >\n              <slot />\n            </div>\n            {this.footerRightAction && (\n              <div class=\"zonos--footer\">\n                <div class=\"zonos--footer-right-action\">\n                  {this.footerRightAction}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","$filter-color: var(--filter-color);\n$width: var(--width);\n\n:host {\n  display: inline-flex;\n  img {\n    filter: $filter-color;\n    width: $width;\n  }\n}\n","import { Component, getAssetPath, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { ElementsUiTheme } from 'src/types';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-logo.scss',\n  tag: 'zonos-logo',\n})\nexport class ZonosLogo {\n  /**\n   * Theme to change the color of the logo\n   */\n  @Prop() theme: ElementsUiTheme = 'LIGHT';\n\n  /**\n   * The width of the logo\n   */\n  @Prop() width: string = 'auto';\n\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  render() {\n    const filterColor =\n      this.theme === 'DARK'\n        ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'\n        : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';\n\n    return (\n      <Host\n        class={classes(['zonos--elements zonos--logo', this.class])}\n        style={{\n          '--filter-color': filterColor,\n          '--width': this.width,\n        }}\n      >\n        <img alt=\"Zonos Logo\" src={getAssetPath('./assets/ZonosLogo.png')} />\n      </Host>\n    );\n  }\n}\n",":host {\n  .zonos--total-pay {\n    margin: $amino-space-16 0 $amino-space-32;\n  }\n}\n\n:host(.mobile) {\n  @include checkout-review-mobile;\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { translate } from 'src/components/store/translationStore';\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { isCheckoutMobile } from 'src/components/utils/checkout/isCheckoutMobile';\nimport { classes } from 'src/components/utils/classes';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronDownIcon from './assets/ChevronDownIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronUpIcon from './assets/ChevronUpIcon.svg';\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-review.scss',\n  tag: 'zonos-review',\n})\nexport class ZonosReview {\n  /**\n   * Whether or not the component is being rendered with mobile styles\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * Whether or not to show the collapse icon\n   * This is controled from the collapsed state of the zonos-collapse component\n   * to show the collapse icon\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() isMobile: boolean = false;\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  componentWillLoad() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  render() {\n    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';\n    const totalTextType = this.isMobile\n      ? 'boldSubheader'\n      : 'secondaryPageHeader';\n\n    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';\n    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;\n    const renderCollapseIcon = () => {\n      // only display the collapse icon if the component is being rendered with mobile styles\n      if (!this.isMobile) {\n        return null;\n      }\n\n      if (!this.collapsed) {\n        return (\n          <zonos-icon color=\"gray-1200\" content={ChevronDownIcon}></zonos-icon>\n        );\n      }\n      return (\n        <zonos-icon color=\"gray-1200\" content={ChevronUpIcon}></zonos-icon>\n      );\n    };\n    return (\n      <Host\n        class={classes([\n          'zonos--review zonos--elements',\n          this.isMobile && 'mobile',\n        ])}\n      >\n        <div class=\"zonos--title\">\n          <zonos-text color={titleTextColor} type={titleTextType}>\n            {translate('Pay')} {zonosStore.organizationName}\n          </zonos-text>\n          {renderCollapseIcon()}\n        </div>\n        <div class=\"zonos--total-pay\">\n          <zonos-text type={totalTextType}>\n            {formatCurrency({\n              amount:\n                // show total without taxes when step is shipping, show total with taxes when step is payment\n                cartStore.step === 'shipping'\n                  ? totalWithoutTaxes\n                  : cartStore.total,\n              currency: cartStore.currency,\n            })}\n          </zonos-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  .zonos--title {\n    margin-bottom: $amino-space-24;\n  }\n  .zonos--shipping-method-title {\n    margin-bottom: $amino-space-16;\n  }\n\n  .zonos-shipping-rich-radio {\n    margin-bottom: $amino-space-24;\n  }\n\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding-right: 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n  zonos-banner {\n    margin-top: $amino-space-24;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport {\n  cartStore,\n  cartStoreGetShippingTransitInfo,\n  cartStoreUpdateSelectedShippingOption,\n} from 'src/components/store/checkout/cart';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ShippingRichRadioItem } from 'src/types';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  scoped: true,\n  styleUrl: 'zonos-shipping.scss',\n  tag: 'zonos-shipping',\n})\nexport class ZonosShipping {\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  @State() selectedShippingMethod: ShippingRichRadioItem | null = null;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-shipping-info');\n    }\n  }\n\n  private handleRadioSelected = async (\n    e: CustomEvent<ShippingRichRadioItem>,\n  ) => {\n    this.selectedShippingMethod = e.detail;\n    if (!this.selectedShippingMethod) {\n      return;\n    }\n\n    const selectedShippingOption =\n      cartStore.shippingData?.find(\n        item => item.id === this.selectedShippingMethod?.value,\n      ) || null;\n    if (!selectedShippingOption) {\n      return;\n    }\n\n    // save selected shipping option to store\n    const updateStatus = await cartStoreUpdateSelectedShippingOption(\n      selectedShippingOption,\n    );\n    if (!updateStatus) {\n      return;\n    }\n\n    this.disabled = false;\n  };\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    const shipToCountry =\n      stripeStore.stripeAddressEventData?.value.address.country;\n\n    const serviceLevels = cartStore.shippingData?.flatMap(\n      (item): ShippingRichRadioItem => {\n        const { expectedDate, maxTransit, minTransit } =\n          cartStoreGetShippingTransitInfo(item);\n        const sublabel = expectedDate\n          ? `${translate('Expected delivery')} ${expectedDate}`\n          : '';\n        const caption =\n          minTransit && maxTransit\n            ? `(${minTransit}-${maxTransit} ${translate('business days')})`\n            : '';\n        const shippingAmount =\n          cartStore.landedCostData?.find(\n            landedCostItem =>\n              landedCostItem.landedCost?.shipmentRating.id === item.id,\n          )?.subtotals.shipping || 0;\n        return {\n          caption,\n          label: item.displayName,\n          price: formatCurrency({\n            amount: shippingAmount,\n            currency: cartStore.currency,\n          }),\n          sublabel,\n          value: item.id,\n        };\n      },\n    );\n    return (\n      <Host class=\"zonos--shipping zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Shipping information')}\n          </zonos-text>\n          <zonos-text class=\"zonos--shipping-method-title\" type=\"semiBoldLabel\">\n            {translate('Shipping method')}\n          </zonos-text>\n          {!serviceLevels?.length ? (\n            <zonos-banner\n              bannerTitle=\"No shipping methods found - try editing your address or contacting support if the error persists\"\n              intent=\"error\"\n            ></zonos-banner>\n          ) : (\n            <zonos-shipping-rich-radio\n              items={serviceLevels || []}\n              onRadioSelected={e => this.handleRadioSelected(e)}\n            ></zonos-shipping-rich-radio>\n          )}\n\n          {cartStore.isSelectedShippingAboveDeminimis && (\n            <zonos-banner intent=\"warning\">\n              {translate('Above de minimis threshold for')} {shipToCountry}.{' '}\n              {translate(\n                'Duties and taxes will be applied to items and shipping.',\n              )}\n            </zonos-banner>\n          )}\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          is-disabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          {translate('Go to payment')}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/zonos-checkout.entry.js.map

@@ -1 +0,0 @@
-{"file":"zonos-checkout.entry.js","mappings":"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","names":[],"sources":["src/components/checkout/zonos-checkout/zonos-checkout.scss?tag=zonos-checkout&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-checkout.tsx"],"sourcesContent":["$primary-color: var(--primary-color, $amino-gray-0);\n$border-radius: var(--border-radius, $amino-radius-10);\n\n:host {\n  * {\n    @include zonos--scrollbar;\n  }\n  .zonos--content {\n    display: flex;\n    height: 100%;\n    overflow: hidden;\n    border-radius: $border-radius;\n    .zonos--left,\n    .zonos--right {\n      flex: 1;\n      padding: $amino-space-48 $amino-space-56;\n    }\n    .zonos--left {\n      background-color: $primary-color;\n      border-right: 1px solid $amino-gray-200;\n    }\n    .zonos--right {\n      background-color: $amino-gray-0;\n      padding-bottom: $amino-space-80;\n    }\n\n    .zonos--done {\n      width: 100%;\n      max-height: 100%;\n      height: 100%;\n      overflow: auto;\n      flex-direction: column;\n      background-color: $amino-gray-0;\n      align-items: center;\n      justify-content: center;\n      padding: $amino-space-24;\n      padding-bottom: 50px;\n      .zonos--header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        img {\n          width: 150px;\n          min-width: 150px;\n        }\n      }\n      .zonos--logo {\n        margin-bottom: 0;\n      }\n\n      zonos-checkout-finish {\n        flex: 1;\n      }\n    }\n  }\n\n  .zonos--left {\n    display: flex;\n    flex-direction: column;\n    .zonos--back-button {\n      margin-bottom: $amino-space-24;\n    }\n    .zonos--wrapper {\n      padding: 0 $amino-space-8 $amino-space-8;\n    }\n    .zonos--payment-error-banner {\n      margin-top: $amino-space-24;\n    }\n  }\n\n  .zonos--right {\n    position: relative;\n    .zonos--close-button {\n      position: absolute;\n      right: $amino-space-32;\n      top: $amino-space-32;\n    }\n  }\n  .zonos--footer {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    position: absolute;\n    bottom: $amino-space-32;\n    right: $amino-space-56;\n    gap: $amino-space-8;\n  }\n\n  .zonos--wrapper {\n    overflow: auto;\n    max-height: 100%;\n    position: relative;\n  }\n\n  .flex--wrapper {\n    display: flex;\n    flex-direction: column;\n    max-height: 100%;\n  }\n\n  .zonos--logo {\n    display: flex;\n    align-items: center;\n  }\n\n  .zonos--checkout-default-message {\n    margin-left: $amino-space-76;\n    margin-bottom: $amino-space-8;\n  }\n}\n\n:host(.preview) {\n  min-width: 500px;\n  margin: auto;\n  .zonos--content {\n    border: $amino-border;\n    .zonos--done {\n      padding: $amino-space-32;\n    }\n  }\n}\n\n:host(.mobile) {\n  @include checkout-mobile;\n}\n","import {\n  Component,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { PaymentIntent, Stripe } from '@stripe/stripe-js';\n\nimport {\n  type CartItem,\n  cartStore,\n  cartStoreNextStep,\n  cartStorePreviousStep,\n  cartStoreReset,\n  cartStoreUpdateItems,\n  cartStoreUpdateToErrorState,\n} from 'src/components/store/checkout/cart';\nimport {\n  type ContactOption,\n  initStripeElements,\n  stripeStore,\n  stripeStoreConfirmPayment,\n  stripeStoreInitCheckoutSession,\n  stripeStorePrefetchLandedCost,\n  stripeStoreReset,\n} from 'src/components/store/checkout/stripe';\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { translate } from 'src/components/store/translationStore';\nimport {\n  type AppearanceConfig,\n  zonosStore,\n} from 'src/components/store/zonosStore';\nimport { isCheckoutMobile } from 'src/components/utils/checkout/isCheckoutMobile';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { isDarkColor } from 'src/components/utils/isDarkColor';\nimport { log } from 'src/components/utils/logging/log';\nimport { mergeConfig } from 'src/components/utils/mergeConfig';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ElementsUiTheme } from 'src/types/generated/graphql.customer.types';\nimport type { Locale_PageName_Enum } from 'src/types/generated/graphql.frontend.types';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport LeftArrow from './assets/LeftArrow.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MessageIcon from './assets/MessageIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/RemoveIcon.svg';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  assetsDirs: ['assets'],\n  scoped: true,\n  styleUrl: 'zonos-checkout.scss',\n  tag: 'zonos-checkout',\n})\nexport class ZonosCheckout {\n  /**\n   * Override appearance config\n   */\n  @Prop() appearanceSettingsOverride?: Partial<AppearanceConfig>;\n  /**\n   * Preview checkout without needing to click on the button. This would be useful for demo purpose\n   */\n  @Prop() preview: boolean = false;\n\n  /**\n   * Flag to determine if the checkout is on mobile\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * The button element that will open the dialog\n   */\n  @Prop() buttonAnchorElements: HTMLElement[] | null = null;\n\n  /**\n   * Default address to use for the checkout (preview mode)\n   */\n  @Prop() defaultAddress: ContactOption | null = null;\n\n  /**\n   * Force dialog to be open\n   */\n  @Prop() forceDialogOpen: boolean = false;\n\n  /**\n   * Whether or not the dialog is open\n   */\n  @State() open: boolean = this.forceDialogOpen;\n\n  /**\n   * The stripe instance\n   */\n  @State() stripe: Stripe | null = window.Zonos.stripe;\n\n  /**\n   * Whether or not the submit button is loading in `step` component\n   */\n  @State() submitLoading: boolean = false;\n\n  /**\n   * Error when submitting payment\n   */\n  @State() paymentError: boolean = false;\n\n  @State() collapseReviewMobile: boolean = false;\n\n  /**\n   * Determine if we should skip and not hijack the Checkout button click event\n   * Sometimes stripe or our api has error, we don't want to hijack the click event.\n   */\n  @State() isAttachError = false;\n\n  @State() isMobile: boolean = false;\n\n  @State() zonosReviewRef?: HTMLZonosReviewElement;\n\n  @State() storybookPaymentStatusOverride?: PaymentIntent['status'];\n\n  /**\n   * Init cart info handler event\n   */\n  @Listen('zonos--init-cart-info', { target: 'body' })\n  async initCartInfoHandler(e: CustomEvent<CartItem[]>) {\n    const cartItems = e.detail;\n    void cartStoreUpdateItems(cartItems);\n  }\n\n  /**\n   * Close dialog action\n   */\n  @Method()\n  async closeDialogHandler() {\n    submitGtag('zonos-checkout-close');\n    this.open = this.forceDialogOpen || false;\n\n    if (!this.preview && cartStore.step === 'finish') {\n      // reset cart store if it's not preview mode and only when checkout is in the finish step.\n      cartStoreReset();\n    }\n    // reset step to customer info\n    cartStore.step = 'customer-info';\n  }\n\n  private applyStripeTheme = async () => {\n    const theme =\n      this.appearanceSettingsOverride?.theme || zonosStore.appearance.theme;\n\n    await initStripeElements({\n      overrideBorderRaidus: this.appearanceSettingsOverride?.style,\n      overridePrimaryColor: this.appearanceSettingsOverride?.colorPrimary,\n      // only override theme or theme from appearance if it's mobile\n      overrideTheme: this.isMobile ? theme : undefined,\n    });\n  };\n\n  private async buildCartAndInit() {\n    if (zonosStore.checkoutSettings.buildCartDetail) {\n      log('build cart detail');\n      const cartItems = await zonosStore.checkoutSettings.buildCartDetail();\n      await cartStoreUpdateItems(cartItems);\n    }\n\n    // if client secret doesn't exist, request a new one.\n    if (!stripeStore.clientSecret) {\n      const success = await stripeStoreInitCheckoutSession();\n      if (!success) {\n        return false;\n      }\n    }\n\n    // apply theme to stripe elements\n    await this.applyStripeTheme();\n    return true;\n  }\n\n  private attachCheckout() {\n    if (!this.buttonAnchorElements) {\n      // do nothing if button element is not found\n      return;\n    }\n    // only attach event once, and looping through all of the button elements\n    this.buttonAnchorElements.forEach(button => {\n      const isEventAttached = button.getAttribute(\n        'data-zonos-checkout-attached',\n      );\n      if (!isEventAttached) {\n        button.addEventListener('click', async e => {\n          if (!localizationStore.localizationLoaded) {\n            return;\n          }\n          // if localization is loaded and the localization is not a shippable country, keep the original click event\n          if (!localizationStore.isShippableCountry) {\n            log(`not shippable country`);\n            return;\n          }\n          e.preventDefault();\n          e.stopPropagation();\n          log('zonos checkout button clicked');\n          this.open = true;\n\n          const result = await this.buildCartAndInit();\n          if (!result) {\n            cartStoreUpdateToErrorState({\n              messages: [\n                translate(\n                  \"There's been an error creating your checkout session. Please reload and try again or contact support if the error persists\",\n                ),\n              ],\n              title: translate('Error creating Checkout'),\n            });\n            return;\n          }\n          submitGtag('zonos-checkout-start');\n        });\n        button.setAttribute('data-zonos-checkout-attached', 'true');\n      }\n    });\n  }\n\n  @Watch('appearanceSettingsOverride')\n  appearanceSettingsOverrideChanged() {\n    if (!this.appearanceSettingsOverride) {\n      return;\n    }\n\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n  }\n\n  /**\n   * Setup all of the event listeners for the component on first load\n   */\n  @Method()\n  public async init() {\n    stripeStore.stripe = window.Zonos.stripe;\n    this.stripe = window.Zonos.stripe;\n\n    // only init checkout if visitor's country is in the shipping zones.\n    const interval = setInterval(() => {\n      stripeStore.stripe = window.Zonos.stripe;\n      this.stripe = window.Zonos.stripe;\n\n      if (!localizationStore.localizationLoaded) {\n        return;\n      }\n      // if localization is loaded and the localization is not a shippable country, stop the interval and don't init checkout\n      // No need to check localization if it's preview mode\n      if (!localizationStore.isShippableCountry && !this.preview) {\n        log('not shippable country');\n        clearInterval(interval);\n        return;\n      }\n\n      if (!this.stripe) {\n        log('waiting for stripe to be loaded');\n        return;\n      }\n\n      if (this.storybookPaymentStatusOverride) {\n        clearInterval(interval);\n        return;\n      }\n\n      log('init checkout');\n      if (this.preview || this.forceDialogOpen) {\n        void this.buildCartAndInit();\n      } else {\n        this.attachCheckout();\n      }\n      clearInterval(interval);\n    }, 100);\n\n    setTimeout(() => {\n      // if localization is not loaded after 10 seconds, stop the interval and don't init checkout\n      clearInterval(interval);\n    }, 10_000);\n  }\n\n  /**\n   * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish\n   */\n  @Method()\n  public async setToFinishStep(forcePaymentStatus?: PaymentIntent['status']) {\n    cartStore.step = 'finish';\n    this.storybookPaymentStatusOverride = forcePaymentStatus;\n  }\n\n  private async handleCustomerInfoContinue() {\n    this.submitLoading = true;\n\n    // fetch landed cost data if we not fetching.\n    await stripeStorePrefetchLandedCost();\n\n    // keep checking landed cost data until it's ready to move to next screen\n    const interval = setInterval(() => {\n      if (cartStore.landedCostData || !stripeStore.isFetchingLandedCost) {\n        if (cartStore.landedCostData) {\n          // only go to next step if landed cost data is ready\n          cartStoreNextStep();\n        }\n        this.submitLoading = false;\n        clearInterval(interval);\n      }\n    }, 500);\n  }\n\n  private async handleShippingContinue() {\n    this.submitLoading = true;\n    // show loading for the button for a bit\n    setTimeout(() => {\n      cartStoreNextStep();\n      this.submitLoading = false;\n    }, 500);\n  }\n\n  private async handleCheckoutPaymentContinue() {\n    // reset error state\n    this.paymentError = false;\n    this.submitLoading = true;\n    try {\n      await stripeStoreConfirmPayment();\n      cartStoreNextStep();\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error(err);\n      this.paymentError = true;\n    }\n    this.submitLoading = false;\n  }\n\n  private async handleFinishClick() {\n    // reset stripe store\n    stripeStoreReset();\n\n    if (this.preview) {\n      cartStore.step = 'customer-info';\n      await this.init();\n      return;\n    }\n    // reset cart store\n    cartStoreReset();\n\n    // reset url\n    const url = window.location.href;\n\n    // Remove query parameters\n    const cleanUrl = url.split('?')[0];\n\n    // Update the URL without query parameters\n    window.history.replaceState({}, document.title, cleanUrl);\n    this.open = false;\n  }\n\n  private async handleBackClick() {\n    // close the modal if back button is clicked on customer info step\n    if (cartStore.step === 'customer-info') {\n      await this.closeDialogHandler();\n      return;\n    }\n    cartStorePreviousStep();\n  }\n\n  private getCurrentLocalePageEnum = (): Locale_PageName_Enum | null => {\n    switch (cartStore.step) {\n      case 'customer-info':\n        return 'checkout_customer_info';\n      case 'shipping':\n        return 'checkout_shipping_info';\n      case 'payment':\n        return 'checkout_payment_info';\n\n      default:\n        return null;\n    }\n  };\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  @Watch('mobile')\n  handleMobileChange() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  componentWillLoad() {\n    void this.init();\n    this.isMobile = isCheckoutMobile(this.mobile);\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  // do clean up when component is unmounted\n  disconnectedCallback() {\n    // reset stripe store\n    stripeStoreReset();\n    // reset cart store\n    cartStoreReset();\n  }\n\n  render() {\n    const dialogLoading =\n      // if it's last step, don't need to check stripe elements\n      (cartStore.step !== 'finish' && !stripeStore.stripeElements) ||\n      stripeStore.isFetchingSession;\n\n    const { colorPrimary, colorSecondary, logoUrl, style } = mergeConfig(\n      zonosStore.appearance,\n      this.appearanceSettingsOverride,\n    );\n\n    const hasFooter = zonosStore.appearance.zonosAttribution === 'ENABLED';\n\n    const rightSideTheme = zonosStore.appearance.theme;\n\n    const themePrimaryColorBased: ElementsUiTheme =\n      colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';\n\n    // use right side theme if it's mobile, otherwise use themePrimaryColorBased\n    const leftSideTheme: ElementsUiTheme = this.isMobile\n      ? rightSideTheme\n      : themePrimaryColorBased;\n\n    // only use submit button color if it's on desktop\n    const submitButtonColor = !this.isMobile ? colorSecondary : undefined;\n\n    const { customMessages } = localizationStore;\n    const defaultMessage =\n      customMessages.find(x => x.pageName === 'checkout_default')?.message ||\n      'Know about duties and taxes before you buy. Shop with confidence!';\n\n    const localePageEnum = this.getCurrentLocalePageEnum();\n    const filteredMessages = customMessages.filter(\n      x => x.pageName === localePageEnum,\n    );\n\n    const renderLogo = () => (\n      <div class=\"zonos--logo\">\n        {logoUrl && (\n          <img\n            alt={`${zonosStore.organizationName} logo`}\n            src={logoUrl}\n            width={100}\n          />\n        )}\n      </div>\n    );\n\n    const renderTopHeader = () => (\n      <zonos-v-stack>\n        {renderLogo()}\n\n        {filteredMessages.map(x => (\n          <zonos-custom-message\n            icon={MessageIcon}\n            message={x.message}\n          ></zonos-custom-message>\n        ))}\n\n        <div>\n          <zonos-button\n            class=\"zonos--back-button\"\n            icon={<zonos-icon content={LeftArrow}></zonos-icon>}\n            noBackground\n            noPaddingLeft\n            noPaddingRight\n            onClick={() => this.handleBackClick()}\n            theme={leftSideTheme}\n          >\n            {translate('Back')}\n          </zonos-button>\n        </div>\n      </zonos-v-stack>\n    );\n\n    const renderFooter = () =>\n      hasFooter && (\n        <div class=\"zonos--footer\" data-theme={rightSideTheme}>\n          <zonos-text type=\"hintText\">{translate('Powered by')}</zonos-text>\n          <zonos-logo theme={rightSideTheme} width=\"100px\"></zonos-logo>\n        </div>\n      );\n\n    const renderContent = () => {\n      const submitBtnType = this.isMobile ? 'primary' : undefined;\n      const reviewElementSize = this.zonosReviewRef?.scrollHeight;\n      return (\n        <div\n          class={'zonos--content'}\n          style={{\n            '--border-radius': getBorderRadius(style),\n          }}\n        >\n          {cartStore.step !== 'finish' && cartStore.step !== 'error' && (\n            <>\n              <div\n                class=\"zonos--left\"\n                data-theme={leftSideTheme}\n                style={{\n                  '--primary-color': !this.isMobile ? colorPrimary : '',\n                }}\n              >\n                {!this.isMobile && renderTopHeader()}\n                {cartStore.step === 'customer-info' && (\n                  <zonos-customer-info\n                    continueLoading={this.submitLoading}\n                    defaultAddress={this.defaultAddress}\n                    onContinueClicked={() => this.handleCustomerInfoContinue()}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-customer-info>\n                )}\n                {cartStore.step === 'shipping' && (\n                  <zonos-shipping\n                    continueLoading={this.submitLoading}\n                    onContinueClicked={() => this.handleShippingContinue()}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-shipping>\n                )}\n                {cartStore.step === 'payment' && (\n                  <zonos-checkout-payment\n                    continueLoading={this.submitLoading}\n                    onContinueClicked={() =>\n                      this.handleCheckoutPaymentContinue()\n                    }\n                    paymentError={this.paymentError}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-checkout-payment>\n                )}\n              </div>\n              <div class=\"zonos--right\" data-theme={rightSideTheme}>\n                {this.isMobile && renderTopHeader()}\n                {!this.isMobile && (\n                  <zonos-button\n                    class=\"zonos--close-button\"\n                    icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                    noBackground\n                    onClick={() => this.closeDialogHandler()}\n                  ></zonos-button>\n                )}\n                <div class=\"flex--wrapper\">\n                  <div class=\"zonos--wrapper\">\n                    <zonos-collapse\n                      collapseSize={reviewElementSize}\n                      collapsed={this.collapseReviewMobile}\n                    >\n                      <zonos-review\n                        collapsed={this.collapseReviewMobile}\n                        mobile={this.isMobile}\n                        onClick={() => {\n                          this.collapseReviewMobile =\n                            !this.collapseReviewMobile;\n                        }}\n                        ref={el => (this.zonosReviewRef = el)}\n                      ></zonos-review>\n                      {/* Cart item rows */}\n                      <zonos-cart-items></zonos-cart-items>\n                    </zonos-collapse>\n                  </div>\n\n                  <zonos-v-stack spacing={16}>\n                    {/* Cart subtotal row */}\n                    <zonos-cart-subtotal></zonos-cart-subtotal>\n\n                    <zonos-custom-message\n                      class=\"zonos--checkout-default-message\"\n                      icon={MessageIcon}\n                      message={defaultMessage}\n                    ></zonos-custom-message>\n                  </zonos-v-stack>\n                </div>\n\n                {/* Only show footer on desktop */}\n                {!this.isMobile && renderFooter()}\n              </div>\n              {/* Only show footer on mobile */}\n              {this.isMobile && renderFooter()}\n            </>\n          )}\n\n          {(cartStore.step === 'finish' || cartStore.step === 'error') && (\n            <div class=\"zonos--done\" data-theme={rightSideTheme}>\n              <div class=\"zonos--header\">\n                {renderLogo()}\n                <zonos-button\n                  class=\"zonos--close-button\"\n                  icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                  noBackground\n                  onClick={() => this.handleFinishClick()}\n                  theme={rightSideTheme}\n                ></zonos-button>\n              </div>\n              <zonos-checkout-finish\n                borderRadius={style}\n                onCloseClick={() => this.handleFinishClick()}\n                overrideNotification={\n                  cartStore.step === 'error' && !!cartStore.error\n                    ? {\n                        ...cartStore.error,\n                        type: 'error',\n                      }\n                    : undefined\n                }\n                storybookForceStatus={this.storybookPaymentStatusOverride}\n              ></zonos-checkout-finish>\n            </div>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={classes([\n          'zonos--checkout zonos--elements',\n          hasFooter && 'has-footer',\n          this.preview && 'preview',\n          this.isMobile && 'mobile',\n        ])}\n      >\n        {this.preview ? (\n          renderContent()\n        ) : (\n          <zonos-dialog\n            borderStyle={style}\n            data-theme={rightSideTheme}\n            height=\"980px\"\n            isLoading={dialogLoading}\n            mobile={this.isMobile}\n            noBodyPadding\n            noBorder\n            noClickOutside\n            noCloseButton\n            onCloseDialog={() => this.closeDialogHandler()}\n            open={this.open}\n            width=\"1200px\"\n          >\n            {renderContent()}\n          </zonos-dialog>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/zonos-component.entry.js.map

@@ -1 +0,0 @@
-{"file":"zonos-component.entry.js","mappings":";;SAAgB,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;EAChE,QACE,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC,EACvE;AACJ;;ACJA,MAAM,iBAAiB,GAAG,mSAAmS;;MCShT,cAAc;;;iBAID,EAAE;kBAKD,EAAE;gBAKJ,EAAE;;EAEjB,OAAO;IACb,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACnD;EAED,MAAM;IACJ,OAAO,qCAAwB,IAAI,CAAC,OAAO,EAAE,CAAO,CAAC;GACtD;;;;;;","names":[],"sources":["src/utils/format.ts","src/components/component-template/zonos-component/zonos-component.scss?tag=zonos-component&encapsulation=shadow","src/components/component-template/zonos-component/zonos-component.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (\n    (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '')\n  );\n}\n","div {\n  color: red;\n  font-size: large;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { format } from 'src/utils/format';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-component.scss',\n  tag: 'zonos-component',\n})\nexport class ZonosComponent {\n  /**\n   * The first name\n   */\n  @Prop() first: string = '';\n\n  /**\n   * The middle name\n   */\n  @Prop() middle: string = '';\n\n  /**\n   * The last name\n   */\n  @Prop() last: string = '';\n\n  private getText(): string {\n    return format(this.first, this.middle, this.last);\n  }\n\n  render() {\n    return <div>Hello, World! I'm {this.getText()}</div>;\n  }\n}\n"],"version":3}

package/dist/esm/zonos-controller.entry.js.map

@@ -1 +0,0 @@
-{"file":"zonos-controller.entry.js","mappings":"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","names":[],"sources":["src/components/utils/api/getZonosSetting.ts","src/components/utils/checkout/initCheckout.ts","src/components/utils/hello/initHello.ts","src/components/main/zonos-controller.scss?tag=zonos-controller&encapsulation=shadow","src/components/main/zonos-controller.tsx"],"sourcesContent":["import { handleFetch } from 'src/components/utils/handleFetch';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { ZonosSettingsQuery } from 'src/types/generated/graphql.customer.types';\n\nexport const getZonosSetting = async () => {\n  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-setting`;\n  const { errors, json } = await handleFetch<ZonosSettingsQuery>(url);\n  if (errors.length) {\n    logError(\n      `Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`,\n    );\n    return { errors, json: null };\n  }\n  return { errors: [], json };\n};\n","import { isValidSelector } from 'src/components/utils/isValidSelector';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { CheckoutConfig } from 'src/types/checkout/CheckoutConfig';\n\nconst injectCheckoutElement = (triggerAnchorElement: HTMLElement[] | null) => {\n  // append checkout component if doesn't exist\n  const checkoutElement = document.querySelector('zonos-checkout');\n\n  if (!checkoutElement) {\n    const newCheckoutElement = document.createElement('zonos-checkout');\n    newCheckoutElement.buttonAnchorElements = triggerAnchorElement;\n\n    document.body.appendChild(newCheckoutElement);\n  }\n};\n\nexport const initCheckout = async (config: Partial<CheckoutConfig>) => {\n  if (!config.placeOrderButtonSelector) {\n    // do nothing if checkout button anchor is not set\n    return;\n  }\n\n  // check if checkout button anchor selector user pass in is valid\n  if (!isValidSelector(config.placeOrderButtonSelector)) {\n    logError(\n      `Selector checkoutButtonAnchor \"${config.placeOrderButtonSelector}\" is not a valid selector`,\n    );\n    return;\n  }\n\n  const triggerElement = document.querySelectorAll(\n    config.placeOrderButtonSelector,\n  );\n  injectCheckoutElement(triggerElement as unknown as HTMLElement[]);\n};\n","import { isValidSelector } from 'src/components/utils/isValidSelector';\nimport { log } from 'src/components/utils/logging/log';\nimport { logError } from 'src/components/utils/logging/logError';\nimport type { HelloSettingFragment } from 'src/types/generated/graphql.customer.types';\n\nconst injectHelloComponent = (triggerAnchorElement: HTMLElement | null) => {\n  // append checkout component if doesn't exist\n  const helloElement = document.querySelector('zonos-hello');\n\n  if (!helloElement && triggerAnchorElement) {\n    const newHelloElement = document.createElement('zonos-hello');\n    triggerAnchorElement.appendChild(newHelloElement);\n  }\n};\n\nexport const initHello = async (\n  helloSettings: Partial<HelloSettingFragment>,\n) => {\n  const { anchorElementSelector } = helloSettings;\n  // check if checkout button anchor selector user pass in is valid to setup hello\n  if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {\n    logError(\n      `Selector anchorElementSelector \"${helloSettings.anchorElementSelector}\" is not a valid selector.`,\n    );\n    return;\n  }\n\n  const triggerElement = document.querySelector<HTMLElement>(\n    anchorElementSelector,\n  );\n\n  log('Hello init complete');\n  injectHelloComponent(triggerElement);\n};\n",":host {\n  visibility: hidden;\n  opacity: 0;\n  height: 0;\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport type { Stripe } from '@stripe/stripe-js';\n\nimport type { NotificationInit } from 'src/components/common/zonos-notification/zonos-notification';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport {\n  initLocalizationStore,\n  localizationStoreUpdateSelectedCountryCode,\n} from 'src/components/store/hello/localization';\nimport {\n  zonosStore,\n  zonosStoreInitSetting,\n} from 'src/components/store/zonosStore';\nimport { getZonosSetting } from 'src/components/utils/api/getZonosSetting';\nimport { initCheckout } from 'src/components/utils/checkout/initCheckout';\nimport { initHello } from 'src/components/utils/hello/initHello';\nimport { log } from 'src/components/utils/logging/log';\nimport type { LoadZonosParamsConfig } from 'src/scripts/zonos';\nimport type { CountryCode } from 'src/types/generated/graphql.customer.types';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-controller.scss',\n  tag: 'zonos-controller',\n})\nexport class ZonosController {\n  /**\n   * The zonos config object\n   */\n  @Prop() config!: LoadZonosParamsConfig;\n\n  /**\n   * The zonos api key\n   */\n  @Prop() zonosApiKey!: string;\n\n  /**\n   * Event emitted when stripe is initialized\n   */\n  @Event() stripeInitEvent?: EventEmitter<{ publishableKey: string }>;\n\n  /**\n   * Method to initialize checkout element\n   */\n  @Method()\n  public async initCheckoutElement(stripe: Stripe) {\n    if (!stripe) {\n      // eslint-disable-next-line no-console\n      log('Stripe is not loaded yet - cannot init checkout element', 'warn');\n      return;\n    }\n    stripeStore.stripe = stripe;\n    void initCheckout(zonosStore.checkoutSettings);\n    log('init checkout element');\n  }\n\n  /**\n   * Init zonos notification\n   */\n  private initZonosNotification() {\n    const existingNotification = document.querySelector('zonos-notification');\n    if (existingNotification) {\n      return;\n    }\n    const zonosNotification = document.createElement('zonos-notification');\n    document.body.appendChild(zonosNotification);\n  }\n\n  async componentWillLoad() {\n    zonosStore.zonosApiKey = this.zonosApiKey;\n    // running with scope async function to avoid blocking the main thread\n    (async () => {\n      const { errors, json } = await getZonosSetting();\n      if (errors[0]?.type.toString() === '403') {\n        log(\n          'Failed to load zonos settings. This domain may not have access',\n          'warn',\n        );\n        return;\n      }\n\n      // init zonos notification\n      this.initZonosNotification();\n\n      // load default setting if fail to load user setting\n      zonosStoreInitSetting({\n        overrideSettings: this.config,\n        zonosSettings: json,\n      });\n\n      if (zonosStore.helloSettings) {\n        void initHello(zonosStore.helloSettings);\n      }\n      // init localization store\n      await initLocalizationStore();\n\n      // checkout init\n      const publishableKey =\n        json?.checkoutSettings?.externalServiceTokens.find(\n          item => item.type === 'STRIPE_PUBLISHABLE_TOKEN',\n        ) || null;\n\n      if (!publishableKey || !this.stripeInitEvent) {\n        log('Checkout failed to load -- missing publishable key', 'warn');\n        return;\n      }\n\n      // send publishable key out to load stripe\n      this.stripeInitEvent.emit({\n        publishableKey: publishableKey.token,\n      });\n\n      // eslint-disable-next-line no-console\n      log('zonos controller loaded');\n    })();\n  }\n\n  /**\n   * Show notification\n   */\n  @Method()\n  public async showNotification(notification: NotificationInit) {\n    const notificationElement = document.querySelector('zonos-notification');\n    if (!notificationElement) {\n      log('Failed to show notification - zonos-notification not found', 'warn');\n      return;\n    }\n    void notificationElement.showNotification(notification);\n  }\n\n  /**\n   * Override the setting\n   * @param config config that need to override the default setting\n   */\n  @Method()\n  public async overrideConfig(config: LoadZonosParamsConfig) {\n    zonosStoreInitSetting({\n      overrideSettings: config,\n      zonosSettings: null,\n    });\n  }\n\n  /**\n   * Override country code for storybook\n   */\n  @Method()\n  public async overrideCountry(countryCode: CountryCode) {\n    void localizationStoreUpdateSelectedCountryCode(countryCode);\n  }\n\n  render() {\n    return <Host class=\"zonos--elements\"></Host>;\n  }\n}\n"],"version":3}