@umbraco-ui/uui-range-slider 1.2.1 → 1.3.0-rc.0

package/lib/UUIRangeSliderEvent.d.ts

@@ -3,4 +3,5 @@ import { UUIRangeSliderElement } from './uui-range-slider.element';
 export declare class UUIRangeSliderEvent extends UUIEvent<{}, UUIRangeSliderElement> {
     static readonly INPUT = "input";
     static readonly CHANGE = "change";
+    constructor(evName: string, eventInit?: any | null);
 }

package/lib/index.js

@@ -5,7 +5,26 @@ import { LitElement, html, svg, nothing, css } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 class UUIRangeSliderEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));
+  }
 }
 UUIRangeSliderEvent.INPUT = "input";
 UUIRangeSliderEvent.CHANGE = "change";
@@ -38,6 +57,7 @@ var _setValue, setValue_fn;
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
 let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
+  /** Constructor */
   constructor() {
     super();
     __privateAdd(this, _setValue);
@@ -53,6 +73,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
     this._startPos = 0;
     this._startLow = 0;
     this._startHigh = 0;
+    /** Mouse events */
     this._onMouseDown = (e) => {
       e.preventDefault();
       if (this.disabled)
@@ -85,6 +106,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
       window.removeEventListener("mouseup", this._onMouseUp);
       window.removeEventListener("mousemove", this._onMouseMove);
     };
+    /** Touch / mobile events */
     this._onTouchStart = (e) => {
       e.preventDefault();
       if (this.disabled)
@@ -204,6 +226,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
       this.submit();
     }
   }
+  /** Thumb position */
   _sliderLowThumbPosition() {
     const ratio = (this.valueLow - this.min) / (this.max - this.min);
     const valueLowPercent = `${Math.floor(ratio * 1e5) / 1e3}%`;
@@ -214,12 +237,14 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
     const valueHighPercent = `${Math.floor(ratio * 1e5) / 1e3}%`;
     return valueHighPercent;
   }
+  /** Coloring of the line between thumbs */
   _fillColor() {
     const percentStart = (this.valueLow - this.min) / (this.max - this.min) * 100;
     const percentEnd = (this.valueHigh - this.min) / (this.max - this.min) * 100;
     this._innerColor.style.left = `${percentStart}%`;
     this._innerColor.style.right = `${100 - percentEnd}%`;
   }
+  /** Moving thumb */
   _moveThumb(pageX) {
     const value = this._getValue(pageX);
     if (value >= this.valueHigh)
@@ -230,11 +255,13 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
       this._validateValueBasedOnCurrentThumb(value)
     );
   }
+  /** */
   _stop() {
     this._grabbingBoth = false;
     this.pristine = false;
     this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));
   }
+  /** The latest thumb in use */
   _setThumb(target) {
     this._currentThumbFocus = target === this._thumbLow ? "low" : "high";
     this._currentThumbFocus === "low" ? this._currentInputFocus = this._inputLow : this._currentInputFocus = this._inputHigh;
@@ -243,6 +270,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
   _setValueBasedOnCurrentThumb(val) {
     this._currentThumbFocus === "low" ? this.valueLow = val : this.valueHigh = val;
   }
+  /** Get the value depends on where clicked/touched */
   _getValue(pageX) {
     const mouseXPosition = pageX - this._innerTrack.getBoundingClientRect().left;
     const clickPercent = mouseXPosition / (this._trackWidth - TRACK_PADDING * 2);
@@ -286,6 +314,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
     newHigh = this.maxGap ? this._validateHighByMaxGap(newHigh) : newHigh;
     return newHigh;
   }
+  /** Methods when moving both thumbs */
   _saveStartPoint(pageX, lowVal, highVal) {
     this._startPos = pageX;
     this._startLow = lowVal;
@@ -310,6 +339,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
     const validatedHigh = high < this.max ? high : this.max;
     return { low: validatedLow, high: validatedHigh };
   }
+  /** CHANGE AND INPUT EVENT LISTENERS */
   _onChange(e) {
     e.stopPropagation();
     this.pristine = false;
@@ -345,6 +375,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
     this._trackWidth = this._outerTrack.offsetWidth;
     this._fillColor();
   }
+  /** RENDER */
   render() {
     return html`
       <div id="range-slider">
@@ -397,6 +428,7 @@ let UUIRangeSliderElement = class extends FormControlMixin(LitElement) {
         <div class="value value-max">${this.valueHigh}</div>
       </div>`;
   }
+  /** RENDER STEPS & STEP VALUES */
   renderStepsOutput() {
     return html`<div class="svg-wrapper">
       <svg height="100%" width="100%">
@@ -532,13 +564,19 @@ UUIRangeSliderElement.styles = [
         transition: background-color 320ms ease-out;
       }
 
-      #range-slider #inner-track .color:has(.color-target:hover),
-      #range-slider #inner-track .color:has(.color-target:active) {
-        background-color: var(--uui-color-focus,#3879ff);
+      :host(:not([disabled]))
+        #range-slider
+        #inner-track
+        .color:has(.color-target:hover),
+      :host(:not([disabled]))
+        #range-slider
+        #inner-track
+        .color:has(.color-target:active) {
+        background-color: var(--uui-color-focus,var(--uui-palette-malibu));
       }
 
       :host(:not([disabled])) #range-slider .color {
-        background-color: var(--uui-color-selected,#3544b1);
+        background-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
       }
 
       :host([disabled]) #range-slider .color {
@@ -575,7 +613,7 @@ UUIRangeSliderElement.styles = [
       }
 
       :host .track-step.filled {
-        fill: var(--uui-color-selected,#3544b1) !important;
+        fill: var(--uui-color-selected,var(--uui-palette-violet-blue)) !important;
       }
 
       :host .track-step.filled-disabled {
@@ -598,14 +636,14 @@ UUIRangeSliderElement.styles = [
       #step-values > span {
         flex-basis: 0;
         flex-grow: 1;
-        color: var(--uui-color-disabled-contrast,#c4c4c4);
+        color: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
       }
 
       #step-values > span > span {
         transform: translateX(-50%);
         display: inline-block;
         text-align: center;
-        font-size: var(--uui-type-small-size,12px);
+        font-size: var(--uui-type-small-size,var(--uui-size-4));
       }
 
       #step-values > span:last-child {
@@ -643,23 +681,36 @@ UUIRangeSliderElement.styles = [
       #low-input:active ~ #inner-track #low.thumb,
       #high-input:active ~ #inner-track #high-thumb {
         outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus,#3879ff);
+          var(--uui-color-focus,var(--uui-palette-malibu));
       }
 
       input[type='range']:focus + .thumb {
         outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus,#3879ff);
+          var(--uui-color-focus,var(--uui-palette-malibu));
       }
 
-      #range-slider #inner-track .color:has(.color-target:hover) ~ #low-thumb,
-      #range-slider #inner-track .color:has(.color-target:active) ~ #low-thumb,
-      #range-slider #inner-track .color:has(.color-target:hover) ~ #high-thumb,
-      #range-slider
+      :host(:not([disabled]))
+        #range-slider
+        #inner-track
+        .color:has(.color-target:hover)
+        ~ #low-thumb,
+      :host(:not([disabled]))
+        #range-slider
+        #inner-track
+        .color:has(.color-target:active)
+        ~ #low-thumb,
+      :host(:not([disabled]))
+        #range-slider
+        #inner-track
+        .color:has(.color-target:hover)
+        ~ #high-thumb,
+      :host(:not([disabled]))
+        #range-slider
         #inner-track
         .color:has(.color-target:active)
         ~ #high-thumb {
         outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus,#3879ff);
+          var(--uui-color-focus,var(--uui-palette-malibu));
       }
 
       /** THUMBS  */
@@ -690,11 +741,11 @@ UUIRangeSliderElement.styles = [
         height: 9px;
         width: 9px;
         border-radius: 50%;
-        background-color: var(--uui-color-selected,#3544b1);
+        background-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
       }
 
       :host([disabled]) .thumb {
-        background-color: var(--uui-color-disabled,#f3f3f5);
+        background-color: var(--uui-color-disabled,var(--uui-palette-sand));
         border-color: var(--uui-palette-mine-grey,#3e3e3e);
       }
       :host([disabled]) .thumb:after {
@@ -712,7 +763,7 @@ UUIRangeSliderElement.styles = [
         text-align: center;
         opacity: 1;
         transition: 120ms opacity;
-        color: var(--uui-color-selected,#3544b1);
+        color: var(--uui-color-selected,var(--uui-palette-violet-blue));
         visibility: hidden;
         opacity: 0;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-range-slider",
-  "version": "1.2.1",
+  "version": "1.3.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,16 +30,16 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.1"
+    "@umbraco-ui/uui-base": "1.3.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
-    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-range-slider",
-  "gitHead": "94eb22bee5ff21bac6fadbd78653671279bebe36"
+  "gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
 }