import{rating_styles_default as e}from"./chunk.HOZSVBVS.js";import{clamp as t}from"./chunk.HF7GESMZ.js";import{LocalizeController as i}from"./chunk.2A3352EO.js";import{SlIcon as s}from"./chunk.M4HIRIJ5.js";import{watch as o}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as r}from"./chunk.Z7XDKKOD.js";import{__decorateClass as a}from"./chunk.6M63UXML.js";import{classMap as l}from"../../../../lit/directives/class-map.js";import{eventOptions as h,property as n,query as u,state as d}from"../../../../lit/decorators.js";import{html as m}from"../../../../lit/index.js";import{styleMap as v}from"../../../../lit/directives/style-map.js";import{unsafeHTML as c}from"../../../../lit/directives/unsafe-html.js";var p=class extends r{constructor(){super(...arguments),this.localize=new i(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.getSymbol=()=>'<sl-icon name="star-fill" library="system"></sl-icon>'}getValueFromMousePosition(e){return this.getValueFromXCoordinate(e.clientX)}getValueFromTouchPosition(e){return this.getValueFromXCoordinate(e.touches[0].clientX)}getValueFromXCoordinate(e){const i="rtl"===this.localize.dir(),{left:s,right:o,width:r}=this.rating.getBoundingClientRect(),a=i?this.roundToPrecision((o-e)/r*this.max,this.precision):this.roundToPrecision((e-s)/r*this.max,this.precision);return t(a,0,this.max)}handleClick(e){this.disabled||(this.setValue(this.getValueFromMousePosition(e)),this.emit("sl-change"))}setValue(e){this.disabled||this.readonly||(this.value=e===this.value?0:e,this.isHovering=!1)}handleKeyDown(e){const t="ltr"===this.localize.dir(),i="rtl"===this.localize.dir(),s=this.value;if(!this.disabled&&!this.readonly){if("ArrowDown"===e.key||t&&"ArrowLeft"===e.key||i&&"ArrowRight"===e.key){const t=e.shiftKey?1:this.precision;this.value=Math.max(0,this.value-t),e.preventDefault()}if("ArrowUp"===e.key||t&&"ArrowRight"===e.key||i&&"ArrowLeft"===e.key){const t=e.shiftKey?1:this.precision;this.value=Math.min(this.max,this.value+t),e.preventDefault()}"Home"===e.key&&(this.value=0,e.preventDefault()),"End"===e.key&&(this.value=this.max,e.preventDefault()),this.value!==s&&this.emit("sl-change")}}handleMouseEnter(e){this.isHovering=!0,this.hoverValue=this.getValueFromMousePosition(e)}handleMouseMove(e){this.hoverValue=this.getValueFromMousePosition(e)}handleMouseLeave(){this.isHovering=!1}handleTouchStart(e){this.isHovering=!0,this.hoverValue=this.getValueFromTouchPosition(e),e.preventDefault()}handleTouchMove(e){this.hoverValue=this.getValueFromTouchPosition(e)}handleTouchEnd(e){this.isHovering=!1,this.setValue(this.hoverValue),this.emit("sl-change"),e.preventDefault()}roundToPrecision(e,t=.5){const i=1/t;return Math.ceil(e*i)/i}handleHoverValueChange(){this.emit("sl-hover",{detail:{phase:"move",value:this.hoverValue}})}handleIsHoveringChange(){this.emit("sl-hover",{detail:{phase:this.isHovering?"start":"end",value:this.hoverValue}})}focus(e){this.rating.focus(e)}blur(){this.rating.blur()}render(){const e="rtl"===this.localize.dir(),t=Array.from(Array(this.max).keys());let i=0;return i=this.disabled||this.readonly?this.value:this.isHovering?this.hoverValue:this.value,m`
      <div
        part="base"
        class=${l({rating:!0,"rating--readonly":this.readonly,"rating--disabled":this.disabled,"rating--rtl":e})}
        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">
          ${t.map((t=>i>t&&i<t+1?m`
                <span
                  class=${l({rating__symbol:!0,"rating__partial-symbol-container":!0,"rating__symbol--hover":this.isHovering&&Math.ceil(i)===t+1})}
                  role="presentation"
                  @mouseenter=${this.handleMouseEnter}
                >
                  <div
                    style=${v({clipPath:e?`inset(0 ${100*(i-t)}% 0 0)`:`inset(0 0 0 ${100*(i-t)}%)`})}
                  >
                    ${c(this.getSymbol(t+1))}
                  </div>
                  <div
                    class="rating__partial--filled"
                    style=${v({clipPath:e?`inset(0 0 0 ${100-100*(i-t)}%)`:`inset(0 ${100-100*(i-t)}% 0 0)`})}
                  >
                    ${c(this.getSymbol(t+1))}
                  </div>
                </span>
              `:m`
              <span
                class=${l({rating__symbol:!0,"rating__symbol--hover":this.isHovering&&Math.ceil(i)===t+1,"rating__symbol--active":i>=t+1})}
                role="presentation"
                @mouseenter=${this.handleMouseEnter}
              >
                ${c(this.getSymbol(t+1))}
              </span>
            `))}
        </span>
      </div>
    `}};p.styles=e,p.dependencies={"sl-icon":s},a([u(".rating")],p.prototype,"rating",2),a([d()],p.prototype,"hoverValue",2),a([d()],p.prototype,"isHovering",2),a([n()],p.prototype,"label",2),a([n({type:Number})],p.prototype,"value",2),a([n({type:Number})],p.prototype,"max",2),a([n({type:Number})],p.prototype,"precision",2),a([n({type:Boolean,reflect:!0})],p.prototype,"readonly",2),a([n({type:Boolean,reflect:!0})],p.prototype,"disabled",2),a([n()],p.prototype,"getSymbol",2),a([h({passive:!0})],p.prototype,"handleTouchMove",1),a([o("hoverValue")],p.prototype,"handleHoverValueChange",1),a([o("isHovering")],p.prototype,"handleIsHoveringChange",1);export{p as SlRating};