@salla.sa/twilight-components 2.14.393 → 2.14.395

package/dist/components/salla-delivery-promise.js

@@ -1,4 +1,266 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as e,HTMLElement as i,h as t,Host as l}from"@stencil/core/internal/client";import{d as r}from"./salla-skeleton2.js";const a=e(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.cities=[],this.filteredCities=[],this.selectedCity=null,this.deliveryMessage=null,this.isLoadingCities=!1,this.isLoadingPromises=!1,this.isDropdownOpen=!1,this.searchQuery="",this.hasError=!1,this.errorMessage="",this.labels={deliveryTo:"توصيل إلى",pickupFromBranch:"الاستلام من فرع",searchPlaceholder:"بحث...",noResults:"لا توجد نتائج",selectCity:"اختر المدينة"},this.canRender=!1,this.requiresShipping=!1,this.productId=void 0,this.onClickOutside=s=>{this.host.contains(s.target)||(this.isDropdownOpen=!1,window.removeEventListener("click",this.onClickOutside))}}setLabels(){this.labels={deliveryTo:salla.lang.getWithDefault("pages.products.promise_deliver_to","توصيل إلى"),pickupFromBranch:salla.lang.getWithDefault("pages.products.promise_pickup_from_branch","الاستلام من فرع"),searchPlaceholder:salla.lang.getWithDefault("blocks.header.search_placeholder","بحث..."),noResults:salla.lang.getWithDefault("common.elements.no_options","لا توجد نتائج"),selectCity:salla.lang.getWithDefault("common.elements.select_city","اختر المدينة")}}logger(s,e){localStorage.getItem("salla-delivery-promise-debug")&&(e?console.log(s,e):console.log(s))}async componentDidLoad(){if(await salla.onReady(),await salla.lang.onLoaded(),this.setLabels(),this.requiresShipping=salla.url.is_page("product.single")&&salla.config.get("store.features",[]).includes("delivery-promises"),!this.requiresShipping)return this.canRender=!1,void this.logger("not requiresShipping",{is_product_single:salla.url.is_page("product.single"),includesDeliveryPromises:salla.config.get("store.features",[]).includes("delivery-promises")});this.logger("requiresShipping",this.requiresShipping),this.productId=salla.config.get("page.id"),this.logger("productId",this.productId),await this.fetchCities()}async fetchCities(){this.logger("start startfetchCities"),this.isLoadingCities=!0,this.hasError=!1;try{const s=await salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises/cities`));if(s.success&&Array.isArray(s.data)&&s.data.length>0){this.logger("fetchCities success",{cities:s.data}),this.cities=this.sortCities(s.data),this.filteredCities=[...this.cities];let e=this.cities.find((s=>s.is_selected));e?(this.logger("selectedCity",e),this.selectedCity=e,await this.fetchDeliveryMessage(e.id)):this.logger("no selectedCity from API response"),this.canRender=!0}else this.logger("no data returned from fetchCities",{response:s}),this.canRender=!1}catch(s){this.logger("fetchCities error",{error:s.message}),this.hasError=!0,this.errorMessage=s.message||"Failed to load cities",this.canRender=!1}finally{this.isLoadingCities=!1}}async fetchDeliveryMessage(s){this.logger("start fetchDeliveryMessage",{cityId:s}),this.isLoadingPromises=!0,this.hasError=!1,this.deliveryMessage=null;try{const e=await salla.api.withoutNotifier((()=>salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises?city_id=${s}`))));if(e.success&&e.data?.message){const s=e.data.message.trim();this.logger("fetchDeliveryMessage success",{message:s}),this.deliveryMessage=s||null}else this.logger("deliveryMessage not valid",{response:e})}catch(s){this.logger("fetchDeliveryMessage error",{error:s.message}),this.hasError=!0,this.errorMessage=s.message||"Failed to load delivery message"}finally{this.isLoadingPromises=!1}}toggleDropdown(s){s?.stopPropagation(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen?(window.addEventListener("click",this.onClickOutside),this.searchInputRef&&setTimeout((()=>this.searchInputRef.focus()),100)):window.removeEventListener("click",this.onClickOutside)}disconnectedCallback(){window.removeEventListener("click",this.onClickOutside)}sortCities(s){return[...s].sort(((s,e)=>-1===s.id?1:-1===e.id?-1:0))}handleSearch(s){const e=s.target.value.toLowerCase();this.searchQuery=e,this.filteredCities=e.length>0?this.cities.filter((s=>s.name.toLowerCase()?.includes(e)||(s.name_en||"").toLowerCase()?.includes(e))):[...this.cities]}async selectCity(s){this.logger("selectCity",{city:s}),this.selectedCity=s,this.isDropdownOpen=!1,window.removeEventListener("click",this.onClickOutside),this.searchQuery="",this.filteredCities=[...this.cities],await this.fetchDeliveryMessage(s.id)}renderDropdown(){return t("div",{class:"s-delivery-promise-dropdown"},t("div",{class:"s-delivery-promise-dropdown-search"},t("i",{class:"sicon-search"}),t("input",{type:"text",placeholder:this.labels.searchPlaceholder,value:this.searchQuery,onInput:s=>this.handleSearch(s),ref:s=>this.searchInputRef=s})),t("div",{class:"s-delivery-promise-dropdown-list"},0===this.filteredCities.length?t("div",{class:"s-delivery-promise-dropdown-empty"},this.labels.noResults):this.filteredCities.map((s=>t("div",{key:s.id,class:"s-delivery-promise-dropdown-item "+(this.selectedCity?.id===s.id?"selected":""),onClick:()=>this.selectCity(s)},t("span",{class:"s-delivery-promise-city-name"},s.name),this.selectedCity?.id===s.id&&t("i",{class:"sicon-check"}))))))}renderInitialLoadingSkeleton(){return t(l,{class:"s-delivery-promise-wrapper s-delivery-promise-skeleton"},t("div",{class:"s-delivery-promise-container"},t("div",{class:"s-delivery-promise-header s-delivery-promise-header-skeleton"},t("div",{class:"s-delivery-promise-location"},t("salla-skeleton",{height:"14px",width:"180px"})),t("salla-skeleton",{height:"18px",width:"18px"})),t("div",{class:"s-delivery-promise-loading"},t("salla-skeleton",{height:"20px",width:"80%"}))))}renderDeliveryMessage(){return this.isLoadingPromises?t("div",{class:"s-delivery-promise-loading"},t("salla-skeleton",{height:"20px",width:"80%"})):this.deliveryMessage?t("div",{class:"s-delivery-promise-message"},this.deliveryMessage):null}render(){return this.requiresShipping?this.isLoadingCities?this.renderInitialLoadingSkeleton():this.canRender&&0!==this.cities.length?t(l,{class:"s-delivery-promise-wrapper"},t("div",{class:"s-delivery-promise-container"},t("div",{class:"s-delivery-promise-header",onClick:s=>this.toggleDropdown(s)},t("div",{class:"s-delivery-promise-location"},t("span",{class:"s-delivery-promise-title"},this.labels.deliveryTo," ",this.selectedCity?.name||this.labels.selectCity)),t("i",{class:"sicon-keyboard_arrow_down s-delivery-promise-arrow "+(this.isDropdownOpen?"open":"")})),this.hasError&&t("div",{class:"s-delivery-promise-error"},this.errorMessage),this.isDropdownOpen&&this.renderDropdown(),!this.hasError&&this.renderDeliveryMessage())):null:null}get host(){return this}},[0,"salla-delivery-promise",{cities:[32],filteredCities:[32],selectedCity:[32],deliveryMessage:[32],isLoadingCities:[32],isLoadingPromises:[32],isDropdownOpen:[32],searchQuery:[32],hasError:[32],errorMessage:[32],labels:[32],canRender:[32],requiresShipping:[32]}]);function o(){"undefined"!=typeof customElements&&["salla-delivery-promise","salla-skeleton"].forEach((e=>{switch(e){case"salla-delivery-promise":customElements.get(s(e))||customElements.define(s(e),a);break;case"salla-skeleton":customElements.get(s(e))||r()}}))}o();const h=a,c=o;export{h as SallaDeliveryPromise,c as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
+
+const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliveryPromise extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.cities = [];
+        this.filteredCities = [];
+        this.selectedCity = null;
+        this.deliveryMessage = null;
+        this.isLoadingCities = false;
+        this.isLoadingPromises = false;
+        this.isDropdownOpen = false;
+        this.searchQuery = '';
+        this.hasError = false;
+        this.errorMessage = '';
+        /** i18n labels for city selector only; message comes from BE */
+        this.labels = {
+            deliveryTo: 'توصيل إلى',
+            pickupFromBranch: 'الاستلام من فرع',
+            searchPlaceholder: 'بحث...',
+            noResults: 'لا توجد نتائج',
+            selectCity: 'اختر المدينة',
+        };
+        this.canRender = false;
+        this.requiresShipping = false;
+        /** Used only for API calls, not rendered — no need for @State */
+        this.productId = undefined;
+        this.onClickOutside = (e) => {
+            if (this.host.contains(e.target)) {
+                return; // click inside component (e.g. search input, city list) — don't close
+            }
+            this.isDropdownOpen = false;
+            window.removeEventListener('click', this.onClickOutside);
+        };
+    }
+    setLabels() {
+        this.labels = {
+            deliveryTo: salla.lang.getWithDefault('pages.products.promise_deliver_to', 'توصيل إلى'),
+            pickupFromBranch: salla.lang.getWithDefault('pages.products.promise_pickup_from_branch', 'الاستلام من فرع'),
+            searchPlaceholder: salla.lang.getWithDefault('blocks.header.search_placeholder', 'بحث...'),
+            noResults: salla.lang.getWithDefault('common.elements.no_options', 'لا توجد نتائج'),
+            selectCity: salla.lang.getWithDefault('common.elements.select_city', 'اختر المدينة'),
+        };
+    }
+    logger(message, data) {
+        if (localStorage.getItem('salla-delivery-promise-debug')) {
+            if (data) {
+                console.log(message, data);
+            }
+            else {
+                console.log(message);
+            }
+        }
+    }
+    async componentDidLoad() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        this.setLabels();
+        this.requiresShipping = salla.url.is_page('product.single') &&
+            salla.config.get('store.features', []).includes('delivery-promises');
+        if (this.requiresShipping) {
+            this.logger('requiresShipping', this.requiresShipping);
+            this.productId = salla.config.get('page.id');
+            this.logger('productId', this.productId);
+        }
+        else {
+            this.canRender = false;
+            this.logger('not requiresShipping', {
+                is_product_single: salla.url.is_page('product.single'),
+                includesDeliveryPromises: salla.config.get('store.features', []).includes('delivery-promises')
+            });
+            return;
+        }
+        await this.fetchCities();
+    }
+    async fetchCities() {
+        this.logger('start startfetchCities');
+        this.isLoadingCities = true;
+        this.hasError = false;
+        try {
+            const response = await salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises/cities`));
+            if (response.success && Array.isArray(response.data) && response.data.length > 0) {
+                this.logger('fetchCities success', { cities: response.data });
+                // Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1)
+                this.cities = this.sortCities(response.data);
+                this.filteredCities = [...this.cities];
+                // First, check if API returns a selected city (is_selected: true)
+                let cityToSelect = this.cities.find(c => c.is_selected);
+                if (!cityToSelect) {
+                    this.logger('no selectedCity from API response');
+                }
+                else {
+                    this.logger('selectedCity', cityToSelect);
+                    this.selectedCity = cityToSelect;
+                    await this.fetchDeliveryMessage(cityToSelect.id);
+                }
+                this.canRender = true;
+            }
+            else {
+                this.logger('no data returned from fetchCities', { response: response });
+                this.canRender = false;
+            }
+        }
+        catch (error) {
+            this.logger('fetchCities error', { error: error.message });
+            this.hasError = true;
+            this.errorMessage = error.message || 'Failed to load cities';
+            this.canRender = false;
+        }
+        finally {
+            this.isLoadingCities = false;
+        }
+    }
+    async fetchDeliveryMessage(cityId) {
+        this.logger('start fetchDeliveryMessage', { cityId });
+        this.isLoadingPromises = true;
+        this.hasError = false;
+        this.deliveryMessage = null;
+        try {
+            const response = await salla.api.withoutNotifier(() => salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises?city_id=${cityId}`)));
+            if (response.success && response.data?.message) {
+                const message = response.data.message.trim();
+                this.logger('fetchDeliveryMessage success', { message });
+                this.deliveryMessage = message || null;
+            }
+            else {
+                this.logger('deliveryMessage not valid', { response });
+            }
+        }
+        catch (error) {
+            this.logger('fetchDeliveryMessage error', { error: error.message });
+            this.hasError = true;
+            this.errorMessage = error.message || 'Failed to load delivery message';
+        }
+        finally {
+            this.isLoadingPromises = false;
+        }
+    }
+    toggleDropdown(e) {
+        e?.stopPropagation();
+        this.isDropdownOpen = !this.isDropdownOpen;
+        if (this.isDropdownOpen) {
+            window.addEventListener('click', this.onClickOutside);
+            if (this.searchInputRef) {
+                setTimeout(() => this.searchInputRef.focus(), 100);
+            }
+        }
+        else {
+            window.removeEventListener('click', this.onClickOutside);
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('click', this.onClickOutside);
+    }
+    /**
+     * Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1) at the end
+     */
+    sortCities(cities) {
+        return [...cities].sort((a, b) => {
+            // "Rest of cities" (id === -1) should always be at the end
+            if (a.id === -1)
+                return 1;
+            if (b.id === -1)
+                return -1;
+            return 0;
+        });
+    }
+    handleSearch(event) {
+        const query = event.target.value.toLowerCase();
+        this.searchQuery = query;
+        if (query.length > 0) {
+            this.filteredCities = this.cities.filter(city => city.name.toLowerCase()?.includes(query) ||
+                (city.name_en || '').toLowerCase()?.includes(query));
+        }
+        else {
+            this.filteredCities = [...this.cities];
+        }
+    }
+    async selectCity(city) {
+        this.logger('selectCity', { city: city });
+        this.selectedCity = city;
+        this.isDropdownOpen = false;
+        window.removeEventListener('click', this.onClickOutside);
+        this.searchQuery = '';
+        this.filteredCities = [...this.cities];
+        await this.fetchDeliveryMessage(city.id);
+    }
+    renderDropdown() {
+        return (h("div", { class: "s-delivery-promise-dropdown" }, h("div", { class: "s-delivery-promise-dropdown-search" }, h("i", { class: "sicon-search" }), h("input", { type: "text", placeholder: this.labels.searchPlaceholder, value: this.searchQuery, onInput: (e) => this.handleSearch(e), ref: el => this.searchInputRef = el })), h("div", { class: "s-delivery-promise-dropdown-list" }, this.filteredCities.length === 0 ? (h("div", { class: "s-delivery-promise-dropdown-empty" }, this.labels.noResults)) : (this.filteredCities.map(city => (h("div", { key: city.id, class: `s-delivery-promise-dropdown-item ${this.selectedCity?.id === city.id ? 'selected' : ''}`, onClick: () => this.selectCity(city) }, h("span", { class: "s-delivery-promise-city-name" }, city.name), this.selectedCity?.id === city.id && (h("i", { class: "sicon-check" })))))))));
+    }
+    /**
+     * Skeleton shown during initial city fetch to avoid blank period and layout shift.
+     * Matches the structure/size of the real content (header + message area).
+     */
+    renderInitialLoadingSkeleton() {
+        return (h(Host, { class: "s-delivery-promise-wrapper s-delivery-promise-skeleton" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header s-delivery-promise-header-skeleton" }, h("div", { class: "s-delivery-promise-location" }, h("salla-skeleton", { height: "14px", width: "180px" })), h("salla-skeleton", { height: "18px", width: "18px" })), h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })))));
+    }
+    renderDeliveryMessage() {
+        if (this.isLoadingPromises) {
+            return (h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })));
+        }
+        if (!this.deliveryMessage) {
+            return null;
+        }
+        return (h("div", { class: "s-delivery-promise-message" }, this.deliveryMessage));
+    }
+    render() {
+        // Not on product page or delivery-promises disabled — hide entirely
+        if (!this.requiresShipping) {
+            return null;
+        }
+        // Initial city fetch: show skeleton to avoid blank period and layout shift
+        if (this.isLoadingCities) {
+            return this.renderInitialLoadingSkeleton();
+        }
+        // Fetch done but no cities / error — hide
+        if (!this.canRender || this.cities.length === 0) {
+            return null;
+        }
+        return (h(Host, { class: "s-delivery-promise-wrapper" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header", onClick: (e) => this.toggleDropdown(e) }, h("div", { class: "s-delivery-promise-location" }, h("span", { class: "s-delivery-promise-title" }, this.labels.deliveryTo, " ", this.selectedCity?.name || this.labels.selectCity)), h("i", { class: `sicon-keyboard_arrow_down s-delivery-promise-arrow ${this.isDropdownOpen ? 'open' : ''}` })), this.hasError && (h("div", { class: "s-delivery-promise-error" }, this.errorMessage)), this.isDropdownOpen && this.renderDropdown(), !this.hasError && this.renderDeliveryMessage())));
+    }
+    get host() { return this; }
+}, [0, "salla-delivery-promise", {
+        "cities": [32],
+        "filteredCities": [32],
+        "selectedCity": [32],
+        "deliveryMessage": [32],
+        "isLoadingCities": [32],
+        "isLoadingPromises": [32],
+        "isDropdownOpen": [32],
+        "searchQuery": [32],
+        "hasError": [32],
+        "errorMessage": [32],
+        "labels": [32],
+        "canRender": [32],
+        "requiresShipping": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-delivery-promise", "salla-skeleton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-delivery-promise":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaDeliveryPromise$1);
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaDeliveryPromise = SallaDeliveryPromise$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaDeliveryPromise, defineCustomElement };

package/dist/components/salla-drawer.js

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

package/dist/components/salla-drawer2.js

@@ -1,4 +1,217 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as e,HTMLElement as r,createEvent as i,h as t,Host as a}from"@stencil/core/internal/client";import{C as l}from"./cancel.js";import{A as d,C as n}from"./check-circle2.js";import{H as o}from"./Helper.js";import{d as h}from"./salla-loading2.js";const c=e(class extends r{constructor(s){super(),!1!==s&&this.__registerHost(),this.drawerVisibilityChanged=i(this,"drawerVisibilityChanged",7),this.isClosable=!0,this.width="md",this.position="right",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("drawer::open",(s=>s==this.host.id&&this.open())),salla.event.on("drawer::close",(s=>s==this.host.id&&this.close())),this.drawerTitle=this.host.getAttribute("drawer-title")}handleVisible(s){if(!s)return this.drawerVisibilityChanged.emit(!1),void this.toggleDrawer(!1);this.drawerVisibilityChanged.emit(!0),this.host.classList.remove("s-hidden"),setTimeout((()=>this.toggleDrawer(!0)))}handleKeyUp(s){"Escape"===s.key&&this.closeDrawer()}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.drawerTitle=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)}toggleDrawer(s){const e=this.host.querySelector(".s-drawer-body");o.toggleElementClassIf(e,"s-drawer-entering","s-drawer-leaving",(()=>s)).toggleElementClassIf(this.overlay,"s-drawer-entering","s-drawer-overlay-leaving",(()=>s)).toggleElementClassIf(document.body,"drawer-is-open","drawer-is-closed",(()=>s)),s||setTimeout((()=>this.host.classList.add("s-hidden")),350)}closeDrawer(s){this.isClosable&&(salla.event.dispatch("drawer::close",{reason:s}),this.host.removeAttribute("visible"))}iconBlockClasses(){return{"s-drawer-icon":!0,"s-drawer-bg-error":"error"==this.iconStyle,"s-drawer-bg-success":"success"==this.iconStyle,"s-drawer-bg-normal":!this.iconStyle,"s-drawer-bg-primary":"primary"==this.iconStyle}}getWidth(){return this.isLoading?this.hasSkeleton?"md":"xs":this.width}render(){return this.host.id=this.host.id||"salla-drawer",this.isLoading?t(a,{class:"salla-drawer s-drawer s-drawer-container s-hidden","aria-modal":"true",role:"dialog",onKeyUp:s=>this.handleKeyUp(s)},t("div",{class:"s-drawer-overlay s-drawer-overlay-leaving",ref:s=>this.overlay=s,onClick:()=>this.closeDrawer("backdropClick")}),t("div",{class:"s-drawer-wrapper s-drawer-wrapper-"+this.position},t("div",{class:"s-drawer-body flex justify-center s-drawer-leaving s-drawer-"+this.position+" s-drawer-"+this.getWidth()+(this.noPadding?" s-drawer-nopadding":" s-drawer-padding")},t("slot",{name:"loading"},t("salla-loading",null)),t("div",{class:"s-hidden"},t("slot",null))))):t(a,{class:"salla-drawer s-drawer s-drawer-container s-hidden","aria-modal":"true",role:"dialog"},t("div",{class:"s-drawer-overlay  s-drawer-overlay-leaving",ref:s=>this.overlay=s,onClick:()=>this.closeDrawer("backdropClick")}),t("div",{class:"s-drawer-wrapper s-drawer-wrapper-"+this.position},t("div",{class:"s-drawer-body s-drawer-leaving s-drawer-"+this.position+" s-drawer-"+this.getWidth()+(this.noPadding?" s-drawer-nopadding":" s-drawer-padding")},t("div",{class:{"s-drawer-header":!0,"s-drawer-is-center":this.centered}},this.isClosable?t("button",{class:"s-drawer-close",onClick:()=>this.closeDrawer("closeButtonClick"),type:"button"},t("span",{innerHTML:l})):"",this.drawerTitle||this.subTitle?t("div",{class:"s-drawer-header-inner"},t("slot",{name:"icon"},this.iconStyle?t("div",{class:this.iconBlockClasses(),innerHTML:"error"==this.iconStyle?d:n}):""),t("div",{class:"s-drawer-header-content"},this.drawerTitle?t("div",{class:{"s-drawer-title":!0,"s-drawer-title-below":this.subTitleFirst},innerHTML:this.drawerTitle}):"",this.subTitle?t("p",{class:{"s-drawer-sub-title":!0},innerHTML:this.subTitle}):"")):""),t("slot",null),t("slot",{name:"footer"}))))}componentDidLoad(){document.body.append(this.host)}get host(){return this}static get watchers(){return{visible:[{handleVisible:0}]}}static get style(){return""}},[260,"salla-drawer",{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"],drawerTitle:[32],open:[64],close:[64],setTitle:[64],loading:[64],stopLoading:[64]},[[0,"keyup","handleKeyUp"]],{visible:[{handleVisible:0}]}]);function w(){"undefined"!=typeof customElements&&["salla-drawer","salla-loading"].forEach((e=>{switch(e){case"salla-drawer":customElements.get(s(e))||customElements.define(s(e),c);break;case"salla-loading":customElements.get(s(e))||h()}}))}w();export{c as S,w 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 sallaDrawerCss = "";
+
+const SallaDrawer = /*@__PURE__*/ proxyCustomElement(class SallaDrawer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.drawerVisibilityChanged = createEvent(this, "drawerVisibilityChanged", 7);
+        /**
+         * Sets the drawer to be closable. Defaults to `true`
+         */
+        this.isClosable = true;
+        /**
+         * The width of the drawer
+         */
+        this.width = 'md';
+        /**
+         * The position of the drawer (left or right)
+         */
+        this.position = 'right';
+        /**
+         * open the drawer on rendering
+         */
+        this.visible = false;
+        /**
+         * open the drawer 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;
+        /**
+         * Avoid padding in the drawer body or not, defaults to `false`
+         */
+        this.noPadding = false;
+        /**
+         * Set drawer sub title.
+         */
+        this.subTitle = '';
+        /**
+         * Align drawer content to center, defaults to `false`
+         */
+        this.centered = false;
+        /**
+         * Set the style of the header icon.
+         */
+        this.iconStyle = undefined;
+        salla.event.on('drawer::open', target => target == this.host.id && this.open());
+        salla.event.on('drawer::close', target => target == this.host.id && this.close());
+        this.drawerTitle = this.host.getAttribute('drawer-title');
+    }
+    handleVisible(newValue) {
+        if (!newValue) {
+            this.drawerVisibilityChanged.emit(false);
+            this.toggleDrawer(false);
+            return;
+        }
+        this.drawerVisibilityChanged.emit(true);
+        this.host.classList.remove('s-hidden');
+        setTimeout(() => this.toggleDrawer(true)); //small amont of time to running toggle After adding hidden
+    }
+    handleKeyUp(ev) {
+        if (ev.key === "Escape") {
+            this.closeDrawer();
+        }
+    }
+    /**
+     * Open the drawer
+     */
+    async open() {
+        this.host.setAttribute('visible', '');
+        this.handleAutoFocus();
+        return this.host;
+    }
+    /**
+     * close the drawer
+     */
+    async close() {
+        this.host.removeAttribute('visible');
+        return this.host;
+    }
+    /**
+     * Change the Drawer Title
+     * @param {string} drawerTitle
+     */
+    async setTitle(drawerTitle) {
+        this.drawerTitle = drawerTitle;
+        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);
+    }
+    toggleDrawer(isOpen) {
+        const body = this.host.querySelector('.s-drawer-body');
+        Helper.toggleElementClassIf(body, 's-drawer-entering', 's-drawer-leaving', () => isOpen)
+            .toggleElementClassIf(this.overlay, 's-drawer-entering', 's-drawer-overlay-leaving', () => isOpen)
+            .toggleElementClassIf(document.body, 'drawer-is-open', 'drawer-is-closed', () => isOpen);
+        if (!isOpen) {
+            setTimeout(() => this.host.classList.add('s-hidden'), 350);
+        }
+    }
+    closeDrawer(reason) {
+        if (!this.isClosable) {
+            return;
+        }
+        salla.event.dispatch('drawer::close', { reason });
+        this.host.removeAttribute('visible');
+    }
+    iconBlockClasses() {
+        return {
+            's-drawer-icon': true,
+            's-drawer-bg-error': this.iconStyle == 'error',
+            's-drawer-bg-success': this.iconStyle == 'success',
+            's-drawer-bg-normal': !this.iconStyle,
+            's-drawer-bg-primary': this.iconStyle == 'primary'
+        };
+    }
+    getWidth() {
+        return this.isLoading ? (this.hasSkeleton ? 'md' : 'xs') : this.width;
+    }
+    render() {
+        this.host.id = this.host.id || 'salla-drawer';
+        if (this.isLoading) {
+            return (h(Host, { class: 'salla-drawer s-drawer s-drawer-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, h("div", { class: "s-drawer-overlay s-drawer-overlay-leaving", ref: el => this.overlay = el, onClick: () => this.closeDrawer("backdropClick") }), h("div", { class: "s-drawer-wrapper s-drawer-wrapper-" + this.position }, h("div", { class: 's-drawer-body flex justify-center s-drawer-leaving s-drawer-' + this.position + ' s-drawer-' + this.getWidth() + (this.noPadding ? ' s-drawer-nopadding' : ' s-drawer-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
+        }
+        return (h(Host, { class: 'salla-drawer s-drawer s-drawer-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-drawer-overlay  s-drawer-overlay-leaving", ref: el => this.overlay = el, onClick: () => this.closeDrawer("backdropClick") }), h("div", { class: "s-drawer-wrapper s-drawer-wrapper-" + this.position }, h("div", { class: 's-drawer-body s-drawer-leaving s-drawer-' + this.position + ' s-drawer-' + this.getWidth() + (this.noPadding ? ' s-drawer-nopadding' : ' s-drawer-padding') }, h("div", { class: { 's-drawer-header': true, 's-drawer-is-center': this.centered } }, this.isClosable ?
+            h("button", { class: "s-drawer-close", onClick: () => this.closeDrawer("closeButtonClick"), type: "button" }, h("span", { innerHTML: Cancel }))
+            : '', this.drawerTitle || this.subTitle ?
+            h("div", { class: "s-drawer-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
+                h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
+                : ''), h("div", { class: "s-drawer-header-content" }, this.drawerTitle ? h("div", { class: { 's-drawer-title': true, 's-drawer-title-below': this.subTitleFirst }, innerHTML: this.drawerTitle }) : '', this.subTitle ? h("p", { class: { 's-drawer-sub-title': true }, innerHTML: this.subTitle }) : ''))
+            : ''), h("slot", null), h("slot", { name: "footer" })))));
+    }
+    //move the drawer as root dom, because we need the drawer 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 sallaDrawerCss; }
+}, [4, "salla-drawer", {
+        "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"],
+        "drawerTitle": [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-drawer", "salla-loading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-drawer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaDrawer);
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaDrawer as S, defineCustomElement as d };

package/dist/components/salla-file-upload.js

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