@salla.sa/twilight-components 1.6.15-alpha.0 → 1.6.15-alpha.1

package/dist/collection/components/salla-product-size-guide/salla-product-size-guide.js

@@ -0,0 +1,136 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, State, Method, Element, h } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaProductSizeGuide {
+  constructor() {
+    this.hasError = false;
+    Helper.setHost(document);
+    salla.event.on('size-guide::open', (product_id) => this.open(product_id));
+    salla.lang.onLoaded(() => {
+      this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
+      this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
+      this.modal_title = salla.lang.get('pages.products.size_guides');
+    });
+  }
+  /**
+   * Show the size-guide modal window
+   */
+  async open(product_id) {
+    this.modal.setTitle(this.modal_title);
+    this.modal.open();
+    return await salla.api.withoutNotifier(() => salla.product.getSizeGuides(product_id))
+      .then((response) => {
+      this.guides = response.data;
+    })
+      .catch(e => {
+      var _a, _b, _c, _d;
+      console.log(e);
+      this.hasError = true;
+      this.placeholder_description = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => this.modal.stopLoading());
+  }
+  /**
+   *
+   * Hide the size-guide modal window
+   */
+  async close() {
+    return this.modal.close();
+  }
+  // !Todo - Enhance placeholder text
+  showPlaceholder() {
+    return h("salla-placeholder", { alignment: "center", iconSize: "xl" },
+      h("div", { slot: "title" }, this.placeholder_title),
+      h("div", { slot: "description" }, this.placeholder_description));
+  }
+  render() {
+    return (h(Host, { class: "s-product-size-guide-block" },
+      h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal },
+        h("div", { slot: "loading" },
+          h("div", { class: "s-product-size-guide-skeleton" },
+            h("salla-skeleton", { height: '15px', width: '25%' }),
+            h("div", { class: "s-product-size-guide-skeleton-header" },
+              h("salla-skeleton", { height: '40px' }),
+              h("salla-skeleton", { height: '40px' }),
+              h("salla-skeleton", { height: '40px' }),
+              h("salla-skeleton", { height: '40px' })),
+            h("div", { class: "s-product-size-guide-skeleton-content" },
+              h("salla-skeleton", { height: '15px', width: '25%' }),
+              h("salla-skeleton", { height: '10px', width: '75%' }),
+              h("salla-skeleton", { height: '10px', width: '50%' }),
+              h("salla-skeleton", { height: '10px', width: '75%' }),
+              h("salla-skeleton", { height: '10px', width: '100%' }),
+              h("salla-skeleton", { height: '10px', width: '25%' }),
+              h("salla-skeleton", { height: '10px', width: '60%' }),
+              h("salla-skeleton", { height: '10px', width: '45%' }),
+              h("salla-skeleton", { height: '10px', width: '30%' })))),
+        h("slot", { name: "header" }),
+        !this.hasError && !!this.guides ?
+          [h("div", { class: "container px-8" },
+              h("salla-tabs", null,
+                this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name },
+                  h("span", null, guide.name))),
+                this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name },
+                  h("div", { innerHTML: guide.description })))))]
+          : this.showPlaceholder(),
+        h("slot", { name: "footer" }))));
+  }
+  static get is() { return "salla-product-size-guide"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-product-size-guide.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-product-size-guide.css"]
+  }; }
+  static get states() { return {
+    "guides": {},
+    "productId": {},
+    "placeholder_title": {},
+    "placeholder_description": {},
+    "modal_title": {},
+    "hasError": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "(product_id: number) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show the size-guide modal window",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "\nHide the size-guide modal window",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,4 @@
+/*
+* 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

@@ -0,0 +1,168 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Element, Host, State, Watch, h, Method } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+import Add from "../../assets/svg/add.svg";
+import Minus from "../../assets/svg/minus.svg";
+export class SallaQuantityInput {
+  constructor() {
+    this.hostAttributes = {};
+    this.hasIncrementSlot = false;
+    this.hasDecrementSlot = false;
+    this.didLoaded = false;
+    this.quantity = 1;
+  }
+  /**
+   * Workaround to fire change event for the input.
+   */
+  watchPropHandler() {
+    if (!this.didLoaded) {
+      return;
+    }
+    Helper.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));
+  }
+  componentWillLoad() {
+    this.quantity = parseInt(this.host.getAttribute('value')) || 1;
+    this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
+    this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
+  }
+  componentDidLoad() {
+    this.didLoaded = true;
+    this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));
+  }
+  getInputAttributes() {
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
+        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+      }
+    }
+    return this.hostAttributes;
+  }
+  /**
+   * decrease quantity by one.
+   * @return HTMLSallaQuantityInputElement
+   */
+  async decrease() {
+    return this.setValue(this.quantity - 1);
+  }
+  /**
+   * increase quantity by one.
+   * @return HTMLSallaQuantityInputElement
+   */
+  async increase() {
+    return this.setValue(Number(this.quantity) + 1);
+  }
+  /**
+   * set quantity by one.
+   * @return HTMLSallaQuantityInputElement
+   */
+  async setValue(value) {
+    let maxQuantity = parseInt(this.host.getAttribute('max'));
+    if (maxQuantity && value > maxQuantity) {
+      value = maxQuantity;
+    }
+    if (value <= 1) {
+      value = 1;
+    }
+    this.quantity = value;
+    return this.host;
+  }
+  render() {
+    return (h(Host, { class: "s-quantity-input" },
+      h("div", { class: "s-quantity-input-container" },
+        h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" },
+          !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '',
+          h("slot", { name: "increment-button" })),
+        h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })),
+        h("button", { class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" },
+          !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '',
+          h("slot", { name: "decrement-button" })))));
+  }
+  static get is() { return "salla-quantity-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-quantity-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-quantity-input.css"]
+  }; }
+  static get states() { return {
+    "quantity": {}
+  }; }
+  static get methods() { return {
+    "decrease": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "decrease quantity by one.",
+        "tags": [{
+            "name": "return",
+            "text": "HTMLSallaQuantityInputElement"
+          }]
+      }
+    },
+    "increase": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "increase quantity by one.",
+        "tags": [{
+            "name": "return",
+            "text": "HTMLSallaQuantityInputElement"
+          }]
+      }
+    },
+    "setValue": {
+      "complexType": {
+        "signature": "(value: any) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "set quantity by one.",
+        "tags": [{
+            "name": "return",
+            "text": "HTMLSallaQuantityInputElement"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "quantity",
+      "methodName": "watchPropHandler"
+    }]; }
+}

package/dist/collection/components/salla-rating-modal/order-feedback-response.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

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

@@ -0,0 +1,4 @@
+/*
+* Salla Rating Component: Order rating modal, used in the order single page
+* You can use these classes to target the elements in the component.
+*/

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

@@ -0,0 +1,286 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, h, Method, Element, Host, State, Prop } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+import Star from '../../assets/svg/star.svg';
+import ShippingFast from "../../assets/svg/shipping-fast.svg";
+import CheckCircle2 from "../../assets/svg/check-circle2.svg";
+export class SallaRatingModal {
+  constructor() {
+    this.hasError = false;
+    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.translationLoaded = false;
+    Helper.setHost(document);
+    salla.event.on('rating::open', () => this.open());
+    salla.lang.onLoaded(() => {
+      this.translationLoaded = true;
+    });
+  }
+  /**
+   * Show the rating modal
+   */
+  async open() {
+    this.modal.open();
+    return await salla.api.withoutNotifier(() => salla.rating.api.order(this.orderId))
+      .then(res => this.order = res.data)
+      .catch(e => {
+      var _a, _b, _c, _d;
+      this.hasError = true;
+      this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
+    })
+      .finally(() => {
+      var _a, _b, _c;
+      this.modal.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">${!!this.order ? `(#${this.order.id})` : ''}</span>`);
+      this.stepsCount = [(_a = this.order) === null || _a === void 0 ? void 0 : _a.testimonials_enabled, (_b = this.order) === null || _b === void 0 ? void 0 : _b.products_enabled, (_c = this.order) === null || _c === void 0 ? void 0 : _c.shipping_enabled].filter(enabled => enabled).length;
+      setTimeout(() => this.handleWizard(), 100);
+      setTimeout(() => {
+        this.modal.stopLoading();
+      }, 1000);
+    });
+  }
+  /**
+   * Show the rating modal
+   */
+  async close() {
+    return this.modal.close();
+  }
+  // handle wizard
+  handleWizard() {
+    this.steps = this.modal.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.modal.querySelectorAll(".s-rating-modal-step-dot");
+    this.showActiveStep();
+  }
+  showActiveStep(current = null) {
+    var _a, _b;
+    this.currentTab = current || this.steps[this.currentIndex];
+    Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
+    if (this.currentIndex != 0) {
+      // the animation
+      Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
+    }
+    // Btn text
+    let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
+    (_b = this.nextBtn) === null || _b === void 0 ? void 0 : _b.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
+      : salla.lang.get('pages.rating.send_ratings'));
+    setTimeout(() => { var _a, _b; return (_a = this.body) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + ((_b = this.currentTab) === null || _b === void 0 ? void 0 : _b.scrollHeight) + 'px'); });
+  }
+  previousTab() {
+    this.currentIndex > 0 && this.currentIndex--;
+    Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+    this.showActiveStep();
+  }
+  submit() {
+    this.submittedBefore() || this.validate();
+    salla.config.canLeave = false;
+    this.nextBtn.load()
+      .then(() => this.submittedBefore() || this.sendFeedback())
+      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
+      .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
+      .then(() => this.showActiveStep())
+      .then(() => Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
+      .finally(() => {
+      this.nextBtn.stop();
+      salla.config.canLeave = true;
+      this.currentIndex == this.stepsCount && this.showThankYou();
+      this.modal.isClosable = false;
+    });
+  }
+  submittedBefore() {
+    return this.submitted.includes(this.currentIndex);
+  }
+  validate(rating = null, type = null) {
+    if (!rating && this.currentTab.dataset.type == 'products') {
+      return this.currentTab.querySelectorAll('.rating-outer-form').forEach(rating => this.validate(rating, 'product'));
+    }
+    rating = rating || this.currentTab;
+    let stars = rating.querySelector('.rating_hidden_input').value;
+    let comment = rating.querySelector('.s-rating-modal-comment');
+    let validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
+    if (stars && comment.value && comment.value.length > 3) {
+      comment.classList.remove('s-has-error');
+      validationMessage.innerHTML = '';
+      return;
+    }
+    type = type || rating['dataset'].type;
+    Helper.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
+    throw validationMessage.innerHTML = stars
+      ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
+      : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
+  }
+  sendFeedback() {
+    let data = {};
+    this.currentTab.querySelectorAll('[name]').forEach((input) => {
+      //decode names like `<input name="jamal[inner]" value="hi">` to be {name:jamal, value: {inner:"hi"}}
+      let inputData = salla.helpers.inputData(input.name, input.value, data);
+      data[inputData.name] = inputData.value;
+    });
+    if (Object.keys(data).length == 0) {
+      return;
+    }
+    data['order_id'] = this.orderId;
+    data['type'] = this.currentTab.dataset.type;
+    this.submitted.push(this.currentIndex);
+    return salla.rating.api[this.currentTab.dataset.type](data);
+  }
+  showThankYou() {
+    let seconds = 10;
+    let timeToClose = setInterval(() => {
+      this.thanksTime.innerHTML = '00:0' + (seconds--);
+      if (seconds > 0) {
+        return;
+      }
+      clearInterval(timeToClose);
+      this.thanksTime.remove();
+      this.close().then(() => window.location.reload());
+    }, 1000);
+    this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+    this.showActiveStep(this.thanksTab);
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: "s-rating-modal" },
+      h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal },
+        h("div", { slot: 'loading' },
+          h("div", { class: "s-rating-modal-skeleton" },
+            h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }),
+            h("salla-skeleton", { height: '15px', width: '60%' }),
+            h("salla-skeleton", { height: '10px', width: '30%' }),
+            h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map(() => h("div", { innerHTML: Star }))),
+            h("salla-skeleton", { height: '100px', width: '100%' }),
+            h("div", { class: "s-rating-modal-skeleton-footer" },
+              h("salla-skeleton", { height: '40px', width: '30%' })))),
+        !this.hasError && this.order
+          ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el },
+              ((_a = this.order) === null || _a === void 0 ? void 0 : _a.testimonials_enabled) ?
+                h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" },
+                  h("div", { class: "s-rating-modal-rounded-icon" },
+                    h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })),
+                  h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')),
+                  h("div", { class: "s-rating-modal-stars-company" },
+                    h("salla-rating-stars", { size: "large" })),
+                  h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }),
+                  h("small", { class: "s-rating-modal-validation-msg" }))
+                : '',
+              this.order.products_enabled
+                ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') },
+                  h("div", { class: "s-rating-modal-product-img-wrap" },
+                    h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })),
+                  h("div", { class: "s-rating-modal-product-details" },
+                    h("h3", { class: "s-rating-modal-product-title" },
+                      " ",
+                      item.product.name),
+                    h("div", { class: "s-rating-modal-stars-product" },
+                      h("salla-rating-stars", { size: "small", name: `products[${index}][rating]` })),
+                    h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }),
+                    h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }),
+                    h("small", { class: "s-rating-modal-validation-msg" })))))
+                : '',
+              this.order.shipping_enabled
+                ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" },
+                  h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }),
+                  this.order.shipping.company.logo
+                    ? h("div", { class: "s-rating-modal-rounded-icon" },
+                      h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
+                    : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }),
+                  h("div", { class: "s-rating-modal-title" },
+                    " ",
+                    salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name),
+                  h("div", { class: "s-rating-modal-stars-company" },
+                    h("salla-rating-stars", { size: "large" })),
+                  h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }),
+                  h("small", { class: "s-rating-modal-validation-msg" }))
+                : '',
+              h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el },
+                h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }),
+                h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')),
+                h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }),
+                h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), h("div", { class: "s-rating-modal-footer" },
+              h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')),
+              this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '',
+              h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
+          : '')));
+  }
+  componentDidLoad() {
+    salla.event.dispatch('rating::ready', this);
+  }
+  static get is() { return "salla-rating-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-rating-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-rating-modal.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": {},
+    "hasError": {},
+    "errorMessage": {},
+    "translationLoaded": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show the rating modal",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "Show the rating modal",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,4 @@
+/*
+* Salla Rating Stars Component: Rating starts as rating input or to display rating values.
+* You can use these classes to target the elements in the component.
+*/