@salla.sa/twilight-components 1.0.21 → 1.0.22

package/dist/cjs/salla-localization.cjs.entry.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-714023c8.js');
+const Helper = require('./Helper-fcea994c.js');
+
+const SallaLocalization = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a, _b;
+    this.language = salla.config.get('language', {});
+    this.currency = salla.config.get('currency', {});
+    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.Helper.setHost(this.host);
+    salla.event.on('localization::show', () => this.show());
+    /**
+     * letting developer to insert his own slot like:
+     * <salla-localization>
+     *   <div slot="language">...{name}....</div>
+     *   <div slot="currency">...{name}....</div>
+     * </salla-localization>
+     * 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.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.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>';
+    this.languages = Object.values(salla.config.get('languages', {}));
+    this.currencies = Object.values(salla.config.get('currencies', {}));
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  onChangeCurrency(event) {
+    this.currency = salla.config.get('currencies.' + event.target.value);
+  }
+  onChangeLanguage(event) {
+    this.language = salla.config.get('languages.' + event.target.value);
+  }
+  async submit() {
+    let url;
+    console.log('this.currency.code::::', this.currency, this.currency.code);
+    this.btn.load()
+      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
+      .then(() => this.language.code === salla.config.get('user.language') || (url = this.language.url))
+      .then(() => this.btn.stop())
+      .then(() => this.hide())
+      .then(() => url && (window.location.href = url));
+  }
+  render() {
+    return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
+      index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languagesTitle), index.h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
+        this.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.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 }), index.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) }))) :
+        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => index.h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
+      : '', this.currencies.length > 1 ?
+      index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+        this.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.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 }), index.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) }))) :
+        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
+      : ''), index.h("slot", { name: "footer" }, index.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
+   */
+  componentDidRender() {
+    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
+    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
+  }
+  get host() { return index.getElement(this); }
+};
+
+exports.salla_localization = SallaLocalization;

package/dist/cjs/salla-login-c438bb35.js

@@ -0,0 +1,128 @@
+'use strict';
+
+const index = require('./index-714023c8.js');
+const Helper = require('./Helper-fcea994c.js');
+
+const sallaLoginCss = "salla-verify{display:block}";
+
+const SallaLogin = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.regType = 'phone';
+    this.isEmailAllowed = true;
+    this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
+    this.loginText = salla.lang.get('blocks.header.login');
+    this.smsLabel = salla.lang.get('blocks.header.sms');
+    this.mobileLabel = salla.lang.get('common.elements.mobile');
+    this.emailLabel = salla.lang.get('common.elements.email');
+    this.enterText = salla.lang.get('blocks.header.enter');
+    this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
+    this.byEmailText = salla.lang.get('blocks.header.login_by_email');
+    this.backText = salla.lang.get('common.elements.back');
+    this.title = this.host.title || salla.lang.get('blocks.header.login');
+    this.host.removeAttribute('title');
+    salla.auth.event.onVerificationFailed(() => {
+      //
+    });
+  }
+  /**
+   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
+   */
+  onVerified(event) {
+    if (!event.detail.case) {
+      console.log('verified but without case!');
+      return;
+    }
+    if (event.detail.case === "new_customer") {
+      return this.showTab(this.tab5);
+    }
+    //TODO::It looks that is this workaround🤔
+    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
+      return;
+    }
+    if (event.redirect_url) {
+      return window.location.href = event.redirect_url;
+    }
+    window.location.reload();
+  }
+  onbackClicked() {
+    this.regType == 'phone' ? this.showTab(this.tab2) : this.showTab(this.tab3);
+  }
+  async show() {
+    this.showTab(this.isEmailAllowed ? this.tab1 : this.tab2);
+    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);
+    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 ? 'phone' : 'email';
+    }
+    let isRegistrationTab = tab == this.tab5;
+    isRegistrationTab && this.firstName.focus();
+    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 === 'phone')
+        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+    }
+    return this;
+  }
+  loginByEmail() {
+    if (!Helper.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;
+    }
+    this.email.nextElementSibling['innerText'] = '';
+    this.email.classList.remove('s-has-error');
+    salla.auth.api.login({ type: 'email', email: this.email.value })
+      .then(() => this.showTab(this.tab4))
+      .then(() => (this.tab4.by = 'email') && (this.tab4.url = 'auth/email/verify'))
+      .then(() => this.tab4.show({ email: this.email.value }));
+  }
+  async loginBySMS() {
+    const { phone, countryCode } = await this.loginTelInput.getValues();
+    if (phone.length < 6) {
+      this.loginTelInput.classList.add('s-has-error');
+      this.loginTelInput.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
+      return;
+    }
+    this.loginTelInput.nextElementSibling['innerText'] = '';
+    this.loginTelInput.classList.remove('s-has-error');
+    salla.auth.api.login({ type: 'mobile', phone: phone, country_code: countryCode })
+      .then(() => this.showTab(this.tab4))
+      .then(() => (this.tab4.by = 'sms') && (this.tab4.url = 'auth/mobile/verify'))
+      .then(() => this.tab4.show({ phone: phone, country_code: countryCode }));
+  }
+  //TODO:: if it's enter, go submit
+  typing({ target }) {
+    target.type === 'tel' && salla.helpers.digitsOnly(target);
+    target.classList.remove('s-has-error');
+    target.nextElementSibling.innerText = '';
+  }
+  async newUser() {
+    const { phone: regPhone, countryCode, countryKey } = await this.regTelInput.getValues();
+    this.tab4.getCode()
+      .then(code => salla.auth.api.register({
+      first_name: this.firstName.value,
+      last_name: this.lastName.value,
+      phone: regPhone || this.loginTelInput.phone,
+      email: this.regEmail.value || this.email.value,
+      country_code: countryCode,
+      country_key: countryKey,
+      code: code,
+      verified_by: this.regType,
+    })).then(() => window.location.reload());
+  }
+  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.isEmailAllowed ?
+      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", { phone: '', ref: el => this.loginTelInput = el }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isEmailAllowed ? index.h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isEmailAllowed ?
+      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("salla-tel-input", { phone: '', ref: el => this.regTelInput = el }), 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'))))));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaLogin.style = sallaLoginCss;
+
+exports.SallaLogin = SallaLogin;

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

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-714023c8.js');
+const Helper = require('./Helper-fcea994c.js');
+
+const SallaOffer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a, _b, _c;
+    this.offer = null;
+    Helper.Helper.setHost(this.host);
+    this.headerSlot = ((_a = Helper.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.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.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 index.h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+      ? [index.h("div", { class: "s-offer-header", innerHTML: this.headerSlot
+            .replace(/\{name\}/g, this.offer.name)
+            .replace(/\{message\}/g, this.offer.message) }),
+        index.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 => index.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 => index.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)) }, index.h("salla-button", { "btn-style": 'outline-primary', "data-id": product.id, onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart'))))),
+        index.h("div", { class: "s-offer-footer", slot: "footer" }, this.offer.expiry_date ?
+          index.h("p", { class: "s-offer-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.expiry_date)
+          : '', index.h("label", { class: "s-offer-remember-label" }, index.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 index.getElement(this); }
+};
+
+exports.salla_offer = SallaOffer;

package/dist/cjs/salla-product-availability.cjs.entry.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-714023c8.js');
+const Helper = require('./Helper-fcea994c.js');
+
+const SallaProductAvailability = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isUser = Helper.Helper.isUser();
+    this.buttonText = salla.lang.get('pages.products.notify_availability');
+    this.countryCode = salla.config.country_code || 'SA';
+    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.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
+    this.isSubscribed = false;
+    if (this.isUser) {
+      return;
+    }
+    this.channelsWatcher(this.channels);
+    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+    this.host.removeAttribute('title');
+  }
+  channelsWatcher(newValue) {
+    this.channels_ = newValue.split(',');
+  }
+  async submit() {
+    if (this.isUser) {
+      return salla.api.product.availabilitySubscribe(this.productId)
+        .then(() => this.isSubscribed = true);
+    }
+    let data = { id: this.productId, country_code: this.countryCode };
+    if (this.mobile.value !== '') {
+      data['mobile'] = this.mobile.value;
+    }
+    if (this.email.value !== '') {
+      data['email'] = this.email.value;
+    }
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => salla.api.product.availabilitySubscribe(data))
+      .then(() => this.isSubscribed = true) //no need to wait until finishing alert animation
+      .then(() => this.btn.stop())
+      .then(() => this.modal.hide())
+      .catch(() => this.btn.stop() && this.btn.enable());
+  }
+  render() {
+    return (index.h(index.Host, null, this.isSubscribed
+      ? index.h("div", { class: "s-product-availability-subscribed" }, this.subscribedMessage)
+      : index.h("slot", null, index.h("salla-button", { wide: true, onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser || this.isSubscribed ? '' : this.renderModal()));
+  }
+  renderModal() {
+    return (index.h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "md" }, index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+      index.h("label", { class: "s-product-availability-label" }, this.emailLabel),
+      index.h("input", { class: "s-product-availability-input", placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" })
+    ] : '', this.channels_.includes('sms') ? [
+      index.h("label", { class: "s-product-availability-label" }, this.mobileLabel),
+      index.h("input", { class: "s-product-availability-input", placeholder: this.mobilePlaceholder, ref: el => this.mobile = el, type: "text" }),
+      index.h("input", { type: "hidden", value: this.countryCode }),
+    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.subscribeText), index.h("salla-button", { wide: true, "btn-style": "outline" }, this.cancelText))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "channels": ["channelsWatcher"]
+  }; }
+};
+
+exports.salla_product_availability = SallaProductAvailability;

package/dist/cjs/salla-rating.cjs.entry.js

@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-714023c8.js');
+const Helper = require('./Helper-fcea994c.js');
+
+const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
+
+const SallaRating = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stepsCount = 0;
+    this.currentIndex = 0;
+    this.submitted = [];
+    Helper.Helper.setHost(this.host);
+    salla.event.on('rating::show', () => this.show());
+  }
+  async 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();
+  }
+  initiateRating() {
+    this.handleWizard();
+    this.highlightSelectedStars();
+    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
+      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let 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('.s-rating-btn-star')
+        .forEach((star, index) => Helper.Helper.toggleElement(star, 'selected', 'un-selected', () => index < selectedIndex));
+      // Remove aria-pressed from any previously selected star
+      event.target.querySelectorAll('.s-rating-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
+      // Add aria-pressed role to the selected button
+      selected.setAttribute('aria-pressed', '');
+    });
+  }
+  // handle wizard
+  handleWizard() {
+    this.steps = this.host.querySelectorAll(".s-rating-step");
+    this.dots = this.host.querySelectorAll(".s-rating-step-dot");
+    this.showActiveStep();
+  }
+  showActiveStep(current = null) {
+    var _a;
+    this.currentTab = current || this.steps[this.currentIndex];
+    Helper.Helper.toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab)
+      .toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex]);
+    // the animation
+    Helper.Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
+    setTimeout(() => Helper.Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+    // Btn text
+    let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
+    this.nextBtn.querySelector('.s-button-text').innerHTML = nextType
+      ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
+      : salla.lang.get('pages.rating.send_ratings');
+    setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
+  }
+  highlightSelectedStars() {
+    let hover = ['hovered'];
+    Helper.Helper.all('.s-rating-stars-element', el => {
+      let starElements = el.querySelectorAll('.s-rating-btn-star');
+      // remove hovered state from stars ---
+      el.addEventListener('mouseout', () => starElements.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.remove(...hover));
+      });
+    });
+  }
+  previousTab() {
+    this.currentIndex > 0 && this.currentIndex--;
+    Helper.Helper.toggleElement(this.backBtn, 's-rating-unvisiable', 'block', () => this.currentIndex == 0);
+    this.showActiveStep();
+  }
+  submit() {
+    this.submittedBefore() || this.validate();
+    salla.config.canLeave = false;
+    this.nextBtn.load()
+      .then(() => this.submittedBefore() || this.sendFeedback())
+      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-btn-star').forEach(el => el.setAttribute('disabled', '')))
+      .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
+      .then(() => this.showActiveStep())
+      .then(() => Helper.Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true))
+      .finally(() => {
+      this.nextBtn.stop();
+      salla.config.canLeave = true;
+      this.currentIndex == this.stepsCount && this.showThankYou();
+    });
+  }
+  submittedBefore() {
+    return this.submitted.includes(this.currentIndex);
+  }
+  validate(rating = null, type = null) {
+    if (!rating && this.currentTab.dataset.type == 'products') {
+      return this.currentTab.querySelectorAll('.rating-outer-form').forEach(rating => this.validate(rating, 'product'));
+    }
+    rating = rating || this.currentTab;
+    let stars = rating.querySelector('.rating_hidden_input').value;
+    let comment = rating.querySelector('.s-rating-comment');
+    let validationMessage = rating.querySelector('.s-rating-validation-msg');
+    if (stars && comment.value && comment.value.length > 3) {
+      comment.classList.remove('s-rating-has-error');
+      validationMessage.innerHTML = '';
+      return;
+    }
+    type = type || rating['dataset'].type;
+    Helper.Helper.toggleElement(comment, 'save', 's-rating-has-error', el => el.value.length > 3);
+    throw validationMessage.innerHTML = stars
+      ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
+      : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
+  }
+  sendFeedback() {
+    let data = {};
+    this.currentTab.querySelectorAll('[name]').forEach((input) => {
+      //decode names like `<input name="jamal[inner]" value="hi">` to be name(jamal), value: {inner:"hi"}
+      let inputData = salla.helpers.inputData(input.name, input.value, data);
+      data[inputData.name] = inputData.value;
+    });
+    if (Object.keys(data).length == 0) {
+      return;
+    }
+    data['order_id'] = salla.get('page.id');
+    data['type'] = this.currentTab.dataset.type;
+    this.submitted.push(this.currentIndex);
+    return salla.feedback.api[this.currentTab.dataset.type](data);
+  }
+  showThankYou() {
+    let seconds = 10;
+    let timeToClose = setInterval(() => {
+      this.thanksTime.innerHTML = '00:0' + (seconds--);
+      if (seconds > 0) {
+        return;
+      }
+      clearInterval(timeToClose);
+      this.thanksTime.remove();
+      this.hide().then(() => window.location.reload());
+    }, 1000);
+    this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+    this.showActiveStep(this.thanksTab);
+  }
+  renderRatingStars(size, name = 'rating') {
+    return (index.h("form", { class: "s-rating-stars-element" }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star }, index.h("i", { class: "sicon-star2" })))));
+  }
+  // render
+  render() {
+    return (index.h(index.Host, null, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+      ? [index.h("div", { class: "s-rating-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
+          index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "store" }, index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: salla.get('store.logo'), alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), index.h("div", { class: "s-rating-stars-company" }, " ", this.renderRatingStars('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), index.h("small", { class: "s-rating-validation-msg" }))
+          : '', this.order.products_enabled
+          ? index.h("section", { class: "s-rating-step", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-stars-product" }, " ", this.renderRatingStars('small', `products[${index$1}][rating]`)), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index$1}][comment]`, class: "s-rating-comment" }), index.h("small", { class: "s-rating-validation-msg" })))))
+          : '', this.order.shipping_enabled
+          ? index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "shipping" }, index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
+            ? index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.shipping.company.logo, class: "s-rating-shipping-logo", alt: this.order.shipping.company.name }))
+            : index.h("span", { class: "s-rating-icon sicon-shipping-fast" }), index.h("div", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), index.h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')), index.h("textarea", { name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), index.h("small", { class: "s-rating-validation-msg" }))
+          : '', index.h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')), index.h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
+        index.h("div", { class: "s-rating-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '', index.h("salla-button", { ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
+      : '')));
+  }
+  componentDidRender() {
+    //todo:: know from where there is hidden attributes to the doms🤔
+    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaRating.style = sallaRatingCss;
+
+exports.salla_rating = SallaRating;