import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { o as openWormhole } from './consumer.js';
import { h as hasSubscription } from './index5.js';
import { i as intervalString } from './price.js';
import { d as defineCustomElement$6 } from './sc-format-number2.js';
import { d as defineCustomElement$5 } from './sc-icon2.js';
import { d as defineCustomElement$4 } from './sc-line-item2.js';
import { d as defineCustomElement$3 } from './sc-product-line-item2.js';
import { d as defineCustomElement$2 } from './sc-quantity-select2.js';
import { d as defineCustomElement$1 } from './sc-skeleton2.js';

const scOrderConfirmationLineItemsCss = ":host{display:block}.line-items{display:grid;gap:var(--sc-spacing-small)}.line-item{display:grid;gap:var(--sc-spacing-small)}.fee__description{opacity:0.75}";

const ScOrderConfirmationLineItems = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  render() {
    var _a, _b;
    if (!!this.loading) {
      return (h("sc-line-item", null, h("sc-skeleton", { style: { 'width': '50px', 'height': '50px', '--border-radius': '0' }, slot: "image" }), h("sc-skeleton", { slot: "title", style: { width: '120px', display: 'inline-block' } }), h("sc-skeleton", { slot: "description", style: { width: '60px', display: 'inline-block' } }), h("sc-skeleton", { style: { width: '120px', display: 'inline-block' }, slot: "price" }), h("sc-skeleton", { style: { width: '60px', display: 'inline-block' }, slot: "price-description" })));
    }
    return (h("div", { class: { 'confirmation-summary': true } }, h("div", { class: "line-items", part: "line-items" }, (_b = (_a = this.order) === null || _a === void 0 ? void 0 : _a.line_items) === null || _b === void 0 ? void 0 : _b.data.map(item => {
      var _a, _b, _c, _d, _e, _f, _g;
      return (h("div", { class: "line-item" }, h("sc-product-line-item", { key: item.id, imageUrl: (_b = (_a = item === null || item === void 0 ? void 0 : item.price) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.image_url, name: `${(_d = (_c = item === null || item === void 0 ? void 0 : item.price) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.name}`, editable: false, removable: false, quantity: item.quantity, fees: (_e = item === null || item === void 0 ? void 0 : item.fees) === null || _e === void 0 ? void 0 : _e.data, amount: item.ad_hoc_amount !== null ? item.ad_hoc_amount : item.subtotal_amount, currency: (_f = this.order) === null || _f === void 0 ? void 0 : _f.currency, trialDurationDays: (_g = item === null || item === void 0 ? void 0 : item.price) === null || _g === void 0 ? void 0 : _g.trial_duration_days, interval: intervalString(item === null || item === void 0 ? void 0 : item.price, { showOnce: hasSubscription(this.order) }) })));
    }))));
  }
  static get style() { return scOrderConfirmationLineItemsCss; }
}, [1, "sc-order-confirmation-line-items", {
    "order": [16],
    "loading": [4]
  }]);
openWormhole(ScOrderConfirmationLineItems, ['order', 'busy', 'loading', 'empty'], false);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-order-confirmation-line-items", "sc-format-number", "sc-icon", "sc-line-item", "sc-product-line-item", "sc-quantity-select", "sc-skeleton"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-order-confirmation-line-items":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScOrderConfirmationLineItems);
      }
      break;
    case "sc-format-number":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-line-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-product-line-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-quantity-select":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "sc-skeleton":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScOrderConfirmationLineItems as S, defineCustomElement as d };
