@salla.sa/twilight-components 2.14.139 → 2.14.141

package/dist/esm/{salla-add-product-button_48.entry.js → salla-add-product-button_49.entry.js}

@@ -22717,7 +22717,7 @@ const sallaOfferModalCss = "";
 const SallaOfferModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    var _a, _b;
+    var _a;
     this.offer = null;
     this.offer_name = undefined;
     this.offer_message = undefined;
@@ -22733,7 +22733,7 @@ const SallaOfferModal = class {
       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)) {
@@ -22789,45 +22789,65 @@ const SallaOfferModal = class {
     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')))))));
-    }
-    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
+      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 ((_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 ?
@@ -24015,6 +24035,112 @@ const SallaProductsList = class {
 };
 SallaProductsList.style = sallaProductsListCss;
 
+const sallaProductsSliderCss = "";
+
+const SallaProductsSlider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+SallaProductsSlider.style = sallaProductsSliderCss;
+
 const sallaProgressBarCss = "";
 
 const SallaProgressBar = class {
@@ -27645,6 +27771,10 @@ const SallaReviewsSummary = class {
       .then(() => this.loadSummary());
   }
   async loadSummary() {
+    if (!this.itemId) {
+      console.error('Error loading reviews summary: itemId is not defined');
+      return this.canRender = false;
+    }
     try {
       let resp = await salla.api.request(`rating/summary/${this.itemId}`);
       if (Array.isArray(resp.data.reviews) && !resp.data.reviews.length) {
@@ -30928,6 +31058,6 @@ const SallaUserSettings = class {
 };
 SallaUserSettings.style = sallaUserSettingsCss;
 
-export { SallaAddProductButton as salla_add_product_button, SallaBottomAlert as salla_bottom_alert, SallaBreadcrumb as salla_breadcrumb, SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCommentForm as salla_comment_form, SallaCommentItem as salla_comment_item, SallaComments as salla_comments, SallaCountDown as salla_count_down, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMaintenanceAlert as salla_maintenance_alert, SallaMap as salla_map, SallaMenu as salla_menu, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductCard as salla_product_card, SallaProductSizeGuide as salla_product_size_guide, SallaProductsList as salla_products_list, SallaProgressBar as salla_progress_bar, SallaQuantityInput as salla_quantity_input, SallaQuickBuy as salla_quick_buy, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaReviewsSummary as salla_reviews_summary, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSlider as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserProfile as salla_user_profile, SallaUserSettings as salla_user_settings };
+export { SallaAddProductButton as salla_add_product_button, SallaBottomAlert as salla_bottom_alert, SallaBreadcrumb as salla_breadcrumb, SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCommentForm as salla_comment_form, SallaCommentItem as salla_comment_item, SallaComments as salla_comments, SallaCountDown as salla_count_down, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMaintenanceAlert as salla_maintenance_alert, SallaMap as salla_map, SallaMenu as salla_menu, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductCard as salla_product_card, SallaProductSizeGuide as salla_product_size_guide, SallaProductsList as salla_products_list, SallaProductsSlider as salla_products_slider, SallaProgressBar as salla_progress_bar, SallaQuantityInput as salla_quantity_input, SallaQuickBuy as salla_quick_buy, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaReviewsSummary as salla_reviews_summary, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSlider as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserProfile as salla_user_profile, SallaUserSettings as salla_user_settings };
 
-//# sourceMappingURL=salla-add-product-button_48.entry.js.map
+//# sourceMappingURL=salla-add-product-button_49.entry.js.map