@salla.sa/twilight-components 1.0.14 → 1.0.16

package/dist/twilight-components/{index-8cf58712.js → index-8966d27f.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'twilight-components';
-const BUILD = /* twilight-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: true, disconnectedCallback: false, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* twilight-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: true, disconnectedCallback: false, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 const Env = /* twilight-components */ {};
 
 let scopeId;

package/dist/twilight-components/index.esm.js

@@ -1,3 +1,4 @@
-export { S as SallaLogin } from './salla-login-97e0a9ab.js';
-export { S as SallaSearch } from './salla-search-df1c9b54.js';
-import './index-8cf58712.js';
+export { S as SallaLogin } from './salla-login-4d620368.js';
+export { S as SallaSearch } from './salla-search-5338c0a1.js';
+import './index-8966d27f.js';
+import './Helper-81ac9a8c.js';

package/dist/twilight-components/{multi-warehouse.entry.js → salla-branches.entry.js}

@@ -1,16 +1,15 @@
-import { r as registerInstance, h, g as getElement } from './index-8cf58712.js';
+import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
 
-const multiWarehouseCss = "#s-multi-warehouse-modal .s-modal-header{display:flex;flex-direction:column;margin-bottom:40px}#s-multi-warehouse-modal .s-modal-sub-title{margin:0}#s-multi-warehouse-modal .s-modal-title{order:10}";
+const sallaBranchesCss = ":host{display:block}";
 
-// import Helper from "../../Helpers/Helper";
 let engine = require('store/src/store-engine');
 let storages = require('store/storages/sessionStorage');
 let sessionStore = engine.createStore(storages);
-const MultiWarehouse = class {
+const SallaBranches = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.open = false;
-    this.isOpenedBefore = sessionStore.get("multi-warehouse-opened-before");
+    this.isOpenedBefore = sessionStore.get("branch-choosed-before");
     this.displayAs = 'default';
     this.browseProductsFrom = 'all';
     this.branches = [
@@ -53,28 +52,28 @@ const MultiWarehouse = class {
     this.btn.load().then(() => {
       setTimeout(() => location.reload(), 2000);
     });
-    sessionStore.set("multi-warehouse-opened-before", true);
+    sessionStore.set("branch-choosed-before", true);
     this.show();
     setTimeout(() => {
       this.current = this.selected;
     }, 300);
   }
   render() {
-    return (h("salla-modal", { icon: "sicon-store-alt", title: "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "s-multi-warehouse-modal", class: "hidden" }, h("div", { class: "text-right" }, h("fieldset", { class: "mt-4" }, h("h4", { class: "text-sm text-gray-600 mb-6" }, this.formTitle()), h("legend", { class: "sr-only" }, this.formTitle()), this.branches.length <= 5 ?
-      h("div", { class: "space-y-5" }, this.branches.map((branch) => h("div", { class: "flex items-center" }, h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
-          'me-3 focus:ring-primary h-4 w-4 text-primary border-gray-300': true,
+    return (h("salla-modal", { icon: "sicon-store-alt", title: "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true, "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "s-branches-modal", class: "hidden" }, h("fieldset", null, h("h4", { class: "s-branches-title" }, this.formTitle()), h("legend", { class: "s-branches-sr-only" }, this.formTitle()), this.branches.length <= 5 ?
+      h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => h("div", { class: "s-branches-input-wrap" }, h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
+          's-branches-input': true,
           'opacity-50': !branch.open,
           'hidden': !this.isChoiceable()
         }, checked: this.current == branch.id }), h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
-          'flex items-center justify-between text-sm font-medium text-gray-700 flex-grow': true,
-          'cursor-pointer': this.isChoiceable()
-        } }, h("span", { class: { 'opacity-50': !branch.open } }, branch.name), this.isChoiceable() ?
-        h("small", { class: "text-red-400" }, branch.open ? '' : 'مُغلق')
+          's-branches-label': true,
+          's-branches-clickable': this.isChoiceable()
+        } }, h("span", { class: { 's-branches-is-closed': !branch.open } }, branch.name), this.isChoiceable() ?
+        h("small", { class: "s-branches-closed-badge" }, branch.open ? '' : 'مُغلق')
         :
           h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
-        h("select", { class: "w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary sm:text-sm border-gray-200 rounded-md appearance-none visibility_condition px-4", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))))), this.isChoiceable() ?
-      h("div", { slot: "footer", class: "mt-6" }, h("slot", { name: "footer" }, h("salla-button", { "loader-position": "before", ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "w-full" }, salla.lang.get('common.elements.ok'))))
+        h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق'))))), this.isChoiceable() ?
+      h("slot", { name: "footer" }, h("salla-button", { "loader-position": "before", ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit" }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   componentDidRender() {
@@ -84,6 +83,6 @@ const MultiWarehouse = class {
   }
   get host() { return getElement(this); }
 };
-MultiWarehouse.style = multiWarehouseCss;
+SallaBranches.style = sallaBranchesCss;
 
-export { MultiWarehouse as multi_warehouse };
+export { SallaBranches as salla_branches };

package/dist/twilight-components/salla-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-8cf58712.js';
+import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const sallaButtonCss = ":host{display:block}";
@@ -21,7 +21,7 @@ const SallaButton = class {
       + 'btn-' + this.btnStyle
       + (this.wide ? ' s-button-wide ' : '')
       + 'loader-' + this.loaderPosition
-      + (this.loaderPosition == 'before' ? ' flex-row-reverse' : '');
+      + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
     // if(this.hostAttributes.onclick){
     //   this.hostAttributes.onclick=eval(this.hostAttributes.onclick);
     // }
@@ -33,7 +33,7 @@ const SallaButton = class {
   }
   async load() {
     if (this.loaderPosition == 'center')
-      this.host.querySelector('.btn-text').classList.add('opacity-0');
+      this.host.querySelector('.s-button-text').classList.add('s-button-hide');
     this.host.setAttribute('loading', '');
     return this.host;
   }
@@ -55,11 +55,11 @@ const SallaButton = class {
     Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
   }
   render() {
-    return (h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), h("span", { class: "btn-text transition-opacity duration-300" }, h("slot", null)), this.loading ? h("span", { class: {
+    return (h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), h("span", { class: "s-button-text" }, h("slot", null)), this.loading ? h("span", { class: {
         'loader loader--small s-button-loader': true,
-        'absolute right-2': this.loaderPosition === 'start',
-        'absolute left-2': this.loaderPosition === 'end',
-        'absolute top-1/2 left-1/2 !-translate-x-1/2 !-translate-y-1/2 !m-0': this.loaderPosition === 'center',
+        's-button-loader-start': this.loaderPosition === 'start',
+        's-button-loader-end': this.loaderPosition === 'end',
+        's-buton-loader-center': this.loaderPosition === 'center',
       } }) : ''));
   }
   get host() { return getElement(this); }

package/dist/twilight-components/salla-localization.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-8cf58712.js';
+import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const SallaLocalization = class {

package/dist/twilight-components/{salla-login-97e0a9ab.js → salla-login-4d620368.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8cf58712.js';
+import { r as registerInstance, h } from './index-8966d27f.js';
 
 const SallaLogin = class {
   constructor(hostRef) {

package/dist/twilight-components/salla-login.entry.js

@@ -1,2 +1,2 @@
-export { S as salla_login } from './salla-login-97e0a9ab.js';
-import './index-8cf58712.js';
+export { S as salla_login } from './salla-login-4d620368.js';
+import './index-8966d27f.js';

package/dist/twilight-components/salla-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-8cf58712.js';
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-8966d27f.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const SallaModal = class {
@@ -6,17 +6,22 @@ const SallaModal = class {
     registerInstance(this, hostRef);
     this.ready = createEvent(this, "ready", 7);
     this.close = createEvent(this, "close", 7);
+    var _a;
     this.error = false;
     this.success = false;
     this.isClosable = true;
     this.modalWidth = 'w-96'; //todo use friendly names
     this.visible = false;
+    this.subTitleFirst = false;
     this.subTitle = '';
     this.icon = '';
+    this.imageIcon = '';
+    Helper.setHost(this.host);
     salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
     salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
     this.title = this.host.title;
     this.host.removeAttribute('title');
+    (_a = Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body');
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -41,11 +46,9 @@ const SallaModal = class {
     return this.host;
   }
   toggleModal(isOpen) {
-    //todo:: use ref
-    Helper.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
-      .toggleElement(this.host.querySelector('.s-modal-body'), 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100', //add these classes
-    'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', //remove these classes
-    () => isOpen)
+    Helper.toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.host.querySelector('[slot=body]'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
       setTimeout(() => this.host.classList.add('hidden'), 350);
@@ -60,8 +63,7 @@ const SallaModal = class {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", onClick: () => this.closeModal() }), h("span", { class: "s-modal-spacer" }, "\u200B"), h("div", { class: 's-modal-body ' + this.modalWidth }, h("div", { class: { 's-modal-header': true,
-        'text-center': this.icon != '' } }, this.isClosable ?
+    return (h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("span", { class: "s-modal-spacer" }, "\u200B"), h("slot", { name: "body" }, h("div", { class: 's-modal-body ' + this.modalWidth }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
       h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
       : '', this.error || this.success || this.icon
       ? h("div", { class: {
@@ -74,7 +76,11 @@ const SallaModal = class {
           's-modal-text-error': this.error,
           's-modal-text-success': this.success,
         } }))
-      : '', h("div", { class: "s-modal-title", innerHTML: this.title }), h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle })), h("slot", null), h("slot", { name: "footer" })))));
+      : this.imageIcon ?
+        h("img", { class: "s-modal-header-img", src: this.imageIcon })
+        : '', this.title || this.subTitle ?
+      h("div", { class: "s-modal-header-content" }, h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+      : ''), h("slot", null), h("slot", { name: "footer" }))))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/twilight-components/salla-product-availability.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-8cf58712.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-8966d27f.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const SallaProductAvailability = class {

package/dist/twilight-components/salla-rating.entry.js

@@ -1,12 +1,11 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-8cf58712.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-8966d27f.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
-const sallaRatingCss = ":host{display:block}";
+const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
 
 const SallaRating = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.stars = [1, 2, 3, 4, 5];
     this.order = {
       shipping: { id: 5622 },
       products: [
@@ -21,17 +20,17 @@ const SallaRating = class {
           "id": "2314513454",
           "getOptimusRouteKey": "7351233357"
         },
-        // {
-        //   "title": "وحدة تحكم لمشغل العاب",
-        //   "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/NOa4kHvOkd1hBWHk3JIgAo1602oVACfuWGFz3vXv.jpg",
-        //   "price": "‏10,978.00 ر.س",
-        //   "qty": "‏2",
-        //   "totalBefore": "‏1120 ر.س",
-        //   "discount": "-5%",
-        //   "total": "‏1064 ر.س",
-        //   "id": "9842833",
-        //   "getOptimusRouteKey": "735152357"
-        // },
+        {
+          "title": "ميكروفون عالى الجودة",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "2314513454",
+          "getOptimusRouteKey": "7351233357"
+        },
         {
           "title": "ساعة ذكية بنظام اندرويد",
           "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/T4kTqYNuPAZmPMLw1bx92RnjVMZyFszVXOUZQsFJ.jpg",
@@ -44,8 +43,9 @@ const SallaRating = class {
           "getOptimusRouteKey": "73233357"
         }
       ],
+      storeLogo: "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/X3NKcY7nhaFQlR7kBBHvfDpMY48cerunKrmDA1gi.png",
+      shippingLogo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScPt4R6KaKDldrXb-9pUljFwL3m6A72BhN6p1qZJKprwC6VbCWC_8ASZgiJAoL_l7DepM&usqp=CAU"
     };
-    this.isProductsRating = false;
     this.ratingChain = Promise.resolve();
     this.stepsCount = 0;
     Helper.setHost(this.host);
@@ -58,52 +58,57 @@ const SallaRating = class {
   }
   componentWillLoad() {
     this.stepsCount = [this.isStoreRating, this.isProductsRating, this.isShippingRating].filter(item => item).length;
-    this.getData();
+    // this.getData();
   }
   componentDidRender() {
     this.show();
     this.initiateRating();
   }
   initiateRating() {
-    this.highlightSelectedStars();
     this.starsRating();
+    this.highlightSelectedStars();
     this.handleWizard();
-    const step = this.host.querySelector('.step:first-child');
-    this.setModalHeight(step);
     salla.event.on('submit::order-rating', () => this.sendRating().then(() => {
       let seconds = 10;
       let timeToClose = setInterval(() => {
         seconds--;
-        this.host.querySelector('.close-time').innerHTML = `00:0${seconds}`;
+        this.host.querySelector('.s-rating-thanks-time').innerHTML = `00:0${seconds}`;
         if (seconds == 0) {
-          this.hide();
+          // this.hide();
           clearInterval(timeToClose);
         }
       }, 1000);
-      this.host.querySelector('.wizard-footer').classList.add('opacity-0', 'pointer-events-0');
-      Helper.toggle('.step', 'hidden', 'block', () => true);
-      Helper.toggle('.thankyou-view', 'is-opened', 'hidden', () => true);
-      const thankYouView = this.host.querySelector('.thankyou-view');
+      this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+      Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
+      Helper.toggle('.s-rating-thanks', 's-rating-unactive', 's-rating-hidden', () => true);
+      const thankYouView = this.host.querySelector('.s-rating-thanks');
       this.setModalHeight(thankYouView);
       setTimeout(() => {
-        Helper.toggleElement(thankYouView, ['opacity-1', 'translate-x-0'], ['opacity-0', 'translate-x-3'], () => true);
+        Helper.toggleElement(thankYouView, 's-rating-active', 's-rating-unactive', () => true);
       }, 200);
     }));
   }
+  // getdata
+  getData() {
+    salla.api.order.endpointsMethods.details = 'get';
+    salla.order.api.details(salla.config.page.id).then(data => console.log(''));
+  }
   // handle wizard
   handleWizard() {
-    let index = 0, steps = document.querySelectorAll(".step"), dots = document.querySelectorAll(".step-dot");
-    // show first step
+    var _a;
+    let index = 0, steps = this.host.querySelectorAll(".s-rating-step"), dots = this.host.querySelectorAll(".s-rating-step-dot"), nextBtnText = this.host.querySelector('#next-btn .btn-text');
+    this.setModalHeight(steps[0]);
     this.showActiveStep(steps, dots, index);
-    // handle btn text
-    // Helper.getElement('#next-btn .btn-text').innerHTML= steps[index + 1].dataset.stepName;
-    // change to be seprated method
+    nextBtnText.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || 'إرسال التقييم';
     Helper.onClick("#prev-btn", () => {
+      var _a;
       index > 0 && index--;
       this.showActiveStep(steps, dots, index);
-      index == 0 && Helper.toggle('#prev-btn', ['pointer-events-none', 'opacity-0'], 'block', () => true);
+      nextBtnText.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || 'إرسال التقييم';
+      index == 0 && Helper.toggle('#prev-btn', 's-rating-unvisiable', 'block', () => true);
     });
     Helper.onClick("#next-btn", () => {
+      var _a;
       this.ratingValidation();
       if (index == this.stepsCount - 1) {
         salla.event.dispatch("submit::order-rating");
@@ -111,33 +116,94 @@ const SallaRating = class {
       else {
         index < this.stepsCount - 1 && index++;
         this.showActiveStep(steps, dots, index);
-        Helper.toggle('#prev-btn', 'block', ['pointer-events-none', 'opacity-0'], () => true);
+        nextBtnText.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || 'إرسال التقييم';
+        Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true);
       }
     });
   }
   showActiveStep(steps, dots, currentIndex) {
-    Helper.toggle('.step-dot', 'bg-gray-200', 'bg-primay', () => true);
+    Helper.toggle('.s-rating-step-dot', 'bg-gray-200', 'bg-primay', () => true);
     this.stepsCount > 1 && Helper.toggleElement(dots[currentIndex], 'bg-primary', 'bg-gray-200', () => true);
     // hide all steps
-    Helper.toggle('.step', ['hidden', 'opacity-0', 'translate-x-3'], ['active', 'opacity-1', 'translate-x-0'], () => true);
-    Helper.toggleElement(steps[currentIndex], 'active', 'hidden', () => true);
+    Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
+    Helper.toggleElement(steps[currentIndex], 'block', 's-rating-hidden', () => true); // remove class s-rating-hidde
     this.setModalHeight(steps[currentIndex]);
     setTimeout(() => {
-      Helper.toggleElement(steps[currentIndex], ['opacity-1', 'translate-x-0'], ['opacity-0', 'translate-x-3',], () => true);
+      Helper.toggleElement(steps[currentIndex], 's-rating-active', 's-rating-unactive', () => true);
     }, 200);
   }
   setModalHeight(current) {
-    const wrapper = this.host.querySelector('.s-order-rating-steps-wrapper');
+    const wrapper = this.host.querySelector('.s-rating-wrapper');
     setTimeout(() => {
       wrapper === null || wrapper === void 0 ? void 0 : wrapper.setAttribute('style', 'height:' + (current === null || current === void 0 ? void 0 : current.scrollHeight) + 'px');
     });
   }
+  // handle star rating 
+  starsRating() {
+    let selectedClasses = ['selected', 'text-theme-yellow'];
+    // Listen for form submissions
+    salla.document.event.onSubmit('.s-rating-stars-element', function (event) {
+      // Prevent form from submitting
+      event.preventDefault();
+      // Get the selected star - activeElement is not supported in safari
+      var activeStars = event.target.querySelectorAll('.btn--star.hovered');
+      var selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      var selectedIndex = parseInt(selected.dataset.star, 10);
+      event.target.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Get all stars in this form (only search in the form, not the whole document)
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      event.target
+        .querySelectorAll('.btn--star')
+        .forEach(function (star, index) {
+        if (index < selectedIndex) {
+          // Selected star or before it, Add highlighting
+          star.classList.add(...selectedClasses);
+          return;
+        }
+        // After selected star, Remove highlight
+        star.classList.remove(...selectedClasses);
+      });
+      // Remove aria-pressed from any previously selected star
+      var previousRating = event.target.querySelector('.star[aria-pressed="true"]');
+      if (previousRating) {
+        previousRating.removeAttribute('aria-pressed');
+      }
+      // Add aria-pressed role to the selected button
+      selected.setAttribute('aria-pressed', true);
+    });
+  }
+  highlightSelectedStars() {
+    let hover = ['hovered', 'text-theme-yellow'];
+    Helper.all('.s-rating-stars-element', el => {
+      let starElements = el.querySelectorAll('.btn--star');
+      // remove hovered state from stars ---
+      el.addEventListener('mouseout', () => el.querySelectorAll('.btn--star').forEach(star => star.classList.remove(...hover)));
+      starElements.forEach((starElement, index) => {
+        starElement.addEventListener('mouseover', () => {
+          starElement.classList.add(...hover);
+          if (index <= 1) {
+            starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
+          }
+          else {
+            for (let i = 0; i < index; i++) {
+              starElements[i].classList.add(...hover);
+            }
+          }
+        });
+        starElement.addEventListener('mouseout', () => {
+          starElement.classList.contains(...hover) ? starElement.classList.remove(...hover) : null;
+        });
+      });
+    });
+  }
   // send feedback rating and validation
   sendRating() {
-    Helper.all('.rating-section', ratingSection => {
-      let type = ratingSection.dataset.type;
+    Helper.all('.s-rating-step', ratingStep => {
+      let type = ratingStep.dataset.type;
       let formsData = [];
-      ratingSection.querySelectorAll('.rating-outer-form')
+      ratingStep.querySelectorAll('.rating-outer-form')
         .forEach((form) => {
         let formData = {};
         form.querySelectorAll('[name]')
@@ -165,17 +231,15 @@ const SallaRating = class {
   }
   ratingValidation() {
     let errorMsg = '';
-    document.querySelectorAll('.rating-section.active')
+    document.querySelectorAll('.s-rating-step.s-rating-active')
       .forEach((ratingSection) => {
       ratingSection.querySelectorAll('.rating-outer-form')
         .forEach((rating) => {
         let ratingInput = rating.querySelector('.rating_hidden_input');
-        let commentInput = rating.querySelector('.comment');
-        // let sectionTitle = rating.querySelector('.section-title');
-        let validationMessage = rating.querySelector('.validation-message');
+        let commentInput = rating.querySelector('.s-rating-comment');
+        let validationMessage = rating.querySelector('.s-rating-validation-msg');
         if (ratingInput.value && commentInput.value && commentInput.value.length > 3) {
           commentInput.classList.remove('has-error');
-          // sectionTitle?.classList.remove('has-error', 'text-red-400');
           validationMessage.innerHTML = '';
           return;
         }
@@ -185,14 +249,13 @@ const SallaRating = class {
         else {
           commentInput.classList.add('has-error');
         }
-        // sectionTitle?.classList.add('has-error', 'text-red-400');
         errorMsg = ratingInput.value
           ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + commentInput.getAttribute('placeholder'))
           : (rating.dataset.starsError || salla.lang.get('pages.rating.rate_store_stars'));
         validationMessage.innerHTML = errorMsg;
       });
     });
-    //Fire error to prevent sending rating
+    //Fire error to prevent going to next step
     if (errorMsg) {
       // scroll to first error
       let ratingErrors = document.querySelectorAll('.has-error');
@@ -203,90 +266,25 @@ const SallaRating = class {
       throw new Error(errorMsg);
     }
   }
-  // getdata
-  getData() {
-    salla.api.order.endpointsMethods.details = 'get';
-    salla.order.api.details(salla.config.page.id).then(data => console.log(''));
-  }
-  // handle star rating
-  starsRating() {
-    let selectedClasses = ['selected', 'text-theme-yellow'];
-    // Listen for form submissions
-    salla.document.event.onSubmit('.rate-element', function (event) {
-      // Prevent form from submitting
-      event.preventDefault();
-      // Get the selected star - activeElement is not supported in safari
-      var activeStars = event.target.querySelectorAll('.btn--star.hovered');
-      var selected = activeStars[activeStars.length - 1];
-      if (!selected)
-        return;
-      var selectedIndex = parseInt(selected.dataset.star, 10);
-      event.target.querySelector('.rating_hidden_input').value = selectedIndex;
-      // Get all stars in this form (only search in the form, not the whole document)
-      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
-      event.target
-        .querySelectorAll('.btn--star')
-        .forEach(function (star, index) {
-        if (index < selectedIndex) {
-          // Selected star or before it, Add highlighting
-          star.classList.add(...selectedClasses);
-          return;
-        }
-        // After selected star, Remove highlight
-        star.classList.remove(...selectedClasses);
-      });
-      // Remove aria-pressed from any previously selected star
-      var previousRating = event.target.querySelector('.star[aria-pressed="true"]');
-      if (previousRating) {
-        previousRating.removeAttribute('aria-pressed');
-      }
-      // Add aria-pressed role to the selected button
-      selected.setAttribute('aria-pressed', true);
-    });
-  }
-  highlightSelectedStars() {
-    let hover = ['hovered', 'text-theme-yellow'];
-    Helper.all('.rate-element', el => {
-      let starElements = el.querySelectorAll('.btn--star');
-      // remove hovered state from stars ---
-      el.addEventListener('mouseout', () => el.querySelectorAll('.btn--star').forEach(star => star.classList.remove(...hover)));
-      starElements.forEach((starElement, index) => {
-        starElement.addEventListener('mouseover', () => {
-          starElement.classList.add(...hover);
-          if (index <= 1) {
-            starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
-          }
-          else {
-            for (let i = 0; i < index; i++) {
-              starElements[i].classList.add(...hover);
-            }
-          }
-        });
-        starElement.addEventListener('mouseout', () => {
-          starElement.classList.contains(...hover) ? starElement.classList.remove(...hover) : null;
-        });
-      });
-    });
-  }
   // render
   render() {
-    return (h(Host, null, h("salla-modal", { class: "hidden", "modal-width": "w-[800px]", ref: modal => this.modal = modal, title: salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.orderId + ')</span>' }, h("div", { class: "s-order-rating-steps-wrapper mt-12 mb-10 transition-all duration-300 ease-elastic" }, this.isStoreRating && this.renderStoreRating(), this.isProductsRating && this.renderProductsRating(), this.isShippingRating && this.renderShippingRating(), this.renderThanksView()), h("div", { class: "wizard-footer relative flex justify-between items-center" }, h("button", { id: "prev-btn", class: "font-bold text-sm w-28 h-10 px-4 text-primary hover:text-primary-d opacity-0 pointer-events-none duration-300 transition-all" }, "\u0627\u0644\u0633\u0627\u0628\u0642"), this.stepsCount > 1 ?
-      h("ul", { class: "flex justify-center text-center space-s-1.5 flex-1" }, [0, 1, 2].slice(0, this.stepsCount).map(index => h("li", { class: `${index == 0 ? 'bg-primary' : 'bg-gray-200'} step-dot w-2.5 h-2.5 rounded-full transition-colors duration-300` }))) : '', h("salla-button", { id: "next-btn", class: "w-28", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")))));
+    return (h(Host, null, h("salla-modal", { class: "hidden", "modal-width": "w-[800px]", ref: modal => this.modal = modal, title: salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.orderId + ')</span>' }, h("div", { class: "s-rating-wrapper " }, this.isStoreRating && this.renderStoreRating(), this.isProductsRating && this.renderProductsRating(), this.isShippingRating && this.renderShippingRating(), this.renderThanksView()), h("div", { class: "s-rating-footer" }, h("button", { id: "prev-btn", class: "s-rating-btn s-rating-unvisiable" }, "\u0627\u0644\u0633\u0627\u0628\u0642"), this.stepsCount > 1 ?
+      h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(index => h("li", { class: `${index == 0 ? 'bg-primary' : 'bg-gray-200'} s-rating-step-dot` }))) : '', h("salla-button", { id: "next-btn", class: "w-28", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")))));
   }
   renderStoreRating() {
-    return (h("section", { class: "step rating-section active transition-all duration-500 opacity-0 translate-x-3 hidden", "data-type": "store", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062A\u062C\u0631" }, h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') }, h("input", { type: "hidden", name: "order_id", value: this.orderId }), h("input", { type: "hidden", name: "type", value: "store" }), h("div", { class: "flex flex-col items-center " }, h("div", { class: "w-28 h-28 border border-gray-200 rounded-full flex items-center justify-center mb-4" }, h("img", { src: "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/X3NKcY7nhaFQlR7kBBHvfDpMY48cerunKrmDA1gi.png", alt: "store name", class: "w-12 object-contain" })), h("h2", { class: "section-title text-lg font-bold mb-4" }, salla.lang.get('pages.rating.rate_the_store'))), h("div", { class: "rating-wrap flex items-center flex justify-center mb-4" }, h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating())), h("textarea", { id: "storeReview", name: "comment", class: "form-input comment h-20", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "text-red-400 validation-message" }))));
-  }
-  renderProductsRating() {
-    return (h("section", { class: "step rating-section products-section transition-all duration-500 opacity-0 translate-x-3 hidden", "data-type": "product", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u0646\u062A\u062C\u0627\u062A" }, h("div", { class: "overflow-hidden" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form mb-8 last:mb-0", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars', { "item": item.title }) }, h("div", { class: "product-item" }, h("div", { class: "flex space-s-5" }, h("img", { src: item.image, alt: item.title, class: "w-18 h-14 object-cover rounded-md" }), h("div", { class: "flex-1" }, h("h3", { class: "section-title leading-5 mb-1.5 font-bold  md:text-sm" }, " ", item.title), h("div", { class: "rw-product-entry__rate" }, h("div", { class: "rating-wrap flex items-center space-s-4" }, h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating())), h("input", { type: "hidden", name: "order_id", value: this.orderId }), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.getOptimusRouteKey }), h("input", { type: "hidden", name: "type", value: "products" }), h("textarea", { "data-product-id": item.id, name: `products[${index}][comment]`, id: `productReview_${item.id}`, class: "comment form-input h-20 product-review", placeholder: salla.lang.get('pages.rating.write_product_rate') }), h("small", { class: "text-red-400 validation-message" }))))))))));
+    return (h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062A\u062C\u0631" }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') }, h("input", { type: "hidden", name: "order_id", value: this.orderId }), h("input", { type: "hidden", name: "type", value: "store" }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: this.order.storeLogo, alt: "store name", class: "s-rating-store-logo" })), h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), this.getStarsRating(), h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-validation-msg" }))));
   }
   renderShippingRating() {
-    return (h("section", { class: "step rating-section py-5 rounded-md transition-all duration-500 opacity-0 translate-x-3 hidden", "data-type": "shipping", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646" }, h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') }, h("input", { type: "hidden", name: "order_id", value: this.orderId }), h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }), h("input", { type: "hidden", name: "type", value: "shipping" }), h("div", { class: "flex flex-col items-center " }, h("div", { class: "w-28 h-28 overflow-hidden border border-gray-200 rounded-full flex items-center justify-center mb-4" }, h("img", { src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScPt4R6KaKDldrXb-9pUljFwL3m6A72BhN6p1qZJKprwC6VbCWC_8ASZgiJAoL_l7DepM&usqp=CAU", alt: "company name", class: "w-full h-full object-contain" })), h("h2", { class: "section-title text-lg font-bold mb-4" }, " ", salla.lang.get('pages.rating.rate_shipping'), " \u0627\u0631\u0627\u0645\u0643\u0633")), h("div", { class: "rating-wrap flex flex justify-center mb-4" }, h("form", { class: "rate-element ratFeedbackPresentere-element--has-label" }, this.getStarsRating())), h("textarea", { id: "shippingReview", name: "comment", class: "form-input comment h-20 mb-2", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "text-red-400 validation-message" }))));
+    return (h("section", { class: "s-rating-step", "data-type": "shipping", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646" }, h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') }, h("input", { type: "hidden", name: "order_id", value: this.orderId }), h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }), h("input", { type: "hidden", name: "type", value: "shipping" }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: this.order.shippingLogo, alt: "company name", class: "s-rating-shipping-logo" })), h("h2", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping'), " \u0627\u0631\u0627\u0645\u0643\u0633"), this.getStarsRating(), h("textarea", { id: "shippingReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-validation-msg" }))));
+  }
+  renderProductsRating() {
+    return (h("section", { class: "s-rating-step", "data-type": "product", "data-step-name": "\u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u0646\u062A\u062C\u0627\u062A" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars', { "item": item.title }) }, h("img", { src: item.image, alt: item.title, class: "s-rating-product-img" }), h("div", { class: "flex-1" }, h("h3", { class: "s-rating-product-title" }, " ", item.title), this.getStarsRating(), h("input", { type: "hidden", name: "order_id", value: this.orderId }), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.getOptimusRouteKey }), h("input", { type: "hidden", name: "type", value: "products" }), h("textarea", { "data-product-id": item.id, name: `products[${index}][comment]`, id: `productReview_${item.id}`, class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_product_rate') }), h("small", { class: "s-rating-validation-msg" }))))));
   }
   renderThanksView() {
-    return (h("div", { class: "thankyou-view px-8 text-center transition-all duration-500 opacity-0 translate-x-3 hidden" }, h("span", { class: "w-20 h-20 text-4xl inline-flex justify-center items-center bg-gray-50 rounded-full text-primary sicon-check-circle2" }), h("div", { class: "mt-4 mb-6" }, h("h3", { class: "font-bold" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "text-gray-400 text-sm", innerHTML: this.thanksMsg })), h("a", { href: "#!", onClick: () => this.hide(), class: "btn btn-primary h-10 flex-none px-8" }, "\u0639\u0648\u062F\u0629 \u0625\u0644\u064A \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0637\u0644\u0628"), h("time", { class: "close-time text-gray-400 block h-6 mt-3 text-sm" })));
+    return (h("div", { class: "s-rating-thanks s-rating-hidden" }, h("span", { class: "s-rating-thanks-icon sicon-check-circle2" }), h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "s-rating-thanks-msg", innerHTML: this.thanksMsg }), h("a", { href: "#!", onClick: () => this.hide(), class: "s-rating-thanks-btn" }, "\u0639\u0648\u062F\u0629 \u0625\u0644\u064A \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0637\u0644\u0628"), h("time", { class: "s-rating-thanks-time" })));
   }
   getStarsRating() {
-    return (h("div", { class: "mb-1" }, h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), this.stars.map((star) => h("button", { type: "submit", class: "btn btn--transparent px-1 text-2xl text-gray-400 btn--star", "data-star": star }, h("i", { class: "sicon-star2" })))));
+    return (h("form", { class: "s-rating-stars-element" }, h("div", { class: "mb-1" }, h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), [1, 2, 3, 4, 5].map((star) => h("button", { type: "submit", class: "btn btn--transparent px-1 text-2xl text-gray-400 btn--star", "data-star": star }, h("i", { class: "sicon-star2" }))))));
   }
   get host() { return getElement(this); }
 };

package/dist/twilight-components/salla-search-5338c0a1.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-8966d27f.js';
+import { H as Helper } from './Helper-81ac9a8c.js';
+
+const SallaSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    var _a, _b;
+    this.results = [];
+    /**
+     * Override search placeholder.
+     */
+    this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+    /**
+     * Override no results error message.
+     */
+    this.noResultsText = salla.lang.get('common.elements.no_options');
+    Helper.setHost(this.host);
+    this.buttonSlot = ((_a = Helper.getElement('[slot="button"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="sicon-search"></i>';
+    this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.getDefaultProductSlot();
+  }
+  onModalClose() {
+    Helper.getElement('.s-search-input').value = '';
+    this.results = [];
+    this.afterSearching();
+  }
+  getDefaultProductSlot() {
+    return '<a target="_blank" href={url} class="s-search-product-image-container">' +
+      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+      '</a>' +
+      '<div class="s-search-product-details">' +
+      '  <div class="s-search-product-name">{name}</div> <div class="s-search-product-price">{price}</div>' +
+      '</div>';
+  }
+  //todo:: reset data when closing
+  search(e) {
+    Helper.hideElement(this.noResults);
+    if (e.target.value.length === 0) {
+      this.results = [];
+      this.afterSearching();
+      return;
+    }
+    if (e.target.value.length <= 2) {
+      return;
+    }
+    //run loading spinner or stop it
+    Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    salla.search.api.search(e.target.value)
+      .then(response => this.results = response.results)
+      .catch(err => err !== 'Query Same As Previous!' ? this.results = [] : null)
+      .finally(() => this.afterSearching(/*isEmpty*/ false));
+  }
+  afterSearching(isEmpty = true) {
+    this.noResults.style.display = isEmpty || this.results.length > 0 ? 'none' : 'block';
+    Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => this.results.length)
+      .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: "s-search" }, h("button", { onClick: () => this.modal.show(), class: "s-search-button", innerHTML: this.buttonSlot }), h("salla-modal", { ref: modal => this.modal = modal }, h("div", { class: "s-search-container", slot: "body", ref: container => this.container = container }, h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), h("span", { class: "s-search-icon" }, h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+      _a.map(item => {
+        var _a;
+        return h("div", { class: "s-search-product", innerHTML: this.productSlot
+            .replace(/\{name\}/g, item.title)
+            .replace(/\{price\}/g, (_a = item.price) === null || _a === void 0 ? void 0 : _a.after) //todo:: get discounted price too
+            .replace(/\{url\}/g, item.url)
+            .replace(/\{image\}/g, item.thumb) });
+      }), h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText))))));
+  }
+  /**
+   * Run it one time after load
+   */
+  componentDidLoad() {
+    this.afterSearching();
+  }
+  get host() { return getElement(this); }
+};
+
+export { SallaSearch as S };

package/dist/twilight-components/salla-search.entry.js

@@ -1,2 +1,3 @@
-export { S as salla_search } from './salla-search-df1c9b54.js';
-import './index-8cf58712.js';
+export { S as salla_search } from './salla-search-5338c0a1.js';
+import './index-8966d27f.js';
+import './Helper-81ac9a8c.js';

package/dist/twilight-components/salla-verify.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-8cf58712.js';
+import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const SallaVerify = class {

package/dist/twilight-components/twilight-components.esm.js

@@ -1,4 +1,4 @@
-import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-8cf58712.js';
+import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-8966d27f.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -121,5 +121,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["salla-button",[[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["salla-modal",[[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[513,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64],"setTitle":[64]}]]],["multi-warehouse",[[4,"multi-warehouse",{"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]}]]],["salla-localization",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-product-availability",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating",[[0,"salla-rating",{"orderId":[2,"order-id"],"thanksMsg":[1,"thanks-msg"],"isStoreRating":[4,"is-store-rating"],"isProductsRating":[4,"is-products-rating"],"isShippingRating":[4,"is-shipping-rating"],"show":[64],"hide":[64]}]]],["salla-verify",[[0,"salla-verify"]]],["salla-login",[[0,"salla-login"]]],["salla-search",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
+  return bootstrapLazy([["salla-button",[[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["salla-modal",[[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[513,"modal-width"],"visible":[516],"subTitleFirst":[4,"sub-title-first"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"show":[64],"hide":[64],"setTitle":[64]}]]],["salla-branches",[[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]}]]],["salla-localization",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-product-availability",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating",[[0,"salla-rating",{"orderId":[2,"order-id"],"thanksMsg":[1,"thanks-msg"],"isStoreRating":[4,"is-store-rating"],"isProductsRating":[4,"is-products-rating"],"isShippingRating":[4,"is-shipping-rating"],"show":[64],"hide":[64]}]]],["salla-verify",[[0,"salla-verify"]]],["salla-login",[[0,"salla-login"]]],["salla-search",[[0,"salla-search",{"placeholder":[1],"noResultsText":[1,"no-results-text"],"results":[32]},[[0,"close","onModalClose"]]]]]], options);
 });

package/dist/types/components/{multi-warehouse/multi-warehouse.d.ts → salla-branches/salla-branches.d.ts}

@@ -1,4 +1,4 @@
-export declare class MultiWarehouse {
+export declare class SallaBranches {
   open: boolean;
   selected: number;
   isOpenedBefore: string;

package/dist/types/components/salla-modal/salla-modal.d.ts

@@ -6,9 +6,12 @@ export declare class SallaModal {
   isClosable: boolean;
   modalWidth: string;
   visible: boolean;
+  subTitleFirst: boolean;
   subTitle: string;
   icon: string;
+  imageIcon: string;
   private title;
+  private overlay;
   host: HTMLElement;
   ready: EventEmitter;
   close: EventEmitter;

package/dist/types/components/salla-rating/salla-rating.d.ts

@@ -1,7 +1,5 @@
 export declare class SallaRating {
-  nextBtn: HTMLSallaButtonElement;
   constructor();
-  stars: Number[];
   order: any;
   orderId: number;
   thanksMsg: string;
@@ -10,6 +8,7 @@ export declare class SallaRating {
   isShippingRating: boolean;
   private ratingChain;
   private stepsCount;
+  private nextBtn;
   private modal;
   host: HTMLElement;
   show(): Promise<HTMLElement>;
@@ -17,19 +16,19 @@ export declare class SallaRating {
   componentWillLoad(): void;
   componentDidRender(): void;
   initiateRating(): void;
+  private getData;
   private handleWizard;
   private showActiveStep;
   private setModalHeight;
+  private starsRating;
+  private highlightSelectedStars;
   private sendRating;
   private sendFeedback;
   private ratingValidation;
-  private getData;
-  private starsRating;
-  private highlightSelectedStars;
   render(): any;
   renderStoreRating(): any;
-  renderProductsRating(): any;
   renderShippingRating(): any;
+  renderProductsRating(): any;
   renderThanksView(): any;
   getStarsRating(): any;
 }

package/dist/types/components/salla-search/salla-search.d.ts

@@ -1,26 +1,29 @@
 import { HTMLStencilElement } from '../../stencil-public-runtime';
 export declare class SallaSearch {
-  searchTerm: string;
-  results: string[];
-  fetchStatus: string;
-  showResult: boolean;
-  showModal: boolean;
+  constructor();
+  private readonly buttonSlot;
+  private readonly productSlot;
+  private modal;
+  private container;
+  private searchIcon;
+  private noResults;
+  host: HTMLStencilElement;
+  results: any[];
   /**
-   * The text to overwrite search placeholder.
+   * Override search placeholder.
    */
-  searchPlaceholder: string;
+  placeholder: string;
   /**
-   * The text to overwrite no results text.
+   * Override no results error message.
    */
   noResultsText: string;
-  private hasSearchIconSlot;
-  private hasProductTemplateSlot;
-  private productTemplateHtml;
-  hostElement: HTMLStencilElement;
-  componentWillLoad(): void;
-  private handleChange;
-  private getProduct;
-  private openSearch;
-  private closeSearch;
+  onModalClose(): void;
+  private getDefaultProductSlot;
+  private search;
+  private afterSearching;
   render(): any;
+  /**
+   * Run it one time after load
+   */
+  componentDidLoad(): void;
 }

package/dist/types/components.d.ts

@@ -6,7 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
-    interface MultiWarehouse {
+    interface SallaBranches {
         "branches": any[];
         "browseProductsFrom": string;
         "current": number;
@@ -40,11 +40,13 @@ export namespace Components {
         "error": boolean;
         "hide": () => Promise<HTMLElement>;
         "icon": string;
+        "imageIcon": string;
         "isClosable": boolean;
         "modalWidth": string;
         "setTitle": (title: any) => Promise<HTMLElement>;
         "show": () => Promise<HTMLElement>;
         "subTitle": string;
+        "subTitleFirst": boolean;
         "success": boolean;
         "visible": boolean;
     }
@@ -75,23 +77,23 @@ export namespace Components {
     }
     interface SallaSearch {
         /**
-          * The text to overwrite no results text.
+          * Override no results error message.
          */
         "noResultsText": string;
         /**
-          * The text to overwrite search placeholder.
+          * Override search placeholder.
          */
-        "searchPlaceholder": string;
+        "placeholder": string;
     }
     interface SallaVerify {
     }
 }
 declare global {
-    interface HTMLMultiWarehouseElement extends Components.MultiWarehouse, HTMLStencilElement {
+    interface HTMLSallaBranchesElement extends Components.SallaBranches, HTMLStencilElement {
     }
-    var HTMLMultiWarehouseElement: {
-        prototype: HTMLMultiWarehouseElement;
-        new (): HTMLMultiWarehouseElement;
+    var HTMLSallaBranchesElement: {
+        prototype: HTMLSallaBranchesElement;
+        new (): HTMLSallaBranchesElement;
     };
     interface HTMLSallaButtonElement extends Components.SallaButton, HTMLStencilElement {
     }
@@ -142,7 +144,7 @@ declare global {
         new (): HTMLSallaVerifyElement;
     };
     interface HTMLElementTagNameMap {
-        "multi-warehouse": HTMLMultiWarehouseElement;
+        "salla-branches": HTMLSallaBranchesElement;
         "salla-button": HTMLSallaButtonElement;
         "salla-localization": HTMLSallaLocalizationElement;
         "salla-login": HTMLSallaLoginElement;
@@ -154,7 +156,7 @@ declare global {
     }
 }
 declare namespace LocalJSX {
-    interface MultiWarehouse {
+    interface SallaBranches {
         "branches"?: any[];
         "browseProductsFrom"?: string;
         "current"?: number;
@@ -178,11 +180,13 @@ declare namespace LocalJSX {
     interface SallaModal {
         "error"?: boolean;
         "icon"?: string;
+        "imageIcon"?: string;
         "isClosable"?: boolean;
         "modalWidth"?: string;
         "onClose"?: (event: CustomEvent<any>) => void;
         "onReady"?: (event: CustomEvent<any>) => void;
         "subTitle"?: string;
+        "subTitleFirst"?: boolean;
         "success"?: boolean;
         "visible"?: boolean;
     }
@@ -210,18 +214,18 @@ declare namespace LocalJSX {
     }
     interface SallaSearch {
         /**
-          * The text to overwrite no results text.
+          * Override no results error message.
          */
         "noResultsText"?: string;
         /**
-          * The text to overwrite search placeholder.
+          * Override search placeholder.
          */
-        "searchPlaceholder"?: string;
+        "placeholder"?: string;
     }
     interface SallaVerify {
     }
     interface IntrinsicElements {
-        "multi-warehouse": MultiWarehouse;
+        "salla-branches": SallaBranches;
         "salla-button": SallaButton;
         "salla-localization": SallaLocalization;
         "salla-login": SallaLogin;
@@ -236,7 +240,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "multi-warehouse": LocalJSX.MultiWarehouse & JSXBase.HTMLAttributes<HTMLMultiWarehouseElement>;
+            "salla-branches": LocalJSX.SallaBranches & JSXBase.HTMLAttributes<HTMLSallaBranchesElement>;
             "salla-button": LocalJSX.SallaButton & JSXBase.HTMLAttributes<HTMLSallaButtonElement>;
             "salla-localization": LocalJSX.SallaLocalization & JSXBase.HTMLAttributes<HTMLSallaLocalizationElement>;
             "salla-login": LocalJSX.SallaLogin & JSXBase.HTMLAttributes<HTMLSallaLoginElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "license": "MIT",
   "keywords": [
     "twilight",

package/dist/twilight-components/salla-search-df1c9b54.js

@@ -1,95 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-8cf58712.js';
-
-const SallaSearch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.fetchStatus = '';
-    this.showModal = false;
-    /**
-     * The text to overwrite search placeholder.
-     */
-    this.searchPlaceholder = 'Search here ...';
-    /**
-     * The text to overwrite no results text.
-     */
-    this.noResultsText = 'There are no results at the moment';
-    this.handleChange = event => {
-      this.searchTerm = event.target.value;
-      this.fetchStatus = 'loading';
-      this.showResult = false;
-      this.results = [];
-      if (this.searchTerm.length > 2) {
-        window.salla.search.api
-          .search(this.searchTerm)
-          .then(response => response)
-          .then(response => {
-          console.log('response', response);
-          this.fetchStatus = 'idle';
-          this.results = response.results;
-          this.showResult = true;
-          if (this.results.length < 1) {
-            this.fetchStatus = 'error';
-          }
-        })
-          .catch(err => {
-          this.showResult = true;
-          this.fetchStatus = 'error';
-          console.log(err);
-        });
-      }
-    };
-    this.openSearch = () => {
-      this.searchTerm = '';
-      this.fetchStatus = '';
-      this.results = [];
-      this.showModal = true;
-      window.scrollTo(0, 0);
-      document.getElementsByTagName('html')[0].style.position = 'fixed';
-      document.getElementsByTagName('html')[0].style.overflowY = 'scroll';
-    };
-    this.closeSearch = () => {
-      this.searchTerm = '';
-      this.fetchStatus = '';
-      this.results = [];
-      document.getElementsByTagName('html')[0].style.position = 'static';
-      document.getElementsByTagName('html')[0].style.overflowY = 'auto';
-      this.showModal = false;
-    };
-  }
-  componentWillLoad() {
-    this.hasSearchIconSlot = !!this.hostElement.querySelector('[slot="search-icon"]');
-    this.hasProductTemplateSlot = !!this.hostElement.querySelector('[slot="product-template"]');
-    if (this.hasProductTemplateSlot) {
-      this.productTemplateHtml = this.hostElement.querySelector('[slot="product-template"]').innerHTML;
-    }
-  }
-  getProduct(item) {
-    var _a, _b;
-    // todo use art-template  https://aui.github.io/art-template/docs/.
-    if (this.hasProductTemplateSlot) {
-      //slot scope
-      let product = this.productTemplateHtml
-        .replace("{title}", item.title)
-        .replace("{price}", (_a = item.price) === null || _a === void 0 ? void 0 : _a.after)
-        .replace("{url}", item.url)
-        .replace("{thumb}", item.thumb);
-      return (h("div", { class: "s-search-product", innerHTML: product }));
-    }
-    else {
-      return (h("div", { class: "s-search-product" }, h("a", { target: "_blank", href: item.url, class: "s-search-product-image-container" }, h("img", { class: "s-search-product-image", src: item.thumb })), h("div", { class: "s-search-product-details" }, h("div", { class: "s-search-product-title" }, item.title), h("div", { class: "s-search-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
-    }
-  }
-  render() {
-    return (h(Host, { class: "s-search" }, h("button", { type: "button", onClick: this.openSearch, class: "s-search-search-button-icon" }, this.hasSearchIconSlot ? (h("slot", { name: "search-icon" })) : (h("i", { class: "sicon-search font-bold" }))), this.showModal && (h("div", { class: "s-search-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } }, h("div", { class: "s-search-wrapper", onClick: this.closeSearch }, h("div", { class: "s-search-inner", onClick: e => {
-        e.stopPropagation();
-      } }, h("div", { class: "s-search-search-box-container" }, h("div", { class: !this.showResult
-        ? 's-search-search-box-inner'
-        : 's-search-search-box-inner-open' }, h("input", { class: "s-search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }), this.fetchStatus != 'loading' ? (h("button", { class: "s-search-search-icon" }, h("i", { class: "sicon-search" }))) : (h("span", { class: "s-search-spinner" }, h("span", { class: "s-search-spinner-loader" }))))), h("div", { class: "s-search-search-results" }, this.fetchStatus === 'error' && (h("p", { class: "s-search-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)), this.results &&
-      this.results.map(item => {
-        return this.getProduct(item);
-      }))))))));
-  }
-  get hostElement() { return getElement(this); }
-};
-
-export { SallaSearch as S };