@salla.sa/twilight-components 1.0.19 → 1.0.20

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

@@ -1 +1,4 @@
-export{S as SallaLogin}from"./p-160062c6.js";export{S as SallaSearch}from"./p-924e3c88.js";import"./p-e8965b01.js";import"./p-47f17d3b.js";
+export { S as SallaLogin } from './salla-login-57b18c2c.js';
+export { S as SallaSearch } from './salla-search-30fec1e8.js';
+import './index-9c087700.js';
+import './Helper-d07ebbc7.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-092659c7.js';
+import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
 
 const sallaBranchesCss = ":host{display:block}";
 

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

@@ -0,0 +1,75 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
+
+const sallaButtonCss = ":host{display:block}";
+
+const SallaButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.btnStyle = 'primary';
+    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'
+      + ' s-button-' + this.btnStyle
+      + (this.wide ? ' s-button-wide ' : '')
+      + ' loader-' + this.loaderPosition
+      + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
+    delete this.hostAttributes['btn-style'];
+    delete this.hostAttributes['id'];
+    if (this.wide) {
+      this.host.classList.add('s-button-wide');
+    }
+  }
+  async load() {
+    if (this.loaderPosition == 'center')
+      this.text.classList.add('s-button-hide');
+    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) {
+    //todo::use united styles
+    this.btn.classList.remove('btn-' + oldKind);
+    this.btn.classList.add('btn-' + newKind);
+  }
+  handleLoading(newVal) {
+    //todo::use united styles
+    Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
+  }
+  render() {
+    return (
+    //TODO:: use HOST then fake button behaviours
+    h(Host, { class: "s-button-host-tag" }, h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), h("span", { class: "s-button-text", ref: el => this.text = el }, h("slot", null)), this.loading ? h("span", { class: {
+        //todo::use united styles
+        's-button-loader': true,
+        's-button-loader-start': this.loaderPosition === 'start',
+        's-button-loader-end': this.loaderPosition === 'end',
+        's-button-loader-center': 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-092659c7.js';
+import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaLocalization = class {

package/dist/{esm/salla-login-38586400.js → twilight-components/salla-login-57b18c2c.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-092659c7.js';
+import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const sallaLoginCss = "salla-verify{display:block}";

package/dist/{cjs/salla-login-008cc893.js → twilight-components/salla-login-663f8d42.js}

@@ -1,13 +1,11 @@
-'use strict';
-
-const index = require('./index-4b8b3ffe.js');
-const Helper = require('./Helper-fcea994c.js');
+import { r as registerInstance, h, g as getElement } from './index-799f93d3.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
 
 const sallaLoginCss = "salla-verify{display:block}";
 
 const SallaLogin = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     this.regType = 'sms';
     this.isLoginByMail = true;
     this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
@@ -53,8 +51,8 @@ const SallaLogin = class {
     return this.modal.show();
   }
   showTab(tab) {
-    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
-    setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
+    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
+    setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
     setTimeout(() => { this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
     if ([this.tab2, this.tab3].includes(tab)) {
       this.regType = tab === this.tab2 ? 'sms' : 'email';
@@ -62,13 +60,13 @@ const SallaLogin = class {
     let isRegistrationTab = tab == this.tab5;
     this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
-      Helper.Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'sms')
+      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'sms')
         .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
     }
     return this;
   }
   loginByEmail() {
-    if (!Helper.Helper.isValidEmail(this.email.value)) {
+    if (!Helper.isValidEmail(this.email.value)) {
       this.email.classList.add('s-has-error');
       this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
       return;
@@ -113,13 +111,13 @@ const SallaLogin = class {
     }));
   }
   render() {
-    return (index.h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-wrapper" }, this.isLoginByMail ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, index.h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), index.h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, index.h("i", { class: "s-login-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-main-btn-text" }, this.smsLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, index.h("i", { class: "s-login-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-main-btn-text" }, this.emailLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
-      : '', index.h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", null), index.h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input  tel-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? index.h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), index.h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', index.h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), index.h("div", { ref: tab => this.tab5 = tab }, index.h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), index.h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), index.h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), index.h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), index.h("div", { ref: el => this.regMobileBlock = el }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("div", { ref: el => this.regEmailBlock = el }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
+    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isLoginByMail ?
+      h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, h("i", { class: "s-login-main-btn-icon sicon-phone" }), h("span", { class: "s-login-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, h("i", { class: "s-login-main-btn-icon sicon-mail" }), h("span", { class: "s-login-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
+      : '', h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", null), h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input  tel-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
+      h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), h("div", { ref: tab => this.tab5 = tab }, h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), h("div", { ref: el => this.regMobileBlock = el }, h("label", { class: "s-login-label" }, this.mobileLabel), h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("div", { ref: el => this.regEmailBlock = el }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
   }
-  get host() { return index.getElement(this); }
+  get host() { return getElement(this); }
 };
 SallaLogin.style = sallaLoginCss;
 
-exports.SallaLogin = SallaLogin;
+export { SallaLogin as S };

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

@@ -0,0 +1,3 @@
+export { S as salla_login } from './salla-login-57b18c2c.js';
+import './index-9c087700.js';
+import './Helper-d07ebbc7.js';

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

@@ -0,0 +1,113 @@
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-9c087700.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
+
+const SallaModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.modalOpened = createEvent(this, "modalOpened", 7);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    var _a;
+    //todo:: unite three colors (error, success, primary) in one prop
+    this.error = false;
+    this.success = false;
+    this.primary = false;
+    this.isClosable = true;
+    this.width = 'md';
+    this.visible = false;
+    this.isLoading = 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', 's-modal-' + this.width);
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.modalClosed.emit();
+      return;
+    }
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.modalOpened.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;
+  }
+  async loading() {
+    this.isLoading = true;
+    return this.host;
+  }
+  async stopLoading() {
+    this.isLoading = false;
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    Helper
+      // .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.host.querySelector('[slot=body]') || this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+      //todo:: use united class names
+      .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 (
+    //todo:: use suitable class name instead of hidden
+    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 ' + 's-modal-' + this.width, slot: "body" }, this.isLoading
+      ? h("span", null, "Loading...")
+      : [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
+          //todo:: remove cursor-pointer
+          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,
+              's-modal-bg-primary': this.primary
+            } }, h("i", { class: {
+              [this.icon]: true,
+              's-modal-text-error': this.error,
+              's-modal-text-success': this.success,
+            } }))
+          : 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 {
+    "visible": ["handleVisible"]
+  }; }
+};
+
+export { SallaModal as salla_modal };

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

@@ -0,0 +1,75 @@
+import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
+
+const SallaOffer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    var _a, _b, _c;
+    this.offer = null;
+    Helper.setHost(this.host);
+    this.headerSlot = ((_a = Helper.getElement('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<b class="s-offer-title">{name}</b><h3 class="s-offer-subtitle">{message}</h3>';
+    this.categorySlot = ((_b = Helper.getElement('[slot="category"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
+    this.productSlot = ((_c = Helper.getElement('[slot="product"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || this.defaultProductSlot();
+    salla.offer.event.onExisted(data => {
+      //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
+      if (salla.localStore.get('remember-offer-' + data.offer.offer_id)) {
+        salla.log('User selected to don\'t show this offer again.');
+        return;
+      }
+      this.show(data.product_id);
+    });
+  }
+  async show(productId) {
+    return this.modal.show()
+      .then(() => salla.api.offer.details(productId))
+      //TODO:: make sure there is only one offer
+      .then(response => this.offer = response.data[0]);
+  }
+  rememberMe(event) {
+    salla.localStore.set('remember-offer-' + this.offer.id, event.target.checked);
+  }
+  addItem() {
+    // this here, is sallaButton
+    this['load']();
+    return salla.cart.api
+      .quickAdd(this['dataset'].id)
+      .finally(() => this['stop']());
+  }
+  defaultProductSlot() {
+    return '<a href={url} class="s-offer-product-image"><img class="s-offer-product-img" src="{image}" /></a>' +
+      '<div class="s-offer-product-info">' +
+      '   <a href={url} class="s-offer-product-name">{name}</a>' +
+      '   <div class="s-offer-product-price">{price}</div>' +
+      '</div>';
+  }
+  render() {
+    var _a, _b;
+    return h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+      ? [h("div", { class: "s-offer-header", innerHTML: this.headerSlot
+            .replace(/\{name\}/g, this.offer.name)
+            .replace(/\{message\}/g, this.offer.message) }),
+        h("div", { class: "s-offer-body" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
+          ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-badge", innerHTML: this.categorySlot
+              .replace(/\{name\}/g, category.name)
+              .replace(/\{url\}/g, category.urls.customer) }))
+          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-product", id: 'product_' + product.id, innerHTML: this.productSlot
+              .replace(/\{name\}/g, product.name)
+              .replace(/\{url\}/g, product.url)
+              .replace(/\{image\}/g, product.thumbnail)
+              .replace(/\{price\}/g, product.has_special_price
+              ? salla.money(product.sale_price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
+              : salla.money(product.price)) }, h("salla-button", { "btn-style": 'outline-primary', "data-id": product.id, onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart'))))),
+        h("div", { class: "s-offer-footer", slot: "footer" }, this.offer.expiry_date ?
+          h("p", { class: "s-offer-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.expiry_date)
+          : '', h("label", { class: "s-offer-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }), "\u00A0 ", salla.lang.get('common.remember_my_choice'))),
+      ] : '');
+  }
+  componentDidRender() {
+    //todo:: know from where there is hidden attributes to the doms🤔
+    //todo:: add animation
+    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
+  }
+  get host() { return getElement(this); }
+};
+
+export { SallaOffer as salla_offer };

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-092659c7.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaProductAvailability = class {

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-092659c7.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
@@ -6,87 +6,41 @@ const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
 const SallaRating = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.order = {
-      shipping: { id: 5622 },
-      products: [
-        {
-          "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/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",
-          "price": "‏10,978.00 ر.س",
-          "qty": "‏2",
-          "totalBefore": "‏1120 ر.س",
-          "discount": "-5%",
-          "total": "‏1064 ر.س",
-          "id": "679822376",
-          "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"
-    };
     /**
      * Set to true to display store rating step
-    */
+     */
     this.isStoreRating = false;
     /**
      * Set to true to display products rating step
-    */
+     */
     this.isProductsRating = false;
     /**
      * Set to true to display shipping rating step
-    */
+     */
     this.isShippingRating = false;
     this.ratingChain = Promise.resolve();
     this.stepsCount = 0;
     Helper.setHost(this.host);
+    salla.event.on('rating::show', () => this.show());
   }
   async show() {
-    return this.modal.show();
+    return this.modal.show()
+      .then(() => salla.feedback.api.order(salla.get('page.id')))
+      .then(res => this.order = res.data)
+      .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
+      .then(() => this.modal.stopLoading())
+      .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
+      .then(() => setTimeout(() => this.initiateRating(), 100));
   }
   async hide() {
     return this.modal.hide();
   }
-  componentWillLoad() {
-    this.stepsCount = [this.isStoreRating, this.isProductsRating, this.isShippingRating].filter(item => item).length;
-    // this.getData();
-  }
-  componentDidRender() {
-    this.show();
-    this.initiateRating();
-  }
   initiateRating() {
     this.handleWizard();
     this.handleSubmitRating();
     this.starsRating();
     this.highlightSelectedStars();
   }
-  // getdata
-  // private 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 = this.host.querySelectorAll(".s-rating-step"), dots = this.host.querySelectorAll(".s-rating-step-dot"), nextBtnText = this.host.querySelector('#next-btn .s-button-text');
@@ -139,7 +93,7 @@ const SallaRating = class {
           clearInterval(timeToClose);
         }
       }, 1000);
-      // Hide steps and show thanks msg 
+      // Hide steps and show thanks msg
       Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
       this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
       Helper.toggleElement(thankYouView, 's-rating-unactive', 's-rating-hidden', () => true);
@@ -147,7 +101,7 @@ const SallaRating = class {
       this.setModalHeight(thankYouView);
     }));
   }
-  // handle star rating 
+  // handle star rating
   starsRating() {
     let selectedClasses = ['selected'];
     // Listen for form submissions
@@ -269,25 +223,32 @@ const SallaRating = class {
       throw new Error(errorMsg);
     }
   }
-  // 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-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" }, salla.lang.get('pages.order.rating_prev')), this.stepsCount > 1 ?
-      h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(index => h("li", { class: `${index == 0 ? 's-rating-bg-primary' : 's-rating-bg-gray'} s-rating-step-dot` }))) : '', h("salla-button", { id: "next-btn", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")))));
-  }
   renderStoreRating() {
-    return (h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.store') }, 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')), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), 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" }))));
+    return (h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.store') }, 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.order.id }), h("input", { type: "hidden", name: "type", value: "store" }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: salla.get('store.logo'), alt: "store name", class: "s-rating-store-logo" })), h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), 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: "s-rating-step", "data-type": "shipping", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.shipping') }, 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"), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), 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" }))));
+    return (h("section", { class: "s-rating-step", "data-type": "shipping", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.shipping') }, 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.order.id }), h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), h("input", { type: "hidden", name: "type", value: "shipping" }), h("div", { class: "s-rating-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, alt: "company name", class: "s-rating-shipping-logo" })), h("h2", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), 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": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.products') }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.order.rate_product_stars') }, h("img", { src: item.image, alt: item.title, class: "s-rating-product-img" }), h("div", { class: "s-rating-product-details" }, h("h3", { class: "s-rating-product-title" }, " ", item.title), h("div", { class: "s-rating-stars-product" }, " ", this.getStarsRating('small')), 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" }))))));
+    return (h("section", { class: "s-rating-step", "data-type": "product", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.products') }, 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') }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), h("div", { class: "s-rating-product-details" }, h("h3", { class: "s-rating-product-title" }, " ", item.product.name), h("div", { class: "s-rating-stars-product" }, " ", this.getStarsRating('small')), h("input", { type: "hidden", name: "order_id", value: this.order.id }), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("input", { type: "hidden", name: "type", value: "products" }), h("textarea", { "data-product-id": item.product.id, name: `products[${index}][comment]`, id: `productReview_${item.product.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: "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(size) {
-    return (h("form", { class: "s-rating-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), [1, 2, 3, 4, 5].map((star) => h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star }, h("i", { class: "sicon-star2" })))));
+    return (h("form", { class: "s-rating-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star }, h("i", { class: "sicon-star2" })))));
+  }
+  // render
+  render() {
+    return (h(Host, null, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+      ? [h("div", { class: "s-rating-wrapper " }, this.order.testimonials_enabled && this.renderStoreRating(), this.order.products_enabled && this.renderProductsRating(), this.order.shipping_enabled && this.renderShippingRating(), this.renderThanksView()),
+        h("div", { class: "s-rating-footer" }, h("button", { id: "prev-btn", class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ?
+          h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(index => h("li", { class: `${index == 0 ? 's-rating-bg-primary' : 's-rating-bg-gray'} s-rating-step-dot` }))) : '', h("salla-button", { id: "next-btn", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")),]
+      : '')));
+  }
+  componentDidRender() {
+    //todo:: know from where there is hidden attributes to the doms🤔
+    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
   }
   get host() { return getElement(this); }
 };

package/dist/{esm/salla-search-ca856aab.js → twilight-components/salla-search-25757808.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-092659c7.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-799f93d3.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaSearch = class {