@salla.sa/twilight-components 1.4.21 → 1.5.2

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

@@ -0,0 +1,156 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0167d5.js');
+const search = require('./search-b487cc49.js');
+
+const StoreAlt = `<!-- 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>store-alt</title>
+<path d="M6.667 24h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.86 10.071l-4-8c-0.227-0.452-0.688-0.737-1.193-0.737h-21.333c-0.505 0-0.967 0.285-1.193 0.737l-4 8c-0.092 0.184-0.14 0.389-0.14 0.596v18.667c0 0.737 0.597 1.333 1.333 1.333h29.333c0.736 0 1.333-0.596 1.333-1.333v-18.667c0-0.207-0.048-0.412-0.14-0.596zM6.157 4h19.685l3.333 6.667h-26.352zM24 28h-5.333v-9.333h5.333zM29.333 28h-2.667v-10.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333v10.667h-13.333v-14.667h26.667zM6.667 18.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333z"></path>
+</svg>
+`;
+
+var ModeType;
+(function (ModeType) {
+  ModeType["DEFAULT"] = "default";
+  ModeType["AVAILABILITY"] = "availability";
+})(ModeType || (ModeType = {}));
+
+const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-placeholder{flex:0 0 85%}";
+
+const SallaScopees = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.mode = ModeType.DEFAULT;
+    this.scopes = [];
+    this.originalScopesList = [];
+    this.isOpenedBefore = salla.storage.get("branch-choosed-before");
+    /**
+     * Optionally open the modal or enforce the pop-up to the viewer
+     */
+    this.selection = 'optional';
+    /**
+     * Dictates when to show the search field
+     */
+    this.searchDisplayLimit = 6;
+    this.getFormTitle = () => {
+      var _a;
+      if (((_a = this.originalScopesList) === null || _a === void 0 ? void 0 : _a.length) < 2)
+        return "";
+      return this.mode === ModeType.DEFAULT ?
+        this.shoppingFromAnotherBranch :
+        this.searchForAvailabilityInOtherBranch;
+    };
+    salla.event.on('scopes::open', ({ mode = null, product_id = null }) => {
+      this.open(mode, product_id);
+    });
+    salla.lang.onLoaded(() => {
+      this.branchNotFound = salla.lang.get("blocks.scope.branch_looking_for_not_found");
+      this.ourServiceIsNotFound = salla.lang.get("blocks.scope.our_services_not_available_in_this_branch");
+      this.searchForAvailabilityInOtherBranch = salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
+      this.shoppingFromAnotherBranch = salla.lang.get("blocks.scope.shopping_from_another_branch");
+      this.nowBrowsingFrom = salla.lang.get('blocks.scope.you_are_browse_store_from');
+      this.confirmButton = salla.lang.get('common.elements.confirm');
+      this.scopeSearchPlaceholder = salla.lang.get('blocks.scope.searching_for_a_branch');
+    });
+  }
+  async close() {
+    var _a;
+    return await ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.close());
+  }
+  async open(mode = ModeType.DEFAULT, product_id = null) {
+    this.setScopeValues([]);
+    if (typeof mode !== 'undefined' && [ModeType.AVAILABILITY, ModeType.DEFAULT].includes(mode)) {
+      this.mode = mode;
+    }
+    else {
+      this.mode = ModeType.DEFAULT;
+    }
+    this.modal.loading();
+    this.modal.open();
+    return await (mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
+      .then((resp) => {
+      if (mode == ModeType.AVAILABILITY) {
+        this.setScopeValues(resp.data);
+      }
+      else {
+        this.setScopeValues(resp.data.scopes);
+      }
+    }).catch(e => console.log(e))
+      .finally(() => {
+      this.modal.stopLoading();
+    });
+  }
+  async handleSubmit() {
+    let payload = { 'scope_id': this.current_scope.id };
+    this.changeBtn.load();
+    return await salla.scope.change(payload)
+      .then(() => {
+      salla.storage.set("branch-choosed-before", true);
+      salla.storage.set("scope", this.current_scope.id);
+      window.location.search += "&scope=" + this.current_scope.id;
+    }).catch(e => console.log(e))
+      .finally(() => {
+      this.changeBtn.stop();
+    });
+  }
+  setScopeValues(value) {
+    this.scopes = value;
+    this.originalScopesList = value;
+    if (value.length == 1) {
+      this.current_scope = value[0];
+      this.selected_scope = value[0];
+    }
+    else {
+      this.current_scope = value.find(scope => scope.selected);
+      this.selected_scope = value.find(scope => scope.selected);
+    }
+  }
+  handleSearchFieldTyping(e) {
+    let value = e.target.value.toLocaleLowerCase();
+    if (!!value) {
+      this.scopes = this.originalScopesList.filter(scope => scope.name.toLowerCase().includes(value));
+    }
+    else {
+      this.scopes = this.originalScopesList;
+    }
+  }
+  handleScopeSelection(event) {
+    this.current_scope = this.scopes.find(scope => scope.id == event.target.value);
+  }
+  placeholderContent() {
+    return index.h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, index.h("span", { slot: "title" }, this.branchNotFound), index.h("span", { slot: "description" }, this.ourServiceIsNotFound));
+  }
+  defaultContent() {
+    return [index.h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => index.h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, index.h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), index.h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, index.h("span", null, scope.name))))), this.footerContent()];
+  }
+  availabilityContent() {
+    return index.h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => {
+      var _a, _b, _c, _d, _e, _f;
+      return index.h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, index.h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } }, index.h("span", null, scope.name)), index.h("h2", { style: { 'color': (_b = (_a = scope) === null || _a === void 0 ? void 0 : _a.availability) === null || _b === void 0 ? void 0 : _b.color }, class: `s-scopes-${(_d = (_c = scope) === null || _c === void 0 ? void 0 : _c.availability) === null || _d === void 0 ? void 0 : _d.key}` }, (_f = (_e = scope) === null || _e === void 0 ? void 0 : _e.availability) === null || _f === void 0 ? void 0 : _f.label));
+    }));
+  }
+  footerContent() {
+    return index.h("div", { class: "s-scopes-footer" }, index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, this.confirmButton)));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-scopes-skeleton" }, index.h("salla-list-tile", { class: "s-scopes-header" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon" }, index.h("salla-skeleton", { type: "circle" })), index.h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-scopes-skeleton-search" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '30px', width: '100%' })), index.h("div", { class: "s-scopes-skeleton-scopes" }, index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '30%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-scopes-skeleton-btn" }, index.h("salla-skeleton", { height: '40px', width: '100%' })))), index.h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, index.h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), index.h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), index.h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), index.h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && index.h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
+      index.h("div", { class: "s-scopes-search-wrapper" }, index.h("div", { class: "s-scopes-search-icon", innerHTML: search.Search }), index.h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
+      : "", this.scopes.length < 2 ?
+      this.placeholderContent()
+      : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));
+  }
+  componentDidLoad() {
+    if (!this.isOpenedBefore && this.selection == 'mandatory') {
+      this.open();
+    }
+  }
+};
+SallaScopees.style = sallaScopesCss;
+
+exports.salla_scopes = SallaScopees;

package/dist/cjs/search-b487cc49.js

@@ -0,0 +1,13 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+const Search = `<!-- 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>search</title>
+<path d="M30.276 28.391l-7.576-7.576c1.644-2.053 2.633-4.652 2.633-7.481 0-6.616-5.384-12-12-12s-12 5.384-12 12 5.384 12 12 12c2.829 0 5.428-0.989 7.481-2.633l7.576 7.576c0.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.885zM13.333 22.667c-5.147 0-9.333-4.187-9.333-9.333s4.187-9.333 9.333-9.333 9.333 4.187 9.333 9.333-4.187 9.333-9.333 9.333z"></path>
+</svg>
+`;
+
+exports.Search = Search;

package/dist/cjs/twilight-components.cjs.js

@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"branchNotFound":[32],"ourServiceIsNotFound":[32],"searchForAvailabilityInOtherBranch":[32],"shoppingFromAnotherBranch":[32],"nowBrowsingFrom":[32],"confirmButton":[32],"scopeSearchPlaceholder":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-button_24.cjs",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"points":[32],"exchange_points":[32],"are_you_sure_to_exchange":[32],"for":[32],"cancel":[32],"confirm":[32],"cart_total_point_summary":[32],"cart_point_exchange_now":[32],"login_button":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}],[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"loading":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"direction":[1],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"onSelect","onSelectedTab"]]],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"default_title":[32],"default_description":[32]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"centered":[4],"iconStyle":[1,"icon-style"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-scopes.cjs",[[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"branchNotFound":[32],"ourServiceIsNotFound":[32],"searchForAvailabilityInOtherBranch":[32],"shoppingFromAnotherBranch":[32],"nowBrowsingFrom":[32],"confirmButton":[32],"scopeSearchPlaceholder":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]]], options);
 });

package/dist/collection/assets/svg/tag.svg

@@ -1,4 +1,3 @@
-<!-- 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>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>

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

@@ -3,6 +3,11 @@
  */
 import { Component, Element, h, Listen, Method, Prop, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import UserIcon from "../../assets/svg/user.svg";
+import PhoneIcon from "../../assets/svg/phone.svg";
+import EmailIcon from "../../assets/svg/mail.svg";
+import KeyboardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg";
 /**
  * @slot footer - The footer of modal
  * @slot before-login-type - placeholder position
@@ -192,20 +197,21 @@ export class SallaLoginModal {
     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" },
+    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("i", { class: "s-login-modal-main-btn-icon sicon-phone" }),
+              h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }),
               h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel),
-              h("i", { class: "sicon-keyboard_arrow_left arrow" })),
+              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("i", { class: "s-login-modal-main-btn-icon sicon-mail" }),
+              h("span", { class: "s-login-modal-main-btn-icon", innerHTML: EmailIcon }),
               h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel),
-              h("i", { class: "sicon-keyboard_arrow_left arrow" })),
+              h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })),
             h("slot", { name: "after-login-type" }))
           : '',
         this.isMobileAllowed ?
@@ -229,7 +235,7 @@ export class SallaLoginModal {
               : '',
             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("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,

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

@@ -5,7 +5,7 @@ import { Component, h, Method, Prop, State } from '@stencil/core';
 import Star2 from '../../assets/svg/star2.svg';
 import Star3 from '../../assets/svg/star3.svg';
 import CancelIcon from '../../assets/svg/cancel.svg';
-import GiftImg from '../../assets/flat.svg';
+import GiftImg from '../../assets/svg/flat.svg';
 export class SallaLoyalty {
   constructor() {
     this.loyaltyProgram = undefined;

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

@@ -3,6 +3,9 @@
  */
 import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import CancelIcon from '../../assets/svg/cancel.svg';
+import AlertEngineIcon from '../../assets/svg/alert-engine.svg';
+import CheckCircleIcon from '../../assets/svg/check-circle2.svg';
 /**
  * @slot footer - The footer of modal
  */
@@ -32,15 +35,8 @@ export class SallaModal {
     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());
@@ -114,17 +110,10 @@ export class SallaModal {
       '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;
   }
@@ -147,17 +136,16 @@ export class SallaModal {
       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 != '' } },
+          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", { class: "sicon-cancel" }))
+                h("span", { innerHTML: CancelIcon }))
               : '',
             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("slot", { name: 'icon' }, !!this.iconStyle ?
+                  h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircleIcon })
+                  : ''),
                 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 })))
@@ -339,30 +327,30 @@ export class SallaModal {
       "reflect": false,
       "defaultValue": "''"
     },
-    "icon": {
-      "type": "string",
+    "centered": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`"
+        "text": ""
       },
-      "attribute": "icon",
+      "attribute": "centered",
       "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "false"
     },
     "iconStyle": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'error' | 'success' | 'primary' | 'normal'",
+        "resolved": "\"error\" | \"normal\" | \"primary\" | \"success\"",
         "references": {}
       },
       "required": false,
@@ -373,25 +361,7 @@ export class SallaModal {
       },
       "attribute": "icon-style",
       "reflect": false,
-      "defaultValue": "''"
-    },
-    "imageIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "url of an image"
-      },
-      "attribute": "image-icon",
-      "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "undefined"
     }
   }; }
   static get states() { return {

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

@@ -3,6 +3,10 @@
  */
 import { Component, h, Element, Method, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import SpecialDiscountIcon from '../../assets/svg/special-discount.svg';
+import KeyboardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
+import KeyboardArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
+import Tag from "../../assets/svg/tag.svg";
 /**
  * @slot header - The top of the popup, has replaceable props `{name}`, `{message}`.
  * @slot product - Replaces product card, has replaceable props `{name}`, `{url}`, `{image}`, `{price}`.
@@ -23,7 +27,7 @@ export class SallaOfferModal {
       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)) {
@@ -73,37 +77,40 @@ export class SallaOfferModal {
   }
   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
-      ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" },
-          h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
-            ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
-                .replace(/\{name\}/g, category.name)
-                .replace(/\{url\}/g, category.urls.customer) }))
-            : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: { "s-offer-modal-product": true, "s-offer-modal-slider-item": true, "s-offer-modal-not-available": !product.is_available }, id: 'product_' + product.id, innerHTML: this.productSlot
-                .replace(/\{name\}/g, product.name)
-                .replace(/\{url\}/g, product.url)
-                .replace(/\{image\}/g, product.thumbnail)
-                .replace(/\{price\}/g, product.has_special_price
-                ? salla.money(product.price) + '<span class="s-offer-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 ?
-            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)),
-      ] : '');
+    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
+                  .replace(/\{name\}/g, product.name)
+                  .replace(/\{url\}/g, product.url)
+                  .replace(/\{image\}/g, product.thumbnail)
+                  .replace(/\{price\}/g, product.has_special_price
+                  ? salla.money(product.price) + '<span class="s-offer-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", 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)),
+        ] : '');
   }
   componentDidRender() {
     // Sooo mini Slider

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -3,6 +3,7 @@
  */
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import Helper from '../../Helpers/Helper';
+import BellRingIcon from '../../assets/svg/bell-ring.svg';
 export class SallaProductAvailability {
   constructor() {
     this.isUser = Helper.isUser();
@@ -100,7 +101,7 @@ export class SallaProductAvailability {
     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" }),
+          h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }),
           " ",
           this.subscribedMessage)
         :
@@ -108,7 +109,8 @@ export class SallaProductAvailability {
       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" },
+    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),

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

@@ -3,6 +3,8 @@
  */
 import { Component, Element, Host, State, Watch, h, Method } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import Add from "../../assets/svg/add.svg";
+import Minus from "../../assets/svg/minus.svg";
 export class SallaQuantityInput {
   constructor() {
     this.hostAttributes = {};
@@ -49,7 +51,7 @@ export class SallaQuantityInput {
    * @return HTMLSallaQuantityInputElement
    */
   async increase() {
-    return this.setValue(this.quantity + 1);
+    return this.setValue(Number(this.quantity) + 1);
   }
   /**
    * set quantity by one.
@@ -67,14 +69,15 @@ export class SallaQuantityInput {
     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" })))));
   }
   static get is() { return "salla-quantity-input"; }
   static get originalStyleUrls() { return {

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

@@ -3,6 +3,8 @@
  */
 import { Component, h, Method, Element, Host, State, Prop } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+import ShippingFast from "../../assets/svg/shipping-fast.svg";
+import CheckCircle2 from "../../assets/svg/check-circle2.svg";
 export class SallaRatingModal {
   constructor() {
     this.stepsCount = 0;
@@ -180,7 +182,7 @@ export class SallaRatingModal {
                 this.order.shipping.company.logo
                   ? h("div", { class: "s-rating-modal-rounded-icon" },
                     h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
-                  : h("span", { class: "s-rating-modal-icon sicon-shipping-fast" }),
+                  : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }),
                 h("div", { class: "s-rating-modal-title" },
                   " ",
                   this.rate_shipping + ' ' + this.order.shipping.company.name),
@@ -190,7 +192,7 @@ export class SallaRatingModal {
                 h("small", { class: "s-rating-modal-validation-msg" }))
               : '',
             h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el },
-              h("span", { class: "s-rating-modal-icon sicon-check-circle2" }),
+              h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }),
               h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks),
               h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }),
               h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), h("div", { class: "s-rating-modal-footer" },