{"version":3,"file":"product-card-element-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAQA,MAAMA,oBAAoBC,YA8CjBC,WAAAA,GACLC,QAAQ,KAHFC,sBAAwBC,KAAKC,iBAAiBC,KAAKF,MAIzDA,KAAKG,aAAa,CAAEC,KAAM,SAC1BJ,KAAKK,WAAWC,UAAY,UAAHC,OCzD7B,g6EDyDgD,YAAAA,OExDrC,6TFyDT,CAEOC,iBAAAA,GACLR,KAAKS,QACP,CAEOC,oBAAAA,GACLV,KAAKW,oBAAoB,kBAAmBX,KAAKD,sBACnD,CAEQU,MAAAA,GACN,GAAIT,KAAKY,QAAQC,aAAc,CAC7B,MAAMC,EAAWd,KAAKK,WAAWU,cAAc,qBAC/CD,EAASF,QAAQI,MAAQhB,KAAKY,QAAQC,aACtCC,EAASF,QAAQK,MAAQjB,KAAKY,QAAQM,mBAAqB,SAC7D,CAEAlB,KAAKmB,iBAAiB,kBAAmBnB,KAAKD,sBAChD,CAEQE,gBAAAA,CAAiBmB,GACvB,MAAMC,EAAgBrB,KAAKsB,iBAA8B,kBAGzD,IAAK,MAAMC,KAASF,EACdE,EAAMX,QAAQY,YAAcJ,EAAMK,OAAOC,QAAQC,GAAGC,WACtDL,EAAMM,UAAUC,OAAO,UAEvBP,EAAMM,UAAUE,IAAI,UAKxB,MAAMC,EAAa,GAAHzB,OAAOP,KAAKY,QAAQqB,IAAG,aAAA1B,OAAca,EAAMK,OAAOC,QAAQC,IAEpEO,EAAelC,KAAKsB,iBADT,qCAEjB,IAAK,MAAMa,KAAeD,EACxBC,EAAYC,aAAa,OAAQJ,GAGbhC,KAAKe,cAAc,kBAC3BH,QAAQqB,IAAMD,EAG5B,MAAMlB,EAAWd,KAAKK,WAAWU,cAAc,qBAI/C,GAHAD,EAASF,QAAQI,MAAQI,EAAMK,OAAOC,QAAQZ,SAC9CA,EAASF,QAAQK,MAAQG,EAAMK,OAAOC,QAAQW,cAEhB,SAA1BrC,KAAKY,QAAQ0B,SAAqB,CAEpC,MAAMC,EAAcvC,KAAKe,cAA2B,gBAChDwB,IACFA,EAAY3B,QAAQ4B,MAAQpB,EAAMK,OAAOC,QAAQc,MAAMZ,WAE3D,KAAO,CAEL,MAAMa,EAAezC,KAAKe,cAAc,6BAClC2B,EAAgBD,EAAaE,aAAe,GAClDF,EAAaE,YACXD,EAAcE,QAAQ,QAASxB,EAAMK,OAAOC,QAAQc,MAAQ,KAAKK,QAAQ,IAG3E,MAAMC,EAAwB9C,KAAKe,cAAc,sBAIjD,GAHA+B,EAAsBH,YAAcvB,EAAMK,OAAOC,QAAQqB,gBAAkB,GAGvE3B,EAAMK,OAAOC,QAAQsB,2BAA4B,CACnD,MAAMC,EAAqBC,SAASC,cAAc,yBAClDF,EAAmBrC,QAAQwC,QAAUhC,EAAMK,OAAOC,QAAQsB,2BAC1DF,EAAsBO,YAAYJ,EACpC,CAGA,MAAMK,EAAkBtD,KAAKe,cAAc,oBACvCuC,IACFA,EAAgB1C,QAAQ2C,QAAUnC,EAAMK,OAAOC,QAAQ4B,gBAE3D,CACF,EASGE,eAAeC,IAAI,iBACtBD,eAAeE,OAAO,eAAgB/D,Y","sources":["webpack://lange/./scripts/sections/product-card-element/product-card/index.ts","webpack://lange/./scripts/sections/product-card-element/product-card/index.scss","webpack://lange/./scripts/sections/product-card-element/product-card/index.html"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * A custom web component for displaying product card on PLP, predictable search, in product\n * carousels, etc.\n */\nclass ProductCard extends HTMLElement implements CustomElement {\n  readonly dataset: {\n    /**\n     * Initial value for the top badge.\n     *\n     * For products that don't have the variant selector and have a top badge, this value will be\n     * used. For products with variant selector, the top badge will be updated based on the selected\n     * variant by initial variant-changed event.\n     */\n    initTopBadge: string;\n\n    /**\n     * Initial style for the top badge.\n     */\n    initTopBadgeStyle: string;\n\n    /**\n     * Boolean represented as string, whether the product is an upsell product\n     */\n    isUpsell: 'false' | 'true';\n\n    /**\n     * Defines the size variant for the component\n     */\n    size: 'default' | 'small';\n\n    /**\n     * Defines the style variant for the component\n     */\n    styleVariant: 'upsell';\n\n    /**\n     * A concatenated string of all tags\n     */\n    upsellTags: string;\n\n    /**\n     * Product url without variant\n     */\n    url: string;\n  };\n\n  public shadowRoot!: ShadowRoot;\n\n  private onVariantChangedBound = this.onVariantChanged.bind(this);\n\n  public constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n  }\n\n  public connectedCallback() {\n    this.render();\n  }\n\n  public disconnectedCallback() {\n    this.removeEventListener('variant-changed', this.onVariantChangedBound);\n  }\n\n  private render() {\n    if (this.dataset.initTopBadge) {\n      const topBadge = this.shadowRoot.querySelector('product-top-badge');\n      topBadge.dataset.value = this.dataset.initTopBadge;\n      topBadge.dataset.style = this.dataset.initTopBadgeStyle || 'default';\n    }\n\n    this.addEventListener('variant-changed', this.onVariantChangedBound);\n  }\n\n  private onVariantChanged(event: WindowEventMap['variant-changed']) {\n    const variantImages = this.querySelectorAll<HTMLElement>('.variant-image');\n\n    // update image\n    for (const image of variantImages) {\n      if (image.dataset.variantId === event.detail.variant.id.toString()) {\n        image.classList.remove('hidden');\n      } else {\n        image.classList.add('hidden');\n      }\n    }\n\n    // update urls\n    const variantUrl = `${ this.dataset.url }?variant=${ event.detail.variant.id }`;\n    const selector = 'a[slot=\"title\"], a[slot=\"action\"]';\n    const productLinks = this.querySelectorAll<HTMLAnchorElement>(selector);\n    for (const productLink of productLinks) {\n      productLink.setAttribute('href', variantUrl);\n    }\n\n    const clickableArea = this.querySelector('clickable-area');\n    clickableArea.dataset.url = variantUrl;\n\n    // update top badge\n    const topBadge = this.shadowRoot.querySelector('product-top-badge');\n    topBadge.dataset.value = event.detail.variant.topBadge;\n    topBadge.dataset.style = event.detail.variant.topBadgeStyle;\n\n    if (this.dataset.isUpsell === 'true') {\n      type UpsellPrice = HTMLElementTagNameMap['upsell-price'];\n      const upsellPrice = this.querySelector<UpsellPrice>('upsell-price');\n      if (upsellPrice) {\n        upsellPrice.dataset.price = event.detail.variant.price.toString();\n      }\n    } else {\n      // update price\n      const priceElement = this.querySelector('.product-card-final-price');\n      const previousValue = priceElement.textContent || '';\n      priceElement.textContent =\n        previousValue.replace(/\\d+/g, (event.detail.variant.price / 100).toFixed(0));\n\n      // update compare at price\n      const compareAtPriceElement = this.querySelector('.price__compare-at');\n      compareAtPriceElement.textContent = event.detail.variant.compareAtPrice || '';\n\n      // create a compare at price info button if needed\n      if (event.detail.variant.compareAtPriceModalContent) {\n        const compareAtPriceInfo = document.createElement('compare-at-price-info');\n        compareAtPriceInfo.dataset.content = event.detail.variant.compareAtPriceModalContent;\n        compareAtPriceElement.appendChild(compareAtPriceInfo);\n      }\n\n      // update discount message\n      const discountMessage = this.querySelector('discount-message');\n      if (discountMessage) {\n        discountMessage.dataset.message = event.detail.variant.discountMessage;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'product-card': ProductCard;\n  }\n}\n\nif (!customElements.get('product-card')) {\n  customElements.define('product-card', ProductCard);\n}\n","export default \":host{display:flex;flex-direction:column;height:100%;position:relative;width:100%}:host([data-size=small]) .title{font-size:1rem}:host([data-size=small]) ::slotted([slot=subtitle]){font-size:.875rem}:host([data-size=small]) ::slotted([slot=discount-message]){font-size:.75rem;line-height:1.3;padding:6px 12px}:host([data-size=small]) ::slotted([slot=action]){font-size:.875rem!important;min-height:36px!important}:host([data-size=small]) ::slotted(.cta[slot=action]){height:36px!important}:host([data-is-upsell=true]){background-color:#fff;padding:0 10px 12px}:host([data-is-upsell=true]) .title{font-size:1rem;margin-top:8px}:host([data-is-upsell=true]) ::slotted([slot=subtitle]){font-size:.75rem}:host([data-is-upsell=true]) slot[name=price]{order:-2}:host([data-is-upsell=true]) ::slotted([slot=price]){margin-bottom:8px}:host([data-is-upsell=true]) slot[name=discount-message]{margin-bottom:8px;order:-1}:host([data-is-upsell=true]) ::slotted([slot=discount-message]){font-size:.75rem;line-height:1.3;padding:0;text-align:left}:host([data-is-upsell=true]) ::slotted([slot=action]){font-size:.875rem!important;min-height:36px!important}:host([data-is-upsell=true]) ::slotted(.cta[slot=action]){height:36px!important}slot{display:block}slot[name=image]{margin-left:auto;margin-right:auto}.title{font-size:1rem;font-weight:600;letter-spacing:.07em;line-height:1;margin-bottom:4px;text-transform:uppercase}@media only screen and (min-width:1280px){.title{font-size:1.375rem}}::slotted([slot=subtitle]){font-size:.75rem;letter-spacing:.07em;line-height:1.5;margin-bottom:8px!important;text-transform:uppercase}@media only screen and (min-width:1280px){::slotted([slot=subtitle]){font-size:.875rem}}::slotted([slot=rating]){display:block;margin-bottom:18px}product-top-badge{left:0;position:absolute;top:18px}@media only screen and (min-width:768px){product-top-badge{top:30px}}::slotted([slot=price]){margin-bottom:12px}footer{display:flex;flex-direction:column;flex-grow:1}::slotted([slot=discount-message]){font-size:.75rem;margin-bottom:14px;padding:8px 10px}@media only screen and (min-width:768px){::slotted([slot=discount-message]){font-size:1rem;padding-bottom:20px;padding-top:20px}}slot[name=variant-selector]{flex-grow:1}::slotted([slot=variant-selector]){margin-bottom:22px}slot[name=action]{font-size:.75rem;margin-top:auto}::slotted([slot=action]){font-size:.875rem}@media only screen and (min-width:768px){::slotted([slot=action]){font-size:1rem}}\";","// Module\nvar code = \"<slot name=\\\"image\\\"></slot><h3 class=\\\"title\\\"><slot name=\\\"title\\\"></slot></h3><slot name=\\\"subtitle\\\"></slot><slot name=\\\"rating\\\"></slot><product-top-badge></product-top-badge><footer><slot name=\\\"price\\\"></slot><slot name=\\\"variant-selector\\\"></slot><slot name=\\\"discount-message\\\"></slot><slot name=\\\"action\\\"></slot></footer>\";\n// Exports\nexport default code;"],"names":["ProductCard","HTMLElement","constructor","super","onVariantChangedBound","this","onVariantChanged","bind","attachShadow","mode","shadowRoot","innerHTML","concat","connectedCallback","render","disconnectedCallback","removeEventListener","dataset","initTopBadge","topBadge","querySelector","value","style","initTopBadgeStyle","addEventListener","event","variantImages","querySelectorAll","image","variantId","detail","variant","id","toString","classList","remove","add","variantUrl","url","productLinks","productLink","setAttribute","topBadgeStyle","isUpsell","upsellPrice","price","priceElement","previousValue","textContent","replace","toFixed","compareAtPriceElement","compareAtPrice","compareAtPriceModalContent","compareAtPriceInfo","document","createElement","content","appendChild","discountMessage","message","customElements","get","define"],"sourceRoot":""}