{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/components/cart-modal.js"],"names":[],"mappings":"qNAKO,KAAM,GAAkB,YAE/B,MAAM,SAAkB,KAAU,CAChC,eAAgB,CACd,KAAK,IAAM,CACT,WAAY,KAAK,GACjB,cAAe,KAAK,GAAG,cAAc,sBAAsB,EAC3D,iBAAkB,SAAS,cAAc,sBAAsB,EAC/D,sBAAuB,SAAS,cAC9B,2BACF,EACA,kBAAmB,KAAK,GAAG,cAAc,2BAA2B,EACpE,UAAW,KAAK,GAAG,cAAc,4BAA4B,CAC/D,EAEA,KAAK,SAAW,KAAK,GAAG,QAAQ,SAChC,KAAK,cAAgB,QAAgB,KAAK,GAAI,CAC5C,kBAAmB,GACnB,wBAAyB,EAC3B,CAAC,EAED,KAAK,eAAe,CACtB,CAEA,cAAe,CACb,KAAK,GAAG,iBAAiB,UAAW,GAAO,KAAK,kBAAkB,CAAC,CAAC,EACpE,KAAK,GAAG,iBAAiB,WAAY,KAAK,eAAe,KAAK,IAAI,CAAC,EACnE,KAAK,IAAI,iBAAiB,iBACxB,QACA,KAAK,cAAc,KAAK,IAAI,CAC9B,EACA,KAAK,IAAI,kBAAkB,iBACzB,QACA,KAAK,WAAW,KAAK,IAAI,CAC3B,EACA,OAAO,iBAAiB,EAAiB,IAAM,KAAK,iBAAiB,CAAC,CACxE,CAEA,kBAAmB,CACjB,KAAK,eAAe,EACpB,KAAK,UAAU,CACjB,CAEA,cAAc,EAAG,CAGf,EAFqB,cAAc,aAAa,eAAe,IAAM,OAErD,KAAK,WAAW,CAAC,EAC5B,KAAK,UAAU,CAAC,CACvB,CAEA,UAAU,EAAG,CACX,GAAG,eAAe,EAClB,KAAK,IAAI,iBAAiB,aAAa,gBAAiB,MAAM,EAC9D,KAAK,eAAe,WAAW,CACjC,CAEA,WAAW,EAAG,CACZ,GAAG,eAAe,EAClB,KAAK,IAAI,iBAAiB,aAAa,gBAAiB,OAAO,EAC/D,KAAK,eAAe,aAAa,CACnC,CAEA,eAAe,EAAG,CAChB,CACG,EAAE,cAAc,SAAS,EAAE,aAAa,GACzC,EAAE,gBAAkB,KAAK,IAAI,kBAE7B,KAAK,WAAW,CAEpB,CAEA,kBAAkB,EAAG,CACnB,EAAM,UAAY,aAChB,GAAE,gBAAgB,EAClB,KAAK,IAAI,iBAAiB,aAAa,gBAAiB,OAAO,EAEnE,CAEA,mBAAmB,EAAM,CACvB,KAAK,IAAI,UAAU,UAAY,GAAG,EAAK,sCAAsC,EAAK,kBAClF,KAAM,GAAc,KAAK,IAAI,sBAC7B,YAA2B,cACzB,GAAY,UAAY,EAAY,QAAQ,UAAU,QACpD,MACA,GAAG,EAAK,YACV,GAEF,KAAK,IAAI,cAAc,UAAY,KAAK,gBAAgB,EAAK,KAAK,CACpE,CAEA,gBAAgB,EAAO,CACrB,MAAO;AAAA,MACL,EACC,IACC,GAAU;AAAA;AAAA;AAAA,oBAGE,EAAK,kBAAkB,EAAK;AAAA;AAAA;AAAA,uBAGzB,EAAK,eAAe,EAAK;AAAA;AAAA,6CAEH,EAAK;AAAA,gDACF,EAAK;AAAA,8CACP,EAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAajC,EAAK;AAAA,kBACL,EAAK;AAAA,kBACL,EAAK;AAAA;AAAA;AAAA;AAAA;AAAA,KAMjB,EACC,KAAK,EAAE;AAAA,KAEZ,CAEA,gBAAiB,CACf,MAAM,KAAK,QAAQ,EAChB,KAAK,GAAc,EAAS,KAAK,CAAC,EAClC,KAAK,CAAC,CAAE,UAAW,KAAK,mBAAmB,CAAI,CAAC,EAChD,MAAM,QAAQ,KAAK,CACxB,CACF,CAEA,UAAe,C","file":"scripts/766.226dd1dba1a86f344a5f.js","sourcesContent":["// @ts-check\nimport { Component } from '@verndale/core';\nimport { createFocusTrap } from 'focus-trap';\nimport { KEYCODE } from '../utils';\n\nexport const OPEN_CART_EVENT = 'OPEN_CART';\n\nclass CartModal extends Component {\n  setupDefaults() {\n    this.dom = {\n      $cartModal: this.el,\n      $modalContent: this.el.querySelector('.cart-modal__content'),\n      $openModalButton: document.querySelector('.site-selector__cart'),\n      $openModalButtonCount: document.querySelector(\n        '.site-selector__cart span'\n      ),\n      $closeModalButton: this.el.querySelector('.cart-modal__close-button'),\n      $subtotal: this.el.querySelector('.cart-modal__item-subtotal')\n    };\n\n    this.endpoint = this.el.dataset.endpoint;\n    this.cartModalTrap = createFocusTrap(this.el, {\n      escapeDeactivates: true,\n      clickOutsideDeactivates: true\n    });\n\n    this.fetchCartItems();\n  }\n\n  addListeners() {\n    this.el.addEventListener('keydown', (e) => this.handleCartKeydown(e));\n    this.el.addEventListener('focusout', this.handleFocusOut.bind(this));\n    this.dom.$openModalButton.addEventListener(\n      'click',\n      this.handleTrigger.bind(this)\n    );\n    this.dom.$closeModalButton.addEventListener(\n      'click',\n      this.closeModal.bind(this)\n    );\n    window.addEventListener(OPEN_CART_EVENT, () => this.handleCartUpdate());\n  }\n\n  handleCartUpdate() {\n    this.fetchCartItems();\n    this.openModal();\n  }\n\n  handleTrigger(e) {\n    const isExpanded = e.currentTarget.getAttribute('aria-expanded') === 'true';\n\n    if (isExpanded) this.closeModal(e);\n    else this.openModal(e);\n  }\n\n  openModal(e) {\n    e?.preventDefault();\n    this.dom.$openModalButton.setAttribute('aria-expanded', 'true');\n    this.cartModalTrap?.activate?.();\n  }\n\n  closeModal(e) {\n    e?.preventDefault();\n    this.dom.$openModalButton.setAttribute('aria-expanded', 'false');\n    this.cartModalTrap?.deactivate?.();\n  }\n\n  handleFocusOut(e) {\n    if (\n      !e.currentTarget.contains(e.relatedTarget) &&\n      e.relatedTarget !== this.dom.$openModalButton\n    ) {\n      this.closeModal();\n    }\n  }\n\n  handleCartKeydown(e) {\n    if (e.keyCode === KEYCODE.ESCAPE) {\n      e.stopPropagation();\n      this.dom.$openModalButton.setAttribute('aria-expanded', 'false');\n    }\n  }\n\n  renderModalContent(data) {\n    this.dom.$subtotal.innerHTML = `${data.ItemsCount} item(s) Subtotal <span>$${data.SubTotal}</span>`;\n    const cartCounter = this.dom.$openModalButtonCount;\n    if (cartCounter instanceof HTMLElement) {\n      cartCounter.innerHTML = cartCounter.dataset.cartLabel.replace(\n        '{0}',\n        `${data.ItemsCount}`\n      );\n    }\n    this.dom.$modalContent.innerHTML = this.createItemCards(data.Items);\n  }\n\n  createItemCards(items) {\n    return `\n    ${items\n      .map(\n        (item) => `\n    <div class=\"cart-modal__item\">\n      <div class=\"cart-modal__item-preview\">\n        <img src=\"${item.Thumbail}\" alt=\"${item.Title}\" width=\"200\" height=\"110\">\n        <div class=\"cart-modal__item-details\">\n          <h2 class=\"cart-modal__item-title\">\n            <a href=\"${item.ProductUrl}\">${item.Title}</a>\n          </h2>\n          <p class=\"cart-modal__item-type\">${item.ProductType}</p>\n          <p class=\"cart-modal__item-sku\">SKU#${item.SKU}</p>\n          <p class=\"cart-modal__item-price\">${item.Price}</p>\n        </div>\n      </div>\n      <table class=\"cart-modal__item-pricing\">\n        <thead>\n          <tr>\n            <th>QTY</th>\n            <th>Price</th>\n            <th>Total</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>${item.Quantity}</td>\n            <td>${item.Price}</td>\n            <td>${item.TotalPrice}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    `\n      )\n      .join('')}\n    `;\n  }\n\n  fetchCartItems() {\n    fetch(this.endpoint)\n      .then((response) => response.json())\n      .then(({ data }) => this.renderModalContent(data))\n      .catch(console.error);\n  }\n}\n\nexport default CartModal;\n"],"sourceRoot":""}