@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-app-install-alert.js

@@ -1,4 +1,94 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as a,HTMLElement as l,h as s,Host as i}from"@stencil/core/internal/client";const e=a(class extends l{constructor(t){super(),!1!==t&&this.__registerHost(),this.alertDelay=null,this.data=salla.config.get("store.app_install_prompt"),this.open=!1,this.closing=!1}connectedCallback(){salla.onReady((()=>{if(this.data=salla.config.get("store.app_install_prompt"),this.isMobileOrTabletDevice()){if(!this.data)return salla.logger.error("Failed to retrieve salla-app-install-alert config");this.ctaLink=salla.url.get("app"),this.alertDelay=setTimeout((()=>this.open=!0),3e3)}}))}disconnectedCallback(){clearTimeout(this.alertDelay)}isMobileOrTabletDevice(t=1024){if("undefined"==typeof window||"undefined"==typeof navigator||"undefined"==typeof document)return!1;const a=window.matchMedia(`(max-width: ${t}px)`).matches,l=/Macintosh|Android|iPhone|iPad|iPod/i.test(navigator.userAgent),s="ontouchstart"in window||"ontouchend"in document||navigator.maxTouchPoints>0;return l&&a&&s}closeAlert(){salla.storage.set("app_install_prompt_disabled",!0),this.closing=!0,this.host.addEventListener("animationend",(()=>{this.closing=!1,this.open=!1}),{once:!0})}shouldShowAlert(){return!salla.config.isMobileApp()}render(){return this.data&&this.shouldShowAlert()?s(i,{class:`s-app-install-alert-wrapper ${this.open?"open":""} ${this.closing?"closing":""}`,position:this.data.position},s("div",null,s("img",{src:this.data.icon,width:"58",height:"58",alt:""+salla.config.get("store.name")})),s("div",{class:"s-app-install-alert-content"},s("h2",{class:"s-app-install-alert-title"},this.data.title),s("p",{class:"s-app-install-alert-sub-title"},this.data.sub_title," "," ",s("a",{href:this.ctaLink,target:"_blank","aria-label":"download app",class:"s-app-install-alert-cta"},salla.lang.getWithDefault("blocks.footer.download_app_now","حمله الآن")))),s("button",{class:"s-app-install-alert-cancel-button","aria-label":"close alert",onClick:()=>this.closeAlert()},s("i",{class:"sicon-cancel"}))):null}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-app-install-alert",{data:[32],ctaLink:[32],open:[32],closing:[32]}]);function n(){"undefined"!=typeof customElements&&["salla-app-install-alert"].forEach((a=>{"salla-app-install-alert"===a&&(customElements.get(t(a))||customElements.define(t(a),e))}))}n();const o=e,r=n;export{o as SallaAppInstallAlert,r as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaAppInstallAlertCss = ":host{display:block}";
+
+const SallaAppInstallAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppInstallAlert extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.alertDelay = null;
+        this.data = salla.config.get('store.app_install_prompt');
+        this.open = false;
+        this.closing = false;
+    }
+    connectedCallback() {
+        salla.onReady(() => {
+            this.data = salla.config.get('store.app_install_prompt');
+            if (!this.isMobileOrTabletDevice())
+                return;
+            if (!this.data)
+                return salla.logger.error('Failed to retrieve salla-app-install-alert config');
+            this.ctaLink = salla.url.get('app');
+            this.alertDelay = setTimeout(() => (this.open = true), 3000);
+        });
+    }
+    disconnectedCallback() {
+        clearTimeout(this.alertDelay);
+    }
+    /**
+     * Check if the website opens from mobile or tablet devices only (android/ios).
+     * Uses matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed).
+     * Guards against SSR/non-browser contexts (window, navigator, document).
+     *
+     * @param {number} screen the width of the biggest screen to be checked (default 1024)
+     * @returns {boolean} true if it is mobile or tablet else false
+     */
+    isMobileOrTabletDevice(screen = 1024) {
+        if (typeof window === 'undefined' || typeof navigator === 'undefined' || typeof document === 'undefined') {
+            return false;
+        }
+        const screenWidth = window.matchMedia(`(max-width: ${screen}px)`).matches;
+        const userAgentCheck = /Macintosh|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+        const hasTouch = 'ontouchstart' in window ||
+            'ontouchend' in document ||
+            navigator.maxTouchPoints > 0;
+        return userAgentCheck && screenWidth && hasTouch;
+    }
+    closeAlert() {
+        salla.storage.set('app_install_prompt_disabled', true);
+        // handle closing animation first, then close the banner
+        this.closing = true;
+        this.host.addEventListener('animationend', () => {
+            this.closing = false;
+            this.open = false;
+        }, { once: true });
+    }
+    shouldShowAlert() {
+        const isMobileApp = salla.config.isMobileApp();
+        if (isMobileApp)
+            return false;
+        return true;
+    }
+    render() {
+        return this.data && this.shouldShowAlert() ? (h(Host, { class: `s-app-install-alert-wrapper ${this.open ? 'open' : ''} ${this.closing ? 'closing' : ''}`, position: this.data.position }, h("div", null, h("img", { src: this.data.icon, width: "58", height: "58", alt: `${salla.config.get('store.name')}` })), h("div", { class: "s-app-install-alert-content" }, h("h2", { class: "s-app-install-alert-title" }, this.data.title), h("p", { class: "s-app-install-alert-sub-title" }, this.data.sub_title, " ", " ", h("a", { href: this.ctaLink, target: "_blank", "aria-label": "download app", class: "s-app-install-alert-cta" }, salla.lang.getWithDefault('blocks.footer.download_app_now', 'حمله الآن')))), h("button", { class: "s-app-install-alert-cancel-button", "aria-label": "close alert", onClick: () => this.closeAlert() }, h("i", { class: "sicon-cancel" })))) : null;
+    }
+    get host() { return this; }
+    static get style() { return sallaAppInstallAlertCss; }
+}, [0, "salla-app-install-alert", {
+        "data": [32],
+        "ctaLink": [32],
+        "open": [32],
+        "closing": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-app-install-alert"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-app-install-alert":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaAppInstallAlert$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaAppInstallAlert = SallaAppInstallAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaAppInstallAlert, defineCustomElement };

package/dist/components/salla-apps-icons.js

@@ -1,4 +1,66 @@
 /*!
  * 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";const i=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.apps=salla.config.get("store.apps"),this.appSlot=this.host.querySelector('[slot="app"]')?.innerHTML||'<img alt="{name}" src="{icon}" width="135" height="40" decoding="async" loading="lazy" />',salla.onReady((()=>{this.apps=salla.config.get("store.apps")})),salla.lang.onLoaded((()=>{this.appsTitle=salla.lang.get("blocks.footer.download_apps")}))}getAppsArray(){return Object.entries(this.apps).map((([s,t])=>({name:s,value:t})))}componentWillLoad(){return new Promise((s=>salla.onReady(s)))}render(){const s=this.getAppsArray();if(!Array.isArray(s)||s.length)return a(l,{class:"s-apps-icons"},!this.hideTitle&&a("h3",null,this.appsTitle),a("div",{class:{"s-apps-icons-list":!0,vertical:this.vertical}},s.map(((s,t)=>a("a",{key:t,href:s.value,rel:"noreferrer",target:"_blank",class:"s-apps-icons-item",id:"app-slot",innerHTML:this.appSlot.replace(/\{icon\}/g,salla.url.cdn(`images/${s.name}.png`)).replace(/\{name\}/g,s.name)})))))}componentDidRender(){this.host.querySelector('[slot="app"]')?.remove()}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-apps-icons",{hideTitle:[4,"hide-title"],appsTitle:[1,"apps-title"],vertical:[4],apps:[32]}]);function n(){"undefined"!=typeof customElements&&["salla-apps-icons"].forEach((t=>{"salla-apps-icons"===t&&(customElements.get(s(t))||customElements.define(s(t),i))}))}n();const o=i,p=n;export{o as SallaAppsIcons,p as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaAppsIconsCss = ":host{display:block}";
+
+const SallaAppsIcons$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppsIcons extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.apps = salla.config.get('store.apps');
+        this.appSlot = this.host.querySelector('[slot="app"]')?.innerHTML || `<img alt="{name}" src="{icon}" width="135" height="40" decoding="async" loading="lazy" />`;
+        salla.onReady(() => {
+            this.apps = salla.config.get('store.apps');
+        });
+        salla.lang.onLoaded(() => {
+            this.appsTitle = salla.lang.get('blocks.footer.download_apps');
+        });
+    }
+    getAppsArray() {
+        return Object.entries(this.apps)
+            .map(([name, value]) => ({ name, value }));
+    }
+    componentWillLoad() {
+        return new Promise(resolve => salla.onReady(resolve));
+    }
+    render() {
+        const appsArray = this.getAppsArray();
+        if (Array.isArray(appsArray) && !appsArray.length) {
+            return;
+        }
+        return (h(Host, { class: "s-apps-icons" }, !this.hideTitle && h("h3", null, this.appsTitle), h("div", { class: { "s-apps-icons-list": true, "vertical": this.vertical } }, appsArray.map((app, index) => (h("a", { key: index, href: app.value, rel: "noreferrer", target: "_blank", class: "s-apps-icons-item", id: "app-slot", innerHTML: this.appSlot
+                .replace(/\{icon\}/g, salla.url.cdn(`images/${app.name}.png`))
+                .replace(/\{name\}/g, app.name) }))))));
+    }
+    componentDidRender() {
+        this.host.querySelector('[slot="app"]')?.remove();
+    }
+    get host() { return this; }
+    static get style() { return sallaAppsIconsCss; }
+}, [0, "salla-apps-icons", {
+        "hideTitle": [4, "hide-title"],
+        "appsTitle": [1, "apps-title"],
+        "vertical": [4],
+        "apps": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-apps-icons"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-apps-icons":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaAppsIcons$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaAppsIcons = SallaAppsIcons$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaAppsIcons, defineCustomElement };

package/dist/components/salla-booking-field.js

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

package/dist/components/salla-booking-field2.js

@@ -1,4 +1,224 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as s,createEvent as a,h as i,Host as n}from"@stencil/core/internal/client";import{d as o}from"./salla-button2.js";import{d as l}from"./salla-loading2.js";import{d as c}from"./salla-modal2.js";const r=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.invalidInput=a(this,"invalidInput",7),this.bookNowLabel=salla.lang.get("pages.cart.book_an_appointment","حجز موعد"),this.editLabel=salla.lang.get("pages.cart.edit_an_appointment","تعديل الموعد"),this.bookedLabel=salla.lang.get("pages.cart.booked_successfully","تمت اضافة الموعد بنجاح"),this.selectDate=salla.lang.get("pages.cart.select_appointment_date","حدد تاريخ الموعد"),this.bookingUrl="",this.iframeReady=!1,this.reservations=[],salla.lang.onLoaded((()=>this.setTranslations())),Salla.event.on("booking::open",(e=>this.handleBookingOpen(e)))}async setTranslations(){const e=(e,t,s)=>new Promise((a=>{salla.helpers.setNested(salla.lang.messages[e],t,s),a(!0)}));await e("ar.trans","pages.cart.book_an_appointment","حجز موعد"),await e("en.trans","pages.cart.book_an_appointment","Book an Appointment"),await e("ar.trans","pages.cart.edit_an_appointment","تعديل الموعد"),await e("en.trans","pages.cart.edit_an_appointment","Edit an Appointment"),await e("ar.trans","pages.cart.booked_successfully","تمت اضافة الموعد بنجاح"),await e("en.trans","pages.cart.booked_successfully","Booked Successfully"),await e("ar.trans","pages.cart.select_appointment_date","حدد تاريخ الموعد"),await e("en.trans","pages.cart.select_appointment_date","Select appointment date"),this.bookNowLabel=salla.lang.get("pages.cart.book_an_appointment"),this.editLabel=salla.lang.get("pages.cart.edit_an_appointment"),this.bookedLabel=salla.lang.get("pages.cart.booked_successfully"),this.selectDate=salla.lang.get("pages.cart.select_appointment_date")}openBookingModal(e,t=!1){if(!t||e.detail&&"number"==typeof e.detail&&e.detail===this.productId)return salla.config.isGuest()?(this.setAfterReloadEvent("booking::open-after-reload",this.productId),void salla.event.dispatch("login::open")):void salla.booking.add(this.productId,!1).then((e=>{if("booking"!==e.data.redirect.to)throw new Error("Unexpected redirect!");salla.event.dispatch("booking::open",{url:e.data.redirect.url,id:this.productId})})).catch((e=>{salla.error(salla.lang.get("common.errors.error_occurred")),salla.logger.error(e.response||e)}))}handleBookingOpen(e){e.id===this.productId&&(this.bookingUrl=salla.url.addParamToUrl("product_id",e.id,e.url),this.iframeReady=!0,setTimeout((()=>{this.modal.setTitle(this.selectDate),this.modal.open()}),100))}setAfterReloadEvent(e,t){salla.storage.set("afterReloadEvent",{event:e,payload:t})}emitAfterReloadEvent(){const e=salla.storage.get("afterReloadEvent");if(e&&e.event){const t=new CustomEvent(e.event,{detail:e.payload});window.dispatchEvent(t),salla.storage.remove("afterReloadEvent")}}componentWillLoad(){this.option&&this.option.details.length&&(this.reservations=this.option.details)}componentDidLoad(){window.addEventListener("booking::open-after-reload",(e=>this.openBookingModal(e,!0))),this.emitAfterReloadEvent(),window.addEventListener("message",this.handleMessageEvent.bind(this)),this.reservationsInput.addEventListener("invalid",(e=>this.invalidInput.emit(e))),this.reservationsInput.addEventListener("input",(()=>{this.reservationsInput.setCustomValidity(""),this.reservationsInput.reportValidity()}))}handleMessageEvent(e){if("booking"!==e.data.source)return;const t=e.data.type,s=e.data.message;if(localStorage.getItem("debug")&&console.log(`Received an action:${t}`,e.data),"error"===t){if(s.fields?.reservation)return void salla.notify.error(s.fields.reservation[0]);const e=Object.values(s.fields||[s.message]).flat().map((e=>`<li>${e}</li>`)).join("");salla.notify.error(`<ul>${e}</ul>`)}if("success"===t){if(Number(s.productId)!==Number(this.productId))return;this.reservations=s.data.reservations.map((e=>{if(e.time&&e.time.length>0){const t=e.time[0];return{date:e.date,day:e.day,from_timestamp:t.from,to_timestamp:t.to}}return null})).filter((e=>null!==e)),salla.notify.success(this.bookedLabel),this.modal?.close(),setTimeout((()=>window.location.reload()))}"height"===t&&(this.iframe.height=s?.height+"px")}bookingModal(){return i("salla-modal",{class:"s-booking-field-modal",ref:e=>this.modal=e,width:"md",position:"middle",noPadding:!0},i("iframe",{ref:e=>this.iframe=e,src:this.bookingUrl,frameborder:"0"}))}renderReservationDate(e){return i("span",{class:e.from_timestamp?"s-booking-field-reservations-has-time":""},i("i",{class:"s-booking-field-reservations-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>calendar</title>\n<path d="M28 2.667h-2.667v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-21.333c0-2.205-1.795-4-4-4zM29.333 28c0 0.736-0.599 1.333-1.333 1.333h-24c-0.736 0-1.333-0.599-1.333-1.333v-13.333h26.667zM29.333 12h-26.667v-5.333c0-0.736 0.599-1.333 1.333-1.333h2.667v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333z"></path>\n</svg>\n'}),e.date)}renderReservationTime(e){return e.from_timestamp?i("span",{class:"s-booking-field-reservations-time"},i("i",{class:"s-booking-field-reservations-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>time</title>\n<path d="M16 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.333zM16 8c-0.736 0-1.333 0.596-1.333 1.333v6.667h-4c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h5.333c0.736 0 1.333-0.596 1.333-1.333v-8c0-0.737-0.597-1.333-1.333-1.333z"></path>\n</svg>\n'}),i("span",null,e.from_timestamp," - ",e.to_timestamp)):""}render(){return i(n,{key:"04c9e3dc3dc825bd6905221d858c260f7ca34748"},i("div",{key:"07ec38cec1bd1798640dd7ea9592bb3b17d945c6",class:"s-booking-field-main"},this.option.required||this.reservations.length>0?i("div",{class:"s-booking-field-price"},i("span",{innerHTML:salla.money(this.option.price)})):"",i("salla-button",{key:"6b71889cfc0429d15c466a6f194df31549f09786",class:"s-booking-field-book-now",size:"small",loaderPosition:"center",fill:"outline",onClick:e=>this.openBookingModal(e,!1)},i("span",{key:"a16f8db6f52c7751ea605efcae04057ca0dc5b61",class:"s-booking-field-book-now-content"},i("span",{key:"95f6086a599bcc620c87ece6c6ae9620dba15581",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>calendar-time</title>\n<path d="M22.667 17.333c-0.737 0-1.333 0.596-1.333 1.333v2.667h-2.667c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h4c0.737 0 1.333-0.596 1.333-1.333v-4c0-0.737-0.596-1.333-1.333-1.333zM28 2.667h-2.667v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h5.363c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-5.363c-0.736 0-1.333-0.597-1.333-1.333v-21.333c0-0.736 0.597-1.333 1.333-1.333h2.667v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333v2.696c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.696c0-2.205-1.795-4-4-4zM22 12c-5.515 0-10 4.485-10 10s4.485 10 10 10 10-4.485 10-10-4.485-10-10-10zM22 29.333c-4.043 0-7.333-3.291-7.333-7.333s3.291-7.333 7.333-7.333 7.333 3.291 7.333 7.333-3.291 7.333-7.333 7.333z"></path>\n</svg>\n'}),this.reservations.length?this.editLabel:this.bookNowLabel))),this.reservations.length>0&&i("div",{key:"b3615100bbfff3d98d0ac99145aaf53449790c94",class:"s-booking-field-reservations"},this.reservations.map(((e,t)=>i("div",{key:t,class:"s-booking-field-reservations-item"},this.renderReservationDate(e),this.renderReservationTime(e))))),i("input",{key:"126f14f2e520b8696bc7450e209bad30b267878b",class:"s-hidden",name:this.option.name,required:this.option.required,value:"[]"===JSON.stringify(this.reservations)?"":JSON.stringify(this.reservations),ref:e=>this.reservationsInput=e}),this.iframeReady&&this.bookingModal())}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-booking-field",{option:[16],productId:[2,"product-id"],bookNowLabel:[32],editLabel:[32],bookedLabel:[32],selectDate:[32],bookingUrl:[32],iframeReady:[32],reservations:[32],reservationsInput:[32]}]);function d(){"undefined"!=typeof customElements&&["salla-booking-field","salla-button","salla-loading","salla-modal"].forEach((t=>{switch(t){case"salla-booking-field":customElements.get(e(t))||customElements.define(e(t),r);break;case"salla-button":customElements.get(e(t))||o();break;case"salla-loading":customElements.get(e(t))||l();break;case"salla-modal":customElements.get(e(t))||c()}}))}d();export{r as S,d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$2 } from './salla-loading2.js';
+import { d as defineCustomElement$1 } from './salla-modal2.js';
+
+var BookingTime = `<!-- 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>calendar-time</title>
+<path d="M22.667 17.333c-0.737 0-1.333 0.596-1.333 1.333v2.667h-2.667c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h4c0.737 0 1.333-0.596 1.333-1.333v-4c0-0.737-0.596-1.333-1.333-1.333zM28 2.667h-2.667v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h5.363c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-5.363c-0.736 0-1.333-0.597-1.333-1.333v-21.333c0-0.736 0.597-1.333 1.333-1.333h2.667v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333v2.696c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.696c0-2.205-1.795-4-4-4zM22 12c-5.515 0-10 4.485-10 10s4.485 10 10 10 10-4.485 10-10-4.485-10-10-10zM22 29.333c-4.043 0-7.333-3.291-7.333-7.333s3.291-7.333 7.333-7.333 7.333 3.291 7.333 7.333-3.291 7.333-7.333 7.333z"></path>
+</svg>
+`;
+
+var Calendar = `<!-- 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>calendar</title>
+<path d="M28 2.667h-2.667v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-21.333c0-2.205-1.795-4-4-4zM29.333 28c0 0.736-0.599 1.333-1.333 1.333h-24c-0.736 0-1.333-0.599-1.333-1.333v-13.333h26.667zM29.333 12h-26.667v-5.333c0-0.736 0.599-1.333 1.333-1.333h2.667v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+var TimeIcon = `<!-- 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>time</title>
+<path d="M16 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.333zM16 8c-0.736 0-1.333 0.596-1.333 1.333v6.667h-4c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h5.333c0.736 0 1.333-0.596 1.333-1.333v-8c0-0.737-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+const sallaBookingFieldCss = ":host{display:block}";
+
+const SallaBookingField = /*@__PURE__*/ proxyCustomElement(class SallaBookingField extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.invalidInput = createEvent(this, "invalidInput", 7);
+        this.bookNowLabel = salla.lang.get('pages.cart.book_an_appointment', 'حجز موعد');
+        this.editLabel = salla.lang.get('pages.cart.edit_an_appointment', 'تعديل الموعد');
+        this.bookedLabel = salla.lang.get('pages.cart.booked_successfully', 'تمت اضافة الموعد بنجاح');
+        this.selectDate = salla.lang.get('pages.cart.select_appointment_date', 'حدد تاريخ الموعد');
+        this.bookingUrl = '';
+        this.iframeReady = false;
+        this.reservations = [];
+        // Load translations
+        salla.lang.onLoaded(() => this.setTranslations());
+        // Register event listeners
+        Salla.event.on('booking::open', (data) => this.handleBookingOpen(data));
+    }
+    async setTranslations() {
+        const setNestedAsync = (lang, key, value) => {
+            return new Promise((resolve) => {
+                salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                resolve(true);
+            });
+        };
+        await setNestedAsync('ar.trans', 'pages.cart.book_an_appointment', 'حجز موعد');
+        await setNestedAsync('en.trans', 'pages.cart.book_an_appointment', 'Book an Appointment');
+        await setNestedAsync('ar.trans', 'pages.cart.edit_an_appointment', 'تعديل الموعد');
+        await setNestedAsync('en.trans', 'pages.cart.edit_an_appointment', 'Edit an Appointment');
+        await setNestedAsync('ar.trans', 'pages.cart.booked_successfully', 'تمت اضافة الموعد بنجاح');
+        await setNestedAsync('en.trans', 'pages.cart.booked_successfully', 'Booked Successfully');
+        await setNestedAsync('ar.trans', 'pages.cart.select_appointment_date', 'حدد تاريخ الموعد');
+        await setNestedAsync('en.trans', 'pages.cart.select_appointment_date', 'Select appointment date');
+        this.bookNowLabel = salla.lang.get('pages.cart.book_an_appointment');
+        this.editLabel = salla.lang.get('pages.cart.edit_an_appointment');
+        this.bookedLabel = salla.lang.get('pages.cart.booked_successfully');
+        this.selectDate = salla.lang.get('pages.cart.select_appointment_date');
+    }
+    openBookingModal(event, afterReload = false) {
+        if (afterReload && (!event.detail || typeof event.detail !== 'number' || event.detail !== this.productId)) {
+            return;
+        }
+        if (salla.config.isGuest()) {
+            this.setAfterReloadEvent('booking::open-after-reload', this.productId);
+            salla.event.dispatch('login::open');
+            return;
+        }
+        salla.booking.add(this.productId, false)
+            .then((resp) => {
+            if (resp.data.redirect.to !== 'booking') {
+                throw new Error('Unexpected redirect!');
+            }
+            salla.event.dispatch('booking::open', { url: resp.data.redirect.url, id: this.productId });
+        })
+            .catch((error) => {
+            salla.error(salla.lang.get('common.errors.error_occurred'));
+            salla.logger.error(error.response || error);
+        });
+    }
+    handleBookingOpen(data) {
+        if (data.id !== this.productId)
+            return;
+        this.bookingUrl = salla.url.addParamToUrl('product_id', data.id, data.url);
+        this.iframeReady = true;
+        setTimeout(() => {
+            this.modal.setTitle(this.selectDate);
+            this.modal.open();
+        }, 100);
+    }
+    setAfterReloadEvent(event, payload) {
+        salla.storage.set('afterReloadEvent', { event, payload });
+    }
+    emitAfterReloadEvent() {
+        const eventDetails = salla.storage.get('afterReloadEvent');
+        if (eventDetails && eventDetails.event) {
+            const customEvent = new CustomEvent(eventDetails.event, {
+                detail: eventDetails.payload
+            });
+            window.dispatchEvent(customEvent);
+            salla.storage.remove('afterReloadEvent');
+        }
+    }
+    componentWillLoad() {
+        if (this.option && this.option.details.length) {
+            this.reservations = this.option.details;
+        }
+    }
+    componentDidLoad() {
+        window.addEventListener('booking::open-after-reload', (event) => this.openBookingModal(event, true));
+        this.emitAfterReloadEvent();
+        window.addEventListener('message', this.handleMessageEvent.bind(this));
+        this.reservationsInput.addEventListener('invalid', e => this.invalidInput.emit(e));
+        this.reservationsInput.addEventListener('input', () => {
+            this.reservationsInput.setCustomValidity('');
+            this.reservationsInput.reportValidity();
+        });
+    }
+    handleMessageEvent(event) {
+        if (event.data.source !== 'booking')
+            return;
+        const action = event.data.type;
+        const value = event.data.message;
+        if (localStorage.getItem('debug'))
+            console.log(`Received an action:${action}`, event.data);
+        if (action === 'error') {
+            if (value.fields?.reservation) {
+                salla.notify.error(value.fields.reservation[0]);
+                return;
+            }
+            const errorList = Object.values(value.fields || [value.message]).flat().map(error => `<li>${error}</li>`).join('');
+            salla.notify.error(`<ul>${errorList}</ul>`);
+        }
+        if (action === 'success') {
+            if (Number(value.productId) !== Number(this.productId))
+                return;
+            this.reservations = value.data.reservations.map(schedule => {
+                if (schedule.time && schedule.time.length > 0) {
+                    const timeSlot = schedule.time[0];
+                    return {
+                        date: schedule.date,
+                        day: schedule.day,
+                        from_timestamp: timeSlot.from,
+                        to_timestamp: timeSlot.to,
+                    };
+                }
+                return null;
+            }).filter(item => item !== null);
+            salla.notify.success(this.bookedLabel);
+            this.modal?.close();
+            setTimeout(() => window.location.reload());
+        }
+        if (action === 'height') {
+            this.iframe.height = value?.height + 'px';
+        }
+    }
+    bookingModal() {
+        return (h("salla-modal", { class: "s-booking-field-modal", ref: modal => (this.modal = modal), width: "md", position: "middle", noPadding: true }, h("iframe", { ref: iframe => (this.iframe = iframe), src: this.bookingUrl, frameborder: "0" })));
+    }
+    renderReservationDate(reservation) {
+        return (h("span", { class: reservation.from_timestamp ? 's-booking-field-reservations-has-time' : '' }, h("i", { class: "s-booking-field-reservations-icon", innerHTML: Calendar }), reservation.date));
+    }
+    renderReservationTime(reservation) {
+        if (!reservation.from_timestamp)
+            return '';
+        return (h("span", { class: "s-booking-field-reservations-time" }, h("i", { class: "s-booking-field-reservations-icon", innerHTML: TimeIcon }), h("span", null, reservation.from_timestamp, " - ", reservation.to_timestamp)));
+    }
+    render() {
+        return (h(Host, { key: '04c9e3dc3dc825bd6905221d858c260f7ca34748' }, h("div", { key: '07ec38cec1bd1798640dd7ea9592bb3b17d945c6', class: "s-booking-field-main" }, this.option.required || this.reservations.length > 0 ? h("div", { class: "s-booking-field-price" }, h("span", { innerHTML: salla.money(this.option.price) })) : '', h("salla-button", { key: '6b71889cfc0429d15c466a6f194df31549f09786', class: "s-booking-field-book-now", size: "small", loaderPosition: "center", fill: "outline", onClick: event => this.openBookingModal(event, false) }, h("span", { key: 'a16f8db6f52c7751ea605efcae04057ca0dc5b61', class: "s-booking-field-book-now-content" }, h("span", { key: '95f6086a599bcc620c87ece6c6ae9620dba15581', innerHTML: BookingTime }), this.reservations.length ? this.editLabel : this.bookNowLabel))), this.reservations.length > 0 && (h("div", { key: 'b3615100bbfff3d98d0ac99145aaf53449790c94', class: "s-booking-field-reservations" }, this.reservations.map((reservation, index) => (h("div", { key: index, class: "s-booking-field-reservations-item" }, this.renderReservationDate(reservation), this.renderReservationTime(reservation)))))), h("input", { key: '126f14f2e520b8696bc7450e209bad30b267878b', class: "s-hidden", name: this.option.name, required: this.option.required, value: JSON.stringify(this.reservations) === '[]' ? '' : JSON.stringify(this.reservations), ref: reservations => this.reservationsInput = reservations }), this.iframeReady && this.bookingModal()));
+    }
+    get host() { return this; }
+    static get style() { return sallaBookingFieldCss; }
+}, [0, "salla-booking-field", {
+        "option": [16],
+        "productId": [2, "product-id"],
+        "bookNowLabel": [32],
+        "editLabel": [32],
+        "bookedLabel": [32],
+        "selectDate": [32],
+        "bookingUrl": [32],
+        "iframeReady": [32],
+        "reservations": [32],
+        "reservationsInput": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-booking-field", "salla-button", "salla-loading", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaBookingField);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaBookingField as S, defineCustomElement as d };