import{html as a}from"lit";import{classMap as l}from"lit/directives/class-map.js";import{v as e}from"./utils/nile-slider.utils.esm.js";const i=a=>a.disabled||"tooltip"!==a.valueLabel,t=l=>a`
    <div>
      <nile-tooltip
        content=${l.rangeOneValue}
        placement=${l.tooltipPosition}
        ?disabled=${i(l)}
      >
        <div 
          id="range-one" 
          class="range-button"
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${l.minValue}
          aria-valuemax=${l.maxValue}
          aria-valuenow=${l.rangeOneValue}
          aria-label="Minimum value"
        ></div>
      </nile-tooltip>
      <nile-tooltip
        content=${l.rangeTwoValue}
        placement=${l.tooltipPosition}
        ?disabled=${i(l)}
      >
        <div
          id="range-two"
          class="range-button-two"
          part="range-button-two"
          role="slider"
          tabindex="0"
          aria-valuemin=${l.minValue}
          aria-valuemax=${l.maxValue}
          aria-valuenow=${l.rangeTwoValue}
          aria-label="Maximum value"
        ></div>
      </nile-tooltip>
    </div>
  `,n=e=>a`
    <div>
      <nile-tooltip
        content=${e.value}
        placement=${e.tooltipPosition}
        ?disabled=${i(e)}
      >
        <div 
          class=${l({"range-button":!0,"range-button-active":"one"===e.activeThumb})} 
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${e.minValue}
          aria-valuemax=${e.maxValue}
          aria-valuenow=${e.value}
          aria-label=${e.ariaLabel||e.label||"Slider value"}
        ></div>
      </nile-tooltip>
    </div>
  `,s=l=>a`
    <div part="label-container" class="label-container">
      <span id="label-start">${l.labelStart}</span>
      <span id="label-end">${l.labelEnd}</span>
    </div>
  `,r=l=>a`
    <div part="field-header" class="field-header">
      <label id="field-label" part="field-label" class="field-label">
        ${l.label}
      </label>
    </div>
  `,o=l=>l.rangeSlider?a`
    <span
      part="value-label"
      class="value-label"
      style="left: ${e(l.rangeOneValue,l)}%"
    >${l.rangeOneValue}</span>
    <span
      part="value-label"
      class="value-label"
      style="left: ${e(l.rangeTwoValue,l)}%"
    >${l.rangeTwoValue}</span>
  `:a`
      <span
        part="value-label"
        class="value-label"
        style="left: ${e(l.value,l)}%"
      >${l.value}</span>
    `;export{o as b,r as f,s as l,t as r,n as s};
