@salla.sa/twilight-components 1.0.62 → 1.0.64

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

@@ -1,3 +1,6 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
 import { Component, Host, h, Prop, Element } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaRatingStars {
@@ -6,24 +9,26 @@ export class SallaRatingStars {
     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', '');
+    document.querySelectorAll('.s-rating-stars-element').forEach((elem) => {
+      elem.addEventListener('submit', 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 = selected.getAttribute('data-star');
+        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 < parseInt(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() {