@salla.sa/twilight-components 2.14.353 → 2.14.354

package/dist/cjs/salla-accordion_6.cjs.entry.js

@@ -0,0 +1,768 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+var index = require('./index-Ce40E8tZ.js');
+var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
+var cancel = require('./cancel-De6vslRA.js');
+var checkCircle2 = require('./check-circle2-BDvlT4_n.js');
+var Helper = require('./Helper-DHRnzcFm.js');
+require('./anime.es-BqW8JHZi.js');
+
+const sallaAccordionCss = "";
+
+const SallaAccordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Should the accordion be collapsible or not. Default is true. */
+        this.collapsible = true;
+        this.bordered = false;
+        this.size = "md";
+        /** Detect if accordion collapsed or not. */
+        this.collapsed = true;
+        /** Represents the direction of the layout. */
+        this.dir = document.dir || 'rtl';
+    }
+    directionChangedHandler(event) {
+        this.dir = event.detail.dir;
+    }
+    handleCollapse(event) {
+        this.collapsed = event.detail.payload.collapsed;
+    }
+    setcollapsibleProp() {
+        const head = this.host.querySelector('salla-accordion-head');
+        if (this.collapsible && head) {
+            head.setAttribute('collapsible', 'true');
+            head.setAttribute('collapsed', this.collapsed.toString());
+        }
+    }
+    componentDidRender() {
+        this.setcollapsibleProp();
+        const body = this.host.querySelector('salla-accordion-body');
+        if (this.collapsible) {
+            this.host.setAttribute('data-collapsed', this.collapsed.toString());
+            body?.setAttribute('data-collapsed', this.collapsed.toString());
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ed8e4c0f24fa4462654e94fa46706e892c141351', class: `s-accordion-wrapper ${this.dir} ${this.bordered ? 's-accordion-wrapper-bordered' : ''} ${this.size ? `size-${this.size}` : ''}`, "data-collapsed": this.collapsed.toString() }, index.h("slot", { key: '1dbda01c073f3018a55ebcf5d8613a82a5dc6b27' })));
+    }
+    get host() { return index.getElement(this); }
+};
+SallaAccordion.style = sallaAccordionCss;
+
+const sallaBreadcrumbCss = ":host{display:block}";
+
+const SallaBreadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sessionStorageKey = "breadcrumb_snapshot";
+        this.itemSlot = this.host.querySelector('[slot="item"]')?.outerHTML || `<li class="s-breadcrumb-item"><a href={url}>{title}</a></li>`;
+        this.iconSlot = this.host.querySelector('[slot="icon"]')?.outerHTML;
+    }
+    componentWillLoad() {
+        return (new Promise(resolve => salla.onReady(() => salla.lang.onLoaded(resolve))))
+            .then(() => {
+            if (salla.url.is_page('index')) {
+                throw new Error('salla-breadcrumb:: breadcrumb not supported on home page');
+            }
+        })
+            .then(() => {
+            if (!salla.config.get('theme.settings.is_breadcrumbs_enabled', true)) {
+                throw new Error('salla-breadcrumb:: merchant disabled the feature');
+            }
+        })
+            .then(() => {
+            const page = salla.config.get("page");
+            if (!page || !page.slug) {
+                salla.logger.error('salla-breadcrumbs:: page object not existed on salla.config.get("page")!');
+                this.breadcrumbs = [];
+                return;
+            }
+            let sessionBreadcrumbs = this.getSessionBreadcrumbs();
+            if (page.slug === "product.single" && sessionBreadcrumbs && sessionBreadcrumbs.length > 0) {
+                sessionBreadcrumbs.push({
+                    title: page.title,
+                    url: page.url
+                });
+                this.breadcrumbs = this.setBreadcrumbsFromArray(sessionBreadcrumbs);
+                this.storeBreadcrumbSnapshot();
+            }
+            else if (sessionBreadcrumbs && sessionBreadcrumbs.length > 0) {
+                if (this.isNewPage(page, sessionBreadcrumbs)) {
+                    this.breadcrumbs = this.generateBreadcrumbs(page);
+                    this.storeBreadcrumbSnapshot();
+                }
+                else {
+                    this.breadcrumbs = this.setBreadcrumbsFromArray(sessionBreadcrumbs);
+                }
+            }
+            else {
+                this.breadcrumbs = this.generateBreadcrumbs(page);
+                this.storeBreadcrumbSnapshot();
+            }
+            if (this.breadcrumbs?.length) {
+                this.breadcrumbs[this.breadcrumbs.length - 1].is_last = true;
+            }
+            return this.breadcrumbs;
+        })
+            .catch((error) => {
+            salla.logger.error('salla-breadcrumb:: unexpected error!', error);
+            this.breadcrumbs = [];
+        });
+    }
+    getSessionBreadcrumbs() {
+        if (new URLSearchParams(window.location.search).get('from') === 'search-bar') {
+            return [];
+        }
+        return JSON.parse(sessionStorage.getItem(this.sessionStorageKey) || '[]');
+    }
+    /**
+   * Helper function to determine if we're navigating to a new page that requires updating the session storage.
+   */
+    isNewPage(page, sessionBreadcrumbs) {
+        // Check if the last breadcrumb in sessionStorage matches the current page's URL.
+        const lastBreadcrumb = sessionBreadcrumbs[sessionBreadcrumbs.length - 1];
+        return lastBreadcrumb?.url !== page.url; // If the URLs don't match, it's a new page.
+    }
+    setBreadcrumbsFromArray(breadcrumbArray) {
+        return breadcrumbArray.map((item, index) => ({
+            ...item,
+            is_last: index === breadcrumbArray.length - 1,
+        }));
+    }
+    /**
+     * Sanitizes the breadcrumb title by splitting it on the `|` character and returning
+     * the part based on `preferedIndex`. If no separator is found, returns the trimmed title.
+     *
+     * @param {string} title - The title to sanitize.
+     * @param {number} [preferedIndex=1] - Index of the part to return (0 for first, 1 for second).
+     * @returns {string} - The sanitized title.
+     */
+    sanitizeBreadcrumbTitle(title, preferedIndex = 1) {
+        if (!title.includes('|')) {
+            return title.trim();
+        }
+        return title.split('|').map(part => part.trim())[preferedIndex];
+    }
+    generateBreadcrumbs(page) {
+        let breadcrumbs = [];
+        //TODO:: check what is the need from this?
+        if (page.slug === 'product.single') {
+            const previousPage = this.getSessionBreadcrumbs();
+            if (previousPage.length > 0 && previousPage[1]?.url === page.parent?.url) {
+                return this.setBreadcrumbsFromArray([...previousPage, page]);
+            }
+        }
+        // Start with the current page
+        let currentPage = page;
+        // Traverse up to the parent pages
+        while (currentPage) {
+            if (currentPage.title) {
+                breadcrumbs.unshift({
+                    title: currentPage.title,
+                    url: currentPage.url,
+                });
+            }
+            currentPage = currentPage.parent;
+        }
+        // Additional logic based on page slug or title
+        if (page.slug.includes("customer") && page.slug !== 'customer.profile') {
+            breadcrumbs.unshift({ title: salla.lang.get('common.titles.profile'), url: salla.url.get('profile') });
+        }
+        if (page.slug.includes('blog')) {
+            breadcrumbs.unshift({ title: salla.lang.get('blocks.footer.blog'), url: salla.url.get('blog') });
+        }
+        if (page.slug === 'brands.single') {
+            breadcrumbs.unshift({ title: salla.lang.get('common.titles.brands'), url: salla.url.get('brands') });
+        }
+        if (!page.title && page.slug === 'loyalty') {
+            breadcrumbs.unshift({ title: salla.lang.get('common.titles.loyalty_program'), url: salla.url.get('loyalty') });
+        }
+        // Add home breadcrumb
+        breadcrumbs.unshift({ title: salla.lang.get('common.titles.home'), url: salla.url.get('') });
+        return breadcrumbs;
+    }
+    storeBreadcrumbSnapshot() {
+        try {
+            const page = salla.config.get("page");
+            // Skip storing breadcrumbs for product.single page
+            if (page?.slug === 'product.single') {
+                return;
+            }
+            const items = [...this.breadcrumbs];
+            // Find the last item and update its URL
+            const lastItemIndex = items.length - 1;
+            if (lastItemIndex >= 0) {
+                items[lastItemIndex].url = window.location.href;
+            }
+            const breadcrumbSnapshot = JSON.stringify(items);
+            sessionStorage.setItem(this.sessionStorageKey, breadcrumbSnapshot);
+        }
+        catch (error) {
+            salla.logger.error('salla-breadcrumb:: Failed to store breadcrumb snapshot in sessionStorage.', error);
+        }
+    }
+    render() {
+        if (this.breadcrumbs.length <= 1) {
+            salla.log('salla-breadcrumb:: There is no breadcrumbs!');
+            return null;
+        }
+        return (index.h("ol", { class: {
+                "s-breadcrumb-wrapper": true,
+                "s-breadcrumb-dark": salla.url.is_page('loyalty'),
+                "s-breadcrumb-primary-reverse": salla.config.get('page.slug').includes('customer')
+            } }, this.breadcrumbs.map(item => {
+            const isProductSingle = salla.config.get('page.slug') === "product.single";
+            const title = (isProductSingle && item.is_last) ? item.title : this.sanitizeBreadcrumbTitle(item.title);
+            const itemHTML = this.itemSlot.replace(/\{url\}/g, item.url).replace(/\{title\}/g, title);
+            return [
+                index.h("div", { class: "s-breadcrumb-slot", innerHTML: itemHTML }),
+                this.getArrowDomForItem(item)
+            ];
+        })));
+    }
+    getArrowDomForItem(item) {
+        if (item.is_last) {
+            return '';
+        }
+        let iconDom = this.iconSlot || (salla.config.get('theme.is_rtl', true) ? keyboard_arrow_right.ArrowLeftIcon : keyboard_arrow_right.ArrowRightIcon);
+        return index.h("li", { class: "s-breadcrumb-arrow" }, index.h("div", { class: { "s-breadcrumb-icon-slot": true, "s-breadcrumb-default-icon": !this.iconSlot }, innerHTML: iconDom }));
+    }
+    /**
+     * Lifecycle method called after the component is rendered.
+     * - Reduces the number of elements in the DOM.
+     * - Removes unnecessary slots parent elements.
+     * - Replaces the last anchor tag in the breadcrumb with its content.
+     */
+    componentDidRender() {
+        // Reduces the number of elements in the DOM
+        this.host.querySelectorAll('.s-breadcrumb-slot').forEach(el => el.replaceWith(el.firstChild));
+        this.host.querySelectorAll('.s-breadcrumb-icon-slot.s-breadcrumb-default-icon').forEach(el => el.replaceWith(el.querySelector('svg')));
+        // Removes the slots parent elements if exists
+        this.host.querySelector('[slot="item"]')?.remove();
+        this.host.querySelector('[slot="icon"]')?.remove();
+        let lastEl = this.host.querySelectorAll('.s-breadcrumb-item')[this.breadcrumbs.length - 1]?.querySelector('a');
+        lastEl && lastEl.replaceWith(lastEl.firstChild);
+    }
+    get host() { return index.getElement(this); }
+};
+SallaBreadcrumb.style = sallaBreadcrumbCss;
+
+const sallaButtonCss = "";
+
+const SallaButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Button Type
+         */
+        this.shape = 'btn';
+        /**
+         * Button Color
+         */
+        this.color = 'primary';
+        /**
+         * Button Fill
+         */
+        this.fill = 'solid';
+        /**
+         * Button Size
+         */
+        this.size = 'medium';
+        /**
+         * Button Width
+         */
+        this.width = 'normal';
+        /**
+         * Is the button currently loading
+         */
+        this.loading = false;
+        /**
+         * Is the button currently disabled
+         */
+        this.disabled = false;
+        /**
+         * If there is need to change loader position, pass the position
+         */
+        this.loaderPosition = 'after';
+        /**
+         * Determines the type of the rendered button.
+         * By default, the type is set to "button," making it a general-purpose button.
+         * Setting `type` to "submit" makes the button behave as a submit button within a form, triggering form submission.
+         * Possible values for `type` include "button," "submit," "reset," and "menu.".
+         *
+         * Possible values and their usage are as follows:
+         * "button" (default, used for general button functionality),
+         * "reset" (resets form fields to their default values), and
+         * "menu" (represents a button that, when activated, displays a context menu).
+         */
+        this.type = "button";
+    }
+    /**
+     * Run loading animation
+     */
+    async load() {
+        if (this.loaderPosition == 'center')
+            this.text.classList.add('s-button-hide');
+        this.host.setAttribute('loading', '');
+        return this.host;
+    }
+    /**
+     * Stop loading animation
+     */
+    async stop() {
+        this.host.removeAttribute('loading');
+        this.host.querySelector('button').removeAttribute('loading');
+        if (this.loaderPosition == 'center')
+            this.text.classList.remove('s-button-hide');
+        return this.host;
+    }
+    /**
+     * Changing the body of the button
+     * @param html
+     */
+    async setText(html) {
+        this.text.innerHTML = html;
+        return this.host;
+    }
+    /**
+     * Add `disabled` attribute
+     */
+    async disable() {
+        this.host.setAttribute('disabled', '');
+        return this.host;
+    }
+    /**
+     * Remove `disabled` attribute
+     */
+    async enable() {
+        this.host.removeAttribute('disabled');
+        return this.host;
+    }
+    getBtnAttributes() {
+        const hostAttributes = {};
+        for (let i = 0; i < this.host.attributes.length; i++) {
+            if (!['color', 'fill', 'size', 'width', 'id'].includes(this.host.attributes[i].name)) {
+                hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+            }
+        }
+        hostAttributes.type = hostAttributes.type || this.type;
+        const buttonClass = hostAttributes.class || '';
+        hostAttributes.class = buttonClass +
+            ' s-button-element s-button-' + this.shape
+            + ' s-button-' + (this.fill == "none" ? 'fill-none' : this.fill)
+            + (this.size != "medium" ? ' s-button-' + this.size : '')
+            + (this.width != "normal" ? ' s-button-' + this.width : '')
+            + (this.shape == "link" ? ' s-button-' + this.color + '-link' : '')
+            + (this.shape != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
+            + (this.fill == 'outline' ? ' s-button-' + this.color + '-outline' : '')
+            + (this.disabled ? ' s-button-disabled ' : '')
+            + (this.shape == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
+        if (!hostAttributes['aria-label'] && !hostAttributes['aria-labelledby']) {
+            const buttonText = (this.host.textContent || '').trim();
+            // Only add aria-label for buttons without visible text (icon buttons)
+            // Buttons with visible text don't need aria-label as screen readers already announce the text
+            if (!buttonText) {
+                // Check if it's a wishlist button and add aria-label automatically
+                const isWishlistButton = buttonClass.includes('btn--wishlist') || buttonClass.includes('wishlist');
+                if (isWishlistButton) {
+                    hostAttributes['aria-label'] = salla.lang.getWithDefault('pages.products.add_to_wishlist', 'Add or remove to wishlist');
+                }
+                else if (this.shape === 'icon') {
+                    console.warn('Icon button is missing aria-label attribute');
+                }
+            }
+        }
+        return hostAttributes;
+    }
+    button() {
+        return (index.h("button", { ...this.getBtnAttributes(), disabled: this.disabled }, index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: "s-button-loader" }) : ''));
+    }
+    render() {
+        //TODO:: find a better fix, this is a patch for issue that duplicates the buttons twice @see the screenshot inside this folder
+        return this.host.closest('.swiper-slide')?.classList.contains('swiper-slide-duplicate')
+            ? ''
+            : (index.h(index.Host, { class: "s-button-wrap" }, this.href ? index.h("a", { href: this.href }, this.button()) : this.button()));
+    }
+    get host() { return index.getElement(this); }
+};
+SallaButton.style = sallaButtonCss;
+
+var AlertEngineIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>alert-engine</title>
+<path d="M16 18.673c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM2.667 16c0-3.092 1.083-6.105 3.047-8.484 0.469-0.568 0.389-1.408-0.179-1.877-0.568-0.468-1.408-0.388-1.877 0.179-2.359 2.857-3.657 6.473-3.657 10.183s1.299 7.325 3.657 10.183c0.264 0.319 0.645 0.484 1.029 0.484 0.299 0 0.6-0.1 0.848-0.305 0.568-0.469 0.648-1.309 0.179-1.877-1.964-2.379-3.047-5.392-3.047-8.484zM16 10.667c-0.736 0-1.333 0.597-1.333 1.333v4c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-0.736-0.597-1.333-1.333-1.333zM16 5.333c-5.881 0-10.667 4.785-10.667 10.667s4.785 10.667 10.667 10.667 10.667-4.785 10.667-10.667-4.785-10.667-10.667-10.667zM16 24c-4.412 0-8-3.588-8-8s3.588-8 8-8 8 3.588 8 8-3.588 8-8 8zM28.343 5.817c-0.469-0.567-1.307-0.647-1.877-0.179-0.568 0.469-0.648 1.309-0.179 1.877 1.964 2.379 3.047 5.392 3.047 8.484s-1.083 6.105-3.047 8.484c-0.469 0.568-0.389 1.408 0.179 1.877 0.249 0.205 0.549 0.305 0.848 0.305 0.384 0 0.765-0.165 1.028-0.484 2.36-2.857 3.659-6.473 3.659-10.183s-1.299-7.325-3.657-10.183z"></path>
+</svg>
+`;
+
+const sallaDrawerCss = "";
+
+const SallaDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.drawerVisibilityChanged = index.createEvent(this, "drawerVisibilityChanged");
+        /**
+         * 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.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 (index.h(index.Host, { class: 'salla-drawer s-drawer s-drawer-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, index.h("div", { class: "s-drawer-overlay s-drawer-overlay-leaving", ref: el => this.overlay = el, onClick: () => this.closeDrawer("backdropClick") }), index.h("div", { class: "s-drawer-wrapper s-drawer-wrapper-" + this.position }, index.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') }, index.h("slot", { name: "loading" }, index.h("salla-loading", null)), index.h("div", { class: "s-hidden" }, index.h("slot", null))))));
+        }
+        return (index.h(index.Host, { class: 'salla-drawer s-drawer s-drawer-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-drawer-overlay  s-drawer-overlay-leaving", ref: el => this.overlay = el, onClick: () => this.closeDrawer("backdropClick") }), index.h("div", { class: "s-drawer-wrapper s-drawer-wrapper-" + this.position }, index.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') }, index.h("div", { class: { 's-drawer-header': true, 's-drawer-is-center': this.centered } }, this.isClosable ?
+            index.h("button", { class: "s-drawer-close", onClick: () => this.closeDrawer("closeButtonClick"), type: "button" }, index.h("span", { innerHTML: cancel.Cancel }))
+            : '', this.drawerTitle || this.subTitle ?
+            index.h("div", { class: "s-drawer-header-inner" }, index.h("slot", { name: 'icon' }, !!this.iconStyle ?
+                index.h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : checkCircle2.CheckCircle2 })
+                : ''), index.h("div", { class: "s-drawer-header-content" }, this.drawerTitle ? index.h("div", { class: { 's-drawer-title': true, 's-drawer-title-below': this.subTitleFirst }, innerHTML: this.drawerTitle }) : '', this.subTitle ? index.h("p", { class: { 's-drawer-sub-title': true }, innerHTML: this.subTitle }) : ''))
+            : ''), index.h("slot", null), index.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 index.getElement(this); }
+    static get watchers() { return {
+        "visible": ["handleVisible"]
+    }; }
+};
+SallaDrawer.style = sallaDrawerCss;
+
+const sallaLoadingCss = ".s-loading{animation:spin 1s linear infinite;fill:var(--color-primary)}.s-loading-container{display:flex;justify-content:center;align-items:center}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+
+const SallaLoading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Sets the diameter of the circle in pixels, Defaults to `32`
+         */
+        this.size = 32;
+        /**
+         * Sets the stroke of the circle (border) in pixels, Defaults to `4`
+         */
+        this.width = 2;
+        /**
+         * Spinner content color.
+         */
+        this.color = undefined; // TODO: Should be replaced with primary color (variable)
+        /**
+        * Spinner background color.
+        */
+        this.bgColor = "#e5e7eb";
+    }
+    render() {
+        return (index.h(index.Host, { key: '2592e9504b03cb78f212d57e51c19075172fadd0', class: "s-loading-container" }, index.h("svg", { key: '4d495370551559a59423d5b672a3f1b4ed6bd7e3', "aria-hidden": "true", style: { width: `${this.size}px`, height: `${this.size}px`, fill: this.color, color: this.bgColor }, class: "s-loading", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'aedf2f6df87ac1dc82c32180cbf11dcf925a2267', d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), index.h("path", { key: 'db02a829fe6142c41f43f4c6d3d07695b1fa41f9', d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" }))));
+    }
+};
+SallaLoading.style = sallaLoadingCss;
+
+const sallaModalCss = "@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}";
+
+const SallaModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.modalVisibilityChanged = index.createEvent(this, "modalVisibilityChanged");
+        /**
+         * 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.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 (index.h(index.Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, index.h("slot", { name: "loading" }, index.h("salla-loading", null)), index.h("div", { class: "s-hidden" }, index.h("slot", null))))));
+        }
+        return (index.h(index.Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, index.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.isClosable ?
+            index.h("button", { class: "s-modal-close", onClick: () => this.closeModal("closeButtonClick"), type: "button" }, index.h("span", { innerHTML: cancel.Cancel }))
+            : '', this.modalTitle || this.subTitle ?
+            index.h("div", { class: "s-modal-header-inner" }, index.h("slot", { name: 'icon' }, !!this.iconStyle ?
+                index.h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : checkCircle2.CheckCircle2 })
+                : ''), index.h("div", { class: "s-modal-header-content" }, this.modalTitle ? index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }) : '', this.subTitle ? index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }) : ''))
+            : ''), index.h("slot", null), index.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 index.getElement(this); }
+    static get watchers() { return {
+        "visible": ["handleVisible"]
+    }; }
+};
+SallaModal.style = sallaModalCss;
+
+exports.salla_accordion = SallaAccordion;
+exports.salla_breadcrumb = SallaBreadcrumb;
+exports.salla_button = SallaButton;
+exports.salla_drawer = SallaDrawer;
+exports.salla_loading = SallaLoading;
+exports.salla_modal = SallaModal;