{"version":3,"file":"rating-stars-element-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAIA,MAAMA,oBAAoBC,YACxB,6BAAkBC,GAChB,MAAO,CACL,eACA,aAEJ,CAsDAC,WAAAA,GACEC,QAAQ,KAHFC,wBAA0BC,KAAKC,mBAAmBC,KAAKF,MAI7DA,KAAKG,aAAa,CAAEC,KAAM,SAC1BJ,KAAKK,WAAWC,UAAY,UAAHC,OCnE7B,s/FDmEgD,YAAAA,OElErC,8UFoEPP,KAAKQ,UAAY,IAAIC,KAAKC,aAAa,QACzC,CAEOC,iBAAAA,GACLX,KAAKY,SAC6B,SAA9BZ,KAAKa,QAAQC,cACfd,KAAKe,iBAAiB,QAASC,GAGjCD,iBAAiB,mBAAoBf,KAAKD,wBAC5C,CAEOkB,oBAAAA,GAC6B,SAA9BjB,KAAKa,QAAQC,cACfd,KAAKkB,oBAAoB,QAASF,GAGpCE,oBAAoB,mBAAoBlB,KAAKD,wBAC/C,CAEQE,kBAAAA,GAEN,IAD8BkB,SAASC,cAAc,YACzB,CACVpB,KAAKK,WAAWe,cAAc,cACtCC,UAAUC,IAAI,WACxB,CACF,CAEOC,wBAAAA,CAAyBC,EAAeC,EAAmBC,GAChE1B,KAAKY,QACP,CAEQA,MAAAA,GACN,MAAMe,EAAQC,SAAS5B,KAAKa,QAAQc,MAAO,IACrCE,EAASC,WAAW9B,KAAKa,QAAQkB,SACvC,IAAKJ,IAAUE,EACb,OAGF7B,KAAKgC,cAEehC,KAAKK,WAAWe,cAAc,UACtCa,YAAc,GAAH1B,OAAMP,KAAKQ,UAAU0B,OAAOP,GAAM,YAEnC3B,KAAKK,WAAWe,cAAc,YACtCa,YAAcjC,KAAKa,QAAQkB,OAC3C,CAEQC,WAAAA,GACN,MAAMH,EAASC,WAAW9B,KAAKa,QAAQkB,SACjCI,EAAQnC,KAAKK,WAAW+B,iBAA8B,SAE5D,IAAIC,EAAI,EACR,IAAK,MAAMC,KAAQH,EAAO,CACxBG,EAAKzB,QAAQ0B,MAAQ,OAErB,MAAMC,EAAOX,EAASQ,EAClBG,GAAQ,EACVF,EAAKzB,QAAQ0B,MAAQ,QACZC,EAAO,KAChBF,EAAKzB,QAAQ0B,MAAQ,cAGvBF,GACF,CACF,EAGF,SAASrB,IAGP,MAAMyB,EAAwBtB,SAASC,cAAc,YACjDqB,GACFA,EAAsBC,eAAe,CAAEC,SAAU,UAErD,CAQKC,eAAeC,IAAI,iBACtBD,eAAeE,OAAO,eAAgBpD,Y","sources":["webpack://lange/./scripts/sections/rating-stars-element/rating-stars/index.ts","webpack://lange/./scripts/sections/rating-stars-element/rating-stars/index.scss","webpack://lange/./scripts/sections/rating-stars-element/rating-stars/index.html"],"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 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\n * to 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: Intl.NumberFormat;\n\n private onDOMContentLoadedBound = this.onDOMContentLoaded.bind(this);\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `${html}`;\n\n this.formatter = new Intl.NumberFormat('en-US');\n }\n\n public connectedCallback() {\n this.render();\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 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.render();\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 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('.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\n // the 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","export default \":host([data-disable-click=true]) .container{pointer-events:none}.container{align-items:center;cursor:pointer;display:flex;gap:4px}.container.no-click{cursor:default}.stars{align-items:center;color:#000;display:flex;gap:2px;line-height:1}.star{background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;height:14px;width:14px}.star[data-state=empty]{background-image:url('data:image/svg+xml;utf8,')}.star[data-state=half-empty]{background-image:url('data:image/svg+xml;utf8,')}.count{font-size:.75rem;line-height:1}@media only screen and (min-width:768px){.count{font-size:.75rem}}.average,.count.hide-count{display:none}.average{font-size:.875rem;margin-bottom:-1px;margin-left:4px}:host([data-accent=true]) .count{color:#7c0d3f;font-weight:600;text-decoration:underline}:host([data-small=true]) .star{height:14px;width:14px}:host([data-small=true]) .count{font-size:.75rem}:host([data-stacked=true]) .container{align-items:unset;flex-direction:column}:host([data-right=true]) .container{justify-content:flex-end}:host([data-right=true]):host([data-stacked=true]) .container{align-items:flex-end}:host([data-hide-count=true]) .count{display:none}:host([data-display-average=true]) .average{display:block}:host([data-is-set=true]) .container{margin-top:7px}@media only screen and (min-width:768px){:host([data-is-set=true]) .container{margin-top:4px}}:host([data-is-set=true]) .star{height:8px;width:8px}@media only screen and (min-width:768px){:host([data-is-set=true]) .star{height:12px;width:12px}}\";","// Module\nvar code = \"