@salla.sa/twilight-components 1.2.0 → 1.3.0

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

@@ -634,6 +634,13 @@ const SallaLoginModal = class {
 };
 SallaLoginModal.style = sallaLoginModalCss;
 
+const Star2 = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
+<title>star2</title>
+<path d="M29.714 11.839c0 0.321-0.232 0.625-0.464 0.857l-6.482 6.321 1.536 8.929c0.018 0.125 0.018 0.232 0.018 0.357 0 0.464-0.214 0.893-0.732 0.893-0.25 0-0.5-0.089-0.714-0.214l-8.018-4.214-8.018 4.214c-0.232 0.125-0.464 0.214-0.714 0.214-0.518 0-0.75-0.429-0.75-0.893 0-0.125 0.018-0.232 0.036-0.357l1.536-8.929-6.5-6.321c-0.214-0.232-0.446-0.536-0.446-0.857 0-0.536 0.554-0.75 1-0.821l8.964-1.304 4.018-8.125c0.161-0.339 0.464-0.732 0.875-0.732s0.714 0.393 0.875 0.732l4.018 8.125 8.964 1.304c0.429 0.071 1 0.286 1 0.821z"></path>
+</svg>
+`;
+
 const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
 <title>star3</title>
   <defs>
@@ -684,14 +691,16 @@ const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" vi
 </svg>
 `;
 
-const CheckCircle = `<!-- Generated by IcoMoon.io -->
+const CancelIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>check-circle</title>
-<path d="M19.557 11.26l-4.593 6.891-2.891-1.927c-0.616-0.411-1.441-0.243-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l4 2.667c0.228 0.152 0.485 0.224 0.739 0.224 0.431 0 0.855-0.208 1.111-0.593l5.333-8c0.409-0.612 0.244-1.441-0.369-1.849-0.616-0.411-1.443-0.243-1.849 0.369zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
+<title>cancel</title>
+<path d="M17.885 16l7.057-7.057c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-7.057 7.057-7.057-7.057c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l7.057 7.057-7.057 7.057c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l7.057-7.057 7.057 7.057c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>
 </svg>
 `;
 
-const sallaLoyaltyCss = "";
+const GiftImg = `<svg xmlns="http://www.w3.org/2000/svg" width="54.079" height="53.191" viewBox="0 0 54.079 53.191"><defs><style>.a{fill:#ee9d0d;}.b{fill:#c7830b;}.c{fill:#ea2b2d;}.d{fill:#cb2527;}.e{fill:#6699ce;}.f{fill:#faa6b2;}.g{fill:#a6deff;}.h{fill:#eeb436;}.i{fill:#f72d2f;}</style></defs><path class="a" d="M40,248H77.3v25.88a2.1,2.1,0,0,1-2.1,2.1H42.1a2.1,2.1,0,0,1-2.1-2.1Z" transform="translate(-38.135 -222.787)"/><path class="b" d="M250.632,248.711v12.755L236.2,248h13.67Z" transform="translate(-211.463 -222.787)"/><path class="b" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="c" d="M226.194,32.048l-.5.185a5.035,5.035,0,0,0-3.072,3.292l-.468,1.585-.759.414a5.035,5.035,0,0,0-2.422,3l8.865,8.271,5.09-5.456.262-6.205a5.191,5.191,0,0,0-7-5.083Z" transform="translate(-196.246 -31.722)"/><path class="c" d="M358.628,175.48l-.15.509a5.034,5.034,0,0,1-3.072,3.292l-1.55.577-.359.785a5.034,5.034,0,0,1-2.822,2.624L341.81,175l5.09-5.455,6.172-.69a5.191,5.191,0,0,1,5.555,6.629Z" transform="translate(-304.761 -152.837)"/><path class="d" d="M168,248h7.461v27.978H168Z" transform="translate(-151.213 -222.787)"/><path class="c" d="M40,336H77.3v7.461H40Z" transform="translate(-38.135 -300.528)"/><path class="d" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="a" d="M2.1,0H40.8a2.1,2.1,0,0,1,2.1,2.1V9.326H0V2.1A2.1,2.1,0,0,1,2.1,0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 18.641, 4.976)"/><path class="d" d="M0,0H9.326V9.326H0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 30.912, 16.424)"/><path class="d" d="M286.857,79.389a.931.931,0,0,1-.74-.365l-.615-.8a12.516,12.516,0,0,1-2.528-9,.933.933,0,0,1,1.855.2,10.66,10.66,0,0,0,2.153,7.667l.615.8a.933.933,0,0,1-.739,1.5Z" transform="translate(-252.718 -64.113)"/><path class="c" d="M185.485,178.151l-.039.014a30.78,30.78,0,0,1-12.034,1.906l-2.381-.1,4.092,3.817-1.181,4,3.728-1.206a30.775,30.775,0,0,0,9.833-5.315l.71-.572Z" transform="translate(-153.891 -161.081)"/><path class="d" d="M363.834,194.779a12.51,12.51,0,0,1-6.93-2.1l-.843-.559a.933.933,0,1,1,1.031-1.554l.842.558a10.659,10.659,0,0,0,7.8,1.618.933.933,0,1,1,.328,1.836A12.663,12.663,0,0,1,363.834,194.779Z" transform="translate(-316.982 -171.914)"/><path class="c" d="M275,202.524l-.012.04a30.776,30.776,0,0,0-1.069,12.137l.265,2.369-4.092-3.817-3.909,1.455.945-3.8a30.776,30.776,0,0,1,4.622-10.177l.521-.748Z" transform="translate(-237.949 -180.364)"/><circle class="e" cx="1.865" cy="1.865" r="1.865" transform="translate(10.259 0.032)"/><circle class="f" cx="1.865" cy="1.865" r="1.865" transform="translate(0 21.482)"/><path class="g" d="M36.663,36.663a.933.933,0,0,1-.885-.638l-.048-.143a2.946,2.946,0,0,0-2.8-2.017.933.933,0,1,1,0-1.865A4.808,4.808,0,0,1,37.5,35.292l.048.143a.933.933,0,0,1-.885,1.228Z" transform="translate(-31.067 -31.968)"/><path class="g" d="M79.493,194.438a.929.929,0,0,1-.506-.15l-.185-.12a2.074,2.074,0,0,0-2.192-.047.933.933,0,0,1-.947-1.607,3.929,3.929,0,0,1,4.153.088l.185.12a.933.933,0,0,1-.508,1.716Z" transform="translate(-69.235 -173.283)"/><path class="h" d="M27.751,85.141l2.88,2.644,3.811-.874-1.624,3.556,2.008,3.354-3.884-.446-2.569,2.946L27.6,92.49,24,90.957l3.4-1.922Z" transform="translate(-24 -78.914)"/><path class="h" d="M82.174,227.375l-.959,3.772,2.564,2.928-3.884.254L77.9,237.673l-1.442-3.615-3.8-.862,2.993-2.488-.353-3.876,3.291,2.078Z" transform="translate(-66.992 -204.086)"/><path class="i" d="M300.471,141.9l-5.455-5.09,5.09-5.456a8.342,8.342,0,0,1,5.455,5.09Z" transform="translate(-263.422 -119.737)"/></svg>`;
+
+const sallaLoyaltyCss = "#salla-loyalty-modal .s-swiper-button-prev button,#salla-loyalty-modal .s-swiper-button-next button{box-shadow:#32325d40 0px 6px 12px -2px, #0000004d 0px 3px 7px -3px}";
 
 const SallaLoyalty = class {
   constructor(hostRef) {
@@ -700,6 +709,35 @@ const SallaLoyalty = class {
     this.buttonLoading = false;
     this.selectedItem = undefined;
     this.askConfirmation = false;
+    this.is_loggedin = false;
+    /**
+     * The exchanged prize point
+     */
+    this.prizePoints = undefined;
+    /**
+     * Available customer points with which they can exchange.
+     */
+    this.customerPoints = undefined;
+    /**
+     * The exchangable prize title
+     */
+    this.prizeTitle = undefined;
+    /**
+     * Does the merchant allow to login using email
+     */
+    this.allowEmail = true;
+    /**
+     * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
+     */
+    this.allowMobile = true;
+    /**
+     * Does the merchant require registration with email & mobile
+     */
+    this.requireEmail = false;
+    salla.event.on('loyalty::open', () => this.open());
+    salla.auth.event.onLoggedIn(() => {
+      this.is_loggedin = true;
+    });
     salla.lang.onLoaded(() => {
       this.points = salla.lang.get('pages.loyalty_program.point');
       this.exchange_points = salla.lang.get('pages.loyalty_program.exchange_points');
@@ -707,8 +745,12 @@ const SallaLoyalty = class {
       this.for = salla.lang.get('pages.loyalty_program.for');
       this.confirm = salla.lang.get('pages.loyalty_program.confirm');
       this.cancel = salla.lang.get('pages.loyalty_program.cancellation');
-      this.loyalty_placeholder = salla.lang.get('pages.loyalty.points');
-      this.loyalty_placeholder_info = salla.lang.get('pages.loyalty.points');
+      this.cart_total_point_summary = salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints });
+      this.cart_point_exchange_now = salla.lang.get('pages.loyalty_program.cart_point_exchange_now');
+      this.login_button = salla.lang.get('blocks.header.login');
+      if (!this.guestMessage) {
+        this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');
+      }
     });
   }
   setSelectedPrizeItem(item) {
@@ -719,24 +761,39 @@ const SallaLoyalty = class {
       this.selectedItem = undefined;
     }
   }
+  handleLongText(text) {
+    if (text.length > 150) {
+      return text.substring(0, 150) + '...';
+    }
+    return text;
+  }
   prizeItem(item) {
-    var klass = {
+    let klass = {
       's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem.id == item.id,
       "s-loyalty-prize-item": true
     };
-    return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, h("span", { class: "s-loyalty-prize-item-check", innerHTML: CheckCircle }), h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), h("div", { class: "s-loyalty-prize-item-title" }, item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, item.description), h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", this.points));
+    return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), h("div", { class: "s-loyalty-prize-item-title" }, item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, this.handleLongText(item.description)), h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", this.points, h("div", { class: "s-loyalty-prize-item-check" }, h("div", null))));
   }
   getConfirmationModal() {
     var _a, _b;
-    return h("div", null, h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, this.exchange_points), h("div", { slot: "description" }, h("span", null, this.are_you_sure_to_exchange, " ( ", h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ) ", this.for, " ( ", h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )"))), h("div", { class: "s-loyalty-confirmation-actions" }, h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, this.cancel), h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, this.confirm)));
+    return [
+      h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, this.exchange_points), h("div", { slot: "description" }, this.are_you_sure_to_exchange, " ( ", h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ) ", this.for, " ( ", h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )")),
+      h("div", { class: "s-loyalty-confirmation-actions" }, h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, this.cancel), h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, this.confirm))
+    ];
+  }
+  getAfterExchangeUI() {
+    return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: CancelIcon })))));
   }
   /**
    * Show loyalty modal
    */
   async open() {
+    if (!this.is_loggedin)
+      return salla.event.dispatch('login::open');
     this.modal.open();
     return await salla.loyalty.getProgram()
       .then((response) => {
+      console.log("🚀 ~ file: salla-loyalty.tsx ~ line 167 ~ SallaLoyalty ~ .then ~ response", response);
       this.loyaltyProgram = response.data;
     })
       .catch(e => console.log(e))
@@ -751,6 +808,17 @@ const SallaLoyalty = class {
   async close() {
     return this.modal.close();
   }
+  /**
+   *
+   * Cancel Exchanged prizes
+   */
+  async resetExchange() {
+    return await salla.loyalty.reset()
+      .then(() => {
+      this.prizePoints = undefined;
+      this.prizeTitle = undefined;
+    }).catch(e => console.log(e));
+  }
   /**
    * Open Confirmation modal
    */
@@ -763,7 +831,7 @@ const SallaLoyalty = class {
    * Cancel process
    */
   async cancelProcess() {
-    await this.confirmationModal.close()
+    return await this.confirmationModal.close()
       .then(() => this.selectedItem = null)
       .catch(e => console.log(e));
   }
@@ -779,17 +847,32 @@ const SallaLoyalty = class {
       this.loyaltyProgram = response.data;
     })
       .catch(e => console.log(e))
-      .finally(() => this.buttonLoading = false);
+      .finally(() => {
+      this.buttonLoading = false;
+      this.cancelProcess();
+    });
   }
   render() {
-    return (h(Host, null, h("salla-list-tile", { id: 's-loyalty-activator' }, h("div", { slot: "icon", class: "s-loyalty-activator-icon", innerHTML: Star3 }), h("div", { slot: "subtitle" }, h("div", null, "You have 200 points that you can use for great prizes", h("salla-button", { shape: "link", color: "danger", onClick: () => this.open() }, "Get Loyalty Program")))), h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()), h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "lg", ref: modal => this.modal = modal }, !!this.loyaltyProgram ?
-      [
-        h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("img", { src: "https://cdn.salla.network/custom-themes/images/flat.svg", alt: "flat" })), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
-        h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
-        h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points)
-      ]
-      :
-        h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.loyalty_placeholder), h("div", { slot: "description" }, this.loyalty_placeholder_info)), h("slot", { name: "footer" }))));
+    // A. when the exchange is done, and we have the final prize points to show it in cart page
+    if (this.prizePoints) {
+      return this.getAfterExchangeUI();
+    }
+    return [
+      h("slot", { name: 'widget' }, this.customerPoints ?
+        h("salla-list-tile", { class: 's-loyalty-widget' }, h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star2 }), h("div", { slot: "subtitle" }, this.is_loggedin ? this.cart_total_point_summary : this.guestMessage, h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? this.cart_point_exchange_now : this.login_button))) :
+        ''),
+      h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
+      h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "md", ref: modal => this.modal = modal }, !!this.loyaltyProgram ?
+        [
+          h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
+          h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
+          h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points)
+        ]
+        : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
+    ];
+  }
+  componentDidLoad() {
+    this.is_loggedin = salla.config.isUser();
   }
 };
 SallaLoyalty.style = sallaLoyaltyCss;
@@ -912,13 +995,16 @@ const SallaModal = class {
       'sicon-check-circle2': !this.icon && this.iconStyle == 'success' && !this.imageIcon,
     };
   }
+  getWidth() {
+    return this.isLoading ? 'sm' : this.width;
+  }
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
     if (this.isLoading) {
-      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("salla-loading", null), h("div", { class: "s-hidden" }, h("slot", null))))));
+      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("salla-loading", null), h("div", { class: "s-hidden" }, h("slot", null))))));
     }
-    return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
+    return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
       h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
       : '', this.modalTitle || this.subTitle ?
       h("div", { class: "s-modal-header-inner" }, this.iconStyle || this.icon
@@ -1094,6 +1180,10 @@ const SallaPlaceholder = class {
       * The size of the icon. Defaults to [`md`]
       */
     this.iconSize = 'md';
+    salla.lang.onLoaded(() => {
+      this.default_title = salla.lang.get('common.elements.no_options');
+      this.default_description = salla.lang.get('common.errors.empty_results');
+    });
   }
   alignmentClass() {
     return {
@@ -1104,7 +1194,7 @@ const SallaPlaceholder = class {
     };
   }
   render() {
-    return (h("div", { class: this.alignmentClass() }, h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { class: "s-placeholder-title" }, h("slot", { name: 'title' })), h("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }))));
+    return (h("div", { class: this.alignmentClass() }, h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { class: "s-placeholder-title" }, h("slot", { name: 'title' }, h("span", null, this.default_title))), h("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }, h("span", null, this.default_description)))));
   }
 };
 SallaPlaceholder.style = sallaPlaceholderCss;
@@ -1514,16 +1604,17 @@ const SallaSearch = class {
     this.height = 60;
     Helper.setHost(this.host);
     this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
-    salla.event.on('search::open', () => this.modal.open());
+    salla.event.on('search::open', () => this.open());
     salla.lang.onLoaded(() => {
       this.placeholder = salla.lang.get('blocks.header.search_placeholder');
       this.noResultsText = salla.lang.get('common.elements.no_options');
     });
-    salla.event.on('modalOpened', () => this.onModalOpen());
     salla.event.on('modalClosed', () => this.onModalClose());
   }
-  onModalOpen() {
-    setTimeout(() => this.searchInput.focus(), 300);
+  async open() {
+    if (!this.inline) {
+      await this.modal.open().then(() => setTimeout(() => this.searchInput.focus(), 300));
+    }
   }
   onModalClose() {
     this.searchInput.value = '';

package/dist/esm/twilight-components.js

@@ -16,5 +16,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["salla-branches_22",[[4,"salla-loyalty",{"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"loyalty_placeholder":[32],"loyalty_placeholder_info":[32],"open":[64],"close":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return bootstrapLazy([["salla-branches_22",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
 });