{"version":3,"file":"yotpo-avatar-element-section.min.js","mappings":"wZAQA,MAAMA,oBAAoBC,YAuBjB,iBAAAC,GACLC,KAAKC,uBAELD,KAAKE,QACP,CAEQ,oBAAAD,GACDD,KAAKG,aACRH,KAAKI,aAAa,CAAEC,KAAM,SAC1BL,KAAKG,WAAWG,UAAY,8tHAEhC,CAEQ,MAAAJ,GAKN,GAJ0B,gBAAtBF,KAAKO,QAAQC,MACfR,KAAKG,WAAWM,cAAc,qBAAqBC,UAAUC,IAAI,UAG/DX,KAAKO,QAAQK,KAAM,CACrB,MAAMA,EAAO,IAAIC,KAAKb,KAAKO,QAAQK,MAC7BE,EAASd,KAAKG,WAAWM,cAA+B,uBAC9DK,EAAOC,YAAcH,EAAKI,mBAAmB,SAC7CF,EAAOG,SAAWL,EAAKM,cAAcC,MAAM,KAAK,EAClD,CAEA,MAAMC,EAAcpB,KAAKG,WAAWM,cAAc,kBAClD,GAA0B,gBAAtBT,KAAKO,QAAQC,KAAwB,CACvC,MAAMa,EAAYC,SAASC,cAAc,KACzCF,EAAUG,UAAY,aACtBJ,EAAYK,YAAYJ,EAC1B,MACED,EAAYL,YAAcf,KAAKO,QAAQC,KAAOR,KAAKO,QAAQC,KAAKkB,OAAO,GAAK,IAG9E1B,KAAKG,WAAWM,cAAc,kBAAkBM,YAAcf,KAAKO,QAAQC,MAAQ,YAEnF,MAAMmB,EAAkB3B,KAAKG,WAAWM,cAA2B,sBAE7DmB,EAAQC,WAAW7B,KAAKO,QAAQqB,OAChCE,EAAiB9B,KAAKG,WAAWM,cAA2B,oBAElE,GAAImB,EAAQ,EAAG,CACc5B,KAAKG,WAAWM,cAAc,yBACtCsB,aAAa,QAAS,aAAaH,MACtDD,EAAgBZ,YAAc,iBAEHf,KAAKG,WAAWM,cAAc,yBACtCM,YAAca,EAAMI,QAAQ,GAE/CF,EAAeC,aAAa,aAAc,CAACH,EAAMI,QAAQ,GAAI,kBAAkBC,KAAK,MACpFH,EAAeI,QAAS,CAC1B,MACEJ,EAAeI,QAAS,EAGI,SAA1BlC,KAAKO,QAAQ4B,WACfR,EAAgBO,QAAS,EAE7B,EASGE,eAAeC,IAAI,iBACtBD,eAAeE,OAAO,eAAgBzC,aC3FxC,MAAM0C,sBAAsBzC,YAkBnB,iBAAAC,GACLC,KAAKC,uBAELD,KAAKE,QACP,CAEQ,oBAAAD,GACDD,KAAKG,aACRH,KAAKI,aAAa,CAAEC,KAAM,SAC1BL,KAAKG,WAAWG,UAAY,6sCAEhC,CAEQ,MAAAJ,GACN,GAAIF,KAAKO,QAAQK,KAAM,CACrB,MAAMA,EAAO,IAAIC,KAAKb,KAAKO,QAAQK,MAC7B4B,EAAcxC,KAAKG,WAAWM,cAAc,QAClD+B,EAAYzB,YAAcH,EAAKI,mBAAmB,SAClDwB,EAAYvB,SAAWL,EAAKM,cAAcC,MAAM,KAAK,EACvD,CAEanB,KAAKG,WAAWM,cAAc,SACtCM,YAAcf,KAAKO,QAAQC,MAAQ,WAC1C,EASG4B,eAAeC,IAAI,oBACtBD,eAAeE,OAAO,kBAAmBC","sources":["webpack://lange/./sections/yotpo-avatar/yotpo-avatar/index.ts","webpack://lange/./sections/yotpo-avatar/yotpo-avatar-v2/index.ts"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * Renders circle user avatar with the first letter of the name. It is used by the yotpo-review-\n * detail element.\n */\nclass YotpoAvatar extends HTMLElement implements CustomElement {\n  declare readonly dataset: {\n    /**\n     * The date of the review.\n     */\n    date: string;\n\n    /**\n     * The name of the reviewer.\n     */\n    name: string;\n\n    /**\n     * Review score?\n     */\n    score: string;\n\n    /**\n     * Represents whether the reviewer is a verified buyer.\n     */\n    verified: string;\n  };\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n\n    this.render();\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 render() {\n    if (this.dataset.name === 'Store Owner') {\n      this.shadowRoot.querySelector('.customer-details').classList.add('answer');\n    }\n\n    if (this.dataset.date) {\n      const date = new Date(this.dataset.date);\n      const dateEl = this.shadowRoot.querySelector<HTMLTimeElement>('.customer-info-date');\n      dateEl.textContent = date.toLocaleDateString('en-US');\n      dateEl.dateTime = date.toISOString().split('T')[0];\n    }\n\n    const iconElement = this.shadowRoot.querySelector('.badge-content');\n    if (this.dataset.name === 'Store Owner') {\n      const storeIcon = document.createElement('i');\n      storeIcon.className = 'icon-store';\n      iconElement.appendChild(storeIcon);\n    } else {\n      iconElement.textContent = this.dataset.name ? this.dataset.name.charAt(0) : '?';\n    }\n\n    this.shadowRoot.querySelector('.customer-name').textContent = this.dataset.name || 'Anonymous';\n\n    const verifiedElement = this.shadowRoot.querySelector<HTMLElement>('.customer-verified');\n\n    const score = parseFloat(this.dataset.score);\n    const customerRating = this.shadowRoot.querySelector<HTMLElement>('.customer-rating');\n\n    if (score > 0) {\n      const ratingStarsElement = this.shadowRoot.querySelector('.product-rating-stars');\n      ratingStarsElement.setAttribute('style', `--rating: ${score};`);\n      verifiedElement.textContent = 'Verified Buyer';\n\n      const ratingValueElement = this.shadowRoot.querySelector('.product-rating-value');\n      ratingValueElement.textContent = score.toFixed(1);\n\n      customerRating.setAttribute('aria-label', [score.toFixed(0), 'out of 5 stars'].join(' '));\n      customerRating.hidden = false;\n    } else {\n      customerRating.hidden = true;\n    }\n\n    if (this.dataset.verified === 'true') {\n      verifiedElement.hidden = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'yotpo-avatar': YotpoAvatar;\n  }\n}\n\nif (!customElements.get('yotpo-avatar')) {\n  customElements.define('yotpo-avatar', YotpoAvatar);\n}\n","import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * Renders circle user avatar with the first letter of the name. Its is used by the yotpo-review-\n * detail element.\n */\nclass YotpoAvatarV2 extends HTMLElement implements CustomElement {\n  declare readonly dataset: {\n    /**\n     * The date the review was provided.\n     */\n    date: string;\n\n    /**\n     * The name of the person providing the review.\n     */\n    name: string;\n\n    /**\n     * Represents whether the person providing the review is a verified person.\n     */\n    verified: string;\n  };\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n\n    this.render();\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 render() {\n    if (this.dataset.date) {\n      const date = new Date(this.dataset.date);\n      const dateElement = this.shadowRoot.querySelector('time');\n      dateElement.textContent = date.toLocaleDateString('en-US');\n      dateElement.dateTime = date.toISOString().split('T')[0];\n    }\n\n    const name = this.shadowRoot.querySelector('.name');\n    name.textContent = this.dataset.name || 'Anonymous';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'yotpo-avatar-v2': YotpoAvatarV2;\n  }\n}\n\nif (!customElements.get('yotpo-avatar-v2')) {\n  customElements.define('yotpo-avatar-v2', YotpoAvatarV2);\n}\n"],"names":["YotpoAvatar","HTMLElement","connectedCallback","this","initializeShadowRoot","render","shadowRoot","attachShadow","mode","innerHTML","dataset","name","querySelector","classList","add","date","Date","dateEl","textContent","toLocaleDateString","dateTime","toISOString","split","iconElement","storeIcon","document","createElement","className","appendChild","charAt","verifiedElement","score","parseFloat","customerRating","setAttribute","toFixed","join","hidden","verified","customElements","get","define","YotpoAvatarV2","dateElement"],"sourceRoot":""}