import { html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
export const rangeSlider = (nileSlider) => {
    return html `
    <div>
      <nile-tooltip
        content=${nileSlider.rangeOneValue}
        placement=${nileSlider.tooltipPosition}
      >
        <div 
          id="range-one" 
          class="range-button"
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${nileSlider.minValue}
          aria-valuemax=${nileSlider.maxValue}
          aria-valuenow=${nileSlider.rangeOneValue}
          aria-label="Minimum value"
        ></div>
      </nile-tooltip>
      <nile-tooltip
        content=${nileSlider.rangeTwoValue}
        placement=${nileSlider.tooltipPosition}
      >
        <div
          id="range-two"
          class="range-button-two"
          part="range-button-two"
          role="slider"
          tabindex="0"
          aria-valuemin=${nileSlider.minValue}
          aria-valuemax=${nileSlider.maxValue}
          aria-valuenow=${nileSlider.rangeTwoValue}
          aria-label="Maximum value"
        ></div>
      </nile-tooltip>
    </div>
  `;
};
export const singleSlider = (nileSlider) => {
    return html `
    <div>
      <nile-tooltip
        content=${nileSlider.value}
        placement=${nileSlider.tooltipPosition}
      >
        <div 
          class=${classMap({
        'range-button': true,
        'range-button-active': nileSlider.activeThumb === 'one',
    })} 
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${nileSlider.minValue}
          aria-valuemax=${nileSlider.maxValue}
          aria-valuenow=${nileSlider.value}
          aria-label=${nileSlider.ariaLabel || "Slider value"}
        ></div>
      </nile-tooltip>
    </div>
  `;
};
export const lableContaier = (nileSlider) => {
    return html `
    <div part="label-container" class="label-container">
      <span id="label-start">${nileSlider.labelStart}</span>
      <span id="label-end">${nileSlider.labelEnd}</span>
    </div>
  `;
};
//# sourceMappingURL=nile-slider.template.js.map