@salla.sa/twilight-components 1.0.99 → 1.0.100

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdf99836.js');
+const index = require('./index-3771e52a.js');
 const Helper = require('./Helper-8ae6a805.js');
 
-const sallaOfferModalCss = "#salla-offer-modal .s-offer-modal-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-modal-next-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-modal-prev-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}.rtl #salla-offer-modal .s-offer-modal-next-btn{transform:scale(-1) translateX(100%)}.rtl #salla-offer-modal .s-offer-modal-prev-btn{transform:scale(-1) translateX(-100%)}.rtl #salla-offer-modal .s-offer-modal-btn-is-active{transform:scale(-1) translateX(0)}";
+const sallaOfferModalCss = "";
 
 const SallaOfferModal = class {
   constructor(hostRef) {
@@ -95,7 +95,7 @@ const SallaOfferModal = class {
   componentDidRender() {
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
-      let sliderWrap = document.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = document.querySelector('.s-offer-modal-scrolled-slider'), navButtons = document.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = document.querySelector('.s-offer-modal-next-btn'), prevBtn = document.querySelector('.s-offer-modal-prev-btn'), items = document.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      let sliderWrap = this.modal.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.modal.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.modal.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.modal.querySelector('.s-offer-modal-next-btn'), prevBtn = this.modal.querySelector('.s-offer-modal-prev-btn'), items = this.modal.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
       current = 0, // current slide
       slidesToScroll = 3, itemsLength = items.length;
       console.log('items[0]:', items[0]);

package/dist/cjs/salla-quantity-input.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdf99836.js');
+const index = require('./index-3771e52a.js');
 const Helper = require('./Helper-8ae6a805.js');
 
-const sallaQuantityInputCss = ":host{display:block}";
+const sallaQuantityInputCss = "";
 
 const SallaQuantityInput = class {
   constructor(hostRef) {

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdf99836.js');
+const index = require('./index-3771e52a.js');
 const Helper = require('./Helper-8ae6a805.js');
 
-const sallaRatingModalCss = "#s-rating .s-rating-modal-product-img{font-size:0;position:relative}#s-rating .s-rating-modal-product-img:before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0;background:#eee}#s-rating .unicode{unicode-bidi:plaintext}";
+const sallaRatingModalCss = "";
 
 const SallaRatingModal = class {
   constructor(hostRef) {
@@ -62,8 +62,8 @@ const SallaRatingModal = class {
   }
   // handle wizard
   handleWizard() {
-    this.steps = document.querySelectorAll(".s-rating-modal-step");
-    this.dots = document.querySelectorAll(".s-rating-modal-step-dot");
+    this.steps = this.modal.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.modal.querySelectorAll(".s-rating-modal-step-dot");
     this.showActiveStep();
   }
   showActiveStep(current = null) {
@@ -151,7 +151,7 @@ const SallaRatingModal = class {
       this.thanksTime.remove();
       this.close().then(() => window.location.reload());
     }, 1000);
-    document.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+    this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
     this.showActiveStep(this.thanksTab);
   }
   render() {

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdf99836.js');
+const index = require('./index-3771e52a.js');
 const Helper = require('./Helper-8ae6a805.js');
 
-const sallaRatingStarsCss = ":host{display:block}";
+const sallaRatingStarsCss = "";
 
 const SallaRatingStars = class {
   constructor(hostRef) {
@@ -17,45 +17,36 @@ const SallaRatingStars = class {
     this.size = 'medium';
   }
   initiateRating() {
-    document.querySelectorAll('.s-rating-stars-element').forEach((elem) => {
-      elem.addEventListener('submit', function (event) {
-        event.preventDefault();
-        // Get the selected star - activeElement is not supported in safari
-        let activeStars = event.target.querySelectorAll('.s-rating-stars-btn-star.s-rating-stars-hovered');
-        let selected = activeStars[activeStars.length - 1];
-        if (!selected)
-          return;
-        let selectedIndex = selected.getAttribute('data-star');
-        event.target.querySelector('.rating_hidden_input').value = selectedIndex;
-        // Get all stars in this form (only search in the form, not the whole document)
-        // Loop through each star, and add or remove the `.selected` class to toggle highlighting
-        event.target
-          .querySelectorAll('.s-rating-stars-btn-star')
-          .forEach((star, index) => Helper.Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
-        // Remove aria-pressed from any previously selected star
-        event.target.querySelectorAll('.s-rating-stars-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
-        // Add aria-pressed role to the selected button
-        selected.setAttribute('aria-pressed', '');
-      });
+    this.host.addEventListener('click', () => {
+      if (!this.startsElem)
+        return;
+      // Get the selected star - activeElement is not supported in safari
+      let activeStars = this.startsElem.querySelectorAll('.s-rating-stars-hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let selectedIndex = selected.getAttribute('data-star');
+      this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
+        .forEach((star, index) => Helper.Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
+      // update aria-pressed attr status
+      this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
+      selected.setAttribute('aria-pressed', 'true');
     });
   }
   highlightSelectedStars() {
-    let hover = ['s-rating-stars-hovered'], element = this.host.querySelector('.s-rating-stars-element'), starElements = element === null || element === void 0 ? void 0 : element.querySelectorAll('.s-rating-stars-btn-star');
-    element === null || element === void 0 ? void 0 : element.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
-    starElements === null || starElements === void 0 ? void 0 : starElements.forEach((starElement, index) => {
-      starElement.addEventListener('mouseover', () => {
-        starElement.classList.add(...hover);
-        if (index <= 1) {
-          starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
-        }
-        else {
-          for (let i = 0; i < index; i++) {
-            starElements[i].classList.add(...hover);
-          }
+    var _a, _b;
+    let hoveredClass = 's-rating-stars-hovered', stars = (_a = this.startsElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.s-rating-stars-btn-star');
+    stars === null || stars === void 0 ? void 0 : stars.forEach((star, index) => {
+      star.addEventListener('mouseover', () => {
+        for (let i = 0; i <= index; i++) {
+          stars[i].classList.add(hoveredClass);
         }
       });
-      starElement.addEventListener('mouseout', () => starElement.classList.remove(...hover));
+      star.addEventListener('mouseout', () => star.classList.remove(hoveredClass));
     });
+    (_b = this.startsElem) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
   }
   createStars(n) {
     let stars = [];
@@ -72,7 +63,7 @@ const SallaRatingStars = class {
     return (index.h(index.Host, null, this.value ?
       index.h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
       :
-        index.h("form", { class: "s-rating-stars-element" }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { type: "submit", class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, index.h("i", { class: "sicon-star2" }))))));
+        index.h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, index.h("i", { class: "sicon-star2" }))))));
   }
   componentDidLoad() {
     this.initiateRating();

package/dist/cjs/{salla-verify-modal.cjs.entry.js → salla-verify.cjs.entry.js}

@@ -5,16 +5,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdf99836.js');
+const index = require('./index-3771e52a.js');
 const Helper = require('./Helper-8ae6a805.js');
 
-const sallaVerifyModalCss = "salla-verify-modal{display:block}[dir=ltr] #s-verify-modal .s-verify-modal-back{transform:scale(-1)}";
+const sallaVerifyCss = "salla-verify{display:block}";
 
-const SallaVerifyModal = class {
+const SallaVerify = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.verified = index.createEvent(this, "verified", 7);
     this.initiated = false;
+    /**
+     * Should render component without modal
+     */
+    this.display = 'modal';
     /**
      * Verifying method
      */
@@ -35,7 +39,7 @@ const SallaVerifyModal = class {
       (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
       (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('pages.profile.verify'));
     });
-    if (this.withoutModal) {
+    if (this.display == 'inline') {
       this.modal = { open: () => '', close: () => '', setTitle: () => '' };
       return;
     }
@@ -68,10 +72,10 @@ const SallaVerifyModal = class {
     this.data.type = this.data.type || this.type;
     this.type = this.data.type;
     this.resendTimer();
-    this.otpInputs = document.querySelectorAll('.s-verify-modal-input');
+    this.otpInputs = this.body.querySelectorAll('.s-verify-input');
     if (!this.initiated) {
-      Helper.Helper.on('input', '.s-verify-modal-input', e => salla.helpers.inputDigitsOnly(e.target));
-      Helper.Helper.onKeyUp('.s-verify-modal-input', event => {
+      Helper.Helper.on('input', '.s-verify-input', e => salla.helpers.inputDigitsOnly(e.target));
+      Helper.Helper.onKeyUp('.s-verify-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
         if (event.target.value) {
@@ -84,7 +88,7 @@ const SallaVerifyModal = class {
         }
         this.toggleOTPSubmit();
       });
-      Helper.Helper.on('paste', '.s-verify-modal-input', event => {
+      Helper.Helper.on('paste', '.s-verify-input', event => {
         let text = salla.helpers.number(event.clipboardData.getData('text')).replace(/[^0-9.]/g, '').replace('..', '.');
         this.otpInputs.forEach((input, i) => input.value = text[i] || '');
         this.toggleOTPSubmit();
@@ -94,8 +98,10 @@ const SallaVerifyModal = class {
       this.initiated = true;
     }
     this.reset();
-    !this.withoutModal && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
+    this.display == 'modal' && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
     this.modal.open();
+    // focus the first input after opening the modal
+    setTimeout(() => this.otpInputs[0].focus(), 100);
   }
   toggleOTPSubmit() {
     let otp = [];
@@ -149,14 +155,14 @@ const SallaVerifyModal = class {
       .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
   }
   render() {
-    return this.withoutModal ? index.h(index.Host, null, this.myBody()) :
-      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify-modal", ref: modal => this.modal = modal, "modal-title": this.title }, this.myBody());
+    return this.display == 'inline' ? index.h(index.Host, null, this.myBody()) :
+      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, this.myBody());
   }
   myBody() {
-    return (index.h("div", { 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" })));
+    return (index.h("div", { class: "s-verify-body", ref: body => this.body = body }, 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" })));
   }
   get host() { return index.getElement(this); }
 };
-SallaVerifyModal.style = sallaVerifyModalCss;
+SallaVerify.style = sallaVerifyCss;
 
-exports.salla_verify_modal = SallaVerifyModal;
+exports.salla_verify = SallaVerify;

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-fdf99836.js');
+const index = require('./index-3771e52a.js');
 
 /*
  Stencil Client Patch Browser v2.15.0 | MIT Licensed | https://stenciljs.com
@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-add-product-button_6.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"],"disabled":[516]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[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]}],[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]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"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],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[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"]]]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}]]],["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-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[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]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["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]}]]],["salla-sizes-table.cjs",[[1,"salla-sizes-table"]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]]], options);
+  return index.bootstrapLazy([["salla-add-product-button_6.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"],"disabled":[516]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[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]}],[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]}],[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]}],[4,"salla-modal",{"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],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[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"]]]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}]]],["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-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[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]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["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]}]]],["salla-verify.cjs",[[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -15,9 +15,8 @@
     "./components/salla-rating-modal/salla-rating-modal.js",
     "./components/salla-rating-stars/salla-rating-stars.js",
     "./components/salla-search/salla-search.js",
-    "./components/salla-sizes-table/salla-sizes-table.js",
     "./components/salla-tel-input/salla-tel-input.js",
-    "./components/salla-verify-modal/salla-verify-modal.js"
+    "./components/salla-verify/salla-verify.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -82,7 +82,7 @@ export class SallaBranches {
             branch.open ? '' : '- مُغلق')))),
       this.isChoiceable() ?
         h("slot", { name: "footer" },
-          h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
+          h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", width: "wide" }, salla.lang.get('common.elements.ok')))
         : ''));
   }
   componentDidRender() {

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

@@ -4,88 +4,4 @@
 /*
 * Salla Button Component: has many sizes, styles and loading state.
 * You can use these classes to target the elements in the component.
-*/
-salla-button {
-  pointer-events: none;
-}
-salla-button[type=submit], salla-button[type=button], salla-button[type=reset] {
-  -webkit-appearance: none;
-}
-salla-button[width=wide] {
-  width: 100%;
-}
-
-.s-button-wrap[loading] {
-  pointer-events: none;
-}
-.s-button-wrap[loading] .s-button-element {
-  pointer-events: none !important;
-}
-.s-button-wrap[loading] .s-button-loader-center .s-button-text {
-  opacity: 0;
-}
-.s-button-wrap .s-button-element[loading] {
-  pointer-events: none !important;
-}
-.s-button-wrap .s-button-element:not(:disabled) {
-  pointer-events: auto;
-}
-.s-button-wrap .s-button-solid .s-button-loader:before {
-  border-color: #fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2);
-}
-.s-button-wrap .s-button-outline {
-  border: 1px solid currentColor;
-}
-.s-button-wrap .s-button-outline:hover {
-  border-color: transparent;
-}
-.s-button-wrap .s-button-outline .s-button-loader:before {
-  border-top-color: currentColor;
-  border-left-color: currentColor;
-}
-.s-button-wrap .s-button-icon.s-button-large {
-  width: 56px;
-  height: 56px;
-}
-.s-button-wrap .s-button-icon.s-button-small {
-  width: 24px;
-  height: 24px;
-}
-.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before {
-  width: 0.85rem;
-  height: 0.85rem;
-}
-.s-button-wrap .s-button-loader-after .s-button-load {
-  flex-direction: row;
-}
-.s-button-wrap .s-button-loader-start.s-button-element {
-  padding-left: 32px;
-  padding-right: 32px;
-}
-.s-button-wrap .s-button-loader-start .s-button-loader {
-  position: absolute;
-  right: 8px;
-}
-.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr] {
-  left: 8px;
-  right: auto;
-}
-.s-button-wrap .s-button-loader-end.s-button-element {
-  padding-left: 32px;
-  padding-right: 32px;
-}
-.s-button-wrap .s-button-loader-end .s-button-loader {
-  position: absolute;
-  left: 8px;
-}
-.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr] {
-  right: 8px;
-  left: auto;
-}
-.s-button-wrap .s-button-loader-center .s-button-loader {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  margin: 0 !important;
-}
+*/

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

@@ -37,13 +37,6 @@ export class SallaButton {
      * If there is need to change loader position, pass the position
      */
     this.loaderPosition = 'after';
-    /**
-     * Is the button wide
-     */
-    this.wide = false;
-    if (this.wide) {
-      this.host.classList.add('s-button-wide');
-    }
   }
   /**
    * Run loading animation
@@ -59,6 +52,7 @@ export class SallaButton {
    */
   async stop() {
     this.host.removeAttribute('loading');
+    this.host.querySelector('button').removeAttribute('loading');
     if (this.loaderPosition == 'center')
       this.text.classList.remove('s-button-hide');
     return this.host;
@@ -87,7 +81,7 @@ export class SallaButton {
   }
   getBtnAttributes() {
     for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
+      if (!['color', 'fill', 'size', 'width', 'id'].includes(this.host.attributes[i].name)) {
         this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
       }
     }
@@ -265,24 +259,6 @@ export class SallaButton {
       "reflect": false,
       "defaultValue": "'after'"
     },
-    "wide": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Is the button wide"
-      },
-      "attribute": "wide",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "href": {
       "type": "string",
       "mutable": false,

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

@@ -79,12 +79,6 @@ export class SallaConditionalFields {
       h("slot", null)));
   }
   static get is() { return "salla-conditional-fields"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-conditional-fields.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-conditional-fields.css"]
-  }; }
   static get elementRef() { return "host"; }
   static get listeners() { return [{
       "name": "change",

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

@@ -1,8 +1,12 @@
 /*
 * Global flags style [imported from Int-tel-input]
 */
+/*
+  The whole installment methods is a third-party widgets, 
+  So there aren't a custom classes (as other components) to style them.
+*/
 /* 
-* Tabby ------------------------
+* Installment::Tabby
 */
 #tabbyPromoWrapper {
   background: white;
@@ -52,7 +56,7 @@
 }
 
 /*
-* Tamara ---------------------
+* Installment::Tamara & Spotii 
 */
 .tamara-product-widget {
   margin-bottom: 20px;

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

@@ -5,17 +5,6 @@
 * Salla Localization Component: Languages & Currencies popup modal
 * You can use these classes to target the elements in the component.
 */
-#salla-localization .s-localization-modal-label-slot {
-  flex-grow: 1;
-}
-#salla-localization .s-localization-modal-select {
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-/*
-* global flags style, imported from int-tel-input
-*/
 .iti__flag {
   width: 20px;
 }

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

@@ -112,7 +112,7 @@ export class SallaLocalizationModal {
                     .replace(/\{country_code\}/g, currency.country_code) }))) :
               h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
           : '',
-        h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
+        h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   /**

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

@@ -4,8 +4,4 @@
 /*
 * Salla Login Component: login popup modal
 * You can use these classes to target the elements in the component.
-*/
-[dir=ltr] #salla-login .s-login-modal-main-btn .arrow {
-  display: inline-block;
-  transform: scale(-1);
-}
+*/

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

@@ -147,7 +147,7 @@ export class SallaLoginModal {
     setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
     //we should have only one salla-login, so it's okay to get it from document
     //todo:: use better way for resize the modal
-    setTimeout(() => { var _a; return (_a = document.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
+    setTimeout(() => { var _a; return (_a = this.modal.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
@@ -219,7 +219,7 @@ export class SallaLoginModal {
               h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText)
               : '',
             h("slot", { name: "after-login-email" })) : '',
-        h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false },
+        h("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-modal-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.js

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

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

@@ -4,25 +4,4 @@
 /*
 * 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-modal-body {
-  -webkit-overflow-scrolling: touch;
-}
-#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar {
-  display: none;
-}
-#salla-offer-modal .s-offer-modal-next-btn {
-  background: linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
-}
-#salla-offer-modal .s-offer-modal-prev-btn {
-  background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
-}
-.rtl #salla-offer-modal .s-offer-modal-next-btn {
-  transform: scale(-1) translateX(100%);
-}
-.rtl #salla-offer-modal .s-offer-modal-prev-btn {
-  transform: scale(-1) translateX(-100%);
-}
-.rtl #salla-offer-modal .s-offer-modal-btn-is-active {
-  transform: scale(-1) translateX(0);
-}
+*/

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

@@ -108,7 +108,7 @@ export class SallaOfferModal {
   componentDidRender() {
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
-      let sliderWrap = document.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = document.querySelector('.s-offer-modal-scrolled-slider'), navButtons = document.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = document.querySelector('.s-offer-modal-next-btn'), prevBtn = document.querySelector('.s-offer-modal-prev-btn'), items = document.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      let sliderWrap = this.modal.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.modal.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.modal.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.modal.querySelector('.s-offer-modal-next-btn'), prevBtn = this.modal.querySelector('.s-offer-modal-prev-btn'), items = this.modal.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
       current = 0, // current slide
       slidesToScroll = 3, itemsLength = items.length;
       console.log('items[0]:', items[0]);

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

@@ -1,3 +1,7 @@
-:host {
-  display: block;
-}
+/*
+* Global flags style [imported from Int-tel-input]
+*/
+/*
+* Salla Qunatity Input Component: quantity input with increase & decrease buttons.
+* You can use these classes to target the elements in the component.
+*/

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

@@ -78,7 +78,7 @@ export class SallaQuantityInput {
   }
   static get is() { return "salla-quantity-input"; }
   static get originalStyleUrls() { return {
-    "$": ["salla-quantity-input.css"]
+    "$": ["salla-quantity-input.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["salla-quantity-input.css"]