@salla.sa/twilight-components 1.4.21 → 1.5.2

package/dist/collection/components/salla-rating-stars/salla-rating-stars.js

@@ -3,6 +3,7 @@
  */
 import { Component, Host, h, Prop, Element } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import Star2 from "../../assets/svg/star2.svg";
 export class SallaRatingStars {
   constructor() {
     this.name = 'rating';
@@ -44,10 +45,10 @@ export class SallaRatingStars {
     let stars = [];
     for (let i = 0; i < 5; i++) {
       stars.push(h("span", { class: {
-          's-rating-stars-btn-star sicon-star2': true,
+          's-rating-stars-btn-star': true,
           ['s-rating-stars-' + this.size]: true,
           's-rating-stars-selected': i < n
-        } }));
+        }, innerHTML: Star2 }));
     }
     return stars;
   }
@@ -61,7 +62,7 @@ export class SallaRatingStars {
         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" }))))));
+            h("span", { innerHTML: Star2 }))))));
   }
   componentDidLoad() {
     this.initiateRating();

package/dist/collection/components/salla-search/salla-search.js

@@ -3,6 +3,7 @@
  */
 import { Component, Prop, h, State, Element, Watch } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import Search from "../../assets/svg/search.svg";
 /**
  * @slot product - Replaces products card in the results, has replaceable props `{name}`, `{price}`, `{regular_price}`, `{image}`.
  */
@@ -10,6 +11,7 @@ export class SallaSearch {
   constructor() {
     var _a;
     this.inputValue = '';
+    this.loading = false;
     this.typing = false;
     this.debounce = setTimeout(() => '', 1000);
     this.inline = false;
@@ -64,7 +66,7 @@ export class SallaSearch {
   search(val) {
     Helper.hideElement(this.noResults);
     //run loading spinner or stop it
-    Helper.toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    this.loading = true;
     salla.product.search(val)
       .then(response => this.results = response)
       .catch(err => err !== 'Query is same as previous one!' ? this.results = undefined : null)
@@ -73,8 +75,8 @@ export class SallaSearch {
   afterSearching(isEmpty = true) {
     var _a;
     this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
-    Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
-      .toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; });
+    this.loading = false;
     salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
     this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
   }
@@ -83,7 +85,7 @@ export class SallaSearch {
     const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container },
       h("input", { type: "text", autocomplete: "off", class: "s-search-input", placeholder: this.placeholder, onInput: e => this.debounceSearch(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }),
       h("span", { class: "s-search-icon-wrap" },
-        h("i", { class: "s-search-icon sicon-search", ref: el => this.searchIcon = el })),
+        h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"></i>' : Search })),
       h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
         _a.data.map(item => h("a", { href: item.url, class: { "s-search-product": true, 's-search-product-not-available': !item.is_available }, innerHTML: this.productSlot
             .replace(/\{name\}/g, item.name)
@@ -169,6 +171,7 @@ export class SallaSearch {
     "results": {},
     "placeholder": {},
     "noResultsText": {},
+    "loading": {},
     "typing": {},
     "debounce": {},
     "search_term": {}

package/dist/collection/components/salla-social-share/salla-social-share.js

@@ -9,6 +9,8 @@ import copy_link from '../../assets/svg/link.svg';
 import email from '../../assets/svg/mail.svg';
 import whatsapp from '../../assets/svg/whatsapp.svg';
 import { Socials } from './interfaces';
+import Cancel from "../../assets/svg/cancel.svg";
+import ShareAlt from "../../assets/svg/share-alt.svg";
 export class SallaSocialShare {
   constructor() {
     this.opened = false;
@@ -79,7 +81,7 @@ export class SallaSocialShare {
     return (h("div", { class: "s-social-share-wrapper" },
       h("slot", { name: 'widget' },
         h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" },
-          h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))),
+          h("span", { innerHTML: this.opened ? Cancel : ShareAlt }))),
       h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
         return (h("li", { ref: el => this.platformItem = el },
           h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {

package/dist/collection/components/salla-swiper/salla-swiper.css

@@ -174,27 +174,4 @@
 
 .s-swiper {
   position: relative;
-}
-
-.s-swiper-container {
-  padding-top: 5px;
-}
-
-.s-swiper-button-next {
-  right: -25px !important;
-}
-
-.s-swiper-button-prev {
-  left: -25px !important;
-}
-
-.s-swiper-button-prev,
-.s-swiper-button-next {
-  position: absolute;
-  top: 50%;
-  z-index: 3;
-}
-
-.s-swiper-button-icon {
-  color: black !important;
 }

package/dist/collection/components/salla-swiper/salla-swiper.js

@@ -3,6 +3,8 @@
  */
 import { Component, State, Prop, h } from '@stencil/core';
 import Swiper from 'swiper';
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg";
+import ArrowLeftIcon from "../../assets/svg/arrow-left.svg";
 export class SallaSwiper {
   constructor() {
     // slider-options
@@ -38,10 +40,10 @@ export class SallaSwiper {
     return (h("div", { class: "s-swiper", dir: this.direction },
       h("div", { class: "s-swiper-button-prev" },
         h("salla-button", { disabled: (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.isBeginning, shape: "icon", color: "light", onClick: () => this.swiper.slidePrev() },
-          h("i", { class: "sicon-arrow-left s-swiper-button-icon" }))),
+          h("span", { class: "s-swiper-button-icon", innerHTML: ArrowLeftIcon }))),
       h("div", { class: "s-swiper-button-next" },
         h("salla-button", { disabled: (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.isEnd, shape: "icon", color: "light", onClick: () => this.swiper.slideNext() },
-          h("i", { class: "sicon-arrow-right s-swiper-button-icon" }))),
+          h("span", { class: "s-swiper-button-icon", innerHTML: ArrowRightIcon }))),
       h("div", { class: "swiper" },
         h("div", { class: "swiper-container s-swiper-container", ref: el => this.swiperContainer = el },
           h("div", { class: "swiper-wrapper s-swiper-wrapper", ref: el => this.swiperWrapper = el },

package/dist/collection/components/salla-tel-input/salla-tel-input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /*
 * Salla Tel Input Component: used to get the telephone input, in login and register steps and also in user profile.
 */
@@ -76,7 +75,7 @@
   transform: translateY(-50%);
 }
 .iti__arrow:after {
-  content: "";
+  content: "\e96d";
   font-family: sallaicons;
   font-size: 16px;
   color: #999;

package/dist/collection/components/salla-verify/salla-verify.js

@@ -3,6 +3,7 @@
  */
 import { Component, Host, Element, Event, h, Method, Prop, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import AndroidPhoneIcon from '../../assets/svg/android-phone.svg';
 /**
  * @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer
  * @slot after-footer - placeholder position
@@ -151,7 +152,9 @@ export class SallaVerify {
   }
   render() {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
-      h("salla-modal", { icon: "sicon-android-phone", width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, this.myBody());
+      h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title },
+        h("span", { slot: 'icon', innerHTML: AndroidPhoneIcon }),
+        this.myBody());
   }
   myBody() {
     return (h("div", { class: "s-verify-body", ref: body => this.body = body },

package/dist/components/arrow-right.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const ArrowRightIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-right</title>
+<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>
+</svg>
+`;
+
+export { ArrowRightIcon as A };

package/dist/components/cancel.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const Cancel = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>cancel</title>
+<path d="M17.885 16l7.057-7.057c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-7.057 7.057-7.057-7.057c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l7.057 7.057-7.057 7.057c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l7.057-7.057 7.057 7.057c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>
+</svg>
+`;
+
+export { Cancel as C };

package/dist/components/keyboard_arrow_right.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const KeyboardArrowRightIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>keyboard_arrow_right</title>
+<path d="M11.438 22.479l6.125-6.125-6.125-6.125 1.875-1.875 8 8-8 8z"></path>
+</svg>
+`;
+
+export { KeyboardArrowRightIcon as K };

package/dist/components/mail.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const email = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>mail</title>
+<path d="M28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-12.685l10.54 4.865c0.888 0.409 1.84 0.613 2.793 0.613s1.907-0.204 2.793-0.615l10.54-4.864zM29.333 9.711l-11.657 5.38c-1.065 0.492-2.288 0.492-3.353 0l-11.656-5.38v-3.044c0-0.735 0.599-1.333 1.333-1.333h24c0.735 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+export { email as e };

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

@@ -3,12 +3,29 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
+import { e as email } from './mail.js';
+import { K as KeyboardArrowRightIcon } from './keyboard_arrow_right.js';
+import { A as ArrowRightIcon } from './arrow-right.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-tel-input2.js';
 import { d as defineCustomElement$2 } from './salla-verify2.js';
 
+const UserIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user</title>
+<path d="M16 16c4.412 0 8-3.588 8-8s-3.588-8-8-8-8 3.588-8 8 3.588 8 8 8zM16 2.667c2.941 0 5.333 2.392 5.333 5.333s-2.392 5.333-5.333 5.333-5.333-2.392-5.333-5.333 2.392-5.333 5.333-5.333zM16 18.667c-7.476 0-13.333 3.66-13.333 8.333v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-3.019 4.984-5.667 10.667-5.667s10.667 2.648 10.667 5.667v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-4.673-5.857-8.333-13.333-8.333z"></path>
+</svg>
+`;
+
+const PhoneIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>phone</title>
+<path d="M30.823 21.713l-3.883-3.883c-1.569-1.568-4.12-1.568-5.689 0l-2.568 2.568c-3.063-1.499-5.583-4.019-7.081-7.083l2.568-2.567c0.759-0.76 1.177-1.771 1.177-2.845s-0.419-2.084-1.179-2.844l-3.881-3.881c-1.52-1.521-4.171-1.521-5.689 0l-1.845 1.847c-2.22 2.219-3.183 5.407-2.573 8.527 1.98 10.144 10.125 18.292 20.269 20.271 0.616 0.121 1.236 0.18 1.849 0.18 2.492 0 4.896-0.972 6.677-2.752l1.847-1.847c1.568-1.571 1.568-4.121 0.001-5.691zM28.936 25.517l-1.845 1.847c-1.592 1.592-3.883 2.283-6.132 1.841-9.089-1.776-16.388-9.075-18.163-18.165-0.439-2.247 0.249-4.539 1.841-6.129l1.847-1.847c0.256-0.257 0.596-0.397 0.959-0.397s0.703 0.14 0.959 0.397l3.883 3.883c0.256 0.256 0.397 0.596 0.397 0.959s-0.141 0.703-0.397 0.96l-3.22 3.217c-0.383 0.384-0.496 0.959-0.287 1.457 1.813 4.339 5.343 7.868 9.683 9.684 0.497 0.207 1.073 0.095 1.457-0.288l3.22-3.22c0.529-0.529 1.389-0.528 1.917 0l3.881 3.883c0.528 0.529 0.528 1.389 0 1.919z"></path>
+</svg>
+`;
+
 const sallaLoginModalCss = "";
 
 const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -191,14 +208,14 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h("salla-modal", { id: "salla-login", icon: "sicon-user", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("slot", { name: "after-login-type" }))
+    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" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), 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" }, this.emailLabel), 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" }, this.mobileLabel), 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("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", { 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" })))));
+        : '', 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" }, 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; }

package/dist/components/salla-loyalty.js

@@ -2,6 +2,8 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { S as Star2 } from './star2.js';
+import { C as Cancel } from './cancel.js';
 import { d as defineCustomElement$b } from './salla-button2.js';
 import { d as defineCustomElement$a } from './salla-list-tile2.js';
 import { d as defineCustomElement$9 } from './salla-loading2.js';
@@ -13,13 +15,6 @@ import { d as defineCustomElement$4 } from './salla-tab-content2.js';
 import { d as defineCustomElement$3 } from './salla-tab-header2.js';
 import { d as defineCustomElement$2 } from './salla-tabs2.js';
 
-const Star2 = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
-<title>star2</title>
-<path d="M29.714 11.839c0 0.321-0.232 0.625-0.464 0.857l-6.482 6.321 1.536 8.929c0.018 0.125 0.018 0.232 0.018 0.357 0 0.464-0.214 0.893-0.732 0.893-0.25 0-0.5-0.089-0.714-0.214l-8.018-4.214-8.018 4.214c-0.232 0.125-0.464 0.214-0.714 0.214-0.518 0-0.75-0.429-0.75-0.893 0-0.125 0.018-0.232 0.036-0.357l1.536-8.929-6.5-6.321c-0.214-0.232-0.446-0.536-0.446-0.857 0-0.536 0.554-0.75 1-0.821l8.964-1.304 4.018-8.125c0.161-0.339 0.464-0.732 0.875-0.732s0.714 0.393 0.875 0.732l4.018 8.125 8.964 1.304c0.429 0.071 1 0.286 1 0.821z"></path>
-</svg>
-`;
-
 const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
 <title>star3</title>
   <defs>
@@ -70,13 +65,6 @@ const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" vi
 </svg>
 `;
 
-const CancelIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>cancel</title>
-<path d="M17.885 16l7.057-7.057c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-7.057 7.057-7.057-7.057c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l7.057 7.057-7.057 7.057c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l7.057-7.057 7.057 7.057c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>
-</svg>
-`;
-
 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}";
@@ -162,7 +150,7 @@ 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: CancelIcon })))));
+    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 })))));
   }
   /**
    * Show loyalty modal

package/dist/components/salla-modal2.js

@@ -3,8 +3,23 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
+import { C as Cancel } from './cancel.js';
 import { d as defineCustomElement$1 } from './salla-loading2.js';
 
+const AlertEngineIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>alert-engine</title>
+<path d="M16 18.673c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM2.667 16c0-3.092 1.083-6.105 3.047-8.484 0.469-0.568 0.389-1.408-0.179-1.877-0.568-0.468-1.408-0.388-1.877 0.179-2.359 2.857-3.657 6.473-3.657 10.183s1.299 7.325 3.657 10.183c0.264 0.319 0.645 0.484 1.029 0.484 0.299 0 0.6-0.1 0.848-0.305 0.568-0.469 0.648-1.309 0.179-1.877-1.964-2.379-3.047-5.392-3.047-8.484zM16 10.667c-0.736 0-1.333 0.597-1.333 1.333v4c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-0.736-0.597-1.333-1.333-1.333zM16 5.333c-5.881 0-10.667 4.785-10.667 10.667s4.785 10.667 10.667 10.667 10.667-4.785 10.667-10.667-4.785-10.667-10.667-10.667zM16 24c-4.412 0-8-3.588-8-8s3.588-8 8-8 8 3.588 8 8-3.588 8-8 8zM28.343 5.817c-0.469-0.567-1.307-0.647-1.877-0.179-0.568 0.469-0.648 1.309-0.179 1.877 1.964 2.379 3.047 5.392 3.047 8.484s-1.083 6.105-3.047 8.484c-0.469 0.568-0.389 1.408 0.179 1.877 0.249 0.205 0.549 0.305 0.848 0.305 0.384 0 0.765-0.165 1.028-0.484 2.36-2.857 3.659-6.473 3.659-10.183s-1.299-7.325-3.657-10.183z"></path>
+</svg>
+`;
+
+const CheckCircle2 = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>check-circle2</title>
+<path d="M29.333 14.133c-0.8 0-1.333 0.533-1.333 1.333v1.2c0 6.667-5.333 12-12 12 0 0 0 0 0 0-6.667 0-12-5.333-12-12s5.333-12 12-12c0 0 0 0 0 0 1.733 0 3.333 0.4 4.933 1.067 0.667 0.267 1.467 0 1.733-0.667s0-1.467-0.667-1.733c-1.867-0.8-3.867-1.333-6-1.333 0 0 0 0 0 0-8.133 0-14.667 6.533-14.667 14.667s6.533 14.667 14.667 14.667c0 0 0 0 0 0 8.133 0 14.667-6.533 14.667-14.667v-1.2c0-0.8-0.533-1.333-1.333-1.333zM12.933 14.4c-0.533-0.533-1.333-0.533-1.867 0s-0.533 1.333 0 1.867l4 4c0.267 0.267 0.533 0.4 0.933 0.4s0.667-0.133 0.933-0.4l13.333-13.333c0.533-0.533 0.533-1.333 0-1.867s-1.333-0.533-1.867 0l-12.4 12.4-3.067-3.067z"></path>
+</svg>
+`;
+
 const sallaModalCss = "";
 
 const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -35,15 +50,8 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.subTitleFirst = false; //todo:: choose better name
     this.noPadding = false; //todo:: choose better name
     this.subTitle = '';
-    /**
-     * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
-     */
-    this.icon = '';
-    this.iconStyle = '';
-    /**
-     * url of an image
-     */
-    this.imageIcon = '';
+    this.centered = false;
+    this.iconStyle = undefined;
     Helper.setHost(this.host);
     salla.event.on('modal::open', target => target == this.host.id && this.open());
     salla.event.on('modal::close', target => target == this.host.id && this.close());
@@ -117,17 +125,10 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       's-modal-icon': true,
       's-modal-bg-error': this.iconStyle == 'error',
       's-modal-bg-success': this.iconStyle == 'success',
-      's-modal-bg-normal': this.iconStyle != 'error' && this.iconStyle != 'success',
+      's-modal-bg-normal': !this.iconStyle,
       's-modal-bg-primary': this.iconStyle == 'primary'
     };
   }
-  iconClasses() {
-    return {
-      [this.icon]: true,
-      'sicon-alert-engine': !this.icon && this.iconStyle == 'error' && !this.imageIcon,
-      'sicon-check-circle2': !this.icon && this.iconStyle == 'success' && !this.imageIcon,
-    };
-  }
   getWidth() {
     return this.isLoading ? (this.hasSkeleton ? 'md' : 'xs') : this.width;
   }
@@ -137,12 +138,12 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (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.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
     }
-    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.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, 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" }))
+    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.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.isClosable ?
+      h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { innerHTML: 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" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
+        h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
+        : ''), 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" })))));
   }
   //move the modal as root dom, because we need the model to be outside the forms
@@ -164,9 +165,8 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "subTitleFirst": [4, "sub-title-first"],
     "noPadding": [4, "no-padding"],
     "subTitle": [1, "sub-title"],
-    "icon": [1],
+    "centered": [4],
     "iconStyle": [1, "icon-style"],
-    "imageIcon": [1, "image-icon"],
     "modalTitle": [32],
     "open": [64],
     "close": [64],
@@ -194,4 +194,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { SallaModal as S, defineCustomElement as d };
+export { CheckCircle2 as C, SallaModal as S, defineCustomElement as d };

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

@@ -3,10 +3,31 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
+import { K as KeyboardArrowRightIcon } from './keyboard_arrow_right.js';
 import { d as defineCustomElement$4 } from './salla-button2.js';
 import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 
+const SpecialDiscountIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>special-discount</title>
+<path d="M20.667 19.333c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM11.333 12.673c0.737 0 1.333-0.603 1.333-1.34s-0.596-1.333-1.333-1.333-1.333 0.596-1.333 1.333v0.013c0 0.736 0.596 1.327 1.333 1.327zM30.307 16l0.947-4.244c0.107-0.473-0.055-0.969-0.417-1.291l-3.259-2.876-1.732-3.987c-0.193-0.444-0.612-0.749-1.095-0.796l-4.327-0.417-3.748-2.204c-0.416-0.248-0.933-0.248-1.353 0l-3.744 2.204-4.329 0.417c-0.483 0.047-0.901 0.352-1.095 0.796l-1.732 3.987-3.259 2.877c-0.363 0.321-0.525 0.816-0.417 1.289l0.947 4.244-0.947 4.244c-0.107 0.473 0.055 0.969 0.417 1.291l3.259 2.876 1.732 3.987c0.193 0.444 0.612 0.749 1.095 0.796l4.325 0.416 3.749 2.207c0.208 0.123 0.441 0.184 0.676 0.184s0.468-0.061 0.676-0.185l3.747-2.205 4.328-0.416c0.483-0.045 0.903-0.351 1.095-0.796l1.732-3.985 3.259-2.877c0.363-0.321 0.525-0.816 0.417-1.291zM28.48 20.056l-2.892 2.552c-0.145 0.131-0.261 0.291-0.34 0.469l-1.536 3.536-3.84 0.369c-0.195 0.019-0.381 0.080-0.551 0.179l-3.321 1.959-3.324-1.959c-0.168-0.099-0.356-0.16-0.549-0.179l-3.839-0.369-1.536-3.537c-0.077-0.18-0.195-0.339-0.34-0.469l-2.892-2.551 0.84-3.765c0.043-0.192 0.043-0.389 0-0.581l-0.84-3.765 2.892-2.551c0.145-0.131 0.263-0.289 0.34-0.469l1.536-3.539 3.84-0.369c0.195-0.019 0.381-0.080 0.549-0.179l3.323-1.957 3.325 1.957c0.167 0.099 0.355 0.16 0.548 0.179l3.839 0.369 1.536 3.539c0.077 0.18 0.195 0.339 0.34 0.469l2.892 2.551-0.84 3.765c-0.043 0.192-0.043 0.389 0 0.581zM20.391 9.724l-10.667 10.667c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l10.667-10.667c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0z"></path>
+</svg>
+`;
+
+const KeyboardArrowLeftIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>keyboard_arrow_left</title>
+<path d="M20.563 22.104l-1.875 1.875-8-8 8-8 1.875 1.875-6.125 6.125z"></path>
+</svg>
+`;
+
+const Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tag</title>
+<path d="M28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>
+</svg>
+`;
+
 const sallaOfferModalCss = "";
 
 const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -26,7 +47,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
       this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     });
-    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
+    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
     this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
     salla.product.event.onOfferExisted(offer => {
       if (salla.storage.get('remember-offer-' + offer.id)) {
@@ -76,9 +97,10 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { "sub-title-first": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.offer !== null
       ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
+              .replace(/\{tagIcon\}/g, Tag)
               .replace(/\{name\}/g, category.name)
               .replace(/\{url\}/g, category.urls.customer) }))
           : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: { "s-offer-modal-product": true, "s-offer-modal-slider-item": true, "s-offer-modal-not-available": !product.is_available }, id: 'product_' + product.id, innerHTML: this.productSlot
@@ -87,7 +109,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
               .replace(/\{image\}/g, product.thumbnail)
               .replace(/\{price\}/g, product.has_special_price
               ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
-              : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })))), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
+              : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowLeftIcon })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowRightIcon })))), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
           h("p", { class: "s-offer-modal-expiry" }, this.offer_expires_in, " ", this.offer.formatted_date)
           : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", this.remember_my_choice)),
       ] : '');

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

@@ -8,6 +8,13 @@ import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 import { d as defineCustomElement$1 } from './salla-tel-input2.js';
 
+const BellRingIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bell-ring</title>
+<path d="M2.667 13.333v-4c0-2.592 0.748-5.107 2.161-7.271 0.404-0.616 0.231-1.443-0.387-1.845-0.616-0.401-1.443-0.228-1.845 0.388-1.699 2.599-2.596 5.617-2.596 8.728v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333zM25.333 15.647v-6.313c0-5.147-4.188-9.333-9.333-9.333s-9.333 4.187-9.333 9.333v6.312l-5.157 9.027c-0.236 0.413-0.235 0.92 0.004 1.331 0.239 0.412 0.679 0.664 1.153 0.664h8c0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333h8c0.475 0 0.915-0.252 1.153-0.664 0.239-0.411 0.24-0.917 0.004-1.331zM16 29.333c-1.471 0-2.667-1.196-2.667-2.667h5.333c0 1.472-1.196 2.667-2.667 2.667zM4.965 24l4.193-7.339c0.113-0.2 0.175-0.429 0.175-0.661v-6.667c0-3.676 2.991-6.667 6.667-6.667s6.667 2.991 6.667 6.667v6.667c0 0.232 0.061 0.46 0.176 0.661l4.192 7.339zM29.403 0.603c-0.403-0.616-1.232-0.789-1.845-0.387-0.617 0.403-0.791 1.229-0.387 1.845 1.415 2.165 2.163 4.68 2.163 7.272v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-3.112-0.899-6.132-2.597-8.731z"></path>
+</svg>
+`;
+
 const sallaProductAvailabilityCss = "";
 
 const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -107,12 +114,12 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
   }
   render() {
     return (h(Host, { class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
-      ? h("div", { class: "s-product-availability-subscribed" }, h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
+      ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), " ", this.subscribedMessage)
       :
         h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.open(), ref: btn => this.inlineBtn = btn }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
   }
   renderModal() {
-    return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "sm" }, h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+    return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: this.subTitle, width: "sm" }, h("span", { slot: 'icon', innerHTML: BellRingIcon }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       h("label", { class: "s-product-availability-label" }, this.emailLabel),
       h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" }),
       h("span", { class: "s-product-availability-error-msg" })

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

@@ -4,6 +4,20 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
 
+const Add = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>add</title>
+<path d="M26.667 14.667h-9.333v-9.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v9.333h-9.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h9.333v9.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.333h9.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+const Minus = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>minus</title>
+<path d="M26.667 14.667h-21.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h21.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
 const sallaQuantityInputCss = "";
 
 const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -54,7 +68,7 @@ const SallaQuantityInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @return HTMLSallaQuantityInputElement
    */
   async increase() {
-    return this.setValue(this.quantity + 1);
+    return this.setValue(Number(this.quantity) + 1);
   }
   /**
    * set quantity by one.
@@ -72,7 +86,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-increase-button 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-decrease-button 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" }, h("div", { class: "s-quantity-input-container" }, h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: 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 s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { name: "decrement-button" })))));
   }
   get host() { return this; }
   static get watchers() { return {