import{range_styles_default as t}from"./chunk.2UT2ZF7L.js";import{defaultValue as e}from"./chunk.GI7VDIWX.js";import{FormControlController as i}from"./chunk.GZKNJ77J.js";import{LocalizeController as s}from"./chunk.2A3352EO.js";import{HasSlotController as o}from"./chunk.NYIIDP5N.js";import{watch as l}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as r}from"./chunk.Z7XDKKOD.js";import{__decorateClass as a}from"./chunk.6M63UXML.js";import{classMap as h}from"../../../../lit/directives/class-map.js";import{eventOptions as n,property as p,query as u,state as d}from"../../../../lit/decorators.js";import{html as m}from"../../../../lit/index.js";import{ifDefined as c}from"../../../../lit/directives/if-defined.js";import{live as b}from"../../../../lit/directives/live.js";var y=class extends r{constructor(){super(...arguments),this.formControlController=new i(this),this.hasSlotController=new o(this,"help-text","label"),this.localize=new s(this),this.hasFocus=!1,this.hasTooltip=!1,this.title="",this.name="",this.value=0,this.label="",this.helpText="",this.disabled=!1,this.min=0,this.max=100,this.step=1,this.tooltip="top",this.tooltipFormatter=t=>t.toString(),this.form="",this.defaultValue=0}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.syncRange())),this.value<this.min&&(this.value=this.min),this.value>this.max&&(this.value=this.max),this.updateComplete.then((()=>{this.syncRange(),this.resizeObserver.observe(this.input)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.input)}handleChange(){this.emit("sl-change")}handleInput(){this.value=parseFloat(this.input.value),this.emit("sl-input"),this.syncRange()}handleBlur(){this.hasFocus=!1,this.hasTooltip=!1,this.emit("sl-blur")}handleFocus(){this.hasFocus=!0,this.hasTooltip=!0,this.emit("sl-focus")}handleThumbDragStart(){this.hasTooltip=!0}handleThumbDragEnd(){this.hasTooltip=!1}syncProgress(t){this.input.style.setProperty("--percent",100*t+"%")}syncTooltip(t){if(null!==this.output){const e=this.input.offsetWidth,i=this.output.offsetWidth,s=getComputedStyle(this.input).getPropertyValue("--thumb-size"),o=e*t;if("rtl"===this.localize.dir()){const l=`${e-o}px + ${t} * ${s}`;this.output.style.translate=`calc((${l} - ${i/2}px - ${s} / 2))`}else{const e=`${o}px - ${t} * ${s}`;this.output.style.translate=`calc(${e} - ${i/2}px + ${s} / 2)`}}}handleValueChange(){this.formControlController.updateValidity(),this.input.value=this.value.toString(),this.value=parseFloat(this.input.value),this.syncRange()}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}syncRange(){const t=Math.max(0,(this.value-this.min)/(this.max-this.min));this.syncProgress(t),"none"!==this.tooltip&&this.syncTooltip(t)}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}focus(t){this.input.focus(t)}blur(){this.input.blur()}stepUp(){this.input.stepUp(),this.value!==Number(this.input.value)&&(this.value=Number(this.input.value))}stepDown(){this.input.stepDown(),this.value!==Number(this.input.value)&&(this.value=Number(this.input.value))}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),i=!!this.label||!!t,s=!!this.helpText||!!e;return m`
      <div
        part="form-control"
        class=${h({"form-control":!0,"form-control--medium":!0,"form-control--has-label":i,"form-control--has-help-text":s})}
      >
        <label
          part="form-control-label"
          class="form-control__label"
          for="input"
          aria-hidden=${i?"false":"true"}
        >
          <slot name="label">${this.label}</slot>
        </label>

        <div part="form-control-input" class="form-control-input">
          <div
            part="base"
            class=${h({range:!0,"range--disabled":this.disabled,"range--focused":this.hasFocus,"range--rtl":"rtl"===this.localize.dir(),"range--tooltip-visible":this.hasTooltip,"range--tooltip-top":"top"===this.tooltip,"range--tooltip-bottom":"bottom"===this.tooltip})}
            @mousedown=${this.handleThumbDragStart}
            @mouseup=${this.handleThumbDragEnd}
            @touchstart=${this.handleThumbDragStart}
            @touchend=${this.handleThumbDragEnd}
          >
            <input
              part="input"
              id="input"
              class="range__control"
              title=${this.title}
              type="range"
              name=${c(this.name)}
              ?disabled=${this.disabled}
              min=${c(this.min)}
              max=${c(this.max)}
              step=${c(this.step)}
              .value=${b(this.value.toString())}
              aria-describedby="help-text"
              @change=${this.handleChange}
              @focus=${this.handleFocus}
              @input=${this.handleInput}
              @invalid=${this.handleInvalid}
              @blur=${this.handleBlur}
            />
            ${"none"===this.tooltip||this.disabled?"":m`
                  <output part="tooltip" class="range__tooltip">
                    ${"function"==typeof this.tooltipFormatter?this.tooltipFormatter(this.value):this.value}
                  </output>
                `}
          </div>
        </div>

        <div
          part="form-control-help-text"
          id="help-text"
          class="form-control__help-text"
          aria-hidden=${s?"false":"true"}
        >
          <slot name="help-text">${this.helpText}</slot>
        </div>
      </div>
    `}};y.styles=t,a([u(".range__control")],y.prototype,"input",2),a([u(".range__tooltip")],y.prototype,"output",2),a([d()],y.prototype,"hasFocus",2),a([d()],y.prototype,"hasTooltip",2),a([p()],y.prototype,"title",2),a([p()],y.prototype,"name",2),a([p({type:Number})],y.prototype,"value",2),a([p()],y.prototype,"label",2),a([p({attribute:"help-text"})],y.prototype,"helpText",2),a([p({type:Boolean,reflect:!0})],y.prototype,"disabled",2),a([p({type:Number})],y.prototype,"min",2),a([p({type:Number})],y.prototype,"max",2),a([p({type:Number})],y.prototype,"step",2),a([p()],y.prototype,"tooltip",2),a([p({attribute:!1})],y.prototype,"tooltipFormatter",2),a([p({reflect:!0})],y.prototype,"form",2),a([e()],y.prototype,"defaultValue",2),a([n({passive:!0})],y.prototype,"handleThumbDragStart",1),a([l("value",{waitUntilFirstUpdate:!0})],y.prototype,"handleValueChange",1),a([l("disabled",{waitUntilFirstUpdate:!0})],y.prototype,"handleDisabledChange",1),a([l("hasTooltip",{waitUntilFirstUpdate:!0})],y.prototype,"syncRange",1);export{y as SlRange};