@salla.sa/twilight-components 1.0.5 → 1.0.7

package/dist/collection/Helpers/Helper.js

@@ -0,0 +1,16 @@
+class Helper extends salla.AppHelpers {
+  setHost(host) {
+    this.host = host;
+  }
+  getElement(selector) {
+    return this.host.querySelector(selector);
+  }
+  getAttribute(selector, attribute) {
+    var _a;
+    return (_a = this.getElement(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute);
+  }
+  val(selector) {
+    return this.getAttribute(selector, 'value');
+  }
+}
+export default new Helper;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,18 @@
+{
+  "entries": [
+    "./components/salla-login/salla-login.js",
+    "./components/salla-search/salla-search.js",
+    "./components/multi-warehouse/multi-warehouse.js",
+    "./components/order-rating/order-rating.js",
+    "./components/salla-button/salla-button.js",
+    "./components/salla-localization/salla-localization.js",
+    "./components/salla-modal/salla-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.8.1",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/generate-summary.js

@@ -0,0 +1,35 @@
+var fs = require('fs'), path = require('path'), util = require('util');
+
+var dirToJSON = function (dir, done) {
+  var results = [];
+
+  function recWalk(d, res) {
+    var list = fs.readdirSync(d);
+    list.forEach((name) => {
+      var file = path.resolve(d, name);
+      var stat = fs.statSync(file);
+      if (stat && stat.isDirectory()) {
+        var title;
+        if (name) {
+          title = 'salla-' + name
+        }
+        res.push({ title: title, file: name + '/readme.md' });
+      }
+    });
+  }
+
+  try {
+    recWalk(dir, results);
+    done(null, results);
+  } catch (err) {
+    done(err);
+  }
+};
+
+dirToJSON("src/components", function (err, results) {
+  if (err) console.log(err);
+  else fs.writeFile('src/components/summary.json', JSON.stringify(results), 'utf8', function (err) {
+    if (err) throw err;
+    console.log('Saved!');
+  });
+});

package/dist/collection/components/multi-warehouse/multi-warehouse.js

@@ -0,0 +1,239 @@
+import { Component, h, Prop, Method, State, Element } from "@stencil/core";
+// import Helper from "../../Helpers/Helper";
+let engine = require('store/src/store-engine');
+let storages = require('store/storages/sessionStorage');
+let sessionStore = engine.createStore(storages);
+export class MultiWarehouse {
+  constructor() {
+    this.open = false;
+    this.isOpenedBefore = sessionStore.get("multi-warehouse-opened-before");
+    this.displayAs = 'default';
+    this.browseProductsFrom = 'all';
+    this.branches = [
+      { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
+      { id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
+    ];
+    this.current = 1;
+    this.currentBranch = (prop) => {
+      return this.branches.filter((el) => el.id == this.current)[0][prop];
+    };
+    this.statusColor = (branch = null) => {
+      return branch ?
+        branch.limited ? 'text-red-400' : branch.available ? 'text-green-500' : 'text-gray-400'
+        :
+          this.currentBranch('limited') ? 'text-red-400' : this.currentBranch('available') ? 'text-green-500' : 'text-gray-400';
+    };
+    this.isChoiceable = () => {
+      return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
+    };
+    this.formTitle = () => {
+      return this.isChoiceable() ?
+        'توفر المنتج في الفروع الآخرى'
+        : 'التسوق من فرع آخر';
+    };
+    salla.event.on('branches::show', () => this.show());
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  handelChange(event) {
+    this.selected = event.target.value;
+  }
+  handleSubmit() {
+    sessionStore.set("multi-warehouse-opened-before", true);
+    this.show();
+    setTimeout(() => {
+      this.current = this.selected;
+    }, 300);
+  }
+  render() {
+    return (h("salla-modal", { "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "multi-warehouse-modal", class: "hidden" },
+      h("slot", { name: "header" },
+        h("div", { slot: "header" })),
+      h("div", null,
+        h("div", { class: "text-right" },
+          h("div", { class: "flex items-center mb-8" },
+            h("div", { class: "flex-shrink-0 sm:mb-0 me-4" },
+              h("div", { class: "h-16 w-16 border border-gray-200 bg-white text-primary rounded-full flex justify-center items-center" },
+                h("span", { class: "sicon-store-alt" }))),
+            h("div", null,
+              h("p", { class: "mt-1 text-xs text-gray-400" }, "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646"),
+              h("h4", { class: "text-base" }, "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636"))),
+          h("fieldset", { class: "mt-4" },
+            h("h4", { class: "text-sm text-gray-600 mb-6" }, this.formTitle()),
+            h("legend", { class: "sr-only" }, this.formTitle()),
+            this.branches.length <= 5 ?
+              h("div", { class: "space-y-5" }, this.branches.map((branch) => h("div", { class: "flex items-center" },
+                h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
+                    'me-3 focus:ring-primary h-4 w-4 text-primary border-gray-300': true,
+                    'opacity-50': !branch.open,
+                    'hidden': !this.isChoiceable()
+                  }, checked: this.current == branch.id }),
+                h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
+                    'flex items-center justify-between text-sm font-medium text-gray-700 flex-grow': true,
+                    'cursor-pointer': this.isChoiceable()
+                  } },
+                  h("span", { class: { 'opacity-50': !branch.open } }, branch.name),
+                  this.isChoiceable() ?
+                    h("small", { class: "text-red-400" }, branch.open ? '' : 'مُغلق')
+                    :
+                      h("span", { class: this.statusColor(branch) }, branch.tag)))))
+              :
+                h("select", { class: "w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary sm:text-sm border-gray-200 rounded-md appearance-none visibility_condition px-4", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id },
+                  branch.name,
+                  " ",
+                  branch.open ? '' : '- مُغلق'))))))),
+      this.isChoiceable() ?
+        h("p", { slot: "footer" },
+          h("slot", { name: "footer" },
+            h("button", { type: "button", class: "mt-8 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white transition-colors hover:bg-primary-d focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:col-start-2 sm:text-sm", onClick: () => this.handleSubmit() }, salla.lang.get('common.elements.ok'))))
+        : ''));
+  }
+  componentDidRender() {
+    if (!this.isOpenedBefore && this.displayAs == 'popup') {
+      //this.show()
+    }
+  }
+  static get is() { return "multi-warehouse"; }
+  static get properties() { return {
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false
+    },
+    "displayAs": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "display-as",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "browseProductsFrom": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "browse-products-from",
+      "reflect": false,
+      "defaultValue": "'all'"
+    },
+    "branches": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[\n    {id: 1, name: '\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 2, name: '\u0641\u0631\u0639 \u062C\u062F\u0629', open: false, available: false, limited: false, tag: '\u063A\u064A\u0631 \u0645\u062A\u0648\u0641\u0631'},\n    {id: 3, name: '\u0641\u0631\u0639 \u0645\u0643\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 4, name: '\u0641\u0631\u0639 \u0627\u0644\u0645\u062F\u064A\u0646\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 5, name: '\u0641\u0631\u0639 \u062C\u0627\u0632\u0627\u0646', open: true, available: true, limited: true, tag: '\u0627\u0644\u0643\u0645\u064A\u0629 \u0645\u062D\u062F\u0648\u062F\u0629'}\n  ]"
+    },
+    "current": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current",
+      "reflect": false,
+      "defaultValue": "1"
+    }
+  }; }
+  static get states() { return {
+    "open": {},
+    "selected": {},
+    "isOpenedBefore": {}
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,288 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class OrderRating {
+  constructor() {
+    this.stars = [1, 2, 3, 4, 5];
+    this.order = {
+      shipping: { id: 5622 },
+      order_id: "179794",
+      products: [
+        {
+          "title": "ميكروفون عالى الجودة",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "2314513454",
+          "getOptimusRouteKey": "7351233357"
+        },
+        {
+          "title": "وحدة تحكم لمشغل العاب",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/NOa4kHvOkd1hBWHk3JIgAo1602oVACfuWGFz3vXv.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "9842833",
+          "getOptimusRouteKey": "735152357"
+        },
+        {
+          "title": "ساعة ذكية بنظام اندرويد",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/T4kTqYNuPAZmPMLw1bx92RnjVMZyFszVXOUZQsFJ.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "679822376",
+          "getOptimusRouteKey": "73233357"
+        }
+      ],
+      ratingMessage: {
+        1: "غير راضي <span class='emoji mx-1'>😒</span>",
+        2: "لم يعجبني <span class='emoji mx-1'>😌</span>",
+        3: "معقول <span class='emoji mx-1'>🙄</span>",
+        4: "أعجبني <span class='emoji mx-1'>👍</span>",
+        5: "أعجبني جداً <span class='emoji mx-1'>🤩</span>"
+      },
+      settings: {
+        isProductsRating: true,
+        isStoreRating: true,
+        isShippingRating: true,
+      }
+    };
+  }
+  render() {
+    return (h(Host, null,
+      this.order.settings.isProductsRating && this.renderProductsRating(),
+      this.order.settings.isStoreRating && this.renderStoreRating(),
+      this.order.settings.isShippingRating && this.renderShippingRating()));
+  }
+  renderProductsRating() {
+    return (h("section", { class: "rating-section products-section", "data-type": "product" },
+      h("div", { class: "bg-white mb-5 p-5 rounded-md overflow-hidden mb-10" }, this.order.products.map((item, index) => {
+        var _a;
+        return h("div", { class: "rating-outer-form", "data-stars-error": `يرجى تقييم (${item.title}) بواسطة النجمات` },
+          h("div", { class: "product-item mb-4" },
+            h("div", { class: "mb-5" },
+              h("div", { class: "flex space-s-5 mb-8" },
+                h("img", { src: item.image, alt: item.title, class: "w-18 h-14 object-cover rounded-md" }),
+                h("div", { class: "flex-1" },
+                  h("h3", { class: "section-title leading-5 mb-1.5 md:text-base" },
+                    " ",
+                    item.title),
+                  h("div", { class: "rw-product-entry__rate" },
+                    h("div", { class: "rating-wrap flex items-center space-s-4" },
+                      h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating()),
+                      h("p", { class: "rate-label fix-align font-xsm my-0" })),
+                    h("input", { type: "hidden", name: "order_id", value: (_a = this.order) === null || _a === void 0 ? void 0 : _a.order_id }),
+                    h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.getOptimusRouteKey }),
+                    h("input", { type: "hidden", name: "type", value: "products" }),
+                    h("textarea", { "data-product-id": item.id, name: `products[${index}][comment]`, id: `productReview_${item.id}`, class: "comment form-input h-20 product-review", placeholder: `اضف رأيك عن المنتج (${item.title})` }),
+                    h("small", { class: "text-red-400 validation-message" })))))));
+      }))));
+  }
+  renderStoreRating() {
+    return (h("section", { class: "rating-section bg-white my-10 p-5 rounded-md mb-5", "data-type": "store" },
+      h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062A\u062C\u0631 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" },
+        h("input", { type: "hidden", name: "order_id", value: this.order.order_id }),
+        h("input", { type: "hidden", name: "type", value: "store" }),
+        h("h2", { class: "section-title text-lg font-bold mb-5" }, "\u0643\u064A\u0641 \u0643\u0627\u0646\u062A \u062A\u062C\u0631\u0628\u062A\u0643 \u0645\u0639 \u0627\u0644\u0645\u062A\u062C\u0631 \u0647\u0630\u0647 \u0627\u0644\u0645\u0631\u0629"),
+        h("div", { class: "mb-2" },
+          h("textarea", { id: "storeReview", name: "comment", class: "form-input comment h-20", placeholder: "\u0627\u0636\u0641 \u0631\u0623\u064A\u0643 \u0639\u0646 \u0627\u0644\u0645\u062A\u062C\u0631.." })),
+        h("div", { class: "rating-wrap flex items-center space-s-4" },
+          h("form", { class: "rate-element rate-element--has-label" }, this.getStarsRating()),
+          h("p", { class: "rate-label fix-align font-sm center mb-0" })),
+        h("small", { class: "text-red-400 validation-message" }))));
+  }
+  renderShippingRating() {
+    return (h("section", { class: "rating-section bg-white my-10 p-5 rounded-md mb-5", "data-type": "shipping" },
+      h("div", { class: "rating-outer-form", "data-stars-error": "\u064A\u0631\u062C\u0649 \u062A\u0642\u064A\u064A\u0645 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0646\u062C\u0645\u0627\u062A" },
+        h("input", { type: "hidden", name: "order_id", value: this.order.order_id }),
+        h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }),
+        h("input", { type: "hidden", name: "type", value: "shipping" }),
+        h("h2", { class: "section-title text-lg font-bold mb-5" }, "\u062E\u0628\u0631\u0646\u0627 \u0639\u0646 \u062A\u062C\u0631\u0628\u062A\u0643 \u0645\u0639 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646"),
+        h("div", { class: "mb-2" },
+          h("textarea", { id: "shippingReview", name: "comment", class: "form-input comment h-20 mb-2", placeholder: "\u0627\u0636\u0641 \u0631\u0623\u064A\u0643 \u0639\u0646 \u0634\u0631\u0643\u0629 \u0627\u0644\u0634\u062D\u0646" })),
+        h("div", { class: "rating-wrap flex items-center space-s-4" },
+          h("form", { class: "rate-element ratFeedbackPresentere-element--has-label" }, this.getStarsRating()),
+          h("p", { class: "rate-label fix-align font-sm center mb-0" })),
+        h("small", { class: "text-red-400 validation-message" }))));
+  }
+  getStarsRating() {
+    return (h("div", { class: "mb-1" },
+      h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", value: "" }),
+      this.stars.map((star) => h("button", { type: "submit", class: "btn btn--transparent px-1 text-lg text-gray-400 btn--star", "data-star": star, "data-text": this.order.ratingMessage[`${star}`] },
+        h("i", { class: "sicon-star2" })))));
+  }
+  //========================= Start Rating Logic =========================//
+  initiateRating() {
+    this.highlightSelectedStars();
+    this.starsRating();
+    //show submitRating Button Only When there is a comment field
+    Helper.app.toggle('#submitRating', 'btn', 'hidden', () => Helper.app.element('#shippingReview,#storeReview,.product-review'));
+    this.ratingChain = Promise.resolve();
+    Helper.app.onClick('#submitRating', () => this.sendRating().then(() => window.location.reload()));
+  }
+  sendRating() {
+    this.ratingValidation();
+    Helper.app.all('.rating-section', ratingSection => {
+      let type = ratingSection.dataset.type;
+      let formsData = [];
+      ratingSection.querySelectorAll('.rating-outer-form')
+        .forEach((form) => {
+        let formData = {};
+        form.querySelectorAll('[name]')
+          .forEach(function (input) {
+          let inputData = salla.helpers.inputData(input.name, input.value, formData);
+          formData[inputData.name] = inputData.value;
+        });
+        formsData = [];
+        formsData.push(formData);
+        this.sendFeedback(type, formsData);
+      });
+    });
+    return this.ratingChain;
+  }
+  sendFeedback(type, formsData) {
+    if (!formsData || formsData.length == 0) {
+      return;
+    }
+    salla.config.canLeave = false;
+    this.ratingChain = salla.feedback.api[type](formsData[0])
+      .then(function () {
+      salla.config.canLeave = true;
+    }).catch(() => salla.config.canLeave = true);
+  }
+  ratingValidation() {
+    let errorMsg = '';
+    document.querySelectorAll('.rating-section')
+      .forEach((ratingSection) => {
+      ratingSection.querySelectorAll('.rating-outer-form')
+        .forEach((rating) => {
+        let ratingInput = rating.querySelector('.rating_hidden_input');
+        let commentInput = rating.querySelector('.comment');
+        let sectionTitle = rating.querySelector('.section-title');
+        let validationMessage = rating.querySelector('.validation-message');
+        if (ratingInput.value && commentInput.value && commentInput.value.length > 3) {
+          commentInput.classList.remove('has-error');
+          sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.classList.remove('has-error', 'text-red-400');
+          validationMessage.innerHTML = '';
+          return;
+        }
+        else if (commentInput.value && commentInput.value.length > 3) {
+          commentInput.classList.remove('has-error');
+        }
+        else {
+          commentInput.classList.add('has-error');
+        }
+        sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.classList.add('has-error', 'text-red-400');
+        errorMsg = ratingInput.value
+          ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + commentInput.getAttribute('placeholder'))
+          : (rating.dataset.starsError || salla.lang.get('pages.rating.rate_store_stars'));
+        validationMessage.innerHTML = errorMsg;
+      });
+    });
+    //Fire error to prevent sending rating
+    if (errorMsg) {
+      // scroll to first error
+      let ratingErrors = document.querySelectorAll('.has-error');
+      if (ratingErrors.length) {
+        let firstError = ratingErrors[0].offsetTop;
+        window.scrollTo({ top: firstError - 80 }); // 80 = fixed nav height
+      }
+      throw new Error(errorMsg);
+    }
+  }
+  // for hovered star ---
+  highlightSelectedStars() {
+    let hover = ['hovered', 'text-theme-yellow'];
+    Helper.app.all('.rate-element', el => {
+      let starElements = el.querySelectorAll('.btn--star');
+      // remove hovered state from stars ---
+      el.addEventListener('mouseout', () => el.querySelectorAll('.btn--star').forEach(star => star.classList.remove(...hover)));
+      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);
+            }
+          }
+        });
+        starElement.addEventListener('mouseout', () => {
+          starElement.classList.contains(...hover) ? starElement.classList.remove(...hover) : null;
+        });
+      });
+    });
+  }
+  starsRating() {
+    let selectedClasses = ['selected', 'text-theme-yellow'];
+    // Listen for form submissions
+    salla.document.event.onSubmit('.rate-element', function (event) {
+      // Prevent form from submitting
+      event.preventDefault();
+      // Get the selected star - activeElement is not supported in safari
+      var activeStars = event.target.querySelectorAll('.btn--star.hovered');
+      var selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      var selectedIndex = parseInt(selected.dataset.star, 10), selectedText = selected.dataset.text;
+      event.target.nextElementSibling.innerHTML = selectedText;
+      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('.btn--star')
+        .forEach(function (star, index) {
+        if (index < selectedIndex) {
+          // Selected star or before it, Add highlighting
+          star.classList.add(...selectedClasses);
+          return;
+        }
+        // After selected star, Remove highlight
+        star.classList.remove(...selectedClasses);
+      });
+      // Remove aria-pressed from any previously selected star
+      var previousRating = event.target.querySelector('.star[aria-pressed="true"]');
+      if (previousRating) {
+        previousRating.removeAttribute('aria-pressed');
+      }
+      // Add aria-pressed role to the selected button
+      selected.setAttribute('aria-pressed', true);
+    });
+  }
+  static get is() { return "order-rating"; }
+  static get originalStyleUrls() { return {
+    "$": ["order-rating.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["order-rating.css"]
+  }; }
+  static get properties() { return {
+    "order": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "order",
+      "reflect": false,
+      "defaultValue": "{\n    shipping: { id: 5622 },\n    order_id: \"179794\",\n    products: [\n      {\n        \"title\": \"\u0645\u064A\u0643\u0631\u0648\u0641\u0648\u0646 \u0639\u0627\u0644\u0649 \u0627\u0644\u062C\u0648\u062F\u0629\",\n        \"image\": \"https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg\",\n        \"price\": \"\u200F10,978.00 \u0631.\u0633\",\n        \"qty\": \"\u200F2\",\n        \"totalBefore\": \"\u200F1120 \u0631.\u0633\",\n        \"discount\": \"-5%\",\n        \"total\": \"\u200F1064 \u0631.\u0633\",\n        \"id\": \"2314513454\",\n        \"getOptimusRouteKey\": \"7351233357\"\n\n      },\n      {\n        \"title\": \"\u0648\u062D\u062F\u0629 \u062A\u062D\u0643\u0645 \u0644\u0645\u0634\u063A\u0644 \u0627\u0644\u0639\u0627\u0628\",\n        \"image\": \"https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/NOa4kHvOkd1hBWHk3JIgAo1602oVACfuWGFz3vXv.jpg\",\n        \"price\": \"\u200F10,978.00 \u0631.\u0633\",\n        \"qty\": \"\u200F2\",\n        \"totalBefore\": \"\u200F1120 \u0631.\u0633\",\n        \"discount\": \"-5%\",\n        \"total\": \"\u200F1064 \u0631.\u0633\",\n        \"id\": \"9842833\",\n        \"getOptimusRouteKey\": \"735152357\"\n      },\n      {\n        \"title\": \"\u0633\u0627\u0639\u0629 \u0630\u0643\u064A\u0629 \u0628\u0646\u0638\u0627\u0645 \u0627\u0646\u062F\u0631\u0648\u064A\u062F\",\n        \"image\": \"https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/T4kTqYNuPAZmPMLw1bx92RnjVMZyFszVXOUZQsFJ.jpg\",\n        \"price\": \"\u200F10,978.00 \u0631.\u0633\",\n        \"qty\": \"\u200F2\",\n        \"totalBefore\": \"\u200F1120 \u0631.\u0633\",\n        \"discount\": \"-5%\",\n        \"total\": \"\u200F1064 \u0631.\u0633\",\n        \"id\": \"679822376\",\n        \"getOptimusRouteKey\": \"73233357\"\n\n      }\n    ],\n    ratingMessage: {\n      1: \"\u063A\u064A\u0631 \u0631\u0627\u0636\u064A <span class='emoji mx-1'>\uD83D\uDE12</span>\",\n      2: \"\u0644\u0645 \u064A\u0639\u062C\u0628\u0646\u064A <span class='emoji mx-1'>\uD83D\uDE0C</span>\",\n      3: \"\u0645\u0639\u0642\u0648\u0644 <span class='emoji mx-1'>\uD83D\uDE44</span>\",\n      4: \"\u0623\u0639\u062C\u0628\u0646\u064A <span class='emoji mx-1'>\uD83D\uDC4D</span>\",\n      5: \"\u0623\u0639\u062C\u0628\u0646\u064A \u062C\u062F\u0627\u064B <span class='emoji mx-1'>\uD83E\uDD29</span>\"\n    },\n\n    settings: {\n      isProductsRating: true,\n      isStoreRating: true,\n      isShippingRating: true,\n    }\n  }"
+    }
+  }; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}