@salla.sa/twilight-components 1.0.99 → 1.0.104

package/dist/components/salla-button2.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit],salla-button[type=button],salla-button[type=reset]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}";
+const sallaButtonCss = "";
 
 const SallaButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -42,13 +42,6 @@ const SallaButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * If there is need to change loader position, pass the position
      */
     this.loaderPosition = 'after';
-    /**
-     * Is the button wide
-     */
-    this.wide = false;
-    if (this.wide) {
-      this.host.classList.add('s-button-wide');
-    }
   }
   /**
    * Run loading animation
@@ -64,6 +57,7 @@ const SallaButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async stop() {
     this.host.removeAttribute('loading');
+    this.host.querySelector('button').removeAttribute('loading');
     if (this.loaderPosition == 'center')
       this.text.classList.remove('s-button-hide');
     return this.host;
@@ -92,7 +86,7 @@ const SallaButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   getBtnAttributes() {
     for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
+      if (!['color', 'fill', 'size', 'width', 'id'].includes(this.host.attributes[i].name)) {
         this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
       }
     }
@@ -126,7 +120,6 @@ const SallaButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "loading": [516],
     "disabled": [516],
     "loaderPosition": [1, "loader-position"],
-    "wide": [4],
     "href": [1],
     "load": [64],
     "stop": [64],

package/dist/components/salla-conditional-fields.js

@@ -3,8 +3,6 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaConditionalFieldsCss = ":host{display:block}";
-
 const SallaConditionalFields$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -12,6 +10,7 @@ const SallaConditionalFields$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   changeHandler(event) {
     var _a;
+    console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 17 ~ SallaConditionalFields ~ changeHandler ~ changeHandler", event);
     salla.log('Received the change event: ', event);
     if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
       salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
@@ -20,7 +19,7 @@ const SallaConditionalFields$1 = /*@__PURE__*/ proxyCustomElement(class extends
     // to extract the option id from the input name, the supported names are name[*] and name[*][]
     let optionId = event.target.name.replace('[]', '');
     let isMultiple = event.target.getAttribute('type') === 'checkbox';
-    salla.log('Trying to find all the element with condation:', `[data-show-when^="${optionId}"]`);
+    salla.log('Trying to find all the element with condition:', `[data-show-when^="${optionId}"]`);
     this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
       .forEach((field) => {
       let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
@@ -69,6 +68,7 @@ const SallaConditionalFields$1 = /*@__PURE__*/ proxyCustomElement(class extends
       var _a;
       // @ts-ignore
       let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+      console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 83 ~ SallaConditionalFields ~ this.host.querySelectorAll ~ optionName", optionName);
       if (!optionName) {
         return;
       }
@@ -81,7 +81,6 @@ const SallaConditionalFields$1 = /*@__PURE__*/ proxyCustomElement(class extends
     return (h(Host, null, h("slot", null)));
   }
   get host() { return this; }
-  static get style() { return sallaConditionalFieldsCss; }
 }, [4, "salla-conditional-fields", undefined, [[0, "change", "changeHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/salla-localization-modal.js

@@ -6,7 +6,7 @@ import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 
-const sallaLocalizationModalCss = "#salla-localization .s-localization-modal-label-slot{flex-grow:1}#salla-localization .s-localization-modal-select{appearance:none;-webkit-appearance:none}.iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url(\"https://intl-tel-input.com/node_modules/intl-tel-input/build/img/flags.png\");background-repeat:no-repeat;background-color:#f5f7f9;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-image:url(\"https://intl-tel-input.com/node_modules/intl-tel-input/build/img/flags@2x.png\")}}.iti__flag.iti__np{background-color:transparent}";
+const sallaLocalizationModalCss = ".iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url(\"https://cdn.salla.network/images/flags.png\");background-repeat:no-repeat;background-color:#f5f7f9;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-image:url(\"https://cdn.salla.network/images/flags@2x.png\")}}.iti__flag.iti__np{background-color:transparent}";
 
 const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -42,7 +42,8 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
    * open the component
    */
   async open() {
-    return this.modal.open()
+    console.log("🚀 ~ file: salla-localization-modal.tsx ~ line 59 ~ SallaLocalizationModal ~ open ~ this.modal", this.modal);
+    return await this.modal.open()
       .then(() => this.getLanguages())
       .then(() => this.getCurrencies())
       .then(() => this.isLoading = false);
@@ -94,7 +95,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
               .replace(/\{name\}/g, lang.name)
               .replace(/\{code\}/g, lang.code)
               .replace(/\{country_code\}/g, lang.country_code) }))) :
-          h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+          h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
         : '', this.currencies.length > 1 ?
         h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, this.currenciesTitle), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
           this.currencies.map(currency => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
@@ -102,7 +103,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
               .replace(/\{code\}/g, currency.code)
               .replace(/\{country_code\}/g, currency.country_code) }))) :
           h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
-        : '', h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
+        : '', h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   /**

package/dist/components/salla-login-modal.js

@@ -6,9 +6,9 @@ import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$5 } from './salla-button2.js';
 import { d as defineCustomElement$4 } from './salla-modal2.js';
 import { d as defineCustomElement$3 } from './salla-tel-input2.js';
-import { d as defineCustomElement$2 } from './salla-verify-modal2.js';
+import { d as defineCustomElement$2 } from './salla-verify2.js';
 
-const sallaLoginModalCss = "[dir=ltr] #salla-login .s-login-modal-main-btn .arrow{display:inline-block;transform:scale(-1)}";
+const sallaLoginModalCss = "";
 
 const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -145,7 +145,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
     //we should have only one salla-login, so it's okay to get it from document
     //todo:: use better way for resize the modal
-    setTimeout(() => { var _a; return (_a = document.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
+    setTimeout(() => { var _a; return (_a = this.modal.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.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';
     }
@@ -188,7 +188,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         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', width: "wide", 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("div", null, 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("div", null, 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', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
+        : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("div", null, 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("div", null, 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', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
   }
   get host() { return this; }
   static get style() { return sallaLoginModalCss; }
@@ -216,7 +216,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-login-modal", "salla-button", "salla-modal", "salla-tel-input", "salla-verify-modal"];
+  const components = ["salla-login-modal", "salla-button", "salla-modal", "salla-tel-input", "salla-verify"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-login-modal":
       if (!customElements.get(tagName)) {
@@ -238,7 +238,7 @@ function defineCustomElement$1() {
         defineCustomElement$3();
       }
       break;
-    case "salla-verify-modal":
+    case "salla-verify":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/salla-modal2.js

@@ -10,7 +10,7 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.isClosable = true; //todo::rename unclude
+    this.isClosable = true; //todo::rename unclude. Suggestion => persistent
     /**
      * The size of the modal
      */
@@ -126,17 +126,17 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //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 ?
+    return (h(Host, { class: 'salla-modal s-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.modalTitle || 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.modalTitle }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: 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.modalTitle }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+          // : ''
+          , "// : ''"),
           h("slot", null),
           h("slot", { name: "footer" })
         ]))));

package/dist/components/salla-offer-modal.js

@@ -6,7 +6,7 @@ import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 
-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%)}.rtl #salla-offer-modal .s-offer-modal-next-btn{transform:scale(-1) translateX(100%)}.rtl #salla-offer-modal .s-offer-modal-prev-btn{transform:scale(-1) translateX(-100%)}.rtl #salla-offer-modal .s-offer-modal-btn-is-active{transform:scale(-1) translateX(0)}";
+const sallaOfferModalCss = "";
 
 const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -56,6 +56,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     return this.modal.open();
   }
   rememberMe(event) {
+    console.log("🚀 ~ file: salla-offer-modal.tsx ~ line 75 ~ SallaOfferModal ~ rememberMe ~ rememberMe", event);
     salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
   }
   //todo:: pass event then use sallaButton from it
@@ -94,7 +95,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   componentDidRender() {
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
-      let sliderWrap = document.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = document.querySelector('.s-offer-modal-scrolled-slider'), navButtons = document.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = document.querySelector('.s-offer-modal-next-btn'), prevBtn = document.querySelector('.s-offer-modal-prev-btn'), items = document.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      let sliderWrap = this.modal.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.modal.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.modal.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.modal.querySelector('.s-offer-modal-next-btn'), prevBtn = this.modal.querySelector('.s-offer-modal-prev-btn'), items = this.modal.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
       current = 0, // current slide
       slidesToScroll = 3, itemsLength = items.length;
       console.log('items[0]:', items[0]);

package/dist/components/salla-product-availability2.js

@@ -25,6 +25,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
     this.isSubscribed = false;
     // @Method()
     this.submit = async () => {
+      console.log("🚀 ~ file: salla-product-availability.tsx ~ line 74 ~ SallaProductAvailability ~ submit= ~ submit");
       if (this.isUser) {
         return salla.api.product.availabilitySubscribe(this.productId)
           .then(() => this.isSubscribed = true);
@@ -80,21 +81,25 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
     this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
   }
   channelsWatcher(newValue) {
-    this.channels_ = newValue.split(',');
+    this.channels_ = !!newValue ? newValue.split(',') : [];
   }
   async validateform() {
-    if (this.channels_.includes('email')) {
-      const isEmailValid = Helper.isValidEmail(this.email.value);
-      if (isEmailValid)
-        return;
-      !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+    try {
+      if (this.channels_.includes('email')) {
+        const isEmailValid = Helper.isValidEmail(this.email.value);
+        if (isEmailValid)
+          return;
+        !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+      }
+      if (this.channels_.includes('sms')) {
+        const isPhoneValid = await this.mobileInput.isValid();
+        if (isPhoneValid)
+          return;
+      }
     }
-    if (this.channels_.includes('sms')) {
-      const isPhoneValid = await this.mobileInput.isValid();
-      if (isPhoneValid)
-        return;
+    catch (error) {
+      throw ('Please insert required fields');
     }
-    throw ('Please insert required fields');
   }
   validateField(field, errorMsg) {
     field.classList.add('s-has-error');
@@ -114,7 +119,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
     ] : '', this.channels_.includes('sms') ? [
       h("label", { class: "s-product-availability-label" }, this.mobileLabel),
       h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
-    ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')), h("salla-button", { "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
+    ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   get host() { return this; }
   static get watchers() { return {

package/dist/components/salla-quantity-input.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
 
-const sallaQuantityInputCss = ":host{display:block}";
+const sallaQuantityInputCss = "";
 
 const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -72,7 +72,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     return this.host;
   }
   render() {
-    return (h(Host, { class: "s-quantity-input s-quantity-input-container" }, h("button", { onClick: () => this.increase(), class: "s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("i", { class: "sicon-add" }) : '', h("slot", { name: "increment-button" })), h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), h("button", { class: "s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("i", { class: "sicon-minus" }) : '', h("slot", { name: "decrement-button" }))));
+    return (h(Host, { class: "s-quantity-input s-quantity-input-container" }, h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button", type: "button" }, !this.hasIncrementSlot ? h("i", { class: "sicon-add" }) : '', h("slot", { name: "increment-button" })), h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), h("button", { class: "s-quantity-input-decrease-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("i", { class: "sicon-minus" }) : '', h("slot", { name: "decrement-button" }))));
   }
   get host() { return this; }
   static get watchers() { return {

package/dist/components/salla-rating-modal.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './salla-button2.js';
 import { d as defineCustomElement$3 } from './salla-modal2.js';
 import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
 
-const sallaRatingModalCss = "#s-rating .s-rating-modal-product-img{font-size:0;position:relative}#s-rating .s-rating-modal-product-img:before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0;background:#eee}#s-rating .unicode{unicode-bidi:plaintext}";
+const sallaRatingModalCss = "";
 
 const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -62,8 +62,8 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }
   // handle wizard
   handleWizard() {
-    this.steps = document.querySelectorAll(".s-rating-modal-step");
-    this.dots = document.querySelectorAll(".s-rating-modal-step-dot");
+    this.steps = this.modal.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.modal.querySelectorAll(".s-rating-modal-step-dot");
     this.showActiveStep();
   }
   showActiveStep(current = null) {
@@ -151,7 +151,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       this.thanksTime.remove();
       this.close().then(() => window.location.reload());
     }, 1000);
-    document.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+    this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
     this.showActiveStep(this.thanksTab);
   }
   render() {

package/dist/components/salla-rating-stars2.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
 
-const sallaRatingStarsCss = ":host{display:block}";
+const sallaRatingStarsCss = "";
 
 const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -14,45 +14,36 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.size = 'medium';
   }
   initiateRating() {
-    document.querySelectorAll('.s-rating-stars-element').forEach((elem) => {
-      elem.addEventListener('submit', function (event) {
-        event.preventDefault();
-        // Get the selected star - activeElement is not supported in safari
-        let activeStars = event.target.querySelectorAll('.s-rating-stars-btn-star.s-rating-stars-hovered');
-        let selected = activeStars[activeStars.length - 1];
-        if (!selected)
-          return;
-        let selectedIndex = selected.getAttribute('data-star');
-        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-stars-btn-star')
-          .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
-        // Remove aria-pressed from any previously selected star
-        event.target.querySelectorAll('.s-rating-stars-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
-        // Add aria-pressed role to the selected button
-        selected.setAttribute('aria-pressed', '');
-      });
+    this.host.addEventListener('click', () => {
+      if (!this.startsElem)
+        return;
+      // Get the selected star - activeElement is not supported in safari
+      let activeStars = this.startsElem.querySelectorAll('.s-rating-stars-hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let selectedIndex = selected.getAttribute('data-star');
+      this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
+        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
+      // update aria-pressed attr status
+      this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
+      selected.setAttribute('aria-pressed', 'true');
     });
   }
   highlightSelectedStars() {
-    let hover = ['s-rating-stars-hovered'], element = this.host.querySelector('.s-rating-stars-element'), starElements = element === null || element === void 0 ? void 0 : element.querySelectorAll('.s-rating-stars-btn-star');
-    element === null || element === void 0 ? void 0 : element.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
-    starElements === null || starElements === void 0 ? void 0 : 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);
-          }
+    var _a, _b;
+    let hoveredClass = 's-rating-stars-hovered', stars = (_a = this.startsElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.s-rating-stars-btn-star');
+    stars === null || stars === void 0 ? void 0 : stars.forEach((star, index) => {
+      star.addEventListener('mouseover', () => {
+        for (let i = 0; i <= index; i++) {
+          stars[i].classList.add(hoveredClass);
         }
       });
-      starElement.addEventListener('mouseout', () => starElement.classList.remove(...hover));
+      star.addEventListener('mouseout', () => star.classList.remove(hoveredClass));
     });
+    (_b = this.startsElem) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
   }
   createStars(n) {
     let stars = [];
@@ -69,7 +60,7 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     return (h(Host, null, this.value ?
       h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
       :
-        h("form", { class: "s-rating-stars-element" }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("i", { class: "sicon-star2" }))))));
+        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("i", { class: "sicon-star2" }))))));
   }
   componentDidLoad() {
     this.initiateRating();