@umbraco-ui/uui-range-slider 1.8.0-rc.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.",
@@ -68,7 +74,7 @@
           "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": "\"false\""
+          "default": "\"true\""
         },
         {
           "name": "required",
@@ -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",
@@ -182,7 +195,7 @@
           "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": "\"false\""
+          "default": "\"true\""
         },
         {
           "name": "required",

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,
@@ -49,15 +41,13 @@ const Z_INDEX = {
 const THUMB_SIZE = 18;
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
-let UUIRangeSliderElement = class extends UUIFormControlMixin(
-  LitElement,
-  ""
-) {
+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;
@@ -81,11 +71,9 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
     };
     /** 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);
@@ -115,11 +103,10 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
     };
     /** 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);
@@ -158,42 +145,42 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
   }
   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(
@@ -357,16 +344,16 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
   }
   /** 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);
@@ -412,10 +399,8 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
   _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">
@@ -427,8 +412,7 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
     </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">
@@ -459,7 +443,7 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
         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
@@ -471,13 +455,13 @@ let UUIRangeSliderElement = class extends UUIFormControlMixin(
         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;
@@ -550,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;
       }
 
@@ -563,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);
       }
@@ -698,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;
       }
@@ -720,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;
       }
 
@@ -764,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;
       }
 
@@ -797,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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const UUIRangeSliderElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").UUIFormControlMixinInterface<string, unknown>) & typeof LitElement;
+declare const UUIRangeSliderElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
 /**
  * @element uui-range-slider
  * @description - Range slider with two handles. Use uui-slider for a single handle.
@@ -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}
@@ -81,8 +88,8 @@ export declare class UUIRangeSliderElement extends UUIRangeSliderElement_base {
      * @attr
      * @default 0,0
      */
-    get value(): unknown;
-    set value(newVal: unknown);
+    get value(): FormDataEntryValue | FormData;
+    set value(newVal: FormDataEntryValue | FormData);
     private _currentFocus?;
     private _movement;
     private startPoint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-range-slider",
-  "version": "1.8.0-rc.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-rc.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": "46d444c66217c9a3c74518d8ce4badc7f121bfdf"
+  "gitHead": "e3e398e07b6ff9874aa0656cb7767df42f58a4ce"
 }