@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-orders.js

@@ -1,4 +1,274 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as e,h as o}from"@stencil/core/internal/client";import{H as r}from"./Helper.js";import{d as a}from"./salla-button2.js";const n=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.orderNumberText=salla.lang.get("pages.thank_you.order_id"),this.totalOrderText=salla.lang.get("pages.orders.total"),this.orderDateText=salla.lang.get("pages.orders.date"),this.orderStatusText=salla.lang.get("pages.orders.status"),this.noOrderText=salla.lang.get("pages.orders.non_orders"),this.load_more_text_trans=salla.lang.get("common.elements.load_more"),this.languageCode=salla.lang.locale,this.orders=[],salla.lang.onLoaded((()=>{this.languageCode=salla.lang.locale,this.orderNumberText=salla.lang.get("pages.thank_you.order_id"),this.totalOrderText=salla.lang.get("pages.orders.total"),this.orderDateText=salla.lang.get("pages.orders.date"),this.orderStatusText=salla.lang.get("pages.orders.status"),this.noOrderText=salla.lang.get("pages.orders.non_orders"),this.load_more_text_trans=salla.lang.get("common.elements.load_more")}))}loading(t=!0){let s=this.status?.querySelector(".s-button-text");s&&(r.toggleElementClassIf(s,"s-button-hide","s-button-show",(()=>t)),this.btnLoader.style.display=t?"inherit":"none")}initiateInfiniteScroll(){this.hasInfiniteScroll&&(this.wrapper?(this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:()=>this.nextPage,history:!1,nextPage:this.nextPage,scrollThreshold:!1},!0),this.infiniteScroll?.on("request",(()=>{this.loading()})),this.infiniteScroll?.on("load",(t=>{this.loading(!1),this.pagination=t.pagination,this.nextPage=t.pagination?.links?.next||null,this.handleResponse(t.data).forEach((t=>{this.wrapper.append(t)}));let s=this.host.querySelectorAll(".s-orders-table-tbody-tr:not(.animated)");r.animateItems(s)})),this.infiniteScroll?.on("error",(t=>{salla.logger.error("Error loading more comments:",t)}))):salla.logger.error("Wrapper is undefined. Cannot initiate infinite scroll."))}async loadMore(){this.infiniteScroll.loadNextPage()}handleResponse(t){return t.map((t=>this.getSingleOrderItem(t)))}async loadInitialData(){const t=new URL(window.location.href);await salla.order.api.fetch({...this.params,types:[""],feedback_status:t.searchParams.get("feedback_status")}).then((t=>{if(this.orders=t.data,this.hasInfiniteScroll=!!t.pagination?.links.next,this.pagination=t.pagination,this.total=t.pagination?.total,this.nextPage=t.pagination?.links?.next||null,!this.orders.length)return this.showPlaceholder=!0,this.loading(!1);setTimeout((()=>{this.handleResponse(t.data).forEach((t=>{this.wrapper.append(t)})),this.initiateInfiniteScroll();let s=this.wrapper.querySelectorAll(".s-orders-table-tbody-tr:not(.animated)");r.animateItems(s)}),100)})).catch((t=>{this.showPlaceholder=!0,this.loading(!1),salla.logger.error(t)}))}getSingleOrderItem(t){const s=document.createElement("tr");s.classList.add("s-orders-table-tbody-tr","s-orders-table-tbody-tr-shadow");const e=document.createElement("td");e.classList.add("s-orders-table-tbody-tr-td");const o=document.createElement("div");o.classList.add("s-orders-table-tbody-tr-td-content");const a=document.createElement("span");a.classList.add("s-orders-mobile-title"),a.textContent=this.orderNumberText+":";const n=document.createElement("span");if(n.classList.add("s-orders-reference-id"),n.textContent="#"+t.reference_id,o.appendChild(a),o.appendChild(n),"buy_as_gift"==t.source){const t=document.createElement("i");t.classList.add("sicon-gift-sharing","s-orders-buy-as-gift-icon"),o.appendChild(t)}const l=document.createElement("a");l.href=t.url,o.appendChild(l);const i=document.createElement("div");i.classList.add("s-orders-copy-to-clipboard-button");const d=document.createElement("salla-button");d.classList.add("relative"),d.setAttribute("color","dark"),d.setAttribute("shape","link"),d.dataset.content=""+t.reference_id,d.addEventListener("click",(t=>{r.copyToClipboard(t),r.toggleElementClassIf(d,"copied","code-to-copy",(()=>!0)),setTimeout((()=>{r.toggleElementClassIf(d,"code-to-copy","copied",(()=>!0))}),1e3)}));const c=document.createElement("span");c.textContent="#"+t.reference_id;const h=document.createElement("i");h.classList.add("sicon-swap-stroke","s-orders-copy-to-clipboard-button-icon"),salla.config.get("theme.is_rtl",!0)?(d.appendChild(h),d.appendChild(c)):(d.appendChild(c),d.appendChild(h)),i.appendChild(d),o.appendChild(i),e.appendChild(o),s.appendChild(e);const u=document.createElement("td");u.classList.add("s-orders-table-tbody-tr-td");const m=document.createElement("div");m.classList.add("s-orders-table-tbody-tr-td-content");const b=document.createElement("span");b.classList.add("s-orders-mobile-title"),b.textContent=this.totalOrderText+":";const p=document.createElement("div");p.innerHTML=salla.money(t.total);const y=document.createElement("a");y.href=t.url,m.appendChild(b),m.appendChild(p),m.appendChild(y),u.appendChild(m),s.appendChild(u);const f=document.createElement("td");f.classList.add("s-orders-table-tbody-tr-td");const g=document.createElement("div");g.classList.add("s-orders-table-tbody-tr-td-content");const x=document.createElement("span");x.classList.add("s-orders-mobile-title"),x.textContent=this.orderDateText+":";const _=document.createElement("div");_.textContent=r.formatDateFromString(t.created_at.date,salla.helpers.number,this.languageCode);const k=document.createElement("a");k.href=t.url,g.appendChild(x),g.appendChild(_),g.appendChild(k),f.appendChild(g),s.appendChild(f);const v=document.createElement("td");v.classList.add("s-orders-table-tbody-tr-td");const w=document.createElement("div");w.classList.add("s-orders-table-tbody-tr-td-content");const T=document.createElement("span");T.classList.add("s-orders-mobile-title"),T.textContent=this.orderStatusText+":";const E=document.createElement("span");E.classList.add("s-orders-status-container"),E.style.color=t.status.color;const I=document.createElement("i");I.classList.add(t.status.icon);const S=document.createElement("span");S.textContent=t.status.name,E.appendChild(I),E.appendChild(S),w.appendChild(T),w.appendChild(E);const C=document.createElement("i");C.classList.add("sicon-star2","s-orders-status-rated",t.is_rated?"s-orders-rated-text":"s-orders-unrated-text"),w.appendChild(C);const O=document.createElement("a");return O.href=t.url,w.appendChild(O),v.appendChild(w),s.appendChild(v),s}render(){return this.showPlaceholder?o("div",{class:"s-orders-no-content"},o("i",{class:"sicon-packed-box icon"}),o("p",null,this.noOrderText)):o("div",{class:"s-orders-wrapper"},o("table",{class:"s-orders-table"},o("thead",{class:"s-orders-table-head"},o("tr",{class:"s-orders-table-head-tr"},o("th",{class:"s-orders-table-head-tr-th",scope:"col"},this.orderNumberText),o("th",{class:"s-orders-table-head-tr-th",scope:"col"},this.totalOrderText),o("th",{class:"s-orders-table-head-tr-th",scope:"col"},this.orderDateText),o("th",{class:"s-orders-table-head-tr-th",scope:"col"},this.orderStatusText))),o("tbody",{class:"s-orders-table-tbody",ref:t=>this.wrapper=t})),this.nextPage&&o("div",{class:"s-infinite-scroll-wrapper",ref:t=>this.status=t},o("button",{onClick:()=>this.loadMore(),class:"s-infinite-scroll-btn s-button-btn s-button-primary"},o("span",{class:"s-button-text s-infinite-scroll-btn-text"},this.loadMoreText??this.load_more_text_trans),o("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader",ref:t=>this.btnLoader=t,style:{display:"none"}}))))}componentWillLoad(){return salla.onReady().then((()=>this.loadInitialData())).then((()=>this.initiateInfiniteScroll()))}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-orders",{params:[16],loadMoreText:[1,"load-more-text"],orderNumberText:[32],totalOrderText:[32],orderDateText:[32],orderStatusText:[32],noOrderText:[32],load_more_text_trans:[32],languageCode:[32],orders:[32],pagination:[32],hasInfiniteScroll:[32],total:[32],nextPage:[32],showPlaceholder:[32]}]);function l(){"undefined"!=typeof customElements&&["salla-orders","salla-button"].forEach((s=>{switch(s){case"salla-orders":customElements.get(t(s))||customElements.define(t(s),n);break;case"salla-button":customElements.get(t(s))||a()}}))}l();const i=n,d=l;export{i as SallaOrders,d as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$2 } from './salla-button2.js';
+
+const sallaOrdersCss = ":host{display:block}";
+
+const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
+        this.totalOrderText = salla.lang.get('pages.orders.total');
+        this.orderDateText = salla.lang.get('pages.orders.date');
+        this.orderStatusText = salla.lang.get('pages.orders.status');
+        this.noOrderText = salla.lang.get('pages.orders.non_orders');
+        this.load_more_text_trans = salla.lang.get('common.elements.load_more');
+        this.languageCode = salla.lang.locale;
+        this.orders = [];
+        salla.lang.onLoaded(() => {
+            this.languageCode = salla.lang.locale;
+            this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
+            this.totalOrderText = salla.lang.get('pages.orders.total');
+            this.orderDateText = salla.lang.get('pages.orders.date');
+            this.orderStatusText = salla.lang.get('pages.orders.status');
+            this.noOrderText = salla.lang.get('pages.orders.non_orders');
+            this.load_more_text_trans = salla.lang.get('common.elements.load_more');
+        });
+    }
+    // Show/hide loading
+    loading(isLoading = true) {
+        let btnText = this.status?.querySelector('.s-button-text');
+        if (btnText) {
+            Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+            this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
+        }
+    }
+    initiateInfiniteScroll() {
+        if (!this.hasInfiniteScroll) {
+            return;
+        }
+        if (!this.wrapper) {
+            salla.logger.error('Wrapper is undefined. Cannot initiate infinite scroll.');
+            return;
+        }
+        this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {
+            path: () => this.nextPage,
+            history: false,
+            nextPage: this.nextPage,
+            scrollThreshold: false,
+        }, true);
+        this.infiniteScroll?.on('request', _response => {
+            this.loading();
+        });
+        this.infiniteScroll?.on('load', response => {
+            this.loading(false);
+            this.pagination = response.pagination;
+            this.nextPage = response.pagination?.links?.next || null;
+            this.handleResponse(response.data).forEach(data => {
+                this.wrapper.append(data);
+            });
+            let items = this.host.querySelectorAll('.s-orders-table-tbody-tr:not(.animated)');
+            Helper.animateItems(items);
+        });
+        this.infiniteScroll?.on('error', (e) => {
+            salla.logger.error('Error loading more comments:', e);
+        });
+    }
+    // Get next page
+    async loadMore() {
+        this.infiniteScroll.loadNextPage();
+    }
+    handleResponse(orderList) {
+        return orderList.map(order => this.getSingleOrderItem(order));
+    }
+    async loadInitialData() {
+        const url = new URL(window.location.href);
+        await salla.order.api.fetch({ ...this.params, types: [""], feedback_status: url.searchParams.get('feedback_status') }).then((resp) => {
+            this.orders = resp.data;
+            this.hasInfiniteScroll = !!resp.pagination?.links.next;
+            this.pagination = resp.pagination;
+            this.total = resp.pagination?.total;
+            this.nextPage = resp.pagination?.links?.next || null;
+            if (!this.orders.length) {
+                this.showPlaceholder = true;
+                return this.loading(false);
+            }
+            setTimeout(() => {
+                this.handleResponse(resp.data).forEach(data => {
+                    this.wrapper.append(data);
+                });
+                this.initiateInfiniteScroll();
+                let items = this.wrapper.querySelectorAll('.s-orders-table-tbody-tr:not(.animated)');
+                Helper.animateItems(items);
+            }, 100);
+        }).catch(error => {
+            this.showPlaceholder = true;
+            this.loading(false);
+            salla.logger.error(error);
+        });
+    }
+    getSingleOrderItem(order) {
+        const tr = document.createElement('tr');
+        tr.classList.add('s-orders-table-tbody-tr', 's-orders-table-tbody-tr-shadow');
+        const td1 = document.createElement('td');
+        td1.classList.add('s-orders-table-tbody-tr-td');
+        const div1 = document.createElement('div');
+        div1.classList.add('s-orders-table-tbody-tr-td-content');
+        const span1 = document.createElement('span');
+        span1.classList.add('s-orders-mobile-title');
+        span1.textContent = this.orderNumberText + ':';
+        const span2 = document.createElement('span');
+        span2.classList.add('s-orders-reference-id');
+        span2.textContent = '#' + order.reference_id;
+        div1.appendChild(span1);
+        div1.appendChild(span2);
+        if (order.source == 'buy_as_gift') {
+            const giftIcon = document.createElement('i');
+            giftIcon.classList.add('sicon-gift-sharing', 's-orders-buy-as-gift-icon');
+            div1.appendChild(giftIcon);
+        }
+        const anchor1 = document.createElement('a');
+        anchor1.href = order.url;
+        div1.appendChild(anchor1);
+        const div2 = document.createElement('div');
+        div2.classList.add('s-orders-copy-to-clipboard-button');
+        const sallaButton = document.createElement('salla-button');
+        sallaButton.classList.add('relative');
+        sallaButton.setAttribute('color', 'dark');
+        sallaButton.setAttribute('shape', 'link');
+        sallaButton.dataset.content = order.reference_id.toString();
+        sallaButton.addEventListener('click', (event) => {
+            Helper.copyToClipboard(event);
+            Helper.toggleElementClassIf(sallaButton, 'copied', 'code-to-copy', () => true);
+            setTimeout(() => {
+                Helper.toggleElementClassIf(sallaButton, 'code-to-copy', 'copied', () => true);
+            }, 1000);
+        });
+        const span3 = document.createElement('span');
+        span3.textContent = '#' + order.reference_id;
+        const copyIcon = document.createElement('i');
+        copyIcon.classList.add('sicon-swap-stroke', 's-orders-copy-to-clipboard-button-icon');
+        // Check the text direction
+        let isRTL = salla.config.get('theme.is_rtl', true);
+        if (isRTL) {
+            // Append the icon and then the span
+            sallaButton.appendChild(copyIcon);
+            sallaButton.appendChild(span3);
+        }
+        else {
+            // Append the span and then the icon
+            sallaButton.appendChild(span3);
+            sallaButton.appendChild(copyIcon);
+        }
+        div2.appendChild(sallaButton);
+        div1.appendChild(div2);
+        td1.appendChild(div1);
+        tr.appendChild(td1);
+        const td2 = document.createElement('td');
+        td2.classList.add('s-orders-table-tbody-tr-td');
+        const div3 = document.createElement('div');
+        div3.classList.add('s-orders-table-tbody-tr-td-content');
+        const span4 = document.createElement('span');
+        span4.classList.add('s-orders-mobile-title');
+        span4.textContent = this.totalOrderText + ':';
+        const div4 = document.createElement('div');
+        div4.innerHTML = salla.money(order.total);
+        const anchor2 = document.createElement('a');
+        anchor2.href = order.url;
+        div3.appendChild(span4);
+        div3.appendChild(div4);
+        div3.appendChild(anchor2);
+        td2.appendChild(div3);
+        tr.appendChild(td2);
+        const td3 = document.createElement('td');
+        td3.classList.add('s-orders-table-tbody-tr-td');
+        const div5 = document.createElement('div');
+        div5.classList.add('s-orders-table-tbody-tr-td-content');
+        const span5 = document.createElement('span');
+        span5.classList.add('s-orders-mobile-title');
+        span5.textContent = this.orderDateText + ':';
+        const div6 = document.createElement('div');
+        div6.textContent = Helper.formatDateFromString(order.created_at.date, salla.helpers.number, this.languageCode);
+        const anchor3 = document.createElement('a');
+        anchor3.href = order.url;
+        div5.appendChild(span5);
+        div5.appendChild(div6);
+        div5.appendChild(anchor3);
+        td3.appendChild(div5);
+        tr.appendChild(td3);
+        const td4 = document.createElement('td');
+        td4.classList.add('s-orders-table-tbody-tr-td');
+        const div7 = document.createElement('div');
+        div7.classList.add('s-orders-table-tbody-tr-td-content');
+        const span6 = document.createElement('span');
+        span6.classList.add('s-orders-mobile-title');
+        span6.textContent = this.orderStatusText + ':';
+        const statusSpan = document.createElement('span');
+        statusSpan.classList.add('s-orders-status-container');
+        statusSpan.style.color = order.status.color;
+        const statusIcon = document.createElement('i');
+        statusIcon.classList.add(order.status.icon);
+        const statusName = document.createElement('span');
+        statusName.textContent = order.status.name;
+        statusSpan.appendChild(statusIcon);
+        statusSpan.appendChild(statusName);
+        div7.appendChild(span6);
+        div7.appendChild(statusSpan);
+        const starIcon = document.createElement('i');
+        starIcon.classList.add('sicon-star2', 's-orders-status-rated', order.is_rated ? 's-orders-rated-text' : 's-orders-unrated-text');
+        div7.appendChild(starIcon);
+        const anchor4 = document.createElement('a');
+        anchor4.href = order.url;
+        div7.appendChild(anchor4);
+        td4.appendChild(div7);
+        tr.appendChild(td4);
+        return tr;
+    }
+    render() {
+        if (this.showPlaceholder) {
+            return h("div", { class: "s-orders-no-content" }, h("i", { class: "sicon-packed-box icon" }), h("p", null, this.noOrderText));
+        }
+        return h("div", { class: "s-orders-wrapper" }, h("table", { class: "s-orders-table" }, h("thead", { class: "s-orders-table-head" }, h("tr", { class: "s-orders-table-head-tr" }, h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderNumberText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.totalOrderText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderDateText), h("th", { class: "s-orders-table-head-tr-th", scope: "col" }, this.orderStatusText))), h("tbody", { class: "s-orders-table-tbody", ref: (el) => (this.wrapper = el) })), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => this.status = status }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ?? this.load_more_text_trans), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))));
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => this.loadInitialData())
+            .then(() => this.initiateInfiniteScroll());
+    }
+    get host() { return this; }
+    static get style() { return sallaOrdersCss; }
+}, [0, "salla-orders", {
+        "params": [16],
+        "loadMoreText": [1, "load-more-text"],
+        "orderNumberText": [32],
+        "totalOrderText": [32],
+        "orderDateText": [32],
+        "orderStatusText": [32],
+        "noOrderText": [32],
+        "load_more_text_trans": [32],
+        "languageCode": [32],
+        "orders": [32],
+        "pagination": [32],
+        "hasInfiniteScroll": [32],
+        "total": [32],
+        "nextPage": [32],
+        "showPlaceholder": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-orders", "salla-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-orders":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaOrder);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaOrders = SallaOrder;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrders, defineCustomElement };

package/dist/components/salla-payments.js

@@ -1,4 +1,79 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as a,Host as i}from"@stencil/core/internal/client";const l=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.exclude=[]}componentWillLoad(){return salla.onReady().then((()=>{if("string"==typeof this.exclude)try{this.exclude=JSON.parse(this.exclude)}catch(s){salla.logger.error("salla-payments:: failed to parse the exclude props!",this.exclude),this.exclude=[]}this.paymentSlot=this.host.querySelector('[slot="payment"]')?.innerHTML||'<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="{payment}" /></li>',this.sbcSlot=this.host.querySelector('[slot="sbc"]')?.innerHTML||'<li class="s-payments-list-item"><a target="_blank" href="{link}"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" class="s-payments-sbc-image" alt="SBC" /></a></li>',this.codSlot=this.host.querySelector('[slot="cod"]')?.innerHTML||'<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="COD" /></li>',this.payments=salla.config.get("store.settings.payments")}))}render(){const s=!this.exclude.includes("made-in-ksa")&&salla.config.get("store.settings.made_in_ksa"),t=this.exclude.includes("sbc")?null:salla.config.get("store.settings.certificate.id");return a(i,{key:"6afc19aa3f0a72847228c7de6c783c3ba9f38ee9",class:"s-payments-list-wrap"},a("ul",{key:"8311e5bc5aa86535d77ccad64b56c5ddb3028f87",class:"s-payments-list"},s&&a("li",{key:"5b8769a8c89273363e835905de1cd9f02fec1df6",class:"s-payments-list-item"},a("img",{key:"7b42b4a0a14f4bdab3138e79c37ad62e74247732",width:"100%",height:"100%",decoding:"async",loading:"lazy",src:salla.url.cdn("images/made-in-ksa.svg",58,58),alt:"made in KSA certified"})),this.payments.map((s=>a("div","cod"==s?{id:"cod-slot",innerHTML:this.codSlot.replace(/\{image\}/g,salla.url.cdn("images/payment/cod_mini.png",58,58))}:{id:"payment-slot",innerHTML:this.paymentSlot.replace(/\{image\}/g,salla.url.cdn(`images/payment/${s}_mini.png`,58,58)).replace(/\{payment\}/g,s)}))),t&&a("div",{key:"253ef6d5520979a22c48f1e63c53eab3fd5e21ad",id:"sbc-slot",innerHTML:this.sbcSlot.replace(/\{image\}/g,salla.url.cdn("images/sbc.png",58,58)).replace(/\{link\}/g,"https://eauthenticate.saudibusiness.gov.sa/certificate-details/"+t)})))}componentDidRender(){this.host.querySelectorAll("#payment-slot").forEach((s=>s.replaceWith(s.firstChild))),this.host.querySelectorAll("#sbc-slot").forEach((s=>s.replaceWith(s.firstChild))),this.host.querySelectorAll("#cod-slot").forEach((s=>s.replaceWith(s.firstChild))),this.host.querySelector('[slot="payment"]')?.remove(),this.host.querySelector('[slot="sbc"]')?.remove(),this.host.querySelector('[slot="cod"]')?.remove()}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-payments",{exclude:[1040]}]);function n(){"undefined"!=typeof customElements&&["salla-payments"].forEach((t=>{"salla-payments"===t&&(customElements.get(s(t))||customElements.define(s(t),l))}))}n();const c=l,d=n;export{c as SallaPayments,d as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaPaymentsCss = ":host{display:block}";
+
+const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Array of the payments/items that are not supported, ex: ["sbc", "made-in-ksa", "cod", "mada", ""].
+         */
+        this.exclude = [];
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => {
+            if (typeof this.exclude === 'string') {
+                try {
+                    this.exclude = JSON.parse(this.exclude);
+                }
+                catch (error) {
+                    salla.logger.error('salla-payments:: failed to parse the exclude props!', this.exclude);
+                    this.exclude = [];
+                }
+            }
+            this.paymentSlot = this.host.querySelector('[slot="payment"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="{payment}" /></li>`;
+            this.sbcSlot = this.host.querySelector('[slot="sbc"]')?.innerHTML || `<li class="s-payments-list-item"><a target="_blank" href="{link}"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" class="s-payments-sbc-image" alt="SBC" /></a></li>`;
+            this.codSlot = this.host.querySelector('[slot="cod"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="COD" /></li>`;
+            this.payments = salla.config.get('store.settings.payments');
+        });
+    }
+    render() {
+        const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
+        const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
+        return (h(Host, { key: '6afc19aa3f0a72847228c7de6c783c3ba9f38ee9', class: "s-payments-list-wrap" }, h("ul", { key: '8311e5bc5aa86535d77ccad64b56c5ddb3028f87', class: "s-payments-list" }, madeInKSA && h("li", { key: '5b8769a8c89273363e835905de1cd9f02fec1df6', class: "s-payments-list-item" }, h("img", { key: '7b42b4a0a14f4bdab3138e79c37ad62e74247732', width: "100%", height: "100%", decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
+            h("div", { id: "cod-slot", innerHTML: this.codSlot
+                    .replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
+            h("div", { id: "payment-slot", innerHTML: this.paymentSlot
+                    .replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
+                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '253ef6d5520979a22c48f1e63c53eab3fd5e21ad', id: "sbc-slot", innerHTML: this.sbcSlot
+                .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
+                .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
+    }
+    componentDidRender() {
+        //todo:: double check about the following workaround to reduce the dom length, it looks unusal
+        this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));
+        this.host.querySelectorAll('#sbc-slot').forEach(el => el.replaceWith(el.firstChild));
+        this.host.querySelectorAll('#cod-slot').forEach(el => el.replaceWith(el.firstChild));
+        this.host.querySelector('[slot="payment"]')?.remove();
+        this.host.querySelector('[slot="sbc"]')?.remove();
+        this.host.querySelector('[slot="cod"]')?.remove();
+    }
+    get host() { return this; }
+    static get style() { return sallaPaymentsCss; }
+}, [0, "salla-payments", {
+        "exclude": [1040]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-payments"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-payments":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaPayments$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaPayments = SallaPayments$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaPayments, defineCustomElement };

package/dist/components/salla-placeholder.js

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

package/dist/components/salla-placeholder2.js

@@ -1,4 +1,69 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as s,HTMLElement as c,h as t,Host as l}from"@stencil/core/internal/client";const a=s(class extends c{constructor(e){super(),!1!==e&&this.__registerHost(),this.translationLoaded=!1,this.icon='\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>inbox</title>\n<path d="M31.984 19.797l-2.667-17.333c-0.1-0.651-0.659-1.131-1.317-1.131h-24c-0.659 0-1.217 0.48-1.317 1.131l-2.667 17.333c-0.011 0.067-0.016 0.135-0.016 0.203v6.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-6.667c0-0.068-0.005-0.136-0.016-0.203zM5.144 4h21.712l2.256 14.667h-9.112c-0.736 0-1.333 0.596-1.333 1.333 0 1.471-1.196 2.667-2.667 2.667s-2.667-1.196-2.667-2.667c0-0.737-0.597-1.333-1.333-1.333h-9.112zM29.333 26.667c0 0.736-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.597-1.333-1.333v-5.333h8.168c0.593 2.299 2.684 4 5.165 4s4.571-1.701 5.165-4h8.168z"></path>\n</svg>\n',this.alignment="left",this.iconSize="md",salla.lang.onLoaded((()=>{this.translationLoaded=!0}))}alignmentClass(){return{"s-placeholder-wrapper":!0,"s-placeholder-align-left":"left"==this.alignment,"s-placeholder-align-center":"center"==this.alignment,"s-placeholder-align-right":"right"==this.alignment}}render(){return t(l,{key:"5b47d9b6a9428741dfb434aeb60e648c416978e8",class:this.alignmentClass()},t("div",{key:"e9b7adc6596ac9d237dd6902f880885851a3f357",class:`s-placeholder-icon s-placeholder-icon-${this.iconSize}`,innerHTML:this.icon}),t("div",{key:"7ccee11d11b9f0e7c10fedb316c1b92b1977d0c9",class:"s-placeholder-title"},t("slot",{key:"4ebd518a89fdbb490b50fb5ce255bbddd467844a",name:"title"},t("span",{key:"c4d27cffdfb98c33ec1ccfe375e0540be2ac7b63"},salla.lang.get("common.elements.no_options")))),t("div",{key:"967b688ef6d2aae128c21edf496b42d1fd804afa",class:"s-placeholder-description"},t("slot",{key:"2e5bb58b4ed6ebafd18b12e291bc90fba7296965",name:"description"},t("span",{key:"83f78b4924b97cec60dd1d6e25f4ddf0eefb324a"},salla.lang.get("common.errors.empty_results")))))}static get style(){return""}},[260,"salla-placeholder",{icon:[1],alignment:[1],iconSize:[1,"icon-size"],translationLoaded:[32]}]);function n(){"undefined"!=typeof customElements&&["salla-placeholder"].forEach((s=>{"salla-placeholder"===s&&(customElements.get(e(s))||customElements.define(e(s),a))}))}n();export{a as S,n as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+var Inbox = `<!-- 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>inbox</title>
+<path d="M31.984 19.797l-2.667-17.333c-0.1-0.651-0.659-1.131-1.317-1.131h-24c-0.659 0-1.217 0.48-1.317 1.131l-2.667 17.333c-0.011 0.067-0.016 0.135-0.016 0.203v6.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-6.667c0-0.068-0.005-0.136-0.016-0.203zM5.144 4h21.712l2.256 14.667h-9.112c-0.736 0-1.333 0.596-1.333 1.333 0 1.471-1.196 2.667-2.667 2.667s-2.667-1.196-2.667-2.667c0-0.737-0.597-1.333-1.333-1.333h-9.112zM29.333 26.667c0 0.736-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.597-1.333-1.333v-5.333h8.168c0.593 2.299 2.684 4 5.165 4s4.571-1.701 5.165-4h8.168z"></path>
+</svg>
+`;
+
+const sallaPlaceholderCss = "";
+
+const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class SallaPlaceholder extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.translationLoaded = false;
+        /**
+         * Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon
+         */
+        this.icon = Inbox;
+        /**
+         * Defines the alignment of contents. Defaults to [`left`]
+         */
+        this.alignment = 'left';
+        /**
+          * The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
+          */
+        this.iconSize = 'md';
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+        });
+    }
+    alignmentClass() {
+        return {
+            's-placeholder-wrapper': true,
+            's-placeholder-align-left': this.alignment == 'left',
+            's-placeholder-align-center': this.alignment == 'center',
+            's-placeholder-align-right': this.alignment == 'right',
+        };
+    }
+    render() {
+        return (h(Host, { key: '5b47d9b6a9428741dfb434aeb60e648c416978e8', class: this.alignmentClass() }, h("div", { key: 'e9b7adc6596ac9d237dd6902f880885851a3f357', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '7ccee11d11b9f0e7c10fedb316c1b92b1977d0c9', class: "s-placeholder-title" }, h("slot", { key: '4ebd518a89fdbb490b50fb5ce255bbddd467844a', name: 'title' }, h("span", { key: 'c4d27cffdfb98c33ec1ccfe375e0540be2ac7b63' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '967b688ef6d2aae128c21edf496b42d1fd804afa', class: "s-placeholder-description" }, h("slot", { key: '2e5bb58b4ed6ebafd18b12e291bc90fba7296965', name: 'description' }, h("span", { key: '83f78b4924b97cec60dd1d6e25f4ddf0eefb324a' }, salla.lang.get('common.errors.empty_results'))))));
+    }
+    static get style() { return sallaPlaceholderCss; }
+}, [4, "salla-placeholder", {
+        "icon": [1],
+        "alignment": [1],
+        "iconSize": [1, "icon-size"],
+        "translationLoaded": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-placeholder"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-placeholder":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaPlaceholder);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaPlaceholder as S, defineCustomElement as d };

package/dist/components/salla-price-range.js

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