{"version":3,"file":"rating-stars-element-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAIA,MAAMA,oBAAoBC,YACxB,6BAAkBC,GAChB,MAAO,CACL,eACA,aAEJ,CAkDQC,UAAY,IAAIC,KAAKC,aAAa,SAElCC,wBAA0BC,KAAKC,mBAAmBC,KAAKF,MAExD,iBAAAG,GACLH,KAAKI,uBACLJ,KAAKK,SAE6B,SAA9BL,KAAKM,QAAQC,cACfP,KAAKQ,iBAAiB,QAASC,GAGjCD,iBAAiB,mBAAoBR,KAAKD,wBAC5C,CAEO,oBAAAW,GAC6B,SAA9BV,KAAKM,QAAQC,cACfP,KAAKW,oBAAoB,QAASF,GAGpCE,oBAAoB,mBAAoBX,KAAKD,wBAC/C,CAEQ,oBAAAK,GACDJ,KAAKY,aACRZ,KAAKa,aAAa,CAAEC,KAAM,SAC1Bd,KAAKY,WAAWG,UAAY,+0GAEhC,CAEQ,kBAAAd,GAEN,IAD8Be,SAASC,cAAc,YACzB,CACVjB,KAAKY,WAAWK,cAAc,cACtCC,UAAUC,IAAI,WACxB,CACF,CAEO,wBAAAC,CAAyBC,EAAeC,EAAkBC,GAC/DvB,KAAKI,uBAEDJ,KAAKwB,aAAeD,IAAaD,GACnCtB,KAAKK,QAET,CAEQ,MAAAA,GACN,MAAMoB,EAAQC,SAAS1B,KAAKM,QAAQmB,MAAO,IACrCE,EAASC,WAAW5B,KAAKM,QAAQuB,SACvC,IAAKJ,IAAUE,EACb,OAIF3B,KAAK8B,cAEe9B,KAAKY,WAAWK,cAAc,UACtCc,YAAc,GAAG/B,KAAKJ,UAAUoC,OAAOP,aAE7BzB,KAAKY,WAAWK,cAAc,YACtCc,YAAc/B,KAAKM,QAAQuB,OAC3C,CAEQ,WAAAC,GACN,MAAMH,EAASC,WAAW5B,KAAKM,QAAQuB,SACjCI,EAAQjC,KAAKY,WAAWsB,iBAA8B,SAE5D,IAAIC,EAAI,EACR,IAAK,MAAMC,KAAQH,EAAO,CACxBG,EAAK9B,QAAQ+B,MAAQ,OAErB,MAAMC,EAAOX,EAASQ,EAClBG,GAAQ,EACVF,EAAK9B,QAAQ+B,MAAQ,QACZC,EAAO,KAChBF,EAAK9B,QAAQ+B,MAAQ,cAGvBF,GACF,CACF,EAGF,SAAS1B,IAGP,MAAM8B,EAAwBvB,SAASC,cAAc,YACjDsB,GACFA,EAAsBC,eAAe,CAAEC,SAAU,UAErD,CAQKC,eAAeC,IAAI,iBACtBD,eAAeE,OAAO,eAAgBnD","sources":["webpack://lange/./scripts/sections/rating-stars-element/rating-stars/index.ts"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\nclass RatingStars extends HTMLElement implements CustomElement {\n  public static get observedAttributes() {\n    return [\n      'data-average',\n      'data-count'\n    ];\n  }\n\n  declare readonly dataset: {\n    /**\n     * Boolean flag represented as string to style the review count element accented.\n     */\n    accent: 'false' | 'true';\n\n    /**\n     * Average rating\n     */\n    average: string;\n\n    /**\n     * Total reviews count.\n     */\n    count: string;\n\n    /**\n     * Boolean flag represented as string to disable click. For example, we don't want to scroll to\n     * the reviews section when it's in the paired product card.\n     */\n    disableClick: 'false' | 'true';\n\n    /**\n     * Boolean flag represented as string to display average rating.\n     */\n    displayAverage: 'false' | 'true';\n\n    /**\n     * Boolean flag represented as string to hide reviews count.\n     */\n    hideCount: 'false' | 'true';\n\n    /**\n     * Boolean flag represented as string to mark that the component used for sets.\n     */\n    isSet: 'false' | 'true';\n\n    /**\n     * Boolean flag represented as string to align items to the right.\n     */\n    right: 'false' | 'true';\n\n    /**\n     * Boolean flag represented as string to renders elements stacked rather than in a single line.\n     */\n    stacked: 'false' | 'true';\n  };\n\n  private formatter = new Intl.NumberFormat('en-US');\n\n  private onDOMContentLoadedBound = this.onDOMContentLoaded.bind(this);\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n    this.render();\n\n    if (this.dataset.disableClick !== 'true') {\n      this.addEventListener('click', onClick);\n    }\n\n    addEventListener('DOMContentLoaded', this.onDOMContentLoadedBound);\n  }\n\n  public disconnectedCallback() {\n    if (this.dataset.disableClick !== 'true') {\n      this.removeEventListener('click', onClick);\n    }\n\n    removeEventListener('DOMContentLoaded', this.onDOMContentLoadedBound);\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\n  }\n\n  private onDOMContentLoaded() {\n    const productReviewsElement = document.querySelector('#reviews');\n    if (!productReviewsElement) {\n      const wrapper = this.shadowRoot.querySelector('.container');\n      wrapper.classList.add('no-click');\n    }\n  }\n\n  public attributeChangedCallback(_name: string, oldValue: string, newValue: string) {\n    this.initializeShadowRoot();\n\n    if (this.isConnected && newValue !== oldValue) {\n      this.render();\n    }\n  }\n\n  private render() {\n    const count = parseInt(this.dataset.count, 10);\n    const rating = parseFloat(this.dataset.average);\n    if (!count || !rating) {\n      return;\n    }\n\n    // TODO remove method, inline code\n    this.renderStars();\n\n    const ratingCount = this.shadowRoot.querySelector('.count');\n    ratingCount.textContent = `${this.formatter.format(count)} Reviews`;\n\n    const ratingAverage = this.shadowRoot.querySelector('.average');\n    ratingAverage.textContent = this.dataset.average;\n  }\n\n  private renderStars() {\n    const rating = parseFloat(this.dataset.average);\n    const stars = this.shadowRoot.querySelectorAll<HTMLElement>('.star');\n\n    let i = 0;\n    for (const star of stars) {\n      star.dataset.state = 'full';\n\n      const diff = rating - i;\n      if (diff <= 0) {\n        star.dataset.state = 'empty';\n      } else if (diff < 0.8) {\n        star.dataset.state = 'half-empty';\n      }\n\n      i++;\n    }\n  }\n}\n\nfunction onClick() {\n  // TODO improvement suggestion: for Sets we can go to the review section of the product from the\n  // set\n  const productReviewsElement = document.querySelector('#reviews');\n  if (productReviewsElement) {\n    productReviewsElement.scrollIntoView({ behavior: 'smooth' });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rating-stars': RatingStars;\n  }\n}\n\nif (!customElements.get('rating-stars')) {\n  customElements.define('rating-stars', RatingStars);\n}\n"],"names":["RatingStars","HTMLElement","observedAttributes","formatter","Intl","NumberFormat","onDOMContentLoadedBound","this","onDOMContentLoaded","bind","connectedCallback","initializeShadowRoot","render","dataset","disableClick","addEventListener","onClick","disconnectedCallback","removeEventListener","shadowRoot","attachShadow","mode","innerHTML","document","querySelector","classList","add","attributeChangedCallback","_name","oldValue","newValue","isConnected","count","parseInt","rating","parseFloat","average","renderStars","textContent","format","stars","querySelectorAll","i","star","state","diff","productReviewsElement","scrollIntoView","behavior","customElements","get","define"],"sourceRoot":""}