@salla.sa/twilight-components 1.0.12 → 1.0.13

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

@@ -1 +1,3 @@
-export{S as SallaLogin}from"./p-36c87e2e.js";export{S as SallaSearch}from"./p-8a2410e6.js";import"./p-d1ef2268.js";
+export { S as SallaLogin } from './salla-login-97e0a9ab.js';
+export { S as SallaSearch } from './salla-search-df1c9b54.js';
+import './index-8cf58712.js';

package/dist/twilight-components/multi-warehouse.entry.js

@@ -0,0 +1,89 @@
+import { r as registerInstance, h, g as getElement } from './index-8cf58712.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}";
+
+// 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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.open = false;
+    this.isOpenedBefore = sessionStore.get("multi-warehouse-opened-before");
+    this.displayAs = 'default';
+    this.browseProductsFrom = 'all';
+    this.branches = [
+      { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
+      { id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
+    ];
+    this.current = 1;
+    this.currentBranch = (prop) => {
+      return this.branches.filter((el) => el.id == this.current)[0][prop];
+    };
+    this.statusColor = (branch = null) => {
+      return branch ?
+        branch.limited ? 'text-red-400' : branch.available ? 'text-green-500' : 'text-gray-400'
+        :
+          this.currentBranch('limited') ? 'text-red-400' : this.currentBranch('available') ? 'text-green-500' : 'text-gray-400';
+    };
+    this.isChoiceable = () => {
+      return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
+    };
+    this.formTitle = () => {
+      return this.isChoiceable() ?
+        'توفر المنتج في الفروع الآخرى'
+        : 'التسوق من فرع آخر';
+    };
+    salla.event.on('branches::show', () => this.show());
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  handelChange(event) {
+    this.selected = event.target.value;
+  }
+  handleSubmit() {
+    this.btn.load().then(() => {
+      setTimeout(() => location.reload(), 2000);
+    });
+    sessionStore.set("multi-warehouse-opened-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,
+          '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 ? '' : 'مُغلق')
+        :
+          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'))))
+      : ''));
+  }
+  componentDidRender() {
+    if (!this.isOpenedBefore && this.displayAs == 'popup') {
+      this.show();
+    }
+  }
+  get host() { return getElement(this); }
+};
+MultiWarehouse.style = multiWarehouseCss;
+
+export { MultiWarehouse as multi_warehouse };

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

@@ -0,0 +1,70 @@
+import { r as registerInstance, h, g as getElement } from './index-8cf58712.js';
+import { H as Helper } from './Helper-81ac9a8c.js';
+
+const sallaButtonCss = ":host{display:block}";
+
+const SallaButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.btnStyle = 'primary'; // outline, outline-primary ,danger
+    this.loading = false;
+    this.disabled = false;
+    this.loaderPosition = 'before';
+    this.wide = false;
+    this.hostAttributes = {};
+    //============= Initiate Button Attributes =============//
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+    }
+    this.hostAttributes.type = this.hostAttributes.type || 'button';
+    this.hostAttributes.class += ' s-button-btn btn--has-loading '
+      + 'btn-' + this.btnStyle
+      + (this.wide ? ' s-button-btn-wide ' : '')
+      + 'loader-' + this.loaderPosition
+      + (this.loaderPosition == 'before' ? ' flex-row-reverse' : '');
+    // if(this.hostAttributes.onclick){
+    //   this.hostAttributes.onclick=eval(this.hostAttributes.onclick);
+    // }
+    delete this.hostAttributes['btn-style'];
+    delete this.hostAttributes['id'];
+  }
+  async load() {
+    if (this.loaderPosition == 'center')
+      this.host.querySelector('.btn-text').classList.add('opacity-0');
+    this.host.setAttribute('loading', '');
+    return this.host;
+  }
+  async stop() {
+    this.host.removeAttribute('loading');
+    return this.host;
+  }
+  async disable() {
+    this.host.setAttribute('disabled', '');
+  }
+  async enable() {
+    this.host.removeAttribute('disabled');
+  }
+  handleVisible(newKind, oldKind) {
+    this.btn.classList.remove('btn-' + oldKind);
+    this.btn.classList.add('btn-' + newKind);
+  }
+  handleLoading(newVal) {
+    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: {
+        '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',
+      } }) : ''));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "btnStyle": ["handleVisible"],
+    "loading": ["handleLoading"]
+  }; }
+};
+SallaButton.style = sallaButtonCss;
+
+export { SallaButton as salla_button };

package/dist/{esm → twilight-components}/salla-localization.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-643344dc.js';
+import { r as registerInstance, h, g as getElement } from './index-8cf58712.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const SallaLocalization = class {
@@ -7,8 +7,9 @@ const SallaLocalization = class {
     var _a, _b;
     this.language = salla.config.language;
     this.currency = salla.config.currency;
-    this.languages = salla.lang.get('common.titles.language');
-    this.currencies = salla.lang.get('common.titles.currency');
+    //todo::
+    this.languagesTitle = salla.lang.get('common.titles.language');
+    this.currenciesTitle = salla.lang.get('common.titles.currency');
     this.ok = salla.lang.get('common.elements.ok');
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
@@ -21,7 +22,7 @@ const SallaLocalization = class {
      * Because scoped templates not supported in stencil );
      * we made a workaround to pass language & currency attributes, then replace names in rendering
      */
-    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for"lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
     this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
   }
   async show() {
@@ -48,16 +49,16 @@ const SallaLocalization = class {
   }
   render() {
     return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal }, h("slot", { name: "header" }, h("div", { slot: "header" })), h("div", { class: "s-localization-inner" }, salla.config.languages
-      ? h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.languages), h("fieldset", { class: "s-localization-fieldset" }, h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')), h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { id: "language-slot", innerHTML: this.languageSlot
+      ? h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.languagesTitle), h("fieldset", { class: "s-localization-fieldset" }, h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { id: "language-slot", innerHTML: this.languageSlot
           .replace(/\{name\}/g, lang.name)
           .replace(/\{code\}/g, lang.code)
           .replace(/\{country_code\}/g, lang.country_code) }))))))
       : '', salla.config.currencies
-      ? h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.currencies), h("fieldset", { class: "s-localization-fieldset" }, h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')), h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), h("div", { id: "currency-slot", innerHTML: this.currencySlot
+      ? h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.currenciesTitle), h("fieldset", { class: "s-localization-fieldset" }, h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), h("div", { id: "currency-slot", innerHTML: this.currencySlot
           .replace(/\{name\}/g, currency.name)
           .replace(/\{code\}/g, currency.code)
           .replace(/\{country_code\}/g, currency.country_code) }))))))
-      : ''), h("p", { slot: "footer" }, h("slot", { name: "footer" }, h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.submit(), class: "w-full" }, this.ok)))));
+      : ''), h("p", { slot: "footer" }, h("slot", { name: "footer" }, h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok)))));
   }
   /**
    * to reduce dom levels we will move slot data into the parent dom

package/dist/{esm/salla-login-0e85b2d8.js → twilight-components/salla-login-97e0a9ab.js}

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

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

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

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

@@ -0,0 +1,85 @@
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-8cf58712.js';
+import { H as Helper } from './Helper-81ac9a8c.js';
+
+const SallaModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ready = createEvent(this, "ready", 7);
+    this.close = createEvent(this, "close", 7);
+    this.error = false;
+    this.success = false;
+    this.isClosable = true;
+    this.modalWidth = 'w-96'; //todo use friendly names
+    this.visible = false;
+    this.subTitle = '';
+    this.icon = '';
+    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');
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.close.emit();
+      return;
+    }
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.ready.emit();
+  }
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  async setTitle(title) {
+    this.title = title;
+    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)
+      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+    if (!isOpen) {
+      setTimeout(() => this.host.classList.add('hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  //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 ?
+      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: {
+          's-modal-icon': true,
+          's-modal-bg-error': this.error,
+          's-modal-bg-success': this.success,
+          's-modal-bg-normal': !this.error && !this.success
+        } }, h("i", { class: {
+          [this.icon]: true,
+          '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" })))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "visible": ["handleVisible"]
+  }; }
+};
+
+export { SallaModal as salla_modal };

package/dist/{esm → twilight-components}/salla-product-availability.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-643344dc.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-8cf58712.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const SallaProductAvailability = class {
@@ -7,15 +7,16 @@ const SallaProductAvailability = class {
     this.isUser = Helper.isUser();
     this.buttonText = salla.lang.get('pages.products.notify_availability');
     this.countryCode = salla.config.country_code || 'SA';
-    this.subscribe = salla.lang.get('common.elements.submit');
-    this.cancel = salla.lang.get('common.elements.cancel');
+    this.subscribeText = salla.lang.get('common.elements.submit');
+    this.cancelText = salla.lang.get('common.elements.cancel');
     this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.emailLabel = salla.lang.get('common.elements.email');
     this.mobilePlaceholder = salla.lang.get('common.elements.mobile_placeholder');
     this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
     this.productId = salla.config.page.id;
-    this.subscribed = salla.lang.get('pages.products.notify_availability_success');
+    this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
+    this.isSubscribed = false;
     if (this.isUser) {
       return;
     }
@@ -29,10 +30,7 @@ const SallaProductAvailability = class {
   async submit() {
     if (this.isUser) {
       return salla.api.product.availabilitySubscribe(this.productId)
-        .then(() => {
-        salla.success(this.subscribed);
-      }) //no need to wait until finishing alert animation
-        .then(() => this.host.remove());
+        .then(() => this.isSubscribed = true);
     }
     let data = { id: this.productId, country_code: this.countryCode };
     if (this.mobile.value !== '') {
@@ -44,26 +42,25 @@ const SallaProductAvailability = class {
     return this.btn.load()
       .then(() => this.btn.disable())
       .then(() => salla.api.product.availabilitySubscribe(data))
-      .then(() => {
-      salla.success(this.subscribed);
-    }) //no need to wait until finishing alert animation
+      .then(() => this.isSubscribed = true) //no need to wait until finishing alert animation
       .then(() => this.btn.stop())
       .then(() => this.modal.hide())
-      .then(() => this.host.remove())
       .catch(() => this.btn.stop() && this.btn.enable());
   }
   render() {
-    return (h(Host, null, h("slot", null, h("salla-button", { onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser ? '' : this.renderModal()));
+    return (h(Host, null, this.isSubscribed
+      ? h("div", { class: "s-product-availability-subscribed" }, this.subscribedMessage)
+      : h("slot", null, h("salla-button", { wide: true, onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser || this.isSubscribed ? '' : this.renderModal()));
   }
   renderModal() {
-    return (h("salla-modal", { ref: modal => this.modal = modal, id: "product-availability-modal", title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", modalWidth: "w-full" }, h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+    return (h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", modalWidth: "w-full" }, h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       h("label", { class: "s-product-availability-label" }, this.emailLabel),
       h("input", { class: "s-product-availability-input", placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" })
     ] : '', this.channels_.includes('sms') ? [
       h("label", { class: "s-product-availability-label" }, this.mobileLabel),
       h("input", { class: "s-product-availability-input", placeholder: this.mobilePlaceholder, ref: el => this.mobile = el, type: "text" }),
       h("input", { type: "hidden", value: this.countryCode }),
-    ] : ''), h("div", { slot: "footer", class: "common-anime flex justify-between space-s-4" }, h("salla-button", { ref: btn => this.btn = btn, class: "w-full", onClick: () => this.submit() }, this.subscribe), h("salla-button", { class: "w-full", color: "outline" }, this.cancel))));
+    ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.subscribeText), h("salla-button", { wide: true, "btn-style": "outline" }, this.cancelText))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/{esm → twilight-components}/salla-rating.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-643344dc.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-8cf58712.js';
 import { H as Helper } from './Helper-81ac9a8c.js';
 
 const sallaRatingCss = ":host{display:block}";
@@ -81,7 +81,6 @@ const SallaRating = class {
         }
       }, 1000);
       this.host.querySelector('.wizard-footer').classList.add('opacity-0', 'pointer-events-0');
-      this.host.querySelector('.s-order-rating-title').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');
@@ -93,30 +92,32 @@ const SallaRating = class {
   }
   // handle wizard
   handleWizard() {
-    let currentIndex = 0, steps = document.querySelectorAll(".step"), dots = document.querySelectorAll(".step-dot");
+    let index = 0, steps = document.querySelectorAll(".step"), dots = document.querySelectorAll(".step-dot");
     // show first step
-    Helper.toggleElement(steps[0], ['opacity-1', 'translate-x-0'], ['opacity-0', 'translate-x-3', 'hidden'], () => true);
-    console.log("🚀 ~ file: order-rating.tsx ~ line 129 ~ OrderRating ~ handleWizard ~ steps[0]", 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
     Helper.onClick("#prev-btn", () => {
-      currentIndex > 0 && currentIndex--;
-      this.showActiveStep(steps, dots, currentIndex);
-      currentIndex == 0 && Helper.toggle('#prev-btn', ['pointer-events-none', 'opacity-0'], 'block', () => true);
+      index > 0 && index--;
+      this.showActiveStep(steps, dots, index);
+      index == 0 && Helper.toggle('#prev-btn', ['pointer-events-none', 'opacity-0'], 'block', () => true);
     });
     Helper.onClick("#next-btn", () => {
       this.ratingValidation();
-      if (currentIndex == this.stepsCount - 1) {
+      if (index == this.stepsCount - 1) {
         salla.event.dispatch("submit::order-rating");
       }
       else {
-        currentIndex < this.stepsCount - 1 && currentIndex++;
-        this.showActiveStep(steps, dots, currentIndex);
+        index < this.stepsCount - 1 && index++;
+        this.showActiveStep(steps, dots, index);
         Helper.toggle('#prev-btn', 'block', ['pointer-events-none', 'opacity-0'], () => true);
       }
     });
   }
   showActiveStep(steps, dots, currentIndex) {
     Helper.toggle('.step-dot', 'bg-gray-200', 'bg-primay', () => true);
-    Helper.toggleElement(dots[currentIndex], 'bg-primary', 'bg-gray-200', () => 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);
@@ -205,8 +206,7 @@ const SallaRating = class {
   // getdata
   getData() {
     salla.api.order.endpointsMethods.details = 'get';
-    // salla.order.api.details(this.orderId).then(data => console.log(''));
-    console.log("🚀 ~ file", salla.order.api.details(this.orderId));
+    salla.order.api.details(salla.config.page.id).then(data => console.log(''));
   }
   // handle star rating
   starsRating() {
@@ -274,13 +274,13 @@ const SallaRating = class {
       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")))));
   }
   renderStoreRating() {
-    return (h("section", { class: "step rating-section active transition-all duration-500", "data-type": "store" }, 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" }))));
+    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" }, 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: "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" }))))))))));
   }
   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" }, 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: "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" }))));
   }
   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" })));

package/dist/{esm/salla-search-615b8f94.js → twilight-components/salla-search-df1c9b54.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-643344dc.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-8cf58712.js';
 
 const SallaSearch = class {
   constructor(hostRef) {

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

@@ -0,0 +1,2 @@
+export { S as salla_search } from './salla-search-df1c9b54.js';
+import './index-8cf58712.js';

package/dist/{esm → twilight-components}/salla-verify.entry.js

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