JezK

Edit File: sc-order-summary.entry.js.map

{"file":"sc-order-summary.entry.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,k3CAAk3C,CAAC;AAC74C,6BAAe,iBAAiB;;;;;;;;;gCCmBK,UAAE;kCACA,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CA0CD,UAAE;;wCAGN,UAAE;;;;;;;;iNAsBhB,eAAO,CAAC,UAAE,mDAAmD,UAAE,4BAA4B,UAAE;;;0BAI/F,eAAO,CAAC,UAAE,mDAAmD,UAAE,4BAA4B,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6LAgEvD,UAAE;;;;;;;AAM5D;;;;;;;AAQA;;;;;;;;;;;","names":[],"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-flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: baseline;\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\n &--collapsible {\n cursor: pointer;\n }\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: 20px 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, 'summary--collapsible': this.collapsible }}>\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"],"version":3}