var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _KlevuRating_instances, _KlevuRating_getFillPercentage;
import { Host, h } from "@stencil/core";
/**
 * Klevu ratings component
 *
 * @prop rating - The rating value as a number to show
 * @prop ratingRange - The number of stars to show
 */
export class KlevuRating {
  constructor() {
    _KlevuRating_instances.add(this);
    this.rating = 0;
    this.ratingRange = 5;
  }
  render() {
    return (h(Host, null, ...[...Array(this.ratingRange)].map((_, i) => (h("svg", { width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, h("title", null, `${this.rating}`), h("symbol", { viewBox: "0 0 126.729 126.73", id: "star" }, h("path", { d: "M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z" })), h("defs", null, h("mask", { id: "mstar" }, h("use", { fill: "white", xlinkHref: "#star" }))), h("rect", { x: `${__classPrivateFieldGet(this, _KlevuRating_instances, "m", _KlevuRating_getFillPercentage).call(this, i + 1)}%`, y: "0", class: Math.ceil(this.rating) >= i + 1 ? "filled" : "", width: "100%", height: "100%", mask: "url(#mstar)" }), h("use", { xlinkHref: "#star", "stroke-width": "6", stroke: "#333", fill: "none" }))))));
  }
  static get is() { return "klevu-rating"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-rating.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-rating.css"]
    };
  }
  static get properties() {
    return {
      "rating": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Rating value"
        },
        "attribute": "rating",
        "reflect": false,
        "defaultValue": "0"
      },
      "ratingRange": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Number of stars to show"
        },
        "attribute": "rating-range",
        "reflect": false,
        "defaultValue": "5"
      }
    };
  }
}
_KlevuRating_instances = new WeakSet(), _KlevuRating_getFillPercentage = function _KlevuRating_getFillPercentage(ratingValue) {
  if (ratingValue < this.rating)
    return 0;
  const roundOff = Math.floor(this.rating);
  if (roundOff <= ratingValue - 1) {
    const decimal = this.rating - roundOff;
    return decimal * 100 - 100;
  }
};
//# sourceMappingURL=klevu-rating.js.map
