@umbraco-ui/uui-range-slider 1.2.0-rc.1 → 1.2.0-rc.3

package/lib/uui-range-slider.element.d.ts

@@ -1,10 +1,13 @@
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 declare const UUIRangeSliderElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").FormControlMixinInterface) & typeof LitElement;
 /**
  * @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
  */
 export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
+    #private;
     static styles: import("lit").CSSResult[];
     static readonly formAssociated = true;
     /**
@@ -34,28 +37,34 @@ export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
      * @default false
      */
     hideStepValues: boolean;
-    private _min;
-    private _max;
-    private _valueLow;
-    private _valueHigh;
-    private _minGap;
-    private _maxGap?;
     /**
      * Sets the minimum allowed value.
      * @type {number}
      * @attr min
      * @default 0
      */
-    set min(newVal: number);
-    get min(): number;
+    min: number;
     /**
      * Sets the maximum allowed value.
      * @type {number}
      * @attr max
      * @default 100
      */
-    set max(newVal: number);
-    get max(): number;
+    max: number;
+    /**
+     * 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
+     */
+    minGap?: number;
+    /**
+     * Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.
+     * @type {number}
+     * @attr max-gap
+     * @default undefined
+     */
+    maxGap?: number;
     /**
      * This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.
      * @type {string}
@@ -64,71 +73,89 @@ export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
      */
     get value(): FormDataEntryValue | FormData;
     set value(newVal: FormDataEntryValue | FormData);
+    private _valueLow;
     /**
      * The lower picked value.
      * @type {number}
      * @attr value-low
      * @default 0
      */
-    set valueLow(newVal: number);
+    set valueLow(newLow: number);
     get valueLow(): number;
+    private _valueHigh;
     /**
      * The higher picked value.
      * @type {number}
      * @attr value-high
      * @default 100
      */
-    set valueHigh(newVal: number);
+    set valueHigh(newHigh: number);
     get valueHigh(): number;
-    /**
-     * 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 1
-     */
-    set minGap(newVal: number);
-    get minGap(): number;
-    /**
-     * Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.
-     * @type {number}
-     * @attr max-gap
-     * @default undefined
-     */
-    set maxGap(newVal: number | undefined);
-    get maxGap(): number | undefined;
     private _trackWidth;
-    private _handle;
+    private _currentInputFocus?;
+    private _currentThumbFocus;
+    private _grabbingBoth?;
+    private _startPos;
+    private _startLow;
+    private _startHigh;
     private _inputLow;
     private _inputHigh;
-    private _sliderTrack;
-    private _innerSliderTrack;
+    private _outerTrack;
+    private _innerTrack;
+    private _thumbLow;
+    private _thumbHigh;
     private _innerColor;
+    private _bothThumbsTarget;
+    protected getFormElement(): HTMLInputElement;
     focus(): void;
-    protected getFormElement(): HTMLElement;
-    private _onMinInput;
-    private _onMaxInput;
-    private _onChange;
-    private _fillColor;
     private _onKeypress;
-    private _onTouchStart;
-    private _onTouchMove;
-    private _onTouchEnd;
+    /** Thumb position */
+    private _sliderLowThumbPosition;
+    private _sliderHighThumbPosition;
+    /** Coloring of the line between thumbs */
+    private _fillColor;
+    /** Moving thumb */
+    private _moveThumb;
+    /** Mouse events */
     private _onMouseDown;
     private _onMouseMove;
     private _onMouseUp;
-    private stopMoving;
+    /** Touch / mobile events */
+    private _onTouchStart;
+    private _onTouchMove;
+    private _onTouchEnd;
+    /** */
+    private _stop;
+    /** The latest thumb in use */
+    private _setThumb;
+    private _setValueBasedOnCurrentThumb;
+    /** Get the value depends on where clicked/touched */
     private _getValue;
-    private _getHandles;
-    private _updateBothValues;
+    private _validateLowByMinGap;
+    private _validateLowByMaxGap;
+    private _validateHighByMinGap;
+    private _validateHighByMaxGap;
+    private _validateValueBasedOnCurrentThumb;
+    /** Methods when moving both thumbs */
+    private _saveStartPoint;
+    private _moveBoth;
+    private _getValidatedValues;
+    /** CHANGE AND INPUT EVENT LISTENERS */
+    private _onChange;
+    private _onLowInput;
+    private _onHighInput;
+    /** Constructor */
     constructor();
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     connectedCallback(): void;
-    private _sliderLowThumbPosition;
-    private _sliderHighThumbPosition;
-    renderSteps(): import("lit-html").TemplateResult<2>;
-    renderStepValues(hide: boolean): import("lit-html").TemplateResult<1>;
-    private _onInputMouseDown;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** RENDER */
     render(): import("lit-html").TemplateResult<1>;
+    renderNativeInputs(): import("lit-html").TemplateResult<1>;
+    renderThumbs(): import("lit-html").TemplateResult<1>;
+    /** RENDER STEPS & STEP VALUES */
+    renderStepsOutput(): import("lit-html").TemplateResult<1>;
+    renderSteps(): import("lit-html").TemplateResult<2>;
+    renderStepValues(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-range-slider",
-  "version": "1.2.0-rc.1",
+  "version": "1.2.0-rc.3",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.0-rc.1"
+    "@umbraco-ui/uui-base": "1.2.0-rc.3"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -41,5 +41,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-range-slider",
-  "gitHead": "c85fbce0370213590f8b60119ac39f0473ffa0fb"
+  "gitHead": "ea5983f5f13e95944adba0174839548b11154b4a"
 }