@decidables/decidables-elements 0.4.9 → 0.5.0

package/lib/decidablesElements.umd.js

@@ -3407,6 +3407,9 @@
     static get styles() {
       return [super.styles, i$3`
         :host {
+          ---decidables-button-background-color-disabled: var(--decidables-button-background-color, var(---color-element-disabled));
+          ---decidables-button-background-color-enabled: var(--decidables-button-background-color, var(---color-element-enabled));
+
           margin: 0.25rem;
         }
 
@@ -3426,7 +3429,7 @@
         }
 
         button:disabled {
-          background-color: var(--decidables-button-background-color, var(---color-element-disabled));
+          background-color: var(---decidables-button-background-color-disabled);
           outline: none;
           box-shadow: none;
         }
@@ -3434,7 +3437,7 @@
         button:enabled {
           cursor: pointer;
 
-          background-color: var(--decidables-button-background-color, var(---color-element-enabled));
+          background-color: var(---decidables-button-background-color-enabled);
           outline: none;
           box-shadow: var(---shadow-2);
         }
@@ -3485,6 +3488,11 @@
           type: Boolean,
           reflect: true
         },
+        scale: {
+          attribute: 'scale',
+          type: Boolean,
+          reflect: true
+        },
         max: {
           attribute: 'max',
           type: Number,
@@ -3504,6 +3512,11 @@
           attribute: 'value',
           type: Number,
           reflect: true
+        },
+        nonlinear: {
+          attribute: false,
+          type: Boolean,
+          reflect: false
         }
       };
     }
@@ -3512,13 +3525,30 @@
 
       // Attributes
       this.disabled = false;
+      this.scale = false;
       this.max = undefined;
       this.min = undefined;
       this.step = undefined;
       this.value = undefined;
+      this.nonlinear = false;
+
+      // Properties
+      this.rangeMax = undefined;
+      this.rangeMin = undefined;
+      this.rangeStep = undefined;
+      this.rangeValue = undefined;
+
+      // Transform
+      this.toRange = undefined;
+      this.fromRange = undefined;
     }
-    changed(event) {
-      this.value = event.target.value;
+    nonlinearRange(nonlinear, toRange, fromRange) {
+      this.nonlinear = nonlinear;
+      this.toRange = nonlinear ? toRange : undefined;
+      this.fromRange = nonlinear ? fromRange : undefined;
+    }
+    rangeChanged(event) {
+      this.value = this.nonlinear ? this.fromRange(event.target.value) : event.target.value;
       this.dispatchEvent(new CustomEvent('change', {
         detail: {
           value: this.value
@@ -3526,12 +3556,25 @@
         bubbles: true
       }));
     }
-    inputted(event) {
+    rangeInputted(event) {
+      this.value = this.nonlinear ? this.fromRange(event.target.value) : event.target.value;
+    }
+    spinnerInputted(event) {
       this.value = event.target.value;
     }
+    willUpdate() {
+      this.rangeMax = this.max === undefined ? undefined : this.nonlinear ? this.toRange(this.max) : this.max;
+      this.rangeMin = this.min === undefined ? undefined : this.nonlinear ? this.toRange(this.min) : this.min;
+      this.rangeStep = this.step === undefined ? undefined : this.nonlinear ? 'any' : this.step;
+      this.rangeValue = this.value === undefined ? undefined : this.nonlinear ? this.toRange(this.value) : this.value;
+    }
     static get styles() {
       return [super.styles, i$3`
         :host {
+          ---decidables-slider-background-color: var(--decidables-slider-background-color, var(---color-element-disabled));
+          ---decidables-slider-color: var(--decidables-slider-color, var(---color-element-enabled));
+          ---decidables-spinner-background-color: var(--decidables-slider-background-color, none);
+
           ---shadow-2-rotate: var(--shadow-2-rotate, ${r$3(this.cssBoxShadow(2, true, false))});
           ---shadow-4-rotate: var(--shadow-4-rotate, ${r$3(this.cssBoxShadow(4, true, false))});
           ---shadow-8-rotate: var(--shadow-8-rotate, ${r$3(this.cssBoxShadow(8, true, false))});
@@ -3549,7 +3592,10 @@
         }
 
         .range {
-          display: inline-block;
+          position: relative;
+          display: flex;
+
+          flex-direction: row;
 
           width: 3.5rem;
           height: 4.75rem;
@@ -3560,6 +3606,8 @@
           --decidables-spinner-input-width: 3.5rem;
 
           margin: 0 0.25rem 0.25rem;
+
+          background: var(---decidables-spinner-background-color);
         }
 
         /* Adapted from http://danielstern.ca/range.css/#/ */
@@ -3598,14 +3646,14 @@
           width: 100%;
           height: 4px;
 
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
           border: 0;
           border-radius: 2px;
           box-shadow: none;
         }
 
         input[type=range]:focus::-webkit-slider-runnable-track {
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
         }
 
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
@@ -3613,7 +3661,7 @@
           width: 100%;
           height: 4px;
 
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
           border: 0;
           border-radius: 2px;
           box-shadow: none;
@@ -3633,7 +3681,7 @@
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-ms-fill-lower {
           background: #cccccc;
-          /* background: var(---color-element-disabled); */
+          /* background: var(---decidables-slider-background-color); */
           border: 0;
           border-radius: 2px;
           box-shadow: none;
@@ -3642,7 +3690,7 @@
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-ms-fill-upper {
           background: #cccccc;
-          /* background: var(---color-element-disabled); */
+          /* background: var(---decidables-slider-background-color); */
           border: 0;
           border-radius: 2px;
           box-shadow: none;
@@ -3650,12 +3698,12 @@
 
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:focus::-ms-fill-lower {
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
         }
 
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:focus::-ms-fill-upper {
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
         }
 
         /* Thumb */
@@ -3673,12 +3721,12 @@
         }
 
         input[type=range]:disabled::-webkit-slider-thumb {
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
           box-shadow: none;
         }
 
         input[type=range]:enabled::-webkit-slider-thumb {
-          background: var(---color-element-enabled);
+          background: var(---decidables-slider-color);
           box-shadow: var(---shadow-2-rotate);
         }
 
@@ -3709,13 +3757,13 @@
 
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:disabled::-moz-range-thumb {
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
           box-shadow: none;
         }
 
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled::-moz-range-thumb {
-          background: var(---color-element-enabled);
+          background: var(---decidables-slider-color);
           box-shadow: var(---shadow-2-rotate);
         }
 
@@ -3752,13 +3800,13 @@
 
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:disabled::-ms-thumb {
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
           box-shadow: none;
         }
 
         /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled::-ms-thumb {
-          background: var(---color-element-enabled);
+          background: var(---decidables-slider-color);
           box-shadow: var(---shadow-2-rotate);
         }
 
@@ -3780,6 +3828,33 @@
         :host(.keyboard) input[type=range]:enabled:focus:active::-ms-thumb {
           box-shadow: var(---shadow-8-rotate);
         }
+
+        datalist {
+          position: absolute;
+          left: 2rem;
+          z-index: -1;
+          display: flex;
+
+          flex-direction: column;
+
+          align-items: flex-start;
+          justify-content: space-between;
+
+          height: 4.75rem;
+
+          font-size: 0.75rem;
+        }
+
+        option {
+          padding: 0;
+
+          line-height: 0.8;
+          min-block-size: 0;
+        }
+
+        option::before {
+          content: "– ";
+        }
       `];
     }
     render() {
@@ -3788,9 +3863,15 @@
         <slot></slot>
       </label>
       <div class="range">
-        <input ?disabled=${this.disabled} type="range" id="slider" min=${o(this.min)} max=${o(this.max)} step=${o(this.step)} .value=${this.value} @change=${this.changed.bind(this)} @input=${this.inputted.bind(this)}>
+        <input ?disabled=${this.disabled} type="range" id="slider" min=${o(this.rangeMin)} max=${o(this.rangeMax)} step=${o(this.rangeStep)} .value=${this.rangeValue} @change=${this.rangeChanged.bind(this)} @input=${this.rangeInputted.bind(this)}>
+        ${this.scale ? x`
+            <datalist id="ticks">
+              <option value=${o(this.rangeMax)} label=${o(this.max)}></option>
+              <option value=${o(this.rangeMin)} label=${o(this.min)}></option>
+            </datalist>
+          ` : x``}
       </div>
-      <decidables-spinner ?disabled=${this.disabled} min=${o(this.min)} max=${o(this.max)} step=${o(this.step)} .value=${this.value} @input=${this.inputted.bind(this)}></decidables-spinner>
+      <decidables-spinner ?disabled=${this.disabled} min=${o(this.min)} max=${o(this.max)} step=${o(this.step)} .value=${this.value} @input=${this.spinnerInputted.bind(this)}></decidables-spinner>
     `;
     }
   }