{"version":3,"file":"product-top-badge-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAQA,MAAMA,wBAAwBC,YAC5B,6BAAkBC,GAChB,MAAO,CACL,aAEJ,CAgBOC,WAAAA,GACLC,QACAC,KAAKC,aAAa,CAAEC,KAAM,SAC1BF,KAAKG,WAAWC,UAAY,UAAHC,OChC7B,wbDgCgD,YAAAA,OE/BrC,4BFgCT,CAEOC,iBAAAA,GACLN,KAAKO,QACP,CAEOC,wBAAAA,CAAyBC,EAAeC,EAAkBC,GAC3DX,KAAKY,aAAeF,IAAaC,GACnCX,KAAKO,QAET,CAEQA,MAAAA,GACQP,KAAKG,WAAWU,cAAc,UACtCC,YAAcd,KAAKe,QAAQC,OAAS,EAC5C,EASGC,eAAeC,IAAI,sBACtBD,eAAeE,OAAO,oBAAqBxB,gB","sources":["webpack://lange/./scripts/sections/product-top-badge/product-top-badge/index.ts","webpack://lange/./scripts/sections/product-top-badge/product-top-badge/index.scss","webpack://lange/./scripts/sections/product-top-badge/product-top-badge/index.html"],"sourcesContent":["import { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * A custom element that displays a badge on the top of the product image on PDP or in product card\n * on PLP.\n */\nclass ProductTopBadge extends HTMLElement implements CustomElement {\n  public static get observedAttributes() {\n    return [\n      'data-value'\n    ];\n  }\n\n  readonly dataset!: {\n    /**\n     * Defines the style variant for the component, 'highlighted' is supported, any other value\n     * is treated as 'default'.\n     */\n    style: string;\n\n    /**\n     * The text value to be displayed inside the badge\n     */\n    value: string;\n  };\n\n  public shadowRoot!: ShadowRoot;\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 attributeChangedCallback(_name: string, oldValue: string, newValue: string) {\n    if (this.isConnected && oldValue !== newValue) {\n      this.render();\n    }\n  }\n\n  private render() {\n    const badge = this.shadowRoot.querySelector('.badge');\n    badge.textContent = this.dataset.value || '';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'product-top-badge': ProductTopBadge;\n  }\n}\n\nif (!customElements.get('product-top-badge')) {\n  customElements.define('product-top-badge', ProductTopBadge);\n}\n","export default \":host{display:inline-block;font-size:.875rem;font-weight:600;line-height:1}@media only screen and (min-width:768px){:host{font-size:1rem}}.badge{background-color:#f5f5f5;padding:5px 12px}.badge:empty{display:none}:host([data-style=highlighted]){color:#ee3932}:host([data-style=white]) .badge{background-color:#fff}:host([data-style=\\\"white highlighted\\\"]){color:#ee3932}:host([data-style=\\\"white highlighted\\\"]) .badge{background-color:#fff}\";","// Module\nvar code = \"<div class=\\\"badge\\\"></div>\";\n// Exports\nexport default code;"],"names":["ProductTopBadge","HTMLElement","observedAttributes","constructor","super","this","attachShadow","mode","shadowRoot","innerHTML","concat","connectedCallback","render","attributeChangedCallback","_name","oldValue","newValue","isConnected","querySelector","textContent","dataset","value","customElements","get","define"],"sourceRoot":""}