{"version":3,"names":["scOrderSummaryCss","ScOrderSummaryStyle0","wp","i18n","__","sprintf","this","collapsed","onKeyDown","e","setDefaultAnimation"],"sources":["src/components/controllers/checkout-form/order-summary/sc-order-summary.scss?tag=sc-order-summary&encapsulation=shadow","src/components/controllers/checkout-form/order-summary/sc-order-summary.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--sc-font-sans);\n  font-size: var(--sc-checkout-font-size, 16px);\n}\n\n.collapse-link {\n  display: flex;\n  align-items: center;\n  gap: 0.35em;\n}\n\n.summary__content--empty {\n  display: none;\n}\n\n.collapse-link__icon {\n  width: 18px;\n  height: 18px;\n  color: var(--sc-order-collapse-link-icon-color, var(--sc-color-gray-500));\n}\n\n.item__product + .item__product {\n  margin-top: 20px;\n}\n\n.empty {\n  color: var(--sc-order-summary-color, var(--sc-color-gray-500));\n}\n\n.price {\n  display: inline-block;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(5px);\n  transition: var(--sc-input-transition, var(--sc-transition-medium)) visibility ease, var(--sc-input-transition, var(--sc-transition-medium)) opacity ease,\n    var(--sc-input-transition, var(--sc-transition-medium)) transform ease;\n\n  &--collapsed {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n}\n\n.summary {\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n\n  .collapse-link__icon {\n    transition: transform 0.25s ease-in-out;\n  }\n\n  .scratch-price {\n    text-decoration: line-through;\n    color: var(--sc-color-gray-500);\n    font-size: var(--sc-font-size-small);\n    margin-right: var(--sc-spacing-xx-small);\n  }\n\n  &--open {\n    .collapse-link__icon {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n::slotted(*) {\n  margin: 4px 0 !important;\n}\n::slotted(sc-divider) {\n  margin: 16px 0 !important;\n}\nsc-line-item ~ sc-line-item {\n  margin-top: 14px;\n}\n\n.total-price {\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\n\nimport { state as checkoutState } from '@store/checkout';\nimport { formBusy, formLoading } from '@store/form/getters';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../../../functions/animate';\nimport { getAnimation, setDefaultAnimation } from '../../../../functions/animation-registry';\nimport { Checkout, Invoice } from '../../../../types';\n\n@Component({\n  tag: 'sc-order-summary',\n  styleUrl: 'sc-order-summary.scss',\n  shadow: true,\n})\nexport class ScOrderSummary {\n  private body: HTMLElement;\n  @Element() el: HTMLScOrderSummaryElement;\n  @Prop() order: Checkout;\n  @Prop() busy: boolean;\n  @Prop() orderSummaryText: string = __('Summary', 'surecart');\n  @Prop() invoiceSummaryText: string = __('Invoice Summary', 'surecart');\n  @Prop() collapsible: boolean = false;\n  @Prop() collapsedOnMobile: boolean = false;\n  @Prop() collapsedOnDesktop: boolean;\n\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Show the toggle */\n  @Event() scShow: EventEmitter<void>;\n\n  /** Show the toggle */\n  @Event() scHide: EventEmitter<void>;\n\n  isMobileScreen(): boolean {\n    const bodyRect = document.body?.getClientRects();\n    return bodyRect?.length && bodyRect[0]?.width < 781;\n  }\n\n  componentWillLoad() {\n    if (this.isMobileScreen()) {\n      this.collapsed = this.collapsed || this.collapsedOnMobile;\n    } else {\n      this.collapsed = this.collapsed || this.collapsedOnDesktop;\n    }\n\n    this.handleOpenChange();\n  }\n\n  handleClick(e) {\n    e.preventDefault();\n    if (this.empty() && !formBusy()) return;\n    this.collapsed = !this.collapsed;\n  }\n\n  /** It's empty if there are no items or the mode does not match. */\n  empty() {\n    return !checkoutState.checkout?.line_items?.pagination?.count || (checkoutState?.checkout?.live_mode ? checkoutState?.mode === 'test' : checkoutState?.mode === 'live');\n  }\n\n  getSummaryText() {\n    // If we have an invoice, show the invoice summary text instead.\n    if ((checkoutState.checkout?.invoice as Invoice)?.id) {\n      return this.invoiceSummaryText || __('Invoice Summary', 'surecart');\n    }\n\n    return this.orderSummaryText || __('Summary', 'surecart');\n  }\n\n  renderHeader() {\n    // busy state\n    if ((formBusy() || formLoading()) && !checkoutState.checkout?.line_items?.data?.length) {\n      return (\n        <sc-line-item>\n          <sc-skeleton slot=\"title\" style={{ width: '120px', display: 'inline-block' }}></sc-skeleton>\n          <sc-skeleton slot=\"price\" style={{ 'width': '70px', 'display': 'inline-block', '--border-radius': '6px' }}></sc-skeleton>\n          <sc-skeleton slot=\"currency\" style={{ width: '30px', display: 'inline-block' }}></sc-skeleton>\n        </sc-line-item>\n      );\n    }\n\n    return (\n      <sc-line-item style={{ '--price-size': 'var(--sc-font-size-x-large)' }}>\n        <span\n          class=\"collapse-link\"\n          slot=\"title\"\n          onClick={e => this.handleClick(e)}\n          tabIndex={0}\n          aria-label={sprintf(__('Order Summary %s', 'surecart'), this.collapsed ? __('collapsed', 'surecart') : __('expanded', 'surecart'))}\n          onKeyDown={e => {\n            if (e.key === ' ') {\n              this.handleClick(e);\n              speak(sprintf(__('Order Summary %s', 'surecart'), this.collapsed ? __('collapsed', 'surecart') : __('expanded', 'surecart')), 'assertive');\n            }\n          }}\n        >\n          {this.getSummaryText()}\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"collapse-link__icon\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        </span>\n        <span slot=\"description\">\n          <slot name=\"description\" />\n        </span>\n\n        {/* We have a trial, do not show total_savings_amount since it's based on the total_amount */}\n        {checkoutState.checkout?.total_amount !== checkoutState.checkout?.amount_due ? (\n          <span slot=\"price\" class={{ 'price': true, 'price--collapsed': this.collapsed }}>\n            {checkoutState.checkout?.amount_due_display_amount}\n          </span>\n        ) : (\n          <span slot=\"price\" class={{ 'price': true, 'price--collapsed': this.collapsed }}>\n            {!!checkoutState.checkout?.total_savings_amount && <span class=\"total-price scratch-price\">{checkoutState?.checkout?.total_scratch_display_amount}</span>}\n            <sc-total class=\"total-price\" total={'total'}></sc-total>\n          </span>\n        )}\n      </sc-line-item>\n    );\n  }\n\n  @Watch('collapsed')\n  async handleOpenChange() {\n    if (!this.collapsed) {\n      this.scShow.emit();\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.body.style.overflow = 'hidden';\n      const { keyframes, options } = getAnimation(this.el, 'summary.show');\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.scHide.emit();\n      await stopAnimations(this.body);\n      this.body.style.overflow = 'hidden';\n      const { keyframes, options } = getAnimation(this.el, 'summary.hide');\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    }\n  }\n\n  render() {\n    return (\n      <div class={{ 'summary': true, 'summary--open': !this.collapsed }}>\n        {this.collapsible && this.renderHeader()}\n        <div\n          ref={el => (this.body = el as HTMLElement)}\n          class={{\n            'summary__content': true,\n            'summary__content--empty': this.empty() && !formBusy(),\n          }}\n        >\n          <slot />\n        </div>\n        {this.empty() && !formBusy() && <p class=\"empty\">{__('Your cart is empty.', 'surecart')}</p>}\n      </div>\n    );\n  }\n}\n\nsetDefaultAnimation('summary.show', {\n  keyframes: [\n    { height: '0', opacity: '0' },\n    { height: 'auto', opacity: '1' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('summary.hide', {\n  keyframes: [\n    { height: 'auto', opacity: '1' },\n    { height: '0', opacity: '0' },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n"],"mappings":"4aAAA,MAAMA,EAAoB,iyCAC1B,MAAAC,EAAeD,E,oKCmBsBE,GAAAC,KAAAC,GAAE,sB,wBACAF,GAAAC,KAAAC,GAAE,8B,yiCA0CDF,GAAAC,KAAAC,GAAE,6B,+BAGNF,GAAAC,KAAAC,GAAE,qB,0oBAsBhBF,GAAAC,KAAAE,QAAQH,GAAAC,KAAAC,GAAE,+BAAAE,KAAAC,UAAmDL,GAAAC,KAAAC,GAAE,wBAA4BF,GAAAC,KAAAC,GAAE,wBAAAI,UAAAC,I,sCAI/FP,GAAAC,KAAAE,QAAQH,GAAAC,KAAAC,GAAE,+BAAAE,KAAAC,UAAmDL,GAAAC,KAAAC,GAAE,wBAA4BF,GAAAC,KAAAC,GAAE,oC,+6DAgEvDF,GAAAC,KAAAC,GAAE,mC,wFAM5DM,EAAA,gB,wGAQAA,EAAA,gB","ignoreList":[]}