@zonos/elements 1.3.232 → 1.3.234

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-subtotal/zonos-invoice-subtotal.js

@@ -0,0 +1,65 @@
+import { h, Host } from "@stencil/core";
+import { invoiceStore } from "../../../store/checkout/invoice";
+import { translate } from "../../../store/translationStore";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { classes } from "../../../utils/classes";
+import { renderFallback } from "../../../utils/renderFallback";
+export class ZonosInvoiceSubtotal {
+    constructor() {
+        /**
+         * Whether the component is mobile
+         */
+        this.isMobile = false;
+    }
+    render() {
+        return (h(Host, { key: '99eaf74026ee26cc11ab78adf57f1b7eb55309d3', class: classes([
+                'zonos--invoice-subtotal zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("table", { key: 'a3f9a029a979fd4afeaee02c55a49c4e6547e483', class: "zonos--invoice-table" }, h("tr", { key: 'bf8594623c4eb7492899647fbe3bc4fa0a8b1973', class: "zonos--row zonos--invoice-total" }, h("td", { key: 'b967b527461161244479ff8ac5ae40bdbd7f2b38', class: "zonos--column" }), h("td", { key: '4af6f40176c19c0aad1109a8be722a2b41fc66e9', class: "zonos--column zonos--invoice-subtotal-title" }, h("zonos-text", { key: '0b01c51ddabd61c0abaf8214e05db2fe6a650941', type: "semiBoldLabel" }, translate('Payment total'))), h("td", { key: '00109c0948f0110c478643461a0a70a7cc2441ba', class: "zonos--column zonos--invoice-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "semiBoldLabel" }, renderCheckoutCurrency({
+                amount: invoiceStore.amountTotalDue || 0,
+                isForeign: true,
+            }))),
+            isLoading: invoiceStore.isFetchingPayorInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        }))))));
+    }
+    static get is() { return "zonos-invoice-subtotal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-invoice-subtotal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-invoice-subtotal.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice.css

@@ -0,0 +1,350 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  z-index: 2147483647;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  background-color: var(--zonos-elements-gray-0);
+}
+:host * {
+  overscroll-behavior: contain;
+}
+:host *::-webkit-scrollbar {
+  width: 10px;
+}
+:host *::-webkit-scrollbar-track {
+  background: var(--zonos-elements-gray-50);
+}
+:host *::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host *::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--content {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+  justify-content: center;
+}
+:host .zonos--content .zonos--left,
+:host .zonos--content .zonos--right {
+  flex: 1;
+  padding: 56px 80px 60px;
+  max-width: 800px;
+}
+:host .zonos--content .zonos--left {
+  background-color: var(--zonos--primary-color, var(--zonos-elements-gray-0));
+  border-right: 1px solid var(--zonos-elements-gray-200);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+:host .zonos--content .zonos--right {
+  background-color: var(--zonos-elements-gray-0);
+}
+:host .zonos--content .zonos--done {
+  width: 100%;
+  max-width: 1400px;
+  max-height: 100%;
+  height: calc(100% - 100px);
+  overflow: hidden;
+  flex-direction: column;
+  background-color: var(--zonos-elements-gray-0);
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  padding-bottom: 50px;
+}
+:host .zonos--content .zonos--done .zonos--header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+:host .zonos--content .zonos--done .zonos--logo {
+  margin-bottom: 0;
+}
+:host .zonos--content .zonos--done zonos-checkout-finish {
+  flex: 1;
+}
+:host .zonos--header-title,
+:host .zonos--header-wrapper {
+  max-width: 800px;
+}
+:host .zonos--left {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+:host .zonos--left .zonos--wrapper {
+  padding: 0 8px 8px;
+}
+:host .zonos--left .zonos--payment-error-banner {
+  margin-top: 24px;
+}
+:host .zonos--right {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+:host .zonos--right .zonos--order-details-container {
+  overflow: hidden;
+}
+:host .zonos--wrapper {
+  overflow: auto;
+  max-height: 100%;
+  position: relative;
+}
+:host .flex--wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+:host .zonos--logo-wrapper {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex: 1;
+}
+:host .zonos--logo-wrapper > * {
+  height: fit-content;
+}
+:host .zonos--header-right {
+  display: none;
+}
+:host .zonos--logo {
+  display: flex;
+  align-items: center;
+}
+:host .zonos--logo img {
+  max-height: 70px;
+  object-position: left center;
+  object-fit: contain;
+}
+:host .zonos--invoice-container {
+  overflow: visible;
+}
+
+:host(.mobile),
+:host(.tablet) {
+  min-width: auto;
+}
+:host(.mobile) .zonos--content,
+:host(.tablet) .zonos--content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-radius: 0;
+  max-height: 100%;
+  height: 100%;
+  border: 0;
+}
+:host(.mobile) .zonos--content .zonos--left,
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--left,
+:host(.tablet) .zonos--content .zonos--right {
+  padding: 12px;
+  padding-bottom: 76px;
+}
+@media (max-width: 768px) {
+  :host(.mobile) .zonos--content .zonos--left,
+  :host(.mobile) .zonos--content .zonos--right,
+  :host(.tablet) .zonos--content .zonos--left,
+  :host(.tablet) .zonos--content .zonos--right {
+    padding-bottom: 0;
+  }
+}
+:host(.mobile) .zonos--content .zonos--left,
+:host(.tablet) .zonos--content .zonos--left {
+  order: 2;
+  border-right: none;
+}
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--right {
+  order: 1;
+  padding-top: 16px;
+}
+:host(.mobile) .zonos--content .zonos--right .zonos--wrapper,
+:host(.tablet) .zonos--content .zonos--right .zonos--wrapper {
+  display: flex;
+  flex-direction: column;
+  border: var(--zonos-elements-border);
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
+  background-color: var(--zonos-elements-gray-50);
+  padding: 12px;
+  margin-top: 32px;
+}
+:host(.mobile) .zonos--content .zonos--right .zonos--review,
+:host(.tablet) .zonos--content .zonos--right .zonos--review {
+  margin-bottom: 0;
+}
+:host(.mobile) .zonos--content .zonos--right .zonos--cart-items,
+:host(.tablet) .zonos--content .zonos--right .zonos--cart-items {
+  margin-top: 8px;
+}
+:host(.mobile) .zonos--content zonos-checkout-footer,
+:host(.tablet) .zonos--content zonos-checkout-footer {
+  order: 3;
+}
+:host(.mobile) .zonos--content .zonos--wrapper,
+:host(.tablet) .zonos--content .zonos--wrapper {
+  max-height: 100%;
+}
+:host(.mobile) .zonos--content .zonos--footer,
+:host(.tablet) .zonos--content .zonos--footer {
+  order: 3;
+}
+:host(.mobile) .zonos--content .zonos--done,
+:host(.tablet) .zonos--content .zonos--done {
+  width: auto;
+}
+:host(.mobile) .zonos--cart-subtotal,
+:host(.tablet) .zonos--cart-subtotal {
+  margin: 0;
+}
+:host(.mobile) .zonos--header-wrapper,
+:host(.tablet) .zonos--header-wrapper {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  padding: 16px;
+  background-color: var(--zonos-elements-gray-0);
+  z-index: 3;
+}
+:host(.mobile) .zonos--header-title,
+:host(.mobile) .zonos--header-wrapper,
+:host(.tablet) .zonos--header-title,
+:host(.tablet) .zonos--header-wrapper {
+  max-width: 800px;
+  padding: 0 16px;
+}
+:host(.mobile) .zonos--content,
+:host(.tablet) .zonos--content {
+  overflow: auto;
+  justify-content: unset;
+  align-items: center;
+  gap: 24px;
+}
+:host(.mobile) .zonos--content .zonos--left,
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--left,
+:host(.tablet) .zonos--content .zonos--right {
+  overflow: visible;
+  width: 100%;
+}
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--right {
+  gap: 32px;
+}
+:host(.mobile) .flex--wrapper,
+:host(.tablet) .flex--wrapper {
+  margin-top: 0;
+}
+:host(.mobile) zonos-collect-footer,
+:host(.tablet) zonos-collect-footer {
+  order: 3;
+  left: 0;
+}
+
+:host(.tablet) .zonos--header-wrapper {
+  padding-top: 56px;
+  top: -56px;
+}
+
+:host(.mobile) .zonos--content .zonos--header-right {
+  display: flex;
+  align-items: center;
+}
+:host(.mobile) .zonos--header-wrapper {
+  padding-top: 28px;
+  top: -28px;
+}
+:host(.mobile) .zonos--invoice-language-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform-origin: bottom center;
+  width: 100vw;
+  background: var(--zonos-elements-surface-color);
+  box-shadow: var(--zonos-elements-v3-shadow-xl);
+  border-radius: var(--zonos-elements-radius-12);
+  max-width: 100vw;
+  max-height: 500px;
+  z-index: 2147483011;
+  overflow: auto;
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+  overscroll-behavior: contain;
+}
+:host(.mobile) .zonos--invoice-language-dialog::-webkit-scrollbar {
+  width: 10px;
+}
+:host(.mobile) .zonos--invoice-language-dialog::-webkit-scrollbar-track {
+  background: var(--zonos-elements-gray-50);
+}
+:host(.mobile) .zonos--invoice-language-dialog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host(.mobile) .zonos--invoice-language-dialog::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host(.mobile) .zonos--invoice-language-dialog::-webkit-scrollbar-track {
+  border-top-right-radius: var(--zonos-elements-radius-12);
+  border-bottom-right-radius: var(--zonos-elements-radius-12);
+}
+:host(.mobile) .zonos--invoice-language-dialog.zonos--invoice-language-dialog-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+:host(.iframed) .zonos--content {
+  overscroll-behavior: auto;
+}