@salla.sa/twilight-components 2.14.391 → 2.14.393

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

@@ -1,266 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-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 };
+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}

package/dist/components/salla-drawer.js

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

package/dist/components/salla-drawer2.js

@@ -1,217 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-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 };
+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}

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

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