/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h, H as Host, a as getElement } from './index-Cb4NFvMH.js';
import { S as Star } from './star2-D4oPi1Ov.js';
import { H as Helper } from './Helper-DFMXF2_h.js';
import './anime.es-CgtvEd63.js';

var Heart = `<!-- 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>heart</title>
<path d="M23.333 2.267c-3.547 0-5.779 1.605-7.333 3.061-1.555-1.456-3.787-3.061-7.333-3.061-5.955 0-8.667 5.045-8.667 9.733 0 8.503 10.147 14.735 15.513 16.841 0.156 0.061 0.321 0.092 0.487 0.092s0.331-0.031 0.487-0.092c5.367-2.107 15.513-8.339 15.513-16.841 0-4.688-2.712-9.733-8.667-9.733zM16 26.161c-5.537-2.309-13.333-7.799-13.333-14.161 0-3.517 1.856-7.067 6-7.067 2.983 0 4.656 1.451 6.384 3.203 0.5 0.508 1.399 0.508 1.899 0 1.728-1.752 3.401-3.203 6.384-3.203 4.144 0 6 3.549 6 7.067 0 6.363-7.796 11.852-13.333 14.161z"></path>
</svg>
`;

const sallaProductCardCss = ".s-product-card-image::before{font-family:\"sallaicons\";content:\"\\ec1f\" !important}.s-product-card-content-pie-svg circle{transition:stroke-dashoffset 1s linear;-webkit-transition:stroke-dashoffset 1s linear;-moz-transition:stroke-dashoffset 1s linear;-ms-transition:stroke-dashoffset 1s linear;-o-transition:stroke-dashoffset 1s linear;stroke:#E8EDF2;stroke-width:2px;stroke-linecap:round;fill:none}.s-product-card-content-pie-svg-bar{stroke:var(--color-primary) !important;stroke-dasharray:100 100;stroke-dashoffset:100}";

const SallaProductCard = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        // Store configs
        salla.onReady(() => {
            this.fitImageHeight = salla.config.get('store.settings.product.fit_type');
            salla.wishlist.event.onAdded((_res, id) => this.toggleFavoriteIcon(true, id));
            salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));
            this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
        });
        // Language
        salla.lang.onLoaded(() => {
            this.remained = salla.lang.get('pages.products.remained');
            this.donationAmount = salla.lang.get('pages.products.donation_amount');
            this.startingPrice = salla.lang.get('pages.products.starting_price');
            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
        });
        // Parse product data
        if (!this.product) {
            return;
        }
        try {
            this.productData = typeof this.product == 'object' ? this.product : JSON.parse(this.product);
        }
        catch (e) {
            salla.log('Bad json passed via product prop');
        }
    }
    // Private Methods
    initCircleBar() {
        let qty = this.productData.quantity, total = this.productData.quantity > 100 ? this.productData.quantity * 2 : 100, roundPercent = (qty / total) * 100, bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'), strokeDashOffsetValue = 100 - roundPercent;
        bar.style.strokeDashoffset = strokeDashOffsetValue;
    }
    toggleFavoriteIcon(isAdded = true, id = null) {
        if (id && id !== this.productData.id) {
            return;
        }
        this.wishlistBtn?.classList.toggle('s-product-card-wishlist-added', isAdded);
    }
    isInWishlist() {
        return salla.storage.get('salla::wishlist', []).includes(this.productData?.id);
    }
    async handleWishlistClick() {
        const wasInWishlist = this.isInWishlist();
        this.toggleFavoriteIcon(!wasInWishlist);
        try {
            await salla.wishlist.toggle(this.productData.id);
        }
        catch {
            this.toggleFavoriteIcon(wasInWishlist);
        }
    }
    formatDate(date) {
        let d = new Date(date);
        return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
    }
    getProductBadge() {
        if (this.productData.promotion_title) {
            return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
        }
        if (this.showQuantity && this.productData?.quantity) {
            return h("div", { class: "s-product-card-quantity" }, this.remained, " ", salla.helpers.number(this.productData?.quantity));
        }
        if (this.showQuantity && this.productData?.is_out_of_stock) {
            return h("div", { class: "s-product-card-out-badge" }, this.outOfStock);
        }
        return '';
    }
    getPriceFormat(price) {
        if (!price || price == 0) {
            return salla.config.get('store.settings.product.show_price_as_dash') ? '-' : '';
        }
        return salla.money(price);
    }
    getProductPrice() {
        if (this.productData.is_on_sale) {
            return h("div", { class: "s-product-card-sale-price" }, h("h4", { innerHTML: this.getPriceFormat(this.productData.sale_price) }), h("span", { innerHTML: this.getPriceFormat(this.productData?.regular_price) }));
        }
        if (this.productData.starting_price) {
            return h("div", { class: "s-product-card-starting-price" }, h("p", null, this.startingPrice), h("h4", { innerHTML: this.getPriceFormat(this.productData?.starting_price) }));
        }
        return h("h4", { class: "s-product-card-price", innerHTML: this.getPriceFormat(this.productData?.price) });
    }
    render() {
        const classes = {
            's-product-card-entry': true,
            's-product-card-vertical': !this.horizontal && !this.fullImage && !this.minimal,
            's-product-card-horizontal': this.horizontal && !this.fullImage && !this.minimal,
            's-product-card-fit-height': this.fitImageHeight && !this.isSpecial && !this.fullImage && !this.minimal,
            's-product-card-special': this.isSpecial,
            's-product-card-full-image': this.fullImage,
            's-product-card-minimal': this.minimal,
            's-product-card-compact': this.compact,
            's-product-card-donation': this.productData?.donation,
            's-product-card-shadow': this.shadowOnHover,
            's-product-card-out-of-stock': this.productData?.is_out_of_stock,
        };
        const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
        return (h(Host, { key: '9587bcb7fa6abdf1ec9cea621004e7e7077c2fd6', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: 'f2d3c72f55d302e85a2da4e478d294f1ff7a155b', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '932e6defeeec23cda564e80a55f90260d51a1996', ...hrefProp }, h("img", { key: 'f1a82c5dab197fff512d5ab220a34acea82fd6d0', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                ? 'contain'
                : this.fitImageHeight
                    ? this.fitImageHeight
                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '40eb012054592e5c65309a4fcbe6fd4f3512197e', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '91c99ae52ff1da64dfe69812ccfb26e91590f105', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
            h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
            : '', h("div", { key: '630f6fdafccb0a6d5db2eb9399f5ba7c02ffde4b', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '0c366496893811cec16c67b4c28c8ac6a40bd191', class: "s-product-card-content-title" }, h("a", { key: 'f9ba0a3655e8058b3a10c16016e7e5f3d85a6e8a', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
            h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
            : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
            [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
                    [h("label", { htmlFor: "donation-amount" }, this.donationAmount, " ", h("span", null, "*")), h("input", { type: "text", onInput: e => {
                                salla.helpers.inputDigitsOnly(e.target);
                                this.addBtn.donatingAmount = e.target.value;
                            }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                    : '')]
            : '', h("div", { key: 'd67416c75a6fb7daa507e2d578c11f5dc1ecff2f', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
            h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))
            : ''), this.isSpecial && this.productData.discount_ends
            ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
            : '', !this.hideAddBtn && !this.compact ?
            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)), this.horizontal || this.fullImage ?
                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick(), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
                : '')
            : ''), !this.hideAddBtn && this.compact ?
            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)))
            : ''));
    }
    componentDidLoad() {
        document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
        if (this.productData?.quantity && this.isSpecial) {
            this.initCircleBar();
        }
        if (!salla.config.isGuest() && salla.storage.get('salla::wishlist', []).includes(this.productData?.id)) {
            this.toggleFavoriteIcon();
        }
    }
    static get assetsDirs() { return ["assets"]; }
    get host() { return getElement(this); }
};
SallaProductCard.style = sallaProductCardCss;

const sallaProductsSliderCss = "";

const SallaProductsSlider = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Custom Card Component for the Salla Products Slider.
         *
         * This component allows you to customize the appearance of individual product cards within a Salla Products Slider.
         *
         * @example
         * <salla-products-slider product-card-component="my-custom-card-style1" ...
         * <salla-products-slider product-card-component="my-custom-card-style2" ...
         */
        this.productCardComponent = 'custom-salla-product-card';
        this.apiUrl = '';
    }
    componentWillLoad() {
        return salla.onReady()
            .then(() => {
            //TODO:: check why `this.includes` not working!!
            this.includes = Helper.parseJson(this.includes || this.host.getAttribute('includes'));
            if (!Array.isArray(this.includes)) {
                this.includes = null;
            }
            Helper.setIncludes(this.includes);
            this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
            if (!this.sourceValueIsValid) {
                salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);
                return;
            }
            this.hasCustomComponent = !!customElements.get(this.productCardComponent);
            if (this.source === 'json') {
                this.productsData = this.getSourceValue();
                this.isReady = true;
                return;
            }
            if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled'))) {
                this.isReady = false;
                return;
            }
            return salla.api.withoutNotifier(() => salla.product.api.fetch({
                source: Helper.getApiSource(this.getSource()),
                source_value: this.getSourceValue(),
                limit: this.limit
            }))
                .then(response => Helper.injectExtraFieldsToResponse(response))
                .then(response => {
                this.productsData = response.data;
                this.isReady = true;
                response.source = this.getSource();
                response.sourceValue = this.getSourceValue();
                salla.event.emit('salla-products-slider::products.fetched', response.data);
            });
        });
    }
    componentDidRender() {
        let processedCount = 0;
        const intervalId = setInterval(() => {
            this.host.querySelectorAll('[loading="lazy"]')?.forEach(img => img.removeAttribute('loading'));
            processedCount++;
            if (processedCount >= 10) {
                clearInterval(intervalId);
            }
        }, 1000);
    }
    async componentDidLoad() {
        await Salla.hooks.registerComponent('salla-products-slider', this);
    }
    isSourceWithoutValue() {
        return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());
    }
    getItemHTML(product) {
        //as a request they don't want to let the user to open the product details
        //todo:: find a better way to handle this request
        const isLandingPage = this.getSource() === 'landing-page';
        isLandingPage && (product.url = '');
        const handleClick = isLandingPage ? undefined : () => {
            Helper.saveProductSource(this.getSource());
        };
        if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
            return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));
        }
        if (this.hasCustomComponent) {
            const customElem = document.createElement(this.productCardComponent);
            customElem.setAttribute('product', JSON.stringify(product));
            customElem.setAttribute('source', this.getSource());
            customElem.setAttribute('source-value', this.getSourceValue());
            return h("div", { class: "s-products-slider-card", onClick: handleClick, innerHTML: customElem.outerHTML });
        }
        return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("salla-product-card", { "show-quantity": isLandingPage, "hide-add-btn": isLandingPage, "shadow-on-hover": true, product: product }));
    }
    canRender() {
        return this.sourceValueIsValid && this.isReady;
    }
    getSource() {
        return Helper.getProductsSource(this.source);
    }
    getSourceValue() {
        return Helper.getProductsSourceValue(this.source, this.sourceValue);
    }
    render() {
        if (!this.canRender()) {
            return;
        }
        return (h(Host, { class: "s-products-slider-wrapper" }, h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, ...(this.sliderProps || {}), "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
    }
    get host() { return getElement(this); }
};
SallaProductsSlider.style = sallaProductsSliderCss;

export { SallaProductCard as salla_product_card, SallaProductsSlider as salla_products_slider };
