JezK

Edit File: sc-cart-icon.entry.js.map

{"file":"sc-cart-icon.entry.js","mappings":";;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,g4CAAg4C,CAAC;AACv5C,yBAAe,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mFCoDmB,eAAO,CAAC,UAAE,+EAA+E,UAAE;;;;;;;","names":[],"sources":["src/components/ui/sc-cart-icon/sc-cart-icon.scss?tag=sc-cart-icon&encapsulation=shadow","src/components/ui/sc-cart-icon/sc-cart-icon.tsx"],"sourcesContent":[":host {\n display: block;\n --focus-ring: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n}\n\n:host:focus-visible .cart {\n box-shadow: var(--focus-ring);\n}\n\n.cart {\n position: fixed;\n bottom: var(--sc-cart-icon-bottom, 30px);\n right: var(--sc-cart-icon-right, 30px);\n left: var(--sc-cart-icon-left, auto);\n top: var(--sc-cart-icon-top, auto);\n background: var(--sc-cart-icon-background, var(--sc-color-primary-500));\n border-radius: var(--sc-cart-icon-border-radius, var(--sc-input-border-radius-medium));\n width: var(--sc-cart-icon-width, 60px);\n height: var(--sc-cart-icon-height, 60px);\n color: var(--sc-cart-icon-color, var(--sc-color-primary-text, var(--sc-color-white)));\n font-family: var(--sc-cart-font-family, var(--sc-input-font-family));\n font-weight: var(--sc-font-weight-semibold);\n transition: opacity var(--sc-transition-medium) ease;\n box-shadow: var(--sc-shadow-small);\n cursor: pointer;\n\n &:hover {\n opacity: 0.8;\n }\n\n &__container {\n font-size: 24px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n height: 100%;\n }\n\n &__counter {\n position: absolute;\n top: -8px;\n left: auto;\n bottom: auto;\n right: -8px;\n font-size: 12px;\n border-radius: var(--sc-cart-counter-border-radius, 9999px);\n color: var(--sc-cart-counter-color, var(--sc-color-white));\n background: var(--sc-cart-counter-background, var(--sc-color-gray-900));\n box-shadow: var(--sc-cart-icon-box-shadow, var(--sc-shadow-x-large));\n padding: 4px 10px;\n line-height: 18px;\n z-index: 1;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { state as checkoutState } from '@store/checkout';\nimport uiStore from '@store/ui';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * @part base - The elements base wrapper.\n * @part container - The container.\n * @part icon__base - The icon base wrapper.\n */\n@Component({\n tag: 'sc-cart-icon',\n styleUrl: 'sc-cart-icon.scss',\n shadow: true,\n})\nexport class ScCartIcon {\n /** The icon to show. */\n @Prop() icon: string = 'shopping-bag';\n\n /** Count the number of items in the cart. */\n getItemsCount() {\n const items = checkoutState?.checkout?.line_items?.data;\n let count = 0;\n (items || []).forEach(item => {\n count = count + item?.quantity;\n });\n return count;\n }\n\n /** Toggle the cart in the ui. */\n toggleCart() {\n return uiStore.set('cart', { ...uiStore.state.cart, ...{ open: !uiStore.state.cart.open } });\n }\n\n render() {\n if (!checkoutState?.checkout || checkoutState?.checkout?.line_items?.data?.length === 0) {\n return null;\n }\n return (\n <div\n class={{\n cart: true,\n }}\n part=\"base\"\n onClick={() => this.toggleCart()}\n onKeyDown={e => {\n if ('Enter' === e?.code || 'Space' === e?.code) {\n this.toggleCart();\n e.preventDefault();\n }\n }}\n tabIndex={0}\n role=\"button\"\n aria-label={!uiStore.state.cart.open ? sprintf(__('Open Cart Floating Icon with %d items', 'surecart'), this.getItemsCount()) : __('Close Cart Floating Icon', 'surecart')}\n >\n <div class=\"cart__container\" part=\"container\">\n <div class={{ cart__counter: true }}>{this.getItemsCount()}</div>\n <slot>\n <sc-icon exportparts=\"base:icon__base\" name={this.icon}></sc-icon>\n </slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}