@salla.sa/twilight-components 1.0.58 → 1.0.61

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

@@ -0,0 +1,137 @@
+import { Component, Host, h, Prop, Element } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaRatingStars {
+  constructor() {
+    this.name = 'rating';
+    this.size = 'medium';
+  }
+  initiateRating() {
+    salla.document.event.onSubmit('.s-rating-stars-element', function (event) {
+      event.preventDefault();
+      // Get the selected star - activeElement is not supported in safari
+      let activeStars = event.target.querySelectorAll('.s-rating-stars-btn-star.s-rating-stars-hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let selectedIndex = parseInt(selected.dataset.star, 10);
+      event.target.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Get all stars in this form (only search in the form, not the whole document)
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      event.target
+        .querySelectorAll('.s-rating-stars-btn-star')
+        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < selectedIndex));
+      // Remove aria-pressed from any previously selected star
+      event.target.querySelectorAll('.s-rating-stars-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
+      // Add aria-pressed role to the selected button
+      selected.setAttribute('aria-pressed', '');
+    });
+  }
+  highlightSelectedStars() {
+    let hover = ['s-rating-stars-hovered'], element = this.host.querySelector('.s-rating-stars-element'), starElements = element === null || element === void 0 ? void 0 : element.querySelectorAll('.s-rating-stars-btn-star');
+    element === null || element === void 0 ? void 0 : element.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
+    starElements === null || starElements === void 0 ? void 0 : starElements.forEach((starElement, index) => {
+      starElement.addEventListener('mouseover', () => {
+        starElement.classList.add(...hover);
+        if (index <= 1) {
+          starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
+        }
+        else {
+          for (let i = 0; i < index; i++) {
+            starElements[i].classList.add(...hover);
+          }
+        }
+      });
+      starElement.addEventListener('mouseout', () => starElement.classList.remove(...hover));
+    });
+  }
+  createStars(n) {
+    let stars = [];
+    for (let i = 0; i < 5; i++) {
+      stars.push(h("span", { class: {
+          's-rating-stars-btn-star sicon-star2': true,
+          ['s-rating-stars-' + this.size]: true,
+          's-rating-stars-selected': i < n
+        } }));
+    }
+    return stars;
+  }
+  render() {
+    return (h(Host, null, this.value ?
+      h("div", { class: "s-rating-stars-wrapper" },
+        " ",
+        this.createStars(this.value),
+        " ")
+      :
+        h("form", { class: "s-rating-stars-element" },
+          h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }),
+          [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star },
+            h("i", { class: "sicon-star2" }))))));
+  }
+  componentDidLoad() {
+    this.initiateRating();
+    this.highlightSelectedStars();
+  }
+  static get is() { return "salla-rating-stars"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-rating-stars.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-rating-stars.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "'rating'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "value": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}