@salla.sa/twilight-components 2.14.357 → 2.14.358

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

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

package/dist/esm/salla-notification-item.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-DhtEPVv1.js';
+import { r as registerInstance, h } from './index-CTOqXLNX.js';
 
 const sallaNotificationsCss = "";
 

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

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, a as getElement } from './index-CTOqXLNX.js';
 import { S as SpecialDiscountIcon } from './special-discount-Ctkfc4K-.js';
 
 var Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-DhtEPVv1.js';
+import { r as registerInstance, h } from './index-CTOqXLNX.js';
 import { i as iconCheck } from './check-BsXh13x8.js';
 
 var iconFileArchive = `<!-- Generated by IcoMoon.io -->

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/salla-products-list.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTOqXLNX.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';

package/dist/esm/salla-products-slider.entry.js

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

package/dist/esm/salla-progress-bar.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-DhtEPVv1.js';
+import { r as registerInstance, h } from './index-CTOqXLNX.js';
 
 const sallaProgressBarCss = "";
 

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTOqXLNX.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 import { C as Cancel } from './cancel-BsLF_HK7.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CTOqXLNX.js';
 import { W as WishListIcon } from './star-ZT7ehBBk.js';
 import { C as CheckCircle2 } from './check-circle2-BV4kqbdL.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, H as Host } from './index-CTOqXLNX.js';
 import { S as Search } from './search-BscTeWDc.js';
 
 var StoreAlt = `<!-- Generated by IcoMoon.io -->

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, a as getElement } from './index-CTOqXLNX.js';
 import { S as Search } from './search-BscTeWDc.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';

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

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTOqXLNX.js';
 import { a as ArrowRightIcon, A as ArrowLeftIcon } from './keyboard_arrow_right-Vqpj4CWE.js';
 
 /**

package/dist/esm/salla-social-share.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, a as getElement } from './index-CTOqXLNX.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CTOqXLNX.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 
 var instagram = `<!-- Generated by IcoMoon.io -->

package/dist/esm/salla-tab-content_3.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, c as createEvent, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, c as createEvent, a as getElement } from './index-CTOqXLNX.js';
 
 const sallaTabContentCss = "";
 

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, H as Host } from './index-CTOqXLNX.js';
 
 var DiscountType;
 (function (DiscountType) {

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, a as getElement } from './index-CTOqXLNX.js';
 
 const sallaTooltipCss = ".s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;transform:translateX(-39%);background-color:#baf3e6;color:#004d5a;bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;opacity:0;transition:opacity 0.3s;pointer-events:none;margin:0 0 16px 8px;padding:12px;max-width:150px;width:190px;white-space:normal;opacity:1}.s-tooltip-item::after{content:\"\";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#baf3e6 transparent transparent transparent}.s-tooltip-item:dir(ltr){transform:translateX(-72%)}";
 

package/dist/esm/salla-trust-badges.entry.js

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

package/dist/esm/salla-user-menu.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CTOqXLNX.js';
 import { A as ArrowDown } from './keyboard_arrow_down-DCZbpt2a.js';
 import { B as BellRing } from './bell-ring-D3mWkc-3.js';
 import { P as PendingOrdersIcon } from './cart-DY4LZmNP.js';
@@ -89,6 +89,10 @@ const SallaUserMenu = class {
          * To Make the dropdown menu relative to parent element or not
          */
         this.relativeDropdown = false;
+        /**
+         * To auto mount the login modal or not
+         */
+        this.autoMount = false;
         this.onClickOutside = () => {
             this.opened = false;
         };
@@ -102,56 +106,12 @@ const SallaUserMenu = class {
             loyalty_program: loyaltyProgramIcon,
             profile: UserCircle
         };
-        // salla.auth.event.onLoggedIn(() => {
-        //   this.is_loggedIn = true
-        // })
-        salla.lang.onLoaded(() => {
-            this.notifications = salla.lang.get('common.titles.notifications');
-            this.orders = salla.lang.get('common.titles.orders');
-            this.pending_orders = salla.lang.get('common.titles.pending_orders');
-            this.wishlist = salla.lang.get('common.titles.wishlist');
-            this.profile = salla.lang.get('common.titles.profile');
-            this.hello = salla.lang.get('pages.checkout.hello');
-            this.rating = salla.lang.get('common.titles.rating');
-            this.wallet = salla.lang.get('common.titles.wallet');
-            this.settings = salla.lang.get('common.titles.settings');
-            this.loyalty_program = salla.lang.get('pages.loyalty_program.loyalty_points');
-            this.logout = salla.lang.get('blocks.header.logout');
-        });
-        Salla.onReady(() => {
-            if (salla.config.isGuest()) {
-                return;
-            }
-            this.is_loggedIn = true;
-            /**
-             * Get Fresh Notifications In These Cases:
-             * - is notification page, if user already changed the status of his orders (to reset notification badge)
-             * - is pending orders page, if user already changed the status of his orders (to reset orders badge)
-             * - is profile page, in case user changed his name or avatar, we need to update it
-             * - half hour is passed from the last user data fetched
-             *
-             * //todo:: update the data in the storage in customer pages
-             * //todo:: cover two requests in customer pages
-             * //todo:: make sure to run this only after token is set
-             */
-            const shouldFetchProfile = !this.inline &&
-                (salla.url.is_page('customer.notifications') ||
-                    salla.url.is_page('customer.orders.index.pending') ||
-                    salla.url.is_page('customer.profile') ||
-                    (Date.now() - (salla.storage.get('user.fetched_at') || 0)) / 1000 / 60 > 30);
-            if (shouldFetchProfile) {
-                this.fetchFreshProfile();
-            }
-            else {
-                salla.event.on('profile::info.fetched', res => {
-                    this.updateProfileState(res);
-                });
-            }
-        });
     }
     async componentWillLoad() {
         await salla.onReady();
         await salla.lang.onLoaded();
+        this.loadTranslations();
+        this.initiate();
         Salla.event.on('api::token.injected', (token) => this.profileUrl = this.buildProfileUrl(token));
         this.sallaAccountEnabled = Salla.config.get('store.features')?.includes('salla-account');
         this.items = this.sallaAccountEnabled ? { ...this.items, settings: SettingstIcon } : this.items;
@@ -175,6 +135,56 @@ const SallaUserMenu = class {
         this.triggerSlot = trigger.innerHTML;
         trigger.innerHTML = this.replaceParams(trigger.innerHTML);
     }
+    loadTranslations() {
+        this.notifications = Salla.lang.get('common.titles.notifications');
+        this.orders = Salla.lang.get('common.titles.orders');
+        this.pending_orders = Salla.lang.get('common.titles.pending_orders');
+        this.wishlist = Salla.lang.get('common.titles.wishlist');
+        this.profile = Salla.lang.get('common.titles.profile');
+        this.hello = Salla.lang.get('pages.checkout.hello');
+        this.rating = Salla.lang.get('common.titles.rating');
+        this.wallet = Salla.lang.get('common.titles.wallet');
+        this.settings = Salla.lang.get('common.titles.settings');
+        this.loyalty_program = Salla.lang.get('pages.loyalty_program.loyalty_points');
+        this.logout = Salla.lang.get('blocks.header.logout');
+    }
+    initiate() {
+        if (Salla.config.isGuest()) {
+            return this.autoMountLoginModal();
+        }
+        this.is_loggedIn = true;
+        /**
+         * Get Fresh Notifications In These Cases:
+         * - is notification page, if user already changed the status of his orders (to reset notification badge)
+         * - is pending orders page, if user already changed the status of his orders (to reset orders badge)
+         * - is profile page, in case user changed his name or avatar, we need to update it
+         * - half hour is passed from the last user data fetched
+         *
+         * //todo:: update the data in the storage in customer pages
+         * //todo:: cover two requests in customer pages
+         * //todo:: make sure to run this only after token is set
+         */
+        const shouldFetchProfile = !this.inline &&
+            (salla.url.is_page('customer.notifications') ||
+                salla.url.is_page('customer.orders.index.pending') ||
+                salla.url.is_page('customer.profile') ||
+                (Date.now() - (salla.storage.get('user.fetched_at') || 0)) / 1000 / 60 > 30);
+        if (shouldFetchProfile) {
+            return this.fetchFreshProfile();
+        }
+        salla.event.on('profile::info.fetched', res => {
+            this.updateProfileState(res);
+        });
+    }
+    autoMountLoginModal() {
+        if (!this.autoMount) {
+            return;
+        }
+        if (document.querySelector('salla-login-modal')) {
+            return;
+        }
+        Salla.hooks.mount('body:end', document.createElement('salla-login-modal'));
+    }
     fetchFreshProfile() {
         //don't request fetchFreshProfile unless token is injected into the api
         if (!salla.api.token) {

package/dist/esm/salla-user-profile.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-DhtEPVv1.js';
+import { r as registerInstance, h } from './index-CTOqXLNX.js';
 import { G as Genders } from './interfaces-OF8QcbMM.js';
 
 const sallaUserProfileCss = ":host{display:block}";

package/dist/esm/salla-user-settings.entry.js

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DhtEPVv1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTOqXLNX.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 
 var AndroidPhoneIcon = `<!-- Generated by IcoMoon.io -->

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-DhtEPVv1.js';
+import { r as registerInstance, h, H as Host } from './index-CTOqXLNX.js';
 
 const sallaWalletCss = ".s-wallet-table{min-width:100%}.s-wallet-table-balance-container{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:1rem}.s-wallet-table-balance-icon{border-radius:50%;width:52px;height:52px;font-size:25px;padding:16px 13px;background:var(--color-primary-reverse);color:var(--color-primary)}.s-wallet-table-empty-state{display:flex;flex-direction:column;align-items:center}.s-wallet-table-empty-state i{font-size:80px;margin:4rem 0 2rem;color:var(--infinte-color)}.s-wallet-table-transaction-status{padding:6px 19px !important;border-radius:20px;width:max-content;display:flex;align-items:center}.s-wallet-table-transaction-status-default{background:#fff6eb;color:#a46f29}.s-wallet-table-transaction-status-cashback{background:#effbf6;color:#00af6c}.s-wallet-table-transaction-status-refund{background:#ecf3fe;color:#5196f3}.s-wallet-table-transaction-status-purchase{background:#feecec;color:#f55157}.s-wallet-table-transaction-status-icons-success{color:#00af6c}";