@umbraco-ui/uui-range-slider 1.5.0-rc.2 → 1.5.0

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

@@ -1,4 +1,4 @@
-import { LitElement, nothing } from 'lit';
+import { LitElement } from 'lit';
 declare const UUIRangeSliderElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").FormControlMixinInterface) & typeof LitElement;
 /**
  * @element uui-range-slider
@@ -9,6 +9,12 @@ declare const UUIRangeSliderElement_base: (new (...args: any[]) => import("@umbr
 export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
     #private;
     static readonly formAssociated = true;
+    /**
+     * Label to be used for aria-label and eventually as visual label. Adds "low-end value" and "high-end value" endings for the two values.
+     * @type {string}
+     * @attr
+     */
+    label: String;
     /**
      * Disables the input.
      * @type {boolean}
@@ -17,18 +23,23 @@ export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
      */
     disabled: boolean;
     /**
-     * Label to be used for aria-label and eventually as visual label. Adds " low value" and " high value" endings for the two values.
-     * @type {string}
-     * @attr
+     * Sets the minimum allowed value.
+     * @type {number}
+     * @attr min
+     * @default 0
      */
-    label: String;
+    get min(): number;
+    set min(newVal: number);
+    _min: number;
     /**
-     * This reflects the behavior of a native input step attribute.
+     * Sets the maximum allowed value.
      * @type {number}
-     * @attr
-     * @default 1
+     * @attr max
+     * @default 100
      */
-    step: number;
+    get max(): number;
+    set max(newVal: number);
+    _max: number;
     /**
      * Hides the numbers representing the value of each steps. Dots will still be visible
      * @type {boolean}
@@ -37,124 +48,93 @@ export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
      */
     hideStepValues: boolean;
     /**
-     * Sets the minimum allowed value.
-     * @type {number}
-     * @attr min
-     * @default 0
-     */
-    min: number;
-    /**
-     * Sets the maximum allowed value.
+     * This reflects the behavior of a native input step attribute.
      * @type {number}
-     * @attr max
-     * @default 100
+     * @attr
+     * @default 1
      */
-    max: number;
+    get step(): number;
+    set step(newVal: number);
+    _step: 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;
+    get minGap(): number | undefined;
+    set minGap(newVal: number | 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;
+    get maxGap(): number | undefined;
+    set maxGap(newVal: number | 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.
+     * 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,100
+     * @default 0,0
      */
     get value(): FormDataEntryValue | FormData;
     set value(newVal: FormDataEntryValue | FormData);
-    private _valueLow;
-    /**
-     * The lower picked value.
-     * @type {number}
-     * @attr value-low
-     * @default 0
-     */
-    set valueLow(newLow: number);
-    get valueLow(): number;
-    private _valueHigh;
-    /**
-     * The higher picked value.
-     * @type {number}
-     * @attr value-high
-     * @default 100
-     */
-    set valueHigh(newHigh: number);
-    get valueHigh(): number;
+    private _currentFocus?;
+    private _movement;
+    private startPoint;
+    private _lowInputValue;
+    private _highInputValue;
     private _trackWidth;
-    private _currentInputFocus?;
-    private _currentThumbFocus;
-    private _grabbingBoth?;
-    private _startPos;
-    private _startLow;
-    private _startHigh;
+    _lowValuePercentStart: number;
+    _highValuePercentEnd: number;
+    protected setValueLow(low: number): void;
+    protected setValueHigh(high: number): void;
+    protected setValue(low: number, high: number, lockValueRange?: boolean): void;
+    protected getFormElement(): HTMLInputElement;
+    /** Elements */
+    private _outerTrack;
     private _inputLow;
     private _inputHigh;
-    private _outerTrack;
-    private _innerTrack;
-    private _thumbLow;
-    private _thumbHigh;
     private _innerColor;
-    private _bothThumbsTarget;
-    protected getFormElement(): HTMLInputElement;
-    focus(): void;
+    private _innerColorThumb;
+    /** Constructor and Validator */
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _runPropertiesChecks;
+    private _updateInnerColor;
+    private _getClickedValue;
+    /** Events */
     private _onKeypress;
-    /** 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;
-    /** Touch / mobile events */
+    /** Touch Event */
     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 _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;
+    /** Mouse Event */
+    private _onMouseDown;
+    private _onMouseMove;
+    private _onMouseUp;
+    /** Drag both thumbs logics */
+    private _saveStartPoints;
+    private _dragBothValuesByMousePos;
+    /** Input Events */
     private _onLowInput;
     private _onHighInput;
-    /** Constructor */
-    constructor();
-    connectedCallback(): void;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    /** RENDER */
+    /** Change Events */
+    private _onLowChange;
+    private _onHighChange;
+    protected onChanged(): 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;
+    private _renderThumbValues;
+    private _renderSteps;
+    private _renderStepValues;
+    private _renderStepCircles;
+    private _renderNativeInputs;
+    /** Style */
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-range-slider",
-  "version": "1.5.0-rc.2",
+  "version": "1.5.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.5.0-rc.2"
+    "@umbraco-ui/uui-base": "1.5.0"
   },
   "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": "573af25cbb43f673731b87dd8e23dbe632bfc348"
+  "gitHead": "80279d910777f210227a4ed95762bc91d005a273"
 }