\n \n
\n `;\n }\n}\n","import {css} from 'lit';\n\nexport const styleSheet = css`\n .modal {\n /* Hidden by default */\n display: none;\n position: fixed;\n z-index: 2147483647 !important; /* Ensure it appears above other elements */\n left: 0;\n top: 0;\n width: 100%;\n height: 100vh;\n overflow: hidden; /* Enable scroll if needed */\n background-color: rgba(0, 0, 0, 0.95); /* Semi-transparent background */\n }\n\n .modal-overlay {\n /* background-color: rgba(0, 0, 0, 0.95); */\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n /* z-index: 1000; */\n }\n\n .modal-content {\n /* background-color: rgba(0, 0, 0, 0.95); */\n /* height: 100%; */\n /* left: 0; */\n position: absolute;\n /* top: 0; */\n width: min(100vw, 1080px);\n left: 0;\n right: 0;\n margin: auto;\n z-index: 2147483647 !important;\n }\n\n .close {\n position: absolute;\n top: 18px;\n right: 6px;\n color: white;\n font-size: 60px;\n font-weight: lighter;\n cursor: pointer;\n z-index: 2147483647 !important;\n width: 50px;\n height: 50px;\n }\n`;\n","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23FFFFFF%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cfilter%20id%3D%22dropShadow%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%222%22%20dy%3D%222%22%20stdDeviation%3D%223%22%20flood-color%3D%22black%22%20flood-opacity%3D%220.5%22%20%2F%3E%20%20%20%20%3C%2Ffilter%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20d%3D%22m336-280-56-56%20144-144-144-143%2056-56%20144%20144%20143-144%2056%2056-144%20143%20144%20144-56%2056-143-144-144%20144Z%22%20filter%3D%22url%28%23dropShadow%29%22%20%2F%3E%3C%2Fsvg%3E\"","import {LitElement, html} from 'lit';\nimport {customElement, query, property} from 'lit/decorators.js';\n\nimport {styleSheet} from './modal-styles';\nimport closeIcon from '../../../assets/images/close.svg';\n\n@customElement('carousel-modal')\nexport class Modal extends LitElement {\n static override styles = [\n // css`\n // :host {\n // box-sizing: border-box;\n // padding: 1rem 0;\n // }\n // `,\n styleSheet,\n ];\n\n @property({type: Boolean}) visible: boolean | undefined;\n\n @query('.modal') _ref_modal!: HTMLElement;\n\n constructor() {\n super();\n }\n\n override updated(changedProperties: Map\n
\n \n \n ${this.data.videos.map(\n (item, _idx) => this.render_slide(item, _idx)\n // html`
\n \n \n \n \n \n
\n `;\n }\n}\n","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%23FFFFFF%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cfilter%20id%3D%22dropShadow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22150%25%22%20height%3D%22150%25%22%3E%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%226%22%20dy%3D%226%22%20stdDeviation%3D%228%22%20flood-color%3D%22black%22%20flood-opacity%3D%220.8%22%20%2F%3E%20%20%20%20%3C%2Ffilter%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20d%3D%22M806-56%20677.67-184.33q-27%2018.66-58%2032.16-31%2013.5-64.34%2021.17v-68.67q20-6.33%2038.84-13.66%2018.83-7.34%2035.5-19l-154.34-155V-160l-200-200h-160v-240H262L51.33-810.67%2098.67-858l754.66%20754L806-56Zm-26.67-232-48-48q19-33%2028.17-69.62%209.17-36.61%209.17-75.38%200-100.22-58.34-179.11Q652-739%20555.33-762.33V-831q124%2028%20202%20125.5t78%20224.5q0%2051.67-14.16%20100.67-14.17%2049-41.84%2092.33Zm-134-134-90-90v-130q47%2022%2073.5%2066t26.5%2096q0%2015-2.5%2029.5t-7.5%2028.5Zm-170-170-104-104%20104-104v208Zm-66.66%20270v-131.33l-80-80H182v106.66h122L408.67-322Zm-40-171.33Z%22%20filter%3D%22url%28%23dropShadow%29%22%20%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2240px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2240px%22%20fill%3D%22%23FFFFFF%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cfilter%20id%3D%22dropShadow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22150%25%22%20height%3D%22150%25%22%3E%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%226%22%20dy%3D%226%22%20stdDeviation%3D%228%22%20flood-color%3D%22black%22%20flood-opacity%3D%220.8%22%20%2F%3E%20%20%20%20%3C%2Ffilter%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20d%3D%22M560-131v-68.67q94.67-27.33%20154-105%2059.33-77.66%2059.33-176.33%200-98.67-59-176.67-59-78-154.33-104.66V-831q124%2028%20202%20125.5T840-481q0%20127-78%20224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm426.67%2045.33v-332Q599-628%20629.5-582T660-480q0%2055-30.83%20100.83-30.84%2045.84-82.5%2064.5ZM413.33-634l-104%20100.67H186.67v106.66h122.66l104%20101.34V-634Zm-96%20154Z%22%20filter%3D%22url%28%23dropShadow%29%22%20%2F%3E%3C%2Fsvg%3E\"","// Removes the parameter from the URL and returns the new URL\nexport function removedURLParameter(url: string, parameter: string) {\n //prefer to use l.search if you have a location/link object\n const urlparts = url.split('?');\n if (urlparts.length >= 2) {\n const prefix = encodeURIComponent(parameter) + '=';\n const pars = urlparts[1].split(/[&;]/g);\n\n //reverse iteration as may be destructive\n for (let i = pars.length; i-- > 0; ) {\n //idiom for string.startsWith\n if (pars[i].lastIndexOf(prefix, 0) !== -1) {\n pars.splice(i, 1);\n }\n }\n\n return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');\n }\n return url;\n}\n\n// Changes the query param with the new uuid of the new active reel\nexport function changeActiveReelParam(\n param: string,\n value: string,\n removeShared = false\n) {\n const url = removedURLParameter(window.top?.location.href ?? '', param);\n const newUrl = new URL(url);\n newUrl.searchParams.append(param, value);\n if (removeShared) {\n newUrl.searchParams.delete('shared');\n }\n window.top?.history.replaceState(null, '', newUrl);\n}\n\nexport function formatPrice(price: number) {\n const formatter = new Intl.NumberFormat('en-IN', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n return formatter.format(price);\n}\n\nexport function ingestCall(\n eventType: string,\n data: Record\n 
\n
\n \n 
\n
\n \n `;\n }\n}\n\n// ${this.product?.display_title}
\n \n ${Number(this.product?.display_price) === 0.0\n ? html`Free`\n : html`\n \n ₹${formatPrice(this.product?.display_price ?? 0)}\n \n ${this.product?.display_price !== this.product?.compare_price\n ? html`\n \n ₹${formatPrice(\n this.product?.compare_price ?? 0\n )}\n \n `\n : ''}\n `}\n
\n \n {\n this.handleShopNowClick(\n this.product.uuid,\n this.product.compare_price,\n this.product.display_price,\n new URL(this.product.link)\n );\n }}\n >\n Shop Now\n \n \n
\n \n
\n\n \n \n \n `;\n }\n}\n","import {LitElement, html, css, PropertyValues} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {getSlides} from './helpers/data';\nimport {SlideResponse} from './types';\n\nimport './components/carousel/carousel';\nimport './components/modal/modal';\nimport './components/modal_slide/modal_slide';\nimport {Carousel} from './components/carousel/carousel';\nimport {Modal} from './components/modal/modal';\nimport {ModalSlide} from './components/modal_slide/modal_slide';\n\nimport {SlideClickEvent} from './helpers/events';\nimport {removedURLParameter} from './helpers/utils';\n\n@customElement('mobi-carousel')\nexport class MobiCarousel extends LitElement {\n @property({type: String})\n playlistId = '';\n\n static override styles = [\n css`\n :host {\n box-sizing: border-box;\n padding: 1rem 0;\n }\n .modal-carousal {\n width: min(100vw, 1080px);\n user-select: none;\n }\n `,\n ];\n\n @property({type: Object})\n data!: SlideResponse;\n\n constructor() {\n super();\n this.data = {\n uuid: '',\n display_title: '',\n description: '',\n thumbnail: '',\n videos: [],\n };\n }\n\n override async firstUpdated() {\n this.data = await getSlides(this.playlistId);\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data')) {\n const params = new URLSearchParams(window.top?.location.search);\n const videoID = params.get('video_id');\n const slide_index_of_video = this.data.videos.findIndex(\n (video) => video.uuid === videoID\n );\n if (videoID && slide_index_of_video >= 0)\n this._showModalWithSlide(slide_index_of_video, true);\n }\n }\n\n private _showModalWithSlide(slide_index: number, loadFromUrl = false) {\n const modal = this.shadowRoot?.querySelector('#modalView') as Modal;\n\n if (modal) {\n modal.visible = true;\n\n let slideElement = modal.querySelector(\n 'carousel-modal-slide'\n ) as ModalSlide;\n if (!slideElement) {\n slideElement = document.createElement(\n 'carousel-modal-slide'\n ) as ModalSlide;\n slideElement.className = 'modal-carousal';\n modal.appendChild(slideElement);\n }\n\n slideElement.data = this.data;\n slideElement.playlistId = this.playlistId;\n slideElement.initial_slide_index = slide_index;\n slideElement.loadFromUrl = loadFromUrl;\n slideElement.requestUpdate();\n }\n }\n\n _handleSlideClick(e: SlideClickEvent) {\n this._showModalWithSlide(e.detail.slide_index);\n }\n\n _handleModalClose() {\n console.log('Modal Close recognized');\n const modalSlideElement = this.shadowRoot?.querySelector(\n 'carousel-modal-slide'\n ) as ModalSlide;\n if (!modalSlideElement) return;\n modalSlideElement.swiper?.destroy();\n const url = removedURLParameter(\n window.top?.location.href ?? '',\n 'video_id'\n );\n window.top?.history.replaceState(null, '', url);\n }\n\n override render() {\n if (this.data.videos.length === 0) {\n return html``;\n }\n\n return html`\n \n \n ${this.data.videos.map((_item, _idx) => this.render_slide(_item))}\n
\n \n \n \n
\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mobi-carousel': MobiCarousel;\n 'carousel-root': Carousel;\n 'carousel-modal': Modal;\n 'carousel-modal-slide': ModalSlide;\n }\n}\n","import 'swiper/css';\nimport 'swiper/css/navigation';\nimport '../styles/styles.css';\n\nimport {MobiCarousel} from './mobi-carousel';\n\nexport default MobiCarousel;\n"]}${this.data.display_title}
\n${this.data.description}
\n