@salla.sa/twilight-components 2.14.393 → 2.14.395

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

@@ -1,4 +1,217 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as s,h as a,Host as l}from"@stencil/core/internal/client";import{P as o}from"./cart.js";import{I as i}from"./image.js";import{d as n}from"./salla-button2.js";import{d as m}from"./salla-drawer2.js";import{d as c}from"./salla-loading2.js";const r=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.storeId=salla.config.get("store.id"),this.template=salla.config.get("store.template"),this.loading=!1,this.templateData={},this.defaultMessage=salla.lang.getWithDefault("common.elements.store_is_available_for_purchase","هذا المتجر تطويري ومتاح للشراء من"),this.defaultActionLabel=salla.lang.get("common.elements.know_more"),this.storeFeatures=salla.lang.get("common.elements.store_features"),this.storeDetails=salla.lang.get("common.elements.store_details"),this.storePrice=salla.lang.getWithDefault("common.elements.store_price","سعر المتجر"),this.storePriceDetails=salla.lang.getWithDefault("common.elements.store_price_details","السعر يشمل"),this.theDeveloper=salla.lang.get("common.elements.the_developer"),this.templateInformation=salla.lang.get("common.elements.template_information"),this.buyTheTemplate=salla.lang.get("common.elements.buy_the_template"),this.isRtl=salla.config.get("theme.is_rtl",!0),this.storeName=salla.config.get("store.name"),this.salla=salla.lang.getWithDefault("common.elements.salla","سلة"),this.readyStores=salla.lang.getWithDefault("common.elements.ready_stores","المتاجر الجاهزة"),this.moreDetailsLabel=salla.lang.getWithDefault("common.elements.more_details","تفاصيل أكثر"),this.type="popup",salla.lang.onLoaded((()=>{this.defaultMessage=salla.lang.get("common.elements.experimental_and_available_store"),this.defaultActionLabel=salla.lang.get("common.elements.know_more"),this.storeFeatures=salla.lang.get("common.elements.store_features"),this.storeDetails=salla.lang.get("common.elements.store_details"),this.templateInformation=salla.lang.get("common.elements.template_information"),this.buyTheTemplate=salla.lang.get("common.elements.buy_the_template"),salla.helpers.setNested(salla.lang.messages["ar.trans"],"common.elements.more_details","تفاصيل أكثر"),salla.helpers.setNested(salla.lang.messages["en.trans"],"common.elements.more_details","More Details"),salla.helpers.setNested(salla.lang.messages["ar.trans"],"common.elements.store_price","سعر المتجر"),salla.helpers.setNested(salla.lang.messages["en.trans"],"common.elements.store_price","Store Price"),salla.helpers.setNested(salla.lang.messages["ar.trans"],"common.elements.the_developer","المطور"),salla.helpers.setNested(salla.lang.messages["en.trans"],"common.elements.the_developer","the developer"),salla.helpers.setNested(salla.lang.messages["ar.trans"],"common.elements.store_price_details","السعر يشمل"),salla.helpers.setNested(salla.lang.messages["en.trans"],"common.elements.store_price_details","Price Includes"),salla.helpers.setNested(salla.lang.messages["ar.trans"],"common.elements.salla","سلة"),salla.helpers.setNested(salla.lang.messages["en.trans"],"common.elements.salla","Salla"),salla.helpers.setNested(salla.lang.messages["ar.trans"],"common.elements.store_is_available_for_purchase","هذا المتجر تطويري ومتاح للشراء من"),salla.helpers.setNested(salla.lang.messages["en.trans"],"common.elements.store_is_available_for_purchase","This ready store is available for purchase from"),salla.helpers.setNested(salla.lang.messages["ar.trans"],"common.elements.ready_stores","المتاجر الجاهزة"),salla.helpers.setNested(salla.lang.messages["en.trans"],"common.elements.ready_stores","Ready Stores"),setTimeout((()=>{this.storePrice=salla.lang.get("common.elements.store_price"),this.theDeveloper=salla.lang.get("common.elements.the_developer"),this.storePriceDetails=salla.lang.getWithDefault("common.elements.store_price_details","السعر يشمل"),this.salla=salla.lang.getWithDefault("common.elements.salla","سلة"),this.defaultMessage=salla.lang.getWithDefault("common.elements.store_is_available_for_purchase","هذا المتجر تطويري ومتاح للشراء من"),this.readyStores=salla.lang.getWithDefault("common.elements.ready_stores","المتاجر الجاهزة"),this.moreDetailsLabel=salla.lang.getWithDefault("common.elements.more_details","More Details")}),100)}))}componentDidLoad(){this.template&&"object"==typeof this.template&&Object.keys(this.template).length>0&&this.fetchTemplateData()}open(){return this.drawer.open()}fetchTemplateData(){if(!Object.keys(this.templateData).length)return this.loading=!0,salla.api.request("/store/template",{},"get",{"Store-Identifier":this.storeId}).then((e=>{this.templateData=e.data,this.loading=!1})).catch((()=>{this.loading=!1}))}handleAction(){"link"===this.type&&(window.location.href=this.actionUrl),"popup"===this.type&&this.open()}popup(){return a("salla-drawer",{class:"s-bottom-alert-modal",ref:e=>this.drawer=e,"no-padding":!0,onLoad:()=>{this.drawer&&Object.keys(this.templateData).length&&this.drawer.setTitle(this.storeDetails+" "+this.storeName)}},Object.keys(this.templateData).length?[a("div",{class:"s-bottom-alert-modal-inner s-scrollbar"},a("div",{class:{"s-bottom-alert-modal-content":!0}},this.templateData?.features?[a("div",{class:"s-bottom-alert-modal-content-title"},a("i",{innerHTML:i,class:"s-bottom-alert-modal-content-icon"}),a("span",null,this.storeFeatures)),a("div",{class:"s-bottom-alert-modal-content-features",innerHTML:this.templateData?.features})]:""),a("div",{class:{"s-bottom-alert-modal-content":!0,"s-bottom-alert-modal-content-extra-padding":this.templateData?.price}},this.templateData?.features?[a("div",{class:"s-bottom-alert-modal-content-title"},a("i",{innerHTML:'\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>money-card</title>\n<path d="M17.333 14.667h-2.667c-0.736 0-1.333-0.599-1.333-1.333s0.597-1.333 1.333-1.333h4c0.737 0 1.333-0.597 1.333-1.333s-0.596-1.333-1.333-1.333h-1.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333c-2.205 0-4 1.795-4 4s1.795 4 4 4h2.667c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-4c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h1.333v1.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-1.333c2.205 0 4-1.795 4-4s-1.795-4-4-4zM28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.736-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333v-18.667c0-0.735 0.597-1.333 1.333-1.333h24c0.736 0 1.333 0.599 1.333 1.333z"></path>\n</svg>\n',class:"s-bottom-alert-modal-content-icon"}),a("span",null,this.storePriceDetails)),a("div",{class:"s-bottom-alert-modal-content-price-details"},this.templateData?.price_details?.items.map((e=>a("div",{class:"s-bottom-alert-modal-content-price-details-item"},a("i",{innerHTML:'\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>check-circle</title>\n<path d="M19.557 11.26l-4.593 6.891-2.891-1.927c-0.616-0.411-1.441-0.243-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l4 2.667c0.228 0.152 0.485 0.224 0.739 0.224 0.431 0 0.855-0.208 1.111-0.593l5.333-8c0.409-0.612 0.244-1.441-0.369-1.849-0.616-0.411-1.443-0.243-1.849 0.369zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>\n</svg>\n',class:"s-bottom-alert-modal-content-price-details-item-icon"}),a("span",{class:"s-bottom-alert-modal-content-price-details-item-name"},e.name),a("span",{class:"s-bottom-alert-modal-content-price-details-item-price",innerHTML:salla.money(e.price)})))))]:""),this.templateData?.link?a("div",{class:"s-bottom-alert-modal-content-footer"},a("salla-button",{color:"primary",size:"medium",width:"wide",href:this.templateData?.link},a("i",{innerHTML:o}),this.buyTheTemplate)):"")]:"")}render(){const e=this.template&&"object"==typeof this.template&&Object.keys(this.template).length>0;return a(l,{key:"e5f273d72875760e30d99d419b247137583bc450",class:"s-bottom-alert-wrapper "+(e?"s-bottom-alert-wrapper-with-template":"")},e&&a("div",{key:"1db37d7c67aae449f41a9a3ed83489b2a0653cef",class:"s-bottom-alert-logo-section"},a("img",{key:"18701cd3d807042b4d852f283d43a6855282f791",src:"https://cdn.salla.network/images/logo/logo-light.svg",alt:"Salla",class:"s-bottom-alert-logo"}),a("span",{key:"66bb3f9b3c00aee5c2694d5ddb142e753ae7fa1a",class:"s-bottom-alert-logo-text"},this.readyStores)),a("div",{key:"01d47c9ec38370b83bdb3fdc29291f55e1b3aa42",class:"s-bottom-alert-content"},a("div",{key:"5380873bf9d393c0fa18da196e1bfb675a8c9c9b",class:"flex items-center gap-2"},a("div",{key:"882382de35a7c9a767e2eb90305c8a973d01ac21",class:"s-bottom-alert-icon"},a("i",this.icon?{class:this.icon}:{innerHTML:'\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>info</title>\n<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>\n</svg>\n'})),a("div",{key:"dfbaa427fd4e8b755a479e0b5459422e44a95f59",class:"s-bottom-alert-message"},this.message?this.message:e?a("span",{class:"flex flex-wrap items-center gap-1"},this.defaultMessage,a("span",{class:{"s-bottom-alert-message-highlight":!0},"aria-label":"Developer"},this.salla),a("span",{innerHTML:salla.money(this.template.price)})):this.defaultMessage)),"banner"!==this.type&&a("div",{key:"327ef4b5ecdab7d994418c033a78c2531eb28de5",class:e?"s-bottom-alert-actions-group":"s-bottom-alert-action"},e?this.loading?a("salla-loading",{size:"20"}):a("div",{class:"s-bottom-alert-actions-group-container"},a("a",{class:"s-bottom-alert-action-link",onClick:()=>this.handleAction()},this.actionLabel||this.moreDetailsLabel),this.templateData?.link?a("button",{type:"button",class:"s-bottom-alert-action-purchase-button",onClick:()=>window.open(this.templateData?.link,"_blank")},this.buyTheTemplate):null):a("salla-button",{href:this.actionUrl,size:"medium",onClick:()=>this.handleAction(),width:"normal"},this.actionLabel||this.defaultActionLabel)),"popup"===this.type&&this.popup()))}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-bottom-alert",{type:[513],icon:[513],message:[513],actionUrl:[513,"action-url"],actionLabel:[513,"action-label"],storeId:[32],template:[32],loading:[32],templateData:[32],defaultMessage:[32],defaultActionLabel:[32],storeFeatures:[32],storeDetails:[32],storePrice:[32],storePriceDetails:[32],theDeveloper:[32],templateInformation:[32],buyTheTemplate:[32],isRtl:[32],storeName:[32],salla:[32],readyStores:[32],moreDetailsLabel:[32]}]);function h(){"undefined"!=typeof customElements&&["salla-bottom-alert","salla-button","salla-drawer","salla-loading"].forEach((t=>{switch(t){case"salla-bottom-alert":customElements.get(e(t))||customElements.define(e(t),r);break;case"salla-button":customElements.get(e(t))||n();break;case"salla-drawer":customElements.get(e(t))||m();break;case"salla-loading":customElements.get(e(t))||c()}}))}h();const d=r,p=h;export{d as SallaBottomAlert,p as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PendingOrdersIcon } from './cart.js';
+import { I as ImageIcon } from './image.js';
+import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-drawer2.js';
+import { d as defineCustomElement$2 } from './salla-loading2.js';
+
+var infoIcon = `<!-- 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>info</title>
+<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
+</svg>
+`;
+
+var moneyIcon = `<!-- 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>money-card</title>
+<path d="M17.333 14.667h-2.667c-0.736 0-1.333-0.599-1.333-1.333s0.597-1.333 1.333-1.333h4c0.737 0 1.333-0.597 1.333-1.333s-0.596-1.333-1.333-1.333h-1.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333c-2.205 0-4 1.795-4 4s1.795 4 4 4h2.667c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-4c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h1.333v1.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-1.333c2.205 0 4-1.795 4-4s-1.795-4-4-4zM28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.736-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333v-18.667c0-0.735 0.597-1.333 1.333-1.333h24c0.736 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+var checkCircleIcon = `<!-- 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>check-circle</title>
+<path d="M19.557 11.26l-4.593 6.891-2.891-1.927c-0.616-0.411-1.441-0.243-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l4 2.667c0.228 0.152 0.485 0.224 0.739 0.224 0.431 0 0.855-0.208 1.111-0.593l5.333-8c0.409-0.612 0.244-1.441-0.369-1.849-0.616-0.411-1.443-0.243-1.849 0.369zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
+</svg>
+`;
+
+const sallaBottomAlertCss = ":host{display:block}";
+
+const SallaBottomAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaBottomAlert extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.storeId = salla.config.get('store.id');
+        this.template = salla.config.get('store.template');
+        this.loading = false;
+        this.templateData = {};
+        this.defaultMessage = salla.lang.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
+        this.defaultActionLabel = salla.lang.get('common.elements.know_more');
+        this.storeFeatures = salla.lang.get('common.elements.store_features');
+        this.storeDetails = salla.lang.get('common.elements.store_details');
+        this.storePrice = salla.lang.getWithDefault('common.elements.store_price', 'سعر المتجر');
+        this.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
+        this.theDeveloper = salla.lang.get('common.elements.the_developer');
+        this.templateInformation = salla.lang.get('common.elements.template_information');
+        this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
+        this.isRtl = salla.config.get('theme.is_rtl', true);
+        this.storeName = salla.config.get('store.name');
+        this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
+        this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
+        this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'تفاصيل أكثر');
+        /**
+         * Alert Type
+         * */
+        this.type = 'popup';
+        salla.lang.onLoaded(() => {
+            this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
+            this.defaultActionLabel = salla.lang.get('common.elements.know_more');
+            this.storeFeatures = salla.lang.get('common.elements.store_features');
+            this.storeDetails = salla.lang.get('common.elements.store_details');
+            this.templateInformation = salla.lang.get('common.elements.template_information');
+            this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.more_details', 'تفاصيل أكثر');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.more_details', 'More Details');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price', 'سعر المتجر');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price', 'Store Price');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.the_developer', 'المطور');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.the_developer', 'the developer');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price_details', 'السعر يشمل');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price_details', 'Price Includes');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.salla', 'سلة');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.salla', 'Salla');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_is_available_for_purchase', 'This ready store is available for purchase from');
+            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.ready_stores', 'المتاجر الجاهزة');
+            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.ready_stores', 'Ready Stores');
+            setTimeout(() => {
+                this.storePrice = salla.lang.get('common.elements.store_price');
+                this.theDeveloper = salla.lang.get('common.elements.the_developer');
+                this.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
+                this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
+                this.defaultMessage = salla.lang.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
+                this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
+                // Initialize moreDetailsLabel after translations loaded
+                this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'More Details');
+            }, 100);
+        });
+    }
+    componentDidLoad() {
+        // Fetch template data on mount if there's a template
+        if (this.template &&
+            typeof this.template === 'object' &&
+            Object.keys(this.template).length > 0) {
+            this.fetchTemplateData();
+        }
+    }
+    open() {
+        return this.drawer.open();
+    }
+    fetchTemplateData() {
+        if (Object.keys(this.templateData).length) {
+            return;
+        }
+        this.loading = true;
+        return salla.api
+            .request(`/store/template`, {}, 'get', { 'Store-Identifier': this.storeId })
+            .then(res => {
+            this.templateData = res.data;
+            this.loading = false;
+        })
+            .catch(() => {
+            this.loading = false;
+        });
+    }
+    handleAction() {
+        if (this.type === 'link') {
+            window.location.href = this.actionUrl;
+        }
+        if (this.type === 'popup') {
+            this.open();
+        }
+    }
+    popup() {
+        return (h("salla-drawer", { class: "s-bottom-alert-modal", ref: drawer => (this.drawer = drawer), "no-padding": true, onLoad: () => {
+                if (this.drawer && Object.keys(this.templateData).length) {
+                    this.drawer.setTitle(this.storeDetails + ' ' + this.storeName);
+                }
+            } }, Object.keys(this.templateData).length
+            ? [
+                h("div", { class: "s-bottom-alert-modal-inner s-scrollbar" }, h("div", { class: { 's-bottom-alert-modal-content': true } }, this.templateData?.features
+                    ? [
+                        h("div", { class: "s-bottom-alert-modal-content-title" }, h("i", { innerHTML: ImageIcon, class: "s-bottom-alert-modal-content-icon" }), h("span", null, this.storeFeatures)),
+                        h("div", { class: "s-bottom-alert-modal-content-features", innerHTML: this.templateData?.features }),
+                    ]
+                    : ''), h("div", { class: {
+                        's-bottom-alert-modal-content': true,
+                        's-bottom-alert-modal-content-extra-padding': this.templateData?.price,
+                    } }, this.templateData?.features
+                    ? [
+                        h("div", { class: "s-bottom-alert-modal-content-title" }, h("i", { innerHTML: moneyIcon, class: "s-bottom-alert-modal-content-icon" }), h("span", null, this.storePriceDetails)),
+                        h("div", { class: "s-bottom-alert-modal-content-price-details" }, this.templateData?.price_details?.items.map(item => (h("div", { class: "s-bottom-alert-modal-content-price-details-item" }, h("i", { innerHTML: checkCircleIcon, class: "s-bottom-alert-modal-content-price-details-item-icon" }), h("span", { class: "s-bottom-alert-modal-content-price-details-item-name" }, item.name), h("span", { class: "s-bottom-alert-modal-content-price-details-item-price", innerHTML: salla.money(item.price) }))))),
+                    ]
+                    : ''), this.templateData?.link ? (h("div", { class: "s-bottom-alert-modal-content-footer" }, h("salla-button", { color: "primary", size: "medium", width: "wide", href: this.templateData?.link }, h("i", { innerHTML: PendingOrdersIcon }), this.buyTheTemplate))) : ('')),
+            ]
+            : ''));
+    }
+    render() {
+        const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
+        return (h(Host, { key: 'e5f273d72875760e30d99d419b247137583bc450', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '1db37d7c67aae449f41a9a3ed83489b2a0653cef', class: "s-bottom-alert-logo-section" }, h("img", { key: '18701cd3d807042b4d852f283d43a6855282f791', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '66bb3f9b3c00aee5c2694d5ddb142e753ae7fa1a', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '01d47c9ec38370b83bdb3fdc29291f55e1b3aa42', class: "s-bottom-alert-content" }, h("div", { key: '5380873bf9d393c0fa18da196e1bfb675a8c9c9b', class: "flex items-center gap-2" }, h("div", { key: '882382de35a7c9a767e2eb90305c8a973d01ac21', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: 'dfbaa427fd4e8b755a479e0b5459422e44a95f59', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
+                's-bottom-alert-message-highlight': true,
+            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: '327ef4b5ecdab7d994418c033a78c2531eb28de5', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
+    }
+    get host() { return this; }
+    static get style() { return sallaBottomAlertCss; }
+}, [0, "salla-bottom-alert", {
+        "type": [513],
+        "icon": [513],
+        "message": [513],
+        "actionUrl": [513, "action-url"],
+        "actionLabel": [513, "action-label"],
+        "storeId": [32],
+        "template": [32],
+        "loading": [32],
+        "templateData": [32],
+        "defaultMessage": [32],
+        "defaultActionLabel": [32],
+        "storeFeatures": [32],
+        "storeDetails": [32],
+        "storePrice": [32],
+        "storePriceDetails": [32],
+        "theDeveloper": [32],
+        "templateInformation": [32],
+        "buyTheTemplate": [32],
+        "isRtl": [32],
+        "storeName": [32],
+        "salla": [32],
+        "readyStores": [32],
+        "moreDetailsLabel": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-bottom-alert", "salla-button", "salla-drawer", "salla-loading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-bottom-alert":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaBottomAlert$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-drawer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaBottomAlert = SallaBottomAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaBottomAlert, defineCustomElement };

package/dist/components/salla-breadcrumb.js

@@ -1,4 +1,229 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as r,h as e}from"@stencil/core/internal/client";import{K as a,a as l}from"./keyboard_arrow_right.js";const i=t(class extends r{constructor(s){super(),!1!==s&&this.__registerHost(),this.sessionStorageKey="breadcrumb_snapshot",this.itemSlot=this.host.querySelector('[slot="item"]')?.outerHTML||'<li class="s-breadcrumb-item"><a href={url}>{title}</a></li>',this.iconSlot=this.host.querySelector('[slot="icon"]')?.outerHTML}componentWillLoad(){return new Promise((s=>salla.onReady((()=>salla.lang.onLoaded(s))))).then((()=>{if(salla.url.is_page("index"))throw Error("salla-breadcrumb:: breadcrumb not supported on home page")})).then((()=>{if(!salla.config.get("theme.settings.is_breadcrumbs_enabled",!0))throw Error("salla-breadcrumb:: merchant disabled the feature")})).then((()=>{const s=salla.config.get("page");if(!s||!s.slug)return salla.logger.error('salla-breadcrumbs:: page object not existed on salla.config.get("page")!'),void(this.breadcrumbs=[]);let t=this.getSessionBreadcrumbs(),r=t[t.length-1];return"product.single"===s.slug&&t&&t.length>0&&r?.url&&s.parent?.url&&r.url===s.parent.url?(t.push({title:s.title,url:s.url}),this.breadcrumbs=this.setBreadcrumbsFromArray(t),this.storeBreadcrumbSnapshot()):t&&t.length>0?this.isNewPage(s,t)?(this.breadcrumbs=this.generateBreadcrumbs(s),this.storeBreadcrumbSnapshot()):this.breadcrumbs=this.setBreadcrumbsFromArray(t):(this.breadcrumbs=this.generateBreadcrumbs(s),this.storeBreadcrumbSnapshot()),this.breadcrumbs?.length&&(this.breadcrumbs[this.breadcrumbs.length-1].is_last=!0),this.breadcrumbs})).catch((s=>{salla.logger.error("salla-breadcrumb:: unexpected error!",s),this.breadcrumbs=[]}))}getSessionBreadcrumbs(){return"search-bar"===new URLSearchParams(window.location.search).get("from")?[]:JSON.parse(sessionStorage.getItem(this.sessionStorageKey)||"[]")}isNewPage(s,t){const r=t[t.length-1];return r?.url!==s.url}setBreadcrumbsFromArray(s){return s.map(((t,r)=>({...t,is_last:r===s.length-1})))}sanitizeBreadcrumbTitle(s,t=1){return s.includes("|")?s.split("|").map((s=>s.trim()))[t]:s.trim()}generateBreadcrumbs(s){let t=[];if("product.single"===s.slug){const t=this.getSessionBreadcrumbs(),r=t[t.length-1];if(t.length>0&&r?.url&&s.parent?.url&&r.url===s.parent.url)return this.setBreadcrumbsFromArray([...t,{title:s.title,url:s.url}])}let r=s;for(;r;)r.title&&t.unshift({title:r.title,url:r.url}),r=r.parent;return s.slug.includes("customer")&&"customer.profile"!==s.slug&&t.unshift({title:salla.lang.get("common.titles.profile"),url:salla.url.get("profile")}),s.slug.includes("blog")&&t.unshift({title:salla.lang.get("blocks.footer.blog"),url:salla.url.get("blog")}),"brands.single"===s.slug&&t.unshift({title:salla.lang.get("common.titles.brands"),url:salla.url.get("brands")}),s.title||"loyalty"!==s.slug||t.unshift({title:salla.lang.get("common.titles.loyalty_program"),url:salla.url.get("loyalty")}),t.unshift({title:salla.lang.get("common.titles.home"),url:salla.url.get("")}),t}storeBreadcrumbSnapshot(){try{const s=salla.config.get("page");if("product.single"===s?.slug)return;const t=[...this.breadcrumbs],r=t.length-1;r>=0&&(t[r].url=window.location.href);const e=JSON.stringify(t);sessionStorage.setItem(this.sessionStorageKey,e)}catch(s){salla.logger.error("salla-breadcrumb:: Failed to store breadcrumb snapshot in sessionStorage.",s)}}render(){return this.breadcrumbs.length<=1?(salla.log("salla-breadcrumb:: There is no breadcrumbs!"),null):e("ol",{class:{"s-breadcrumb-wrapper":!0,"s-breadcrumb-dark":salla.url.is_page("loyalty"),"s-breadcrumb-primary-reverse":salla.config.get("page.slug").includes("customer")}},this.breadcrumbs.map((s=>{const t="product.single"===salla.config.get("page.slug")&&s.is_last?s.title:this.sanitizeBreadcrumbTitle(s.title),r=this.itemSlot.replace(/\{url\}/g,s.url).replace(/\{title\}/g,t);return[e("div",{class:"s-breadcrumb-slot",innerHTML:r}),this.getArrowDomForItem(s)]})))}getArrowDomForItem(s){if(s.is_last)return"";let t=this.iconSlot||(salla.config.get("theme.is_rtl",!0)?a:l);return e("li",{class:"s-breadcrumb-arrow"},e("div",{class:{"s-breadcrumb-icon-slot":!0,"s-breadcrumb-default-icon":!this.iconSlot},innerHTML:t}))}componentDidRender(){this.host.querySelectorAll(".s-breadcrumb-slot").forEach((s=>s.replaceWith(s.firstChild))),this.host.querySelectorAll(".s-breadcrumb-icon-slot.s-breadcrumb-default-icon").forEach((s=>s.replaceWith(s.querySelector("svg")))),this.host.querySelector('[slot="item"]')?.remove(),this.host.querySelector('[slot="icon"]')?.remove();let s=this.host.querySelectorAll(".s-breadcrumb-item")[this.breadcrumbs.length-1]?.querySelector("a");s&&s.replaceWith(s.firstChild)}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-breadcrumb",{breadcrumbs:[32]}]);function o(){"undefined"!=typeof customElements&&["salla-breadcrumb"].forEach((t=>{"salla-breadcrumb"===t&&(customElements.get(s(t))||customElements.define(s(t),i))}))}o();const n=i,c=o;export{n as SallaBreadcrumb,c as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { K as KeyBoardArrowLeftIcon, a as KeyBoardArrowRightIcon } from './keyboard_arrow_right.js';
+
+const sallaBreadcrumbCss = ":host{display:block}";
+
+const SallaBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class SallaBreadcrumb extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.sessionStorageKey = "breadcrumb_snapshot";
+        this.itemSlot = this.host.querySelector('[slot="item"]')?.outerHTML || `<li class="s-breadcrumb-item"><a href={url}>{title}</a></li>`;
+        this.iconSlot = this.host.querySelector('[slot="icon"]')?.outerHTML;
+    }
+    componentWillLoad() {
+        return (new Promise(resolve => salla.onReady(() => salla.lang.onLoaded(resolve))))
+            .then(() => {
+            if (salla.url.is_page('index')) {
+                throw new Error('salla-breadcrumb:: breadcrumb not supported on home page');
+            }
+        })
+            .then(() => {
+            if (!salla.config.get('theme.settings.is_breadcrumbs_enabled', true)) {
+                throw new Error('salla-breadcrumb:: merchant disabled the feature');
+            }
+        })
+            .then(() => {
+            const page = salla.config.get("page");
+            if (!page || !page.slug) {
+                salla.logger.error('salla-breadcrumbs:: page object not existed on salla.config.get("page")!');
+                this.breadcrumbs = [];
+                return;
+            }
+            let sessionBreadcrumbs = this.getSessionBreadcrumbs();
+            let lastSessionItem = sessionBreadcrumbs[sessionBreadcrumbs.length - 1];
+            let isParentCompatible = lastSessionItem?.url && page.parent?.url && lastSessionItem.url === page.parent.url;
+            if (page.slug === "product.single" && sessionBreadcrumbs && sessionBreadcrumbs.length > 0 && isParentCompatible) {
+                sessionBreadcrumbs.push({
+                    title: page.title,
+                    url: page.url
+                });
+                this.breadcrumbs = this.setBreadcrumbsFromArray(sessionBreadcrumbs);
+                this.storeBreadcrumbSnapshot();
+            }
+            else if (sessionBreadcrumbs && sessionBreadcrumbs.length > 0) {
+                if (this.isNewPage(page, sessionBreadcrumbs)) {
+                    this.breadcrumbs = this.generateBreadcrumbs(page);
+                    this.storeBreadcrumbSnapshot();
+                }
+                else {
+                    this.breadcrumbs = this.setBreadcrumbsFromArray(sessionBreadcrumbs);
+                }
+            }
+            else {
+                this.breadcrumbs = this.generateBreadcrumbs(page);
+                this.storeBreadcrumbSnapshot();
+            }
+            if (this.breadcrumbs?.length) {
+                this.breadcrumbs[this.breadcrumbs.length - 1].is_last = true;
+            }
+            return this.breadcrumbs;
+        })
+            .catch((error) => {
+            salla.logger.error('salla-breadcrumb:: unexpected error!', error);
+            this.breadcrumbs = [];
+        });
+    }
+    getSessionBreadcrumbs() {
+        if (new URLSearchParams(window.location.search).get('from') === 'search-bar') {
+            return [];
+        }
+        return JSON.parse(sessionStorage.getItem(this.sessionStorageKey) || '[]');
+    }
+    /**
+   * Helper function to determine if we're navigating to a new page that requires updating the session storage.
+   */
+    isNewPage(page, sessionBreadcrumbs) {
+        // Check if the last breadcrumb in sessionStorage matches the current page's URL.
+        const lastBreadcrumb = sessionBreadcrumbs[sessionBreadcrumbs.length - 1];
+        return lastBreadcrumb?.url !== page.url; // If the URLs don't match, it's a new page.
+    }
+    setBreadcrumbsFromArray(breadcrumbArray) {
+        return breadcrumbArray.map((item, index) => ({
+            ...item,
+            is_last: index === breadcrumbArray.length - 1,
+        }));
+    }
+    /**
+     * Sanitizes the breadcrumb title by splitting it on the `|` character and returning
+     * the part based on `preferedIndex`. If no separator is found, returns the trimmed title.
+     *
+     * @param {string} title - The title to sanitize.
+     * @param {number} [preferedIndex=1] - Index of the part to return (0 for first, 1 for second).
+     * @returns {string} - The sanitized title.
+     */
+    sanitizeBreadcrumbTitle(title, preferedIndex = 1) {
+        if (!title.includes('|')) {
+            return title.trim();
+        }
+        return title.split('|').map(part => part.trim())[preferedIndex];
+    }
+    generateBreadcrumbs(page) {
+        let breadcrumbs = [];
+        // Same parent-compatibility as main path: only reuse session path when last item matches page.parent
+        if (page.slug === 'product.single') {
+            const previousPage = this.getSessionBreadcrumbs();
+            const lastSessionItem = previousPage[previousPage.length - 1];
+            const isParentCompatible = lastSessionItem?.url && page.parent?.url && lastSessionItem.url === page.parent.url;
+            if (previousPage.length > 0 && isParentCompatible) {
+                return this.setBreadcrumbsFromArray([...previousPage, { title: page.title, url: page.url }]);
+            }
+        }
+        // Start with the current page
+        let currentPage = page;
+        // Traverse up to the parent pages
+        while (currentPage) {
+            if (currentPage.title) {
+                breadcrumbs.unshift({
+                    title: currentPage.title,
+                    url: currentPage.url,
+                });
+            }
+            currentPage = currentPage.parent;
+        }
+        // Additional logic based on page slug or title
+        if (page.slug.includes("customer") && page.slug !== 'customer.profile') {
+            breadcrumbs.unshift({ title: salla.lang.get('common.titles.profile'), url: salla.url.get('profile') });
+        }
+        if (page.slug.includes('blog')) {
+            breadcrumbs.unshift({ title: salla.lang.get('blocks.footer.blog'), url: salla.url.get('blog') });
+        }
+        if (page.slug === 'brands.single') {
+            breadcrumbs.unshift({ title: salla.lang.get('common.titles.brands'), url: salla.url.get('brands') });
+        }
+        if (!page.title && page.slug === 'loyalty') {
+            breadcrumbs.unshift({ title: salla.lang.get('common.titles.loyalty_program'), url: salla.url.get('loyalty') });
+        }
+        // Add home breadcrumb
+        breadcrumbs.unshift({ title: salla.lang.get('common.titles.home'), url: salla.url.get('') });
+        return breadcrumbs;
+    }
+    storeBreadcrumbSnapshot() {
+        try {
+            const page = salla.config.get("page");
+            // Skip storing breadcrumbs for product.single page
+            if (page?.slug === 'product.single') {
+                return;
+            }
+            const items = [...this.breadcrumbs];
+            // Find the last item and update its URL
+            const lastItemIndex = items.length - 1;
+            if (lastItemIndex >= 0) {
+                items[lastItemIndex].url = window.location.href;
+            }
+            const breadcrumbSnapshot = JSON.stringify(items);
+            sessionStorage.setItem(this.sessionStorageKey, breadcrumbSnapshot);
+        }
+        catch (error) {
+            salla.logger.error('salla-breadcrumb:: Failed to store breadcrumb snapshot in sessionStorage.', error);
+        }
+    }
+    render() {
+        if (this.breadcrumbs.length <= 1) {
+            salla.log('salla-breadcrumb:: There is no breadcrumbs!');
+            return null;
+        }
+        return (h("ol", { class: {
+                "s-breadcrumb-wrapper": true,
+                "s-breadcrumb-dark": salla.url.is_page('loyalty'),
+                "s-breadcrumb-primary-reverse": salla.config.get('page.slug').includes('customer')
+            } }, this.breadcrumbs.map(item => {
+            const isProductSingle = salla.config.get('page.slug') === "product.single";
+            const title = (isProductSingle && item.is_last) ? item.title : this.sanitizeBreadcrumbTitle(item.title);
+            const itemHTML = this.itemSlot.replace(/\{url\}/g, item.url).replace(/\{title\}/g, title);
+            return [
+                h("div", { class: "s-breadcrumb-slot", innerHTML: itemHTML }),
+                this.getArrowDomForItem(item)
+            ];
+        })));
+    }
+    getArrowDomForItem(item) {
+        if (item.is_last) {
+            return '';
+        }
+        let iconDom = this.iconSlot || (salla.config.get('theme.is_rtl', true) ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon);
+        return h("li", { class: "s-breadcrumb-arrow" }, h("div", { class: { "s-breadcrumb-icon-slot": true, "s-breadcrumb-default-icon": !this.iconSlot }, innerHTML: iconDom }));
+    }
+    /**
+     * Lifecycle method called after the component is rendered.
+     * - Reduces the number of elements in the DOM.
+     * - Removes unnecessary slots parent elements.
+     * - Replaces the last anchor tag in the breadcrumb with its content.
+     */
+    componentDidRender() {
+        // Reduces the number of elements in the DOM
+        this.host.querySelectorAll('.s-breadcrumb-slot').forEach(el => el.replaceWith(el.firstChild));
+        this.host.querySelectorAll('.s-breadcrumb-icon-slot.s-breadcrumb-default-icon').forEach(el => el.replaceWith(el.querySelector('svg')));
+        // Removes the slots parent elements if exists
+        this.host.querySelector('[slot="item"]')?.remove();
+        this.host.querySelector('[slot="icon"]')?.remove();
+        let lastEl = this.host.querySelectorAll('.s-breadcrumb-item')[this.breadcrumbs.length - 1]?.querySelector('a');
+        lastEl && lastEl.replaceWith(lastEl.firstChild);
+    }
+    get host() { return this; }
+    static get style() { return sallaBreadcrumbCss; }
+}, [0, "salla-breadcrumb", {
+        "breadcrumbs": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-breadcrumb"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaBreadcrumb$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaBreadcrumb = SallaBreadcrumb$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaBreadcrumb, defineCustomElement };