import { n as l, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as y } from "../chunks/component.styles.CRO4Odto.js";
import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
import { L as f } from "../chunks/i18n.BABe9hN4.js";
import { c as _ } from "../chunks/math.DqTA6ya4.js";
import { w as p } from "../chunks/watch.BCJD77bD.js";
import { i as x, x as c } from "../chunks/lit-element.jLBm65_O.js";
import { r as v } from "../chunks/state.CSDxrqLd.js";
import { t as $ } from "../chunks/event-options.CYHYGOd8.js";
import { e as V } from "../chunks/query.BBf1UFkC.js";
import { e as u } from "../chunks/class-map.BiVq-cVR.js";
import { c as w } from "../chunks/repeat.DbF2p5ae.js";
import { o as m } from "../chunks/style-map.llVFPd__.js";
import { o as d } from "../chunks/unsafe-html.Dff7-rCx.js";
import M from "./icon.js";
const H = x`:host{--symbol-color:var(--cx-color-neutral-300);--symbol-color-active:var(--cx-color-warning-500);--symbol-size:1.2rem;--symbol-container-size:40px;--symbol-spacing:var(--cx-spacing-3x-small);display:inline-flex}:host([variant=outlined]){--symbol-size:var(--cx-font-size-x-large);--symbol-color:var(--cx-color-neutral-600);--symbol-color-active:var(--cx-color-neutral-600)}.rating{border-radius:var(--cx-border-radius-small);vertical-align:middle;display:inline-flex;position:relative}.rating:focus{outline:none}.rating:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.rating__symbols{color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;display:inline-flex;position:relative}.rating__symbols>*{padding:var(--symbol-spacing)}.rating__symbol--active,.rating__partial--filled{color:var(--symbol-color-active)}.rating__partial-symbol-container{position:relative}.rating__partial--filled{top:var(--symbol-spacing);left:var(--symbol-spacing);position:absolute}.rating__symbol{transition:var(--cx-transition-fast) scale;pointer-events:none}.rating__symbol cx-icon{--font-size:var(--symbol-size)}.rating__symbol--hover{scale:1.2}.rating--disabled .rating__symbols,.rating--readonly .rating__symbols{cursor:default}.rating--disabled .rating__symbol--hover,.rating--readonly .rating__symbol--hover{scale:none}.rating--disabled{opacity:.5}.rating--disabled .rating__symbols{cursor:default}@media (forced-colors:active){.rating__symbol--active{color:selecteditem}}.rating--outlined .rating__symbol{border:var(--cx-input-border-width) solid var(--cx-input-border-color);width:var(--symbol-container-size);height:var(--symbol-container-size);justify-content:center;align-items:center;display:flex}.rating--outlined .rating__partial--filled{top:unset;left:unset}.rating--outlined .rating__symbol:not(:first-child){border-left:none}.rating--outlined .rating__symbol:first-child{border-top-left-radius:var(--cx-border-radius-small);border-bottom-left-radius:var(--cx-border-radius-small)}.rating--outlined .rating__symbol:last-child{border-top-right-radius:var(--cx-border-radius-small);border-bottom-right-radius:var(--cx-border-radius-small)}.rating--outlined .rating__symbol--hover{scale:1}`;
var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (t, o, i, s) => {
  for (var e = s > 1 ? void 0 : s ? P(o, i) : o, n = t.length - 1, h; n >= 0; n--)
    (h = t[n]) && (e = (s ? h(o, i, e) : h(e)) || e);
  return s && e && C(o, i, e), e;
};
let r = class extends g {
  constructor() {
    super(...arguments), this.localize = new f(this), this.hoverValue = 0, this.isHovering = !1, this.label = "", this.value = 0, this.max = 5, this.precision = 1, this.readonly = !1, this.disabled = !1, this.variant = "default", this.getSymbol = (t, o = !1) => this.variant !== "outlined" ? '<cx-icon name="star"></cx-icon>' : o ? '<cx-icon name="star" variant="filled"></cx-icon>' : '<cx-icon name="star"></cx-icon>';
  }
  getValueFromMousePosition(t) {
    return this.getValueFromXCoordinate(t.clientX);
  }
  getValueFromTouchPosition(t) {
    return this.getValueFromXCoordinate(t.touches[0].clientX);
  }
  getValueFromXCoordinate(t) {
    const o = this.localize.dir() === "rtl", { left: i, right: s, width: e } = this.rating.getBoundingClientRect(), n = o ? this.roundToPrecision(
      (s - t) / e * this.max,
      this.precision
    ) : this.roundToPrecision(
      (t - i) / e * this.max,
      this.precision
    );
    return _(n, 0, this.max);
  }
  handleClick(t) {
    this.disabled || (this.setValue(this.getValueFromMousePosition(t)), this.emit("cx-change"));
  }
  setValue(t) {
    this.disabled || this.readonly || (this.value = t === this.value ? 0 : t, this.isHovering = !1);
  }
  handleKeyDown(t) {
    const o = this.localize.dir() === "ltr", i = this.localize.dir() === "rtl", s = this.value;
    if (!(this.disabled || this.readonly)) {
      if (t.key === "ArrowDown" || o && t.key === "ArrowLeft" || i && t.key === "ArrowRight") {
        const e = t.shiftKey ? 1 : this.precision;
        this.value = Math.max(0, this.value - e), t.preventDefault();
      }
      if (t.key === "ArrowUp" || o && t.key === "ArrowRight" || i && t.key === "ArrowLeft") {
        const e = t.shiftKey ? 1 : this.precision;
        this.value = Math.min(this.max, this.value + e), t.preventDefault();
      }
      t.key === "Home" && (this.value = 0, t.preventDefault()), t.key === "End" && (this.value = this.max, t.preventDefault()), this.value !== s && this.emit("cx-change");
    }
  }
  handleMouseEnter(t) {
    this.isHovering = !0, this.hoverValue = this.getValueFromMousePosition(t);
  }
  handleMouseMove(t) {
    this.hoverValue = this.getValueFromMousePosition(t);
  }
  handleMouseLeave() {
    this.isHovering = !1;
  }
  handleTouchStart(t) {
    this.isHovering = !0, this.hoverValue = this.getValueFromTouchPosition(t), t.preventDefault();
  }
  handleTouchMove(t) {
    this.hoverValue = this.getValueFromTouchPosition(t);
  }
  handleTouchEnd(t) {
    this.isHovering = !1, this.setValue(this.hoverValue), this.emit("cx-change"), t.preventDefault();
  }
  roundToPrecision(t, o = 0.5) {
    const i = 1 / o;
    return Math.ceil(t * i) / i;
  }
  handleHoverValueChange() {
    this.emit("cx-hover", {
      detail: {
        phase: "move",
        value: this.hoverValue
      }
    });
  }
  handleIsHoveringChange() {
    this.emit("cx-hover", {
      detail: {
        phase: this.isHovering ? "start" : "end",
        value: this.hoverValue
      }
    });
  }
  /** Sets focus on the rating. */
  focus(t) {
    this.rating.focus(t);
  }
  /** Removes focus from the rating. */
  blur() {
    this.rating.blur();
  }
  render() {
    const t = this.localize.dir() === "rtl", o = Array.from(Array(this.max).keys());
    let i = 0;
    return this.disabled || this.readonly ? i = this.value : i = this.isHovering ? this.hoverValue : this.value, c`<div part="base" class=${u({
      rating: !0,
      "rating--disabled": this.disabled,
      "rating--outlined": this.variant === "outlined",
      "rating--readonly": this.readonly,
      "rating--rtl": t
    })} role="slider" aria-label=${this.label} aria-disabled=${this.disabled ? "true" : "false"} aria-readonly=${this.readonly ? "true" : "false"} aria-valuenow=${this.value} aria-valuemin="0" aria-valuemax=${this.max} tabindex=${this.disabled ? "-1" : "0"} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mouseenter=${this.handleMouseEnter} @touchstart=${this.handleTouchStart} @mouseleave=${this.handleMouseLeave} @touchend=${this.handleTouchEnd} @mousemove=${this.handleMouseMove} @touchmove=${this.handleTouchMove}><span class="rating__symbols">${w(o, (s, e) => i > e && i < e + 1 ? c`<span class=${u({
      "rating__partial-symbol-container": !0,
      rating__symbol: !0,
      "rating__symbol--hover": this.isHovering && Math.ceil(i) === e + 1
    })} role="presentation"><div style=${m({
      clipPath: t ? `inset(0 ${(i - e) * 100}% 0 0)` : `inset(0 0 0 ${(i - e) * 100}%)`
    })}>${d(this.getSymbol(e + 1, !1))}</div><div class="rating__partial--filled" style=${m({
      clipPath: t ? `inset(0 0 0 ${100 - (i - e) * 100}%)` : `inset(0 ${100 - (i - e) * 100}% 0 0)`
    })}>${d(this.getSymbol(e + 1, !0))}</div></span>` : c`<span class=${u({
      rating__symbol: !0,
      "rating__symbol--active": i >= e + 1,
      "rating__symbol--hover": this.isHovering && Math.ceil(i) === e + 1
    })} role="presentation">${d(
      this.getSymbol(e + 1, i >= e + 1)
    )}</span>`)}</span></div>`;
  }
};
r.styles = [y, H];
r.dependencies = { "cx-icon": M };
a([
  V(".rating")
], r.prototype, "rating", 2);
a([
  v()
], r.prototype, "hoverValue", 2);
a([
  v()
], r.prototype, "isHovering", 2);
a([
  l()
], r.prototype, "label", 2);
a([
  l({ type: Number })
], r.prototype, "value", 2);
a([
  l({ type: Number })
], r.prototype, "max", 2);
a([
  l({ type: Number })
], r.prototype, "precision", 2);
a([
  l({ reflect: !0, type: Boolean })
], r.prototype, "readonly", 2);
a([
  l({ reflect: !0, type: Boolean })
], r.prototype, "disabled", 2);
a([
  l({ reflect: !0 })
], r.prototype, "variant", 2);
a([
  l({ attribute: "get-symbol", type: Function })
], r.prototype, "getSymbol", 2);
a([
  $({ passive: !0 })
], r.prototype, "handleTouchMove", 1);
a([
  p("hoverValue")
], r.prototype, "handleHoverValueChange", 1);
a([
  p("isHovering")
], r.prototype, "handleIsHoveringChange", 1);
r = a([
  b("cx-rating")
], r);
export {
  r as default
};
