@malga-checkout/core/dist/cjs/checkout-order-summary.cjs.entry.js

Core components for Malga Checkout

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ebe81290.js');
const i18n_es = require('./i18n.es-2b830471.js');
const currency = require('./currency-c8f275f9.js');
require('./index-ef219ea8.js');
require('./_commonjsHelpers-bcc1208a.js');

const checkoutOrderSummaryCss = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\"); :root{--malga-checkout-color-page-background:#eef2f6;--malga-checkout-color-brand-accent-light:#79DBD4;--malga-checkout-color-brand-accent-normal:#39BFAD;--malga-checkout-color-brand-clean:#C3F4EF;--malga-checkout-color-brand-light:#79DBD4;--malga-checkout-color-brand-normal:#39BFAD;--malga-checkout-color-brand-middle:#2FAC9B;--malga-checkout-color-brand-dark:#147F70;--malga-checkout-color-grey-light:#666666;--malga-checkout-color-grey-normal:#4D4D4D;--malga-checkout-color-grey-middle:#333333;--malga-checkout-color-grey-dark:#1A1A1A;--malga-checkout-color-grey-darkness:#000000;--malga-checkout-color-accent-light:#ffffff;--malga-checkout-color-accent-normal:#F1F1F1;--malga-checkout-color-accent-middle:#CBCBCB;--malga-checkout-color-warning-light:#FFF8E6;--malga-checkout-color-warning-normal:#F9DF8D;--malga-checkout-color-warning-middle:#FFA400;--malga-checkout-color-warning-dark:#ED3A3D;--malga-checkout-color-modal-success:#00AE42;--malga-checkout-color-modal-error:#ED3A3D;--malga-checkout-color-modal-neutral:#4D4D4D;--malga-checkout-color-disabled:#F9F9F9;--malga-checkout-color-modal-action-button-error:#000000;--malga-checkout-color-modal-action-button-error-hover:#333333;--malga-checkout-color-modal-action-button-success:#000000;--malga-checkout-color-modal-action-button-success-hover:#333333;--malga-checkout-color-modal-action-button-success-font-color:#ffffff;--malga-checkout-color-modal-action-button-error-font-color:#ffffff;--malga-checkout-typography-family:\"Inter\", sans-serif;--malga-checkout-spacing-xxs:4px;--malga-checkout-spacing-xs:8px;--malga-checkout-spacing-sm:16px;--malga-checkout-spacing-default:24px;--malga-checkout-spacing-md:32px;--malga-checkout-spacing-lg:48px;--malga-checkout-spacing-xlg:64px;--malga-checkout-spacing-xxlg:96px;--malga-checkout-size-min-width:250px;--malga-checkout-border-radius-default:4px;--malga-checkout-border-radius-md:6px;--malga-checkout-border-radius-lg:20px;--malga-checkout-transition-slow:0.3s;--malga-checkout-transition-default:0.5s}.checkout-order-summary__container{display:flex;flex-direction:column;padding:var(--malga-checkout-spacing-sm);border-radius:var(--malga-checkout-spacing-xs);background:var(--malga-checkout-color-accent-light);box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1)}.checkout-order-summary__container--full-width{width:100%}.checkout-order-summary__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.checkout-order-summary__header>h3{padding:0;margin:0;font-family:var(--malga-checkout-typography-family);font-size:var(--malga-checkout-spacing-sm);font-weight:bold;color:var(--malga-checkout-color-brand-middle)}.checkout-order-summary__header>button{display:flex;justify-content:center;align-items:center;cursor:pointer;background:transparent;border:none;padding:0}.checkout-order-summary__header>button>checkout-icon>i>svg{color:var(--malga-checkout-color-brand-middle)}.checkout-order-summary__products{display:flex;flex-direction:column;padding:0;margin:0;margin-top:var(--malga-checkout-spacing-sm)}.checkout-order-summary__product-item{display:flex;flex-direction:row;justify-content:space-between;margin-top:var(--malga-checkout-spacing-xs)}.checkout-order-summary__product-item>p{padding:0;margin:0}.checkout-order-summary__product-item>checkout-typography>span{margin-left:var(--malga-checkout-spacing-default)}.checkout-order-summary__delivery{display:flex;flex-direction:row;justify-content:space-between;margin-top:var(--malga-checkout-spacing-default)}.checkout-order-summary__total{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-top:calc( var(--malga-checkout-spacing-xs) + var(--malga-checkout-spacing-xxs) );margin-top:var(--malga-checkout-spacing-sm);border-top:1px solid black}.checkout-order-summary__total>p{font-family:var(--malga-checkout-typography-family);font-size:16px;font-weight:700;padding:0;margin:0}.checkout-order-summary__loaders{display:flex;justify-content:center;align-items:center;height:100px}";

const CheckoutOrderSummary = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.fullWidth = false;
    this.isLoading = false;
    this.showDescription = true;
    this.handleToggleShowDescription = () => {
      this.showDescription = !this.showDescription;
    };
    this.renderBody = () => {
      if (this.isLoading) {
        return (index.h("div", { class: { 'checkout-order-summary__loaders': true } }, index.h("checkout-loader", null)));
      }
      return (this.showDescription &&
        this.products && (index.h(index.Fragment, null, index.h("ul", { class: { 'checkout-order-summary__products': true }, "aria-hidden": this.showDescription }, this.renderProductList()), !!this.delivery && (index.h("div", { class: { 'checkout-order-summary__delivery': true } }, index.h("checkout-typography", { color: "darkness", variation: "subtitle1", content: i18n_es.Z('common.order.delivery', this.locale) }), index.h("checkout-typography", { tag: "span", variation: "body1", content: currency.formatCurrency(this.delivery, this.currency) }))))));
    };
    this.renderProductList = () => {
      const mappedProducts = this.products.map((product) => (index.h("li", { class: { 'checkout-order-summary__product-item': true } }, index.h("p", null, index.h("checkout-typography", { tag: "strong", variation: "subtitle1", content: product.name }), ' ', !!product.description && (index.h("checkout-typography", { tag: "span", variation: "body1", content: `- ${product.description}` }))), index.h("checkout-typography", { tag: "span", variation: "body1", content: `x${product.quantity}` }), index.h("checkout-typography", { tag: "span", variation: "body1", content: currency.formatCurrency(product.amount, this.currency) }))));
      return mappedProducts;
    };
  }
  render() {
    return (index.h(index.Host, { class: {
        'checkout-order-summary__container': true,
        'checkout-order-summary__container--full-width': this.fullWidth,
      } }, index.h("header", { class: { 'checkout-order-summary__header': true } }, index.h("h3", null, this.label), this.products && (index.h("button", { type: "button", onClick: this.handleToggleShowDescription }, index.h("checkout-icon", { icon: this.showDescription ? 'eyeSlash' : 'eye' })))), this.renderBody(), !this.isLoading && (index.h("section", { class: { 'checkout-order-summary__total': true } }, index.h("p", null, i18n_es.Z('common.order.amount', this.locale)), index.h("p", null, currency.formatCurrency(this.amount, this.currency))))));
  }
};
CheckoutOrderSummary.style = checkoutOrderSummaryCss;

exports.checkout_order_summary = CheckoutOrderSummary;