@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/range-slider/range-slider.element.js

@@ -1,373 +1,363 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIRangeSliderElement_instances, transferValueToInternalValues_fn, _onKeyDown;
-import { LitElement, html, svg, css } from "lit";
-import { property, state, query } from "lit/decorators.js";
-import { UUIRangeSliderEvent } from "./UUIRangeSliderEvent.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUIFormControlMixin as UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
 import { clamp } from "../../internal/utils/math.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const Z_INDEX = {
-  TOP: 3,
-  CENTER: 2
+import { UUIRangeSliderEvent } from "./UUIRangeSliderEvent.js";
+import { LitElement, css, html, svg } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#region src/components/range-slider/range-slider.element.ts
+var Z_INDEX = {
+	TOP: 3,
+	CENTER: 2,
+	BACK: 1
 };
-const THUMB_SIZE = 18;
-const TRACK_HEIGHT = 3;
-const TRACK_PADDING = 12;
-const STEP_MIN_WIDTH = 24;
-const CountDecimalPlaces = (num) => {
-  const decimalIndex = num.toString().indexOf(".");
-  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+var THUMB_SIZE = 18;
+var TRACK_HEIGHT = 3;
+var TRACK_PADDING = 12;
+var STEP_MIN_WIDTH = 24;
+var CountDecimalPlaces = (num) => {
+	const decimalIndex = num.toString().indexOf(".");
+	return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
 };
-const _UUIRangeSliderElement = class _UUIRangeSliderElement extends UUIFormControlWithBasicsMixin(
-  LitElement,
-  ""
-) {
-  /** Constructor and Validator */
-  constructor() {
-    super();
-    __privateAdd(this, _UUIRangeSliderElement_instances);
-    __privateAdd(this, _onKeyDown);
-    this.disabled = false;
-    this.readonly = false;
-    this._min = 0;
-    this._max = 0;
-    this.hideStepValues = false;
-    this._step = 1;
-    this._movement = false;
-    this.startPoint = {
-      mouse: 0,
-      low: 0,
-      high: 0
-    };
-    this._lowInputValue = 0;
-    this._highInputValue = 0;
-    this._trackWidth = 0;
-    this._lowValuePercentStart = 0;
-    this._highValuePercentEnd = 100;
-    __privateSet(this, _onKeyDown, (e) => {
-      if (e.key == "Enter") {
-        this.submit();
-      }
-    });
-    this._onTouchStart = (e) => {
-      if (this.disabled) return;
-      const target = e.composedPath()[0];
-      if (target === this._outerTrack) return;
-      if (target === this._innerColor || target === this._innerColorThumb) {
-        window.addEventListener("touchend", this._onTouchEnd);
-        window.addEventListener("touchcancel", this._onTouchEnd);
-        window.addEventListener("touchmove", this._onTouchMove);
-        this._movement = true;
-        this._saveStartPoints(e.touches[0].pageX);
-      } else {
-        const value = this._getClickedValue(e.touches[0].pageX);
-        const diffLow = Math.abs(this._lowInputValue - value);
-        const diffHigh = Math.abs(this._highInputValue - value);
-        if (diffLow < diffHigh) {
-          this.setValueLow(value);
-        } else {
-          this.setValueHigh(value);
-        }
-      }
-    };
-    this._onTouchMove = (e) => {
-      this._dragBothValuesByMousePos(e.touches[0].pageX);
-    };
-    this._onTouchEnd = () => {
-      this._movement = false;
-      this.onChanged();
-      window.removeEventListener("touchend", this._onTouchEnd);
-      window.removeEventListener("touchcancel", this._onTouchEnd);
-      window.removeEventListener("touchmove", this._onTouchMove);
-    };
-    this._onMouseDown = (e) => {
-      if (this.disabled) return;
-      if (this.readonly) return;
-      const target = e.composedPath()[0];
-      if (target === this._outerTrack) return;
-      if (target === this._innerColor || target === this._innerColorThumb) {
-        window.addEventListener("mouseup", this._onMouseUp);
-        window.addEventListener("mousemove", this._onMouseMove);
-        this._movement = true;
-        this._saveStartPoints(e.pageX);
-      } else {
-        const value = this._getClickedValue(e.pageX);
-        const diffLow = Math.abs(this._lowInputValue - value);
-        const diffHigh = Math.abs(this._highInputValue - value);
-        if (diffLow < diffHigh) {
-          this.setValueLow(value);
-        } else {
-          this.setValueHigh(value);
-        }
-      }
-    };
-    this._onMouseMove = (e) => {
-      e.preventDefault();
-      this._dragBothValuesByMousePos(e.pageX);
-    };
-    this._onMouseUp = () => {
-      this._movement = false;
-      this.onChanged();
-      window.removeEventListener("mouseup", this._onMouseUp);
-      window.removeEventListener("mousemove", this._onMouseMove);
-    };
-    this.addEventListener("keydown", __privateGet(this, _onKeyDown));
-    this.addEventListener("mousedown", this._onMouseDown);
-    this.addEventListener("touchstart", this._onTouchStart);
-    window.addEventListener("resize", () => {
-      this._trackWidth = this._outerTrack?.offsetWidth;
-    });
-  }
-  get min() {
-    return this._min;
-  }
-  set min(newVal) {
-    this._min = newVal;
-    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
-  }
-  get max() {
-    return this._max;
-  }
-  set max(newVal) {
-    this._max = newVal;
-    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
-  }
-  get step() {
-    return this._step;
-  }
-  set step(newVal) {
-    this._step = newVal;
-    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
-  }
-  get minGap() {
-    return this._minGap;
-  }
-  set minGap(newVal) {
-    this._minGap = newVal;
-    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
-  }
-  get maxGap() {
-    return this._maxGap;
-  }
-  set maxGap(newVal) {
-    this._maxGap = newVal;
-    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
-  }
-  get value() {
-    return super.value;
-  }
-  set value(newVal) {
-    super.value = newVal;
-    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
-  }
-  setValueLow(low) {
-    const clampMin = this.maxGap ? Math.max(this._highInputValue - this.maxGap, this.min) : this.min;
-    const clampMax = this.minGap ? this._highInputValue - this.minGap : this._highInputValue - this.step;
-    low = clamp(low, clampMin, clampMax);
-    this.setValue(low, this._highInputValue);
-  }
-  setValueHigh(high) {
-    const clampMin = this.minGap ? this._lowInputValue + this.minGap : this._lowInputValue + this.step;
-    const clampMax = this.maxGap ? Math.min(this.maxGap + this._lowInputValue, this.max) : this.max;
-    high = clamp(high, clampMin, clampMax);
-    this.setValue(this._lowInputValue, high);
-  }
-  setValue(low, high, lockValueRange) {
-    if (lockValueRange) {
-      const length = this.startPoint.high - this.startPoint.low;
-      low = clamp(low, this.min, this.max - length);
-      high = clamp(high, this.min + length, this.max);
-    }
-    this._inputLow.value = low.toString();
-    this._inputHigh.value = high.toString();
-    this.value = `${low},${high}`;
-  }
-  getFormElement() {
-    return this._currentFocus ?? this._inputLow;
-  }
-  async focus() {
-    await this.updateComplete;
-    this.getFormElement().focus();
-  }
-  async blur() {
-    await this.updateComplete;
-    this.getFormElement().blur();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.value) {
-      this.value = `${this._min},${this._max}`;
-    }
-  }
-  firstUpdated(changedProperties) {
-    super.updated(changedProperties);
-    this._trackWidth = this._outerTrack.offsetWidth;
-    this._runPropertiesChecks();
-  }
-  _runPropertiesChecks() {
-    const regex = new RegExp(/^-?\d+(\.\d+)?,-?\d+(\.\d+)?$/);
-    if (!regex.test(this.value))
-      console.error(`Range slider (Value error occurred): Bad input`);
-    if (this._highInputValue === this._lowInputValue) {
-      console.error(
-        `Range slider (Value error occurred): Low-end and high-end value should never be equal. Use <uui-slider></uui-slider> instead.`
-      );
-    }
-    if (this._lowInputValue > this._highInputValue) {
-      console.error(
-        `Range slider (Value error occurred): Low-end value should never be higher than high-end value.`
-      );
-    }
-    if (this._highInputValue > this._max || this._highInputValue < this._min) {
-      this.setValueHigh(this._max);
-      console.warn(
-        `Conflict with the high-end value and max value. High-end value has been converted to the max value (${this._max})`
-      );
-    }
-    if (this._lowInputValue < this._min || this._lowInputValue > this._max) {
-      this.setValueLow(this._min);
-      console.warn(
-        `Conflict with the low-end value and min value. Low-end value has been converted to the min value (${this._min})`
-      );
-    }
-    if (this._step <= 0) {
-      this._step = 1;
-      console.warn(
-        `Property step needs a value higher than 0. Converted the step value to 1 (default)`
-      );
-    }
-    if ((this._max - this._min) / this._step % 1 !== 0) {
-      console.error(
-        `Conflict with step value and the min and max values. May experience bad side effects`
-      );
-    }
-    this._runGapChecks();
-  }
-  _runGapChecks() {
-    if (this._minGap && this._minGap < this._step) {
-      this._minGap = void 0;
-      console.warn(
-        `Conflict with min-gap and step value. The min-gap needs to be higher than the step value. Removed the min-gap property.`
-      );
-    }
-    if (this._minGap && this._maxGap && this._minGap > this._maxGap) {
-      this._minGap = void 0;
-      this._maxGap = void 0;
-      console.warn(
-        `Conflict with min-gap and max-gap. Removed the min-gap and max-gap properties.`
-      );
-    }
-    if (this._minGap && this._max - this._min < this._minGap) {
-      this._minGap = void 0;
-      console.warn(
-        `Conflict with the min-gap and the total range. Removed the min-gap.`
-      );
-    }
-    if (this._maxGap && this._highInputValue - this._lowInputValue > this._maxGap) {
-      this.setValueHigh(this._lowInputValue + this._maxGap);
-      console.warn(
-        `Conflict with value and max-gap. High-end value has been converted to the highest possible value based on the low-end value and the max gap value (${this._highInputValue})`
-      );
-    }
-    if (this._minGap && this._highInputValue - this._lowInputValue < this._minGap) {
-      const minGap = this._minGap;
-      if (this._highInputValue - minGap < this._min) {
-        this.setValueHigh(this._lowInputValue + minGap);
-        console.warn(
-          `Conflict with value and min gap. High-end value has been converted to the lowest possible value based on the low-end value and the min gap value (${this._highInputValue}).`
-        );
-      } else {
-        this.setValueLow(this._highInputValue - minGap);
-        console.warn(
-          `Conflict with value and min gap. Low-end value has been converted to the highest possible value based on the high-end value and the min gap value (${this._lowInputValue}).`
-        );
-      }
-    }
-  }
-  _updateInnerColor() {
-    const scopeLength = this._max - this._min;
-    const scopedLow = this._lowInputValue - this._min;
-    const scopedHigh = this._highInputValue - this._min;
-    const leftPercent = scopedLow / scopeLength * 100;
-    const rightPercent = 100 - scopedHigh / scopeLength * 100;
-    this._lowValuePercentStart = clamp(leftPercent, 0, 100);
-    this._highValuePercentEnd = clamp(rightPercent, 0, 100);
-  }
-  _getClickedValue(pageX) {
-    const outerTrackMargin = this._outerTrack.getBoundingClientRect().left;
-    const mouseXPosition = pageX - outerTrackMargin - TRACK_PADDING;
-    const clickPercent = mouseXPosition / (this._trackWidth - TRACK_PADDING * 2);
-    const clickedValue = clickPercent * (this._max - this._min) + this._min;
-    return Math.round(clickedValue / this._step) * this._step;
-  }
-  /** Drag both thumbs logics */
-  _saveStartPoints(pageX) {
-    this.startPoint = {
-      mouse: pageX,
-      low: this._lowInputValue,
-      high: this._highInputValue
-    };
-  }
-  _dragBothValuesByMousePos(pageX) {
-    const trackWidth = this._outerTrack.offsetWidth;
-    const drag = pageX - this.startPoint.mouse;
-    const trackDiff = this._max - this._min;
-    const dragPercent = drag / (trackWidth + TRACK_PADDING * 2);
-    const dragValue = Math.round(dragPercent * trackDiff / this._step) * this._step;
-    const newValueLow = this.startPoint.low + dragValue;
-    const newValueHigh = this.startPoint.high + dragValue;
-    this.setValue(newValueLow, newValueHigh, true);
-    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
-  }
-  /** Input Events */
-  _onLowInput(e) {
-    if (this.disabled) e.preventDefault();
-    if (this.readonly) e.preventDefault();
-    this._currentFocus = this._inputLow;
-    const newValue = Number(e.target.value);
-    this.setValueLow(newValue);
-    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
-  }
-  _onHighInput(e) {
-    if (this.disabled) e.preventDefault();
-    if (this.readonly) e.preventDefault();
-    this._currentFocus = this._inputHigh;
-    const newValue = Number(e.target.value);
-    this.setValueHigh(newValue);
-    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
-  }
-  /** Change Events */
-  _onLowChange() {
-    this.setValueLow(Number(this._inputLow.value));
-    this.onChanged();
-  }
-  _onHighChange() {
-    this.setValueHigh(Number(this._inputHigh.value));
-    this.onChanged();
-  }
-  onChanged() {
-    this.pristine = false;
-    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
-  }
-  /** Render */
-  render() {
-    return html`
+/**
+* @element uui-range-slider
+* @description - Range slider with two handles. Use uui-slider for a single handle.
+* @fires UUIRangeSliderEvent#input on input
+* @fires UUIRangeSliderEvent#change on change
+* @extends UUIFormControlMixin
+*/
+var UUIRangeSliderElement = class extends UUIFormControlWithBasicsMixin(LitElement, "") {
+	static {
+		this.formAssociated = true;
+	}
+	/**
+	* Sets the minimum allowed value.
+	* @type {number}
+	* @attr min
+	* @default 0
+	*/
+	get min() {
+		return this._min;
+	}
+	set min(newVal) {
+		this._min = newVal;
+		this.#transferValueToInternalValues();
+	}
+	/**
+	* Sets the maximum allowed value.
+	* @type {number}
+	* @attr max
+	* @default 100
+	*/
+	get max() {
+		return this._max;
+	}
+	set max(newVal) {
+		this._max = newVal;
+		this.#transferValueToInternalValues();
+	}
+	/**
+	* This reflects the behavior of a native input step attribute.
+	* @type {number}
+	* @attr
+	* @default 1
+	*/
+	get step() {
+		return this._step;
+	}
+	set step(newVal) {
+		this._step = newVal;
+		this.#transferValueToInternalValues();
+	}
+	/**
+	* Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap
+	* @type {number}
+	* @attr min-gap
+	* @default undefined
+	*/
+	get minGap() {
+		return this._minGap;
+	}
+	set minGap(newVal) {
+		this._minGap = newVal;
+		this.#transferValueToInternalValues();
+	}
+	/**
+	* Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.
+	* @type {number}
+	* @attr max-gap
+	* @default undefined
+	*/
+	get maxGap() {
+		return this._maxGap;
+	}
+	set maxGap(newVal) {
+		this._maxGap = newVal;
+		this.#transferValueToInternalValues();
+	}
+	/**
+	* This is a value property of the uui-range-slider. Split the two values with comma, for example 10,50 sets the values to 10 and 50.
+	* @type {string}
+	* @attr
+	* @default 0,0
+	*/
+	get value() {
+		return super.value;
+	}
+	set value(newVal) {
+		super.value = newVal;
+		this.#transferValueToInternalValues();
+	}
+	setValueLow(low) {
+		const clampMin = this.maxGap ? Math.max(this._highInputValue - this.maxGap, this.min) : this.min;
+		const clampMax = this.minGap ? this._highInputValue - this.minGap : this._highInputValue - this.step;
+		low = clamp(low, clampMin, clampMax);
+		this.setValue(low, this._highInputValue);
+	}
+	setValueHigh(high) {
+		const clampMin = this.minGap ? this._lowInputValue + this.minGap : this._lowInputValue + this.step;
+		const clampMax = this.maxGap ? Math.min(this.maxGap + this._lowInputValue, this.max) : this.max;
+		high = clamp(high, clampMin, clampMax);
+		this.setValue(this._lowInputValue, high);
+	}
+	setValue(low, high, lockValueRange) {
+		if (lockValueRange) {
+			const length = this.startPoint.high - this.startPoint.low;
+			low = clamp(low, this.min, this.max - length);
+			high = clamp(high, this.min + length, this.max);
+		}
+		this._inputLow.value = low.toString();
+		this._inputHigh.value = high.toString();
+		this.value = `${low},${high}`;
+	}
+	#transferValueToInternalValues() {
+		const valueSplit = this.value.split(",");
+		let low = Number(valueSplit[0]) || 0;
+		let high = Number(valueSplit[1]) || 0;
+		high = clamp(high, this._min, this._max);
+		low = this._min + Math.round((low - this._min) / this._step) * this._step;
+		high = this._min + Math.round((high - this._min) / this._step) * this._step;
+		this._lowInputValue = clamp(low, this._min, this._minGap ? high - this._minGap : high - this._step);
+		this._highInputValue = clamp(high, this._minGap ? this._lowInputValue + this._minGap : this._lowInputValue + this._step, Math.min(this._maxGap ? low + this._maxGap : this._max, this._max));
+		this._updateInnerColor();
+		this.requestUpdate();
+	}
+	getFormElement() {
+		return this._currentFocus ?? this._inputLow;
+	}
+	async focus() {
+		await this.updateComplete;
+		this.getFormElement().focus();
+	}
+	async blur() {
+		await this.updateComplete;
+		this.getFormElement().blur();
+	}
+	/** Constructor and Validator */
+	constructor() {
+		super();
+		this.disabled = false;
+		this.readonly = false;
+		this._min = 0;
+		this._max = 0;
+		this.hideStepValues = false;
+		this._step = 1;
+		this._movement = false;
+		this.startPoint = {
+			mouse: 0,
+			low: 0,
+			high: 0
+		};
+		this._lowInputValue = 0;
+		this._highInputValue = 0;
+		this._trackWidth = 0;
+		this._lowValuePercentStart = 0;
+		this._highValuePercentEnd = 100;
+		this.#onKeyDown = (e) => {
+			if (e.key == "Enter") this.submit();
+		};
+		this._onTouchStart = (e) => {
+			if (this.disabled) return;
+			const target = e.composedPath()[0];
+			if (target === this._outerTrack) return;
+			if (target === this._innerColor || target === this._innerColorThumb) {
+				window.addEventListener("touchend", this._onTouchEnd);
+				window.addEventListener("touchcancel", this._onTouchEnd);
+				window.addEventListener("touchmove", this._onTouchMove);
+				this._movement = true;
+				this._saveStartPoints(e.touches[0].pageX);
+			} else {
+				const value = this._getClickedValue(e.touches[0].pageX);
+				if (Math.abs(this._lowInputValue - value) < Math.abs(this._highInputValue - value)) this.setValueLow(value);
+				else this.setValueHigh(value);
+			}
+		};
+		this._onTouchMove = (e) => {
+			this._dragBothValuesByMousePos(e.touches[0].pageX);
+		};
+		this._onTouchEnd = () => {
+			this._movement = false;
+			this.onChanged();
+			window.removeEventListener("touchend", this._onTouchEnd);
+			window.removeEventListener("touchcancel", this._onTouchEnd);
+			window.removeEventListener("touchmove", this._onTouchMove);
+		};
+		this._onMouseDown = (e) => {
+			if (this.disabled) return;
+			if (this.readonly) return;
+			const target = e.composedPath()[0];
+			if (target === this._outerTrack) return;
+			if (target === this._innerColor || target === this._innerColorThumb) {
+				window.addEventListener("mouseup", this._onMouseUp);
+				window.addEventListener("mousemove", this._onMouseMove);
+				this._movement = true;
+				this._saveStartPoints(e.pageX);
+			} else {
+				const value = this._getClickedValue(e.pageX);
+				if (Math.abs(this._lowInputValue - value) < Math.abs(this._highInputValue - value)) this.setValueLow(value);
+				else this.setValueHigh(value);
+			}
+		};
+		this._onMouseMove = (e) => {
+			e.preventDefault();
+			this._dragBothValuesByMousePos(e.pageX);
+		};
+		this._onMouseUp = () => {
+			this._movement = false;
+			this.onChanged();
+			window.removeEventListener("mouseup", this._onMouseUp);
+			window.removeEventListener("mousemove", this._onMouseMove);
+		};
+		this.addEventListener("keydown", this.#onKeyDown);
+		this.addEventListener("mousedown", this._onMouseDown);
+		this.addEventListener("touchstart", this._onTouchStart);
+		window.addEventListener("resize", () => {
+			this._trackWidth = this._outerTrack?.offsetWidth;
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.value) this.value = `${this._min},${this._max}`;
+	}
+	firstUpdated(changedProperties) {
+		super.updated(changedProperties);
+		this._trackWidth = this._outerTrack.offsetWidth;
+		this._runPropertiesChecks();
+	}
+	_runPropertiesChecks() {
+		if (!(/* @__PURE__ */ new RegExp(/^-?\d+(\.\d+)?,-?\d+(\.\d+)?$/)).test(this.value)) console.error(`Range slider (Value error occurred): Bad input`);
+		if (this._highInputValue === this._lowInputValue) console.error(`Range slider (Value error occurred): Low-end and high-end value should never be equal. Use <uui-slider></uui-slider> instead.`);
+		if (this._lowInputValue > this._highInputValue) console.error(`Range slider (Value error occurred): Low-end value should never be higher than high-end value.`);
+		if (this._highInputValue > this._max || this._highInputValue < this._min) {
+			this.setValueHigh(this._max);
+			console.warn(`Conflict with the high-end value and max value. High-end value has been converted to the max value (${this._max})`);
+		}
+		if (this._lowInputValue < this._min || this._lowInputValue > this._max) {
+			this.setValueLow(this._min);
+			console.warn(`Conflict with the low-end value and min value. Low-end value has been converted to the min value (${this._min})`);
+		}
+		if (this._step <= 0) {
+			this._step = 1;
+			console.warn(`Property step needs a value higher than 0. Converted the step value to 1 (default)`);
+		}
+		if ((this._max - this._min) / this._step % 1 !== 0) console.error(`Conflict with step value and the min and max values. May experience bad side effects`);
+		this._runGapChecks();
+	}
+	_runGapChecks() {
+		if (this._minGap && this._minGap < this._step) {
+			this._minGap = void 0;
+			console.warn(`Conflict with min-gap and step value. The min-gap needs to be higher than the step value. Removed the min-gap property.`);
+		}
+		if (this._minGap && this._maxGap && this._minGap > this._maxGap) {
+			this._minGap = void 0;
+			this._maxGap = void 0;
+			console.warn(`Conflict with min-gap and max-gap. Removed the min-gap and max-gap properties.`);
+		}
+		if (this._minGap && this._max - this._min < this._minGap) {
+			this._minGap = void 0;
+			console.warn(`Conflict with the min-gap and the total range. Removed the min-gap.`);
+		}
+		if (this._maxGap && this._highInputValue - this._lowInputValue > this._maxGap) {
+			this.setValueHigh(this._lowInputValue + this._maxGap);
+			console.warn(`Conflict with value and max-gap. High-end value has been converted to the highest possible value based on the low-end value and the max gap value (${this._highInputValue})`);
+		}
+		if (this._minGap && this._highInputValue - this._lowInputValue < this._minGap) {
+			const minGap = this._minGap;
+			if (this._highInputValue - minGap < this._min) {
+				this.setValueHigh(this._lowInputValue + minGap);
+				console.warn(`Conflict with value and min gap. High-end value has been converted to the lowest possible value based on the low-end value and the min gap value (${this._highInputValue}).`);
+			} else {
+				this.setValueLow(this._highInputValue - minGap);
+				console.warn(`Conflict with value and min gap. Low-end value has been converted to the highest possible value based on the high-end value and the min gap value (${this._lowInputValue}).`);
+			}
+		}
+	}
+	_updateInnerColor() {
+		const scopeLength = this._max - this._min;
+		const scopedLow = this._lowInputValue - this._min;
+		const scopedHigh = this._highInputValue - this._min;
+		const leftPercent = scopedLow / scopeLength * 100;
+		const rightPercent = 100 - scopedHigh / scopeLength * 100;
+		this._lowValuePercentStart = clamp(leftPercent, 0, 100);
+		this._highValuePercentEnd = clamp(rightPercent, 0, 100);
+	}
+	_getClickedValue(pageX) {
+		const clickedValue = (pageX - this._outerTrack.getBoundingClientRect().left - TRACK_PADDING) / (this._trackWidth - TRACK_PADDING * 2) * (this._max - this._min) + this._min;
+		return Math.round(clickedValue / this._step) * this._step;
+	}
+	/** Events */
+	#onKeyDown;
+	/** Drag both thumbs logics */
+	_saveStartPoints(pageX) {
+		this.startPoint = {
+			mouse: pageX,
+			low: this._lowInputValue,
+			high: this._highInputValue
+		};
+	}
+	_dragBothValuesByMousePos(pageX) {
+		const trackWidth = this._outerTrack.offsetWidth;
+		const drag = pageX - this.startPoint.mouse;
+		const trackDiff = this._max - this._min;
+		const dragPercent = drag / (trackWidth + TRACK_PADDING * 2);
+		const dragValue = Math.round(dragPercent * trackDiff / this._step) * this._step;
+		const newValueLow = this.startPoint.low + dragValue;
+		const newValueHigh = this.startPoint.high + dragValue;
+		this.setValue(newValueLow, newValueHigh, true);
+		this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+	}
+	/** Input Events */
+	_onLowInput(e) {
+		if (this.disabled) e.preventDefault();
+		if (this.readonly) e.preventDefault();
+		this._currentFocus = this._inputLow;
+		const newValue = Number(e.target.value);
+		this.setValueLow(newValue);
+		this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+	}
+	_onHighInput(e) {
+		if (this.disabled) e.preventDefault();
+		if (this.readonly) e.preventDefault();
+		this._currentFocus = this._inputHigh;
+		const newValue = Number(e.target.value);
+		this.setValueHigh(newValue);
+		this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));
+	}
+	/** Change Events */
+	_onLowChange() {
+		this.setValueLow(Number(this._inputLow.value));
+		this.onChanged();
+	}
+	_onHighChange() {
+		this.setValueHigh(Number(this._inputHigh.value));
+		this.onChanged();
+	}
+	onChanged() {
+		this.pristine = false;
+		this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
+	}
+	/** Render */
+	render() {
+		return html`
       <div id="range-slider">
         ${this._renderNativeInputs()}
         <div id="inner-track">
@@ -382,9 +372,9 @@ const _UUIRangeSliderElement = class _UUIRangeSliderElement extends UUIFormContr
         </div>
       </div>
     `;
-  }
-  _renderThumbValues() {
-    return html`<div class="thumb-values">
+	}
+	_renderThumbValues() {
+		return html`<div class="thumb-values">
       <span
         ><span
           >${this._lowInputValue.toFixed(CountDecimalPlaces(this._step))}</span
@@ -396,47 +386,41 @@ const _UUIRangeSliderElement = class _UUIRangeSliderElement extends UUIFormContr
         ></span
       >
     </div>`;
-  }
-  _renderSteps() {
-    const stepAmount = (this._max - this._min) / this._step;
-    const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;
-    if (stepWidth < STEP_MIN_WIDTH) return;
-    if (stepAmount % 1 !== 0) return;
-    let index = 0;
-    const stepPositions = new Array(stepAmount + 1).fill(stepWidth).map((stepWidth2) => stepWidth2 * index++);
-    return html`<div class="step-wrapper">
+	}
+	_renderSteps() {
+		const stepAmount = (this._max - this._min) / this._step;
+		const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;
+		if (stepWidth < STEP_MIN_WIDTH) return;
+		if (stepAmount % 1 !== 0) return;
+		let index = 0;
+		const stepPositions = new Array(stepAmount + 1).fill(stepWidth).map((stepWidth) => stepWidth * index++);
+		return html`<div class="step-wrapper">
       <svg height="100%" width="100%">
         <rect x="9" y="9" height="${TRACK_HEIGHT}" rx="2" />
         ${this._renderStepCircles(stepPositions)}
       </svg>
       ${this._renderStepValues(stepAmount)}
     </div>`;
-  }
-  _renderStepValues(stepAmount) {
-    if (this.hideStepValues || stepAmount > 20) return;
-    let index = 0;
-    const stepValues = new Array(stepAmount + 1).fill(this._step).map(
-      (step) => (this._min + step * index++).toFixed(CountDecimalPlaces(this._step))
-    );
-    return html`<div class="step-values">
-      ${stepValues.map((value) => html`<span><span>${value}</span></span>`)}
+	}
+	_renderStepValues(stepAmount) {
+		if (this.hideStepValues || stepAmount > 20) return;
+		let index = 0;
+		return html`<div class="step-values">
+      ${new Array(stepAmount + 1).fill(this._step).map((step) => (this._min + step * index++).toFixed(CountDecimalPlaces(this._step))).map((value) => html`<span><span>${value}</span></span>`)}
     </div>`;
-  }
-  _renderStepCircles(stepPositionArray) {
-    const trackValue = this._trackWidth / (this._max - this._min);
-    return svg`${stepPositionArray.map((position) => {
-      const cx = position + TRACK_PADDING;
-      const colorStart = this._lowInputValue - this._min;
-      const colorEnd = this._highInputValue - this._min;
-      if (cx / trackValue >= colorStart && cx / trackValue <= colorEnd) {
-        return svg`<circle class="track-step filled" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
-      } else {
-        return svg`<circle class="track-step regular" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
-      }
-    })}`;
-  }
-  _renderNativeInputs() {
-    return html` <div class="native-wrapper">
+	}
+	_renderStepCircles(stepPositionArray) {
+		const trackValue = this._trackWidth / (this._max - this._min);
+		return svg`${stepPositionArray.map((position) => {
+			const cx = position + TRACK_PADDING;
+			const colorStart = this._lowInputValue - this._min;
+			const colorEnd = this._highInputValue - this._min;
+			if (cx / trackValue >= colorStart && cx / trackValue <= colorEnd) return svg`<circle class="track-step filled" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
+			else return svg`<circle class="track-step regular" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
+		})}`;
+	}
+	_renderNativeInputs() {
+		return html` <div class="native-wrapper">
       <input
         id="inputLow"
         class="${this._movement ? "focus" : ""}"
@@ -462,33 +446,9 @@ const _UUIRangeSliderElement = class _UUIRangeSliderElement extends UUIFormContr
         @input=${this._onHighInput}
         @change=${this._onHighChange} />
     </div>`;
-  }
-};
-_UUIRangeSliderElement_instances = new WeakSet();
-transferValueToInternalValues_fn = function() {
-  const valueSplit = this.value.split(",");
-  let low = Number(valueSplit[0]) || 0;
-  let high = Number(valueSplit[1]) || 0;
-  high = clamp(high, this._min, this._max);
-  low = this._min + Math.round((low - this._min) / this._step) * this._step;
-  high = this._min + Math.round((high - this._min) / this._step) * this._step;
-  this._lowInputValue = clamp(
-    low,
-    this._min,
-    this._minGap ? high - this._minGap : high - this._step
-  );
-  this._highInputValue = clamp(
-    high,
-    this._minGap ? this._lowInputValue + this._minGap : this._lowInputValue + this._step,
-    Math.min(this._maxGap ? low + this._maxGap : this._max, this._max)
-  );
-  this._updateInnerColor();
-  this.requestUpdate();
-};
-_onKeyDown = new WeakMap();
-_UUIRangeSliderElement.formAssociated = true;
-_UUIRangeSliderElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         --color-interactive: var(--uui-color-selected);
         --color-hover: var(--uui-color-selected-emphasis);
@@ -558,7 +518,7 @@ _UUIRangeSliderElement.styles = [
       }
 
       :host(:not([readonly])) #inner-color-thumb:hover .color {
-        height: ${TRACK_HEIGHT + 2}px;
+        height: ${5}px;
         background-color: var(--color-hover);
         transform: translateY(-1px);
       }
@@ -596,7 +556,7 @@ _UUIRangeSliderElement.styles = [
         position: absolute;
         left: 0;
         right: 0;
-        top: -10px;
+        top: -9px;
       }
 
       /** Step circles */
@@ -757,7 +717,8 @@ _UUIRangeSliderElement.styles = [
       input:focus-within::-webkit-slider-thumb,
       input.focus::-webkit-slider-thumb {
         border-color: var(--color-focus);
-        outline: 2px solid var(--color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
         outline-offset: 1px;
       }
       :host(:not([disabled]):not([readonly]))
@@ -796,7 +757,8 @@ _UUIRangeSliderElement.styles = [
       input:focus-within::-moz-range-thumb,
       input.focus::-moz-range-thumb {
         border-color: var(--color-focus);
-        outline: 2px solid var(--color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
         outline-offset: 1px;
       }
       :host(:not([disabled]):not([readonly])) input::-moz-range-thumb:hover {
@@ -807,73 +769,46 @@ _UUIRangeSliderElement.styles = [
       :host([disabled]) #range-slider input::-moz-range-thumb {
         border-color: var(--uui-palette-mine-grey);
       }
-    `
-];
-let UUIRangeSliderElement = _UUIRangeSliderElement;
-__decorateClass([
-  property({ type: String })
-], UUIRangeSliderElement.prototype, "label", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRangeSliderElement.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRangeSliderElement.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIRangeSliderElement.prototype, "min", 1);
-__decorateClass([
-  property({ type: Number })
-], UUIRangeSliderElement.prototype, "max", 1);
-__decorateClass([
-  property({ type: Boolean, attribute: "hide-step-values" })
-], UUIRangeSliderElement.prototype, "hideStepValues", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIRangeSliderElement.prototype, "step", 1);
-__decorateClass([
-  property({ type: Number, attribute: "min-gap" })
-], UUIRangeSliderElement.prototype, "minGap", 1);
-__decorateClass([
-  property({ type: Number, attribute: "max-gap" })
-], UUIRangeSliderElement.prototype, "maxGap", 1);
-__decorateClass([
-  property({ type: String })
-], UUIRangeSliderElement.prototype, "value", 1);
-__decorateClass([
-  state()
-], UUIRangeSliderElement.prototype, "_movement", 2);
-__decorateClass([
-  state()
-], UUIRangeSliderElement.prototype, "_lowInputValue", 2);
-__decorateClass([
-  state()
-], UUIRangeSliderElement.prototype, "_highInputValue", 2);
-__decorateClass([
-  state()
-], UUIRangeSliderElement.prototype, "_trackWidth", 2);
-__decorateClass([
-  state()
-], UUIRangeSliderElement.prototype, "_lowValuePercentStart", 2);
-__decorateClass([
-  state()
-], UUIRangeSliderElement.prototype, "_highValuePercentEnd", 2);
-__decorateClass([
-  query("#range-slider")
-], UUIRangeSliderElement.prototype, "_outerTrack", 2);
-__decorateClass([
-  query("#inputLow")
-], UUIRangeSliderElement.prototype, "_inputLow", 2);
-__decorateClass([
-  query("#inputHigh")
-], UUIRangeSliderElement.prototype, "_inputHigh", 2);
-__decorateClass([
-  query(".color")
-], UUIRangeSliderElement.prototype, "_innerColor", 2);
-__decorateClass([
-  query("#inner-color-thumb")
-], UUIRangeSliderElement.prototype, "_innerColorThumb", 2);
-export {
-  UUIRangeSliderElement
+    `];
+	}
 };
-//# sourceMappingURL=range-slider.element.js.map
+__decorate([property({ type: String })], UUIRangeSliderElement.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRangeSliderElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRangeSliderElement.prototype, "readonly", void 0);
+__decorate([property({ type: Number })], UUIRangeSliderElement.prototype, "min", null);
+__decorate([property({ type: Number })], UUIRangeSliderElement.prototype, "max", null);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-step-values"
+})], UUIRangeSliderElement.prototype, "hideStepValues", void 0);
+__decorate([property({ type: Number })], UUIRangeSliderElement.prototype, "step", null);
+__decorate([property({
+	type: Number,
+	attribute: "min-gap"
+})], UUIRangeSliderElement.prototype, "minGap", null);
+__decorate([property({
+	type: Number,
+	attribute: "max-gap"
+})], UUIRangeSliderElement.prototype, "maxGap", null);
+__decorate([property({ type: String })], UUIRangeSliderElement.prototype, "value", null);
+__decorate([state()], UUIRangeSliderElement.prototype, "_movement", void 0);
+__decorate([state()], UUIRangeSliderElement.prototype, "_lowInputValue", void 0);
+__decorate([state()], UUIRangeSliderElement.prototype, "_highInputValue", void 0);
+__decorate([state()], UUIRangeSliderElement.prototype, "_trackWidth", void 0);
+__decorate([state()], UUIRangeSliderElement.prototype, "_lowValuePercentStart", void 0);
+__decorate([state()], UUIRangeSliderElement.prototype, "_highValuePercentEnd", void 0);
+__decorate([query("#range-slider")], UUIRangeSliderElement.prototype, "_outerTrack", void 0);
+__decorate([query("#inputLow")], UUIRangeSliderElement.prototype, "_inputLow", void 0);
+__decorate([query("#inputHigh")], UUIRangeSliderElement.prototype, "_inputHigh", void 0);
+__decorate([query(".color")], UUIRangeSliderElement.prototype, "_innerColor", void 0);
+__decorate([query("#inner-color-thumb")], UUIRangeSliderElement.prototype, "_innerColorThumb", void 0);
+//#endregion
+export { UUIRangeSliderElement };
+
+//# sourceMappingURL=range-slider.element.js.map