@salla.sa/twilight-components 2.14.346 → 2.14.349

package/dist/components/salla-count-down2.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './salla-button2.js';
 
 const sallaCountDownCss = "";
 
@@ -135,6 +136,16 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
             this.normalizedPreOrder?.availability_date &&
             this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
     }
+    renderPrefixText() {
+        if (!this.prefixText)
+            return null;
+        return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
+    }
+    renderButton() {
+        if (!this.withButton || !this.buttonText)
+            return null;
+        return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
+    }
     renderContent() {
         if (!this.date)
             return null;
@@ -147,12 +158,18 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '96bba6312e710673e1f249cabecfc8756fac5c0e', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''}` }, this.renderContent(), this.offerEnded && this.renderOfferEnded()));
+        return (h(Host, { key: '11e7cf7cf77bbde82d990107b7ccda8f1fc9ad6f', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get style() { return sallaCountDownCss; }
 }, [0, "salla-count-down", {
         "date": [1],
         "preOrder": [1, "pre-order"],
+        "horizontal": [4],
+        "withButton": [4, "with-button"],
+        "prefixText": [1, "prefix-text"],
+        "buttonHref": [1, "button-href"],
+        "buttonText": [1, "button-text"],
+        "buttonIcon": [1, "button-icon"],
         "boxed": [4],
         "size": [1],
         "color": [1],
@@ -178,13 +195,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-count-down"];
+    const components = ["salla-count-down", "salla-button"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-count-down":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaCountDown);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/components/salla-multiple-bundle-product-options-modal2.js

@@ -476,22 +476,21 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
         const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
         const resetToken = this.optionsResetTokens[cacheKey] || 0;
         const isDisabled = this.isLoading || optionsWithSelectedState.some(opt => opt.details.some(d => d.is_selected && d.is_out === true));
-        return (h(Host, { key: '28786c060499c9bfbacf025b75f21d0e8a2d6ab1' }, h("salla-modal", { key: '6322c0542ca2769f50ed6fc616c6d5c72d456c9c', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '812707c4108b5bdefa97e1ff7537998083e2403b', slot: "loading" }, h("salla-skeleton", { key: 'e82b875495873b66414ee4a75d845823373b4914', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'd3849a91153ede94ea06553cb40af29e06c916ae', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
+        return (h(Host, { key: '28786c060499c9bfbacf025b75f21d0e8a2d6ab1' }, h("salla-modal", { key: '6322c0542ca2769f50ed6fc616c6d5c72d456c9c', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '812707c4108b5bdefa97e1ff7537998083e2403b', slot: "loading" }, h("salla-skeleton", { key: 'e82b875495873b66414ee4a75d845823373b4914', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'f1f3545637b182257f9107972a819ae9819de137', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
                 centeredSlides: true,
                 centeredSlidesBounds: true,
                 slidesPerView: Math.min(5, Math.max(1, this.product?.images.length)),
                 watchOverflow: true,
-                watchSlidesVisibility: true,
                 watchSlidesProgress: true,
                 direction: 'vertical',
                 spaceBetween: 10,
-            } }, h("div", { key: 'd585f7a29cb9265c39c471876d3a0cb7d2460359', slot: "items" }, this.product?.images &&
+            } }, h("div", { key: '97b50195903a01376e057bc99ddb353fd3dfdb2b', slot: "items" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, class: "swiper-slide" }, h("img", { src: image.url, alt: image.alt || `${this.product?.name} - Image ${index + 1}`, loading: "lazy", onError: e => {
                     e.target.style.display = 'none';
-                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '1a6edb417a6715617303634b7d756eef0075a01a', slot: "thumbs" }, this.product?.images &&
+                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: 'ff943c9c8f175ff1c0374a13153b33889c468dda', slot: "thumbs" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, "data-caption": `${this.product?.name} - Image ${index + 1}` }, h("img", { src: image.url, loading: "eager", class: "s-multiple-bundle-product-options-modal-slider-thumb", title: `${this.product?.name} - ${index + 1}`, alt: image.alt || `${this.product?.name} - ${index + 1}`, onError: e => {
                     e.target.style.display = 'none';
-                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '22528e7438a30feffe5987ed86974a4eecea76a1', slot: "footer" }, h("div", { key: '7a891b1cd51d2f15e08523c2a4096ea4c50eb51b', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '4ed19c8cfdd3f37166a61fdbd452a8f205763469', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
+                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '7555836d26018f6405bc54a1cd735b4030d4bdf1', slot: "footer" }, h("div", { key: 'a7ee5f19a4c11a1c61e4dc026fa8673e0ab74c3f', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '1da19964053766f3a1339ea0e77ab7aaa4d8a003', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
             ? salla.lang.get('common.elements.saving')
             : salla.lang.get('common.elements.save')))))));
     }

package/dist/components/salla-multiple-bundle-product-slider2.js

@@ -104,7 +104,7 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
                 : KeyBoardArrowRightIcon;
             return (h("div", { class: `s-multiple-bundle-product-slide-one-third ${product.quantity == 0
                     ? 's-multiple-bundle-product-slide-one-third-disabled'
-                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.sale_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
+                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
         })))));
     }
     get host() { return this; }

package/dist/components/salla-order-details-multiple-bundle-product2.js

@@ -48,16 +48,6 @@ const SallaproductDetailsMultipleBundleProduct = /*@__PURE__*/ proxyCustomElemen
         }
         return this.productDetails?.options?.length > 0;
     }
-    renderProductPrice() {
-        if (!this.productDetails) {
-            return null;
-        }
-        const { is_on_sale, sale_price, regular_price, price } = this.productDetails;
-        if (is_on_sale && sale_price) {
-            return (h("div", null, h("span", { class: "s-order-details-product-price s-order-details-product-price-sale" }, h("span", { innerHTML: salla.money(sale_price) })), regular_price && (h("span", { class: "s-order-details-product-regular-price" }, h("span", { innerHTML: salla.money(regular_price) })))));
-        }
-        return (h("span", { class: "s-order-details-product-price" }, h("span", { innerHTML: salla.money(price) })));
-    }
     renderOptions() {
         if (!this.productDetails?.options?.length) {
             return null;

package/dist/components/salla-products-slider2.js

@@ -78,6 +78,9 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
             }
         }, 1000);
     }
+    async componentDidLoad() {
+        await Salla.hooks.registerComponent('salla-products-slider', this);
+    }
     isSourceWithoutValue() {
         return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());
     }