{"version":3,"names":["scCartButtonCss","wp","i18n","sprintf","__","this","getItemsCount","onKeyDown","e"],"sources":["./src/components/ui/sc-cart-button/sc-cart-button.scss?tag=sc-cart-button&encapsulation=shadow","./src/components/ui/sc-cart-button/sc-cart-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 1;\n}\n\n::slotted(*) {\n  display: block !important;\n  line-height: 1;\n}\n\n.cart {\n  &__button {\n    padding: 0 4px;\n    height: 100%;\n    display: grid;\n    align-items: center;\n  }\n\n  &__content {\n    position: relative;\n  }\n\n  &__count {\n    box-sizing: border-box;\n    position: absolute;\n    inset: -12px -16px auto auto;\n    text-align: center;\n    font-size: 10px;\n    font-weight: bold;\n    border-radius: var(--sc-cart-icon-counter-border-radius, 9999px);\n    color: var(--sc-cart-icon-counter-color, var(--sc-color-primary-text, var(--sc-color-white)));\n    background: var(--sc-cart-icon-counter-background, var(--sc-color-primary-500));\n    box-shadow: var(--sc-cart-icon-box-shadow, var(--sc-shadow-x-large));\n    padding: 2px 6px;\n    line-height: 14px;\n    min-width: 14px;\n    z-index: 1;\n  }\n\n  &__icon {\n    font-size: var(--sc-cart-icon-size, 1.1em);\n    cursor: pointer;\n\n    sc-icon {\n      display: block;\n    }\n  }\n}\n","import { Component, Element, h, Prop, State, Host } from '@stencil/core';\nimport uiStore from '@store/ui';\nimport { onChange } from '@store/checkouts';\nimport { state as checkoutState } from '@store/checkout';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * @part base - The elements base wrapper.\n * @part count - The icon base wrapper.\n */\n@Component({\n  tag: 'sc-cart-button',\n  styleUrl: 'sc-cart-button.scss',\n  shadow: true,\n})\nexport class ScCartButton {\n  private link: HTMLAnchorElement;\n  /** The cart element. */\n  @Element() el: HTMLScCartButtonElement;\n\n  /** Is this open or closed? */\n  @State() open: boolean = null;\n\n  /** The order count */\n  @State() count: number = 0;\n\n  /** The form id to use for the cart. */\n  @Prop({ reflect: true }) formId: string;\n\n  /** Are we in test or live mode. */\n  @Prop() mode: 'test' | 'live' = 'live';\n\n  /** Whether the cart icon is always shown when the cart is empty */\n  @Prop() cartMenuAlwaysShown: boolean = true;\n\n  /** Whether the cart count will be shown or not when the cart is empty */\n  @Prop() showEmptyCount: boolean = false;\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  componentDidLoad() {\n    this.link = this.el.closest('a');\n    // this is to keep the structure that WordPress expects for theme styling.\n    this.link.addEventListener('click', e => {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      uiStore.state.cart = { ...uiStore.state.cart, open: !uiStore.state.cart.open };\n      return false;\n    });\n\n    // maybe hide the parent <a> if there are no items in the cart.\n    this.handleParentLinkDisplay();\n    onChange(this.mode, () => this.handleParentLinkDisplay());\n  }\n\n  handleParentLinkDisplay() {\n    this.link.style.display = !this.cartMenuAlwaysShown && !this.getItemsCount() ? 'none' : null;\n  }\n\n  render() {\n    return (\n      <Host\n        tabindex={0}\n        role=\"button\"\n        aria-label={sprintf(__('Open Cart Menu Icon with %d items.', 'surecart'), this.getItemsCount())}\n        onKeyDown={e => {\n          if ('Enter' === e?.code || 'Space' === e?.code) {\n            uiStore.state.cart = { ...uiStore.state.cart, open: !uiStore.state.cart.open };\n            e.preventDefault();\n          }\n        }}\n      >\n        <div class=\"cart__button\" part=\"base\">\n          <div class=\"cart__content\">\n            {(this.showEmptyCount || !!this.getItemsCount()) && (\n              <span class=\"cart__count\" part=\"count\">\n                {this.getItemsCount()}\n              </span>\n            )}\n            <div class=\"cart__icon\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2SAAA,MAAMA,EAAkB,mzB,21BCwEJC,GAAAC,KAAAC,QAAQF,GAAAC,KAAAE,GAAE,iDAAAC,KAAAC,iBAAAC,UAAAC,I"}