@salla.sa/twilight-components 1.0.32 → 1.0.34

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaSearch = require('./salla-search-94d97bc0.js');
+const sallaSearch = require('./salla-search-6738ec5e.js');
 require('./index-714023c8.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",[[0,"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,"backClicked","onbackClicked"]]],[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"isShowBack":[4,"is-show-back"],"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],"setText":[64],"stop":[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]}]]],["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],"ok":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"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"]]],[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[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]}]]],["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],"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"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
   });
 };
 

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

@@ -11,8 +11,8 @@ const SallaBranches = class {
     index.registerInstance(this, hostRef);
     this.open = false;
     this.isOpenedBefore = salla.localData.get("branch-choosed-before");
-    this.displayAs = 'default';
-    this.browseProductsFrom = 'all';
+    this.displayAs = 'default'; //todo:: change it to boolean, isPopup default false
+    this.browseProductsFrom = 'all'; //todo:: get better name
     this.branches = [
       { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
       { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
@@ -39,10 +39,9 @@ const SallaBranches = class {
         : 'التسوق من فرع آخر';
     };
     salla.event.on('branches::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
-      this.ok = salla.lang.get('common.elements.ok');
-    });
+    salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
   }
+  //todo:: add description for all @methods
   async show() {
     return this.modal.show();
   }
@@ -77,7 +76,7 @@ const SallaBranches = class {
           index.h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
         index.h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
-      index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, this.ok))
+      index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   componentDidRender() {

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

@@ -4,20 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-98cc9f18.js');
-const sallaSearch = require('./salla-search-94d97bc0.js');
+const sallaSearch = require('./salla-search-6738ec5e.js');
 
 const sallaButtonCss = ":host{display:block}";
 
 const SallaButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Button Style
+     */
     this.btnStyle = 'primary';
+    /**
+     * Is the button currently loading
+     */
     this.loading = false;
+    /**
+     * Is the button currently disabled
+     */
     this.disabled = false;
+    /**
+     * If there is need to change loader position, pass the position
+     */
     this.loaderPosition = 'before';
+    /**
+     * Is the button wide
+     */
     this.wide = false;
     this.hostAttributes = {};
-    //============= Initiate Button Attributes =============//
     for (let i = 0; i < this.host.attributes.length; i++) {
       this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
     }
@@ -25,7 +39,7 @@ const SallaButton = class {
     this.hostAttributes.class += ' s-button-btn btn--has-loading'
       + ' s-button-' + this.btnStyle
       + (this.wide ? ' s-button-wide ' : '')
-      + ' loader-' + this.loaderPosition
+      + ' loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
       + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
     delete this.hostAttributes['btn-style'];
     delete this.hostAttributes['id'];
@@ -33,25 +47,41 @@ const SallaButton = class {
       this.host.classList.add('s-button-wide');
     }
   }
+  /**
+   * Run loading animation
+   */
   async load() {
     if (this.loaderPosition == 'center')
       this.text.classList.add('s-button-hide');
     this.host.setAttribute('loading', '');
     return this.host;
   }
-  async setText(html) {
-    this.text.innerHTML = html;
-    return this.host;
-  }
+  /**
+   * Stop loading animation
+   */
   async stop() {
     this.host.removeAttribute('loading');
     if (this.loaderPosition == 'center')
       this.text.classList.remove('s-button-hide');
     return this.host;
   }
+  /**
+   * Changing the body of the button
+   * @param html
+   */
+  async setText(html) {
+    this.text.innerHTML = html;
+    return this.host;
+  }
+  /**
+   * Add `disabled` attribute
+   */
   async disable() {
     this.host.setAttribute('disabled', '');
   }
+  /**
+   * Remove `disabled` attribute
+   */
   async enable() {
     this.host.removeAttribute('disabled');
   }
@@ -92,9 +122,10 @@ const SallaLocalization = class {
     Helper.Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
     salla.event.on('languages::translations.loaded', () => {
+      var _a;
       this.languagesTitle = salla.lang.get('common.titles.language');
       this.currenciesTitle = salla.lang.get('common.titles.currency');
-      this.btn.setText(salla.lang.get('common.elements.ok'));
+      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok'));
     });
     /**
      * letting developer to insert his own slot like:
@@ -110,9 +141,15 @@ const SallaLocalization = class {
     this.languages = Object.values(salla.config.get('languages', {}));
     this.currencies = Object.values(salla.config.get('currencies', {}));
   }
+  /**
+   * Show the component
+   */
   async show() {
     return this.modal.show();
   }
+  /**
+   * Hide the component
+   */
   async hide() {
     return this.modal.hide();
   }
@@ -124,10 +161,10 @@ const SallaLocalization = class {
   }
   async submit() {
     let url;
-    console.log('this.currency.code::::', this.currency, this.currency.code);
+    console.log('this.currency.code::::', this.currency, this.currency.code); //todo:: remove it
     this.btn.load()
-      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
-      .then(() => this.language.code === salla.config.get('user.language') || (url = this.language.url))
+      .then(() => this.currency.code === salla.config.get('user.currency_code', 'SAR') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
+      .then(() => this.language.code === salla.config.get('user.language_code', 'ar') || (url = this.language.url))
       .then(() => this.btn.stop())
       .then(() => this.hide())
       .then(() => url && (window.location.href = url));
@@ -166,27 +203,43 @@ const SallaModal = class {
     index.registerInstance(this, hostRef);
     this.modalOpened = index.createEvent(this, "modalOpened", 7);
     this.modalClosed = index.createEvent(this, "modalClosed", 7);
-    var _a;
     //todo:: unite three colors (error, success, primary) in one prop
     this.error = false;
     this.success = false;
     this.primary = false;
-    this.isClosable = true;
+    this.isClosable = true; //todo::rename unclude
+    /**
+     * The size of the modal
+     */
     this.width = 'md';
-    this.position = 'middel';
+    /**
+     * The position of the modal
+     */
+    this.position = 'middle';
+    /**
+     * Show the modal on rendering
+     */
     this.visible = false;
+    /**
+     * Show loading in the middle
+     */
     this.isLoading = false;
-    this.subTitleFirst = false;
-    this.noPadding = false;
+    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 = '';
+    /**
+     * url of an image
+     */
     this.imageIcon = '';
     Helper.Helper.setHost(this.host);
     salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
     salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
     this.title = this.host.title;
     this.host.removeAttribute('title');
-    (_a = Helper.Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -194,39 +247,53 @@ const SallaModal = class {
       this.modalClosed.emit();
       return;
     }
-    this.host.classList.remove('hidden');
+    this.host.classList.remove('s-hidden');
     setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
     this.modalOpened.emit();
   }
+  /**
+   * Show the modal
+   */
   async show() {
     this.host.setAttribute('visible', '');
     return this.host;
   }
+  /**
+   * hide the modal
+   */
   async hide() {
     this.host.removeAttribute('visible');
     return this.host;
   }
+  /**
+   * Change the title
+   * @param {string} title
+   */
   async setTitle(title) {
     this.title = title;
     return this.host;
   }
+  /**
+   * Start loading
+   */
   async loading() {
     this.isLoading = true;
     return this.host;
   }
+  /**
+   * Stop the loading
+   */
   async stopLoading() {
     this.isLoading = false;
     return this.host;
   }
   toggleModal(isOpen) {
-    Helper.Helper
-      // .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.host.querySelector('[slot=body]') || this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    Helper.Helper.toggleElement(this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       //todo:: use united class names
       .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
-      setTimeout(() => this.host.classList.add('hidden'), 350);
+      setTimeout(() => this.host.classList.add('s-hidden'), 350);
     }
   }
   closeModal() {
@@ -235,34 +302,36 @@ const SallaModal = class {
     }
     this.host.removeAttribute('visible');
   }
+  iconBlockClasses() {
+    return {
+      's-modal-icon': true,
+      's-modal-bg-error': this.error,
+      's-modal-bg-success': this.success,
+      's-modal-bg-normal': !this.error && !this.success,
+      's-modal-bg-primary': this.primary
+    };
+  }
+  iconClasses() {
+    return {
+      [this.icon]: true,
+      's-modal-text-error': this.error,
+      's-modal-text-success': this.success,
+      'sicon-alert-engine': !this.icon && this.error && !this.imageIcon,
+      'sicon-check-circle2': !this.icon && this.success && !this.imageIcon,
+    };
+  }
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (
-    //todo:: use suitable class name instead of hidden
-    index.h(index.Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body s-modal-scroll-y ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding'), slot: "body" }, this.isLoading
+    return (index.h(index.Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body s-modal-scroll-y ' + '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" }))
       :
         [index.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
             index.h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
             : '', this.title || this.subTitle ?
             index.h("div", { class: "s-modal-header-inner" }, this.error || this.success || this.icon
-              ? index.h("div", { class: {
-                  's-modal-icon': true,
-                  's-modal-bg-error': this.error,
-                  's-modal-bg-success': this.success,
-                  's-modal-bg-normal': !this.error && !this.success,
-                  's-modal-bg-primary': this.primary
-                } }, index.h("i", { class: {
-                  [this.icon]: true,
-                  's-modal-text-error': this.error,
-                  's-modal-text-success': this.success,
-                  'sicon-alert-engine': !this.icon && this.error,
-                  'sicon-check-circle2': !this.icon && this.success,
-                } }))
-              : this.imageIcon ?
-                index.h("img", { class: "s-modal-header-img", src: this.imageIcon })
-                : '', index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+              ? index.h("div", { class: this.iconBlockClasses() }, index.h("i", { class: this.iconClasses() }))
+              : this.imageIcon ? index.h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '', index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
             : ''),
           index.h("slot", null),
           index.h("slot", { name: "footer" })
@@ -1652,8 +1721,11 @@ const SallaTelInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.enterClicked = index.createEvent(this, "enterClicked", 7);
+    /**
+     * Current country_code
+     */
     this.countryCode = salla.config.get('user.country_code', 'SA');
-    this.countryKey = "+966"; //TODO:: why we need it
+    this.countryKey = "+966"; //TODO:: why we need it, if it's important find a way to get it automatically for the current user
     this.countryCodeLabel = salla.lang.get('common.country_code');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
@@ -1673,12 +1745,21 @@ const SallaTelInput = class {
       this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
     });
   }
+  /**
+   * Get current values
+   * @return {{mobile:number,countryCode:'SA'|string, countryKey:'+966'|string}}
+   */
   async getValues() {
-    this.mobile = this.phoneInput.value;
-    this.countryCode = this.countryCodeInput.value;
-    this.countryKey = this.countryKeyInput.value;
-    return { mobile: this.phoneInput.value, countryCode: this.countryCodeInput.value, countryKey: this.countryKeyInput.value };
+    return {
+      mobile: this.mobile = this.phoneInput.value,
+      countryCode: this.countryCode = this.countryCodeInput.value,
+      countryKey: this.countryKey = this.countryKeyInput.value
+    };
   }
+  /**
+   * Is current data valid or not
+   * @return {boolean}
+   */
   async isValid() {
     this.reset();
     if (this.iti.isValidNumber())
@@ -1711,9 +1792,7 @@ const SallaTelInput = class {
       });
     });
     // on blur: validate
-    this.phoneInput.addEventListener('blur', () => {
-      this.isValid();
-    });
+    this.phoneInput.addEventListener('blur', () => this.isValid());
     // on keyup / change flag: reset
     this.phoneInput.addEventListener('input', e => {
       salla.helpers.digitsOnly(e.target);
@@ -1738,10 +1817,15 @@ const SallaVerify = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.verified = index.createEvent(this, "verified", 7);
-    this.backClicked = index.createEvent(this, "backClicked", 7);
+    this.initiated = false;
+    /**
+     * Verifying method
+     */
     this.by = 'sms';
+    /**
+     * should auto reloading the page after success verification
+     */
     this.autoReload = true;
-    this.initiated = false;
     Helper.Helper.setHost(this.host);
     if (this.withoutModal) {
       this.modal = { show: () => '', hide: () => '' };
@@ -1753,12 +1837,22 @@ const SallaVerify = class {
       });
     }
     salla.event.on('languages::translations.loaded', () => {
+      var _a;
       this.title = salla.lang.get('pages.profile.verify_title');
+      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));
     });
   }
+  /**
+   * Get current code
+   * @return {string}
+   */
   async getCode() {
     return this.code.value;
   }
+  /**
+   * Show verifying modal
+   * @param data
+   */
   async show(data) {
     var _a;
     this.data = data;
@@ -1853,12 +1947,10 @@ const SallaVerify = class {
   myBody() {
     return [
       index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
-      // <label class="s-verify-label">{salla.lang.get('pages.profile.verify_placeholder')}</label>,
       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')), this.isShowBack ?
-        index.h("a", { href: "#", class: "s-verify-back", onClick: () => this.backClicked.emit() }, index.h("i", { class: "sicon-arrow-right" }))
-        : '')
+      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); }

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

@@ -12,6 +12,9 @@ const SallaInfiniteScroll = class {
      * Next Page element
      */
     this.nextPage = '';
+    /**
+     * Is there is need to autoload next page when scroll
+     */
     this.autoload = false;
     /**
      * Class selector to know the container if it's not the host `<salla-infinite-scroll>`

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

@@ -23,10 +23,18 @@ const SallaOffer = class {
       this.show(data.product_id);
     });
   }
-  async show(productId) {
+  /**
+   * Show the available offers for the product
+   * @param product_id
+   */
+  async show(product_id) {
     //TODO:: make sure there is only one offer
-    return salla.api.offer.details(productId).then(response => this.offer = response.data[0]);
+    return salla.api.offer.details(product_id).then(response => this.offer = response.data[0]);
   }
+  /**
+   * Show offer details
+   * @param {Offer} offer
+   */
   async showOffer(offer) {
     this.offer = offer;
     return this.modal.show();

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

@@ -9,7 +9,13 @@ const SallaProductAvailability = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.isUser = Helper.Helper.isUser();
+    /**
+     * product id that can visitor subscribe to its availability notification
+     */
     this.productId = salla.config.get('page.id');
+    /**
+     * is current user already subscribed
+     */
     this.isSubscribed = false;
     // @Method()
     this.submit = async () => {

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

@@ -13,18 +13,47 @@ const SallaRating = class {
     this.stepsCount = 0;
     this.currentIndex = 0;
     this.submitted = [];
+    /**
+     * The order id, to rate on its products & shipping
+     */
+    this.orderId = salla.config.get('page.id');
+    this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
+    this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
+    this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
+    this.write_product_rate = salla.lang.get('pages.rating.write_product_rate');
+    this.rate_shipping = salla.lang.get('pages.rating.rate_shipping');
+    this.write_shipping_rate = salla.lang.get('pages.rating.write_shipping_rate');
+    this.thanks = salla.lang.get('pages.rating.thanks');
+    this.back = salla.lang.get('common.elements.back');
+    this.next = salla.lang.get('common.elements.next');
     Helper.Helper.setHost(this.host);
     salla.event.on('rating::show', () => this.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
+      this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
+      this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
+      this.write_product_rate = salla.lang.get('pages.rating.write_product_rate');
+      this.rate_shipping = salla.lang.get('pages.rating.rate_shipping');
+      this.write_shipping_rate = salla.lang.get('pages.rating.write_shipping_rate');
+      this.thanks = salla.lang.get('pages.rating.thanks');
+      this.back = salla.lang.get('common.elements.back');
+      this.next = salla.lang.get('common.elements.next');
+    });
   }
+  /**
+   * Show the rating modal
+   */
   async show() {
     return this.modal.show()
-      .then(() => salla.feedback.api.order(salla.config.get('page.id')))
-      .then(res => this.order = res.data)
+      .then(() => this.order || salla.feedback.api.order(this.orderId).then(res => this.order = res.data))
       .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
       .then(() => this.modal.stopLoading())
       .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
       .then(() => setTimeout(() => this.initiateRating(), 100));
   }
+  /**
+   * Show the rating modal
+   */
   async hide() {
     return this.modal.hide();
   }
@@ -150,7 +179,7 @@ const SallaRating = class {
     if (Object.keys(data).length == 0) {
       return;
     }
-    data['order_id'] = salla.config.get('page.id');
+    data['order_id'] = this.orderId;
     data['type'] = this.currentTab.dataset.type;
     this.submitted.push(this.currentIndex);
     return salla.feedback.api[this.currentTab.dataset.type](data);
@@ -176,21 +205,24 @@ const SallaRating = class {
   render() {
     return (index.h(index.Host, null, 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'), alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.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: salla.lang.get('pages.rating.write_store_rate') }), index.h("small", { class: "s-rating-validation-msg" }))
+          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
-          ? index.h("section", { class: "s-rating-step s-rating-hidden", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-stars-product" }, " ", this.renderRatingStars('small', `products[${index$1}][rating]`)), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index$1}][comment]`, class: "s-rating-comment" }), index.h("small", { class: "s-rating-validation-msg" })))))
+          ? index.h("section", { class: "s-rating-step s-rating-hidden", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": this.rate_product_stars }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-stars-product" }, " ", this.renderRatingStars('small', `products[${index$1}][rating]`)), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: this.write_product_rate, name: `products[${index$1}][comment]`, class: "s-rating-comment" }), index.h("small", { class: "s-rating-validation-msg" })))))
           : '', this.order.shipping_enabled
           ? index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "shipping" }, index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
             ? index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.shipping.company.logo, class: "s-rating-shipping-logo", alt: this.order.shipping.company.name }))
-            : index.h("span", { class: "s-rating-icon sicon-shipping-fast" }), index.h("div", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), index.h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')), index.h("textarea", { name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), index.h("small", { class: "s-rating-validation-msg" }))
-          : '', index.h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')), index.h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
-        index.h("div", { class: "s-rating-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '', index.h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
+            : index.h("span", { class: "s-rating-icon sicon-shipping-fast" }), index.h("div", { class: "s-rating-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), index.h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')), index.h("textarea", { name: "comment", class: "s-rating-comment", placeholder: this.write_shipping_rate }), index.h("small", { class: "s-rating-validation-msg" }))
+          : '', index.h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-thanks-title" }, this.thanks), index.h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
+        index.h("div", { class: "s-rating-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, this.back), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '', index.h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
       : '')));
   }
   componentDidRender() {
     //todo:: know from where there is hidden attributes to the doms🤔
     this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
   }
+  componentDidLoad() {
+    salla.event.dispatch('rating::ready', this);
+  }
   get host() { return index.getElement(this); }
 };
 SallaRating.style = sallaRatingCss;