npm - @salla.sa/twilight-components - Versions diffs - 2.14.139 → 2.14.141 - Mend

@salla.sa/twilight-components 2.14.139 → 2.14.141

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/dist/components/salla-offer-modal.js CHANGED Viewed

@@ -3,12 +3,20 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { S as SpecialDiscountIcon } from './special-discount.js';
-import { d as defineCustomElement$7 } from './salla-button2.js';
-import { d as defineCustomElement$6 } from './salla-loading2.js';
-import { d as defineCustomElement$5 } from './salla-modal2.js';
-import { d as defineCustomElement$4 } from './salla-placeholder2.js';
-import { d as defineCustomElement$3 } from './salla-skeleton2.js';
-import { d as defineCustomElement$2 } from './salla-slider2.js';
+import { d as defineCustomElement$f } from './salla-add-product-button2.js';
+import { d as defineCustomElement$e } from './salla-button2.js';
+import { d as defineCustomElement$d } from './salla-count-down2.js';
+import { d as defineCustomElement$c } from './salla-loading2.js';
+import { d as defineCustomElement$b } from './salla-modal2.js';
+import { d as defineCustomElement$a } from './salla-placeholder2.js';
+import { d as defineCustomElement$9 } from './salla-product-availability2.js';
+import { d as defineCustomElement$8 } from './salla-product-card2.js';
+import { d as defineCustomElement$7 } from './salla-products-slider2.js';
+import { d as defineCustomElement$6 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$5 } from './salla-quick-buy2.js';
+import { d as defineCustomElement$4 } from './salla-skeleton2.js';
+import { d as defineCustomElement$3 } from './salla-slider2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
 const Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>tag</title>
@@ -29,7 +37,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaOfferModal
   constructor() {
     super();
     this.__registerHost();
-    var _a, _b;
+    var _a;
     this.offer = null;
     this.offer_name = undefined;
     this.offer_message = undefined;
@@ -45,7 +53,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaOfferModal
       this.translationLoaded = true;
     });
     this.categorySlot = ((_a = this.host.querySelector('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
-    this.productSlot = ((_b = this.host.querySelector('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
+    // 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)) {
@@ -101,45 +109,65 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaOfferModal
     salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty, this.offer_type)).then(() => this.modal.close());
   }
   getOfferContent() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     if (this.offer.get.discounts_table) {
       return h("div", { class: "s-offer-modal-discount-table" }, h("table", null, h("tbody", null, (_a = this.offer.get.discounts_table) === null || _a === void 0 ? void 0 : _a.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 ((_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.length) {
-      return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_c = this.offer.get.products) === null || _c === void 0 ? void 0 : _c.length) <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": ((_d = this.offer.get.products) === null || _d === void 0 ? void 0 : _d.length) <= 2 ? 'false' : 'true' }, h("div", { slot: 'items' }, (_e = this.offer.get.products) === null || _e === void 0 ? void 0 : _e.map(product => h("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)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("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')))))));
+      return (h("salla-products-slider", { source: "selected", "source-value": `[${(((_c = this.offer.get.products) === null || _c === void 0 ? void 0 : _c.map(product => product.id)) || []).join(",")}]`, "slider-config": '{"slidesPerView": 1, "spaceBetween": 16, "breakpoints": { "768": { "slidesPerView": 2 }, "1024": { "slidesPerView": 3 } }}' }));
+      //   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 ((_f = this.offer.get.categories) === null || _f === void 0 ? void 0 : _f.length) {
-      return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_g = this.offer.get.categories) === null || _g === void 0 ? void 0 : _g.length) <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": ((_h = this.offer.get.categories) === null || _h === void 0 ? void 0 : _h.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
+    else if ((_d = this.offer.get.categories) === null || _d === void 0 ? void 0 : _d.length) {
+      return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_e = this.offer.get.categories) === null || _e === void 0 ? void 0 : _e.length) <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": ((_f = this.offer.get.categories) === null || _f === void 0 ? void 0 : _f.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
-  addItem() {
-    // this here, is sallaButton
-    this['load']();
-    return salla.cart.api
-      .quickAdd(this['dataset'].id)
-      .finally(() => this['stop']());
-  }
-  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>';
-  }
+  //   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", { "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", { slot: 'loading' }, h("div", { class: "s-offer-modal-skeleton" }, h("div", { class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { height: '15px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '30%' })), h("div", { 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", { class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { height: '15px', width: '50%' }), h("salla-skeleton", { 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 ?
@@ -167,39 +195,79 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-offer-modal", "salla-button", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-slider"];
+  const components = ["salla-offer-modal", "salla-add-product-button", "salla-button", "salla-count-down", "salla-loading", "salla-modal", "salla-placeholder", "salla-product-availability", "salla-product-card", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-skeleton", "salla-slider", "salla-tel-input"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-offer-modal":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SallaOfferModal$1);
       }
       break;
+    case "salla-add-product-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
     case "salla-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$e();
+      }
+      break;
+    case "salla-count-down":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
       }
       break;
     case "salla-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$c();
       }
       break;
     case "salla-modal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$b();
       }
       break;
     case "salla-placeholder":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$a();
+      }
+      break;
+    case "salla-product-availability":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "salla-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "salla-products-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "salla-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "salla-quick-buy":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
       }
       break;
     case "salla-skeleton":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "salla-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-tel-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/salla-offer-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-offer-modal.js","mappings":"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","names":["SallaOfferModal"],"sources":["src/components/salla-offer-modal/salla-offer-modal.scss?tag=salla-offer-modal","src/components/salla-offer-modal/salla-offer-modal.tsx"],"sourcesContent":["/\n Salla Offer Modal Component: popup modal to display the offers\n* You can use these classes to target the elements in the component.\n/\n\n.s-offer-modal {\n &-body {\n \n }\n &-badge {\n &-icon {\n\n }\n &-text {\n\n }\n }\n &-product {\n &-image-wrap {\n\n }\n &-image {\n\n }\n &-info {\n\n }\n &-name {\n\n }\n &-price {\n\n }\n &-old-price {\n\n }\n }\n &-btn-wrap {\n\n }\n &-footer {\n\n }\n &-expiry {\n\n }\n &-remember-label {\n\n }\n &-remember-input {\n\n }\n &-scrolled-slider-wrap {\n\n }\n &-slider-nav {\n\n }\n &-nav-btn {\n\n }\n &-nav-btn-icon {\n\n }\n &-next-btn {\n \n }\n &-prev-btn {\n \n }\n &-btn-is-active {\n\n }\n}","import { Component, h, Element, Method, State } from '@stencil/core';\nimport Offer from \"./offer-schema\";\nimport SpecialDiscountIcon from '../../assets/svg/special-discount.svg';\nimport Tag from \"../../assets/svg/tag.svg\";\nimport Cart2 from '../../assets/svg/cart2.svg';\n\n/\n @slot header - The top of the popup, has replaceable props `{name}`, `{message}`.\n * @slot product - Replaces product card, has replaceable props `{name}`, `{url}`, `{image}`, `{price}`.\n * @slot category - Replaces Category badge, has replaceable props `{name}`, `{url}`.\n /\n@Component({\n tag: 'salla-offer-modal',\n styleUrl: 'salla-offer-modal.scss'\n})\n\nexport class SallaOfferModal {\n private productSlot: string;\n private categorySlot: string;\n private modal: HTMLSallaModalElement;\n @Element() host: HTMLElement;\n @State() offer: null \| Offer = null;\n @State() offer_name: string;\n @State() offer_message: string;\n @State() hasError: boolean = false;\n @State() errorMessage: string;\n @State() productID: number;\n @State() offer_type: string;\n\n constructor() {\n salla.event.on('offer-modal::open', product_id => this.open(product_id));\n\n salla.lang.onLoaded(() => {\n this.addToCartLabel = salla.lang.get(\"pages.cart.add_to_cart\")\n this.translationLoaded = true;\n });\n\n 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>`;\n this.productSlot = this.host.querySelector('[slot=\"product\"]')?.innerHTML \|\| this.defaultProductSlot();\n salla.event.on('offer-modal::open', product_id => this.open(product_id));\n salla.product.event.onOfferExisted(offer => {\n if (salla.storage.get('remember-offer-' + offer.id)) {\n salla.log('User selected to don\\'t show this offer again.');\n return;\n }\n this.open(offer.product_id);\n });\n }\n\n @State() translationLoaded: boolean = false;\n @State() addToCartLabel: string = salla.lang.get(\"pages.cart.add_to_cart\");\n\n /\n Show the available offers for the product\n * @param product_id\n /\n @Method()\n async open(product_id: number) {\n this.productID = product_id;\n //TODO:: make sure there is only one offer\n\n this.hasError = false;\n this.modal.open()\n return await salla.api.withoutNotifier(() => salla.product.offers(product_id))\n .then(response => this.showOffer(response.data[0]))\n .catch(e => {\n this.hasError = true;\n this.errorMessage = e.response?.data?.error?.message \|\| e.response?.data;\n })\n .finally(() => setTimeout(() => this.modal.stopLoading(), 1000));\n }\n\n /\n Show offer details\n * @param {Offer} offer\n */\n @Method()\n async showOffer(offer) {\n this.offer = offer;\n this.offer_name = offer.name;\n this.offer_message = offer.message;\n if (this.offer.get.discounts_table) {\n this.offer_type = 'discounts-table'\n } else if (this.offer.get.products?.length) {\n this.offer_type = 'products'\n } else if (this.offer.get.categories?.length) {\n this.offer_type = 'categories'\n }\n this.modal.setTitle(this.offer_name);\n }\n\n private rememberMe(event) {\n salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);\n }\n\n private addToCart(qty) {\n //todo:: add enhancement, to cover the previous quantity, because if the discount to add two, user already added one before.\n salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty, this.offer_type)).then(() => this.modal.close())\n }\n\n private getOfferContent() {\n if (this.offer.get.discounts_table) {\n return <div class=\"s-offer-modal-discount-table\">\n <table>\n <tbody>\n {this.offer.get.discounts_table?.map(discount =>\n <tr>\n <td>{discount.text}</td>\n <td class=\"s-offer-modal-discount-table-cell\">\n <salla-button fill=\"outline\" shape=\"btn\" color=\"primary\" size=\"medium\" width=\"normal\"\n onClick={() => this.addToCart(discount.quantity)}>{this.addToCartLabel}</salla-button>\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n }\n else if (this.offer.get.products?.length) {\n return <salla-slider\n type=\"carousel\"\n class={{\"s-offer-modal-slider-centered\": this.offer.get.products?.length <= 2, \"s-offer-modal-slider\": true}}\n id=\"offer-modal-slider\"\n controls-outer\n show-controls={this.offer.get.products?.length <= 2 ? 'false' : 'true'}>\n <div slot='items'>\n {\n this.offer.get.products?.map(product =>\n <div class={{\n \"s-offer-modal-product\": true,\n \"s-offer-modal-slider-item\": true,\n \"s-offer-modal-not-available\": !product.is_available\n }} id={'product_' + product.id} innerHTML={this.productSlot\n .replace(/\\{name\\}/g, product.name)\n .replace(/\\{url\\}/g, product.url)\n .replace(/\\{image\\}/g, product.thumbnail)\n .replace(/\\{price\\}/g, product.has_special_price\n ? '<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>'\n : salla.money(product.price))}>\n <div class=\"s-offer-modal-btn-wrap\">\n <salla-button width=\"wide\" fill='outline' data-id={product.id} disabled={!product.is_available}\n loader-position=\"center\" onClick={this.addItem}>\n {product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')}\n </salla-button>\n </div>\n </div>)\n }\n </div>\n </salla-slider>\n }\n else if (this.offer.get.categories?.length) {\n return <salla-slider\n type=\"carousel\"\n class={{\"s-offer-modal-slider-centered\": this.offer.get.categories?.length <= 2, \"s-offer-modal-slider\": true}}\n id=\"offer-modal-slider\"\n controls-outer\n show-controls={this.offer.get.categories?.length <= 2 ? 'false' : 'true'}>\n <div slot='items'>\n {\n this.offer.get.categories.map(category =>\n <a href={category.urls.customer} class=\"s-offer-modal-badge s-offer-modal-slider-item s-offer-modal-cat-item\" innerHTML={\n this.categorySlot\n .replace(/\\{tagIcon\\}/g, Tag)\n .replace(/\\{name\\}/g, category.name)\n .replace(/\\{url\\}/g, category.urls.customer)\n }>\n </a>\n )}\n </div>\n </salla-slider>\n }\n }\n\n //todo:: pass event then use sallaButton from it\n private addItem() {\n // this here, is sallaButton\n this['load']();\n return salla.cart.api\n .quickAdd(this['dataset'].id)\n .finally(() => this['stop']());\n }\n\n private defaultProductSlot() {\n return '<a href={url} class=\"s-offer-modal-product-image-wrap\"><img class=\"s-offer-modal-product-image\" src=\"{image}\" /></a>' +\n '<div class=\"s-offer-modal-product-info\">' +\n ' <a href={url} class=\"s-offer-modal-product-name\">{name}</a>' +\n ' <div class=\"s-offer-modal-product-price\">{price}</div>' +\n '</div>';\n }\n\n render() {\n return <salla-modal has-skeleton sub-title={this.offer_message} ref={modal => this.modal = modal}\n isLoading={true} class={`s-offer-modal-type-${this.offer_type ? this.offer_type : ''}`}>\n <div slot='loading'>\n <div class=\"s-offer-modal-skeleton\">\n <div class=\"s-offer-modal-skeleton-header\">\n <salla-skeleton type='circle' height='80px' width='80px'></salla-skeleton>\n <salla-skeleton height='15px' width='50%'></salla-skeleton>\n <salla-skeleton height='10px' width='30%'></salla-skeleton>\n </div>\n <div class=\"s-offer-modal-skeleton-items\">\n {[...Array(3)].map(() =>\n <div class=\"s-offer-modal-skeleton-item\">\n <salla-skeleton height='9rem'></salla-skeleton>\n <div class=\"s-offer-modal-skeleton-item-title\">\n <salla-skeleton height='15px' width='100%'></salla-skeleton>\n </div>\n <div class=\"s-offer-modal-skeleton-item-subtitle\">\n <salla-skeleton height='9px' width='50%'></salla-skeleton>\n <div innerHTML={Cart2}></div>\n </div>\n </div>\n )}\n </div>\n <div class=\"s-offer-modal-skeleton-footer\">\n <salla-skeleton height='15px' width='50%'></salla-skeleton>\n <salla-skeleton height='15px' width='30%'></salla-skeleton>\n </div>\n </div>\n </div>\n {!this.hasError && this.offer !== null\n\n ? [<span slot='icon' class=\"s-offer-modal-header-icon\" innerHTML={SpecialDiscountIcon}></span>,\n this.getOfferContent(),\n <div class=\"s-offer-modal-footer\" slot=\"footer\">\n {this.offer.formatted_date ?\n <p\n class=\"s-offer-modal-expiry\">{salla.lang.get('pages.products.offer_expires_in')} {this.offer.formatted_date}</p>\n : ''}\n <label class=\"s-offer-modal-remember-label\">\n <input type=\"checkbox\" onChange={e => this.rememberMe(e)} class=\"s-offer-modal-remember-input\" />\n   {salla.lang.get('common.elements.remember_my_choice')}\n </label>\n </div>,\n ] :\n <salla-placeholder class=\"s-loyalty-placeholder\" alignment=\"center\">\n {!!this.errorMessage ? <span slot=\"description\">{this.errorMessage}</span> : ''}\n </salla-placeholder>\n }\n </salla-modal>\n }\n}\n"],"version":3}
1	+ {"file":"salla-offer-modal.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,EAAE;;MCgBhBA,iBAAe;EAa1B;;;;iBAR+B,IAAI;;;oBAGN,KAAK;;;;6BAyBI,KAAK;0BACT,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC;IApBxE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IAEzE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAA;MAC9D,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;KAC/B,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,0CAAE,SAAS,KAAI,6GAA6G,CAAC;;IAE7L,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,EAAE,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK;MACtC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,EAAE;QACnD,KAAK,CAAC,GAAG,CAAC,gDAAgD,CAAC,CAAC;QAC5D,OAAO;OACR;MACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC7B,CAAC,CAAC;GACJ;;;;;EAUD,MAAM,IAAI,CAAC,UAAkB;IAC3B,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;;IAG5B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;IACjB,OAAO,MAAM,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;OAC3E,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OAClD,KAAK,CAAC,CAAC;;MACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,0CAAE,KAAK,0CAAE,OAAO,MAAI,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAA,CAAC;KAC1E,CAAC;OACD,OAAO,CAAC,MAAM,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;GACpE;;;;;EAOD,MAAM,SAAS,CAAC,KAAK;;IACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC;IAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC;IACnC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,eAAe,EAAE;MAClC,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAA;KACpC;SAAM,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,0CAAE,MAAM,EAAE;MAC1C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;KAC7B;SAAM,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,0CAAE,MAAM,EAAE;MAC5C,IAAI,CAAC,UAAU,GAAG,YAAY,CAAA;KAC/B;IACD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GACtC;EAEO,UAAU,CAAC,KAAK;IACtB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;GAC5E;EAEO,SAAS,CAAC,GAAG;;IAEnB,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAA;GAC1H;EAEO,eAAe;;IACrB,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,eAAe,EAAE;MAClC,OAAO,WAAK,KAAK,EAAC,8BAA8B,IAC9C,iBACE,iBACG,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,eAAe,0CAAE,GAAG,CAAC,QAAQ,IAC3C,cACE,cAAK,QAAQ,CAAC,IAAI,CAAM,EACxB,UAAI,KAAK,EAAC,mCAAmC,IAC3C,oBAAc,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EACnF,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAG,IAAI,CAAC,cAAc,CAAgB,CACrF,CACF,CACN,CACK,CACF,CACJ,CAAA;KACP;SACI,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,0CAAE,MAAM,EAAE;MACtC,QACE,6BACE,MAAM,EAAC,UAAU,kBACH,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,0CAAE,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,EAAE,CAAC,KAAI,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,mBAC5E,4HAA4H,GACnH,EACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BL;SACI,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,0CAAE,MAAM,EAAE;MAC1C,OAAO,oBACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,EAAC,+BAA+B,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,EAAE,sBAAsB,EAAE,IAAI,EAAC,EAC9G,EAAE,EAAC,oBAAoB,2CAER,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,GAAG,OAAO,GAAG,MAAM,IACxE,WAAK,IAAI,EAAC,OAAO,IAEb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,IACpC,SAAG,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,sEAAsE,EAAC,SAAS,EACrH,IAAI,CAAC,YAAY;WACd,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC;WAC5B,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC;WACnC,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,GAE5C,CACL,CACC,CACO,CAAA;KAChB;GACF;;;;;;;;;;;;;;;;EAmBD,MAAM;IACJ,OAAO,sDAAqC,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,GAAG,KAAK,EAC9F,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,sBAAsB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,EAAE,EAAE,IACtF,WAAK,IAAI,EAAC,SAAS,IACjB,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,KAAK,EAAC,+BAA+B,IACxC,sBAAgB,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAkB,EAC1E,sBAAgB,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAkB,EAC3D,sBAAgB,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAkB,CACvD,EACN,WAAK,KAAK,EAAC,8BAA8B,IACtC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MACjB,WAAK,KAAK,EAAC,6BAA6B,IACtC,sBAAgB,MAAM,EAAC,MAAM,GAAkB,EAC/C,WAAK,KAAK,EAAC,mCAAmC,IAC5C,sBAAgB,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAkB,CACxD,EACN,WAAK,KAAK,EAAC,sCAAsC,IAC/C,sBAAgB,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,GAAkB,EAC1D,WAAK,SAAS,EAAE,KAAK,GAAQ,CACzB,CACF,CACP,CACG,EACN,WAAK,KAAK,EAAC,+BAA+B,IACxC,sBAAgB,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAkB,EAC3D,sBAAgB,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAkB,CACvD,CACF,CACF,EACL,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;QAElC,CAAC,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,2BAA2B,EAAC,SAAS,EAAE,mBAAmB,GAAS,EAC9F,IAAI,CAAC,eAAe,EAAE,EACtB,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,QAAQ,IAC5C,IAAI,CAAC,KAAK,CAAC,cAAc;UACxB,SACE,KAAK,EAAC,sBAAsB,IAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,iCAAiC,CAAC,OAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAK;YAChH,EAAE,EACN,aAAO,KAAK,EAAC,8BAA8B,IACzC,aAAO,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,8BAA8B,GAAG,aACzF,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,oCAAoC,CAAC,CACtD,CACJ;OACL;MACD,yBAAmB,KAAK,EAAC,uBAAuB,EAAC,SAAS,EAAC,QAAQ,IAChE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,YAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,YAAY,CAAQ,GAAG,EAAE,CAC7D,CAEV,CAAA;GACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaOfferModal"],"sources":["src/components/salla-offer-modal/salla-offer-modal.scss?tag=salla-offer-modal","src/components/salla-offer-modal/salla-offer-modal.tsx"],"sourcesContent":["/\n Salla Offer Modal Component: popup modal to display the offers\n* You can use these classes to target the elements in the component.\n/\n\n.s-offer-modal {\n &-body {\n \n }\n &-badge {\n &-icon {\n\n }\n &-text {\n\n }\n }\n &-product {\n &-image-wrap {\n\n }\n &-image {\n\n }\n &-info {\n\n }\n &-name {\n\n }\n &-price {\n\n }\n &-old-price {\n\n }\n }\n &-btn-wrap {\n\n }\n &-footer {\n\n }\n &-expiry {\n\n }\n &-remember-label {\n\n }\n &-remember-input {\n\n }\n &-scrolled-slider-wrap {\n\n }\n &-slider-nav {\n\n }\n &-nav-btn {\n\n }\n &-nav-btn-icon {\n\n }\n &-next-btn {\n \n }\n &-prev-btn {\n \n }\n &-btn-is-active {\n\n }\n}","import { Component, h, Element, Method, State } from '@stencil/core';\nimport Offer from \"./offer-schema\";\nimport SpecialDiscountIcon from '../../assets/svg/special-discount.svg';\nimport Tag from \"../../assets/svg/tag.svg\";\nimport Cart2 from '../../assets/svg/cart2.svg';\n\n/\n @slot header - The top of the popup, has replaceable props `{name}`, `{message}`.\n * @slot product - Replaces product card, has replaceable props `{name}`, `{url}`, `{image}`, `{price}`.\n * @slot category - Replaces Category badge, has replaceable props `{name}`, `{url}`.\n /\n@Component({\n tag: 'salla-offer-modal',\n styleUrl: 'salla-offer-modal.scss'\n})\n\nexport class SallaOfferModal {\n// private productSlot: string;\n private categorySlot: string;\n private modal: HTMLSallaModalElement;\n @Element() host: HTMLElement;\n @State() offer: null \| Offer = null;\n @State() offer_name: string;\n @State() offer_message: string;\n @State() hasError: boolean = false;\n @State() errorMessage: string;\n @State() productID: number;\n @State() offer_type: string;\n\n constructor() {\n salla.event.on('offer-modal::open', product_id => this.open(product_id));\n\n salla.lang.onLoaded(() => {\n this.addToCartLabel = salla.lang.get(\"pages.cart.add_to_cart\")\n this.translationLoaded = true;\n });\n\n 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>`;\n // this.productSlot = this.host.querySelector('[slot=\"product\"]')?.innerHTML \|\| this.defaultProductSlot();\n salla.event.on('offer-modal::open', product_id => this.open(product_id));\n salla.product.event.onOfferExisted(offer => {\n if (salla.storage.get('remember-offer-' + offer.id)) {\n salla.log('User selected to don\\'t show this offer again.');\n return;\n }\n this.open(offer.product_id);\n });\n }\n\n @State() translationLoaded: boolean = false;\n @State() addToCartLabel: string = salla.lang.get(\"pages.cart.add_to_cart\");\n\n /\n Show the available offers for the product\n * @param product_id\n /\n @Method()\n async open(product_id: number) {\n this.productID = product_id;\n //TODO:: make sure there is only one offer\n\n this.hasError = false;\n this.modal.open()\n return await salla.api.withoutNotifier(() => salla.product.offers(product_id))\n .then(response => this.showOffer(response.data[0]))\n .catch(e => {\n this.hasError = true;\n this.errorMessage = e.response?.data?.error?.message \|\| e.response?.data;\n })\n .finally(() => setTimeout(() => this.modal.stopLoading(), 1000));\n }\n\n /\n Show offer details\n * @param {Offer} offer\n */\n @Method()\n async showOffer(offer) {\n this.offer = offer;\n this.offer_name = offer.name;\n this.offer_message = offer.message;\n if (this.offer.get.discounts_table) {\n this.offer_type = 'discounts-table'\n } else if (this.offer.get.products?.length) {\n this.offer_type = 'products'\n } else if (this.offer.get.categories?.length) {\n this.offer_type = 'categories'\n }\n this.modal.setTitle(this.offer_name);\n }\n\n private rememberMe(event) {\n salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);\n }\n\n private addToCart(qty) {\n //todo:: add enhancement, to cover the previous quantity, because if the discount to add two, user already added one before.\n salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty, this.offer_type)).then(() => this.modal.close())\n }\n\n private getOfferContent() {\n if (this.offer.get.discounts_table) {\n return <div class=\"s-offer-modal-discount-table\">\n <table>\n <tbody>\n {this.offer.get.discounts_table?.map(discount =>\n <tr>\n <td>{discount.text}</td>\n <td class=\"s-offer-modal-discount-table-cell\">\n <salla-button fill=\"outline\" shape=\"btn\" color=\"primary\" size=\"medium\" width=\"normal\"\n onClick={() => this.addToCart(discount.quantity)}>{this.addToCartLabel}</salla-button>\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n }\n else if (this.offer.get.products?.length) {\n return (\n <salla-products-slider\n source=\"selected\"\n source-value={`[${(this.offer.get.products?.map(product => product.id) \|\| []).join(\",\")}]`}\n slider-config='{\"slidesPerView\": 1, \"spaceBetween\": 16, \"breakpoints\": { \"768\": { \"slidesPerView\": 2 }, \"1024\": { \"slidesPerView\": 3 } }}'\n ></salla-products-slider>\n );\n // return <salla-slider\n // type=\"carousel\"\n // class={{\"s-offer-modal-slider-centered\": this.offer.get.products?.length <= 2, \"s-offer-modal-slider\": true}}\n // id=\"offer-modal-slider\"\n // controls-outer\n // show-controls={this.offer.get.products?.length <= 2 ? 'false' : 'true'}>\n // <div slot='items'>\n // {\n // this.offer.get.products?.map(product =>\n // <div class={{\n // \"s-offer-modal-product\": true,\n // \"s-offer-modal-slider-item\": true,\n // \"s-offer-modal-not-available\": !product.is_available\n // }} id={'product_' + product.id} innerHTML={this.productSlot\n // .replace(/\\{name\\}/g, product.name)\n // .replace(/\\{url\\}/g, product.url)\n // .replace(/\\{image\\}/g, product.thumbnail)\n // .replace(/\\{price\\}/g, product.has_special_price\n // ? '<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>'\n // : salla.money(product.price))}>\n // <div class=\"s-offer-modal-btn-wrap\">\n // <salla-button width=\"wide\" fill='outline' data-id={product.id} disabled={!product.is_available}\n // loader-position=\"center\" onClick={this.addItem}>\n // {product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')}\n // </salla-button>\n // </div>\n // </div>)\n // }\n // </div>\n // </salla-slider>\n }\n else if (this.offer.get.categories?.length) {\n return <salla-slider\n type=\"carousel\"\n class={{\"s-offer-modal-slider-centered\": this.offer.get.categories?.length <= 2, \"s-offer-modal-slider\": true}}\n id=\"offer-modal-slider\"\n controls-outer\n show-controls={this.offer.get.categories?.length <= 2 ? 'false' : 'true'}>\n <div slot='items'>\n {\n this.offer.get.categories.map(category =>\n <a href={category.urls.customer} class=\"s-offer-modal-badge s-offer-modal-slider-item s-offer-modal-cat-item\" innerHTML={\n this.categorySlot\n .replace(/\\{tagIcon\\}/g, Tag)\n .replace(/\\{name\\}/g, category.name)\n .replace(/\\{url\\}/g, category.urls.customer)\n }>\n </a>\n )}\n </div>\n </salla-slider>\n }\n }\n\n //todo:: pass event then use sallaButton from it\n// private addItem() {\n// // this here, is sallaButton\n// this['load']();\n// return salla.cart.api\n// .quickAdd(this['dataset'].id)\n// .finally(() => this['stop']());\n// }\n\n// private defaultProductSlot() {\n// return '<a href={url} class=\"s-offer-modal-product-image-wrap\"><img class=\"s-offer-modal-product-image\" src=\"{image}\" /></a>' +\n// '<div class=\"s-offer-modal-product-info\">' +\n// ' <a href={url} class=\"s-offer-modal-product-name\">{name}</a>' +\n// ' <div class=\"s-offer-modal-product-price\">{price}</div>' +\n// '</div>';\n// }\n\n render() {\n return <salla-modal has-skeleton sub-title={this.offer_message} ref={modal => this.modal = modal}\n isLoading={true} class={`s-offer-modal-type-${this.offer_type ? this.offer_type : ''}`}>\n <div slot='loading'>\n <div class=\"s-offer-modal-skeleton\">\n <div class=\"s-offer-modal-skeleton-header\">\n <salla-skeleton type='circle' height='80px' width='80px'></salla-skeleton>\n <salla-skeleton height='15px' width='50%'></salla-skeleton>\n <salla-skeleton height='10px' width='30%'></salla-skeleton>\n </div>\n <div class=\"s-offer-modal-skeleton-items\">\n {[...Array(3)].map(() =>\n <div class=\"s-offer-modal-skeleton-item\">\n <salla-skeleton height='9rem'></salla-skeleton>\n <div class=\"s-offer-modal-skeleton-item-title\">\n <salla-skeleton height='15px' width='100%'></salla-skeleton>\n </div>\n <div class=\"s-offer-modal-skeleton-item-subtitle\">\n <salla-skeleton height='9px' width='50%'></salla-skeleton>\n <div innerHTML={Cart2}></div>\n </div>\n </div>\n )}\n </div>\n <div class=\"s-offer-modal-skeleton-footer\">\n <salla-skeleton height='15px' width='50%'></salla-skeleton>\n <salla-skeleton height='15px' width='30%'></salla-skeleton>\n </div>\n </div>\n </div>\n {!this.hasError && this.offer !== null\n\n ? [<span slot='icon' class=\"s-offer-modal-header-icon\" innerHTML={SpecialDiscountIcon}></span>,\n this.getOfferContent(),\n <div class=\"s-offer-modal-footer\" slot=\"footer\">\n {this.offer.formatted_date ?\n <p\n class=\"s-offer-modal-expiry\">{salla.lang.get('pages.products.offer_expires_in')} {this.offer.formatted_date}</p>\n : ''}\n <label class=\"s-offer-modal-remember-label\">\n <input type=\"checkbox\" onChange={e => this.rememberMe(e)} class=\"s-offer-modal-remember-input\" />\n   {salla.lang.get('common.elements.remember_my_choice')}\n </label>\n </div>,\n ] :\n <salla-placeholder class=\"s-loyalty-placeholder\" alignment=\"center\">\n {!!this.errorMessage ? <span slot=\"description\">{this.errorMessage}</span> : ''}\n </salla-placeholder>\n }\n </salla-modal>\n }\n}\n"],"version":3}

package/dist/components/salla-products-slider.js CHANGED Viewed

@@ -1,212 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$c } from './salla-add-product-button2.js';
-import { d as defineCustomElement$b } from './salla-button2.js';
-import { d as defineCustomElement$a } from './salla-count-down2.js';
-import { d as defineCustomElement$9 } from './salla-loading2.js';
-import { d as defineCustomElement$8 } from './salla-modal2.js';
-import { d as defineCustomElement$7 } from './salla-product-availability2.js';
-import { d as defineCustomElement$6 } from './salla-product-card2.js';
-import { d as defineCustomElement$5 } from './salla-progress-bar2.js';
-import { d as defineCustomElement$4 } from './salla-quick-buy2.js';
-import { d as defineCustomElement$3 } from './salla-slider2.js';
-import { d as defineCustomElement$2 } from './salla-tel-input2.js';
-const sallaProductsSliderCss = "";
-const SallaProductsSlider$1 = /*@__PURE__*/ proxyCustomElement(class SallaProductsSlider extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.blockTitle = undefined;
-    this.subTitle = undefined;
-    this.sliderId = undefined;
-    this.displayAllUrl = undefined;
-    this.autoplay = undefined;
-    this.source = undefined;
-    this.sourceValue = undefined;
-    this.limit = undefined;
-    this.sliderConfig = undefined;
-    this.productCardComponent = 'custom-salla-product-card';
-    this.includes = undefined;
-    this.productsData = undefined;
-    this.isReady = undefined;
-    this.sourceValueIsValid = undefined;
-    this.hasCustomComponent = undefined;
-    this.apiUrl = '';
-    this.parsedSourceValue = undefined;
-  }
-  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.product.api.fetch({ source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit })
-        .then(response => Helper.injectExtraFieldsToResponse(response))
-        .then(response => {
-        this.productsData = response.data;
-        this.isReady = true;
-        salla.event.emit('salla-products-slider::products.fetched', response.data);
-      });
-    });
-  }
-  componentDidRender() {
-    let processedCount = 0;
-    const intervalId = setInterval(() => {
-      var _a;
-      (_a = this.host.querySelectorAll('[loading="lazy"]')) === null || _a === void 0 ? void 0 : _a.forEach(img => img.removeAttribute('loading'));
-      processedCount++;
-      if (processedCount >= 10) {
-        clearInterval(intervalId);
-      }
-    }, 1000);
-  }
-  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
-    this.getSource() === 'landing-page' && (product.url = '');
-    if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
-      return h("div", { class: "s-products-slider-card" }, 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", innerHTML: customElem.outerHTML });
-    }
-    return h("div", { class: "s-products-slider-card" }, h("salla-product-card", { "show-quantity": this.getSource() == 'landing-page', "hide-add-btn": this.getSource() == 'landing-page', "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() {
-    var _a;
-    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)}`, "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" }, (_a = this.productsData) === null || _a === void 0 ? void 0 : _a.map(product => this.getItemHTML(product))))));
-  }
-  get host() { return this; }
-  static get style() { return sallaProductsSliderCss; }
-}, [0, "salla-products-slider", {
-    "blockTitle": [1, "block-title"],
-    "subTitle": [1, "sub-title"],
-    "sliderId": [1, "slider-id"],
-    "displayAllUrl": [1, "display-all-url"],
-    "autoplay": [1028],
-    "source": [1537],
-    "sourceValue": [1, "source-value"],
-    "limit": [1026],
-    "sliderConfig": [520, "slider-config"],
-    "productCardComponent": [1, "product-card-component"],
-    "includes": [1040],
-    "productsData": [32],
-    "isReady": [32],
-    "sourceValueIsValid": [32],
-    "hasCustomComponent": [32],
-    "apiUrl": [32],
-    "parsedSourceValue": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["salla-products-slider", "salla-add-product-button", "salla-button", "salla-count-down", "salla-loading", "salla-modal", "salla-product-availability", "salla-product-card", "salla-progress-bar", "salla-quick-buy", "salla-slider", "salla-tel-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "salla-products-slider":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SallaProductsSlider$1);
-      }
-      break;
-    case "salla-add-product-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "salla-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "salla-count-down":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "salla-loading":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "salla-modal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "salla-product-availability":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "salla-product-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "salla-progress-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "salla-quick-buy":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "salla-slider":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "salla-tel-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { S as SallaProductsSlider$1, d as defineCustomElement$1 } from './salla-products-slider2.js';
 const SallaProductsSlider = SallaProductsSlider$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/salla-products-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-products-slider.js","mappings":"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","names":["SallaProductsSlider"],"sources":["src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n &-wrapper{\n\n }\n &-slider{\n\n }\n &-card{\n\n }\n}","import { Component, Host, h, Prop, Element, State } from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\n@Component({\n tag: 'salla-products-slider',\n styleUrl: 'salla-products-slider.scss'\n})\n\n//todo:: extends this component from salla-products-list or the opposite\nexport class SallaProductsSlider {\n /*\n Title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() blockTitle: string;\n\n /\n Sub title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() subTitle: string;\n\n /\n Slider Id, if not provided will be generated automatically\n * @type {string}\n * @default ''\n * /\n @Prop() sliderId: string;\n\n /\n Display 'ALL' URL\n * @type {string}\n * @default ''\n * /\n @Prop() displayAllUrl: string;\n\n /\n autoplay option for products slider\n /\n @Prop({ mutable: true }) autoplay: boolean\n\n /\n Source of the products, if api will get the products from the API, if json will get the products from the products prop\n * @type {string}\n * @default ''\n * /\n @Prop({\n reflect: true,\n mutable: true\n }) source: 'categories' \| 'latest' \| 'related' \| 'brands' \| 'json' \| 'tags' \| 'selected' \| 'offers' \| 'landing-page' \| 'wishlist' \| 'top-rated';\n\n /\n The source value, cloud be different values as following:\n * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n * - products payload when `source` = 'json'\n * - product_id when `source` = 'related'\n \n @type {string}\n * /\n @Prop() sourceValue: string;\n\n /\n Limit for number of products in the list.\n /\n @Prop({ mutable: true }) limit: number;\n\n /\n Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object\n * @example\n * let productsSlider = document.querySelector('salla-products-slider');\n * productsSlider.sliderConfig = {\n * slidesPerView: 1,\n * spaceBetween : 30,\n * lazy: true,\n * }\n \n /\n @Prop({ reflect: true }) sliderConfig: any;\n\n /*\n Custom Card Component for the Salla Products Slider.\n \n This component allows you to customize the appearance of individual product cards within a Salla Products Slider.\n \n @example\n * <salla-products-slider product-card-component=\"my-custom-card-style1\" ...\n * <salla-products-slider product-card-component=\"my-custom-card-style2\" ...\n /\n @Prop() productCardComponent: string = 'custom-salla-product-card';\n\n /\n Specifies additional data to be included in the product fetch response.\n * The value can be an array of strings or a JSON string.\n * \n * Example:\n * - As an array: includes=[\"options\"]\n * - As a JSON string: includes='[\"options\"]'\n * \n * The array or JSON string can include:\n * - \"options\": Include product options in the response.\n * - \"images\": Include product images in the response.\n */\n @Prop({mutable: true}) includes: string[];\n\n\n @Element() host: HTMLElement;\n //todo:: support limit, default =10, make sure that maximum is 32,\n\n\n @State() productsData: any;\n @State() isReady: boolean;\n @State() sourceValueIsValid: boolean;\n @State() hasCustomComponent: boolean;\n @State() apiUrl: string = '';\n @State() parsedSourceValue: any;\n\n componentWillLoad() {\n return salla.onReady()\n .then(() => {\n //TODO:: check why `this.includes` not working!!\n this.includes = Helper.parseJson(this.includes\|\|this.host.getAttribute('includes'));\n if (!Array.isArray(this.includes)) {\n this.includes = null;\n }\n Helper.setIncludes(this.includes);\n this.sourceValueIsValid = !!(this.getSourceValue() \|\| this.isSourceWithoutValue());\n if (!this.sourceValueIsValid) {\n salla.logger.warn(`source-value prop is required for source [${this.getSource()\n }]`);\n return;\n }\n this.hasCustomComponent = !!customElements.get(this.productCardComponent);\n\n if (this.source === 'json') {\n this.productsData = this.getSourceValue();\n this.isReady = true\n return;\n }\n\n if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled'))) {\n this.isReady = false\n return;\n }\n\n return salla.product.api.fetch({source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit})\n .then(response => Helper.injectExtraFieldsToResponse(response))\n .then(response => {\n this.productsData = response.data;\n this.isReady = true;\n salla.event.emit('salla-products-slider::products.fetched', response.data);\n });\n });\n }\n componentDidRender() {\n let processedCount = 0;\n const intervalId = setInterval(() => {\n this.host.querySelectorAll('[loading=\"lazy\"]')?.forEach(img => img.removeAttribute('loading'));\n processedCount++;\n if (processedCount >= 10) {\n clearInterval(intervalId);\n }\n }, 1000);\n }\n\n private isSourceWithoutValue() {\n return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());\n }\n\n private getItemHTML(product) {\n\n //as a request they don't want to let the user to open the product details\n //todo:: find a better way to handle this request\n this.getSource() === 'landing-page' && (product.url = '');\n if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {\n return <div class=\"s-products-slider-card\">\n <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()} />\n </div>\n }\n\n if (this.hasCustomComponent) {\n const customElem = document.createElement(this.productCardComponent);\n customElem.setAttribute('product', JSON.stringify(product));\n customElem.setAttribute('source', this.getSource());\n customElem.setAttribute('source-value', this.getSourceValue());\n\n return <div class=\"s-products-slider-card\" innerHTML={customElem.outerHTML} />;\n }\n\n return <div class=\"s-products-slider-card\">\n <salla-product-card\n show-quantity={this.getSource() == 'landing-page'}\n hide-add-btn={this.getSource() == 'landing-page'}\n shadow-on-hover={true}\n product={product} />\n </div>;\n }\n\n private canRender() {\n return this.sourceValueIsValid && this.isReady;\n }\n\n private getSource() {\n return Helper.getProductsSource(this.source);\n }\n\n private getSourceValue() {\n return Helper.getProductsSourceValue(this.source, this.sourceValue);\n }\n\n render() {\n if (!this.canRender()) {\n return;\n }\n return (\n <Host class=\"s-products-slider-wrapper\">\n <salla-slider\n class=\"s-products-slider-slider\"\n id={this.sliderId \|\| `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n auto-play={this.autoplay}\n type=\"carousel\"\n block-title={this.blockTitle}\n block-subTitle={this.subTitle}\n display-all-url={this.displayAllUrl}\n sliderConfig={this.sliderConfig ? this.sliderConfig : null}\n >\n <div slot=\"items\">\n {this.productsData?.map(product => this.getItemHTML(product))}\n </div>\n </salla-slider>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"salla-products-slider.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}