@umbraco-ui/uui-range-slider 1.10.0 → 1.12.0

package/custom-elements.json

@@ -70,12 +70,6 @@
           "type": "string",
           "default": "\"0,0\""
         },
-        {
-          "name": "pristine",
-          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
-          "type": "boolean",
-          "default": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -99,6 +93,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "name": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"true\""
         }
       ],
       "properties": [
@@ -190,13 +190,6 @@
           "type": "string",
           "default": "\"0,0\""
         },
-        {
-          "name": "pristine",
-          "attribute": "pristine",
-          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
-          "type": "boolean",
-          "default": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -232,6 +225,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "name": "pristine",
+          "attribute": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"true\""
         }
       ],
       "events": [

package/lib/index.js

@@ -30,17 +30,21 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIRangeSliderElement_instances, transferValueToInternalValues_fn;
+var _UUIRangeSliderElement_instances, transferValueToInternalValues_fn, _onKeyDown;
 const Z_INDEX = {
   TOP: 3,
-  CENTER: 2,
-  BACK: 1
-};
+  CENTER: 2};
 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;
+};
 let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
   /** Constructor and Validator */
   constructor() {
@@ -64,11 +68,11 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
     this._lowValuePercentStart = 0;
     this._highValuePercentEnd = 100;
     /** Events */
-    this._onKeypress = (e) => {
+    __privateAdd(this, _onKeyDown, (e) => {
       if (e.key == "Enter") {
         this.submit();
       }
-    };
+    });
     /** Touch Event */
     this._onTouchStart = (e) => {
       if (this.disabled) return;
@@ -133,7 +137,7 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
       window.removeEventListener("mouseup", this._onMouseUp);
       window.removeEventListener("mousemove", this._onMouseMove);
     };
-    this.addEventListener("keypress", this._onKeypress);
+    this.addEventListener("keydown", __privateGet(this, _onKeyDown));
     this.addEventListener("mousedown", this._onMouseDown);
     this.addEventListener("touchstart", this._onTouchStart);
     window.addEventListener("resize", () => {
@@ -392,8 +396,16 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
   }
   _renderThumbValues() {
     return html`<div class="thumb-values">
-      <span><span>${this._lowInputValue}</span></span>
-      <span><span>${this._highInputValue}</span></span>
+      <span
+        ><span
+          >${this._lowInputValue.toFixed(CountDecimalPlaces(this._step))}</span
+        ></span
+      >
+      <span
+        ><span
+          >${this._highInputValue.toFixed(CountDecimalPlaces(this._step))}</span
+        ></span
+      >
     </div>`;
   }
   _renderSteps() {
@@ -405,7 +417,7 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
     const stepPositions = new Array(stepAmount + 1).fill(stepWidth).map((stepWidth2) => stepWidth2 * index++);
     return html`<div class="step-wrapper">
       <svg height="100%" width="100%">
-        <rect x="9" y="9" height="3" rx="2" />
+        <rect x="9" y="9" height="${TRACK_HEIGHT}" rx="2" />
         ${this._renderStepCircles(stepPositions)}
       </svg>
       ${this._renderStepValues(stepAmount)}
@@ -414,7 +426,9 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
   _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++);
+    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>`)}
     </div>`;
@@ -426,9 +440,9 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
       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="5" r="4.5" />`;
+        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="5" r="4.5" />`;
+        return svg`<circle class="track-step regular" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
       }
     })}`;
   }
@@ -482,6 +496,7 @@ transferValueToInternalValues_fn = function() {
   this._updateInnerColor();
   this.requestUpdate();
 };
+_onKeyDown = new WeakMap();
 UUIRangeSliderElement.formAssociated = true;
 /** Style */
 UUIRangeSliderElement.styles = [
@@ -555,16 +570,18 @@ UUIRangeSliderElement.styles = [
       }
 
       :host(:not([readonly])) #inner-color-thumb:hover .color {
-        height: 5px;
+        height: ${TRACK_HEIGHT * 2}px;
         background-color: var(--color-hover);
+        transform: translateY(-${TRACK_HEIGHT / 2}px);
       }
 
       .color {
         user-select: none;
         position: absolute;
         inset-inline: 0;
-        height: 3px;
-        transform: translateY(2px);
+        height: ${TRACK_HEIGHT}px;
+        top: 50%;
+        transform: translateY(0);
         background-color: var(--color-interactive);
         transition: height 60ms;
       }

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

@@ -117,8 +117,6 @@ export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
     private _runPropertiesChecks;
     private _updateInnerColor;
     private _getClickedValue;
-    /** Events */
-    private _onKeypress;
     /** Touch Event */
     private _onTouchStart;
     private _onTouchMove;

package/package.json

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