@umbraco-ui/uui-range-slider 1.8.0 → 1.9.0-rc.0

package/custom-elements.json

@@ -16,6 +16,12 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "min",
           "description": "Sets the minimum allowed value.",
@@ -109,6 +115,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "min",
           "attribute": "min",

package/lib/index.js

@@ -18,29 +18,21 @@ UUIRangeSliderEvent.CHANGE = "change";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 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);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw 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");
-  return method;
-};
-var _transferValueToInternalValues, transferValueToInternalValues_fn;
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+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;
 const Z_INDEX = {
   TOP: 3,
   CENTER: 2,
@@ -53,8 +45,9 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
   /** Constructor and Validator */
   constructor() {
     super();
-    __privateAdd(this, _transferValueToInternalValues);
+    __privateAdd(this, _UUIRangeSliderElement_instances);
     this.disabled = false;
+    this.readonly = false;
     this._min = 0;
     this._max = 0;
     this.hideStepValues = false;
@@ -78,11 +71,9 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
     };
     /** Touch Event */
     this._onTouchStart = (e) => {
-      if (this.disabled)
-        return;
+      if (this.disabled) return;
       const target = e.composedPath()[0];
-      if (target === this._outerTrack)
-        return;
+      if (target === this._outerTrack) return;
       if (target === this._innerColor || target === this._innerColorThumb) {
         window.addEventListener("touchend", this._onTouchEnd);
         window.addEventListener("touchcancel", this._onTouchEnd);
@@ -112,11 +103,10 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
     };
     /** Mouse Event */
     this._onMouseDown = (e) => {
-      if (this.disabled)
-        return;
+      if (this.disabled) return;
+      if (this.readonly) return;
       const target = e.composedPath()[0];
-      if (target === this._outerTrack)
-        return;
+      if (target === this._outerTrack) return;
       if (target === this._innerColor || target === this._innerColorThumb) {
         window.addEventListener("mouseup", this._onMouseUp);
         window.addEventListener("mousemove", this._onMouseMove);
@@ -155,42 +145,42 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
   }
   set min(newVal) {
     this._min = newVal;
-    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
   }
   get max() {
     return this._max;
   }
   set max(newVal) {
     this._max = newVal;
-    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
   }
   get step() {
     return this._step;
   }
   set step(newVal) {
     this._step = newVal;
-    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
   }
   get minGap() {
     return this._minGap;
   }
   set minGap(newVal) {
     this._minGap = newVal;
-    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
   }
   get maxGap() {
     return this._maxGap;
   }
   set maxGap(newVal) {
     this._maxGap = newVal;
-    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
   }
   get value() {
     return super.value;
   }
   set value(newVal) {
     super.value = newVal;
-    __privateMethod(this, _transferValueToInternalValues, transferValueToInternalValues_fn).call(this);
+    __privateMethod(this, _UUIRangeSliderElement_instances, transferValueToInternalValues_fn).call(this);
   }
   setValueLow(low) {
     low = clamp(
@@ -354,16 +344,16 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
   }
   /** Input Events */
   _onLowInput(e) {
-    if (this.disabled)
-      e.preventDefault();
+    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.disabled) e.preventDefault();
+    if (this.readonly) e.preventDefault();
     this._currentFocus = this._inputHigh;
     const newValue = Number(e.target.value);
     this.setValueHigh(newValue);
@@ -409,10 +399,8 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
   _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;
+    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">
@@ -424,8 +412,7 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
     </div>`;
   }
   _renderStepValues(stepAmount) {
-    if (this.hideStepValues || stepAmount > 20)
-      return;
+    if (this.hideStepValues || stepAmount > 20) return;
     let index = 0;
     const stepValues = new Array(stepAmount + 1).fill(this._step).map((step) => this._min + step * index++);
     return html`<div class="step-values">
@@ -456,7 +443,7 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
         step=${this._step}
         .value=${this._lowInputValue.toString()}
         aria-label="${this.label} low-end value"
-        ?disabled="${this.disabled}"
+        ?disabled="${this.disabled || this.readonly}"
         @input=${this._onLowInput}
         @change=${this._onLowChange} />
       <input
@@ -468,13 +455,13 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(LitElement, "") {
         step="${this._step}"
         .value=${this._highInputValue.toString()}
         aria-label="${this.label} high-end value"
-        ?disabled="${this.disabled}"
+        ?disabled="${this.disabled || this.readonly}"
         @input=${this._onHighInput}
         @change=${this._onHighChange} />
     </div>`;
   }
 };
-_transferValueToInternalValues = new WeakSet();
+_UUIRangeSliderElement_instances = new WeakSet();
 transferValueToInternalValues_fn = function() {
   const valueSplit = this.value.split(",");
   let low = Number(valueSplit[0]) || 0;
@@ -547,7 +534,8 @@ UUIRangeSliderElement.styles = [
         z-index: ${Z_INDEX.CENTER};
       }
 
-      :host([disabled]) #inner-color-thumb {
+      :host([disabled]) #inner-color-thumb,
+      :host([readonly]) #inner-color-thumb {
         cursor: default;
       }
 
@@ -560,11 +548,13 @@ UUIRangeSliderElement.styles = [
       #inner-color-thumb:focus .color {
         background-color: var(--color-focus);
       }
+
       #inner-color-thumb:hover .color,
       #inner-color-thumb .color.active {
         background-color: var(--color-hover);
       }
-      #inner-color-thumb:hover .color {
+
+      :host(:not([readonly])) #inner-color-thumb:hover .color {
         height: 5px;
         background-color: var(--color-hover);
       }
@@ -695,6 +685,10 @@ UUIRangeSliderElement.styles = [
         color: var(--uui-palette-mine-grey,#3e3e3e);
       }
 
+      :host([readonly]) .thumb-values {
+        opacity: 1;
+      }
+
       #range-slider:hover .thumb-values {
         opacity: 1;
       }
@@ -717,7 +711,9 @@ UUIRangeSliderElement.styles = [
           inset 0 0 0 2px var(--color-interactive),
           inset 0 0 0 4px var(--uui-color-surface,#fff);
       }
-      :host([disabled]) input::-webkit-slider-thumb {
+
+      :host([disabled]) input::-webkit-slider-thumb,
+      :host([readonly]) input::-webkit-slider-thumb {
         cursor: default;
       }
 
@@ -761,7 +757,8 @@ UUIRangeSliderElement.styles = [
           inset 0 0 0 2px var(--color-interactive),
           inset 0 0 0 4px var(--uui-color-surface,#fff);
       }
-      :host([disabled]) input::-moz-range-thumb {
+      :host([disabled]) input::-moz-range-thumb,
+      :host([readonly]) input::-moz-range-thumb {
         cursor: default;
       }
 
@@ -794,6 +791,9 @@ __decorateClass([
 __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);

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

@@ -23,6 +23,13 @@ export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
      * @default false
      */
     disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
     /**
      * Sets the minimum allowed value.
      * @type {number}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-range-slider",
-  "version": "1.8.0",
+  "version": "1.9.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.8.0"
+    "@umbraco-ui/uui-base": "1.9.0-rc.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": "53021762a52dc54a46f0c5ef829c1cbaabde1160"
+  "gitHead": "e3e398e07b6ff9874aa0656cb7767df42f58a4ce"
 }