@salla.sa/twilight-components 1.0.43 → 1.0.45

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaSearch = require('./salla-search-ccb22487.js');
+const sallaSearch = require('./salla-search-6f5cbe1d.js');
 require('./index-0b5b5867.js');
 require('./Helper-98cc9f18.js');
 

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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],"show":[64]},[[0,"verified","onVerified"]]],[0,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"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]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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],"show":[64]},[[0,"verified","onVerified"]]],[0,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"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]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
   });
 };
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
 
-const sallaBranchesCss = ":host{display:block}";
+const sallaBranchesCss = "";
 
 const SallaBranches = class {
   constructor(hostRef) {

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
-const sallaSearch = require('./salla-search-ccb22487.js');
+const sallaSearch = require('./salla-search-6f5cbe1d.js');
 
-const sallaButtonCss = ":host{display:block}";
+const sallaButtonCss = "";
 
 const SallaButton = class {
   constructor(hostRef) {
@@ -98,7 +98,7 @@ const SallaButton = class {
   render() {
     return (
     //TODO:: use HOST then fake button behaviours
-    index.h(index.Host, { class: "s-button-host-tag" }, index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: {
+    index.h(index.Host, { class: "s-button-wrap" }, index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: {
         //todo::use united styles
         's-button-loader': true,
         's-button-loader-start': this.loaderPosition === 'start',
@@ -114,6 +114,8 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+const sallaLocalizationCss = "";
+
 const SallaLocalization = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -207,6 +209,7 @@ const SallaLocalization = class {
   }
   get host() { return index.getElement(this); }
 };
+SallaLocalization.style = sallaLocalizationCss;
 
 const sallaModalCss = "";
 
@@ -336,7 +339,7 @@ const SallaModal = class {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (index.h(index.Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
+    return (index.h(index.Host, { class: 'salla-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
       index.h("div", { class: "s-modal-loader-wrap" }, index.h("span", { class: "s-modal-loader" }))
       :
         [
@@ -1731,6 +1734,8 @@ var intlTelInput$1 = createCommonjsModule(function (module) {
  */
 var intlTelInput = intlTelInput$1;
 
+const sallaTelInputCss = "";
+
 const SallaTelInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1819,15 +1824,18 @@ const SallaTelInput = class {
   }
   ;
   render() {
-    return (index.h(index.Host, null, index.h("input", { type: "tel", name: "mobile", value: this.mobile, ref: el => this.phoneInput = el, class: "s-tel-input-control  tel-input s-ltr" }), index.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), index.h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+    return (index.h(index.Host, { id: "s-tel-input" }, index.h("input", { type: "tel", name: "mobile", value: this.mobile, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), index.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), index.h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
   }
   componentDidLoad() {
     this.initTelInput();
   }
   get host() { return index.getElement(this); }
 };
+SallaTelInput.style = sallaTelInputCss;
+
+const sallaVerifyModalCss = "";
 
-const SallaVerify = class {
+const SallaVerifyModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.verified = index.createEvent(this, "verified", 7);
@@ -1871,10 +1879,10 @@ const SallaVerify = class {
     var _a;
     this.data = data;
     this.resendTimer();
-    this.otpInputs = this.host.querySelectorAll('.s-verify-input');
+    this.otpInputs = this.host.querySelectorAll('.s-verify-modal-input');
     if (!this.initiated) {
-      Helper.Helper.on('input', '.s-verify-input', e => salla.helpers.digitsOnly(e.target));
-      Helper.Helper.onKeyUp('.s-verify-input', event => {
+      Helper.Helper.on('input', '.s-verify-modal-input', e => salla.helpers.digitsOnly(e.target));
+      Helper.Helper.onKeyUp('.s-verify-modal-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
         if (event.target.value) {
@@ -1887,7 +1895,7 @@ const SallaVerify = class {
         }
         this.toggleOTPSubmit();
       });
-      Helper.Helper.on('paste', '.s-verify-input', event => {
+      Helper.Helper.on('paste', '.s-verify-modal-input', event => {
         let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
         this.otpInputs.forEach((input, i) => input.value = text[i] || '');
         this.toggleOTPSubmit();
@@ -1956,19 +1964,14 @@ const SallaVerify = class {
   }
   render() {
     return this.withoutModal ? this.myBody() :
-      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify", ref: modal => this.modal = modal, title: this.title }, this.myBody());
+      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify-modal", ref: modal => this.modal = modal, title: this.title }, this.myBody());
   }
   myBody() {
-    return [
-      index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
-      index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
-      index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
-      index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
-      index.h("slot", { name: "after-footer" })
-    ];
+    return (index.h(index.Host, { id: "s-verify-modal" }, index.h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-modal-footer" }, index.h("salla-button", { class: "s-verify-modal-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
   }
   get host() { return index.getElement(this); }
 };
+SallaVerifyModal.style = sallaVerifyModalCss;
 
 exports.salla_login = sallaSearch.SallaLogin;
 exports.salla_search = sallaSearch.SallaSearch;
@@ -1976,4 +1979,4 @@ exports.salla_button = SallaButton;
 exports.salla_localization = SallaLocalization;
 exports.salla_modal = SallaModal;
 exports.salla_tel_input = SallaTelInput;
-exports.salla_verify = SallaVerify;
+exports.salla_verify_modal = SallaVerifyModal;

package/dist/cjs/salla-infinite-scroll.cjs.entry.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
+const sallaInfiniteScrollCss = "";
+
 const SallaInfiniteScroll = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -31,9 +33,9 @@ const SallaInfiniteScroll = class {
         <p class="s-infinite-scroll-last infinite-scroll-last"></p>
         <p class="s-infinite-scroll-error infinite-scroll-error"></p>
       </div>
-      <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
-        <span class="s-button-text">${salla.lang.get('common.elements.load_more')}</span>
-        <span class="s-button-loader s-button-loader-center" style="display: none"></span>
+      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn btn--has-loading s-button-primary">
+        <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
+        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
     salla.event.on('languages::translations.loaded', () => {
@@ -86,5 +88,6 @@ const SallaInfiniteScroll = class {
   }
   get host() { return index.getElement(this); }
 };
+SallaInfiniteScroll.style = sallaInfiniteScrollCss;
 
 exports.salla_infinite_scroll = SallaInfiniteScroll;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaOfferCss = ".s-offer-body{-webkit-overflow-scrolling:touch}.s-offer-body::-webkit-scrollbar{display:none}.s-offer-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}.s-offer-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
+const sallaOfferCss = "#salla-offer-modal .s-offer-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
 
 const SallaOffer = class {
   constructor(hostRef) {
@@ -68,7 +68,7 @@ const SallaOffer = class {
   }
   render() {
     var _a, _b;
-    return index.h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return index.h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [index.h("div", { class: "s-offer-scrolled-slider-wrap" }, index.h("div", { class: "s-offer-body s-offer-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => index.h("a", { href: category.urls.customer, class: "s-offer-badge s-offer-slider-item", innerHTML: this.categorySlot
               .replace(/\{name\}/g, category.name)

package/dist/cjs/salla-product-availability.cjs.entry.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
+const sallaProductAvailabilityCss = "";
+
 const SallaProductAvailability = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -89,7 +91,7 @@ const SallaProductAvailability = class {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (index.h(index.Host, null, this.isSubscribed || this.isVisitorSubscribed
+    return (index.h(index.Host, { id: "s-product-availability" }, this.isSubscribed || this.isVisitorSubscribed
       ? index.h("div", { class: "s-product-availability-subscribed" }, index.h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
       : index.h("slot", null, index.h("salla-button", { onClick: () => this.isUser ? this.submit() : this.modal.show(), wide: true, ref: btn => this.inlineBtn = btn }, salla.lang.get('pages.products.notify_availability'))), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
   }
@@ -108,5 +110,6 @@ const SallaProductAvailability = class {
     "channels": ["channelsWatcher"]
   }; }
 };
+SallaProductAvailability.style = sallaProductAvailabilityCss;
 
 exports.salla_product_availability = SallaProductAvailability;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
+const sallaRatingCss = "#s-rating .unicode{unicode-bidi:plaintext}";
 
 const SallaRating = class {
   constructor(hostRef) {
@@ -202,7 +202,7 @@ const SallaRating = class {
   }
   // render
   render() {
-    return (index.h(index.Host, null, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+    return (index.h(index.Host, { id: "s-rating" }, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
       ? [index.h("div", { class: "s-rating-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
           index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "store" }, index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, this.rate_the_store), index.h("div", { class: "s-rating-stars-company" }, " ", this.renderRatingStars('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: this.write_store_rate }), index.h("small", { class: "s-rating-validation-msg" }))
           : '', this.order.products_enabled

package/dist/cjs/{salla-search-ccb22487.js → salla-search-6f5cbe1d.js}

@@ -181,13 +181,13 @@ const SallaLogin = class {
       index.h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
       index.h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-error-message" }), index.h("label", { class: "s-login-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-error-message" }), index.h("label", { class: "s-login-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
 };
 SallaLogin.style = sallaLoginCss;
 
-const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:1rem}";
+const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
 
 const SallaSearch = class {
   constructor(hostRef) {

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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],"show":[64]},[[0,"verified","onVerified"]]],[0,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"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]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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],"show":[64]},[[0,"verified","onVerified"]]],[0,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"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]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -11,7 +11,7 @@
     "./components/salla-product-availability/salla-product-availability.js",
     "./components/salla-rating/salla-rating.js",
     "./components/salla-tel-input/salla-tel-input.js",
-    "./components/salla-verify/salla-verify.js"
+    "./components/salla-verify-modal/salla-verify-modal.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -7,6 +7,7 @@
 /**
  * Delivered variables
  */
-:host {
-  display: block;
-}
+/*
+* Salla Branches Component: Store branches & warehouses popup modal
+* You can use these classes to target the elements in the component.
+*/

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

@@ -1,3 +1,13 @@
-:host {
-  display: block;
-}
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Button Component: has many sizes, styles and loading state.
+* You can use these classes to target the elements in the component.
+*/

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

@@ -89,7 +89,7 @@ export class SallaButton {
   render() {
     return (
     //TODO:: use HOST then fake button behaviours
-    h(Host, { class: "s-button-host-tag" },
+    h(Host, { class: "s-button-wrap" },
       h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes),
         h("span", { class: "s-button-text", ref: el => this.text = el },
           h("slot", null)),
@@ -103,7 +103,7 @@ export class SallaButton {
   }
   static get is() { return "salla-button"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-button.css"]
+    "$": ["salla-button.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["salla-button.css"]

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.css

@@ -0,0 +1,13 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Infinite Scroll Component: used in latest-products page, comments, brands, orders and so on..
+* You can use these classes to target the elements in the component.
+*/

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -27,9 +27,9 @@ export class SallaInfiniteScroll {
         <p class="s-infinite-scroll-last infinite-scroll-last"></p>
         <p class="s-infinite-scroll-error infinite-scroll-error"></p>
       </div>
-      <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
-        <span class="s-button-text">${salla.lang.get('common.elements.load_more')}</span>
-        <span class="s-button-loader s-button-loader-center" style="display: none"></span>
+      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn btn--has-loading s-button-primary">
+        <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
+        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
     salla.event.on('languages::translations.loaded', () => {
@@ -82,6 +82,12 @@ export class SallaInfiniteScroll {
       .on('error', () => this.loading(false));
   }
   static get is() { return "salla-infinite-scroll"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-infinite-scroll.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-infinite-scroll.css"]
+  }; }
   static get properties() { return {
     "nextPage": {
       "type": "string",

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

@@ -0,0 +1,13 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Localization Component: Languages & Currencies popup modal
+* You can use these classes to target the elements in the component.
+*/

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

@@ -108,6 +108,12 @@ export class SallaLocalization {
     this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
   }
   static get is() { return "salla-localization"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-localization.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-localization.css"]
+  }; }
   static get states() { return {
     "languages": {},
     "currencies": {},

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

@@ -7,6 +7,10 @@
 /**
  * Delivered variables
  */
+/*
+* Salla Login Component: login popup modal
+* You can use these classes to target the elements in the component.
+*/
 salla-verify {
   display: block;
 }

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

@@ -215,7 +215,7 @@ export class SallaLogin {
             this.isMobileAllowed ?
               h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '',
             h("slot", { name: "after-login-email" })) : '',
-        h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false },
+        h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false },
           h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })),
         h("div", { ref: tab => this.registrationTab = tab },
           h("slot", { name: "before-registration" }),

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

@@ -0,0 +1,13 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Modal Component: popup modal used in most parts of the theme
+* You can use these classes to target the elements in the component.
+*/

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

@@ -126,7 +126,7 @@ export class SallaModal {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
+    return (h(Host, { class: 'salla-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
       h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
       h("div", { class: "s-modal-wrapper" },
         h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),

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

@@ -7,17 +7,19 @@
 /**
  * Delivered variables
  */
-.s-offer-body {
+/*
+* Salla Offer Modal Component: popup modal to display the offers
+* You can use these classes to target the elements in the component.
+*/
+#salla-offer-modal .s-offer-body {
   -webkit-overflow-scrolling: touch;
 }
-.s-offer-body::-webkit-scrollbar {
+#salla-offer-modal .s-offer-body::-webkit-scrollbar {
   display: none;
 }
-
-.s-offer-next-btn {
+#salla-offer-modal .s-offer-next-btn {
   background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
 }
-
-.s-offer-prev-btn {
+#salla-offer-modal .s-offer-prev-btn {
   background: linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
 }

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

@@ -65,7 +65,7 @@ export class SallaOffer {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
       ? [h("div", { class: "s-offer-scrolled-slider-wrap" },
           h("div", { class: "s-offer-body s-offer-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
             ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-badge s-offer-slider-item", innerHTML: this.categorySlot

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

@@ -0,0 +1,14 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Product Availability Component: popup modal to notify user if the product is available, 
+* used in the product single page if the product isn't available.
+* You can use these classes to target the elements in the component.
+*/

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

@@ -83,7 +83,7 @@ export class SallaProductAvailability {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { id: "s-product-availability" },
       this.isSubscribed || this.isVisitorSubscribed
         ? h("div", { class: "s-product-availability-subscribed" },
           h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }),
@@ -110,6 +110,12 @@ export class SallaProductAvailability {
         h("salla-button", { "loader-position": 'center', wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   static get is() { return "salla-product-availability"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-product-availability.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-product-availability.css"]
+  }; }
   static get properties() { return {
     "channels": {
       "type": "string",

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

@@ -1,7 +1,16 @@
-:host {
-  display: block;
-}
-
-.unicode{
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+/*
+* Salla Rating Component: Order rating modal, used in the order single page
+* You can use these classes to target the elements in the component.
+*/
+#s-rating .unicode {
   unicode-bidi: plaintext;
 }