@salla.sa/twilight-components 1.0.33 → 1.0.34

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

@@ -1,32 +1,47 @@
 import { Component, h, Prop, Host, Element, Event, Watch, Method, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 /**
- * @slot body - The content of modal
  * @slot footer - The footer of modal
  */
 export class SallaModal {
   constructor() {
-    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.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.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -38,30 +53,44 @@ export class SallaModal {
     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
-      // .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.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);
@@ -75,16 +104,32 @@ export class SallaModal {
     }
     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
-    h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
+    return (h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" },
       h("div", { class: "s-modal-wrapper" },
         h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
         h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"),
-        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
+        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
           ? h("div", { class: "s-modal-loader-wrap" },
             h("span", { class: "s-modal-loader" }))
           :
@@ -96,23 +141,9 @@ export class SallaModal {
                 this.title || this.subTitle ?
                   h("div", { class: "s-modal-header-inner" },
                     this.error || this.success || this.icon
-                      ? 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
-                        } },
-                        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 ?
-                        h("img", { class: "s-modal-header-img", src: this.imageIcon })
-                        : '',
+                      ? h("div", { class: this.iconBlockClasses() },
+                        h("i", { class: this.iconClasses() }))
+                      : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '',
                     h("div", { class: "s-modal-header-content" },
                       h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }),
                       h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
@@ -213,7 +244,7 @@ export class SallaModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The size of the modal"
       },
       "attribute": "width",
       "reflect": true,
@@ -223,19 +254,19 @@ export class SallaModal {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'top' | 'middel' | 'bottom'",
-        "resolved": "\"bottom\" | \"middel\" | \"top\"",
+        "original": "'top' | 'middle' | 'bottom'",
+        "resolved": "\"bottom\" | \"middle\" | \"top\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The position of the modal"
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "'middel'"
+      "defaultValue": "'middle'"
     },
     "visible": {
       "type": "boolean",
@@ -249,7 +280,7 @@ export class SallaModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Show the modal on rendering"
       },
       "attribute": "visible",
       "reflect": true,
@@ -267,7 +298,7 @@ export class SallaModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Show loading in the middle"
       },
       "attribute": "is-loading",
       "reflect": true,
@@ -339,7 +370,7 @@ export class SallaModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`"
       },
       "attribute": "icon",
       "reflect": false,
@@ -357,7 +388,7 @@ export class SallaModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "url of an image"
       },
       "attribute": "image-icon",
       "reflect": false,
@@ -414,7 +445,7 @@ export class SallaModal {
         "return": "Promise<HTMLElement>"
       },
       "docs": {
-        "text": "",
+        "text": "Show the modal",
         "tags": []
       }
     },
@@ -433,7 +464,7 @@ export class SallaModal {
         "return": "Promise<HTMLElement>"
       },
       "docs": {
-        "text": "",
+        "text": "hide the modal",
         "tags": []
       }
     },
@@ -441,7 +472,10 @@ export class SallaModal {
       "complexType": {
         "signature": "(title: any) => Promise<HTMLElement>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "text": "title",
+                "name": "param"
+              }],
             "text": ""
           }],
         "references": {
@@ -455,8 +489,11 @@ export class SallaModal {
         "return": "Promise<HTMLElement>"
       },
       "docs": {
-        "text": "",
-        "tags": []
+        "text": "Change the title",
+        "tags": [{
+            "name": "param",
+            "text": "title"
+          }]
       }
     },
     "loading": {
@@ -474,7 +511,7 @@ export class SallaModal {
         "return": "Promise<HTMLElement>"
       },
       "docs": {
-        "text": "",
+        "text": "Start loading",
         "tags": []
       }
     },
@@ -493,7 +530,7 @@ export class SallaModal {
         "return": "Promise<HTMLElement>"
       },
       "docs": {
-        "text": "",
+        "text": "Stop the loading",
         "tags": []
       }
     }

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

@@ -22,10 +22,18 @@ export class SallaOffer {
       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();
@@ -90,9 +98,12 @@ export class SallaOffer {
   static get methods() { return {
     "show": {
       "complexType": {
-        "signature": "(productId: number) => Promise<any>",
+        "signature": "(product_id: number) => Promise<any>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "text": "product_id",
+                "name": "param"
+              }],
             "text": ""
           }],
         "references": {
@@ -103,15 +114,21 @@ export class SallaOffer {
         "return": "Promise<any>"
       },
       "docs": {
-        "text": "",
-        "tags": []
+        "text": "Show the available offers for the product",
+        "tags": [{
+            "name": "param",
+            "text": "product_id"
+          }]
       }
     },
     "showOffer": {
       "complexType": {
         "signature": "(offer: any) => Promise<HTMLElement>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "text": "offer",
+                "name": "param"
+              }],
             "text": ""
           }],
         "references": {
@@ -125,8 +142,11 @@ export class SallaOffer {
         "return": "Promise<HTMLElement>"
       },
       "docs": {
-        "text": "",
-        "tags": []
+        "text": "Show offer details",
+        "tags": [{
+            "name": "param",
+            "text": "offer"
+          }]
       }
     }
   }; }

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

@@ -3,7 +3,13 @@ import Helper from "../../Helpers/Helper";
 export class SallaProductAvailability {
   constructor() {
     this.isUser = 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 () => {
@@ -105,15 +111,15 @@ export class SallaProductAvailability {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'sms' | 'mobile' | 'sms,mobile'",
+        "resolved": "\"mobile\" | \"sms\" | \"sms,mobile\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Notification channels"
       },
       "attribute": "channels",
       "reflect": false
@@ -130,7 +136,7 @@ export class SallaProductAvailability {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "product id that can visitor subscribe to its availability notification"
       },
       "attribute": "product-id",
       "reflect": false,
@@ -148,7 +154,7 @@ export class SallaProductAvailability {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "is current user already subscribed"
       },
       "attribute": "is-subscribed",
       "reflect": false,

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

@@ -1,10 +1,14 @@
-import { Component, h, Method, Element, Host, State } from '@stencil/core';
+import { Component, h, Method, Element, Host, State, Prop } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaRating {
   constructor() {
     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');
@@ -28,14 +32,20 @@ export class SallaRating {
       this.next = salla.lang.get('common.elements.next');
     });
   }
+  /**
+   * Show the rating modal
+   */
   async show() {
     return this.modal.show()
-      .then(() => this.order || 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();
   }
@@ -161,7 +171,7 @@ export class SallaRating {
     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);
@@ -255,6 +265,26 @@ export class SallaRating {
   static get styleUrls() { return {
     "$": ["salla-rating.css"]
   }; }
+  static get properties() { return {
+    "orderId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The order id, to rate on its products & shipping"
+      },
+      "attribute": "order-id",
+      "reflect": false,
+      "defaultValue": "salla.config.get('page.id')"
+    }
+  }; }
   static get states() { return {
     "order": {}
   }; }
@@ -274,7 +304,7 @@ export class SallaRating {
         "return": "Promise<Timeout>"
       },
       "docs": {
-        "text": "",
+        "text": "Show the rating modal",
         "tags": []
       }
     },
@@ -293,7 +323,7 @@ export class SallaRating {
         "return": "Promise<HTMLElement>"
       },
       "docs": {
-        "text": "",
+        "text": "Show the rating modal",
         "tags": []
       }
     }

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

@@ -1,5 +1,8 @@
 import { Component, h, State, Element, Listen } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+/**
+ * @slot product - Replaces products card in the results, has replaceable props `{name}`, `{price}`, `{name}`.
+ */
 export class SallaSearch {
   constructor() {
     var _a;

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

@@ -3,8 +3,11 @@ import TelInput from "intl-tel-input";
 import Helper from "../../Helpers/Helper";
 export class SallaTelInput {
   constructor() {
+    /**
+     * 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 });
@@ -24,12 +27,21 @@ export class SallaTelInput {
       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())
@@ -62,9 +74,7 @@ export class SallaTelInput {
       });
     });
     // 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);
@@ -100,7 +110,7 @@ export class SallaTelInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Current mobile number"
       },
       "attribute": "mobile",
       "reflect": false
@@ -117,7 +127,7 @@ export class SallaTelInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Current country_code"
       },
       "attribute": "country-code",
       "reflect": false,
@@ -181,8 +191,11 @@ export class SallaTelInput {
         "return": "Promise<{ mobile: string; countryCode: string; countryKey: string; }>"
       },
       "docs": {
-        "text": "",
-        "tags": []
+        "text": "Get current values",
+        "tags": [{
+            "name": "return",
+            "text": undefined
+          }]
       }
     },
     "isValid": {
@@ -197,8 +210,11 @@ export class SallaTelInput {
         "return": "Promise<boolean>"
       },
       "docs": {
-        "text": "",
-        "tags": []
+        "text": "Is current data valid or not",
+        "tags": [{
+            "name": "return",
+            "text": undefined
+          }]
       }
     }
   }; }