@decidables/decidables-elements 0.4.9 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.0](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.4.9...@decidables/decidables-elements@0.5.0) (2025-05-20)
+
+
+### Features
+
+* **decidables-elements:** adding optional nonlinear scale and CSS styling to slider ([b0ac44b](https://github.com/decidables/decidables/commit/b0ac44ba9cf7ea44a66bfcf581832bd231b03f4c))
+
+
+
 ## [0.4.9](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.4.8...@decidables/decidables-elements@0.4.9) (2025-02-06)
 
 **Note:** Version bump only for package @decidables/decidables-elements

package/README.md

@@ -44,6 +44,11 @@ Button for taking actions
 - `disabled: boolean = false`
   - In disabled state user can't interact
 
+##### CSS Custom Properties
+
+- `--decidables-button-background-color`
+  - Set the background color for the button
+
 ##### Example
 
 ```html
@@ -65,6 +70,8 @@ Slider w/spinner for selecting a numeric value from a range
 
 - `disabled: boolean = false`
   - In disabled state user can't interact
+- `scale: boolean = false`
+  - Show maximum and minimum values with ticks next to slider
 - `max: number = undefined`
   - Maximum value the slider can take
 - `min: number = undefined`
@@ -74,6 +81,32 @@ Slider w/spinner for selecting a numeric value from a range
 - `value: number = undefined`
   - Initial value of the slider
 
+##### Methods
+
+- `nonlinearRange(nonlinear, toRange, fromRange)`
+  - Set nonlinear scaling for the slider
+  - Parameters
+    - `nonlinear: boolean`
+      - Should the slider have nonlinear scaling
+    - `toRange: function(value)`
+      - Function defining transform from actual quantity to range position
+      - Parameters
+        - `value: number`
+        - The quantity to transform to range position
+    - `fromRange: function(value)`
+      - Function defining transform from range position back to actual quantity
+      - Parameters
+        - `value: number`
+        - The range position to transform back to an actual quantity
+
+##### CSS Custom Properties
+
+- `--decidables-slider-color`
+  - Set the color for the slider thumb if enabled
+- `--decidables-slider-background-color`
+  - Set the color for the slider track, the background-color for the spinner (and the color for the
+    slider thumb, if disabled)
+
 ##### Example
 
 ```html
@@ -104,6 +137,19 @@ Text field w/spinner arrows for selecting a continuous numeric value
 - `value: number = undefined`
   - Initial value of the slider
 
+##### CSS Custom Properties
+
+- `--decidables-spinner-font-size`
+  - Set the font-size for the spinner
+- `--decidables-spinner-input-width`
+  - Set the width of the input area of the spinner
+- `--decidables-spinner-prefix`
+  - Set the prefixed text for the spinner (for example, '$')
+- `--decidables-spinner-postfix`
+  - Set the postfixed text for the spinner (for example, 'days')
+- `--decidables-spinner-postfix-padding`
+  - Set the width needed to fit the postfix into the spinner
+
 ##### Example
 
 ```html
@@ -130,6 +176,8 @@ Switch for turning an option on or off
 - `checked: number = false`
   - Whether the switch is **on** (`true`) or **off** (`false`)
 
+##### CSS Custom Properties
+
 ##### Example
 
 ```html
@@ -159,6 +207,8 @@ One option in a toggle set
 - `value: string = undefined`
   - An identifier specific to this option to uniquely identify it in the group
 
+##### CSS Custom Properties
+
 ##### Example
 
 ```html

package/lib/decidablesElements.esm.js

@@ -3401,6 +3401,9 @@ class DecidablesButton extends DecidablesElement {
   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;
         }
 
@@ -3420,7 +3423,7 @@ class DecidablesButton extends DecidablesElement {
         }
 
         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;
         }
@@ -3428,7 +3431,7 @@ class DecidablesButton extends DecidablesElement {
         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);
         }
@@ -3479,6 +3482,11 @@ class DecidablesSlider extends DecidablesElement {
         type: Boolean,
         reflect: true
       },
+      scale: {
+        attribute: 'scale',
+        type: Boolean,
+        reflect: true
+      },
       max: {
         attribute: 'max',
         type: Number,
@@ -3498,6 +3506,11 @@ class DecidablesSlider extends DecidablesElement {
         attribute: 'value',
         type: Number,
         reflect: true
+      },
+      nonlinear: {
+        attribute: false,
+        type: Boolean,
+        reflect: false
       }
     };
   }
@@ -3506,13 +3519,30 @@ class DecidablesSlider extends DecidablesElement {
 
     // 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
@@ -3520,12 +3550,25 @@ class DecidablesSlider extends DecidablesElement {
       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))});
@@ -3543,7 +3586,10 @@ class DecidablesSlider extends DecidablesElement {
         }
 
         .range {
-          display: inline-block;
+          position: relative;
+          display: flex;
+
+          flex-direction: row;
 
           width: 3.5rem;
           height: 4.75rem;
@@ -3554,6 +3600,8 @@ class DecidablesSlider extends DecidablesElement {
           --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/#/ */
@@ -3592,14 +3640,14 @@ class DecidablesSlider extends DecidablesElement {
           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 */
@@ -3607,7 +3655,7 @@ class DecidablesSlider extends DecidablesElement {
           width: 100%;
           height: 4px;
 
-          background: var(---color-element-disabled);
+          background: var(---decidables-slider-background-color);
           border: 0;
           border-radius: 2px;
           box-shadow: none;
@@ -3627,7 +3675,7 @@ class DecidablesSlider extends DecidablesElement {
         /* 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;
@@ -3636,7 +3684,7 @@ class DecidablesSlider extends DecidablesElement {
         /* 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;
@@ -3644,12 +3692,12 @@ class DecidablesSlider extends DecidablesElement {
 
         /* 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 */
@@ -3667,12 +3715,12 @@ class DecidablesSlider extends DecidablesElement {
         }
 
         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);
         }
 
@@ -3703,13 +3751,13 @@ class DecidablesSlider extends DecidablesElement {
 
         /* 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);
         }
 
@@ -3746,13 +3794,13 @@ class DecidablesSlider extends DecidablesElement {
 
         /* 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);
         }
 
@@ -3774,6 +3822,33 @@ class DecidablesSlider extends DecidablesElement {
         :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() {
@@ -3782,9 +3857,15 @@ class DecidablesSlider extends DecidablesElement {
         <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>
     `;
   }
 }