@salla.sa/twilight-components 2.14.401 → 2.14.403

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

@@ -1,109 +1,272 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { s as setTranslations } from './translations.js';
+import { n as normalizeLoyaltyData, a as nearestLowerMultiple, c as closeModals } from './functions.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 { a as SIUserAdd, d as defineCustomElement$h } from './salla-loyalty-point2.js';
+import { S as SIGiftSharing } from './gift-sharing.js';
 import { l as loyaltyProgramIcon } from './gift.js';
-import { d as defineCustomElement$3 } from './salla-button2.js';
-import { d as defineCustomElement$2 } from './salla-loading2.js';
+import { T as TrackedPromise } from './tracked-promise.js';
+import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$n } from './salla-add-product-button2.js';
+import { d as defineCustomElement$m } from './salla-badge2.js';
+import { d as defineCustomElement$l } from './salla-button2.js';
+import { d as defineCustomElement$k } from './salla-count-down2.js';
+import { d as defineCustomElement$j } from './salla-loading2.js';
+import { d as defineCustomElement$i } from './salla-loyalty-hero2.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 SICartUpload = `<!-- 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>cart-upload</title>
+<path d="M14.545 7.669l3.121-2.732v9.729c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.728l3.121 2.732c0.253 0.22 0.567 0.329 0.879 0.329 0.371 0 0.74-0.155 1.004-0.455 0.485-0.555 0.429-1.396-0.125-1.881l-5.333-4.667c-0.503-0.44-1.253-0.44-1.756 0l-5.333 4.667c-0.555 0.484-0.611 1.327-0.125 1.881 0.484 0.552 1.325 0.609 1.881 0.124zM30.647 5.371c-0.713-0.171-1.436 0.267-1.609 0.983l-2.744 11.363c-0.171 0.568-0.684 0.951-1.277 0.951h-12.136c-0.563 0-1.067-0.356-1.256-0.885l-6.035-16.896c-0.189-0.531-0.692-0.885-1.256-0.885h-2.667c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h1.727l5.719 16.012c0.567 1.588 2.081 2.655 3.768 2.655h12.136c1.78 0 3.32-1.145 3.851-2.92l2.763-11.433c0.173-0.716-0.267-1.436-0.983-1.609zM13.667 24c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM13.667 29.333c-0.735 0-1.333-0.599-1.333-1.333s0.599-1.333 1.333-1.333 1.333 0.599 1.333 1.333-0.599 1.333-1.333 1.333zM24.333 24c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM24.333 29.333c-0.735 0-1.333-0.599-1.333-1.333s0.599-1.333 1.333-1.333 1.333 0.599 1.333 1.333-0.599 1.333-1.333 1.333z"></path>
+</svg>
+`;
 
 const sallaLoyaltyProgramCss = "";
 
-const formatDate = (timestamp) => {
-    if (!timestamp)
-        return '';
-    return new Date(Number(timestamp)).toLocaleDateString(salla.lang.locale, {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-    });
+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 translateKey = (key) => {
-    if (!key)
-        return '';
-    try {
-        const k = key.toLowerCase();
-        const translation = salla.lang.get(`pages.loyalty_program.${k}`);
-        return translation === `pages.loyalty_program.${k}` ? key : translation;
-    }
-    catch {
-        return key;
-    }
+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 SallaWalletTable = /*@__PURE__*/ proxyCustomElement(class SallaWalletTable extends HTMLElement {
+const SallaLoyaltyProgram$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyProgram extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.loyaltyPointsArray = [];
-        this.isLoadingLoyalty = false;
-        this.nextPageUrlLoyalty = '';
-        this.handleClick = () => {
-            this.loadMoreLoyaltyPoints();
+        /**
+         * prize to show in details or exchange modals
+         */
+        this.currentPrize = null;
+        /**
+         * collapsed state of points list
+         */
+        this.collapsed = true;
+        this.animatedPoints = 0;
+        this.handleExchangeSucceeded = () => {
+            this.points();
+            this.program();
         };
     }
     componentWillLoad() {
-        return salla.onReady().then(() => {
-            this.loadLoyaltyPoints();
-        });
+        return salla.onReady()
+            .then(() => salla.lang.onLoaded())
+            .then(() => setTranslations())
+            .then(() => {
+            this.program();
+            this.points();
+            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
+        })
+            .catch((error) => salla.logger.error(error));
     }
-    async loadLoyaltyPoints() {
-        this.isLoadingLoyalty = true;
-        try {
-            let url = `/balance/points?page=1`;
-            let resp = await salla.api.request(url);
-            this.loyaltyPointsArray = resp.data;
-            this.nextPageUrlLoyalty = resp.cursor.next;
-        }
-        catch (error) {
-            console.error('Error loading loyalty points transactions', error);
-        }
-        finally {
-            this.isLoadingLoyalty = false;
-        }
+    disconnectedCallback() {
+        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
     }
-    async loadMoreLoyaltyPoints() {
-        if (!this.nextPageUrlLoyalty)
-            return;
-        this.isLoadingLoyalty = true;
-        try {
-            let resp = await salla.api.request(this.nextPageUrlLoyalty);
-            this.loyaltyPointsArray = [...this.loyaltyPointsArray, ...resp.data];
-            this.nextPageUrlLoyalty = resp.cursor?.next || '';
-        }
-        catch (error) {
-            console.error('Error loading more loyalty points', error);
-        }
-        finally {
-            this.isLoadingLoyalty = false;
-        }
+    getOutlineItem(number, title, description) {
+        const icons = {
+            1: h("span", { innerHTML: SIUserAdd }),
+            2: h("span", { innerHTML: SIGiftSharing }),
+            3: h("span", { innerHTML: SICartUpload }),
+        };
+        return (h("li", { class: "s-loyalty-program-item" }, h("div", { class: "s-loyalty-program-content" }, h("span", { class: "s-loyalty-program-icon-container" }, h("span", { class: "s-loyalty-program-text-gradient" }, number), h("span", { class: "s-loyalty-program-icon" }, icons[number])), h("div", { class: "s-loyalty-program-title" }, title), h("div", { class: "s-loyalty-program-description" }, description))));
     }
     render() {
-        return (h(Host, { key: '4a8cb15322b005a124eb5792044d6435fd52922e' }, h("div", { key: '54a08cfdb24116455b8c137d20ec5ef22a34ff85' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, point?.type === 'plus' ? '+' : '', point?.points || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: loyaltyProgramIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
+        if (this.program.status === 'error') {
+            return h("p", null, salla.lang.get('common.errors.error_occured'));
+        }
+        const displayedPoints = this.program.data.points.slice(0, this.collapsed ? nearestLowerMultiple(this.program.data.points.length) : this.program.data.points.length);
+        const prizesGroups = this.program.data.prizes;
+        const prizesCount = this.program.data.prizes_count;
+        return (h("div", { class: "s-loyalty-program-container" }, h("salla-loyalty-hero", { name: this.program.data.name, description: this.program.data.description, image: this.program.data.image }, salla.config.isUser()
+            ? h("div", { slot: "crosspoint", class: "s-loyalty-program-profile-wrapper" }, h("div", { class: "s-loyalty-program-profile-container" }, h("div", { class: "s-loyalty-program-profile-points-section" }, h("h2", { class: "s-loyalty-program-profile-label" }, salla.lang.get('pages.loyalty_program.your_points')), h("p", { class: "s-loyalty-program-profile-points" }, h("span", { class: "s-loyalty-program-profile-points-value" }, !!this.animatedPoints ? this.animatedPoints : this.points.data), "\u00A0", salla.lang.get('pages.loyalty_program.point'))), h("div", { class: "s-loyalty-program-profile-icon" }, h("span", { innerHTML: loyaltyProgramIcon }))))
+            : h("button", { slot: "action", onClick: () => salla.event.dispatch('login::open'), class: {
+                    's-loyalty-program-login-action': true,
+                    's-loyalty-program-login-action-dark': !this.program.data.image,
+                    's-loyalty-program-login-action-light': !!this.program.data.image,
+                } }, salla.lang.get('blocks.header.login'))), h("div", { class: "s-loyalty-program-outline-section" }, h("section", { class: "s-loyalty-program-section" }, h("header", { class: "s-loyalty-program-header" }, h("h1", { class: "s-loyalty-program-main-title" }, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", { class: "s-loyalty-program-subtitle" }, salla.lang.get('pages.loyalty_program.three_simple_steps'))), h("ol", { class: "s-loyalty-program-list" }, this.getOutlineItem(1, salla.lang.get('pages.loyalty_program.register'), salla.lang.get('pages.loyalty_program.create_account')), this.getOutlineItem(2, salla.lang.get('pages.loyalty_program.earn_points'), salla.lang.get('pages.loyalty_program.complete_tasks')), this.getOutlineItem(3, salla.lang.get('pages.loyalty_program.redeem_rewards'), salla.lang.get('pages.loyalty_program.enjoy_rewards'))))), h("div", { class: "s-loyalty-program-points-wrapper" }, h("section", { class: "s-loyalty-program-points-section" }, h("header", { class: "s-loyalty-program-points-header" }, h("h1", { class: "s-loyalty-program-points-title" }, this.program.data.promotion_title), h("p", { class: "s-loyalty-program-points-description" }, this.program.data.promotion_description)), h("div", { class: "s-loyalty-program-points-spacer" }), h("ul", { class: {
+                's-loyalty-program-points-list-one': this.program.data.points.length === 1,
+                's-loyalty-program-points-list-two': this.program.data.points.length === 2,
+                's-loyalty-program-points-list-multi': this.program.data.points.length > 2,
+            } }, displayedPoints.map(point => (h("li", null, h("salla-loyalty-point", { point: point }))))), h("div", { class: "s-loyalty-program-points-spacer" }), nearestLowerMultiple(this.program.data.points.length) !== this.program.data.points.length && h("button", { class: "s-loyalty-program-points-more-button", onClick: () => this.collapsed = !this.collapsed }, this.collapsed
+            ? h("span", null, salla.lang.get('pages.loyalty_program.show_more'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "+"))
+            : h("span", null, salla.lang.get('pages.loyalty_program.show_less'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "-"))))), this.program.status !== 'success' ? '' : h("div", { class: "s-loyalty-program-rewards-container s-loyalty-program-slider-arrows-edges" }, h("section", { class: {
+                's-loyalty-program-tabs-hider': prizesGroups.length <= 2 || prizesCount <= 4,
+            } }, h("h1", { class: "s-loyalty-program-rewards-heading-mobile" }, salla.lang.get('pages.loyalty_program.rewards')), h("salla-tabs", null, h("div", { slot: "header", class: "s-loyalty-program-rewards-tab-items" }, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title))))), h("h1", { slot: "header", class: "s-loyalty-program-rewards-heading-desktop" }, salla.lang.get('pages.loyalty_program.rewards')), 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":4,"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-program", {
-        "loyaltyPointsArray": [32],
-        "isLoadingLoyalty": [32],
-        "nextPageUrlLoyalty": [32]
+        "currentPrize": [32],
+        "collapsed": [32],
+        "animatedPoints": [32]
     }]);
+__decorate([
+    TrackedPromise(async function () {
+        const { data } = await salla.loyalty.getProgram();
+        return normalizeLoyaltyData(data);
+    }, { initialData: { points: [], prizes: [], prizes_count: 0 } })
+], SallaLoyaltyProgram$1.prototype, "program", void 0);
+__decorate([
+    TrackedPromise(async function () {
+        const { data } = await salla.loyalty.getPoints();
+        anime({
+            targets: { value: 0 },
+            value: data.points ?? 0,
+            round: 1,
+            easing: 'easeOutQuad',
+            duration: 2000,
+            update: (anim) => {
+                this.animatedPoints = anim.animations[0].currentValue;
+            }
+        });
+        return data.points;
+    })
+], SallaLoyaltyProgram$1.prototype, "points", void 0);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-loyalty-program", "salla-button", "salla-loading"];
+    const components = ["salla-loyalty-program", "salla-add-product-button", "salla-badge", "salla-button", "salla-count-down", "salla-loading", "salla-loyalty-hero", "salla-loyalty-point", "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-program":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, SallaWalletTable);
+                customElements.define(tagName, SallaLoyaltyProgram$1);
+            }
+            break;
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "salla-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
             }
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$l();
+            }
+            break;
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
             }
             break;
         case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "salla-loyalty-hero":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-loyalty-point":
+            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();
             }
@@ -112,7 +275,7 @@ function defineCustomElement$1() {
 }
 defineCustomElement$1();
 
-const SallaLoyaltyProgram = SallaWalletTable;
+const SallaLoyaltyProgram = SallaLoyaltyProgram$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SallaLoyaltyProgram, defineCustomElement };

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

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

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

@@ -0,0 +1,80 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as closeModals } from './functions.js';
+import { l as loyaltyProgramIcon } from './gift.js';
+import { d as defineCustomElement$2 } from './salla-badge2.js';
+
+const sallaLoyaltyProgramCss = "";
+
+const SallaLoyaltyReward$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyReward extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.rewardModalOpen = createEvent(this, "rewardModalOpen", 7);
+        this.confirmModalOpen = createEvent(this, "confirmModalOpen", 7);
+        this.size = 'md';
+        this.isActionClickable = (prize) => {
+            switch (prize.key?.toLowerCase()) {
+                case 'free_product':
+                    return prize.is_product_available;
+                default:
+                    return true;
+            }
+        };
+        this.handleActionArea = () => {
+            this.rewardModalOpen.emit(this.prize);
+        };
+        this.handleAction = () => {
+            if (!this.isActionClickable(this.prize))
+                return;
+            if (!salla.config.isUser()) {
+                closeModals(() => salla.event.dispatch('login::open'));
+                return;
+            }
+            else {
+                this.confirmModalOpen.emit(this.prize);
+            }
+        };
+    }
+    render() {
+        return (h("div", { key: '38c63e250c45badf03516c87496619152b9a0af8', class: {
+                's-loyalty-program-reward-container': true,
+                's-loyalty-program-reward-xs': this.size === 'xs',
+            } }, h("div", { key: '93e11a5c458aa3112b00bea4bc845733d8bf4415', onClick: this.handleActionArea, role: "button" }, h("div", { key: '67f5cfe1a3551832548d95bda9c6bcc6cdd26119', class: "s-loyalty-program-reward-img" }, h("img", { key: '36f6dc13da2b7c844d2318d4e9bafeb96d960f11', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: 'c953cfeebaabdad22fba498903936e170aadcebe', class: "s-loyalty-program-reward-content" }, h("div", { key: '68f33aba783ffaef38ea9e4a3f9063b2f68bb2b1', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: 'bdac8babbf1bbabeec37e92053c4c7eab178a06f', size: "xs" }, h("span", { key: '367f3f154a6079781cece4018337b09996229001', innerHTML: loyaltyProgramIcon }), h("span", { key: 'fd8cdd6bafe8a8f5f45f7a4e6df2f074ab2b5961', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), h("div", { key: '84f6dbc80ecaa12ab9dacf48ec289bb3f5bdfc84', class: "s-loyalty-program-reward-title" }, h("span", { key: '1505f38884417eee9f266ab3ddb2f57096f6d0da' }, this.group)), h("div", { key: '82ced1df7118958153868c15c193ac03783dc383', class: "s-loyalty-program-reward-name" }, h("div", { key: 'a853fc37628c02ffe064608f6e52725d664fc259', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '584d6db1edfafc846eb8908d2762483d5e590296', class: "p-4" }, h("button", { key: 'ac0962db5b5d3121b4c6197c4c378db76a963950', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
+                's-loyalty-program-rewards-action-base': true,
+                's-loyalty-program-rewards-action-on': this.isActionClickable(this.prize),
+                's-loyalty-program-rewards-action-off': !this.isActionClickable(this.prize),
+            } }, this.isActionClickable(this.prize) ? salla.lang.get('pages.loyalty_program.redeem_reward') : salla.lang.get('pages.loyalty_program.out_of_stock')))));
+    }
+    static get style() { return sallaLoyaltyProgramCss; }
+}, [0, "salla-loyalty-reward", {
+        "size": [1],
+        "prize": [16],
+        "group": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-loyalty-reward", "salla-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-loyalty-reward":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaLoyaltyReward$1);
+            }
+            break;
+        case "salla-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaLoyaltyReward = SallaLoyaltyReward$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaLoyaltyReward, defineCustomElement };

package/dist/components/salla-maintenance-alert.js

@@ -23,7 +23,7 @@ const SallaMaintenanceAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaMain
         this.host.style.display = 'none';
     }
     render() {
-        return (h(Host, { key: '4e41b03a4ebe9b05b15f499128fbaef8a2665a1e', class: "s-maintenance-alert-wrapper" }, h("button", { key: 'c45b83d1381d7e98adca32d92531c181ae9281e4', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'c48a139c8bfc999bfce517ac689c2c5be8a8a70a', class: "s-maintenance-alert-content" }, h("div", { key: '75a52a15cc98759c7646a37e61822c7392256743', class: "s-maintenance-alert-container" }, h("div", { key: 'c2151b20d570186d3be79ea440d03e3044766544', class: "s-maintenance-alert-icon" }, h("img", { key: '9752b18e5fce36412448a941ba90b3332ac185fa', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: '23d13d46adb0d89c31aa28666a0664253cbd5d6b', class: "s-maintenance-alert-text" }, h("h2", { key: 'abdb593bfd90571dee3ee9f918640fbf508a2d69' }, this.title), h("p", { key: '6c0bd117d161add2abadfadd5f344572c2596f6f' }, this.message))), h("div", { key: '5d6c815b7fa86822665a16a588fa02da19e62ca8' }, h("a", { key: '90c6ff46c169e685cff7becae06b7e67042e9d41', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
+        return (h(Host, { key: 'e76dcd0a076d1b72ead3398196f962713e975ce5', class: "s-maintenance-alert-wrapper" }, h("button", { key: '2105bc891908dab5a1c9edec1c534a600bb35fe5', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'a01b014066fbbc08da96962ad9a0c98e24fddf1c', class: "s-maintenance-alert-content" }, h("div", { key: 'c8b6ac96a881fc40bdb65908bb309378035235ea', class: "s-maintenance-alert-container" }, h("div", { key: '5d9fb2968315674e0d3a3172f82f9109db55da1d', class: "s-maintenance-alert-icon" }, h("img", { key: '2649551a12d0958375a89cc1dcb8176b28f5e41f', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: '2b3f99a39857bcf87b034aa48074c1f4229bff95', class: "s-maintenance-alert-text" }, h("h2", { key: '5a3c0969cd45f666a8bd043d171e00bc88031f3e' }, this.title), h("p", { key: 'd3df4ada2bf5f7192b22affeeb10edec481a0038' }, this.message))), h("div", { key: '818d96f7680dc4b02fed14a2d8c09dab9b8e5d86' }, h("a", { key: '794a0c273fc4d84b0319b38e11fb43af5681ce67', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
     }
     componentDidLoad() {
         //auto-hide the alert if close button is clicked before one hour

package/dist/components/salla-map2.js

@@ -702,11 +702,11 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
     }
     // render
     render() {
-        return (h(Host, { key: '1bc7b8ea42e85fd147b4431f54fe30d8b7b308c4', class: "s-map-wrapper" }, h("salla-modal", { key: 'ab5fb7ee3a688a3bc0cc6de9d51af309f296dc94', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
+        return (h(Host, { key: '302015399be6ef260a6617b31a6065e5facf940f', class: "s-map-wrapper" }, h("salla-modal", { key: '9f6cdedaeaa81ae33e14f09bf6cae48c4d3b152b', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
                 this.locationModal = modal;
-            } }, this.getLocationModal()), h("slot", { key: '1ec5f5c09229537df5f750b9d5003e29903eefe7', name: "button" }, h("salla-button", { key: '44acc44023058727e78e84e177aa3d7f2e4a91dc', onClick: () => {
+            } }, this.getLocationModal()), h("slot", { key: '7085cb61e2e404a22381825feaabfcc36e6f20fb', name: "button" }, h("salla-button", { key: '3ebf2ec427c6d5edf501262afd096f5a82e69a13', onClick: () => {
                 this.open();
-            }, color: "primary", class: "s-map-location-button" }, h("span", { key: '6bbd144fbc2c339b809ecc78c6b2d6d10ec4b6e9', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: 'b88be6e4b7f104a6152083e23db58d20c9ec7054', class: "s-hidden", name: this.name, required: this.required, value: this.getLatLng(), ref: color => this.mapInput = color })));
+            }, color: "primary", class: "s-map-location-button" }, h("span", { key: 'aa4dfd6a1282d651a0e78631c8165c2cbdd536d2', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: 'eadd1bbe75d9ba2898bb770e7e6aa9a02e21dece', class: "s-hidden", name: this.name, required: this.required, value: this.getLatLng(), ref: color => this.mapInput = color })));
     }
     get host() { return this; }
     static get style() { return sallaMapCss; }

package/dist/components/salla-multiple-bundle-product-cart2.js

@@ -49,7 +49,7 @@ const SallaMultipleBundleProductCart = /*@__PURE__*/ proxyCustomElement(class Sa
         return (h("div", { slot: "html", class: "s-multiple-bundle-product-cart-header-wrapper" }, h("div", { class: `s-multiple-bundle-product-cart-header ${hasOptions ? '' : 's-multiple-bundle-product-cart-header-no-options'}` }, h("div", { class: "s-multiple-bundle-product-cart-header-content" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-image-wrapper" }, h("img", { src: product?.image?.url, alt: product?.image?.alt || product?.name, class: "s-multiple-bundle-product-cart-header-image" })), h("div", { class: "s-multiple-bundle-product-cart-header-content-details" }, h("h2", { class: "s-multiple-bundle-product-cart-header-content-details-title" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-content-details-title-link" }, product?.name)), h("div", { class: "s-multiple-bundle-product-cart-header-content-details-price" }, h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-regular" }, h("span", { innerHTML: product?.price ? salla.money(product?.price) : '' })), product?.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-sale" }, h("span", { innerHTML: salla.money(product?.sale_price) })))), product?.quantity_in_group > 0 && product?.quantity !== 0 && (h("p", { class: "s-multiple-bundle-product-cart-header-content-details-quantity" }, h("span", null, salla.lang.get('pages.products.number_of_pieces')), h("span", null, product?.quantity_in_group))))), !hasOptions && (h("div", { class: "s-multiple-bundle-product-cart-header-remove-button" }, this.renderRemoveButton(sectionId, product, false))))));
     }
     render() {
-        return (h(Host, { key: 'df5a1f17db16a85222a239fa507912f38749909a', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '52a0c1480c1ac65225491eea9f467a35677365f2', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, sectionIndex) => {
+        return (h(Host, { key: 'd584e8fca258d4be9c50fe6e4094aa274ff64d14', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '55a444d53317e17a7ef9a286089f85e2def128c8', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, sectionIndex) => {
             return section.products.map(product => {
                 const bundleContext = {
                     sectionId: section.id,

package/dist/components/salla-multiple-bundle-product-details2.js

@@ -180,10 +180,10 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
         }
     }
     render() {
-        return (h(Host, { key: '25ed3fad5e1252a6a22739927c209689c111ef8b', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: 'e2738635e77e740c47307130efff6c6d8d7dbb1e', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
+        return (h(Host, { key: '07ca2849aa860c68213f61ffdca521cc1c41b6f9', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: 'b810754688575d2a6418f9f2089ca65aa7981a58', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
             const selectedCount = this.selectedProducts[section.id]?.size || 0;
             return (h("salla-accordion", { key: section.id, collapsed: index === 0 ? false : true }, h("salla-accordion-head", null, this.renderAccordionHeader(section, selectedCount)), h("salla-accordion-body", null, h("salla-multiple-bundle-product-slider", { section: section, sectionIndex: index, selectedProducts: this.selectedProducts, onProductSelected: this.handleBundleSliderProductSelected, onProductOptionsSelected: this.handleBundleSliderProductOptionsSelected }))));
-        })), h("salla-multiple-bundle-product-options-modal", { key: '6359eb293af8feb486884f4d7d3182543c062430' })));
+        })), h("salla-multiple-bundle-product-options-modal", { key: '7b7373564360e33bf005a5854acd84b61cdd3b05' })));
     }
     get host() { return this; }
     static get style() { return sallaMultipleBundleProductDetailsCss; }

package/dist/components/salla-multiple-bundle-product-options-modal2.js

@@ -479,7 +479,7 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
         const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
         const resetToken = this.optionsResetTokens[cacheKey] || 0;
         const isDisabled = this.isLoading || optionsWithSelectedState.some(opt => opt.details.some(d => d.is_selected && d.is_out === true));
-        return (h(Host, { key: '2daff50a76067220f79c498bf756db36aec2996f' }, h("salla-modal", { key: '3ed6ec8860016d10cec0ee5d4bf55125fc3e44f0', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '9896b07b43cf0e8191d3c7e1ba6d0613d31f08f3', slot: "loading" }, h("salla-skeleton", { key: 'cdf032bdbaebc1e54136b5380a10f9077a781ab0', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: '5df7c6e1868f3b3ca8983ff1baa43ad3351aeca2', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
+        return (h(Host, { key: '1a9514ddc173fd5da9a31b29be3e905d11be5782' }, h("salla-modal", { key: '50efdd76cff0794bd638490c7f48cc599a49dcfc', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '9fec44912babfc95fed6ab99c5cd2e71c8bc5298', slot: "loading" }, h("salla-skeleton", { key: '84c3f41d42e81330bd32f7a3c5b44cb07fc02cac', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: '5de5fd4285de79b8406626fdb00dccd3987142fa', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
                 centeredSlides: true,
                 centeredSlidesBounds: true,
                 slidesPerView: Math.min(5, Math.max(1, this.product?.images.length)),
@@ -487,13 +487,13 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
                 watchSlidesProgress: true,
                 direction: 'vertical',
                 spaceBetween: 10,
-            } }, h("div", { key: '190198c7256c9669c25d0cd587cf5193bd75c57e', slot: "items" }, this.product?.images &&
+            } }, h("div", { key: 'd782e027554b6de6bb959940f9a841042f2a55e5', slot: "items" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, class: "swiper-slide" }, h("img", { src: image.url, alt: image.alt || `${this.product?.name} - Image ${index + 1}`, loading: "lazy", onError: e => {
                     e.target.style.display = 'none';
-                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '1c8d14ffc416800d19ac3cc87b463da2acede83e', slot: "thumbs" }, this.product?.images &&
+                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '8b47995edd34d3f5e7c7fd5a24a39c335c6634f1', slot: "thumbs" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, "data-caption": `${this.product?.name} - Image ${index + 1}` }, h("img", { src: image.url, loading: "eager", class: "s-multiple-bundle-product-options-modal-slider-thumb", title: `${this.product?.name} - ${index + 1}`, alt: image.alt || `${this.product?.name} - ${index + 1}`, onError: e => {
                     e.target.style.display = 'none';
-                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '52dd62ee4b96b11a10981cccd301ad199adfa61e', slot: "footer" }, h("div", { key: 'c846f4d9099936f41872fe99f3d0b8a789f90c01', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '40d0742d67f6ab45deace262dbd085feba3d8980', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
+                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '72847766444879b09ab86729279844c51b0cef18', slot: "footer" }, h("div", { key: '58ecac81b3d09c211bf0e74e9f74d932a31ed7c1', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: 'c7e08990104c111d6b6ab3375fb7649a94aa6191', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
             ? salla.lang.get('common.elements.saving')
             : salla.lang.get('common.elements.save')))))));
     }

package/dist/components/salla-multiple-bundle-product-slider2.js

@@ -94,7 +94,7 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
         return `bundle[${sectionId}][${productIndex}][id]`;
     }
     render() {
-        return (h(Host, { key: 'df82c8c561e6ef9718a179be2815ed01789700a0' }, h("salla-slider", { key: 'b7b96681ce045a2dad72edf9cdbda7ea1b3f3c2e', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: '9762b78a8c67586f2455632632a1e97eefcddbaf', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+        return (h(Host, { key: '3968471eedb925b4dda4d4d381344fb2ed4f97ed' }, h("salla-slider", { key: '4bbaab685b7677b79b56cd6a3d80b210b125d568', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: 'b0d1a441b2cf9ed124dec4f210e082ffd0cb200b', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
             const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
             const hasSavedOptions = this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id, productIndex)];
             const optionsButtonLabel = hasSavedOptions

package/dist/components/salla-multiple-bundle-product.js

@@ -77,7 +77,7 @@ const SallaMultipleBundleProduct$1 = /*@__PURE__*/ proxyCustomElement(class Sall
         this.parseProducts(this.bundleSections);
     }
     render() {
-        return (h(Host, { key: 'd2723aa4c40e7585adbc5e128035b03dc9920fbc', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
+        return (h(Host, { key: '0c083bcf6f932c3db65e7c9c1871843594bc8604', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
     }
     static get watchers() { return {
         "bundleSections": ["parseProducts"]

package/dist/components/salla-notification-item2.js

@@ -11,7 +11,7 @@ const SallaNotificationItem = /*@__PURE__*/ proxyCustomElement(class SallaNotifi
         this.__registerHost();
     }
     render() {
-        return h("a", { key: 'c568ebb15db1854f8f32ffa406f4751b16e67e4d', href: this.notification.url, class: { "s-notifications-item": true, "s-notifications-item-shadow": true, "s-notifications-item-read": !this.notification.is_new } }, h("span", { key: 'af8ce6607fb53b0459673aec66d4e4453fa13f94', class: "s-notifications-item-icon" }, h("i", { key: '9a55f3c72eb6bef64f58e24395bab8f787c084ed', class: { 's-notifications-item-icon sicon-bell-ring': true, 's-notifications-item-icon-new': this.notification.is_new } })), h("div", { key: '20559c46d9087d602c83f82f409c5fa43966a8de', class: "s-notifications-item-content" }, h("div", { key: '22a21adb2253a0db5d9d404ba196fe1a2094c7ff', class: "s-notifications-item-content-leading" }, h("h4", { key: '3a07031fe0e697a4c818dece184623bd13249f30' }, this.notification.title), h("p", { key: 'a481734126292bbb2b22f4a326d7a489131a0828' }, this.notification.sub_title)), h("span", { key: 'adad90fe0b72bd92363d53c8ffcc39602da00399', class: "s-notifications-item-content-trailing" }, h("i", { key: '65401a987fd64c6647f1cabc4d802f6c835f0e61', class: "sicon-time s-notifications-item-content-trailing-icon" }), h("span", { key: '1c73bdb085cb3e5c3ecaea7352d3112b9facdf38' }, this.notification.date))));
+        return h("a", { key: 'c134f5fc8901762ed8fa4a53aed5fd5ec62df689', href: this.notification.url, class: { "s-notifications-item": true, "s-notifications-item-shadow": true, "s-notifications-item-read": !this.notification.is_new } }, h("span", { key: '78fbafd1dd2998dba7e3a1ad8b34cbeb9e962cf2', class: "s-notifications-item-icon" }, h("i", { key: '61357a8087938b3ffae36387a6d8b79979704dba', class: { 's-notifications-item-icon sicon-bell-ring': true, 's-notifications-item-icon-new': this.notification.is_new } })), h("div", { key: '67c85332e868f4dbb2099524e441d64211d1ba1f', class: "s-notifications-item-content" }, h("div", { key: 'c7f79cb902edd54f171b8e3c089aa0f6795ca2a2', class: "s-notifications-item-content-leading" }, h("h4", { key: '078d34e4cc8093ded2dc3c948100337acfe0101e' }, this.notification.title), h("p", { key: '30c20f5308761bcd4011052b2fc8c6f87698a8f9' }, this.notification.sub_title)), h("span", { key: 'db1f387f53c747bccb3836cf8622f9f67af3a654', class: "s-notifications-item-content-trailing" }, h("i", { key: '2f662b2dbff1487831681586c15d17c1a2e68eaa', class: "sicon-time s-notifications-item-content-trailing-icon" }), h("span", { key: '119e37704dc78372f3340fc33df69e20b666a7c5' }, this.notification.date))));
     }
     static get style() { return sallaNotificationsCss; }
 }, [0, "salla-notification-item", {