import { i as b, P as m, r as g, n as r } from "./plus-base-1920dd44.mjs";
import { e as V } from "./custom-element-eaccb8d2.mjs";
import { t as x } from "./state-4d7d9621.mjs";
import { o as d } from "./style-map-628a6643.mjs";
import { n as f, o as u } from "./static-be5c3b1c.mjs";
import { s as S } from "./index-975d3293.mjs";
import "./directive-daf4e9b6.mjs";
const w = S({
  slots: {
    host: ["antialiased w-full flex items-center justify-start gap-2"],
    empty: "text-color-placeholder",
    predefined: "text-color-disabled",
    hovered: "text-color-primary",
    box: "relative",
    icon: "overflow-hidden absolute top-0 left-0 h-full "
  },
  variants: {
    size: {
      sm: {
        host: "text-sm"
      },
      md: {
        host: "text-base"
      },
      lg: {
        host: "text-lg"
      }
    }
  },
  compoundVariants: [],
  defaultVariants: {
    size: "md"
  }
});
var _ = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, l, p, i) => {
  for (var s = i > 1 ? void 0 : i ? P(l, p) : l, a = e.length - 1, h; a >= 0; a--)
    (h = e[a]) && (s = (i ? h(l, p, s) : h(s)) || s);
  return i && s && _(l, p, s), s;
};
let t = class extends m {
  constructor() {
    super(...arguments), this.kind = "default", this.status = "default", this.size = "md", this.emptyIcon = '<i class="fa-regular fa-star"></i>', this.icon = '<i class="fa-solid fa-star"></i>', this.max = 5, this.step = 1, this.defaultValue = 0, this.value = 0, this.hoveredValue = 0, this.half = !1, this.hasFocus = !1, this.handleSelect = (e) => () => {
      this.value = e, this.emit("plus-change", { detail: { value: e } });
    };
  }
  calculateSelectedWidth(e, l = !1, p = 0) {
    const i = p / this.step, s = Math.floor(i), a = Math.ceil(i), h = s !== a, n = e === a, c = e >= s && e < a, v = e === s, y = e < s;
    if (h && n) {
      const $ = (i - s) * 100;
      return l ? "50%" : `${$}%`;
    }
    return c || v || y ? "100%" : "0%";
  }
  hoveredWidth(e) {
    return this.hoveredValue > 0 ? this.calculateSelectedWidth(e, !0, this.hoveredValue) : this.value > 0 ? this.calculateSelectedWidth(e, !0, this.value) : "0%";
  }
  render() {
    const { size: e } = this, { host: l, box: p, predefined: i, empty: s, hovered: a, icon: h } = w({ size: e });
    return f`<div class="${l()}" @mouseleave="${() => this.hoveredValue = 0}">
      ${Array.from({ length: this.max }).map((n, c) => f`
          <div class="${p()}" @mouseover="${() => this.hoveredValue = c + 1}" @click="${this.handleSelect(c + 1)}">
            <div class="${s()}">${u(this.emptyIcon)}</div>
            <div
              class="${h()} ${i()}"
              style="${d({
      width: this.calculateSelectedWidth(c + 1, !1, this.defaultValue)
    })}"
            >
              ${u(this.icon)}
            </div>
            <div class="${h()} ${a()}" style="${d({ width: this.hoveredWidth(c + 1) })}">${u(this.icon)}</div>
          </div>
        `)}
    </div>`;
  }
};
t.host = b`
    :host {
      display: block;
    }
  `;
t.styles = [...m.styles, g(t.host)];
o([
  r({ type: String })
], t.prototype, "kind", 2);
o([
  r({ type: String })
], t.prototype, "status", 2);
o([
  r({ type: String })
], t.prototype, "size", 2);
o([
  r({ attribute: "empty-icon" })
], t.prototype, "emptyIcon", 2);
o([
  r()
], t.prototype, "icon", 2);
o([
  r({ type: Number })
], t.prototype, "max", 2);
o([
  r({ type: Number })
], t.prototype, "step", 2);
o([
  r({ type: Number, attribute: "default-value" })
], t.prototype, "defaultValue", 2);
o([
  r({ type: Number, reflect: !0 })
], t.prototype, "value", 2);
o([
  r({ type: Number })
], t.prototype, "hoveredValue", 2);
o([
  r({ type: Boolean })
], t.prototype, "half", 2);
o([
  r()
], t.prototype, "name", 2);
o([
  x()
], t.prototype, "hasFocus", 2);
t = o([
  V("plus-rating")
], t);
export {
  t as RatingComponent
};
