@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-conditional-offer.js

@@ -1,4 +1,197 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as e,HTMLElement as s,h as i,Host as a}from"@stencil/core/internal/client";import{d as l}from"./salla-skeleton2.js";import{d as o}from"./salla-tooltip2.js";var n,r;!function(t){t.PERCENTAGE="percentage",t.FIXED="fixed",t.FREE_PRODUCT="free_product"}(n||(n={})),function(t){t.PRODUCT_COUNT="products_count",t.PRODUCT_PURCHASE="order_amount"}(r||(r={}));const c=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.offer=null,this.products={},this.isLoading=!1,this.canRender=!0}componentWillLoad(){salla.onReady().then((()=>{if(!salla.config.get("store.features")?.includes("conditional-offer")||""!==salla.storage.get("cart")&&!salla.storage.get("cart")?.summary?.count)throw Error("feature or cart object does not existed")})).then((()=>salla.api.cart.offers())).then((({data:t})=>{if(this.offer=t.find((t=>"conditional"===t.type)),this.offer)return this.isLoading=!0,this.offer.details.discounts.unshift({value:0,min_spend:0}),this.updateInitialOfferValue();this.canRender=!1})).then((()=>{if(this.offer)return this.getProducts()})).then((()=>{this.offer&&salla.event.on("cart::updated",(t=>this.updateOfferValues(t)))})).catch((t=>{this.canRender=!1,salla.logger.warn("salla-conditional-offer:: ",t)})).finally((()=>{this.isLoading=!1}))}getProducts(){const t=this.offer.details.discounts.filter((({type:t})=>t===n.FREE_PRODUCT)).map((({value:t})=>t)).filter(Boolean);if(t.length>0)return salla.product.fetch({source:"selected",source_value:t}).then((t=>{const e=t?.data;if(e&&Array.isArray(e)){const t={...this.products};e.forEach((({id:e,url:s,image:i,name:a,price:l})=>{e&&a&&i?.url&&s&&void 0!==l&&(t[e]={url:s,image:i,name:a,price:l})})),this.products=t}}))}updateInitialOfferValue(){return salla.api.cart.details().then((({data:{cart:t}})=>this.updateOfferValues(t)))}updateOfferValues({items:t,sub_total:e}){const s=this.offer.details.based_on===r.PRODUCT_COUNT?t?.reduce(((t,{quantity:e})=>t+e),0)??0:e;return this.offer={...this.offer,details:{...this.offer?.details,current_value:s}},this.offer}renderTooltip(t){const e=t.value,s=this.products[e];return s?i("salla-tooltip",{class:"absolute left-0 -top-2",targetId:"avatar-product-"+e,theme:"dark"},i("div",{class:"flex gap-3 text-start"},s?.image?.url&&i("img",{src:s.image.url,alt:s?.image?.alt||s.name||"",class:"w-12 h-12 object-cover rounded-lg flex-shrink-0",loading:"lazy",decoding:"async"}),i("div",{class:"flex-1"},i("div",{class:"leading-tight mb-1"},s.name),i("div",{class:"text-xs text-gray-300",innerHTML:salla.money(s.price)})))):(salla.logger.error(`salla-conditional-offer:: there is no product with id (${t.value})!`),null)}getCheckpointContent(t){if(t.type===n.PERCENTAGE)return t.value+"%";if(t.type===n.FIXED)return i("span",{innerHTML:salla.money(t.value)});if(t.type!==n.FREE_PRODUCT)return salla.logger.error(`salla-conditional-offer:: unexpected type (${t.type})!`),"";const e=this.products[t.value];return e?i("a",{class:"s-conditional-offer-product-link",href:e.url},i("img",{class:"s-conditional-offer-checkpoint-image-content",loading:"lazy",decoding:"async",alt:e?.image?.alt||"",src:e?.image?.url})):(salla.logger.error(`salla-conditional-offer:: there is no product with id (${t.value})!`),"")}getOfferType(t){const e=this.offer.details?.based_on;return e===r.PRODUCT_COUNT?salla.lang.choice("blocks.header.products_count",t.min_spend):e===r.PRODUCT_PURCHASE?salla.money(t.min_spend):(salla.logger.warn("salla-conditional-offer:: Unexpected offer detail's based_on value: "+e),""+t.min_spend)}clamp(t,e,s){return Math.max(e,Math.min(t,s))}mapValueRanges(t,e,s,i,a){const l=(t-e)*(a-i)/(s-e)+i;return l===1/0?100:l===-1/0?0:this.clamp(l,0,100)}getCheckPointView(t,e){const s=this.offer.details.discounts.findIndex((({min_spend:e})=>e===t.min_spend)),a=this.mapValueRanges(this.offer.details.current_value,this.offer.details.discounts[s-1]?.min_spend??0,t.min_spend,0,100),l=t.min_spend<=this.offer.details.current_value;return i("div",{class:"s-conditional-offer-checkpoint-container"},e>0?[i("div",{key:"progress-line",class:"s-conditional-offer-progress-line-container"},i("div",{class:"s-conditional-offer-progress-line-inactive"}),i("div",{class:"s-conditional-offer-progress-line-active",style:{width:a+"%"}})),i("div",{key:"checkpoint",class:"s-conditional-offer-checkpoint "+(l?"s-conditional-offer-active-checkpoint":"")},i("div",{class:"s-conditional-offer-item-avatar-content "+(l?"active":""),id:t.type===n.FREE_PRODUCT?"avatar-product-"+t.value:"avatar-"+(t.value??e)},this.products&&this.getCheckpointContent(t)),this.products&&t.type===n.FREE_PRODUCT&&this.renderTooltip(t),i("div",{class:"s-conditional-offer-checkpoint-label "+(l?"active":""),innerHTML:this.getOfferType(t)}))]:i("div",{key:"label",class:{"s-conditional-offer-checkpoint-label":!0,"first-checkpoint":0===e,active:l},innerHTML:this.getOfferType(t)}))}getLoadingSkeletonView(){return i(a,{class:"s-conditional-offer-container"},i("div",{class:"s-conditional-offer-skeleton-inner-container"},i("div",{class:"s-conditional-offer-skeleton-subtitle"},i("salla-skeleton",{height:"16px",width:"30%"})),i("div",{class:"s-conditional-offer-skeleton-subtitle"},i("salla-skeleton",{height:"16px",width:"35%"})),i("div",{class:"s-conditional-offer-skeleton-checkpoints-wrapper"},[,,,].fill(null).map((()=>[i("salla-skeleton",{key:"checkpoint-line",height:"8px"}),i("div",{key:"checkpoint"},i("salla-skeleton",{height:"60px",width:"60px",type:"circle"}))])))))}render(){return this.canRender?this.isLoading?this.getLoadingSkeletonView():this.offer?i(a,{class:"s-conditional-offer-container"},i("div",{class:"s-conditional-offer-title-wrapper"},i("div",{class:"s-conditional-offer-title"},this.offer.title),this.offer.description?i("div",{class:"s-conditional-offer-subtitle"},this.offer.description," ",i("i",{class:"sicon-information"})):null),i("div",{class:"s-conditional-offer-progress-container"},this.offer.details.discounts.map(((t,e)=>i("div",{class:{"flex-1":e>0},key:t.min_spend},this.getCheckPointView(t,e)))))):null:null}static get style(){return":host{display:block}"}},[0,"salla-conditional-offer",{offer:[32],products:[32],isLoading:[32],canRender:[32]}]);function d(){"undefined"!=typeof customElements&&["salla-conditional-offer","salla-skeleton","salla-tooltip"].forEach((e=>{switch(e){case"salla-conditional-offer":customElements.get(t(e))||customElements.define(t(e),c);break;case"salla-skeleton":customElements.get(t(e))||l();break;case"salla-tooltip":customElements.get(t(e))||o()}}))}d();const f=c,h=d;export{f as SallaConditionalOffer,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './salla-skeleton2.js';
+import { d as defineCustomElement$2 } from './salla-tooltip2.js';
+
+var DiscountType;
+(function (DiscountType) {
+    DiscountType["PERCENTAGE"] = "percentage";
+    DiscountType["FIXED"] = "fixed";
+    DiscountType["FREE_PRODUCT"] = "free_product";
+})(DiscountType || (DiscountType = {}));
+var OfferType;
+(function (OfferType) {
+    OfferType["PRODUCT_COUNT"] = "products_count";
+    OfferType["PRODUCT_PURCHASE"] = "order_amount";
+})(OfferType || (OfferType = {}));
+
+const sallaConditionalOfferCss = ":host{display:block}";
+
+const SallaConditionalOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaConditionalOffer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.offer = null;
+        this.products = {};
+        this.isLoading = false;
+        this.canRender = true;
+    }
+    componentWillLoad() {
+        salla.onReady().then(() => {
+            if (!salla.config.get('store.features')?.includes('conditional-offer') || (salla.storage.get("cart") !== '' && !salla.storage.get("cart")?.summary?.count)) {
+                throw new Error('feature or cart object does not existed');
+            }
+        })
+            .then(() => salla.api.cart.offers())
+            .then(({ data }) => {
+            this.offer = data.find(offer => offer.type === "conditional");
+            if (!this.offer) {
+                this.canRender = false;
+                return;
+            }
+            this.isLoading = true;
+            this.offer.details.discounts.unshift(({ value: 0, min_spend: 0 }));
+            return this.updateInitialOfferValue();
+        }).then(() => {
+            if (!this.offer)
+                return;
+            return this.getProducts();
+        }).then(() => {
+            if (!this.offer)
+                return;
+            salla.event.on("cart::updated", (updatedCart) => this.updateOfferValues(updatedCart));
+        })
+            .catch(error => {
+            this.canRender = false;
+            salla.logger.warn('salla-conditional-offer:: ', error);
+        }).finally(() => {
+            this.isLoading = false;
+        });
+    }
+    getProducts() {
+        const freeProductIDs = this.offer.details.discounts.filter(({ type }) => type === DiscountType.FREE_PRODUCT).map(({ value }) => value).filter(Boolean);
+        if (freeProductIDs.length > 0) {
+            return salla.product.fetch({ source: 'selected', source_value: freeProductIDs }).then((response) => {
+                const data = response?.data;
+                if (data && Array.isArray(data)) {
+                    const updatedProducts = { ...this.products };
+                    data.forEach(({ id, url, image, name, price }) => {
+                        if (id && name && image?.url && url && price !== undefined) {
+                            updatedProducts[id] = { url, image, name, price };
+                        }
+                    });
+                    this.products = updatedProducts;
+                }
+            });
+        }
+    }
+    updateInitialOfferValue() {
+        return salla.api.cart.details().then(({ data: { cart } }) => this.updateOfferValues(cart));
+    }
+    updateOfferValues({ items, sub_total }) {
+        const current_value = this.offer.details.based_on === OfferType.PRODUCT_COUNT ? items?.reduce((count, { quantity }) => count + quantity, 0) ?? 0 : sub_total;
+        //we need to assign the offer object a new reference to trigger re-rendering
+        this.offer = {
+            ...this.offer, details: {
+                ...this.offer?.details, current_value,
+            }
+        };
+        return this.offer;
+    }
+    renderTooltip(discount) {
+        const productId = discount.value;
+        const productItem = this.products[productId];
+        const targetId = `avatar-product-${productId}`;
+        if (!productItem) {
+            salla.logger.error(`salla-conditional-offer:: there is no product with id (${discount.value})!`);
+            return null;
+        }
+        return h("salla-tooltip", { class: 'absolute left-0 -top-2', targetId: targetId, theme: "dark" }, h("div", { class: "flex gap-3 text-start" }, productItem?.image?.url && h("img", { src: productItem.image.url, alt: productItem?.image?.alt || productItem.name || "", class: "w-12 h-12 object-cover rounded-lg flex-shrink-0", loading: "lazy", decoding: "async" }), h("div", { class: "flex-1" }, h("div", { class: "leading-tight mb-1" }, productItem.name), h("div", { class: "text-xs text-gray-300", innerHTML: salla.money(productItem.price) }))));
+    }
+    getCheckpointContent(discount) {
+        if (discount.type === DiscountType.PERCENTAGE)
+            return `${discount.value}%`;
+        if (discount.type === DiscountType.FIXED)
+            return h("span", { innerHTML: salla.money(discount.value) });
+        if (discount.type !== DiscountType.FREE_PRODUCT) {
+            salla.logger.error(`salla-conditional-offer:: unexpected type (${discount.type})!`);
+            return "";
+        }
+        const productItem = this.products[discount.value];
+        if (!productItem) {
+            salla.logger.error(`salla-conditional-offer:: there is no product with id (${discount.value})!`);
+            return "";
+        }
+        return h("a", { class: "s-conditional-offer-product-link", href: productItem.url }, h("img", { class: "s-conditional-offer-checkpoint-image-content", loading: "lazy", decoding: "async", alt: productItem?.image?.alt || "", src: productItem?.image?.url }));
+    }
+    getOfferType(discount) {
+        const basedOn = this.offer.details?.based_on;
+        if (basedOn === OfferType.PRODUCT_COUNT)
+            return salla.lang.choice("blocks.header.products_count", discount.min_spend);
+        if (basedOn === OfferType.PRODUCT_PURCHASE)
+            return salla.money(discount.min_spend);
+        salla.logger.warn(`salla-conditional-offer:: Unexpected offer detail's based_on value: ${basedOn}`);
+        return `${discount.min_spend}`;
+    }
+    clamp(value, min, max) {
+        return Math.max(min, Math.min(value, max));
+    }
+    mapValueRanges(value, initialMinRange, initialMaxRange, newMinRange, newMaxRange) {
+        const newRange = ((value - initialMinRange) * (newMaxRange - newMinRange)) / (initialMaxRange - initialMinRange) + newMinRange;
+        if (newRange === Number.POSITIVE_INFINITY)
+            return 100;
+        if (newRange === Number.NEGATIVE_INFINITY)
+            return 0;
+        return this.clamp(newRange, 0, 100);
+    }
+    getCheckPointView(discount, index) {
+        const checkpointIndex = this.offer.details.discounts.findIndex(({ min_spend }) => min_spend === discount.min_spend);
+        const previousCheckpointValue = this.offer.details.discounts[checkpointIndex - 1]?.min_spend ?? 0;
+        const progressPercentage = this.mapValueRanges(this.offer.details.current_value, previousCheckpointValue, discount.min_spend, 0, 100);
+        const isActive = discount.min_spend <= this.offer.details.current_value;
+        return (h("div", { class: "s-conditional-offer-checkpoint-container" }, index > 0 ? [
+            h("div", { key: "progress-line", class: "s-conditional-offer-progress-line-container" }, h("div", { class: "s-conditional-offer-progress-line-inactive" }), h("div", { class: "s-conditional-offer-progress-line-active", style: { width: `${progressPercentage}%` } })),
+            h("div", { key: "checkpoint", class: `s-conditional-offer-checkpoint ${isActive ? "s-conditional-offer-active-checkpoint" : ""}` }, h("div", { class: `s-conditional-offer-item-avatar-content ${isActive ? "active" : ""}`, id: discount.type === DiscountType.FREE_PRODUCT ? `avatar-product-${discount.value}` : `avatar-${discount.value ?? index}` }, this.products && this.getCheckpointContent(discount)), this.products && discount.type === DiscountType.FREE_PRODUCT && this.renderTooltip(discount), h("div", { class: `s-conditional-offer-checkpoint-label ${isActive ? "active" : ""}`, innerHTML: this.getOfferType(discount) }))
+        ] :
+            h("div", { key: "label", class: { "s-conditional-offer-checkpoint-label": true, "first-checkpoint": index === 0, active: isActive }, innerHTML: this.getOfferType(discount) })));
+    }
+    getLoadingSkeletonView() {
+        return h(Host, { class: "s-conditional-offer-container" }, h("div", { class: "s-conditional-offer-skeleton-inner-container" }, h("div", { class: "s-conditional-offer-skeleton-subtitle" }, h("salla-skeleton", { height: "16px", width: "30%" })), h("div", { class: "s-conditional-offer-skeleton-subtitle" }, h("salla-skeleton", { height: "16px", width: "35%" })), h("div", { class: "s-conditional-offer-skeleton-checkpoints-wrapper" }, Array(3).fill(null).map(() => ([h("salla-skeleton", { key: "checkpoint-line", height: "8px" }), h("div", { key: "checkpoint" }, h("salla-skeleton", { height: "60px", width: "60px", type: "circle" }))])))));
+    }
+    render() {
+        if (!this.canRender)
+            return null;
+        if (this.isLoading)
+            return this.getLoadingSkeletonView();
+        if (!this.offer)
+            return null;
+        return h(Host, { class: "s-conditional-offer-container" }, h("div", { class: "s-conditional-offer-title-wrapper" }, h("div", { class: "s-conditional-offer-title" }, this.offer.title), this.offer.description ? h("div", { class: "s-conditional-offer-subtitle" }, this.offer.description, " ", h("i", { class: "sicon-information" })) : null), h("div", { class: "s-conditional-offer-progress-container" }, this.offer.details.discounts.map((discount, index) => (h("div", { class: { "flex-1": index > 0 }, key: discount.min_spend }, this.getCheckPointView(discount, index))))));
+    }
+    static get style() { return sallaConditionalOfferCss; }
+}, [0, "salla-conditional-offer", {
+        "offer": [32],
+        "products": [32],
+        "isLoading": [32],
+        "canRender": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-conditional-offer", "salla-skeleton", "salla-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-conditional-offer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaConditionalOffer$1);
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaConditionalOffer = SallaConditionalOffer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaConditionalOffer, defineCustomElement };

package/dist/components/salla-contacts.js

@@ -1,4 +1,128 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as e,h as c,Host as n}from"@stencil/core/internal/client";import{W as a}from"./whatsapp2.js";import{M as i}from"./mail.js";const o=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.contacts=salla.config.get("store.contacts"),this.iconsList={mobile:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>iphone</title>\n<path d="M15.053 27.613c0.133 0.12 0.28 0.213 0.44 0.28s0.333 0.107 0.507 0.107c0.36 0 0.693-0.135 0.947-0.387 0.12-0.135 0.213-0.28 0.28-0.44 0.080-0.16 0.107-0.333 0.107-0.507 0-0.347-0.147-0.695-0.387-0.947-0.507-0.493-1.387-0.493-1.893 0-0.12 0.12-0.213 0.267-0.28 0.44-0.067 0.16-0.107 0.333-0.107 0.507s0.040 0.347 0.107 0.507 0.16 0.305 0.28 0.44zM24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.599 1.333-1.333 1.333h-16c-0.735 0-1.333-0.597-1.333-1.333v-4h18.667zM25.333 21.333h-18.667v-17.333c0-0.735 0.599-1.333 1.333-1.333h16c0.735 0 1.333 0.599 1.333 1.333z"></path>\n</svg>\n',whatsapp:a,phone:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>phone</title>\n<path d="M30.823 21.713l-3.883-3.883c-1.569-1.568-4.12-1.568-5.689 0l-2.568 2.568c-3.063-1.499-5.583-4.019-7.081-7.083l2.568-2.567c0.759-0.76 1.177-1.771 1.177-2.845s-0.419-2.084-1.179-2.844l-3.881-3.881c-1.52-1.521-4.171-1.521-5.689 0l-1.845 1.847c-2.22 2.219-3.183 5.407-2.573 8.527 1.98 10.144 10.125 18.292 20.269 20.271 0.616 0.121 1.236 0.18 1.849 0.18 2.492 0 4.896-0.972 6.677-2.752l1.847-1.847c1.568-1.571 1.568-4.121 0.001-5.691zM28.936 25.517l-1.845 1.847c-1.592 1.592-3.883 2.283-6.132 1.841-9.089-1.776-16.388-9.075-18.163-18.165-0.439-2.247 0.249-4.539 1.841-6.129l1.847-1.847c0.256-0.257 0.596-0.397 0.959-0.397s0.703 0.14 0.959 0.397l3.883 3.883c0.256 0.256 0.397 0.596 0.397 0.959s-0.141 0.703-0.397 0.96l-3.22 3.217c-0.383 0.384-0.496 0.959-0.287 1.457 1.813 4.339 5.343 7.868 9.683 9.684 0.497 0.207 1.073 0.095 1.457-0.288l3.22-3.22c0.529-0.529 1.389-0.528 1.917 0l3.881 3.883c0.528 0.529 0.528 1.389 0 1.919z"></path>\n</svg>\n',telegram:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>paper-plane-o</title>\n<path d="M31.5 0.482c0.375 0.268 0.554 0.696 0.482 1.143l-4.571 27.429c-0.054 0.339-0.268 0.625-0.571 0.804-0.161 0.089-0.357 0.143-0.554 0.143-0.143 0-0.286-0.036-0.429-0.089l-9.411-3.839-5.321 5.839c-0.214 0.25-0.518 0.375-0.839 0.375-0.143 0-0.286-0.018-0.411-0.071-0.446-0.179-0.732-0.607-0.732-1.071v-8.071l-8.429-3.446c-0.411-0.161-0.679-0.536-0.714-0.982-0.036-0.429 0.196-0.839 0.571-1.054l29.714-17.143c0.375-0.232 0.857-0.214 1.214 0.036zM25.393 27.25l3.946-23.625-25.607 14.768 6 2.446 15.411-11.411-8.536 14.232z"></path>\n</svg>\n',email:i},this.contactSlot=this.host.querySelector('[slot="contact"]')?.innerHTML||`<a href={link} class="s-contacts-item"><span class="s-contacts-icon">{icon}</span>${!this.iconsOnly&&"<span class='unicode'>{value}</span>"}</a>`,salla.onReady((()=>{this.contacts=salla.config.get("store.contacts")})),salla.lang.onLoaded((()=>{this.contactsTitle=this.contactsTitle||salla.lang.get("blocks.footer.social")}))}getContactsArray(){return Object.entries(this.contacts).filter((([t,s])=>""!==s)).map((([t,s])=>({type:t,value:s})))}getContactLink(t){const s=this.contacts[t];switch(t){case"phone":case"mobile":return"tel:"+s;case"whatsapp":const t=(""+(s||"")).replace(/[^\d]/g,"");return t?"https://wa.me/"+t:salla.url.get("whatsapp/send");case"email":return"mailto:"+s;case"telegram":return s.startsWith("https://t.me/")?s:"https://t.me/"+s;default:return s}}getContactIcon(t){return this.iconsList[t]}componentWillLoad(){return new Promise((t=>salla.onReady(t)))}render(){const t=this.getContactsArray();if(t&&0!=t.length)return this.isHeader?c(n,{class:"s-contacts s-contacts-header"},t.filter((t=>"phone"==t.type||"email"==t.type)).map(((t,s)=>c("a",{href:this.getContactLink(t.type),key:s,class:"s-contacts-topnav-link"},"email"===t.type?t.value:[c("span",null,this.contactsTitle,": "),c("a",{class:"unicode",href:this.iconsList[t.type]},t.value)])))):c(n,{class:"s-contacts"},!this.hideTitle&&c("h3",{class:"s-contacts-title"},this.contactsTitle),c("div",{class:{"s-contacts-list":!0,"s-contacts-list-horizontal":this.horizontal,"s-contacts-list-vertical":!this.horizontal,"s-contacts-list-icons-only":this.iconsOnly}},t.map(((t,s)=>c("div",{key:s,id:"contact-slot",innerHTML:this.contactSlot.replace(/\{icon\}/g,this.getContactIcon(t.type)).replace(/\{value\}/g,""+t.value).replace(/\{link\}/g,this.getContactLink(t.type))})))))}componentDidRender(){this.host.querySelector('[slot="contact"]')?.remove()}get host(){return this}static get style(){return".unicode{unicode-bidi:plaintext}"}},[0,"salla-contacts",{contactsTitle:[1025,"contacts-title"],hideTitle:[4,"hide-title"],isHeader:[4,"is-header"],horizontal:[4],iconsOnly:[4,"icons-only"],contacts:[32],iconsList:[32]}]);function l(){"undefined"!=typeof customElements&&["salla-contacts"].forEach((s=>{"salla-contacts"===s&&(customElements.get(t(s))||customElements.define(t(s),o))}))}l();const h=o,r=l;export{h as SallaContacts,r as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { W as WhatsappIcon } from './whatsapp2.js';
+import { M as MailIcon } from './mail.js';
+
+var mobile = `<!-- 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>iphone</title>
+<path d="M15.053 27.613c0.133 0.12 0.28 0.213 0.44 0.28s0.333 0.107 0.507 0.107c0.36 0 0.693-0.135 0.947-0.387 0.12-0.135 0.213-0.28 0.28-0.44 0.080-0.16 0.107-0.333 0.107-0.507 0-0.347-0.147-0.695-0.387-0.947-0.507-0.493-1.387-0.493-1.893 0-0.12 0.12-0.213 0.267-0.28 0.44-0.067 0.16-0.107 0.333-0.107 0.507s0.040 0.347 0.107 0.507 0.16 0.305 0.28 0.44zM24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.599 1.333-1.333 1.333h-16c-0.735 0-1.333-0.597-1.333-1.333v-4h18.667zM25.333 21.333h-18.667v-17.333c0-0.735 0.599-1.333 1.333-1.333h16c0.735 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+var phone = `<!-- 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>phone</title>
+<path d="M30.823 21.713l-3.883-3.883c-1.569-1.568-4.12-1.568-5.689 0l-2.568 2.568c-3.063-1.499-5.583-4.019-7.081-7.083l2.568-2.567c0.759-0.76 1.177-1.771 1.177-2.845s-0.419-2.084-1.179-2.844l-3.881-3.881c-1.52-1.521-4.171-1.521-5.689 0l-1.845 1.847c-2.22 2.219-3.183 5.407-2.573 8.527 1.98 10.144 10.125 18.292 20.269 20.271 0.616 0.121 1.236 0.18 1.849 0.18 2.492 0 4.896-0.972 6.677-2.752l1.847-1.847c1.568-1.571 1.568-4.121 0.001-5.691zM28.936 25.517l-1.845 1.847c-1.592 1.592-3.883 2.283-6.132 1.841-9.089-1.776-16.388-9.075-18.163-18.165-0.439-2.247 0.249-4.539 1.841-6.129l1.847-1.847c0.256-0.257 0.596-0.397 0.959-0.397s0.703 0.14 0.959 0.397l3.883 3.883c0.256 0.256 0.397 0.596 0.397 0.959s-0.141 0.703-0.397 0.96l-3.22 3.217c-0.383 0.384-0.496 0.959-0.287 1.457 1.813 4.339 5.343 7.868 9.683 9.684 0.497 0.207 1.073 0.095 1.457-0.288l3.22-3.22c0.529-0.529 1.389-0.528 1.917 0l3.881 3.883c0.528 0.529 0.528 1.389 0 1.919z"></path>
+</svg>
+`;
+
+var telegram = `<!-- 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>paper-plane-o</title>
+<path d="M31.5 0.482c0.375 0.268 0.554 0.696 0.482 1.143l-4.571 27.429c-0.054 0.339-0.268 0.625-0.571 0.804-0.161 0.089-0.357 0.143-0.554 0.143-0.143 0-0.286-0.036-0.429-0.089l-9.411-3.839-5.321 5.839c-0.214 0.25-0.518 0.375-0.839 0.375-0.143 0-0.286-0.018-0.411-0.071-0.446-0.179-0.732-0.607-0.732-1.071v-8.071l-8.429-3.446c-0.411-0.161-0.679-0.536-0.714-0.982-0.036-0.429 0.196-0.839 0.571-1.054l29.714-17.143c0.375-0.232 0.857-0.214 1.214 0.036zM25.393 27.25l3.946-23.625-25.607 14.768 6 2.446 15.411-11.411-8.536 14.232z"></path>
+</svg>
+`;
+
+const sallaContactsCss = ".unicode{unicode-bidi:plaintext}";
+
+const SallaContacts$1 = /*@__PURE__*/ proxyCustomElement(class SallaContacts extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.contacts = salla.config.get('store.contacts');
+        this.iconsList = { mobile, whatsapp: WhatsappIcon, phone, telegram, email: MailIcon };
+        this.contactSlot = this.host.querySelector('[slot="contact"]')?.innerHTML || `<a href={link} class="s-contacts-item"><span class="s-contacts-icon">{icon}</span>${!this.iconsOnly && "<span class='unicode'>{value}</span>"}</a>`;
+        salla.onReady(() => {
+            this.contacts = salla.config.get('store.contacts');
+        });
+        salla.lang.onLoaded(() => {
+            this.contactsTitle = this.contactsTitle || salla.lang.get('blocks.footer.social');
+        });
+    }
+    getContactsArray() {
+        return Object.entries(this.contacts)
+            .filter(([_key, value]) => value !== '')
+            .map(([type, value]) => ({ type, value }));
+    }
+    getContactLink(type) {
+        const contactValue = this.contacts[type];
+        switch (type) {
+            case 'phone':
+            case 'mobile':
+                return `tel:${contactValue}`;
+            case 'whatsapp':
+                const whatsAppNumber = (contactValue || '').toString().replace(/[^\d]/g, '');
+                return whatsAppNumber ? `https://wa.me/${whatsAppNumber}` : salla.url.get('whatsapp/send');
+            case 'email':
+                return `mailto:${contactValue}`;
+            case 'telegram':
+                // Check if the contact is already a full URL
+                return contactValue.startsWith('https://t.me/') ? contactValue : `https://t.me/${contactValue}`;
+            default:
+                return contactValue;
+        }
+    }
+    getContactIcon(type) {
+        return this.iconsList[type];
+    }
+    componentWillLoad() {
+        return new Promise(resolve => salla.onReady(resolve));
+    }
+    render() {
+        const contactsArray = this.getContactsArray();
+        if (!contactsArray || contactsArray.length == 0) {
+            return;
+        }
+        if (this.isHeader) {
+            return (h(Host, { class: "s-contacts s-contacts-header" }, contactsArray.filter((contact) => contact.type == 'phone' || contact.type == 'email').map((contact, index) => (h("a", { href: this.getContactLink(contact.type), key: index, class: "s-contacts-topnav-link" }, contact.type === 'email' ? (contact.value) : ([
+                h("span", null, this.contactsTitle, ": "),
+                h("a", { class: "unicode", href: this.iconsList[contact.type] }, contact.value)
+            ]))))));
+        }
+        return (h(Host, { class: "s-contacts" }, !this.hideTitle && h("h3", { class: "s-contacts-title" }, this.contactsTitle), h("div", { class: {
+                's-contacts-list': true,
+                's-contacts-list-horizontal': this.horizontal,
+                's-contacts-list-vertical': !this.horizontal,
+                's-contacts-list-icons-only': this.iconsOnly
+            } }, contactsArray.map((contact, index) => (h("div", { key: index, id: "contact-slot", innerHTML: this.contactSlot
+                .replace(/\{icon\}/g, this.getContactIcon(contact.type))
+                .replace(/\{value\}/g, contact.value.toString())
+                .replace(/\{link\}/g, this.getContactLink(contact.type)) }))))));
+    }
+    componentDidRender() {
+        // this.host.querySelectorAll('#contact-slot').forEach(el => el.replaceWith(el.firstChild));
+        this.host.querySelector('[slot="contact"]')?.remove();
+    }
+    get host() { return this; }
+    static get style() { return sallaContactsCss; }
+}, [0, "salla-contacts", {
+        "contactsTitle": [1025, "contacts-title"],
+        "hideTitle": [4, "hide-title"],
+        "isHeader": [4, "is-header"],
+        "horizontal": [4],
+        "iconsOnly": [4, "icons-only"],
+        "contacts": [32],
+        "iconsList": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-contacts"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-contacts":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaContacts$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaContacts = SallaContacts$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaContacts, defineCustomElement };

package/dist/components/salla-cookies-bar.js

@@ -1,4 +1,110 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as a,Host as l}from"@stencil/core/internal/client";import{d as i}from"./salla-button2.js";const o=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.isVisible=!0,this.isMobile=!1,this.mobileBreakpoint=768,this.mobileQueryHandler=s=>this.isMobile=s.matches}async componentWillLoad(){await Salla.onReady(),await Salla.lang.onLoaded(),this.loadTranslations(),Salla.storage.get("cookies-consent")&&(this.isVisible=!1)}loadTranslations(){this.messageLabel=Salla.lang.get("common.cookies.message"),this.linkLabel=Salla.lang.get("common.cookies.link"),this.acceptLabel=Salla.lang.get("common.cookies.accept"),this.rejectLabel=Salla.lang.get("common.cookies.reject")}componentDidLoad(){this.mobileQuery=window.matchMedia(`(max-width: ${this.mobileBreakpoint-1}px)`),this.isMobile=this.mobileQuery.matches,this.mobileQuery.addEventListener("change",this.mobileQueryHandler)}disconnectedCallback(){this.mobileQuery?.removeEventListener("change",this.mobileQueryHandler)}async accept(){return this.isVisible=!1,Salla.event.emit("salla-cookies-bar::accepted"),Salla.storage.set("cookies-consent","accepted"),this.host}async reject(){return this.isVisible=!1,Salla.event.emit("salla-cookies-bar::rejected"),Salla.storage.set("cookies-consent","rejected"),this.host}isRtl(){return Salla.config.get("theme.is_rtl",!0)}render(){return this.isVisible?a(l,null,a("div",{dir:this.isRtl()?"rtl":"ltr",class:"s-cookies-bar fixed bottom-0 inset-x-0 z-50 bg-white p-4"},a("div",{class:"s-cookies-bar-content flex flex-col justify-center gap-6 max-w-screen-xl mx-auto px-4"},a("p",{class:"s-cookies-bar-message text-sm font-medium leading-relaxed text-gray-500 m-0"},this.messageLabel,Salla.config.get("policy_url")&&a("a",{href:Salla.config.get("policy_url"),target:"_blank",class:"s-cookies-bar-link text-primary ms-1"},this.linkLabel)),a("div",{class:"s-cookies-bar-actions flex flex-row gap-2 shrink-0"},a("salla-button",{class:"s-cookies-bar-btn--accept",color:"primary",fill:"solid",type:"button",size:this.isMobile?"small":"medium",onClick:()=>this.accept()},this.acceptLabel),a("salla-button",{class:"s-cookies-bar-btn--reject",fill:"outline",type:"button",size:this.isMobile?"small":"medium",onClick:()=>this.reject()},this.rejectLabel))))):a(l,null)}get host(){return this}static get style(){return":host{display:block;overflow:visible}.s-cookies-bar{box-shadow:0 0 20px 4px rgba(0, 0, 0, 0.15)}"}},[0,"salla-cookies-bar",{isVisible:[32],isMobile:[32],messageLabel:[32],linkLabel:[32],acceptLabel:[32],rejectLabel:[32],accept:[64],reject:[64]}]);function c(){"undefined"!=typeof customElements&&["salla-cookies-bar","salla-button"].forEach((t=>{switch(t){case"salla-cookies-bar":customElements.get(s(t))||customElements.define(s(t),o);break;case"salla-button":customElements.get(s(t))||i()}}))}c();const n=o,r=c;export{n as SallaCookiesBar,r as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './salla-button2.js';
+
+const sallaCookiesBarCss = ":host{display:block;overflow:visible}.s-cookies-bar{box-shadow:0 0 20px 4px rgba(0, 0, 0, 0.15)}";
+
+const SallaCookiesBar$1 = /*@__PURE__*/ proxyCustomElement(class SallaCookiesBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Whether the cookies bar is visible.
+         */
+        this.isVisible = true;
+        /**
+         * Whether the viewport is mobile width (updates on resize).
+         */
+        this.isMobile = false;
+        this.mobileBreakpoint = 768;
+        this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
+    }
+    async componentWillLoad() {
+        await Salla.onReady();
+        await Salla.lang.onLoaded();
+        this.loadTranslations();
+        if (Salla.storage.get('cookies-consent')) {
+            this.isVisible = false;
+        }
+    }
+    loadTranslations() {
+        this.messageLabel = Salla.lang.get('common.cookies.message');
+        this.linkLabel = Salla.lang.get('common.cookies.link');
+        this.acceptLabel = Salla.lang.get('common.cookies.accept');
+        this.rejectLabel = Salla.lang.get('common.cookies.reject');
+    }
+    componentDidLoad() {
+        this.mobileQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
+        this.isMobile = this.mobileQuery.matches;
+        this.mobileQuery.addEventListener('change', this.mobileQueryHandler);
+    }
+    disconnectedCallback() {
+        this.mobileQuery?.removeEventListener('change', this.mobileQueryHandler);
+    }
+    /**
+     * Accept cookies consent.
+     */
+    async accept() {
+        this.isVisible = false;
+        //We will call event first because we need to compare between old and new data inside session
+        Salla.event.emit('salla-cookies-bar::accepted');
+        Salla.storage.set('cookies-consent', 'accepted');
+        return this.host;
+    }
+    /**
+     * Reject cookies consent.
+     */
+    async reject() {
+        this.isVisible = false;
+        //We will call event first because we need to compare between old and new data inside session
+        Salla.event.emit('salla-cookies-bar::rejected');
+        Salla.storage.set('cookies-consent', 'rejected');
+        return this.host;
+    }
+    isRtl() {
+        return Salla.config.get('theme.is_rtl', true);
+    }
+    render() {
+        if (!this.isVisible) {
+            return h(Host, null);
+        }
+        return (h(Host, null, h("div", { dir: this.isRtl() ? 'rtl' : 'ltr', class: "s-cookies-bar fixed bottom-0 inset-x-0 z-50 bg-white p-4" }, h("div", { class: "s-cookies-bar-content flex flex-col justify-center gap-6 max-w-screen-xl mx-auto px-4" }, h("p", { class: "s-cookies-bar-message text-sm font-medium leading-relaxed text-gray-500 m-0" }, this.messageLabel, Salla.config.get('policy_url') && (h("a", { href: Salla.config.get('policy_url'), target: "_blank", class: "s-cookies-bar-link text-primary ms-1" }, this.linkLabel))), h("div", { class: "s-cookies-bar-actions flex flex-row gap-2 shrink-0" }, h("salla-button", { class: "s-cookies-bar-btn--accept", color: "primary", fill: "solid", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.accept() }, this.acceptLabel), h("salla-button", { class: "s-cookies-bar-btn--reject", fill: "outline", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.reject() }, this.rejectLabel))))));
+    }
+    get host() { return this; }
+    static get style() { return sallaCookiesBarCss; }
+}, [0, "salla-cookies-bar", {
+        "isVisible": [32],
+        "isMobile": [32],
+        "messageLabel": [32],
+        "linkLabel": [32],
+        "acceptLabel": [32],
+        "rejectLabel": [32],
+        "accept": [64],
+        "reject": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-cookies-bar", "salla-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-cookies-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCookiesBar$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaCookiesBar = SallaCookiesBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCookiesBar, defineCustomElement };

package/dist/components/salla-count-down.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as o,d as s}from"./salla-count-down2.js";const a=o,t=s;export{a as SallaCountDown,t as defineCustomElement}
+import { S as SallaCountDown$1, d as defineCustomElement$1 } from './salla-count-down2.js';
+
+const SallaCountDown = SallaCountDown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCountDown, defineCustomElement };