(feat) Allow slider inversion via yaml config

.gitignore

@@ -1 +1,2 @@
 node_modules/
+.vscode/

README.md

@@ -53,6 +53,7 @@ Available options:
 | `full_row`      | `true`/`false` | Hide the icon and name and stretch slider to full width                                                                                   | `false`  |
 | `attribute`     | (see below)    | Which attribute the slider should control                                                                                                 |          |
 | `dir`           | `ltr`/`rtl`    | Use this to override your languages Right-To-Left or Left-To-Right setting                                                                | language |
+| `inverted`      | `true`/`false` | Inverts slider percentage for a more natural cover slider from closed to open                                                             | `false`  |
 
 Most general Entities row options like `name`, `icon` and `tap_action` et.al. are also supported.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "slider-entity-row",
   "private": true,
-  "version": "17.2.1",
+  "version": "17.3.0",
   "description": "slider-entity-row =================",
   "scripts": {
     "build": "rollup -c",

src/controllers/controller.ts

@@ -12,6 +12,7 @@ export interface ControllerConfig {
   attribute?: string;
   grow?: boolean;
   dir?: string;
+  inverted?: boolean;
 }
 
 export abstract class Controller {

src/main.ts

@@ -69,21 +69,34 @@ class SliderEntityRow extends LitElement {
       ? false
       : true;
 
+    const formatValue = () =>
+      this._config.inverted
+        ? (() => {
+            let matches = /[0-9]{2}/.exec(c.string) || [];
+            if (!matches.length) {
+              return c.string;
+            }
+            return c.string.replace(matches[0], (100 - c.value).toString());
+          })()
+        : c.string;
+
     const content = html`
-      <div class="wrapper" @click=${(ev) => ev.stopPropagation()}>
+      <div class="wrapper" @click=${(ev: Event) => ev.stopPropagation()}>
         ${showSlider
           ? html`
               <ha-slider
                 .min=${c.min}
                 .max=${c.max}
                 .step=${c.step}
-                .value=${c.value}
+                .value=${this._config?.inverted ? 100 - c.value : c.value}
                 .dir=${dir}
                 pin
-                @change=${(ev) =>
-                  (c.value = (
+                @change=${(ev: Event) => {
+                  const target = (
                     this.shadowRoot.querySelector("ha-slider") as any
-                  ).value)}
+                  ).value;
+                  c.value = this._config.inverted ? 100 - target : target;
+                }}
                 class=${this._config.full_row || this._config.grow
                   ? "full"
                   : ""}
@@ -96,7 +109,7 @@ class SliderEntityRow extends LitElement {
           ? html`<span class="state">
               ${c.stateObj.state === "unavailable"
                 ? this.hass.localize("state.default.unavailable")
-                : c.string}
+                : formatValue()}
             </span>`
           : ""}
       </div>

test/views/1_types.yaml

@@ -46,6 +46,7 @@ cards:
           - type: custom:slider-entity-row
             entity: cover.hall_window
             name: cover
+            inverted: true
           - type: custom:slider-entity-row
             entity: fan.ceiling_fan
             name: fan