@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/components/salla-product-card2.js

@@ -54,16 +54,10 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
             this.fitImageHeight = salla.config.get('store.settings.product.fit_type');
             salla.wishlist.event.onAdded((_res, id) => this.toggleFavoriteIcon(true, id));
             salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));
+            // e.g. a guest signs into an account that already saved this product
+            salla.event.on('wishlist::storage.synced', () => this.productData && this.toggleFavoriteIcon(this.isInWishlist()));
             this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
         });
-        // Language
-        salla.lang.onLoaded(() => {
-            this.remained = salla.lang.get('pages.products.remained');
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.startingPrice = salla.lang.get('pages.products.starting_price');
-            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
-            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
-        });
         // Parse product data
         if (!this.product) {
             return;
@@ -75,6 +69,19 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
             salla.log('Bad json passed via product prop');
         }
     }
+    connectedCallback() {
+        // Language
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.remained = salla.lang.get('pages.products.remained');
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.startingPrice = salla.lang.get('pages.products.starting_price');
+            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
+            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Private Methods
     initCircleBar() {
         let qty = this.productData.quantity, total = this.productData.quantity > 100 ? this.productData.quantity * 2 : 100, roundPercent = (qty / total) * 100, bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'), strokeDashOffsetValue = 100 - roundPercent;

package/dist/components/salla-product-options2.js

@@ -282,12 +282,6 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
             const completed = option.donation.target_amount <= option.donation.collected_amount;
             return h("div", { class: { "s-product-options-donation-message": true, "s-product-options-donation-completed": completed, "s-product-options-donation-expired": !completed } }, h("p", null, option.donation.target_message), h("span", { innerHTML: completed ? salla.money(option.donation.target_amount) : '' }));
         };
-        salla.lang.onLoaded(() => {
-            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
-            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
-        });
         if (this.options) {
             try {
                 this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));
@@ -308,6 +302,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
             });
         }
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        });
+    }
     /**
      * Sets the options data for the product
      * @param optionsData - Array of product options
@@ -688,6 +690,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         return needsCartId ? salla.api.cart.getCurrentCartId(false, "salla-product-options") : null;
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.pasteHandler) {
             document.removeEventListener("paste", this.pasteHandler);
         }

package/dist/components/salla-product-size-guide.js

@@ -26,12 +26,17 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
         this.__registerHost();
         this.hasError = false;
         salla.event.on('size-guide::open', (product_id) => this.open(product_id));
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             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');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * Show the size-guide modal window
      */
@@ -60,11 +65,11 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
         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: 'de368aff05a19d87eb4e99f4e1d7eee36155f435', 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: 'c4ab31b3e6ef2751761ca2db27554f7f5bf057fc', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '17cfceb5ccb0546928f87f956267e9d0c11017ac', slot: "loading" }, h("div", { key: '4f4e20a62396d7825315203ffd22a72030e821b1', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'd9132b26634ae1997dad9f1229b248c2cd76fff0', height: '15px', width: '25%' }), h("div", { key: '1b6a236851eef6e7caf7b7a0e84e591824b4e4ef', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'bae06741881b57b4eb853f1256a22f9393d9cea4', height: '40px' }), h("salla-skeleton", { key: 'fdeb75a853f89df154b69dbd48fc8e233561af59', height: '40px' }), h("salla-skeleton", { key: 'd0be70bc141f04fd24adc86c56eec3a5e896f2d4', height: '40px' }), h("salla-skeleton", { key: 'c5146addbf2d5b9bda05170a9743cad0e08d8674', height: '40px' })), h("div", { key: '04dbbffe2de708c984c5d0966aa2b86c0051bd14', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '320fb33a2e5d9ee1f4b87c18b3f3dd13de180d4f', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f06aeac8e2f8ea86ec9b1c5c6f2b31172f23209f', height: '10px', width: '75%' }), h("salla-skeleton", { key: '1accf852a34edcac77a77151ebf67ba8e05cc729', height: '10px', width: '50%' }), h("salla-skeleton", { key: '42d4c3364779a6ee130339e37affe2e0c590e6a7', height: '10px', width: '75%' }), h("salla-skeleton", { key: '13064a231460414b4a0abd19dda41b01ac1ee04f', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'd5a50f96ca3bab125503f836cd883cfb98ca135d', height: '10px', width: '25%' }), h("salla-skeleton", { key: '11cd2ed36d9754c32173f14cd7d5ea99fc2b5577', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'a5b3a192d0e38dc13a025b8b8e0aba767f35611b', height: '10px', width: '45%' }), h("salla-skeleton", { key: 'dddcb26038e180fb5b686b29d286316d4314909f', height: '10px', width: '30%' })))), h("slot", { key: '43a08b9b6e64955b726b832f0849617ac31d4c25', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: '587dbc28fa828df2a47a4db1c124df032fe719fa', 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: '822224aa89fb065c7262abf2f24914ed1fa3d8bb', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '84e14a400f9417aa9be851a07f0203348a560aec', slot: "loading" }, h("div", { key: '5cbdbcf560f08279543c4d25fd21416ce2da1314', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'e3139f2898256adc2c20fbb86e96a9f5d008a677', height: '15px', width: '25%' }), h("div", { key: '961f482bf358c5a4ca0d980561bafdcd7489fa68', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '1754361211a771952be69eeda9a4c9788aaff0e6', height: '40px' }), h("salla-skeleton", { key: '2ea3578f8751a2526947d5c067392ef95e3bcf44', height: '40px' }), h("salla-skeleton", { key: '32bba195c5f6a60ce9837b4d4cbfa302d6ddfb07', height: '40px' }), h("salla-skeleton", { key: '9888b01cd47c5acdc0a159ad49db228efd630d75', height: '40px' })), h("div", { key: 'd86e706b2393b17301f9f28b4b303f00bf743363', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '02e0330958fd73288d5c654fce7169470cdf47cd', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'cccb8bc372c6ccfdf707621190bba4bc38aecb99', height: '10px', width: '75%' }), h("salla-skeleton", { key: '95f8e83b3b1a54a52da1ff2e61a866239575cf7b', height: '10px', width: '50%' }), h("salla-skeleton", { key: '4880b1d82cea617cae837ad2d6dd4d627fe8d9e3', height: '10px', width: '75%' }), h("salla-skeleton", { key: '38980cc41e7388b41e35015ceed72d025bd82980', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'bb1ad6a995e9e27b851007cae2c1f7204f3c2d91', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'fc5cd1e7adafca96e00b9284123bb3eb9f892c9c', height: '10px', width: '60%' }), h("salla-skeleton", { key: '89bbd77ec6da0c8e03dd2fb9f60c929f49415c83', height: '10px', width: '45%' }), h("salla-skeleton", { key: '0666ce266b9411913ae4db64c61d3cfa44cf4245', height: '10px', width: '30%' })))), h("slot", { key: '31a338bdc12e2a4ea1f80ea4bd700e293020b840', 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: '5ae0956ca1f9313b5ef3d01dbdcab32f2e975e05', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: '887b97cd58b442db20dad02db8ace42847bcef75', name: "footer" })));
     }
     get host() { return this; }
     static get style() { return sallaProductSizeGuideCss; }

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

@@ -110,14 +110,14 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             this.includes = null;
         }
         Helper.setIncludes(this.includes);
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeholderText = salla.lang.get('pages.categories.no_products');
             this.endOfText = salla.lang.get('common.elements.end_of_content');
             this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
             this.currentPage = salla.config.get('page');
         });
-    }
-    connectedCallback() {
         //Override browser scroll restoration default behaviour
         if ('scrollRestoration' in history)
             history.scrollRestoration = 'manual';
@@ -128,6 +128,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         salla.event.on('wishlist::storage.synced', this.onWishlistStorageSynced);
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         window.removeEventListener('scroll', this.boundHandleScroll);
         salla.event.off('wishlist::removed', this.onWishlistItemRemoved);

package/dist/components/salla-progress-bar2.js

@@ -9,6 +9,9 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
     constructor() {
         super();
         this.__registerHost();
+        // set when the constructor builds the donation-target labels, so the subscriber can rebuild them
+        this.hasDonationTarget = false;
+        this.donationEndDate = null;
         /**
          * Set height for the wrapper.
          */
@@ -20,6 +23,8 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
                     donationJson.target_end_date = donationJson.target_end_date == '0000-00-00' ? null : donationJson.target_end_date;
                     this.value = donationJson.collected_amount;
                     this.target = donationJson.target_amount;
+                    this.hasDonationTarget = true;
+                    this.donationEndDate = donationJson.target_end_date;
                     this.header = salla.lang.get('pages.products.target');
                     this.message = donationJson.target_end_date ? salla.lang.get('pages.products.donation_target_date') + ' ' + donationJson.target_end_date : '';
                 }
@@ -34,10 +39,6 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
         catch (e) {
             salla.log('Wrong donation json');
         }
-        salla.lang.onLoaded(() => {
-            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
-            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
-        });
         salla.onReady(() => {
             this.color = this.color || salla.config.get('theme.color.primary', "#ffd5c4");
             if (!this.unit) {
@@ -45,6 +46,21 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
             }
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            if (this.hasDonationTarget) {
+                // rebuilt each time: once translated, the text no longer holds the keys replaced below
+                this.header = salla.lang.get('pages.products.target');
+                this.message = this.donationEndDate ? salla.lang.get('pages.products.donation_target_date') + ' ' + this.donationEndDate : '';
+                return;
+            }
+            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
+            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getPercentage() {
         return (this.value / this.target) * 100;
     }

package/dist/components/salla-quick-buy2.js

@@ -1888,10 +1888,15 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
             });
             return true;
         };
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.quickBuy = salla.lang.get('pages.products.buy_now');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     quickBuyHandler() {
         if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });

package/dist/components/salla-quick-order.js

@@ -75,7 +75,9 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuickOrder
         salla.onReady(() => {
             this.productId = this.productId || salla.config.get('page.id');
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeHolderEmail = salla.lang.get('common.elements.email');
             this.emailOptional = salla.lang.get('common.elements.optional');
             this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
@@ -83,6 +85,9 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuickOrder
             this.userNameLabel = salla.lang.get('pages.products.your_name');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getBtnColor() {
         return this.quickOrderStyle === 'default' ? 'light' : 'primary';
     }

package/dist/components/salla-rating-modal2.js

@@ -9,6 +9,7 @@ import { M as MailIcon } from './mail.js';
 import { d as defineCustomElement$4, S as ShippingFast, a as Star } from './salla-rating-modal-v22.js';
 import { W as WhatsappIcon } from './whatsapp2.js';
 import { H as Helper } from './Helper.js';
+import { s as setTranslationDefault } from './translate.js';
 import { d as defineCustomElement$a } from './salla-attachment-view2.js';
 import { d as defineCustomElement$9 } from './salla-button2.js';
 import { d as defineCustomElement$8 } from './salla-file-upload2.js';
@@ -98,11 +99,13 @@ const SallaRatingModal = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal
         salla.onReady(() => {
             this.orderId = salla.config.get('page.id');
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.contactUsLabel = salla.lang.get('blocks.footer.social');
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -152,6 +155,9 @@ const SallaRatingModal = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal
             setTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getV2Ref() {
         return this.v2Ref ?? this.host.querySelector('salla-rating-modal-v2');
     }

package/dist/components/salla-rating-stars2.js

@@ -16,24 +16,24 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars
         this.reviewLabel = '';
         this.selectedStar = 0;
         /**
-       * Sets input name.
-       */
+         * The name attribute for the rating input (used in forms). Default is 'rating'.
+         */
         this.name = 'rating';
         /**
-        * Sets the height and width of the component. Defaults to medium.
-        */
+         * The size of the star icons. Can be 'large', 'medium', 'small', or 'mini'. Default is 'medium'.
+         */
         this.size = 'medium';
         /**
-       * Number of reviews to display.
-       */
+         * The number of reviews to display next to the stars. Default is 0 (hidden).
+         */
         this.reviews = 0;
         /**
-        * Render the description label before the stars instead of after.
-        */
+         * Render the description label before the stars instead of after.
+         */
         this.labelBeforeStars = false;
         /**
-        * Allows the rating to be editable.
-        */
+         * Whether the rating is interactive/editable by the user. Default is false (display-only).
+         */
         this.editable = false;
         this.tag = true;
     }

package/dist/components/salla-review-card2.js

@@ -172,7 +172,7 @@ const SallaReviewCard = /*@__PURE__*/ proxyCustomElement(class SallaReviewCard e
         return (h("a", { href: this.review?.product?.url, class: "s-review-card-product-container" }, h("img", { alt: product.image?.alt || "Product", src: product.image?.url, class: "s-review-card-product-image", width: 60, height: 60, loading: "lazy", decoding: "async", draggable: false }), h("div", { class: "s-review-card-product-details" }, h("p", { class: "s-review-card-product-details-name" }, product.name), this.showPurchaseCount ? h("p", { class: "s-review-card-product-details-purchase-count" }, h("span", { innerHTML: IconFire2 }), this.purchasedCount) : null)));
     }
     render() {
-        return h("div", { key: '44589734c0a8ab8211a50e89e306de7dd53ad679', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '14e57255f40beab2e4b92724f26f171cdaaf69f4', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '8f27f7f13b5611a71164dba288f53e53e10e67f0', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
+        return h("div", { key: '5d214b55ba611ae39a8a3352e67c1c0c74749cae', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '8f761e54645173d887eaecc50bbc6e1f9664a861', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: 'a75cbc58c4631f96aa112f9cd522a7ad43629b27', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
     }
     get el() { return this; }
     static get style() { return sallaReviewCardCss; }

package/dist/components/salla-reviews.js

@@ -65,11 +65,16 @@ const SallaReviews$1 = /*@__PURE__*/ proxyCustomElement(class SallaReviews exten
             this.displayAllURL = salla.url.get('testimonials');
             this.isRTL = salla.config.get('theme.is_rtl', true);
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.testimonialText = salla.lang.get('blocks.home.testimonials');
             this.displayAllLinkText = salla.lang.get('blocks.home.display_all');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     fetchReviews() {
         if (this.source === 'json') {
             return Promise.resolve(JSON.parse(this.sourceValue));

package/dist/components/salla-scopes.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { S as Search } from './search.js';
 import { d as defineCustomElement$7 } from './salla-button2.js';
 import { d as defineCustomElement$6 } from './salla-list-tile2.js';
@@ -65,10 +65,17 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class SallaScopees extends
         salla.event.on('scopes::open', ({ mode = null, product_id = null } = {}) => {
             this.open(mode, product_id);
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.translationLoaded = true;
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * Whether to hand scope selection to the native app instead of rendering the web modal.
      * Delegates only inside the native SPA webview (Salla.mobile.isSpaWebview() — bridge live AND

package/dist/components/salla-skeleton2.js

@@ -10,16 +10,16 @@ const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class SallaSkeleton exten
         super();
         this.__registerHost();
         /**
-       *  Set the shape type of the skeleton is it circle or normal
-       */
+         * The shape type of the skeleton. 'circle' for circular skeletons (e.g., avatars), 'normal' for rectangular shapes. Default is 'normal'.
+         */
         this.type = 'normal';
         /**
-       *  Set the skeleton width
-       */
+         * The width of the skeleton. Can be any CSS width value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+         */
         this.width = '100%';
         /**
-       *  Set the skeleton height
-       */
+         * The height of the skeleton. Can be any CSS height value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+         */
         this.height = '100%';
     }
     render() {
@@ -27,7 +27,7 @@ const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class SallaSkeleton exten
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (h(Host, { key: 'b6ea2f9ba293c4c5922a5abf48f05845d02a8590', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '8fa3bed8b7aa80e01742d6c2496bc0578aabe7f1', class: classes }, "\u00A0")));
+        return (h(Host, { key: '7a1ce16742202fd5e2e37eded505d94e03079137', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '8fb06aebef2322b52ad83f7524f42d8908c4b5b0', class: classes }, "\u00A0")));
     }
     static get style() { return sallaSkeletonCss; }
 }, [0, "salla-skeleton", {

package/dist/components/salla-slider2.js

@@ -10129,14 +10129,16 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
     isStaticWhenSingle() {
         return this.staticWhenSingle && this.host.querySelector('[slot="items"]')?.children?.length === 1;
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.displayAllTitle = salla.lang.get('blocks.home.display_all');
+        });
+    }
     async componentWillLoad() {
         if (this.isStaticWhenSingle()) {
             this.host.classList.add('s-slider-single-mode');
             return;
         }
-        salla.lang.onLoaded(() => {
-            this.displayAllTitle = salla.lang.get('blocks.home.display_all');
-        });
         this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
         if (this.listenToThumbnailsOption) {
             salla.event.on('product-options::change', data => {
@@ -10421,6 +10423,7 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
         this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.isStaticWhenSingle()) {
             return;
         }

package/dist/components/salla-social.js

@@ -42,10 +42,15 @@ const SallaSocial$1 = /*@__PURE__*/ proxyCustomElement(class SallaSocial extends
         this.iconsList = { instagram, twitter, facebook, youtube, snapchat, tiktok };
         this.socialSlot = this.host.querySelector('[slot="social-item"]')?.innerHTML ||
             `<a href={link} rel="noopener" target="_blank" title={type} aria-label={type}><span class="s-social-icon">{icon}</span></a>`;
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.links = salla.config.get('store.social');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getLinksArray() {
         return this.links ? Object.entries(this.links)
             .filter(([key, value]) => !!value && key !== 'whatsapp')
@@ -56,7 +61,7 @@ const SallaSocial$1 = /*@__PURE__*/ proxyCustomElement(class SallaSocial extends
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: '4b8d92800f475d314d5637e290c1fa95c78335f5' }, h("ul", { key: 'b6134f221891e28484155c55d3bcf0182bcb967a', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (h(Host, { key: 'ce42d3f37cc3c9b9753f9431b43267e4a49153a3' }, h("ul", { key: '515e3effaf234de3b639bc5276559f05de06e755', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));

package/dist/components/salla-tab-header2.js

@@ -16,8 +16,8 @@ const SallaTabHeader = /*@__PURE__*/ proxyCustomElement(class SallaTabHeader ext
         this.tabSelected = createEvent(this, "tabSelected", 7);
         this.id = generateRandomId();
         /**
-       * The class applied to the currently active(selected) tab
-       */
+         * The class applied to the currently active(selected) tab
+         */
         this.activeClass = undefined;
         /**
          * Set the height of the tab bar
@@ -58,7 +58,7 @@ const SallaTabHeader = /*@__PURE__*/ proxyCustomElement(class SallaTabHeader ext
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: '04bb51760a3e43aed1645cf724b90e21ee2631bf', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: 'c9d5fc5dbc0a45712c9aa5e03becc613590011ea' })),
+            h("div", { key: '1169c14eb00246f521ccb3929f7167d605d18a7e', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '33d608f80ee3ff772bae744c20caa70755334463' })),
         ];
     }
     static get style() { return sallaTabHeaderCss; }

package/dist/components/salla-tel-input2.js

@@ -6,23 +6,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 const sallaTelInputCss = "/*!twlt*/.iti{width:100%;position:relative;display:inline-block}.iti *{box-sizing:border-box;-moz-box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti input,.iti input[type=text],.iti input[type=tel]{position:relative;z-index:0;direction:ltr !important;margin-top:0 !important;margin-bottom:0 !important;padding-left:95px !important;padding-right:15px !important;margin-left:0 !important}.iti__country-container{width:100%;position:absolute;top:0;bottom:0;left:0;padding:1px}.iti__selected-country{width:80px;z-index:1;position:relative;display:flex;align-items:center;height:100%;float:left;padding:0 15px;box-shadow:none !important;outline:none !important;background:transparent;border:0}.ltr .iti__selected-country,[dir=ltr] .iti__selected-country{justify-content:flex-end}.iti__selected-country:before{content:\"\";display:block;width:1px;height:70%;background:#eee;position:absolute;top:15%;right:0}.iti__selected-country .iti__flag{display:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%}.iti__arrow{width:15px;height:15px;line-height:15px;position:absolute;left:10px;top:50%;transform:translateY(-50%)}.iti__arrow:after{content:url(\"data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");font-size:16px;color:#999;opacity:0.65}.iti__arrow--up:after{transform:rotate(180deg)}.iti__country-list{width:100%;max-height:160px;position:absolute;top:100%;left:0;z-index:2;list-style:none;margin:0;padding:0;margin:5px 0 0 0;border-radius:5px;box-shadow:0px 2px 4px 2px rgba(0, 0, 0, 0.05);border:1px solid #f5f7f9;background-color:white;white-space:nowrap;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.iti__country-list::-webkit-scrollbar{width:4px}.dark .iti__country-list{background-color:rgb(82, 82, 91);border-color:rgb(82, 82, 91)}.iti__country-list li{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding:8px 10px;transition:background-color 0.3s}.iti__country-list li span{font-size:12px}.iti__country-list li:hover,.iti__country-list li.highlighted{background-color:rgba(0, 0, 0, 0.05)}.iti__country-list--dropup{bottom:100%;top:unset;margin:0 0 5px 0}@media (max-width: 500px){.iti__country-list{white-space:normal}}.iti__country .iti__flag{display:inline-block;width:20px;margin:0 0 0 5px;flex-shrink:0}.iti__divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #eee}.iti__country{padding:5px 10px;outline:none}.iti__dial-code{font-family:Arial;color:#999;unicode-bidi:plaintext;letter-spacing:1px}.iti__country.iti__highlight{background-color:rgba(0, 0, 0, 0.05)}.iti__country .iti__flag,.iti__country-name,.iti__dial-code{vertical-align:middle}.iti__country-name{flex:auto;margin:0;padding:0 10px;white-space:normal;line-height:1.3}.iti--allow-dropdown .iti__country-container{left:0}.iti--allow-dropdown .iti__country-container:hover{cursor:pointer}.iti--allow-dropdown input[disabled]+.iti__country-container:hover,.iti--allow-dropdown input[readonly]+.iti__country-container:hover{cursor:default}.iti--allow-dropdown input[disabled]+.iti__country-container:hover .iti__selected-country,.iti--allow-dropdown input[readonly]+.iti__country-container:hover .iti__selected-country{background-color:transparent}.iti__selected-dial-code{unicode-bidi:plaintext;direction:ltr;letter-spacing:1px;font-family:\"Arial\", serif;font-size:13px}.iti--container{top:-18px !important;left:0 !important;padding:1px}.iti--container:hover{cursor:pointer}.iti--container.iti--fullscreen-popup{inset:0;margin:20px;width:calc(100% - 40px);position:fixed;z-index:9999}.iti--container.iti--fullscreen-popup .iti__country-list{max-height:100%;width:100%;inset:0}.iti--container.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url(\"https://cdn.salla.network/images/flags.png\");background-repeat:no-repeat;background-color:#f5f7f9;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-image:url(\"https://cdn.salla.network/images/flags@2x.png\")}}.iti__flag.iti__np{background-color:transparent}.hidden{display:none}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-has-error{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}.s-has-error:focus{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.has-error .s-form-control,.has-error .s-tel-input-control,.has-error .s-datetime-picker-input{border-color:#ff443a;color:#ff443a}.s-has-error{--tw-border-opacity:1 !important;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;--tw-text-opacity:1 !important;color:rgb(239 68 68 / var(--tw-text-opacity, 1)) !important}.s-ltr{direction:ltr}.s-gifting-tel-input .s-tel-input-control{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.s-gifting-tel-input .s-tel-input-error-msg{display:none}.s-gifting-step-two .s-form-group.s-form-has-error .s-tel-input-control{--tw-border-opacity:1 !important;border-color:rgb(255 68 58 / var(--tw-border-opacity, 1)) !important}.s-tel-input-control{height:2.5rem;width:100%;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;font-size:0.875rem;line-height:1.25rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-tel-input-control:focus{border-color:var(--color-primary)}.s-tel-input-control:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.s-tel-input-error-msg{display:block;font-size:0.75rem;line-height:1rem;--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}.s-tel-input-error-msg:focus{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.s-tel-input-error-msg{--tw-border-opacity:1 !important;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;--tw-text-opacity:1 !important;color:rgb(239 68 68 / var(--tw-text-opacity, 1)) !important}";
 
 const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput extends HTMLElement {
-    /**
-     * Lazy load intl-tel-input library
-     * This reduces initial bundle size by ~80-90KB
-     */
-    async loadTelInput() {
-        if (this.TelInput)
-            return;
-        try {
-            const telInputModule = await import('./intlTelInput.js').then(function (n) { return n.i; });
-            this.TelInput = telInputModule.default;
-        }
-        catch (error) {
-            console.error('Failed to load Tel Input:', error);
-            salla.notify?.error?.('Failed to load phone input. Please refresh the page.');
-            throw error;
-        }
-    }
     constructor() {
         super();
         this.__registerHost();
@@ -46,7 +29,26 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });
         this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
         this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
-        salla.lang.onLoaded(() => {
+    }
+    /**
+     * Lazy load intl-tel-input library
+     * This reduces initial bundle size by ~80-90KB
+     */
+    async loadTelInput() {
+        if (this.TelInput)
+            return;
+        try {
+            const telInputModule = await import('./intlTelInput.js').then(function (n) { return n.i; });
+            this.TelInput = telInputModule.default;
+        }
+        catch (error) {
+            console.error('Failed to load Tel Input:', error);
+            salla.notify?.error?.('Failed to load phone input. Please refresh the page.');
+            throw error;
+        }
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.mobileLabel = salla.lang.get('common.elements.mobile');
             this.countryCodeLabel = salla.lang.get('common.elements.country_code');
             this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
@@ -57,6 +59,9 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
             this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Init is async and v26 loads the validation utils lazily; both must settle.
     async whenReady() {
         await this.initPromise;
@@ -144,7 +149,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         }
     }
     render() {
-        return (h(Host, { key: 'd03d6361922175ab55e0f58fd54cbbc09f89e5e6', class: "s-tel-input" }, h("input", { key: '69a1fea1c843d4d36d6b0dd59131fa82f0cb62b6', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: 'd627bceaf3d7e812a8bc727a12359495350d51b8', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '013c643d29f51c5ff35cd94ab62e4fcffbb8df0c', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '3b574317d312de0e81facdcc3c470adcccfa1b14', class: "s-tel-input" }, h("input", { key: '6884be98619d7c86a14ac091cbbcc8bbbf78404f', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '670676e296168ebd3771b50fbd1fde9d1d3e27fc', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '1c69b4e169c37a71a86cc479b06c08dc6a9d190b', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initPromise = this.initTelInput();

package/dist/components/salla-tiered-offer.js

@@ -83,13 +83,18 @@ const SallaTieredOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaTieredOff
         this.handleTabClick = (tierName) => {
             this.activeTabTier = tierName;
         };
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.loyaltyProgramText = salla.lang.get('blocks.tiered_offer.program_title');
             this.currentTierText = salla.lang.get('blocks.tiered_offer.current_tier');
             this.discountText = salla.lang.get('blocks.tiered_offer.discount');
             this.benefitText = salla.lang.get('blocks.tiered_offer.tier_description');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         try {
             await salla.onReady();