@salla.sa/twilight-components 2.14.402 → 2.14.403

package/dist/components/salla-gifting.js

@@ -5,6 +5,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { a as anime } from './anime.es.js';
 import { I as IconArrowLeft } from './arrow-left.js';
 import { C as Cancel } from './cancel.js';
+import { S as SIGiftSharing } from './gift-sharing.js';
 import { d as defineCustomElement$b } from './salla-button2.js';
 import { d as defineCustomElement$a } from './salla-datetime-picker2.js';
 import { d as defineCustomElement$9 } from './salla-file-upload2.js';
@@ -22,13 +23,6 @@ var Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" h
 </svg>
 `;
 
-var GiftSharing = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>gift-sharing</title>
-<path d="M5 32h-4c-0.552 0-1-0.448-1-1v0-14c0-0.552 0.448-1 1-1v0h4c0.552 0 1 0.448 1 1v0 14c0 0.552-0.448 1-1 1v0zM2 30h2v-12h-2zM19.32 30h-14.32v-2h14.32c0.693-0.005 1.329-0.242 1.837-0.637l-0.007 0.005 8.45-6.568c0.216-0.16 0.365-0.402 0.399-0.679l0-0.005c0.005-0.036 0.007-0.077 0.007-0.119 0-0.226-0.078-0.434-0.209-0.599l0.002 0.002c-0.16-0.216-0.401-0.364-0.677-0.399l-0.005-0.001c-0.034-0.004-0.073-0.007-0.113-0.007-0.227 0-0.436 0.078-0.601 0.208l0.002-0.002-7.126 5.526c-1.003 0.793-2.285 1.273-3.68 1.274h-6.6v-2h6.6c0.926-0.001 1.777-0.32 2.45-0.852l-0.008 0.006 7.126-5.526c0.492-0.39 1.122-0.625 1.807-0.625 0.135 0 0.268 0.009 0.398 0.027l-0.015-0.002c0.824 0.102 1.534 0.524 2.011 1.137l0.005 0.007c0.39 0.494 0.625 1.127 0.625 1.814 0 0.136-0.009 0.27-0.027 0.402l0.002-0.015c-0.106 0.819-0.529 1.523-1.141 1.995l-0.007 0.005-8.458 6.578c-0.834 0.649-1.894 1.043-3.047 1.050h-0.002zM11 26c-0.552 0-1-0.448-1-1s0.448-1 1-1v0c2.406-0.004 4.415-1.703 4.894-3.967l0.006-0.033h-10.9c-0.552 0-1-0.448-1-1s0.448-1 1-1v0h12c0.552 0 1 0.448 1 1v0c0 3.866-3.134 7-7 7v0zM24 12h-16c-1.105 0-2-0.895-2-2v0-2c0-1.105 0.895-2 2-2v0h16c1.105 0 2 0.895 2 2v0 2c0 1.105-0.895 2-2 2v0zM24 10v0zM8 8v2h16v-2zM23 18c-0.552 0-1-0.448-1-1v0-6c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM9 16c-0.552 0-1-0.448-1-1v0-4c0-0.552 0.448-1 1-1s1 0.448 1 1v0 4c0 0.552-0.448 1-1 1v0zM16 16c-0.552 0-1-0.448-1-1v0-8c0-0.552 0.448-1 1-1s1 0.448 1 1v0 8c0 0.552-0.448 1-1 1v0zM16 8c-0.552-0-1-0.448-1-1 0-0.077 0.009-0.151 0.025-0.223l-0.001 0.007c0.314-1.849 0.963-3.5 1.887-4.961l-0.033 0.055c0.539-0.521 1.274-0.842 2.084-0.842 1.657 0 3 1.343 3 3 0 0.81-0.321 1.545-0.843 2.085l0.001-0.001c-1.405 0.891-3.056 1.541-4.824 1.845l-0.080 0.011c-0.065 0.015-0.139 0.024-0.216 0.024h-0zM19 3c-0.001 0-0.001 0-0.002 0-0.276 0-0.525 0.112-0.706 0.292l0-0c-0.391 0.669-0.703 1.444-0.897 2.264l-0.011 0.058c0.878-0.205 1.653-0.517 2.363-0.93l-0.041 0.022c0.18-0.181 0.292-0.43 0.292-0.706 0-0.551-0.446-0.999-0.998-1h-0zM16 8c-0.077-0-0.151-0.009-0.223-0.025l0.007 0.001c-1.848-0.315-3.499-0.965-4.959-1.888l0.055 0.032c-0.521-0.539-0.842-1.274-0.842-2.084 0-1.657 1.343-3 3-3 0.81 0 1.545 0.321 2.085 0.843l-0.001-0.001c0.891 1.405 1.541 3.056 1.845 4.824l0.011 0.080c0.015 0.066 0.024 0.141 0.024 0.218 0 0.552-0.448 1-1 1-0.001 0-0.001 0-0.002 0h0zM13 3c-0.001 0-0.001 0-0.002 0-0.552 0-1 0.448-1 1 0 0.277 0.112 0.527 0.294 0.708l0 0c0.669 0.391 1.444 0.703 2.264 0.897l0.058 0.011c-0.205-0.878-0.517-1.653-0.93-2.363l0.022 0.041c-0.181-0.181-0.43-0.293-0.706-0.294h-0z"></path>
-</svg>
-`;
-
 var Alert = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>alert</title>
@@ -571,11 +565,11 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
     }
     render() {
         return [
-            h("div", { key: 'ea8b7581fc816b2984ec7a8c9f0d5bfb30710577' }, h("salla-list-tile", { key: '44e4b948c467ecbec4934f894af3e88a01567338', class: this.generateClass() }, h("div", { key: 'c36ccc48ff4209d2aad05123981c8efad4de8642', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'd5cfd335582f2af620ef50ae92b431b3fdf84b71' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '9623168820eefb63c833dd14c68c1dc20afe1cd1', slot: "subtitle" }, h("div", { key: 'e2fda7dc68054c0f382f61d74a578589b565a544' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'e888e024772c0ef848e4a4113b218bb4e05d78db', slot: "action" }, h("salla-button", { key: 'd443bfd1f5925299a4e0510fae8fc175d390b55a', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '8df23b83891ee2abf644cde76675ca6bb796db79', name: "widget-btn-content" }, h("div", { key: '6b5153a1f1b9d5e127093c3fcc96e2a0fa4954f4', class: "s-gifting-widget-action-content" }, h("span", { key: '41a7f2e88c8046d7211abf5d7fc9d3f533c02292', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '45ea8eac19ca9cccf37cd34d8f84211e6172cd45' }, this.sectionBtnText)))))), h("salla-modal", { key: '5bd076c54c4d072886671653e536c649763785b1', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '378d12f388bd0627355af5b4e57929c00ae28044', slot: "loading" }, h("div", { key: '1b738d4b461a9ebe3a5184f4de727bb1b4b45890', class: "s-gifting-skeleton" }, h("div", { key: '660c901f477536e68d2a3bacd028438c9726b968', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '46f8e45a0a38c10784fc5f3505092e65ed2bba3a', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '09b3356d736e5eb46bb51df2e2fa539dc9d8c99f', class: "s-gifting-modal-title" }, h("div", { key: 'cc8cb7dece64c65d5891e32e49588316e9009f6c', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '41b30274a655babdd0c9e26e74dc3f0bdd4a2aea', height: '15px', width: '150px' })))), h("div", { key: 'b241162827a085279f646452a151d6483a37cc8e', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '5ac15a8e94b50ea03cd033375b08f9e4406a7e17', height: '10px', width: '150px' }), h("salla-skeleton", { key: '697e157e475df0cb71b79e3752019f522ed847a3', height: '230px' }), h("salla-skeleton", { key: '8a5e586c059b765f6425d7060a18e8d799be3c4f', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'e1ee17daef6904b8302b0f4437e99b221bd6b236', height: '30px' }), h("salla-skeleton", { key: '9dfbca00f18a37348eb83021ef4fec073685fe7d', height: '40px' })))), h("slot", { key: 'da2c687a186ed115acee04cc683eff3a6a73168f', name: "header" }), !!this.hasError ?
+            h("div", { key: 'f20cc2c84e987b34bb862f72a8f639894ed4150e' }, h("salla-list-tile", { key: 'c52aa5e975f9ed1707c3175fa66109f447749ee7', class: this.generateClass() }, h("div", { key: '2bf7065f32132dde95dacfdea44e34c08cc4e61c', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: '7a9a70b6841a708c322f5bb729e940e4da823261' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'c346f2baa8e6a1adf9b0f89e9b50d236e65116cb', slot: "subtitle" }, h("div", { key: '26c908af9687b0c77554054212f5c8251dc45bf3' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'f91bf3811c383773425af74941a2067e2f62dbb7', slot: "action" }, h("salla-button", { key: '0639c4b9cc4d81f300f6b087e1c10815b1610c75', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '06567fa7406ae6502e8f3211ecab6161c4a7e397', name: "widget-btn-content" }, h("div", { key: 'f895900d17947b006f6aef4695b855eba4737ed2', class: "s-gifting-widget-action-content" }, h("span", { key: 'bd3170b8efa2a0c95f61718afd69e5473adae20a', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: 'cdc3d1df35ad0e7334bc289f9fff2d312d709724' }, this.sectionBtnText)))))), h("salla-modal", { key: 'a98b913100edfa92156baeee766f6141818ebd8b', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '6b438c581e600cbcfeb5260bae8371a1fbefa29c', slot: "loading" }, h("div", { key: 'ada9e9bb0355755eade9ff7846334cb5ae093e6f', class: "s-gifting-skeleton" }, h("div", { key: '11d2e41b6acb933f5b006cc9f0b0b46470892c6a', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '141be7d6aa83fed682f8ab6a3708597dbb4dba11', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '65eba6244b5507397c8e50ef40f695e7eebe0b96', class: "s-gifting-modal-title" }, h("div", { key: '0f2488d19d2de0a728377b9f475b70073f6f196a', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'b648340418099246c8b83b308f116412fdb6cbc9', height: '15px', width: '150px' })))), h("div", { key: '8255e53b49f572ef3c4485cf7e84540dac019f89', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '0b05db8e76a9a53032b1643d8c4e223b8b641e30', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'c585bf04433e46ce8e89d9bfc3402faf4cfbb21a', height: '230px' }), h("salla-skeleton", { key: '0c09063b73e3aecb6a1879cdc93b60a6bcb9b2cc', height: '10px', width: '150px' }), h("salla-skeleton", { key: '88f55e5ffded2f784002b44e49f3ab2d22a7c067', height: '30px' }), h("salla-skeleton", { key: '6e1edd3b031f051ec24149ec690d2e4f04f9c557', height: '40px' })))), h("slot", { key: 'bff6a067b10a31c39f22e18c6bdf5a60f56ef116', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
-                        h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
+                        h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: SIGiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
                         h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el }, h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), h("div", { class: "s-gifting-modal-uploader anime-item", ref: el => this.uploader = el }, h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
                             h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
                                 this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { style: { "width": "120px" }, src: item.url, alt: `${item.id}` }))) : ''))
@@ -591,7 +585,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId) }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, h("a", { href: "#!", innerHTML: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '20793a5a50c708c93be79df033e43a36e615d075', name: "footer" })))
+                    ], h("slot", { key: '4cad8b174ab427e6f75b77357efc20e54d791ba4', name: "footer" })))
         ];
     }
     static get style() { return sallaGiftingCss; }

package/dist/components/salla-hook.js

@@ -17,7 +17,7 @@ const SallaHook$1 = /*@__PURE__*/ proxyCustomElement(class SallaHook extends HTM
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: '618467f6911198a5cbf4270694544575e585af27' });
+        return h(Host, { key: '2aa8c92dee7e62785fa0f45d967912ae8d6f96c0' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/components/salla-list-tile2.js

@@ -25,7 +25,7 @@ const SallaListTile = /*@__PURE__*/ proxyCustomElement(class SallaListTile exten
         };
     }
     render() {
-        return (h(Host, { key: 'e1528afcea1eda05a5ce206e95791e7611d24dd0' }, h("a", { key: '749a73c76d68ad36f1a6609ada69778662d56566', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: '7bfd448f86790b2afe0b7a5b8a5460c3b2be66ee', class: "s-list-tile-item-icon" }, h("slot", { key: '383e28a8832483e8ecc61e4f48a3ff1fe5db1038', name: 'icon' })), h("div", { key: 'c42bf126a9ff4014a4e2d85ff12b41d1a88a0e03', class: "s-list-tile-item-content" }, h("div", { key: '18a4a9ebd39e3a710f70dc33554d24e3c2850e53', class: "s-list-tile-item-title" }, h("slot", { key: '7211d627511bf2448cf161f40cc82b1822dd1e7a', name: 'title' })), h("div", { key: '044a7d76e05841f484387c7ed299107f33c9bc21', class: "s-list-tile-item-subtitle" }, h("slot", { key: 'df131034f1c5434722543e25552caed142794d55', name: "subtitle" }))), h("div", { key: '37abe0abab720da11cd55660578ec256c062e763', class: "s-list-tile-item-action" }, h("slot", { key: 'fcac02da17981ef4c6fa3cea50c551e3010352d9', name: 'action' })))));
+        return (h(Host, { key: '1f5e8a06d1c1aa0df00b09eec0c0a1efbf590748' }, h("a", { key: 'f9b772a03f745b07e2456cd74c73ab695f3754ff', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: 'e90d46a29df8ea298489deba9b88bc6f84ebd5aa', class: "s-list-tile-item-icon" }, h("slot", { key: 'a5c40e495d05b5d45bae8ed133eca034f439368d', name: 'icon' })), h("div", { key: '2ded5a53f567c8eddb05d24a5f59875d3a7ac1ac', class: "s-list-tile-item-content" }, h("div", { key: '80e6962e698223c893b40a4a62d8ce67aa3ab27c', class: "s-list-tile-item-title" }, h("slot", { key: '87f95d3ae826904a55e0e4724340f55344371789', name: 'title' })), h("div", { key: '7fc838f33b9e65ca8c9f11bce4b506aad7d7ecb1', class: "s-list-tile-item-subtitle" }, h("slot", { key: 'f936a3770d59d3b56287927a447df9c8fa697310', name: "subtitle" }))), h("div", { key: 'e974fd4591921468f4a882370303709718ef6e64', class: "s-list-tile-item-action" }, h("slot", { key: '9d2adb70f0c75b18474f0f05c99000327e081ce8', name: 'action' })))));
     }
     static get style() { return sallaListTileCss; }
 }, [4, "salla-list-tile", {

package/dist/components/salla-loading2.js

@@ -27,7 +27,7 @@ const SallaLoading = /*@__PURE__*/ proxyCustomElement(class SallaLoading extends
         this.bgColor = "#e5e7eb";
     }
     render() {
-        return (h(Host, { key: '64a270526fd172b66a0671749bf36acee7cc8de1', class: "s-loading-container" }, h("svg", { key: '380bae806d8aa39e3ac07fba3daf181cfe040f70', "aria-hidden": "true", style: { width: `${this.size}px`, height: `${this.size}px`, fill: this.color, color: this.bgColor }, class: "s-loading", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c531098ed793fcd2ec90f10bfb470bcc4543b346', d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), h("path", { key: 'cc6b89a57e8168937ee13b5ccdc25aa024e05223', d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" }))));
+        return (h(Host, { key: 'bd9a1150a24f8a62d42437c669613ffa4e67b14f', class: "s-loading-container" }, h("svg", { key: '460c614d5d205ed9283d63f5ebebdb5639b8246e', "aria-hidden": "true", style: { width: `${this.size}px`, height: `${this.size}px`, fill: this.color, color: this.bgColor }, class: "s-loading", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '13c50eee8a0f2342cc876e9dbbcc84d418e314bc', d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), h("path", { key: '08888ea6c15d6be5d4225ec22bb2586e410793e8', d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" }))));
     }
     static get style() { return sallaLoadingCss; }
 }, [0, "salla-loading", {

package/dist/components/salla-localization-modal.js

@@ -213,7 +213,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
             this.showTrigger
                 ? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
                 : '',
-            h("salla-modal", { key: '8b26a4e0224a049aee503c06ec288eb2dcbd00db', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'b28c8375f6491ad8fab684dab4d203a9d23fd417', slot: 'loading' }, h("div", { key: '26967b5d8accc26b75aa0a361506341b00cc1ef7', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'a97f5ceee4c1173030ec29781ee6571c50e02865', width: '25%', height: '15px' }), h("div", { key: '51edca3871e46c692b89651281e94b1716f3cade', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '5e8e3fb5c956be5a681025c7cfce59648dcc75e7', width: '25%', height: '15px' }), h("div", { key: 'd16e6d8bed9300337f84bad366e2731799363fb2', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '952633850a514afbf702d8e6afe30470ff201673', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-modal", { key: '13b805dc33b57d433d4c35ad8217adef60b99ad5', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'b30239d0a20d15baccb6a5017493d91ae96c350c', slot: 'loading' }, h("div", { key: '94f7df4044f94612413f4818b110abae3c251075', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '63008e2fd90cfa4ce9ddbf313ffe718c520853ce', width: '25%', height: '15px' }), h("div", { key: '97f64f98e99c3cc2f099fa02469a2000c7eefc4c', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '230480a6cfaddab7fbe70a16041cf5fb8903c64a', width: '25%', height: '15px' }), h("div", { key: 'caf3e79cdbd04d5374365173212792abfe3d465b', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'b48d02c6e7febad77dbd0d37e540d02d26265e8b', height: '40px', width: '100%' }))), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
                 h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
                     h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?

package/dist/components/salla-loyalty-banner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaLoyaltyBanner extends Components.SallaLoyaltyBanner, HTMLElement {}
+export const SallaLoyaltyBanner: {
+    prototype: SallaLoyaltyBanner;
+    new (): SallaLoyaltyBanner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-loyalty-banner.js

@@ -0,0 +1,103 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as setTranslations } from './translations.js';
+import { l as loyaltyProgramIcon } from './gift.js';
+import { T as TrackedPromise } from './tracked-promise.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$2 } from './salla-reward-exchange2.js';
+
+const sallaLoyaltyProgramCss = "";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const SallaLoyaltyBanner$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyBanner extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /**
+     * Get product ID from data attribute or fallback to page.id
+     */
+    get productId() {
+        return this.host.dataset.productId || salla.config.get('page.id');
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => salla.lang.onLoaded())
+            .then(() => setTranslations())
+            .then(() => this.prize())
+            .catch(error => salla.logger.error(error));
+    }
+    handleClick() {
+        if (salla.config.isGuest()) {
+            salla.event.dispatch('login::open');
+            return;
+        }
+        this.exchangeModal.open();
+    }
+    render() {
+        if (this.prize.status !== 'success' || !this.productId) {
+            return null;
+        }
+        return (h("div", { class: "s-loyalty-program-banner-container" }, h("div", null, h("p", { class: "s-loyalty-program-banner-container-banner-title" }, salla.lang.get('pages.loyalty_program.want_to_redeem_free_product')), h("p", { class: "s-loyalty-program-banner-container-banner-subtitle" }, salla.lang.get('pages.loyalty_program.exchange_points_for_free_product', { points: this.prize.data.cost_points }))), h("button", { onClick: () => this.handleClick() }, h("span", { innerHTML: loyaltyProgramIcon }), h("span", null, salla.lang.get('pages.loyalty_program.exchange_points'))), h("salla-modal", { ref: modal => this.exchangeModal = modal, width: "sm" }, !this.prize.data ? '' : h("salla-reward-exchange", { productId: Number(this.productId), prize: this.prize.data }))));
+    }
+    get host() { return this; }
+    static get style() { return sallaLoyaltyProgramCss; }
+}, [0, "salla-loyalty-banner"]);
+__decorate([
+    TrackedPromise(async function () {
+        if (!(salla.config.get('store.features') || []).includes('loyalty-system')) {
+            return Promise.reject('Loyalty system is not enabled for merchant');
+        }
+        const { loyalty_prize } = await salla.product.api.getDetails(this.productId);
+        if (!loyalty_prize) {
+            return Promise.reject('no loyalty prize for this product');
+        }
+        return loyalty_prize;
+    })
+], SallaLoyaltyBanner$1.prototype, "prize", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-loyalty-banner", "salla-loading", "salla-modal", "salla-reward-exchange"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-loyalty-banner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaLoyaltyBanner$1);
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-reward-exchange":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaLoyaltyBanner = SallaLoyaltyBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaLoyaltyBanner, defineCustomElement };

package/dist/components/salla-loyalty-hero.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaLoyaltyHero extends Components.SallaLoyaltyHero, HTMLElement {}
+export const SallaLoyaltyHero: {
+    prototype: SallaLoyaltyHero;
+    new (): SallaLoyaltyHero;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-loyalty-hero.js

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaLoyaltyHero$1, d as defineCustomElement$1 } from './salla-loyalty-hero2.js';
+
+const SallaLoyaltyHero = SallaLoyaltyHero$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaLoyaltyHero, defineCustomElement };

package/dist/components/salla-loyalty-hero2.js

@@ -0,0 +1,43 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaLoyaltyProgramCss = "";
+
+const SallaLoyaltyHero = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyHero extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { key: '71421d1a559f9d0b8b9a2023e3015847dd4be7fb' }, h("section", { key: '914ae35d2e038a4f0f358eb3d61352cf263f4c7b', class: "s-loyalty-program-hero-container" }, h("div", { key: '93353d9f4dcc7d41e4c714f93ee84899b799633e', class: "s-loyalty-program-hero-background", style: {
+                backgroundImage: `url(${this.image})`,
+            } }, this.image ? h("div", { class: "s-loyalty-program-hero-overlay" }) : '', h("div", { key: '6f62cb4aadbb81f91549b60177f15e8791e6aa51', class: {
+                's-loyalty-program-hero-content': true,
+                's-loyalty-program-hero-white': !!this.image,
+                's-loyalty-program-hero-gray': !this.image,
+            } }, h("div", { key: '11794269898ee42023cac29e49c17463fe90781b' }, h("h1", { key: '95435290b38fce9dbc6a580d8452e7189074773b', class: "s-loyalty-program-hero-title" }, this.name || h("span", { key: '02fbbae525a5973d65bb98626dbe5712374495c4', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "name")), h("p", { key: 'e482ab6a067d54b9c274208a43b286e07a8e471c', class: "s-loyalty-program-hero-description" }, this.description || h("span", { key: '2fc2ea5a732e473b2c26d3b885a699b57f7df0c1', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "description"))), h("slot", { key: 'd548c168c97849abd583b510c7b1d6c4370daa1c', name: "action" }))), h("div", { key: '2423ee04e5e126eabcbfec20ad6c82a8d2593d2a', class: "s-loyalty-program-hero-footer" }, h("div", { key: '25ee4e74c9ea3c0ea420a09858c45b83b454bd40', class: "s-loyalty-program-hero-slot-container" }, h("slot", { key: '11a7147bc142914ccfa08b099826a4a2805100aa', name: "crosspoint" }))))));
+    }
+    static get style() { return sallaLoyaltyProgramCss; }
+}, [4, "salla-loyalty-hero", {
+        "image": [1],
+        "name": [1],
+        "description": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-loyalty-hero"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-loyalty-hero":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaLoyaltyHero);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaLoyaltyHero as S, defineCustomElement as d };

package/dist/components/salla-loyalty-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaLoyaltyPanel extends Components.SallaLoyaltyPanel, HTMLElement {}
+export const SallaLoyaltyPanel: {
+    prototype: SallaLoyaltyPanel;
+    new (): SallaLoyaltyPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-loyalty-panel.js

@@ -0,0 +1,250 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { s as setTranslations } from './translations.js';
+import { n as normalizeLoyaltyData, c as closeModals } from './functions.js';
+import { R as Rate } from './star2.js';
+import { C as Cancel } from './cancel.js';
+import { S as SIPercentage, a as SILayoutGrid } from './percentage.js';
+import { S as SIShipping } from './shipping.js';
+import { C as Cart2 } from './cart2.js';
+import { T as TrackedPromise } from './tracked-promise.js';
+import { d as defineCustomElement$m } from './salla-add-product-button2.js';
+import { d as defineCustomElement$l } from './salla-badge2.js';
+import { d as defineCustomElement$k } from './salla-button2.js';
+import { d as defineCustomElement$j } from './salla-count-down2.js';
+import { d as defineCustomElement$i } from './salla-list-tile2.js';
+import { d as defineCustomElement$h } from './salla-loading2.js';
+import { d as defineCustomElement$g } from './salla-modal2.js';
+import { d as defineCustomElement$f } from './salla-product-availability2.js';
+import { d as defineCustomElement$e } from './salla-product-card2.js';
+import { d as defineCustomElement$d } from './salla-products-slider2.js';
+import { d as defineCustomElement$c } from './salla-progress-bar2.js';
+import { d as defineCustomElement$b } from './salla-quick-buy2.js';
+import { d as defineCustomElement$a } from './salla-reward-action2.js';
+import { d as defineCustomElement$9 } from './salla-reward-card2.js';
+import { d as defineCustomElement$8 } from './salla-reward-details2.js';
+import { d as defineCustomElement$7 } from './salla-reward-exchange2.js';
+import { d as defineCustomElement$6 } from './salla-slider2.js';
+import { d as defineCustomElement$5 } from './salla-tab-content2.js';
+import { d as defineCustomElement$4 } from './salla-tab-header2.js';
+import { d as defineCustomElement$3 } from './salla-tabs2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
+
+var PrizeImage = `<svg xmlns="http://www.w3.org/2000/svg" width="77" height="77" fill="none" viewBox="0 0 57 57"><rect width="56.3" height="55.9" x=".4" y=".2" fill="#FFF5E5" rx="27.9"/><g clip-path="url(#a)"><path fill="#EE9D0D" d="M16.7 27.5h17.5v12.2a1 1 0 0 1-1 1H17.7a1 1 0 0 1-1-1V27.5Z"/><path fill="#C7830B" d="M34.2 27.8v6l-6.8-6.3H34l.3.3Z"/><path fill="#C7830B" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EA2B2D" d="m29.9 15.8-.3.1a2.4 2.4 0 0 0-1.4 1.5l-.2.8-.4.2a2.4 2.4 0 0 0-1.1 1.4l4.2 3.9L33 21l.2-2.9a2.4 2.4 0 0 0-3.3-2.4ZM41.1 26.3v.2a2.4 2.4 0 0 1-1.5 1.6l-.7.3-.2.3a2.4 2.4 0 0 1-1.3 1.3l-4.2-4 2.4-2.5 2.9-.3a2.4 2.4 0 0 1 2.6 3.1Z"/><path fill="#CB2527" d="M23.7 27.5h3.5v13.1h-3.5V27.5Z"/><path fill="#EA2B2D" d="M16.7 32.3h17.5v3.5H16.7v-3.5Z"/><path fill="#CB2527" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EE9D0D" d="M25.3 18.7 38.6 31a1 1 0 0 1 0 1.4l-2.3 2.4-14.7-13.7 2.3-2.5a1 1 0 0 1 1.4 0Z"/><path fill="#CB2527" d="m30.3 23.4 3.2 3-3 3.2-3.2-3 3-3.2ZM31.8 22.8a.4.4 0 0 1-.3-.1l-.3-.4A5.9 5.9 0 0 1 30 18a.4.4 0 0 1 .9 0 5 5 0 0 0 1 3.7l.3.3a.4.4 0 0 1-.4.7Z"/><path fill="#EA2B2D" d="M30.7 23.7c-1.9.7-3.8 1-5.7.9h-1.1l1.9 1.7-.6 1.9 1.8-.6c1.7-.5 3.2-1.4 4.6-2.5l.3-.2-1.2-1.2Z"/><path fill="#CB2527" d="M37.8 26.4c-1.1 0-2.3-.3-3.2-1l-.4-.2a.4.4 0 0 1 0-.8.4.4 0 0 1 .5 0l.3.3a5 5 0 0 0 3.7.7.4.4 0 1 1 .2 1 6 6 0 0 1-1 0Z"/><path fill="#EA2B2D" d="M33.2 26c-.5 2-.7 3.9-.5 5.8l.1 1.1-1.9-1.8-1.8.7.4-1.8c.4-1.7 1.2-3.3 2.2-4.8l.2-.3 1.3 1.2Z"/><path fill="#6699CE" d="M21.5 17.4a.9.9 0 1 0 0-1.7.9.9 0 0 0 0 1.7Z"/><path fill="#FAA6B2" d="M16.7 27.5a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z"/><path fill="#A6DEFF" d="M18.4 17.9a.4.4 0 0 1-.4-.3v-.1a1.4 1.4 0 0 0-1.3-1 .4.4 0 0 1-.2-.8h.2a2.3 2.3 0 0 1 2.1 1.5.4.4 0 0 1-.4.7ZM20.6 25.6h-.2v-.1a1 1 0 0 0-1.1 0 .4.4 0 0 1-.5-.8 1.8 1.8 0 0 1 2 0 .4.4 0 0 1-.2.9Z"/><path fill="#EEB436" d="m17.6 18.6 1.3 1.2 1.8-.4-.7 1.7.9 1.6-1.8-.2-1.2 1.3-.4-1.8-1.7-.7 1.6-.9.2-1.8ZM23 26.6l-.5 1.8 1.2 1.3-1.8.2-1 1.5-.6-1.7-1.8-.4 1.4-1.1-.2-1.9 1.6 1 1.6-.7Z"/><path fill="#F72D2F" d="m33.2 26-2.5-2.3L33 21a4 4 0 0 1 2.6 2.4l-2.4 2.6Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M15.8 15.7h25.4v25H15.8z"/></clipPath></defs></svg>`;
+
+const sallaLoyaltyProgramCss = "";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const sicons = {
+    all: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SILayoutGrid }),
+    free_shipping: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIShipping }),
+    coupon_discount: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIPercentage }),
+    free_product: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: Cart2 }),
+};
+const SallaLoyaltyPanel$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyPanel extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * prize to show in details or exchange modals
+         */
+        this.currentPrize = null;
+        this.handleExchangeSucceeded = () => window.location.reload();
+        this.handleResetSucceeded = () => window.location.reload();
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => salla.lang.onLoaded())
+            .then(() => setTranslations())
+            .then(() => {
+            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
+            salla.event.on('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
+            // Fetch points if user is logged in
+            if (!salla.config.isGuest()) {
+                this.points();
+            }
+        })
+            .catch((error) => salla.logger.error(error));
+    }
+    disconnectedCallback() {
+        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
+        salla.event.off('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
+    }
+    render() {
+        const prizesGroups = this.program.data.prizes;
+        const prizesCount = this.program.data.prizes_count;
+        const isLoadingPoints = this.points.status === 'pending' && this.points.data === null && !this.customerPoints;
+        const customerPoints = isLoadingPoints ? '---' : (this.points.data ?? this.customerPoints ?? 0);
+        if (this.prizeTitle && this.prizePoints) {
+            return (h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: "s-loyalty-program-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-program-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: "action", class: "s-loyalty-program-after-exchange-action" }, h("salla-button", { class: "s-loyalty-program-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => salla.loyalty.reset() }, h("span", { innerHTML: Cancel }))))));
+        }
+        return (h("div", { class: "" }, h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: 's-loyalty-program-panel-widget' }, h("div", { slot: "icon", class: "s-loyalty-program-panel-widget-icon", innerHTML: Rate }), h("div", { slot: "subtitle" }, salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": customerPoints }), h("salla-button", { shape: "link", color: "primary", onClick: () => {
+                if (['error', 'idle'].includes(this.program.status)) {
+                    this.program();
+                }
+                this.rewardsModal.open();
+            } }, customerPoints !== '---' && customerPoints ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login'))))), h("salla-modal", { id: "loyalty-rewards-modal", isLoading: this.program.status === 'pending', ref: modal => this.rewardsModal = modal, class: "s-loyalty-program-rewards-cart s-loyalty-program-modal", width: "lg", noPadding: true }, h("div", { slot: "loading" }, h("salla-loading", null)), this.program.status === 'success' ? h("div", { class: "s-loyalty-program-rewards-container-cart" }, h("div", { class: "s-loyalty-program-rewards-cart-header" }, h("div", { innerHTML: PrizeImage }), h("div", { class: "s-loyalty-program-panel-content" }, h("h1", null, this.program.data.prize_promotion_title), h("p", null, this.program.data.prize_promotion_description))), h("div", { class: {
+                's-loyalty-program-slider-arrows': true,
+                's-loyalty-program-tabs-hider': prizesGroups.length < 2 || prizesCount < 2,
+            } }, h("salla-tabs", null, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title)))), prizesGroups.map((group) => (h("salla-tab-content", { slot: "content", name: group.type }, h("salla-slider", { id: group.type, type: "default", "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":12,"breakpoints":{"768":{"slidesPerView":3,"spaceBetween":24,"freeMode":false,"speed":300}}}' }, h("div", { slot: "items" }, group.items.map((prize) => h("salla-reward-card", { prize: prize, onAreaClick: () => {
+                this.currentPrize = prize;
+                closeModals(() => this.detailsModal.open());
+            }, onActionClick: () => {
+                this.currentPrize = prize;
+                closeModals(() => this.detailsModal.open());
+            } })))))))))) : ''), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => closeModals(() => this.exchangeModal.open()), prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize }))));
+    }
+    static get style() { return sallaLoyaltyProgramCss; }
+}, [0, "salla-loyalty-panel", {
+        "prizePoints": [1544, "prize-points"],
+        "customerPoints": [1538, "customer-points"],
+        "prizeTitle": [1537, "prize-title"],
+        "currentPrize": [32]
+    }]);
+__decorate([
+    TrackedPromise(async () => {
+        const { data } = await salla.loyalty.getProgram();
+        return normalizeLoyaltyData(data);
+    }, { initialData: { prizes: [], prizes_count: 0 } })
+], SallaLoyaltyPanel$1.prototype, "program", void 0);
+__decorate([
+    TrackedPromise(async () => {
+        const { data } = await salla.loyalty.getPoints();
+        return data.points;
+    }, { initialData: null })
+], SallaLoyaltyPanel$1.prototype, "points", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-loyalty-panel", "salla-add-product-button", "salla-badge", "salla-button", "salla-count-down", "salla-list-tile", "salla-loading", "salla-modal", "salla-product-availability", "salla-product-card", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-reward-card", "salla-reward-details", "salla-reward-exchange", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-loyalty-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaLoyaltyPanel$1);
+            }
+            break;
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "salla-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "salla-list-tile":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-product-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-products-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-quick-buy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-reward-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-reward-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-reward-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-reward-exchange":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-tab-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-tab-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-tabs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaLoyaltyPanel = SallaLoyaltyPanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaLoyaltyPanel, defineCustomElement };

package/dist/components/salla-loyalty-point.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaLoyaltyPoint extends Components.SallaLoyaltyPoint, HTMLElement {}
+export const SallaLoyaltyPoint: {
+    prototype: SallaLoyaltyPoint;
+    new (): SallaLoyaltyPoint;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-loyalty-point.js

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaLoyaltyPoint$1, d as defineCustomElement$1 } from './salla-loyalty-point2.js';
+
+const SallaLoyaltyPoint = SallaLoyaltyPoint$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaLoyaltyPoint, defineCustomElement };