@zonos/elements 1.0.16

package/dist/components/zonos-collapse2.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const zonosCollapseCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
+
+const ZonosCollapse = /*@__PURE__*/ proxyCustomElement(class ZonosCollapse extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.collapsed = false;
+    this.collapseSize = 0;
+    this.height = this.el.scrollHeight;
+  }
+  getElementHeight() {
+    const fullHeight = `${this.height}px`;
+    const collapsedHeight = `${this.collapseSize}px`;
+    return this.collapsed ? collapsedHeight : fullHeight;
+  }
+  componentDidLoad() {
+    this.height = this.el.scrollHeight;
+  }
+  componentDidRender() {
+    var _a, _b, _c;
+    (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+      this.height = this.el.scrollHeight;
+    });
+  }
+  render() {
+    this.height = this.el.scrollHeight;
+    return (h(Host, { class: 'zonos--elements zonos--collapse', style: {
+        height: this.getElementHeight(),
+      } }, h("div", null, h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return zonosCollapseCss; }
+}, [1, "zonos-collapse", {
+    "collapsed": [4],
+    "collapseSize": [2, "collapse-size"],
+    "height": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-collapse"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-collapse":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosCollapse);
+      }
+      break;
+  } });
+}
+
+export { ZonosCollapse as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-collapse2.js.map

package/dist/components/zonos-collapse2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-collapse2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,icAAic;;MCQ7c,aAAa;;;;;qBAIK,KAAK;wBAIH,CAAC;kBAIN,IAAI,CAAC,EAAE,CAAC,YAAY;;EAEtC,gBAAgB;IACtB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;IACtC,MAAM,eAAe,GAAG,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC;IACjD,OAAO,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;GACtD;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;GACpC;EAED,kBAAkB;;IAChB,MAAA,MAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CACd,aAAa,CAAC,QAAQ,CAAC,0CACvB,aAAa,0CAAE,gBAAgB,CAAC,QAAQ,EAAE;MAC1C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;KACpC,CAAC,CAAC;GACN;EAED,MAAM;IACJ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;IACnC,QACE,EAAC,IAAI,IACH,KAAK,EAAE,iCAAiC,EACxC,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE;OAChC,IAED,eACE,cACE,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,iCAAiC,GAC/B,EACV,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-collapse/zonos-collapse.scss?tag=zonos-collapse&encapsulation=shadow","src/components/common/zonos-collapse/zonos-collapse.tsx"],"sourcesContent":[":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"],"version":3}

package/dist/components/zonos-component.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosComponent extends Components.ZonosComponent, HTMLElement {}
+export const ZonosComponent: {
+  prototype: ZonosComponent;
+  new (): ZonosComponent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-component.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}
+
+const zonosComponentCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}div{color:red;font-size:large}";
+
+const ZonosComponent$1 = /*@__PURE__*/ proxyCustomElement(class ZonosComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.first = '';
+    this.middle = '';
+    this.last = '';
+  }
+  getText() {
+    return format(this.first, this.middle, this.last);
+  }
+  render() {
+    return h("div", null, "Hello, World! I'm ", this.getText());
+  }
+  static get style() { return zonosComponentCss; }
+}, [1, "zonos-component", {
+    "first": [1],
+    "middle": [1],
+    "last": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-component"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-component":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosComponent$1);
+      }
+      break;
+  } });
+}
+
+const ZonosComponent = ZonosComponent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosComponent, defineCustomElement };
+
+//# sourceMappingURL=zonos-component.js.map

package/dist/components/zonos-component.js.map

@@ -0,0 +1 @@
+{"file":"zonos-component.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;;MCShTA,gBAAc;;;;;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":["ZonosComponent"],"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/components/zonos-controller.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosController extends Components.ZonosController, HTMLElement {}
+export const ZonosController: {
+  prototype: ZonosController;
+  new (): ZonosController;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-controller.js

@@ -0,0 +1,200 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as stripeStore } from './stripe.js';
+import { h as handleFetch, l as logError, i as isValidSelector, b as log, c as initLocalizationStore, d as localizationStoreUpdateSelectedCountryCode } from './localization.js';
+import { z as zonosStore, d as zonosStoreInitSetting } from './zonosStore.js';
+import { d as defineCustomElement$3 } from './zonos-notification2.js';
+import { d as defineCustomElement$2 } from './zonos-text2.js';
+
+const getZonosSetting = async () => {
+  const url = `${"https://route.js.zonos.com"}/api/zonos-setting`;
+  const { errors, json } = await handleFetch(url);
+  if (errors.length) {
+    logError(`Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`);
+    return { errors, json: null };
+  }
+  return { errors: [], json };
+};
+
+const injectCheckoutElement = (triggerAnchorElement) => {
+  // append checkout component if doesn't exist
+  const checkoutElement = document.querySelector('zonos-checkout');
+  if (!checkoutElement) {
+    const newCheckoutElement = document.createElement('zonos-checkout');
+    newCheckoutElement.buttonAnchorElements = triggerAnchorElement;
+    document.body.appendChild(newCheckoutElement);
+  }
+};
+const initCheckout = async (config) => {
+  if (!config.placeOrderButtonSelector) {
+    // do nothing if checkout button anchor is not set
+    return;
+  }
+  // check if checkout button anchor selector user pass in is valid
+  if (!isValidSelector(config.placeOrderButtonSelector)) {
+    logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
+    return;
+  }
+  const triggerElement = document.querySelectorAll(config.placeOrderButtonSelector);
+  injectCheckoutElement(triggerElement);
+};
+
+const injectHelloComponent = (triggerAnchorElement) => {
+  // append checkout component if doesn't exist
+  const helloElement = document.querySelector('zonos-hello');
+  if (!helloElement && triggerAnchorElement) {
+    const newHelloElement = document.createElement('zonos-hello');
+    triggerAnchorElement.appendChild(newHelloElement);
+  }
+};
+const initHello = async (helloSettings) => {
+  const { anchorElementSelector } = helloSettings;
+  // check if checkout button anchor selector user pass in is valid to setup hello
+  if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {
+    logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
+    return;
+  }
+  const triggerElement = document.querySelector(anchorElementSelector);
+  log('Hello init complete');
+  injectHelloComponent(triggerElement);
+};
+
+const zonosControllerCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{visibility:hidden;opacity:0;height:0}";
+
+const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.stripeInitEvent = createEvent(this, "stripeInitEvent", 7);
+    this.config = undefined;
+    this.zonosApiKey = undefined;
+  }
+  /**
+   * Method to initialize checkout element
+   */
+  async initCheckoutElement(stripe) {
+    if (!stripe) {
+      // eslint-disable-next-line no-console
+      log('Stripe is not loaded yet - cannot init checkout element', 'warn');
+      return;
+    }
+    stripeStore.stripe = stripe;
+    void initCheckout(zonosStore.checkoutSettings);
+    log('init checkout element');
+  }
+  /**
+   * Init zonos notification
+   */
+  initZonosNotification() {
+    const existingNotification = document.querySelector('zonos-notification');
+    if (existingNotification) {
+      return;
+    }
+    const zonosNotification = document.createElement('zonos-notification');
+    document.body.appendChild(zonosNotification);
+  }
+  async componentWillLoad() {
+    zonosStore.zonosApiKey = this.zonosApiKey;
+    // running with scope async function to avoid blocking the main thread
+    (async () => {
+      var _a, _b;
+      const { errors, json } = await getZonosSetting();
+      if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
+        log('Failed to load zonos settings. This domain may not have access', 'warn');
+        return;
+      }
+      // init zonos notification
+      this.initZonosNotification();
+      // load default setting if fail to load user setting
+      zonosStoreInitSetting({
+        overrideSettings: this.config,
+        zonosSettings: json,
+      });
+      if (zonosStore.helloSettings) {
+        void initHello(zonosStore.helloSettings);
+      }
+      // init localization store
+      await initLocalizationStore();
+      // checkout init
+      const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
+      if (!publishableKey || !this.stripeInitEvent) {
+        log('Checkout failed to load -- missing publishable key', 'warn');
+        return;
+      }
+      // send publishable key out to load stripe
+      this.stripeInitEvent.emit({
+        publishableKey: publishableKey.token,
+      });
+      // eslint-disable-next-line no-console
+      log('zonos controller loaded');
+    })();
+  }
+  /**
+   * Show notification
+   */
+  async showNotification(notification) {
+    const notificationElement = document.querySelector('zonos-notification');
+    if (!notificationElement) {
+      log('Failed to show notification - zonos-notification not found', 'warn');
+      return;
+    }
+    void notificationElement.showNotification(notification);
+  }
+  /**
+   * Override the setting
+   * @param config config that need to override the default setting
+   */
+  async overrideConfig(config) {
+    zonosStoreInitSetting({
+      overrideSettings: config,
+      zonosSettings: null,
+    });
+  }
+  /**
+   * Override country code for storybook
+   */
+  async overrideCountry(countryCode) {
+    void localizationStoreUpdateSelectedCountryCode(countryCode);
+  }
+  render() {
+    return h(Host, { class: "zonos--elements" });
+  }
+  static get style() { return zonosControllerCss; }
+}, [1, "zonos-controller", {
+    "config": [16],
+    "zonosApiKey": [1, "zonos-api-key"],
+    "initCheckoutElement": [64],
+    "showNotification": [64],
+    "overrideConfig": [64],
+    "overrideCountry": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-controller", "zonos-notification", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-controller":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosController$1);
+      }
+      break;
+    case "zonos-notification":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ZonosController = ZonosController$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosController, defineCustomElement };
+
+//# sourceMappingURL=zonos-controller.js.map

package/dist/components/zonos-controller.js.map

@@ -0,0 +1 @@
+{"file":"zonos-controller.js","mappings":"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","names":["ZonosController"],"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}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosCountryFlag extends Components.ZonosCountryFlag, HTMLElement {}
+export const ZonosCountryFlag: {
+  prototype: ZonosCountryFlag;
+  new (): ZonosCountryFlag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-country-flag.js

@@ -0,0 +1,8 @@
+import { Z as ZonosCountryFlag$1, d as defineCustomElement$1 } from './zonos-country-flag2.js';
+
+const ZonosCountryFlag = ZonosCountryFlag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCountryFlag, defineCustomElement };
+
+//# sourceMappingURL=zonos-country-flag.js.map

package/dist/components/zonos-country-flag.js.map

@@ -0,0 +1 @@
+{"file":"zonos-country-flag.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-country-flag2.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as localizationStore } from './localization.js';
+import { c as classes } from './classes.js';
+
+const zonosCountryFlagCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
+
+const FLAG_URL = "https://zonos-store-assets.s3.amazonaws.com/images/elements-flags";
+const ZonosCountryFlag = /*@__PURE__*/ proxyCustomElement(class ZonosCountryFlag extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.class = '';
+    this.countryCode = localizationStore.selectedCountryCode;
+    this.size = undefined;
+  }
+  render() {
+    if (!this.el.shadowRoot || !this.countryCode) {
+      return null;
+    }
+    const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;
+    return (h(Host, { class: "zonos--elements", style: this.size
+        ? {
+          height: `${this.size}px`,
+          width: `${this.size}px`,
+        }
+        : {} }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
+  }
+  get el() { return this; }
+  static get style() { return zonosCountryFlagCss; }
+}, [1, "zonos-country-flag", {
+    "class": [1],
+    "countryCode": [1, "country-code"],
+    "size": [2]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-country-flag"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-country-flag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosCountryFlag);
+      }
+      break;
+  } });
+}
+
+export { ZonosCountryFlag as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-country-flag2.js.map

package/dist/components/zonos-country-flag2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-country-flag2.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,6hBAA6hB;;ACMzjB,MAAM,QAAQ,GAAG,mEAAgC,CAAC;MAOrC,gBAAgB;;;;;iBAIF,EAAE;uBAQzB,iBAAiB,CAAC,mBAAmB;;;EASvC,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MAC5C,OAAO,IAAI,CAAC;KACb;IAED,MAAM,OAAO,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,WAAW,MAAM,CAAC;IAEtD,QACE,EAAC,IAAI,IACH,KAAK,EAAC,iBAAiB,EACvB,KAAK,EACH,IAAI,CAAC,IAAI;UACL;UACE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;UACxB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;SACxB;UACD,EAAE,IAGR,WAAK,KAAK,EAAE,OAAO,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IACjD,WACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,OAAO,GAAG,EAAE,GACxC,CACH,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-country-flag/zonos-country-flag.scss?tag=zonos-country-flag&encapsulation=shadow","src/components/common/zonos-country-flag/zonos-country-flag.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  .flag-container {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  .flag-icon {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: cover;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { classes } from 'src/components/utils/classes';\nimport type { CountryCode } from 'src/types/generated/graphql.customer.types';\n\nconst FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-country-flag.scss',\n  tag: 'zonos-country-flag',\n})\nexport class ZonosCountryFlag {\n  /**\n   * The class name for the flag\n   */\n  @Prop() class?: string = '';\n\n  /**\n   * The country code for the flag\n   * @default localizationStore.selectedCountryCode\n   * @example 'US'\n   */\n  @Prop() countryCode: CountryCode | null =\n    localizationStore.selectedCountryCode;\n\n  /**\n   * The size of the flag\n   */\n  @Prop() size?: number;\n\n  @Element() el!: HTMLZonosCountryFlagElement;\n\n  render() {\n    if (!this.el.shadowRoot || !this.countryCode) {\n      return null;\n    }\n\n    const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;\n\n    return (\n      <Host\n        class=\"zonos--elements\"\n        style={\n          this.size\n            ? {\n                height: `${this.size}px`,\n                width: `${this.size}px`,\n              }\n            : {}\n        }\n      >\n        <div class={classes([`flag-container`, this.class])}>\n          <div\n            class=\"flag-icon\"\n            style={{ backgroundImage: `url(${flagUrl})` }}\n          ></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosCountrySelect extends Components.ZonosCountrySelect, HTMLElement {}
+export const ZonosCountrySelect: {
+  prototype: ZonosCountrySelect;
+  new (): ZonosCountrySelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-country-select.js

@@ -0,0 +1,8 @@
+import { Z as ZonosCountrySelect$1, d as defineCustomElement$1 } from './zonos-country-select2.js';
+
+const ZonosCountrySelect = ZonosCountrySelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCountrySelect, defineCustomElement };
+
+//# sourceMappingURL=zonos-country-select.js.map

package/dist/components/zonos-country-select.js.map

@@ -0,0 +1 @@
+{"file":"zonos-country-select.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}