/*!
 * Crafted with ❤ by Salla
 */
'use strict';

var index = require('./index-vstkdqRz.js');
var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
var cancel = require('./cancel-B5SbMYEk.js');
var checkCircle2 = require('./check-circle2-BDvlT4_n.js');
var Helper = require('./Helper-CU4Xuiki.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;
        /** Whether the accordion has a border. Default is false. */
        this.bordered = false;
        /** The size of the accordion elements. */
        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: 'fb12197f13d8836304bfebb14400c79c8c4d31f0', 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: '460e8d7238bf9f014fe0bbb6c0da592c8cb3e15e' })));
    }
    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();
            let lastSessionItem = sessionBreadcrumbs[sessionBreadcrumbs.length - 1];
            let isParentCompatible = lastSessionItem?.url && page.parent?.url && lastSessionItem.url === page.parent.url;
            if (page.slug === "product.single" && sessionBreadcrumbs && sessionBreadcrumbs.length > 0 && isParentCompatible) {
                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();
        }
        const parts = title.split('|').map(part => part.trim()).filter(Boolean);
        // Keep breadcrumb labels valid even when title format is malformed,
        // e.g. "Category |" or "Category".
        return parts[preferedIndex] || parts[0] || title.replace(/\|/g, '').trim();
    }
    generateBreadcrumbs(page) {
        let breadcrumbs = [];
        // Same parent-compatibility as main path: only reuse session path when last item matches page.parent
        if (page.slug === 'product.single') {
            const previousPage = this.getSessionBreadcrumbs();
            const lastSessionItem = previousPage[previousPage.length - 1];
            const isParentCompatible = lastSessionItem?.url && page.parent?.url && lastSessionItem.url === page.parent.url;
            if (previousPage.length > 0 && isParentCompatible) {
                return this.setBreadcrumbsFromArray([...previousPage, { title: page.title, url: page.url }]);
            }
        }
        // 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.SICancel }))
            : '', 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: 'bd9a1150a24f8a62d42437c669613ffa4e67b14f', class: "s-loading-container" }, index.h("svg", { key: '460c614d5d205ed9283d63f5ebebdb5639b8246e', "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: '13c50eee8a0f2342cc876e9dbbcc84d418e314bc', 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: '08888ea6c15d6be5d4225ec22bb2586e410793e8', 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.SICancel }))
            : '', 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;
