@salla.sa/twilight-components 1.0.50 → 1.0.52

package/dist/esm/{salla-search-813732a1.js → salla-login-modal-187c1f98.js}

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
 
-const sallaLoginCss = "";
+const sallaLoginModalCss = "";
 
-const SallaLogin = class {
+const SallaLoginModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
@@ -37,7 +37,7 @@ const SallaLogin = class {
     this.typing = (e, submitMethod) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
-      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-error-message')) && (error.innerText = '');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-modal-error-message')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
     this.loginBySMS = async () => {
@@ -158,8 +158,8 @@ const SallaLogin = class {
     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
     let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
     tabs.map(el => Helper.toggleElement(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.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'));
+    setTimeout(() => tabs.map(el => Helper.toggleElement(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    setTimeout(() => this.host.querySelector('.s-login-modal-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'));
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
@@ -187,89 +187,16 @@ const SallaLogin = class {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      h("div", { class: "s-login-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, 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: (evt) => this.showTab(this.emailTab, evt) }, 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("slot", { name: "after-login-type" }))
+    return (h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
+      h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
-      h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
-        h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
-      h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("label", { class: "s-login-label" }, this.firstNameLabel), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), h("span", { class: "s-login-error-message" }), h("label", { class: "s-login-label" }, this.lastNameLabel), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), h("span", { class: "s-login-error-message" }), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
+      h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
+        h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
+      h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-modal-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), h("span", { class: "s-login-modal-error-message" }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
+        h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("label", { class: "s-login-modal-label" }, this.firstNameLabel), h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), h("span", { class: "s-login-modal-error-message" }), h("label", { class: "s-login-modal-label" }, this.lastNameLabel), h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), h("span", { class: "s-login-modal-error-message" }), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), h("span", { class: "s-login-modal-error-message" })), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
   }
   get host() { return getElement(this); }
 };
-SallaLogin.style = sallaLoginCss;
+SallaLoginModal.style = sallaLoginModalCss;
 
-const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
-
-const SallaSearch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    var _a;
-    Helper.setHost(this.host);
-    this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
-    salla.event.on('search::show', () => this.modal.show());
-    salla.event.on('languages::translations.loaded', () => {
-      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
-      this.noResultsText = salla.lang.get('common.elements.no_options');
-    });
-  }
-  onModalOpen() {
-    this.modal.querySelector('.s-search-input').focus();
-  }
-  onModalClose() {
-    this.modal.querySelector('.s-search-input').value = '';
-    this.results = undefined;
-    this.afterSearching();
-  }
-  getDefaultProductSlot() {
-    return '<div class="s-search-product-image-container">' +
-      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
-      '</div>' +
-      '<div class="s-search-product-details">' +
-      '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price}</div>' +
-      '</div>';
-  }
-  //todo:: reset data when closing
-  search(e) {
-    Helper.hideElement(this.noResults);
-    if (e.target.value.length === 0) {
-      this.results = undefined;
-      this.afterSearching();
-      return;
-    }
-    if (e.target.value.length <= 2) {
-      return;
-    }
-    //run loading spinner or stop it
-    Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
-    salla.search.api.search(e.target.value)
-      .then(response => this.results = response)
-      .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
-      .finally(() => this.afterSearching(/*isEmpty*/ false));
-  }
-  afterSearching(isEmpty = true) {
-    var _a;
-    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
-    Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
-      .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
-    salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
-  }
-  render() {
-    var _a;
-    return (h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, h("div", { class: "s-search-container", ref: container => this.container = container }, h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), h("span", { class: "s-search-icon" }, h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
-      _a.data.map(item => h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
-          .replace(/\{name\}/g, item.name)
-          .replace(/\{price\}/g, item.price) //todo:: get discounted price too
-          .replace(/\{image\}/g, item.image_url) })), h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText)))));
-  }
-  /**
-   * Run it one time after load
-   */
-  componentDidLoad() {
-    this.afterSearching();
-  }
-  get host() { return getElement(this); }
-};
-SallaSearch.style = sallaSearchCss;
-
-export { SallaLogin as S, SallaSearch as a };
+export { SallaLoginModal as S };

package/dist/esm/salla-login-modal.entry.js

@@ -0,0 +1,3 @@
+export { S as salla_login_modal } from './salla-login-modal-187c1f98.js';
+import './index-8b97d225.js';
+import './Helper-7162a06c.js';

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

@@ -0,0 +1,150 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8b97d225.js';
+import { H as Helper } from './Helper-7162a06c.js';
+export { S as salla_search } from './salla-search-2e3e60cb.js';
+
+const sallaModalCss = "";
+
+const SallaModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.modalOpened = createEvent(this, "modalOpened", 7);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    this.isClosable = true; //todo::rename unclude
+    /**
+     * The size of the modal
+     */
+    this.width = 'md';
+    /**
+     * The position of the modal
+     */
+    this.position = 'middle';
+    /**
+     * Show the modal on rendering
+     */
+    this.visible = false;
+    /**
+     * Show loading in the middle
+     */
+    this.isLoading = false;
+    this.subTitleFirst = false; //todo:: choose better name
+    this.noPadding = false; //todo:: choose better name
+    this.subTitle = '';
+    /**
+     * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
+     */
+    this.icon = '';
+    this.iconStyle = '';
+    /**
+     * url of an image
+     */
+    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');
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.modalClosed.emit();
+      return;
+    }
+    this.host.classList.remove('s-hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.modalOpened.emit();
+  }
+  /**
+   * Show the modal
+   */
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  /**
+   * hide the modal
+   */
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  /**
+   * Change the title
+   * @param {string} title
+   */
+  async setTitle(title) {
+    this.title = title;
+    return this.host;
+  }
+  /**
+   * Start loading
+   */
+  async loading() {
+    this.isLoading = true;
+    return this.host;
+  }
+  /**
+   * Stop the loading
+   */
+  async stopLoading() {
+    this.isLoading = false;
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    const body = this.host.querySelector('.s-modal-body');
+    Helper.toggleElement(body, '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('s-hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  iconBlockClasses() {
+    return {
+      's-modal-icon': true,
+      's-modal-bg-error': this.iconStyle == 'error',
+      's-modal-bg-success': this.iconStyle == 'success',
+      's-modal-bg-normal': this.iconStyle != 'error' && this.iconStyle != 'success',
+      's-modal-bg-primary': this.iconStyle == 'primary'
+    };
+  }
+  iconClasses() {
+    return {
+      [this.icon]: true,
+      'sicon-alert-engine': !this.icon && this.iconStyle == 'error' && !this.imageIcon,
+      'sicon-check-circle2': !this.icon && this.iconStyle == 'success' && !this.imageIcon,
+    };
+  }
+  //todo:: pref for each modal
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (h(Host, { class: 'salla-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
+      h("div", { class: "s-modal-loader-wrap" }, h("span", { class: "s-modal-loader" }))
+      :
+        [
+          h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
+            h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
+            : '', this.title || this.subTitle ?
+            h("div", { class: "s-modal-header-inner" }, this.iconStyle || this.icon
+              ? h("div", { class: this.iconBlockClasses() }, h("i", { class: this.iconClasses() }))
+              : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '', 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"]
+  }; }
+};
+SallaModal.style = sallaModalCss;
+
+export { SallaModal as salla_modal };

package/dist/esm/{salla-offer.entry.js → salla-offer-modal.entry.js}

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
 
-const sallaOfferCss = "#salla-offer-modal .s-offer-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
+const sallaOfferModalCss = "#salla-offer-modal .s-offer-modal-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-modal-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-modal-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
 
-const SallaOffer = class {
+const SallaOfferModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     var _a, _b;
@@ -15,7 +15,7 @@ const SallaOffer = class {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.remember_my_choice');
     });
-    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
+    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
     this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
     salla.offer.event.onExisted(data => {
       //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
@@ -56,29 +56,29 @@ const SallaOffer = class {
       .finally(() => this['stop']());
   }
   defaultProductSlot() {
-    return '<a href={url} class="s-offer-product-image-wrap"><img class="s-offer-product-image" 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>' +
+    return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
+      '<div class="s-offer-modal-product-info">' +
+      '   <a href={url} class="s-offer-modal-product-name">{name}</a>' +
+      '   <div class="s-offer-modal-product-price">{price}</div>' +
       '</div>';
   }
   render() {
     var _a, _b;
     return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
-      ? [h("div", { class: "s-offer-scrolled-slider-wrap" }, h("div", { class: "s-offer-body s-offer-scrolled-slider" }, ((_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 s-offer-slider-item", innerHTML: this.categorySlot
+      ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_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-modal-badge s-offer-modal-slider-item", 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 s-offer-slider-item", id: 'product_' + product.id, innerHTML: this.productSlot
+          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: "s-offer-modal-product s-offer-modal-slider-item", 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.price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
-              : salla.money(product.price)) }, h("div", { class: "s-offer-btn-wrap" }, h("salla-button", { wide: true, "btn-style": 'outline-primary', "data-id": product.id, "loader-position": "center", onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart')))))), h("div", { class: "s-offer-slider-nav" }, h("button", { class: "s-offer-nav-btn s-offer-prev-btn" }, h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_right" })), h("button", { class: "s-offer-nav-btn s-offer-next-btn" }, h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_left" })))),
-        h("div", { class: "s-offer-footer", slot: "footer" }, this.offer.expiry_date ?
-          h("p", { class: "s-offer-expiry" }, this.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 ", this.remember_my_choice)),
+              ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
+              : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { wide: true, "btn-style": 'outline-primary', "data-id": product.id, "loader-position": "center", onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart')))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })))),
+        h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.expiry_date ?
+          h("p", { class: "s-offer-modal-expiry" }, this.offer_expires_in, " ", this.offer.expiry_date)
+          : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", this.remember_my_choice)),
       ] : '');
   }
   componentDidRender() {
@@ -87,11 +87,11 @@ const SallaOffer = class {
     this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
-      let sliderWrap = this.host.querySelector('.s-offer-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-nav-btn'), nexBtn = this.host.querySelector('.s-offer-next-btn'), prevBtn = this.host.querySelector('.s-offer-prev-btn'), items = this.host.querySelectorAll('.s-offer-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      let sliderWrap = this.host.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.host.querySelector('.s-offer-modal-next-btn'), prevBtn = this.host.querySelector('.s-offer-modal-prev-btn'), items = this.host.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
       current = 0, // current slide
       slidesToScroll = 3, itemsLength = items.length, itemSize = items[0].offsetWidth, sliderSize = itemsLength * itemSize, sliderWrapperSize = sliderWrap.offsetWidth, sliderInvisibleSize = sliderSize - sliderWrapperSize, isRTL = document.body.classList.contains('rtl') ? true : false;
       if (sliderInvisibleSize > sliderNavMargin)
-        nexBtn.classList.add('s-offer-btn-is-active');
+        nexBtn.classList.add('s-offer-modal-btn-is-active');
       window.onresize = function () {
         sliderWrapperSize = sliderWrap.offsetWidth;
         sliderInvisibleSize = sliderSize - sliderWrapperSize;
@@ -101,23 +101,23 @@ const SallaOffer = class {
         let sliderEndOffset = sliderInvisibleSize - sliderNavMargin;
         // show & hide the navigation btns depending on scroll position
         if (sliderPosition <= sliderNavMargin) {
-          nexBtn.classList.add('s-offer-btn-is-active');
-          prevBtn.classList.remove('s-offer-btn-is-active');
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.remove('s-offer-modal-btn-is-active');
         }
         else if (sliderPosition < sliderEndOffset) {
           // show both btns in the middle
-          nexBtn.classList.add('s-offer-btn-is-active');
-          prevBtn.classList.add('s-offer-btn-is-active');
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
         }
         else if (sliderPosition >= sliderEndOffset) {
-          nexBtn.classList.remove('s-offer-btn-is-active');
-          prevBtn.classList.add('s-offer-btn-is-active');
+          nexBtn.classList.remove('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
         }
       });
       // Navigation
       navButtons.forEach(btn => {
         btn.addEventListener('click', function () {
-          btn.classList.contains('s-offer-next-btn') ? current++ : current--;
+          btn.classList.contains('s-offer-modal-next-btn') ? current++ : current--;
           slider.scrollTo({
             top: 0,
             left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
@@ -129,6 +129,6 @@ const SallaOffer = class {
   }
   get host() { return getElement(this); }
 };
-SallaOffer.style = sallaOfferCss;
+SallaOfferModal.style = sallaOfferModalCss;
 
-export { SallaOffer as salla_offer };
+export { SallaOfferModal as salla_offer_modal };

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-8b97d225.js';
 import { H as Helper } from './Helper-7162a06c.js';
 
-const sallaRatingCss = "#s-rating .unicode{unicode-bidi:plaintext}";
+const sallaRatingModalCss = "#s-rating-modal .unicode{unicode-bidi:plaintext}";
 
-const SallaRating = class {
+const SallaRatingModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.stepsCount = 0;
@@ -56,11 +56,11 @@ const SallaRating = class {
   initiateRating() {
     this.handleWizard();
     this.highlightSelectedStars();
-    salla.document.event.onSubmit('.s-rating-stars-element', function (event) {
+    salla.document.event.onSubmit('.s-rating-modal-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.s-rating-hovered');
+      let activeStars = event.target.querySelectorAll('.s-rating-modal-btn-star.s-rating-modal-hovered');
       let selected = activeStars[activeStars.length - 1];
       if (!selected)
         return;
@@ -69,29 +69,29 @@ const SallaRating = class {
       // 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.toggleElement(star, 's-rating-selected', 's-rating-un-selected', () => index < selectedIndex));
+        .querySelectorAll('.s-rating-modal-btn-star')
+        .forEach((star, index) => Helper.toggleElement(star, 's-rating-modal-selected', 's-rating-modal-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'));
+      event.target.querySelectorAll('.s-rating-modal-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.steps = this.host.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.host.querySelectorAll(".s-rating-modal-step-dot");
     this.showActiveStep();
   }
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex])
-      .toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab);
+    Helper.toggle('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggle('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
     if (this.currentIndex != 0) {
       // the animation
-      Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
-      setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+      Helper.toggleElement(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.toggleElement(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
@@ -100,9 +100,9 @@ const SallaRating = class {
     setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
   }
   highlightSelectedStars() {
-    let hover = ['s-rating-hovered'];
-    Helper.all('.s-rating-stars-element', el => {
-      let starElements = el.querySelectorAll('.s-rating-btn-star');
+    let hover = ['s-rating-modal-hovered'];
+    Helper.all('.s-rating-modal-stars-element', el => {
+      let starElements = el.querySelectorAll('.s-rating-modal-btn-star');
       // remove hovered state from stars ---
       el.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
       starElements.forEach((starElement, index) => {
@@ -123,7 +123,7 @@ const SallaRating = class {
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    Helper.toggleElement(this.backBtn, 's-rating-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper.toggleElement(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -131,10 +131,10 @@ const SallaRating = class {
     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.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
       .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
       .then(() => this.showActiveStep())
-      .then(() => Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true))
+      .then(() => Helper.toggle('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -151,8 +151,8 @@ const SallaRating = class {
     }
     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');
+    let comment = rating.querySelector('.s-rating-modal-comment');
+    let validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
     if (stars && comment.value && comment.value.length > 3) {
       comment.classList.remove('s-has-error');
       validationMessage.innerHTML = '';
@@ -190,25 +190,25 @@ const SallaRating = class {
       this.thanksTime.remove();
       this.hide().then(() => window.location.reload());
     }, 1000);
-    this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+    this.host.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
     this.showActiveStep(this.thanksTab);
   }
   renderRatingStars(size, name = 'rating') {
-    return (h("form", { class: "s-rating-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: name, 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-modal-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-modal-btn-star s-rating-modal-btn-star-` + size, "data-star": star }, h("i", { class: "sicon-star2" })))));
   }
   // render
   render() {
     return (h(Host, { id: "s-rating" }, h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
-      ? [h("div", { class: "s-rating-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
-          h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "store" }, h("div", { class: "s-rating-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-store-logo" })), h("h2", { class: "s-rating-title" }, this.rate_the_store), h("div", { class: "s-rating-stars-company" }, " ", this.renderRatingStars('large')), h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: this.write_store_rate }), h("small", { class: "s-rating-validation-msg" }))
+      ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
+          h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, this.rate_the_store), h("div", { class: "s-rating-modal-stars-company" }, " ", this.renderRatingStars('large')), h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }), h("small", { class: "s-rating-modal-validation-msg" }))
           : '', this.order.products_enabled
-          ? h("section", { class: "s-rating-step s-rating-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": this.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.renderRatingStars('small', `products[${index}][rating]`)), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("textarea", { placeholder: this.write_product_rate, name: `products[${index}][comment]`, class: "s-rating-comment" }), h("small", { class: "s-rating-validation-msg" })))))
+          ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": this.rate_product_stars }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" }), h("div", { class: "s-rating-modal-product-details" }, h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), h("div", { class: "s-rating-modal-stars-product" }, " ", this.renderRatingStars('small', `products[${index}][rating]`)), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("textarea", { placeholder: this.write_product_rate, name: `products[${index}][comment]`, class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" })))))
           : '', this.order.shipping_enabled
-          ? h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
-            ? h("div", { class: "s-rating-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-shipping-logo", alt: this.order.shipping.company.name }))
-            : h("span", { class: "s-rating-icon sicon-shipping-fast" }), h("div", { class: "s-rating-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')), h("textarea", { name: "comment", class: "s-rating-comment", placeholder: this.write_shipping_rate }), h("small", { class: "s-rating-validation-msg" }))
-          : '', h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-icon sicon-check-circle2" }), h("h3", { class: "s-rating-thanks-title" }, this.thanks), h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
-        h("div", { class: "s-rating-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, this.back), this.stepsCount > 1 ? h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
+          ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
+            ? h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
+            : h("span", { class: "s-rating-modal-icon sicon-shipping-fast" }), h("div", { class: "s-rating-modal-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-modal-stars-company" }, this.renderRatingStars('large')), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_shipping_rate }), h("small", { class: "s-rating-modal-validation-msg" }))
+          : '', h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-modal-icon sicon-check-circle2" }), h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))),
+        h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, this.back), this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
       : '')));
   }
   componentDidRender() {
@@ -220,6 +220,6 @@ const SallaRating = class {
   }
   get host() { return getElement(this); }
 };
-SallaRating.style = sallaRatingCss;
+SallaRatingModal.style = sallaRatingModalCss;
 
-export { SallaRating as salla_rating };
+export { SallaRatingModal as salla_rating_modal };