@salla.sa/twilight-components 2.14.393 → 2.14.395

package/dist/components/salla-menu.js

@@ -1,4 +1,168 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as l,Fragment as n}from"@stencil/core/internal/client";import{d as i}from"./salla-products-list2.js";const a=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.source="header",this.useReactLink=!1,this.menus=[]}async componentWillLoad(){return salla.onReady((()=>{if(this.displayAllText=salla.lang.get("blocks.home.display_all"),!this.sourceValue||"json"!==this.source)return this.getMenuItems();this.menus="string"==typeof this.sourceValue?JSON.parse(this.sourceValue):this.sourceValue||[]}))}getMenuItems(){return salla.api.component.getMenus(this.source).then((({data:s})=>{this.menus=s})).catch((s=>{salla.logger.error("salla-menu::Error fetching menus",s)}))}hasChildren(s){return s?.children?.length>0}hasProducts(s){return s?.products?.length>0}getDesktopClasses(s,t){return`!hidden lg:!block ${t?"root-level lg:!inline-block":"relative"} ${s.products?" mega-menu":""}\n    ${this.hasChildren(s)?"has-children":""}`}getAttributes(s){return s.trim().split(" ").reduce(((s,t)=>{let[e,l]=t.split("=");return s[e]=l.replace(/"/g,""),s}),{})}getMobileMenu(s,t){const e=s.image?l("img",{src:s.image,class:"rounded-full",width:"48",height:"48",alt:s.title}):null;return l("li",{class:"lg:hidden text-sm font-bold",...this.getAttributes(s.attrs)},this.hasChildren(s)?l(n,null,l("span",{class:s.image?"!py-3":""},e,s.title),l("ul",null,l("li",{class:"text-sm font-bold"},l("a",{href:s.url,class:"text-gray-500"},t)),s.children.map((s=>this.getMobileMenu(s,t))))):l("a",{href:s.url,"aria-label":s.title||"category",class:"text-gray-500 "+(s.image?"!py-3":""),...this.getAttributes(s.link_attrs)},e,l("span",null,s.title||"")))}getDesktopMenu(s,t){return l("li",{class:this.getDesktopClasses(s,t),...this.getAttributes(s.attrs)},l("a",{href:s.url,"aria-label":s.title||"category",...this.getAttributes(s.link_attrs)},l("span",null,s.title)),this.hasChildren(s)?l("div",{class:"sub-menu shadow-default "+(this.hasProducts(s)?"w-full left-0 flex":"w-56")},l("ul",{class:this.hasProducts(s)?"w-56 shrink-0 m-8 rtl:ml-0 ltr:mr-0":""},s.children.map((s=>this.getDesktopMenu(s,!1)))),this.hasProducts(s)?l("salla-products-list",{source:"selected","shadow-on-hover":!0,"source-value":`[${s.products}]`}):null):null)}getFooterMenu(s){const t=this.topnav||this.limit?s.slice(0,this.limit||3):s;return l("div",null,l("div",{class:{"s-menu-footer-list":!this.topnav,"s-menu-topnav-list":this.topnav}},t.map((s=>l("a",{key:s.id,href:s.url,target:s.target,class:{"s-menu-footer-item":!this.topnav,"s-menu-topnav-item topnav-link-item right-side":this.topnav}},s.title)))))}getHeaderMenu(s){return s.map((s=>[this.getMobileMenu(s,this.displayAllText),this.getDesktopMenu(s,!0)]))}render(){return"footer"===this.source?this.getFooterMenu(this.menus):[l("nav",{key:"main-nav",id:"mobile-menu",class:"mobile-menu"},l("ul",{class:"main-menu"},this.getHeaderMenu(this.menus)),l("button",{class:"btn--close close-mobile-menu sicon-cancel lg:hidden"})),l("button",{key:"close-btn",class:"btn--close-sm close-mobile-menu sicon-cancel hidden"})]}static get style(){return":host{display:block}"}},[0,"salla-menu",{source:[1],sourceValue:[1,"source-value"],topnav:[4],useReactLink:[4,"use-react-link"],limit:[2],menus:[32]}]);function r(){"undefined"!=typeof customElements&&["salla-menu","salla-products-list"].forEach((t=>{switch(t){case"salla-menu":customElements.get(s(t))||customElements.define(s(t),a);break;case"salla-products-list":customElements.get(s(t))||i()}}))}r();const o=a,u=r;export{o as SallaMenu,u as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './salla-products-list2.js';
+
+const sallaMenuCss = ":host{display:block}";
+
+const SallaMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * The source of the menu, specifying whether it is a header or footer menu.
+         */
+        this.source = "header";
+        /**
+         * Boolean indicating whether to use React Link elements for menu links.
+         */
+        this.useReactLink = false;
+        this.menus = [];
+    }
+    async componentWillLoad() {
+        return salla.onReady(() => {
+            this.displayAllText = salla.lang.get('blocks.home.display_all');
+            if (this.sourceValue && this.source === 'json') {
+                this.menus = typeof this.sourceValue === 'string' ? JSON.parse(this.sourceValue) : this.sourceValue || [];
+            }
+            else {
+                return this.getMenuItems();
+            }
+        });
+    }
+    getMenuItems() {
+        /**
+          * Avoid saving the menu to localStorage (default) when in the development environment
+          * or when modifying the theme in the dashboard
+          */
+        // const isPreview = salla.config.isDebug() || salla.helpers.isPreview()
+        // const cacheKey = `${this.source}_menus_${salla.lang.locale}`
+        // const cachedMenus = salla.storage.getWithTTL(cacheKey, [])
+        // if (cachedMenus.length > 0 && !isPreview) {
+        //   this.menus = cachedMenus
+        //   return;
+        // }
+        return salla.api.component.getMenus(this.source).then(({ data }) => {
+            this.menus = data;
+            // !isPreview && salla.storage.setWithTTL(cacheKey, this.menus)
+        }).catch((error) => {
+            salla.logger.error('salla-menu::Error fetching menus', error);
+        });
+    }
+    hasChildren(menu) {
+        return menu?.children?.length > 0;
+    }
+    hasProducts(menu) {
+        return menu?.products?.length > 0;
+    }
+    /**
+    * Get the classes for desktop menu
+    * @param {Object} menu
+    * @param {Boolean} isRootMenu
+    * @returns {String}
+    */
+    getDesktopClasses(menu, isRootMenu) {
+        return `!hidden lg:!block ${isRootMenu ? 'root-level lg:!inline-block' : 'relative'} ${menu.products ? ' mega-menu' : ''}
+    ${this.hasChildren(menu) ? 'has-children' : ''}`;
+    }
+    getAttributes(attrs) {
+        return attrs.trim().split(' ').reduce((result, attr) => {
+            let [key, value] = attr.split('=');
+            result[key] = value.replace(/"/g, '');
+            return result;
+        }, {});
+    }
+    /**
+       * Get the mobile menu
+       * @param {Object} menu
+       * @param {String} displayAllText
+       * @returns {String}
+       */
+    getMobileMenu(menu, displayAllText) {
+        const menuImage = menu.image ? h("img", { src: menu.image, class: "rounded-full", width: "48", height: "48", alt: menu.title }) : null;
+        return (h("li", { class: "lg:hidden text-sm font-bold", ...this.getAttributes(menu.attrs) }, !this.hasChildren(menu) ?
+            h("a", { href: menu.url, "aria-label": menu.title || 'category', class: `text-gray-500 ${menu.image ? '!py-3' : ''}`, ...this.getAttributes(menu.link_attrs) }, menuImage, h("span", null, menu.title || ''))
+            :
+                h(Fragment, null, h("span", { class: menu.image ? '!py-3' : '' }, menuImage, menu.title), h("ul", null, h("li", { class: "text-sm font-bold" }, h("a", { href: menu.url, class: "text-gray-500" }, displayAllText)), menu.children.map((subMenu) => this.getMobileMenu(subMenu, displayAllText))))));
+    }
+    /**
+       * Get the desktop menu
+       * @param {Object} menu
+       * @param {Boolean} isRootMenu
+       * @returns {String}
+       */
+    getDesktopMenu(menu, isRootMenu) {
+        return h("li", { class: this.getDesktopClasses(menu, isRootMenu), ...this.getAttributes(menu.attrs) }, h("a", { href: menu.url, "aria-label": menu.title || 'category', ...this.getAttributes(menu.link_attrs) }, h("span", null, menu.title)), this.hasChildren(menu) ?
+            h("div", { class: `sub-menu shadow-default ${this.hasProducts(menu) ? 'w-full left-0 flex' : 'w-56'}` }, h("ul", { class: this.hasProducts(menu) ? 'w-56 shrink-0 m-8 rtl:ml-0 ltr:mr-0' : '' }, menu.children.map((subMenu) => this.getDesktopMenu(subMenu, false))), this.hasProducts(menu) ?
+                h("salla-products-list", { source: "selected", "shadow-on-hover": true, "source-value": `[${menu.products}]` }) : null) : null);
+    }
+    /**
+       * Get the footer menu
+       * @param {Array} menus
+       */
+    getFooterMenu(menus) {
+        const Menuitems = (this.topnav || this.limit) ? menus.slice(0, this.limit || 3) : menus;
+        return h("div", null, h("div", { class: {
+                "s-menu-footer-list": !this.topnav,
+                "s-menu-topnav-list": this.topnav
+            } }, Menuitems.map((menu) => {
+            return h("a", { key: menu.id, href: menu.url, target: menu.target, class: {
+                    "s-menu-footer-item": !this.topnav,
+                    "s-menu-topnav-item topnav-link-item right-side": this.topnav
+                } }, menu.title);
+        })));
+    }
+    /**
+  * Get the menus
+  * @param {Array} menus
+  * @returns {String}
+  */
+    getHeaderMenu(menus) {
+        return menus.map((menu) => [
+            this.getMobileMenu(menu, this.displayAllText),
+            this.getDesktopMenu(menu, true)
+        ]);
+    }
+    render() {
+        return this.source === "footer" ?
+            this.getFooterMenu(this.menus)
+            :
+                [
+                    h("nav", { key: "main-nav", id: "mobile-menu", class: "mobile-menu" }, h("ul", { class: "main-menu" }, this.getHeaderMenu(this.menus)), h("button", { class: "btn--close close-mobile-menu sicon-cancel lg:hidden" })),
+                    h("button", { key: "close-btn", class: "btn--close-sm close-mobile-menu sicon-cancel hidden" })
+                ];
+    }
+    static get style() { return sallaMenuCss; }
+}, [0, "salla-menu", {
+        "source": [1],
+        "sourceValue": [1, "source-value"],
+        "topnav": [4],
+        "useReactLink": [4, "use-react-link"],
+        "limit": [2],
+        "menus": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-menu", "salla-products-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaMenu$1);
+            }
+            break;
+        case "salla-products-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaMenu = SallaMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaMenu, defineCustomElement };

package/dist/components/salla-metadata.js

@@ -1,4 +1,100 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as a,proxyCustomElement as t,HTMLElement as s,h as e,Host as l}from"@stencil/core/internal/client";const i=t(class extends s{constructor(a){if(super(),!1!==a&&this.__registerHost(),this.entity="product",this.specs=[],this.download=salla.lang.get("pages.thank_you.download"),this.entityId)try{return void(this.entityId=Array.isArray(this.entityId)?this.entityId:JSON.parse(this.entityId))}catch(a){salla.log("Bad json passed via entityId prop")}}getValue(a){if("file"===a.type)return`<a href="${a.value}" class="text-primary" target="_blank"><span class="sicon-download"></span> ${this.download}</a>`;if("url"===a.type)return`<a href="${a.value}" class="text-blue-700 underline" target="_blank">${a.value}</a>`;if("date"===a.type){const t=new Date(a.value);return`${(t.getDate()+"").padStart(2,"0")}/${(t.getMonth()+1+"").padStart(2,"0")}/${t.getFullYear()}`}return a.value}async componentWillLoad(){if(await salla.onReady(),!salla.config.get("store.features")?.includes("custom-fields"))return salla.logger.error("feature custom-fields is not activated");if(this.entityId||!salla.url.is_page("product.single")&&!salla.url.is_page("product.showNewUrls")||(this.entityId=salla.config.get("page.id")),!this.entityId)return salla.logger.error("can't render salla-metadata without enity-id prop!");await salla.lang.onLoaded(),this.download=salla.lang.get("pages.thank_you.download");const a=await Salla.api.metadata.fetchValues(this.entity,this.entityId);this.specs=a.data[0]?.sections}render(){if(this.specs.length)return e(l,{class:"s-metadata-wrapper"},this.specs.map((a=>e("div",{class:"s-metadata-box"},e("div",{class:"s-metadata-box-header"},e("i",{class:"sicon-list"}),a.name),a.fields.map((a=>e("div",{class:"s-metadata-row"},e("p",{class:"s-metadata-row-name"},a.name),e("p",{class:"s-metadata-row-value",innerHTML:this.getValue(a)}))))))))}get host(){return this}static get style(){return""}},[0,"salla-metadata",{entity:[1],entityId:[8,"entity-id"],specs:[32],download:[32]}]);function n(){"undefined"!=typeof customElements&&["salla-metadata"].forEach((t=>{"salla-metadata"===t&&(customElements.get(a(t))||customElements.define(a(t),i))}))}n();const r=i,o=n;export{r as SallaMetadata,o as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaMetadataCss = "";
+
+const SallaMetadata$1 = /*@__PURE__*/ proxyCustomElement(class SallaMetadata extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * The entity type.
+         */
+        this.entity = 'product';
+        this.specs = [];
+        this.download = salla.lang.get('pages.thank_you.download');
+        if (this.entityId) {
+            try {
+                this.entityId = Array.isArray(this.entityId)
+                    ? this.entityId
+                    : JSON.parse(this.entityId);
+                return;
+            }
+            catch (e) {
+                salla.log('Bad json passed via entityId prop');
+            }
+        }
+    }
+    getValue(field) {
+        if (field.type === 'file') {
+            return `<a href="${field.value}" class="text-primary" target="_blank"><span class="sicon-download"></span> ${this.download}</a>`;
+        }
+        if (field.type === 'url') {
+            return `<a href="${field.value}" class="text-blue-700 underline" target="_blank">${field.value}</a>`; // classes will be moved to the utilities.json file
+        }
+        if (field.type === 'date') {
+            const date = new Date(field.value);
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+            const year = date.getFullYear();
+            const formattedDate = `${day}/${month}/${year}`;
+            return formattedDate;
+        }
+        return field.value;
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        if (!salla.config.get('store.features')?.includes('custom-fields')) {
+            return salla.logger.error('feature custom-fields is not activated');
+        }
+        //todo:: remove `product.showNewUrls` after changing it from BE
+        if (!this.entityId && (salla.url.is_page('product.single') || salla.url.is_page("product.showNewUrls"))) {
+            this.entityId = salla.config.get('page.id');
+        }
+        if (!this.entityId) {
+            return salla.logger.error("can't render salla-metadata without enity-id prop!");
+        }
+        await salla.lang.onLoaded();
+        this.download = salla.lang.get('pages.thank_you.download');
+        const response = await Salla.api.metadata.fetchValues(this.entity, this.entityId);
+        this.specs = response.data[0]?.sections;
+    }
+    render() {
+        if (!this.specs.length) {
+            return;
+        }
+        return (h(Host, { class: "s-metadata-wrapper" }, this.specs.map((item) => {
+            return (h("div", { class: "s-metadata-box" }, h("div", { class: "s-metadata-box-header" }, h("i", { class: "sicon-list" }), item.name), item.fields.map((field) => {
+                return (h("div", { class: "s-metadata-row" }, h("p", { class: "s-metadata-row-name" }, field.name), h("p", { class: "s-metadata-row-value", innerHTML: this.getValue(field) })));
+            })));
+        })));
+    }
+    get host() { return this; }
+    static get style() { return sallaMetadataCss; }
+}, [0, "salla-metadata", {
+        "entity": [1],
+        "entityId": [8, "entity-id"],
+        "specs": [32],
+        "download": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-metadata"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-metadata":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaMetadata$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaMetadata = SallaMetadata$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaMetadata, defineCustomElement };

package/dist/components/salla-modal.js

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

package/dist/components/salla-modal2.js

@@ -1,4 +1,218 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as i,HTMLElement as l,createEvent as t,h as a,Host as e}from"@stencil/core/internal/client";import{C as o}from"./cancel.js";import{A as d,C as n}from"./check-circle2.js";import{H as h}from"./Helper.js";import{d as r}from"./salla-loading2.js";const m=i(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.modalVisibilityChanged=t(this,"modalVisibilityChanged",7),this.isClosable=!0,this.width="md",this.position="middle",this.visible=!1,this.hasSkeleton=!1,this.isLoading=!1,this.subTitleFirst=!1,this.noPadding=!1,this.subTitle="",this.centered=!1,this.iconStyle=void 0,salla.event.on("modal::open",(s=>s==this.host.id&&this.open())),salla.event.on("modal::close",(s=>s==this.host.id&&this.close())),this.modalTitle=this.host.getAttribute("modal-title")}handleVisible(s){if(!s)return this.modalVisibilityChanged.emit(!1),void this.toggleModal(!1);this.modalVisibilityChanged.emit(!0),this.host.classList.remove("s-hidden"),setTimeout((()=>this.toggleModal(!0)))}handleKeyUp(s){"KeyUp"===s.key&&this.closeModal()}async open(){return this.host.setAttribute("visible",""),this.handleAutoFocus(),this.host}async close(){return this.host.removeAttribute("visible"),this.host}async setTitle(s){return this.modalTitle=s,this.host}async loading(){return this.isLoading=!0,this.host}async stopLoading(){return this.isLoading=!1,this.host}handleAutoFocus(){const s=this.host.querySelector("input, textarea, select");s&&setTimeout((()=>{s.focus()}),100)}toggleModal(s){const i=this.host.querySelector(".s-modal-body");h.toggleElementClassIf(i,"s-modal-entering","s-modal-leaving",(()=>s)).toggleElementClassIf(this.overlay,"s-modal-entering","s-modal-overlay-leaving",(()=>s)).toggleElementClassIf(document.body,"modal-is-open","modal-is-closed",(()=>s)),s||setTimeout((()=>this.host.classList.add("s-hidden")),350)}closeModal(s){this.isClosable&&(salla.event.dispatch("modal::close",{reason:s}),this.host.removeAttribute("visible"))}iconBlockClasses(){return{"s-modal-icon":!0,"s-modal-bg-error":"error"==this.iconStyle,"s-modal-bg-success":"success"==this.iconStyle,"s-modal-bg-normal":!this.iconStyle,"s-modal-bg-primary":"primary"==this.iconStyle}}getWidth(){return this.isLoading?this.hasSkeleton?"md":"xs":this.width}render(){return this.host.id=this.host.id||"salla-modal",this.isLoading?a(e,{class:"salla-modal s-modal s-modal-container s-hidden","aria-modal":"true",role:"dialog",onKeyUp:s=>this.handleKeyUp(s)},a("div",{class:"s-modal-overlay",ref:s=>this.overlay=s,onClick:()=>this.closeModal("backdropClick")}),a("div",{class:"s-modal-wrapper"},a("span",{class:"s-modal-spacer s-modal-align-"+this.position},"​"),a("div",{class:"s-modal-body s-modal-align-"+this.position+" s-modal-"+this.getWidth()+(this.noPadding?" s-modal-nopadding":" s-modal-padding")},a("slot",{name:"loading"},a("salla-loading",null)),a("div",{class:"s-hidden"},a("slot",null))))):a(e,{class:"salla-modal s-modal s-modal-container s-hidden","aria-modal":"true",role:"dialog"},a("div",{class:"s-modal-overlay",ref:s=>this.overlay=s,onClick:()=>this.closeModal("backdropClick")}),a("div",{class:"s-modal-wrapper"},a("span",{class:"s-modal-spacer s-modal-align-"+this.position},"​"),a("div",{class:"s-modal-body s-modal-align-"+this.position+" s-modal-"+this.getWidth()+(this.noPadding?" s-modal-nopadding":" s-modal-padding")},a("div",{class:{"s-modal-header":!0,"s-modal-is-center":this.centered}},this.isClosable?a("button",{class:"s-modal-close",onClick:()=>this.closeModal("closeButtonClick"),type:"button"},a("span",{innerHTML:o})):"",this.modalTitle||this.subTitle?a("div",{class:"s-modal-header-inner"},a("slot",{name:"icon"},this.iconStyle?a("div",{class:this.iconBlockClasses(),innerHTML:"error"==this.iconStyle?d:n}):""),a("div",{class:"s-modal-header-content"},this.modalTitle?a("div",{class:{"s-modal-title":!0,"s-modal-title-below":this.subTitleFirst},innerHTML:this.modalTitle}):"",this.subTitle?a("p",{class:{"s-modal-sub-title":!0},innerHTML:this.subTitle}):"")):""),a("slot",null),a("slot",{name:"footer"}))))}componentDidLoad(){document.body.append(this.host)}get host(){return this}static get watchers(){return{visible:[{handleVisible:0}]}}static get style(){return"@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}"}},[260,"salla-modal",{isClosable:[1028,"is-closable"],width:[513],position:[513],visible:[516],hasSkeleton:[516,"has-skeleton"],isLoading:[1540,"is-loading"],subTitleFirst:[4,"sub-title-first"],noPadding:[4,"no-padding"],subTitle:[1,"sub-title"],centered:[4],iconStyle:[1,"icon-style"],modalTitle:[32],open:[64],close:[64],setTitle:[64],loading:[64],stopLoading:[64]},[[0,"keyup","handleKeyUp"]],{visible:[{handleVisible:0}]}]);function c(){"undefined"!=typeof customElements&&["salla-modal","salla-loading"].forEach((i=>{switch(i){case"salla-modal":customElements.get(s(i))||customElements.define(s(i),m);break;case"salla-loading":customElements.get(s(i))||r()}}))}c();export{m as S,c as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { C as Cancel } from './cancel.js';
+import { A as AlertEngineIcon, C as CheckCircle2 } from './check-circle2.js';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$1 } from './salla-loading2.js';
+
+const sallaModalCss = "@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}";
+
+const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.modalVisibilityChanged = createEvent(this, "modalVisibilityChanged", 7);
+        /**
+         * Sets the modal to be closable. Defaults to `true`
+         */
+        this.isClosable = true; //todo::rename unclude. Suggestion => persistent
+        /**
+         * The size of the modal
+         */
+        this.width = 'md';
+        /**
+         * The position of the modal
+         */
+        this.position = 'middle';
+        /**
+         * open the modal on rendering
+         */
+        this.visible = false;
+        /**
+         * open the modal on rendering
+         */
+        this.hasSkeleton = false;
+        /**
+         * Show loading in the middle
+         */
+        this.isLoading = false;
+        /**
+         * Show subtitle before the title or not, defaults to `false` (after the title)
+         */
+        this.subTitleFirst = false; //todo:: choose better name
+        /**
+         * Avoid padding in the modal body or not, defaults to `false`
+         */
+        this.noPadding = false; //todo:: choose better name
+        /**
+         * Set modal sub title.
+         */
+        this.subTitle = '';
+        /**
+         * Align modal content to center, defaults to `false`
+         */
+        this.centered = false;
+        /**
+         * Set the style of the header icon.
+         */
+        this.iconStyle = undefined;
+        salla.event.on('modal::open', target => target == this.host.id && this.open());
+        salla.event.on('modal::close', target => target == this.host.id && this.close());
+        this.modalTitle = this.host.getAttribute('modal-title');
+    }
+    handleVisible(newValue) {
+        if (!newValue) {
+            this.modalVisibilityChanged.emit(false);
+            this.toggleModal(false);
+            return;
+        }
+        this.modalVisibilityChanged.emit(true);
+        this.host.classList.remove('s-hidden');
+        setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    }
+    handleKeyUp(ev) {
+        if (ev.key === "KeyUp") {
+            this.closeModal();
+        }
+    }
+    /**
+     * Open the modal
+     */
+    async open() {
+        this.host.setAttribute('visible', '');
+        this.handleAutoFocus();
+        return this.host;
+    }
+    /**
+     * close the modal
+     */
+    async close() {
+        this.host.removeAttribute('visible');
+        return this.host;
+    }
+    /**
+     * Change the Modal Title
+     * @param {string} modalTitle
+     */
+    async setTitle(modalTitle) {
+        this.modalTitle = modalTitle;
+        return this.host;
+    }
+    /**
+     * Start loading
+     */
+    async loading() {
+        this.isLoading = true;
+        return this.host;
+    }
+    /**
+     * Stop the loading
+     */
+    async stopLoading() {
+        this.isLoading = false;
+        return this.host;
+    }
+    handleAutoFocus() {
+        const firstFocusableElement = this.host.querySelector('input, textarea, select');
+        if (!firstFocusableElement) {
+            return;
+        }
+        setTimeout(() => {
+            firstFocusableElement.focus();
+        }, 100);
+    }
+    toggleModal(isOpen) {
+        const body = this.host.querySelector('.s-modal-body');
+        Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+            .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+            .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+        if (!isOpen) {
+            setTimeout(() => this.host.classList.add('s-hidden'), 350);
+        }
+    }
+    closeModal(reason) {
+        if (!this.isClosable) {
+            return;
+        }
+        salla.event.dispatch('modal::close', { reason });
+        this.host.removeAttribute('visible');
+    }
+    iconBlockClasses() {
+        return {
+            's-modal-icon': true,
+            's-modal-bg-error': this.iconStyle == 'error',
+            's-modal-bg-success': this.iconStyle == 'success',
+            's-modal-bg-normal': !this.iconStyle,
+            's-modal-bg-primary': this.iconStyle == 'primary'
+        };
+    }
+    getWidth() {
+        return this.isLoading ? (this.hasSkeleton ? 'md' : 'xs') : this.width;
+    }
+    //todo:: pref for each modal
+    render() {
+        this.host.id = this.host.id || 'salla-modal';
+        if (this.isLoading) {
+            return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
+        }
+        return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.isClosable ?
+            h("button", { class: "s-modal-close", onClick: () => this.closeModal("closeButtonClick"), type: "button" }, h("span", { innerHTML: Cancel }))
+            : '', this.modalTitle || this.subTitle ?
+            h("div", { class: "s-modal-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
+                h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
+                : ''), h("div", { class: "s-modal-header-content" }, this.modalTitle ? h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }) : '', this.subTitle ? h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }) : ''))
+            : ''), h("slot", null), h("slot", { name: "footer" })))));
+    }
+    //move the modal as root dom, because we need the model to be outside the forms
+    componentDidLoad() {
+        document.body.append(this.host);
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "visible": ["handleVisible"]
+    }; }
+    static get style() { return sallaModalCss; }
+}, [4, "salla-modal", {
+        "isClosable": [1028, "is-closable"],
+        "width": [513],
+        "position": [513],
+        "visible": [516],
+        "hasSkeleton": [516, "has-skeleton"],
+        "isLoading": [1540, "is-loading"],
+        "subTitleFirst": [4, "sub-title-first"],
+        "noPadding": [4, "no-padding"],
+        "subTitle": [1, "sub-title"],
+        "centered": [4],
+        "iconStyle": [1, "icon-style"],
+        "modalTitle": [32],
+        "open": [64],
+        "close": [64],
+        "setTitle": [64],
+        "loading": [64],
+        "stopLoading": [64]
+    }, [[0, "keyup", "handleKeyUp"]], {
+        "visible": ["handleVisible"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-modal", "salla-loading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaModal);
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaModal as S, defineCustomElement as d };

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

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