@salla.sa/twilight-components 2.14.352 → 2.14.354

package/dist/esm/salla-notifications.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';
 

package/dist/esm/salla-offer-modal.entry.js

@@ -0,0 +1,204 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { S as SpecialDiscountIcon } from './special-discount-Ctkfc4K-.js';
+
+var Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tag</title>
+<path d="M28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>
+</svg>
+`;
+
+var Cart2 = `<!-- 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>cart2</title>
+<path d="M6.845 5.333l-1.905-5.333h-3.607c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333v0h1.727l5.72 16.012c0.569 1.56 2.039 2.654 3.765 2.655h12.133c0.001 0 0.002 0 0.003 0 1.825 0 3.364-1.222 3.845-2.892l0.007-0.028 3.161-13.080zM25.96 17.716c-0.167 0.554-0.672 0.951-1.27 0.951-0.002 0-0.005 0-0.007-0h-12.133c-0.575-0-1.065-0.364-1.252-0.875l-0.003-0.009-3.497-9.783h20.508zM13.333 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM13.333 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0zM24 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM24 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0z"></path>
+</svg>
+`;
+
+const sallaOfferModalCss = ".s-offer-modal-type-products .s-modal-body{min-height:690px;position:relative}";
+
+const SallaOfferModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.offer = null;
+        this.hasError = false;
+        this.translationLoaded = false;
+        this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
+        salla.event.on('offer-modal::open', product_id => this.open(product_id));
+        salla.lang.onLoaded(() => {
+            this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
+            this.translationLoaded = true;
+        });
+        this.categorySlot = this.host.querySelector('[slot="category"]')?.innerHTML || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
+        // this.productSlot = this.host.querySelector('[slot="product"]')?.innerHTML || this.defaultProductSlot();
+        salla.event.on('offer-modal::open', product_id => this.open(product_id));
+        salla.product.event.onOfferExisted(offer => {
+            if (salla.storage.get('remember-offer-' + offer.id)) {
+                salla.log('User selected to don\'t show this offer again.');
+                return;
+            }
+            this.open(offer.product_id);
+        });
+    }
+    /**
+ * Emits a promotion viewed event for analytics tracking
+ * @param offer - The offer being viewed in the modal
+ */
+    emitPromotionViewed(offer) {
+        if (!offer)
+            return;
+        salla.event.emit('promotion::viewed', [{
+                id: offer.id?.toString(),
+                creative: offer.message,
+                name: offer.name,
+                position: `${this.offer_type}_offer_modal`
+            }]);
+    }
+    /**
+     * Emits a promotion clicked event for analytics tracking
+     * @param offer - The offer being clicked in the modal
+     */
+    emitPromotionClicked(offer) {
+        if (!offer)
+            return;
+        salla.event.emit('promotion::clicked', [{
+                id: offer.id?.toString(),
+                creative: offer.message,
+                name: offer.name,
+                position: `${this.offer_type}_offer_modal`
+            }]);
+    }
+    /**
+     * Show the available offers for the product
+     * @param product_id
+     */
+    async open(product_id) {
+        this.productID = product_id;
+        //TODO:: make sure there is only one offer
+        this.hasError = false;
+        this.modal.open();
+        return await salla.api.withoutNotifier(() => salla.product.offers(product_id))
+            .then(response => this.showOffer(response.data[0]))
+            .catch(e => {
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        })
+            .finally(() => setTimeout(() => this.modal.stopLoading(), 1000));
+    }
+    /**
+     * Show offer details
+     * @param {Offer} offer
+     */
+    async showOffer(offer) {
+        this.offer = offer;
+        this.offer_name = offer.name;
+        this.offer_message = offer.message;
+        if (this.offer.get.discounts_table) {
+            this.offer_type = 'discounts-table';
+        }
+        else if (this.offer.get.products?.length) {
+            this.offer_type = 'products';
+        }
+        else if (this.offer.get.categories?.length) {
+            this.offer_type = 'categories';
+        }
+        this.modal.setTitle(this.offer_name);
+        this.emitPromotionViewed(this.offer);
+    }
+    rememberMe(event) {
+        salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
+    }
+    addToCart(qty) {
+        //todo:: add enhancement, to cover the previous quantity, because if the discount to add two, user already added one before.
+        this.emitPromotionClicked(this.offer);
+        salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty, this.offer_type)).then(() => this.modal.close());
+    }
+    getOfferContent() {
+        if (this.offer.get.discounts_table) {
+            return h("div", { class: "s-offer-modal-discount-table" }, h("table", null, h("tbody", null, this.offer.get.discounts_table?.map(discount => h("tr", null, h("td", null, discount.text), h("td", { class: "s-offer-modal-discount-table-cell" }, h("salla-button", { fill: "outline", shape: "btn", color: "primary", size: "medium", width: "normal", onClick: () => this.addToCart(discount.quantity) }, this.addToCartLabel)))))));
+        }
+        else if (this.offer.get.products?.length) {
+            const productsCount = this.offer.get.products?.length || 0;
+            const sliderConfig = {
+                slidesPerView: 'auto',
+                spaceBetween: 16,
+                breakpoints: {
+                    768: {
+                        slidesPerView: Math.min(2, productsCount),
+                        spaceBetween: 16
+                    },
+                    1024: {
+                        slidesPerView: Math.min(3, productsCount),
+                        spaceBetween: 16
+                    }
+                }
+            };
+            return (h("salla-products-slider", { key: (this.offer.get.products?.map(product => product.id) || []).join(","), source: "selected", "source-value": `[${(this.offer.get.products?.map(product => product.id) || []).join(",")}]`, "slider-config": JSON.stringify(sliderConfig) }));
+            //   return <salla-slider
+            //     type="carousel"
+            //     class={{"s-offer-modal-slider-centered": this.offer.get.products?.length <= 2, "s-offer-modal-slider": true}}
+            //     id="offer-modal-slider"
+            //     controls-outer
+            //     show-controls={this.offer.get.products?.length <= 2 ? 'false' : 'true'}>
+            //     <div slot='items'>
+            //       {
+            //         this.offer.get.products?.map(product =>
+            //           <div class={{
+            //             "s-offer-modal-product": true,
+            //             "s-offer-modal-slider-item": true,
+            //             "s-offer-modal-not-available": !product.is_available
+            //           }} id={'product_' + product.id} innerHTML={this.productSlot
+            //             .replace(/\{name\}/g, product.name)
+            //             .replace(/\{url\}/g, product.url)
+            //             .replace(/\{image\}/g, product.thumbnail)
+            //             .replace(/\{price\}/g, product.has_special_price
+            //               ? '<span class="s-offer-modal-product-sale-price">' + salla.money(product.price) + '</span><span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
+            //               : salla.money(product.price))}>
+            //             <div class="s-offer-modal-btn-wrap">
+            //               <salla-button width="wide" fill='outline' data-id={product.id} disabled={!product.is_available}
+            //                 loader-position="center" onClick={this.addItem}>
+            //                 {product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')}
+            //               </salla-button>
+            //             </div>
+            //           </div>)
+            //       }
+            //    </div>
+            //   </salla-slider>
+        }
+        else if (this.offer.get.categories?.length) {
+            return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": this.offer.get.categories?.length <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": this.offer.get.categories?.length <= 2 ? 'false' : 'true' }, h("div", { slot: 'items' }, this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item s-offer-modal-cat-item", innerHTML: this.categorySlot
+                    .replace(/\{tagIcon\}/g, Tag)
+                    .replace(/\{name\}/g, category.name)
+                    .replace(/\{url\}/g, category.urls.customer) }))));
+        }
+    }
+    //todo:: pass event then use sallaButton from it
+    //   private addItem() {
+    //     // this here, is sallaButton
+    //     this['load']();
+    //     return salla.cart.api
+    //       .quickAdd(this['dataset'].id)
+    //       .finally(() => this['stop']());
+    //   }
+    //   private defaultProductSlot() {
+    //     return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
+    //       '<div class="s-offer-modal-product-info">' +
+    //       '   <a href={url} class="s-offer-modal-product-name">{name}</a>' +
+    //       '   <div class="s-offer-modal-product-price">{price}</div>' +
+    //       '</div>';
+    //   }
+    render() {
+        return h("salla-modal", { key: '2c88abbe21015431b7e70f2369284e2f93c6fd3c', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: 'f44a915307bdc059c937d60a79a1c22a59957928', slot: 'loading' }, h("div", { key: '7b4b6f9572a2893aa5353a5ba2d4d62a2a5d8742', class: "s-offer-modal-skeleton" }, h("div", { key: 'a6b2f782cd643dc322e3f3c29a596a44fc9b1ace', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: 'a745dc619995820ac3a3bb9169b8a25cbceed9ea', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '7d54b0aaa14742f4dfef0e2b26d48eb24f1661c5', height: '15px', width: '50%' }), h("salla-skeleton", { key: '042349f3c34308d070f36c30ac942935da5afebe', height: '10px', width: '30%' })), h("div", { key: '691f32282147054b2dd76d1e324ddd172214cbbd', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '97cbe8b3ca1c8dde39a2c33995116a7a5d088594', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: 'c2f5d9d2e212e0383f6b4d159f1c9ce52c9064b7', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'c64ed16e51a4c9f302f915c025473a42d69d4490', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+            ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
+                    h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)
+                    : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", salla.lang.get('common.elements.remember_my_choice'))),
+            ] :
+            h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : ''));
+    }
+    get host() { return getElement(this); }
+};
+SallaOfferModal.style = sallaOfferModalCss;
+
+export { SallaOfferModal as salla_offer_modal };

package/dist/esm/salla-offer.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
 
 var PageType;
 (function (PageType) {

package/dist/esm/salla-order-details-multiple-bundle-product.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
 
 const sallaOrderDetailsMultipleBundleProductCss = "";
 

package/dist/esm/salla-order-details-options.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
 
 var copyIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-order-details.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, F as Fragment, H as Host } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, F as Fragment, H as Host } from './index-B74h9G6a.js';
 
 const sallaOrderDetailsCss = "";
 

package/dist/esm/salla-order-summary.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-D2-TtAhI.js';
-import { I as IconVerified } from './check-uTyAzPSy.js';
+import { r as registerInstance, h } from './index-B74h9G6a.js';
+import { i as iconCheck } from './check-BsXh13x8.js';
 
 var iconFileArchive = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -91,7 +91,7 @@ const SallaOrderSummary = class {
     }
     render() {
         return (h("ul", { key: 'ca710705a5f99c2442a5fdd25a29ff7202343723', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
-            this.order_items.map((item) => (this.isDigitalCard(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.codes_text, " (", item.name, ")"), item.codes.map((code) => (h("div", { key: code.code, class: "s-order-summary-code-item-wrapper" }, h("p", null, h("span", { innerHTML: iconCreditCard }), h("span", null, code.code)), h("salla-button", { class: `s-order-summary-item-copy-button ${this.codeCopied === code.code ? 'copied' : ''}`, onClick: () => this.copyToClipboardHandler(code.code), shape: "link" }, h("span", { innerHTML: this.codeCopied === code.code ? IconVerified : iconCopy }), h("span", null, this.copy_text))))))) :
+            this.order_items.map((item) => (this.isDigitalCard(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.codes_text, " (", item.name, ")"), item.codes.map((code) => (h("div", { key: code.code, class: "s-order-summary-code-item-wrapper" }, h("p", null, h("span", { innerHTML: iconCreditCard }), h("span", null, code.code)), h("salla-button", { class: `s-order-summary-item-copy-button ${this.codeCopied === code.code ? 'copied' : ''}`, onClick: () => this.copyToClipboardHandler(code.code), shape: "link" }, h("span", { innerHTML: this.codeCopied === code.code ? iconCheck : iconCopy }), h("span", null, this.copy_text))))))) :
                 this.isDigitalProduct(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.files_text, " (", item.name, ")"), h("ul", null, item.files.map((file) => (h("li", { class: "s-order-summary-digital-item-wrapper" }, h("div", null, h("span", { innerHTML: iconFileArchive }), h("span", null, file.name)), h("a", { href: file.url, target: "_blank", class: "s-order-summary-item-download" }, h("span", { innerHTML: iconDownload }), h("span", null, this.download_text)))))))) : null))));
     }
 };

package/dist/esm/salla-order-totals-card.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
 
 const sallaOrderTotalsCardCss = ":host{display:block}";
 

package/dist/esm/salla-orders.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';
 

package/dist/esm/salla-payments.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
 
 const sallaPaymentsCss = ":host{display:block}";
 

package/dist/esm/salla-placeholder.entry.js

@@ -0,0 +1,49 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+
+var Inbox = `<!-- 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>inbox</title>
+<path d="M31.984 19.797l-2.667-17.333c-0.1-0.651-0.659-1.131-1.317-1.131h-24c-0.659 0-1.217 0.48-1.317 1.131l-2.667 17.333c-0.011 0.067-0.016 0.135-0.016 0.203v6.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-6.667c0-0.068-0.005-0.136-0.016-0.203zM5.144 4h21.712l2.256 14.667h-9.112c-0.736 0-1.333 0.596-1.333 1.333 0 1.471-1.196 2.667-2.667 2.667s-2.667-1.196-2.667-2.667c0-0.737-0.597-1.333-1.333-1.333h-9.112zM29.333 26.667c0 0.736-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.597-1.333-1.333v-5.333h8.168c0.593 2.299 2.684 4 5.165 4s4.571-1.701 5.165-4h8.168z"></path>
+</svg>
+`;
+
+const sallaPlaceholderCss = "";
+
+const SallaPlaceholder = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.translationLoaded = false;
+        /**
+         * Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon
+         */
+        this.icon = Inbox;
+        /**
+         * Defines the alignment of contents. Defaults to [`left`]
+         */
+        this.alignment = 'left';
+        /**
+          * The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
+          */
+        this.iconSize = 'md';
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+        });
+    }
+    alignmentClass() {
+        return {
+            's-placeholder-wrapper': true,
+            's-placeholder-align-left': this.alignment == 'left',
+            's-placeholder-align-center': this.alignment == 'center',
+            's-placeholder-align-right': this.alignment == 'right',
+        };
+    }
+    render() {
+        return (h(Host, { key: '5f8dc6c1c73a5ed21d571b692eadbf56cac2a133', class: this.alignmentClass() }, h("div", { key: '56df7bf4ce025b484943ec504c20bdedbb15604e', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: 'c72a76711d4e915bc24557c7c490c2cf5899db12', class: "s-placeholder-title" }, h("slot", { key: 'a77295c121d95dad05657577b56bd4c220bdca03', name: 'title' }, h("span", { key: 'de463d3b9d37bd3231dc818dca9d3d37211881ad' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '5af30b0673bef28cc61165969138f30638f6bc1a', class: "s-placeholder-description" }, h("slot", { key: '18057d95114aa4a074c29dbc60de1b4a707fa8f5', name: 'description' }, h("span", { key: '1695227c9a861b78fad5a850b22f8d51e812c0ab' }, salla.lang.get('common.errors.empty_results'))))));
+    }
+};
+SallaPlaceholder.style = sallaPlaceholderCss;
+
+export { SallaPlaceholder as salla_placeholder };

package/dist/esm/salla-price-range.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-D2-TtAhI.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B74h9G6a.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 
 var arrowRight = `<!-- Generated by IcoMoon.io -->

package/dist/esm/salla-product-size-guide.entry.js

@@ -0,0 +1,64 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+
+var PencilRuler = `<!-- 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>pencil-ruler</title>
+<path d="M3.057 11.609c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l6.667-6.667c0.521-0.521 0.521-1.364 0-1.885l-1.285-1.285c-1.143-1.143-2.661-1.772-4.276-1.772-1.616 0-3.135 0.629-4.276 1.772-1.143 1.141-1.772 2.66-1.772 4.276 0 1.615 0.629 3.135 1.772 4.276zM3.657 3.657c1.277-1.277 3.504-1.277 4.781 0l0.343 0.343-4.781 4.781-0.343-0.343c-0.639-0.639-0.991-1.488-0.991-2.391s0.352-1.752 0.991-2.391zM29.317 20.972c-0.2-0.707-0.932-1.119-1.645-0.921-0.709 0.2-1.121 0.937-0.921 1.645l1.987 7.041-7.041-1.987c-0.707-0.195-1.444 0.213-1.645 0.921-0.2 0.708 0.212 1.445 0.921 1.645l9.333 2.633c0.119 0.032 0.24 0.049 0.361 0.049 0.349 0 0.689-0.137 0.943-0.391 0.341-0.341 0.472-0.84 0.34-1.305zM31.609 8.772l-8.381-8.381c-0.5-0.5-1.385-0.5-1.885 0l-8.171 8.171s-0.001 0-0.001 0.001 0 0.001-0.001 0.001l-4.607 4.607s0 0-0.001 0 0 0 0 0.001l-8.171 8.171c-0.251 0.249-0.391 0.588-0.391 0.943 0 0.353 0.14 0.693 0.391 0.943l8.381 8.381c0.249 0.251 0.589 0.391 0.943 0.391s0.693-0.14 0.943-0.391l20.952-20.952c0.521-0.521 0.521-1.365 0-1.885zM9.715 28.781l-6.495-6.496 1.676-1.676 1.851 1.851c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885l-3.008-3.008 2.724-2.724 1.851 1.851c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.52 0.521-1.364 0-1.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.365 0-1.885l-3.008-3.008 1.677-1.677 6.496 6.496z"></path>
+</svg>
+`;
+
+const sallaProductSizeGuideCss = "";
+
+const SallaProductSizeGuide = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hasError = false;
+        salla.event.on('size-guide::open', (product_id) => this.open(product_id));
+        salla.lang.onLoaded(() => {
+            this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
+            this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
+            this.modal_title = salla.lang.get('pages.products.size_guides');
+        });
+    }
+    /**
+     * Show the size-guide modal window
+     */
+    async open(product_id) {
+        this.modal.setTitle(this.modal_title);
+        this.modal.open();
+        return await salla.api.withoutNotifier(() => salla.product.getSizeGuides(product_id))
+            .then((response) => {
+            this.guides = response.data;
+        })
+            .catch(e => {
+            console.log(e);
+            this.hasError = true;
+            this.placeholder_description = e.response?.data?.error?.message || e.response?.data;
+        })
+            .finally(() => this.modal.stopLoading());
+    }
+    /**
+     *
+     * Hide the size-guide modal window
+     */
+    async close() {
+        return this.modal.close();
+    }
+    showPlaceholder() {
+        return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
+    }
+    render() {
+        return (h("salla-modal", { key: '6c952c6cdd01f99332809112fd5921c4b43cd518', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: 'f4260144f981da0081e09895b7a065cad1fa66bc', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '80e28a80741f103fdc788a6afa8809dfabfd64f6', slot: "loading" }, h("div", { key: 'e190d657a6a03e48a813c2f78321c12cf95eadcb', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '94cb87240b52244a86ba76893261048aa3f356d9', height: '15px', width: '25%' }), h("div", { key: 'c8bba70713c78829d0973b845a3ed942cb7fa150', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '13b2fe8a4655457567d087e5763e43abb8b2d2a5', height: '40px' }), h("salla-skeleton", { key: '4b23015076c7c44794eecf85a4355264f778ef10', height: '40px' }), h("salla-skeleton", { key: '3cd58dfafb05cc2bac89ad6973247075d0dd9571', height: '40px' }), h("salla-skeleton", { key: '36f28def58893e567e6186d94ec3a84abed159ab', height: '40px' })), h("div", { key: '854881c782f372b2ed1b08874dfa4bd5d64edef2', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: 'a790751c95177a49135859f5810b4cd947fa4314', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'a9e4bd9a0bf55bd391da7f68ba85db7893f1eb81', height: '10px', width: '75%' }), h("salla-skeleton", { key: 'b0f73c83abd9b6e8521dacb823d65f13f9ba54bb', height: '10px', width: '50%' }), h("salla-skeleton", { key: 'fe92879eedf28801c4d267e4595e5f4aa5c7b871', height: '10px', width: '75%' }), h("salla-skeleton", { key: '652d460114bc710073adcb2e31a6627c938259c5', height: '10px', width: '100%' }), h("salla-skeleton", { key: '71f461d5256a05d4ac407b00daf2e20dccef0cf5', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'dbd224caad4233eb0bf8a5012fab7160d067d371', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'c87baa836ae0282047ccc8b7fb122a80cdf7256a', height: '10px', width: '45%' }), h("salla-skeleton", { key: '2c02db790ed567de556d7fa74f48843d156dedb6', height: '10px', width: '30%' })))), h("slot", { key: '155efc69836cfc62382a8b3f7929c7200244f4ba', name: "header" }), !this.hasError && !!this.guides ?
+            [
+                h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
+            ]
+            : this.showPlaceholder(), h("slot", { key: '6d212a3d48df9363485e77f37f71276a1c3f8ee7', name: "footer" })));
+    }
+    get host() { return getElement(this); }
+};
+SallaProductSizeGuide.style = sallaProductSizeGuideCss;
+
+export { SallaProductSizeGuide as salla_product_size_guide };