/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import FocusMixin from "../../globals/mixins/focus.js";
import HostListener from "../../globals/decorators/host-listener.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import "../tooltip/index.js";
import FormMixin from "../../globals/mixins/form.js";
import slider_default$1 from "./slider.scss.js";
import { LitElement, html } from "lit";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import throttle from "lodash-es/throttle";
//#region src/components/slider/slider.ts
/**
* Copyright IBM Corp. 2019, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* The direction to move the thumb, associated with key symbols.
*/
const THUMB_DIRECTION = {
	Left: -1,
	ArrowLeft: -1,
	Up: -1,
	ArrowUp: -1,
	Right: 1,
	ArrowRight: 1,
	Down: 1,
	ArrowDown: 1
};
/**
* Minimum time between processed "drag" events.
*/
const EVENT_THROTTLE = 16;
/**
* Slider.
*
* @element cds-custom-slider
* @fires cds-custom-slider-input-changed
*   The name of the custom event fired after the value is changed in `<cds-custom-slider-input>` by user gesture.
* @slot label-text - The label text.
* @slot max-text - The text for maximum value.
* @slot min-text - The text for minimum value.
* @fires cds-custom-slider-changed - The custom event fired after the value is changed by user gesture.
*/
let CDSSlider = class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
	constructor(..._args) {
		super(..._args);
		this._cachedRateUpper = 1;
		this._cachedRate = 0;
		this.dragCooldownTimeout = null;
		this.dragCoolDown = false;
		this._max = "100";
		this._min = "0";
		this._step = "1";
		this._stepMultiplier = "4";
		this._throttledHandlePointermoveImpl = null;
		this._dragging = false;
		this._draggingUpper = false;
		this.onDrag = throttle(this._startDrag, EVENT_THROTTLE, {
			leading: true,
			trailing: false
		});
		this._handlePointermove = (event) => {
			const { disabled, _dragging: dragging, _draggingUpper: draggingUpper } = this;
			if (!disabled && (dragging || draggingUpper)) this._throttledHandlePointermoveImpl(event);
		};
		this._endDrag = () => {
			const wasDragging = this._dragging;
			const wasDraggingUpper = this._draggingUpper;
			if (this._dragging || this._draggingUpper) this.dragCoolDown = true;
			else this.dragCoolDown = false;
			if (this._dragging) {
				this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
					bubbles: true,
					composed: true,
					detail: { value: this.value }
				}));
				this._dragging = false;
				this._thumbNode.style.touchAction = "";
			} else if (this._draggingUpper) {
				this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
					bubbles: true,
					composed: true,
					detail: { value: this.unstable_valueUpper }
				}));
				this._draggingUpper = false;
				this._thumbNodeUpper.style.touchAction = "";
			}
			if (wasDragging) {
				if (!(this._thumbNode?.matches(":hover") || this.shadowRoot?.activeElement === this._thumbNode)) this._setThumbTooltipOpen(this._thumbNode, false);
			} else if (wasDraggingUpper) {
				if (!(this._thumbNodeUpper?.matches(":hover") || this.shadowRoot?.activeElement === this._thumbNodeUpper)) this._setThumbTooltipOpen(this._thumbNodeUpper, false);
			}
			if (this._dragging || this._draggingUpper) this.dragCooldownTimeout = window.setTimeout(() => {
				this.dragCoolDown = false;
			}, 100);
		};
		this._handleChangeInput = (event) => {
			const input = event.target;
			const inputElement = input.shadowRoot?.querySelector("input");
			this.isValid = input.tagName === "CDS-SLIDER-INPUT" ? this._getInputValidity(input) : this.isValid;
			this.warn = this._getInputWarnigState(inputElement);
			const eventContainer = event.target.id;
			const { detail } = event;
			const { intermediate, value } = detail;
			this.warnText = intermediate ? `The inputted value ${intermediate} was corrected to the nearest allowed digit` : "";
			if (intermediate !== value) if (eventContainer === "upper") this.unstable_valueUpper = value;
			else this.value = value;
			const valueMain = eventContainer === "upper" ? this.unstable_valueUpper : this.value;
			if (valueMain !== "") this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
				bubbles: true,
				composed: true,
				detail: {
					value: valueMain,
					intermediate
				}
			}));
		};
		this.disabled = false;
		this.required = false;
		this.readonly = false;
		this.labelText = "";
		this.maxLabel = "";
		this.minLabel = "";
		this.hideLabel = false;
		this.formatLabel = (value, label) => `${value}${label ?? ""}`;
		this.formatMaxText = (max, maxLabel) => this.formatLabel(Number(max), maxLabel);
		this.formatMinText = (min, minLabel) => this.formatLabel(Number(min), minLabel);
		this.invalid = false;
		this.invalidText = "";
		this.warn = false;
		this.warnText = "";
		this.hideTextInput = false;
	}
	/**
	* The rate of the thumb position in the track.
	* When we try to set a new value, we adjust the value considering `step` property.
	*/
	get _rate() {
		const { max, min, value } = this;
		if (value || value === 0) {
			const rate = (Math.min(Number(max), Math.max(Number(min), Number(value))) - Number(min)) / (Number(max) - Number(min));
			this._cachedRate = rate;
			return rate;
		} else return this._cachedRate;
	}
	set _rate(rate) {
		const { max, min, step } = this;
		this.value = Number(min) + Math.round((Number(max) - Number(min)) * Math.min(1, Math.max(0, rate)) / Number(step)) * Number(step);
	}
	/**
	* The rate of the upper thumb position in the track.
	* When we try to set a new value for upper input, we adjust the value considering `step` property.
	*/
	get _rateUpper() {
		const { max, min, unstable_valueUpper } = this;
		if (unstable_valueUpper) {
			const rateUpper = (Math.min(Number(max), Math.max(Number(min), unstable_valueUpper)) - Number(min)) / (Number(max) - Number(min));
			this._cachedRateUpper = rateUpper;
			return rateUpper;
		} else return this._cachedRateUpper;
	}
	set _rateUpper(rateUpper) {
		const { max, min, step } = this;
		this.unstable_valueUpper = Number(min) + Math.round((Number(max) - Number(min)) * Math.min(1, Math.max(0, rateUpper)) / Number(step)) * Number(step);
	}
	/**
	* Handles `click` event on the `<label>` to focus on the thumb.
	*/
	_handleClickLabel() {
		this._thumbNode?.focus();
	}
	_setThumbTooltipOpen(thumb, open) {
		if (!this.hideTextInput || !thumb) return;
		const tooltip = thumb.closest(`cds-custom-tooltip`);
		if (tooltip) tooltip.open = open;
	}
	_handleFormdata(event) {
		const { formData } = event;
		const { disabled, name, value } = this;
		if (!disabled) formData.append(name, String(value));
	}
	/**
	* Handles `keydown` event on the thumb to increase/decrease the value.
	*/
	_handleKeydown(event) {
		const eventContainer = event.target.id;
		const { key, shiftKey } = event;
		if (!this.disabled && !this.readonly) {
			if (key in THUMB_DIRECTION) {
				const { max: rawMax, min: rawMin, step: rawStep, stepMultiplier: rawstepMultiplier, value, unstable_valueUpper } = this;
				const max = Number(rawMax);
				const min = Number(rawMin);
				const step = Number(rawStep);
				const stepMultiplier = Number(rawstepMultiplier);
				const diff = (!shiftKey ? step : (max - min) / stepMultiplier) * THUMB_DIRECTION[key];
				if (eventContainer == "thumb-upper") {
					const stepCount = (unstable_valueUpper + diff) / step;
					const position = Math.min(max, Math.max(min, (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step));
					if (position >= this.value) this.unstable_valueUpper = position;
					this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
						bubbles: true,
						composed: true,
						detail: {
							value: this.unstable_valueUpper,
							intermediate: false
						}
					}));
				} else {
					const stepCount = (value + diff) / step;
					const position = Math.min(max, Math.max(min, (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step));
					if (!this.unstable_valueUpper || position <= this.unstable_valueUpper) this.value = position;
					this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
						bubbles: true,
						composed: true,
						detail: {
							value: this.value,
							intermediate: false
						}
					}));
				}
			}
		}
	}
	/**
	* Handles `pointerdown` event on the thumb to start dragging.
	*/
	_startDrag(event) {
		if (!this.readonly && !this.disabled) {
			let eventContainer = event.target.id;
			if (!eventContainer) eventContainer = event.target.closest(`.cds-custom--slider__thumb`)?.id ?? "";
			if (eventContainer === "thumb") {
				this._dragging = true;
				this._thumbNode.style.touchAction = "none";
				this._setThumbTooltipOpen(this._thumbNode, true);
			} else if (eventContainer === "thumb-upper") {
				this._draggingUpper = true;
				this._thumbNodeUpper.style.touchAction = "none";
				this._setThumbTooltipOpen(this._thumbNodeUpper, true);
			}
		}
	}
	/**
	* Handles `pointerdown` event on the track to update the thumb position and the value as necessary.
	*/
	_handleClick(event) {
		let eventContainer = event.target.id;
		if (!eventContainer) eventContainer = event.target.closest(`.cds-custom--slider__thumb`)?.id ?? "";
		if (!this.disabled && !this.readonly) {
			const { _trackNode: trackNode } = this;
			const isRtl = trackNode.ownerDocument.defaultView.getComputedStyle(trackNode).getPropertyValue("direction") === "rtl";
			const thumbPosition = event.clientX;
			const { left: trackLeft, width: trackWidth } = trackNode.getBoundingClientRect();
			if (eventContainer === "thumb-upper") {
				this._rateUpper = (isRtl ? trackLeft + trackWidth - thumbPosition : thumbPosition - trackLeft) / trackWidth;
				this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
					bubbles: true,
					composed: true,
					detail: { value: this.unstable_valueUpper }
				}));
			} else if (!this.unstable_valueUpper) {
				this._rate = (isRtl ? trackLeft + trackWidth - thumbPosition : thumbPosition - trackLeft) / trackWidth;
				this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
					bubbles: true,
					composed: true,
					detail: { value: this.value }
				}));
			} else if (!this.dragCoolDown) {
				const position = (isRtl ? trackLeft + trackWidth - thumbPosition : thumbPosition - trackLeft) / trackWidth * 100;
				const differenceValue = position > this.value ? position - this.value : this.value - position;
				const differenceValueUpper = position > this.unstable_valueUpper ? position - this.unstable_valueUpper : this.unstable_valueUpper - position;
				if (differenceValue > differenceValueUpper) this._rateUpper = position / 100;
				else if (differenceValue < differenceValueUpper) this._rate = position / 100;
				else if (!this._dragging && !this._draggingUpper && differenceValue === differenceValueUpper) if (Math.round(position) > this.unstable_valueUpper) this._rateUpper = position / 100;
				else this._rate = position / 100;
				this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
					bubbles: true,
					composed: true,
					detail: { value: this.value }
				}));
			}
		}
	}
	/**
	* Updates thumb position and value upon user's `pointermove` gesture.
	*
	* @param event The event.
	*/
	_handlePointermoveImpl(event) {
		const { disabled, _dragging: dragging, _trackNode: trackNode, _draggingUpper: draggingUpper } = this;
		if (!disabled) {
			const isRtl = trackNode.ownerDocument.defaultView.getComputedStyle(trackNode).getPropertyValue("direction") === "rtl";
			const thumbPosition = event.clientX;
			const { left: trackLeft, width: trackWidth } = this._trackNode.getBoundingClientRect();
			if (dragging) {
				this._setThumbTooltipOpen(this._thumbNode, true);
				const position = (isRtl ? trackLeft + trackWidth - thumbPosition : thumbPosition - trackLeft) / trackWidth;
				if (!this.unstable_valueUpper || position * 100 <= this.unstable_valueUpper) {
					this._rate = position;
					this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
						bubbles: true,
						composed: true,
						detail: {
							value: this.value,
							intermediate: true
						}
					}));
				}
			} else if (draggingUpper) {
				this._setThumbTooltipOpen(this._thumbNodeUpper, true);
				const position = (isRtl ? trackLeft + trackWidth - thumbPosition : thumbPosition - trackLeft) / trackWidth;
				if (position * 100 >= this.value) {
					this._rateUpper = position;
					this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
						bubbles: true,
						composed: true,
						detail: {
							value: this.unstable_valueUpper,
							intermediate: true
						}
					}));
				}
			}
		}
	}
	/**
	* The maximum value.
	*/
	get max() {
		return this._max.toString();
	}
	set max(value) {
		const { max: oldMax } = this;
		this._max = value;
		this.requestUpdate("max", oldMax);
	}
	/**
	* The minimum value.
	*/
	get min() {
		return this._min.toString();
	}
	set min(value) {
		const { min: oldMin } = this;
		this._min = value;
		this.requestUpdate("min", oldMin);
	}
	/**
	* The snapping step of the value.
	*/
	get step() {
		return this._step.toString();
	}
	set step(value) {
		const { step: oldStep } = this;
		this._step = value;
		this.requestUpdate("step", oldStep);
	}
	/**
	* A value determining how much the value should increase/decrease by Shift+arrow keys,
	* which will be `(max - min) / stepMultiplier`.
	*/
	get stepMultiplier() {
		return this._stepMultiplier.toString();
	}
	set stepMultiplier(value) {
		const { stepMultiplier: oldstepMultiplier } = this;
		this._stepMultiplier = value;
		this.requestUpdate("stepMultiplier", oldstepMultiplier);
	}
	_getInputValidity(input) {
		const inputElement = input?.shadowRoot?.querySelector("input");
		if (this.invalid) return false;
		if (input?.invalid) return false;
		if (inputElement?.valueAsNumber > Number(this.max) || inputElement?.valueAsNumber < Number(this.min)) return false;
		return true;
	}
	_getInputWarnigState(input) {
		if (input?.valueAsNumber > Number(input.max) || input?.valueAsNumber < Number(input.min)) return true;
		return false;
	}
	connectedCallback() {
		super.connectedCallback();
		if (!this._throttledHandlePointermoveImpl) this._throttledHandlePointermoveImpl = throttle(this._handlePointermoveImpl, 10);
	}
	disconnectedCallback() {
		if (this._throttledHandlePointermoveImpl) {
			this._throttledHandlePointermoveImpl.cancel();
			this._throttledHandlePointermoveImpl = null;
		}
		clearTimeout(this.dragCooldownTimeout);
		super.disconnectedCallback();
	}
	updated() {
		const sliderfilledTrack = this?.shadowRoot?.querySelector(`.cds-custom--slider__filled-track`);
		if (sliderfilledTrack) if (this.unstable_valueUpper || this.unstable_valueUpper === "") sliderfilledTrack.style.transform = this.unstable_valueUpper ? `translate(${this._rate * 100}%, -50%) scaleX(${this._rateUpper - this._rate})` : `translate(0%, -50%) scaleX(${this._rate})`;
		else sliderfilledTrack.style.transform = this.unstable_valueUpper ? `translate(${this._rate * 100}%, -50%) scaleX(${this._rateUpper - this._rate})` : `translate(0%, -50%) scaleX(${this._rate})`;
	}
	shouldUpdate(changedProperties) {
		this.querySelectorAll(this.constructor.selectorInput).forEach((input, index) => {
			if (changedProperties.has("disabled")) {
				if (input) input.disabled = this.disabled;
				if (this.disabled) this._dragging = false;
			}
			if (changedProperties.has("readonly")) {
				if (input) input.readonly = this.readonly;
				if (this.readonly) this._dragging = false;
			}
			if (changedProperties.has("invalid")) input.invalid = this.invalid;
			if (changedProperties.has("warn")) input.warn = this.warn;
			if (changedProperties.has("hideTextInput")) input.hideTextInput = this.hideTextInput;
			if (input) {
				if ((this.unstable_valueUpper || this.unstable_valueUpper === "") && index > 0) [
					"max",
					"min",
					"step",
					"unstable_valueUpper"
				].forEach((name) => {
					if (name === "unstable_valueUpper") input.value = this.unstable_valueUpper;
					else if (name === "min") input[name] = this.value;
					else input[name] = this[name];
				});
				else [
					"max",
					"min",
					"step",
					"value"
				].forEach((name) => {
					if (this.unstable_valueUpper && name === "max") input[name] = this.unstable_valueUpper;
					else input[name] = this[name];
				});
				if (changedProperties.has("value") || changedProperties.has("invalid") || changedProperties.has("warn") || changedProperties.has("readonly")) {
					this.isValid = this._getInputValidity(input);
					if (!this.readonly && !this.isValid) input.invalid = true;
					else input.invalid = false;
				}
			}
		});
		return true;
	}
	render() {
		const { disabled, formatLabel, formatMaxText, formatMinText, labelText, hideLabel, hideTextInput, max, min, maxLabel, minLabel, readonly, invalidText, isValid, warn, warnText, value, unstable_valueUpper, _rate: rate, _rateUpper: rateUpper, _handleClickLabel: handleClickLabel, _handleKeydown: handleKeydown, _handleClick: handleClick, onDrag, _endDrag: endDrag } = this;
		const isInteractive = !readonly && !disabled;
		const normalizedProps = {
			invalid: isInteractive && !isValid,
			warn: isInteractive && isValid && warn
		};
		const labelClasses = classMap({
			[`cds-custom--label`]: true,
			[`cds-custom--visually-hidden`]: hideLabel,
			[`cds-custom--label--disabled`]: disabled
		});
		const sliderClasses = classMap({
			[`cds-custom--slider`]: true,
			[`cds-custom--slider--disabled`]: disabled,
			[`cds-custom--slider--readonly`]: readonly
		});
		const thumbLowerWrapperClasses = classMap({
			[`cds-custom--icon-tooltip`]: true,
			[`cds-custom--slider__thumb-wrapper`]: true,
			[`cds-custom--slider__thumb-wrapper--lower`]: unstable_valueUpper || unstable_valueUpper === ""
		});
		const thumbLowerClasses = classMap({
			[`cds-custom--slider__thumb`]: true,
			[`cds-custom--slider__thumb--lower`]: unstable_valueUpper || unstable_valueUpper === "",
			[`cds-custom--slider__thumb-disabled`]: disabled
		});
		const thumbUpperWrapperClasses = classMap({
			[`cds-custom--icon-tooltip`]: true,
			[`cds-custom--slider__thumb-wrapper`]: true,
			[`cds-custom--slider__thumb-wrapper--upper`]: true
		});
		const thumbUpperClasses = classMap({
			[`cds-custom--slider__thumb`]: true,
			[`cds-custom--slider__thumb--upper`]: true,
			[`cds-custom--slider__thumb-disabled`]: disabled
		});
		return html`
      <label class="${labelClasses}" @click="${handleClickLabel}">
        <slot name="label-text">${labelText}</slot>
      </label>
      <div class="${"cds-custom"}--slider-container">
        ${unstable_valueUpper || unstable_valueUpper === "" ? html` <slot name="lower-input"></slot>` : ""}
        <span class="${"cds-custom"}--slider__range-label">
          <slot name="min-text">${formatMinText(min, minLabel)}</slot>
        </span>
        <div
          @keydown="${handleKeydown}"
          @click="${handleClick}"
          @pointerup="${endDrag}"
          @pointerleave="${endDrag}"
          class="${sliderClasses}"
          tabindex="-1"
          role="presentation">
          ${hideTextInput ? html`
                <cds-custom-tooltip
                  class="${thumbLowerWrapperClasses}"
                  style="left: ${rate * 100}%"
                  align="top"
                  .dropShadow=${false}>
                  <div
                    id="thumb"
                    class="${thumbLowerClasses}"
                    role="slider"
                    tabindex="${!readonly ? 0 : -1}"
                    aria-valuemax="${max}"
                    aria-valuemin="${min}"
                    aria-valuenow="${value}"
                    aria-valuetext="${formatLabel(Number(value), void 0)}"
                    @pointerdown="${onDrag}">
                    ${unstable_valueUpper || unstable_valueUpper === "" ? html`
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 24"
                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower">
                            <path
                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                            <path fill="none" d="M-4 0h24v24H-4z"></path>
                          </svg>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 24"
                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower cds-custom--slider__thumb-icon--focus">
                            <path
                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                            <path fill="none" d="M-4 0h24v24H-4z"></path>
                            <path d="M15.08 0H16v6.46h-.92z"></path>
                            <path d="M0 0h.92v24H0zM15.08 0H16v24h-.92z"></path>
                            <path d="M0 .92V0h16v.92zM0 24v-.92h16V24z"></path>
                          </svg>
                        ` : ``}
                  </div>
                  <cds-custom-tooltip-content>
                    ${formatLabel(Number(value), void 0)}
                  </cds-custom-tooltip-content>
                </cds-custom-tooltip>
              ` : html`
                <div
                  class="${thumbLowerWrapperClasses}"
                  style="left: ${rate * 100}%">
                  <div
                    id="thumb"
                    class="${thumbLowerClasses}"
                    role="slider"
                    tabindex="${!readonly ? 0 : -1}"
                    aria-valuemax="${max}"
                    aria-valuemin="${min}"
                    aria-valuenow="${value}"
                    aria-valuetext="${formatLabel(Number(value), void 0)}"
                    @pointerdown="${onDrag}">
                    ${unstable_valueUpper || unstable_valueUpper === "" ? html`
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 24"
                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower">
                            <path
                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                            <path fill="none" d="M-4 0h24v24H-4z"></path>
                          </svg>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 24"
                            class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower cds-custom--slider__thumb-icon--focus">
                            <path
                              d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                            <path fill="none" d="M-4 0h24v24H-4z"></path>
                            <path d="M15.08 0H16v6.46h-.92z"></path>
                            <path d="M0 0h.92v24H0zM15.08 0H16v24h-.92z"></path>
                            <path d="M0 .92V0h16v.92zM0 24v-.92h16V24z"></path>
                          </svg>
                        ` : ``}
                  </div>
                </div>
              `}
          ${unstable_valueUpper || unstable_valueUpper === "" ? hideTextInput ? html`
                  <cds-custom-tooltip
                    class="${thumbUpperWrapperClasses}"
                    style="left: ${rateUpper * 100}%"
                    align="top"
                    .dropShadow=${false}>
                    <div
                      id="thumb-upper"
                      class="${thumbUpperClasses}"
                      role="slider"
                      tabindex="${!readonly ? 0 : -1}"
                      aria-valuemax="${max}"
                      aria-valuemin="${min}"
                      aria-valuenow="${unstable_valueUpper}"
                      aria-valuetext="${formatLabel(Number(unstable_valueUpper), void 0)}"
                      @pointerdown="${onDrag}">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 16 24"
                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper">
                        <path
                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                        <path fill="none" d="M-4 0h24v24H-4z"></path>
                      </svg>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 16 24"
                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper cds-custom--slider__thumb-icon--focus">
                        <path
                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                        <path fill="none" d="M-4 0h24v24H-4z"></path>
                        <path d="M.92 24H0v-6.46h.92z"></path>
                        <path d="M16 24h-.92V0H16zM.92 24H0V0h.92z"></path>
                        <path d="M16 23.08V24H0v-.92zM16 0v.92H0V0z"></path>
                      </svg>
                    </div>
                    <cds-custom-tooltip-content>
                      ${formatLabel(Number(unstable_valueUpper), void 0)}
                    </cds-custom-tooltip-content>
                  </cds-custom-tooltip>
                ` : html`
                  <div
                    class="${thumbUpperWrapperClasses}"
                    style="left: ${rateUpper * 100}%">
                    <div
                      id="thumb-upper"
                      class="${thumbUpperClasses}"
                      role="slider"
                      tabindex="${!readonly ? 0 : -1}"
                      aria-valuemax="${max}"
                      aria-valuemin="${min}"
                      aria-valuenow="${unstable_valueUpper}"
                      aria-valuetext="${formatLabel(Number(unstable_valueUpper), void 0)}"
                      @pointerdown="${onDrag}">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 16 24"
                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper">
                        <path
                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                        <path fill="none" d="M-4 0h24v24H-4z"></path>
                      </svg>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 16 24"
                        class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper cds-custom--slider__thumb-icon--focus">
                        <path
                          d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                        <path fill="none" d="M-4 0h24v24H-4z"></path>
                        <path d="M.92 24H0v-6.46h.92z"></path>
                        <path d="M16 24h-.92V0H16zM.92 24H0V0h.92z"></path>
                        <path d="M16 23.08V24H0v-.92zM16 0v.92H0V0z"></path>
                      </svg>
                    </div>
                  </div>
                ` : html``}
          <div id="track" class="${"cds-custom"}--slider__track"></div>
          ${unstable_valueUpper || unstable_valueUpper === "" ? html` <div class="${"cds-custom"}--slider__filled-track"></div> ` : html` <div class="${"cds-custom"}-ce--slider__filled-track-container">
                <div class="${"cds-custom"}--slider__filled-track"></div>
              </div>`}
        </div>
        <span class="${"cds-custom"}--slider__range-label">
          <slot name="max-text">${formatMaxText(max, maxLabel)}</slot>
        </span>
        <slot></slot>
      </div>

      ${normalizedProps.invalid ? html`
            <div
              class="${"cds-custom"}--slider__validation-msg ${"cds-custom"}--slider__validation-msg--invalid ${"cds-custom"}--form-requirement">
              ${invalidText}
            </div>
          ` : null}
      ${normalizedProps.warn ? html`<div
            class="${"cds-custom"}--slider__validation-msg ${"cds-custom"}--form-requirement">
            ${warnText}
          </div>` : null}
    `;
	}
	/**
	* A selector that will return the `<input>` box got entering the value directly.
	*/
	static get selectorInput() {
		return `cds-custom-slider-input`;
	}
	/**
	* The name of the custom event fired after the value is changed by user gesture.
	*/
	static get eventChange() {
		return `cds-custom-slider-changed`;
	}
	/**
	* The name of the custom event fired after the value is changed in `<cds-custom-slider-input>` by user gesture.
	*/
	static get eventChangeInput() {
		return `cds-custom-slider-input-changed`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = slider_default$1;
	}
};
__decorate([property({
	type: Number,
	attribute: "value-upper"
})], CDSSlider.prototype, "unstable_valueUpper", void 0);
__decorate([query("#thumb")], CDSSlider.prototype, "_thumbNode", void 0);
__decorate([query("#thumb-upper")], CDSSlider.prototype, "_thumbNodeUpper", void 0);
__decorate([query("#track")], CDSSlider.prototype, "_trackNode", void 0);
__decorate([HostListener("document:pointermove")], CDSSlider.prototype, "_handlePointermove", void 0);
__decorate([HostListener("eventChangeInput")], CDSSlider.prototype, "_handleChangeInput", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSlider.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSlider.prototype, "required", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSlider.prototype, "readonly", void 0);
__decorate([property({ attribute: "label-text" })], CDSSlider.prototype, "labelText", void 0);
__decorate([property({
	attribute: "max-label",
	reflect: true
})], CDSSlider.prototype, "maxLabel", void 0);
__decorate([property({
	attribute: "min-label",
	reflect: true
})], CDSSlider.prototype, "minLabel", void 0);
__decorate([property({
	attribute: "hide-label",
	type: Boolean,
	reflect: true
})], CDSSlider.prototype, "hideLabel", void 0);
__decorate([property({ attribute: false })], CDSSlider.prototype, "formatLabel", void 0);
__decorate([property({ attribute: false })], CDSSlider.prototype, "formatMaxText", void 0);
__decorate([property({ attribute: false })], CDSSlider.prototype, "formatMinText", void 0);
__decorate([property({
	type: Number,
	reflect: true
})], CDSSlider.prototype, "max", null);
__decorate([property({
	type: Number,
	reflect: true
})], CDSSlider.prototype, "min", null);
__decorate([property()], CDSSlider.prototype, "name", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSlider.prototype, "invalid", void 0);
__decorate([property({ attribute: "invalid-text" })], CDSSlider.prototype, "invalidText", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSlider.prototype, "warn", void 0);
__decorate([property({ attribute: "warn-text" })], CDSSlider.prototype, "warnText", void 0);
__decorate([property({
	type: Boolean,
	attribute: "hide-text-input",
	reflect: true
})], CDSSlider.prototype, "hideTextInput", void 0);
__decorate([property({
	type: Number,
	reflect: true
})], CDSSlider.prototype, "step", null);
__decorate([property({
	type: Number,
	reflect: true,
	attribute: "step-multiplier"
})], CDSSlider.prototype, "stepMultiplier", null);
__decorate([property({ type: Number })], CDSSlider.prototype, "value", void 0);
__decorate([property({ type: Boolean })], CDSSlider.prototype, "isValid", void 0);
CDSSlider = __decorate([carbonElement(`cds-custom-slider`)], CDSSlider);
var slider_default = CDSSlider;
//#endregion
export { slider_default as default };

//# sourceMappingURL=slider.js.map