@salla.sa/twilight-components 1.6.3 → 1.6.5

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

@@ -3,9 +3,10 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$5 } from './salla-button2.js';
-import { d as defineCustomElement$4 } from './salla-loading2.js';
-import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-placeholder2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
 const sallaLocalizationModalCss = ".s-localization-modal-select{background-image:url(\"data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}.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}";
@@ -18,7 +19,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.translationLoaded = false;
     this.languages = [];
     this.currencies = [];
-    this.isLoading = true;
+    this.hasError = false;
     /**
      * Current language (existing or newly selected)
      */
@@ -48,10 +49,18 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
    * open the component
    */
   async open() {
-    return await this.modal.open()
-      .then(() => this.getLanguages())
+    this.modal.open();
+    return await salla.api.withoutNotifier(this.getLanguages()
       .then(() => this.getCurrencies())
-      .then(() => this.isLoading = false);
+      .catch(e => {
+      var _a, _b, _c, _d;
+      console.log(e);
+      this.hasError = true;
+      this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => {
+      this.modal.stopLoading();
+    }));
   }
   /**
    * Hide the component
@@ -96,23 +105,23 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { isLoading: this.isLoading, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { slot: 'loading' }, h("div", { class: "s-localization-modal-skeleton" }, h("salla-skeleton", { width: '25%', height: '15px' }), h("div", { class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { width: '25%', height: '15px' }), h("div", { class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { height: '40px', width: '100%' }))), !this.isLoading ?
+    return (h("salla-modal", { isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { slot: 'loading' }, h("div", { class: "s-localization-modal-skeleton" }, h("salla-skeleton", { width: '25%', height: '15px' }), h("div", { class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { width: '25%', height: '15px' }), h("div", { class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { height: '40px', width: '100%' }))), !!this.hasError ?
+      h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
       h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
-        h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
+        h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 || this.currencies.length == 1 ?
           this.languages.map(lang => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
               .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: "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" }, salla.lang.get('common.titles.currency')), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
+        h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.currency')), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 || this.languages.length == 1 ?
           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
               .replace(/\{name\}/g, currency.name)
               .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", { width: "wide", 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')))));
   }
   /**
    * to reduce dom levels we will move slot data into the parent dom
@@ -129,7 +138,8 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "translationLoaded": [32],
     "languages": [32],
     "currencies": [32],
-    "isLoading": [32],
+    "hasError": [32],
+    "errorMessage": [32],
     "open": [64],
     "close": [64],
     "submit": [64]
@@ -138,7 +148,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-localization-modal", "salla-button", "salla-loading", "salla-modal", "salla-skeleton"];
+  const components = ["salla-localization-modal", "salla-button", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-localization-modal":
       if (!customElements.get(tagName)) {
@@ -147,15 +157,20 @@ function defineCustomElement$1() {
       break;
     case "salla-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "salla-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-placeholder":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

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

@@ -44,6 +44,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Does the merchant require registration with email & mobile
      */
     this.isEmailRequired = false;
+    this.currentTabName = 'home';
     this.regType = 'phone';
     this.translationLoaded = false;
     this.typing = (e, submitMethod) => {
@@ -52,15 +53,18 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-modal-error-message')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
-    this.loginBySMS = async () => {
+    this.loginBySMS = async (event = null) => {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
       const { phone, countryCode } = await this.loginTelInput.getValues();
       const isPhoneValid = await this.loginTelInput.isValid();
       if (!isPhoneValid) {
         return;
       }
       this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
+      return false;
     };
-    this.loginByEmail = () => {
+    this.loginByEmail = (event = null) => {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
       if (!Helper.isValidEmail(this.loginEmail.value)) {
         this.validateField(this.loginEmail, this.emailErrorMsg);
         return;
@@ -162,24 +166,18 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     return this.modal.open();
   }
   showTab(tab, evt) {
-    var _a, _b;
+    var _a;
     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.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
-    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 = 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'); });
+    this.currentTabName = tab.getAttribute('data-name');
+    // todo:: use better way for resize the modal
+    // setTimeout(() => this.modal.querySelector('.s-login-modal-wrapper')?.setAttribute('style', 'height:' + tab?.scrollHeight + 'px'));
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
-    let isRegistrationTab = tab == this.registrationTab;
-    (_a = tab.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus(); // focus the first input in tab
-    (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
-    if (!isRegistrationTab) {
-      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')
-        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-show', () => this.regType === 'email');
-    }
+    // this.loginTelInput.focus();
+    // tab.querySelector('input')?.focus();
+    //   setTimeout(() =>this.loginTelInput.focus(), 100);
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.currentTabName === 'registration' ? salla.lang.get('common.titles.registration') : this.title);
     return this;
   }
   login(btn, data) {
@@ -204,15 +202,32 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     field.classList.add('s-has-error');
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
+  generateTabClasses(tabName) {
+    return {
+      's-login-modal-tab': tabName !== 'registration' && tabName !== 'otp',
+      "s-hidden": this.currentTabName !== tabName,
+      "s-show": this.currentTabName === tabName,
+      's-login-modal-unactive': tabName !== 'registration' && tabName !== 'otp' && this.currentTabName !== tabName,
+      's-login-modal-active': tabName !== 'registration' && tabName !== 'otp' && this.currentTabName === tabName
+    };
+  }
+  generateRegClasses(regType) {
+    return {
+      "mb-1.5": true,
+      "s-hidden": this.regType !== regType
+    };
+  }
   render() {
+    // @ts-ignore
+    // @ts-ignore
     return (h("salla-modal", { class: "s-login-modal", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" }, h("span", { slot: 'icon', class: "s-login-modal-header-icon", innerHTML: UserIcon }), 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" }, salla.lang.get('blocks.header.select_login_way')), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }), h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('blocks.header.sms')), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("span", { class: "s-login-modal-main-btn-icon", innerHTML: email }), h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('common.elements.email')), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("slot", { name: "after-login-type" }))
+      h("div", { class: this.generateTabClasses('home'), "data-name": "home", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }), h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('blocks.header.sms')), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("span", { class: "s-login-modal-main-btn-icon", innerHTML: email }), h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('common.elements.email')), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
-      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" }, salla.lang.get('common.elements.mobile')), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
+      h("div", { class: this.generateTabClasses('login-phone'), "data-name": "login-phone", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("form", { onSubmit: () => this.loginBySMS(event), method: "POST" }, h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), h("salla-tel-input", { tabindex: "0", ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { type: "submit", "loader-position": 'center', width: "wide", 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" }, salla.lang.get('blocks.header.login_by_email')) : '', 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" }, salla.lang.get('common.elements.email')), 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("div", { class: this.generateTabClasses('login-email'), "data-name": "login-email", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), h("form", { onSubmit: () => this.loginByEmail(event), method: "POST" }, h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", enterkeyhint: "next", 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" }, salla.lang.get('blocks.header.login_by_sms'))
-        : '', 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", innerHTML: ArrowRightIcon, 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" }, salla.lang.get('blocks.header.your_name')), 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" }, salla.lang.get('pages.profile.last_name')), 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" }, salla.lang.get('common.elements.mobile')), 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" }, salla.lang.get('common.elements.email')), 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", class: this.generateTabClasses('otp'), "data-name": "otp", ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon, slot: "after-footer", href: "#" })), h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("div", null, h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')), 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" }, salla.lang.get('pages.profile.last_name')), 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", { class: this.generateRegClasses('phone') }, h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { class: this.generateRegClasses('email') }, h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), 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; }
@@ -220,6 +235,8 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "isEmailAllowed": [1028, "is-email-allowed"],
     "isMobileAllowed": [1028, "is-mobile-allowed"],
     "isEmailRequired": [1028, "is-email-required"],
+    "currentTabName": [32],
+    "regType": [32],
     "translationLoaded": [32],
     "title": [32],
     "emailErrorMsg": [32],

package/dist/components/salla-loyalty-prize-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaLoyaltyPrizeItem extends Components.SallaLoyaltyPrizeItem, HTMLElement {}
+export const SallaLoyaltyPrizeItem: {
+  prototype: SallaLoyaltyPrizeItem;
+  new (): SallaLoyaltyPrizeItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-loyalty-prize-item.js

@@ -0,0 +1,42 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const sallaLoyaltyPrizeItemCss = "salla-loyalty-prize-item:hover{box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important}";
+
+const SallaLoyaltyPrizeItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.prizeItemSelected = createEvent(this, "prizeItemSelected", 7);
+  }
+  onPrizeItemClick() {
+    this.prizeItemSelected.emit(this.item);
+  }
+  render() {
+    return (h(Host, null, h("div", { onClick: this.onPrizeItemClick.bind(this) }, h("img", { class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { class: "s-loyalty-prize-item-points" }, this.item.cost_points, " Points"))));
+  }
+  static get style() { return sallaLoyaltyPrizeItemCss; }
+}, [0, "salla-loyalty-prize-item", {
+    "item": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-loyalty-prize-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-loyalty-prize-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaLoyaltyPrizeItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaLoyaltyPrizeItem = SallaLoyaltyPrizeItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaLoyaltyPrizeItem, defineCustomElement };

package/dist/components/salla-loyalty.js

@@ -67,7 +67,7 @@ const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" vi
 
 const GiftImg = `<svg xmlns="http://www.w3.org/2000/svg" width="54.079" height="53.191" viewBox="0 0 54.079 53.191"><defs><style>.a{fill:#ee9d0d;}.b{fill:#c7830b;}.c{fill:#ea2b2d;}.d{fill:#cb2527;}.e{fill:#6699ce;}.f{fill:#faa6b2;}.g{fill:#a6deff;}.h{fill:#eeb436;}.i{fill:#f72d2f;}</style></defs><path class="a" d="M40,248H77.3v25.88a2.1,2.1,0,0,1-2.1,2.1H42.1a2.1,2.1,0,0,1-2.1-2.1Z" transform="translate(-38.135 -222.787)"/><path class="b" d="M250.632,248.711v12.755L236.2,248h13.67Z" transform="translate(-211.463 -222.787)"/><path class="b" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="c" d="M226.194,32.048l-.5.185a5.035,5.035,0,0,0-3.072,3.292l-.468,1.585-.759.414a5.035,5.035,0,0,0-2.422,3l8.865,8.271,5.09-5.456.262-6.205a5.191,5.191,0,0,0-7-5.083Z" transform="translate(-196.246 -31.722)"/><path class="c" d="M358.628,175.48l-.15.509a5.034,5.034,0,0,1-3.072,3.292l-1.55.577-.359.785a5.034,5.034,0,0,1-2.822,2.624L341.81,175l5.09-5.455,6.172-.69a5.191,5.191,0,0,1,5.555,6.629Z" transform="translate(-304.761 -152.837)"/><path class="d" d="M168,248h7.461v27.978H168Z" transform="translate(-151.213 -222.787)"/><path class="c" d="M40,336H77.3v7.461H40Z" transform="translate(-38.135 -300.528)"/><path class="d" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="a" d="M2.1,0H40.8a2.1,2.1,0,0,1,2.1,2.1V9.326H0V2.1A2.1,2.1,0,0,1,2.1,0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 18.641, 4.976)"/><path class="d" d="M0,0H9.326V9.326H0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 30.912, 16.424)"/><path class="d" d="M286.857,79.389a.931.931,0,0,1-.74-.365l-.615-.8a12.516,12.516,0,0,1-2.528-9,.933.933,0,0,1,1.855.2,10.66,10.66,0,0,0,2.153,7.667l.615.8a.933.933,0,0,1-.739,1.5Z" transform="translate(-252.718 -64.113)"/><path class="c" d="M185.485,178.151l-.039.014a30.78,30.78,0,0,1-12.034,1.906l-2.381-.1,4.092,3.817-1.181,4,3.728-1.206a30.775,30.775,0,0,0,9.833-5.315l.71-.572Z" transform="translate(-153.891 -161.081)"/><path class="d" d="M363.834,194.779a12.51,12.51,0,0,1-6.93-2.1l-.843-.559a.933.933,0,1,1,1.031-1.554l.842.558a10.659,10.659,0,0,0,7.8,1.618.933.933,0,1,1,.328,1.836A12.663,12.663,0,0,1,363.834,194.779Z" transform="translate(-316.982 -171.914)"/><path class="c" d="M275,202.524l-.012.04a30.776,30.776,0,0,0-1.069,12.137l.265,2.369-4.092-3.817-3.909,1.455.945-3.8a30.776,30.776,0,0,1,4.622-10.177l.521-.748Z" transform="translate(-237.949 -180.364)"/><circle class="e" cx="1.865" cy="1.865" r="1.865" transform="translate(10.259 0.032)"/><circle class="f" cx="1.865" cy="1.865" r="1.865" transform="translate(0 21.482)"/><path class="g" d="M36.663,36.663a.933.933,0,0,1-.885-.638l-.048-.143a2.946,2.946,0,0,0-2.8-2.017.933.933,0,1,1,0-1.865A4.808,4.808,0,0,1,37.5,35.292l.048.143a.933.933,0,0,1-.885,1.228Z" transform="translate(-31.067 -31.968)"/><path class="g" d="M79.493,194.438a.929.929,0,0,1-.506-.15l-.185-.12a2.074,2.074,0,0,0-2.192-.047.933.933,0,0,1-.947-1.607,3.929,3.929,0,0,1,4.153.088l.185.12a.933.933,0,0,1-.508,1.716Z" transform="translate(-69.235 -173.283)"/><path class="h" d="M27.751,85.141l2.88,2.644,3.811-.874-1.624,3.556,2.008,3.354-3.884-.446-2.569,2.946L27.6,92.49,24,90.957l3.4-1.922Z" transform="translate(-24 -78.914)"/><path class="h" d="M82.174,227.375l-.959,3.772,2.564,2.928-3.884.254L77.9,237.673l-1.442-3.615-3.8-.862,2.993-2.488-.353-3.876,3.291,2.078Z" transform="translate(-66.992 -204.086)"/><path class="i" d="M300.471,141.9l-5.455-5.09,5.09-5.456a8.342,8.342,0,0,1,5.455,5.09Z" transform="translate(-263.422 -119.737)"/></svg>`;
 
-const sallaLoyaltyCss = "#salla-loyalty-modal .s-swiper-button-prev button,#salla-loyalty-modal .s-swiper-button-next button{box-shadow:#32325d40 0px 6px 12px -2px, #0000004d 0px 3px 7px -3px}";
+const sallaLoyaltyCss = "";
 
 const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -78,6 +78,7 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.selectedItem = undefined;
     this.askConfirmation = false;
     this.is_loggedin = false;
+    this.hasError = false;
     /**
      * The exchanged prize point
      */
@@ -111,7 +112,8 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     });
   }
   setSelectedPrizeItem(item) {
-    if (!this.selectedItem || this.selectedItem.id != item.id) {
+    var _a;
+    if (!this.selectedItem || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id) != item.id) {
       this.selectedItem = item;
     }
     else {
@@ -125,8 +127,9 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     return text;
   }
   prizeItem(item) {
+    var _a;
     let klass = {
-      's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem.id == item.id,
+      's-loyalty-prize-item-selected': !!this.selectedItem && ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id) == item.id,
       "s-loyalty-prize-item": true
     };
     return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), h("div", { class: "s-loyalty-prize-item-title" }, item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, this.handleLongText(item.description)), h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), h("div", { class: "s-loyalty-prize-item-check" }, h("div", null))));
@@ -139,23 +142,24 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     ];
   }
   getAfterExchangeUI() {
-    return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: Cancel })))));
+    return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: Cancel })))));
   }
   /**
    * Show loyalty modal
    */
   async open() {
+    var _a;
     if (!this.is_loggedin)
       return salla.event.dispatch('login::open');
-    this.modal.open();
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.open();
     return await salla.loyalty.getProgram()
-      .then((response) => {
-      this.loyaltyProgram = response.data;
+      .then(response => this.loyaltyProgram = response.data)
+      .catch(e => {
+      var _a, _b, _c, _d;
+      this.hasError = true;
+      this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
     })
-      .catch(e => console.log(e))
-      .finally(() => {
-      this.modal.stopLoading();
-    });
+      .finally(() => { var _a; return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.stopLoading(); });
   }
   /**
    *
@@ -170,7 +174,9 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   async resetExchange() {
     return await salla.loyalty.reset()
-      .then(() => {
+      .then((response) => {
+      var _a;
+      this.customerPoints = this.customerPoints || ((_a = response.data) === null || _a === void 0 ? void 0 : _a.customer_points);
       this.prizePoints = undefined;
       this.prizeTitle = undefined;
     }).catch(e => console.log(e));
@@ -180,7 +186,7 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   async openConfirmation() {
     return await this.modal.close()
-      .then(() => this.confirmationModal.open())
+      .then(() => { var _a; return (_a = this.confirmationModal) === null || _a === void 0 ? void 0 : _a.open(); })
       .catch(e => console.log(e));
   }
   /**
@@ -197,10 +203,13 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *
    */
   async exchangeLoyaltyPoint() {
+    var _a;
     this.buttonLoading = true;
-    return await salla.loyalty.exchange(this.selectedItem.id)
+    return await salla.loyalty.exchange((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id)
       .then((response) => {
-      this.loyaltyProgram = response.data;
+      var _a, _b;
+      this.prizePoints = (_a = response === null || response === void 0 ? void 0 : response.prize) === null || _a === void 0 ? void 0 : _a.points;
+      this.prizeTitle = (_b = response === null || response === void 0 ? void 0 : response.prize) === null || _b === void 0 ? void 0 : _b.title;
     })
       .catch(e => console.log(e))
       .finally(() => {
@@ -218,13 +227,13 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         h("salla-list-tile", { class: 's-loyalty-widget' }, h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star2 }), h("div", { slot: "subtitle" }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints }) : (this.guestMessage || salla.lang.get('pages.loyalty_program.guest_message')), h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')))) :
         ''),
       h("salla-modal", { noPadding: true, width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
-      h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !!this.loyaltyProgram ?
+      h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !this.hasError && !!this.loyaltyProgram ?
         [
           h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
           h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
           h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
         ]
-        : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
+        : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : '')),
     ];
   }
   componentDidLoad() {
@@ -244,6 +253,8 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "selectedItem": [32],
     "askConfirmation": [32],
     "is_loggedin": [32],
+    "hasError": [32],
+    "errorMessage": [32],
     "translationLoaded": [32],
     "open": [64],
     "close": [64],

package/dist/components/salla-modal2.js

@@ -20,7 +20,7 @@ const CheckCircle2 = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaModalCss = "";
+const sallaModalCss = "@media screen and (max-width: 470px){.modal-is-open{position:fixed}}";
 
 const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {