Merge ha-paper-slider into ha-slider (#7114)

polymer.json

@@ -24,7 +24,6 @@
     "filesToIgnore": [
       "**/*.html",
       "**/src/panels/config/js/**/*.js",
-      "**/ha-paper-slider.js",
       "**/ha-iconset-svg.js",
       "**/ha-script-editor.js",
       "**/ha-automation-editor.js",

src/components/ha-form/ha-form-integer.ts

@@ -14,7 +14,7 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
-import "../ha-paper-slider";
+import "../ha-slider";
 import {
   HaFormElement,
   HaFormIntegerData,
@@ -31,7 +31,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
 
   @property() public suffix?: string;
 
-  @query("paper-input ha-paper-slider") private _input?: HTMLElement;
+  @query("paper-input ha-slider") private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -53,7 +53,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                     ></ha-checkbox>
                   `
                 : ""}
-              <ha-paper-slider
+              <ha-slider
                 pin
                 editable
                 .value=${this._value}
@@ -63,7 +63,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                 this.schema.optional &&
                 this.schema.default === undefined}
                 @value-changed=${this._valueChanged}
-              ></ha-paper-slider>
+              ></ha-slider>
             </div>
           </div>
         `
@@ -112,7 +112,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       .flex {
         display: flex;
       }
-      ha-paper-slider {
+      ha-slider {
         width: 100%;
         margin-right: 16px;
       }

src/components/ha-labeled-slider.js

@@ -2,7 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "./ha-icon";
-import "./ha-paper-slider";
+import "./ha-slider";
 
 class HaLabeledSlider extends PolymerElement {
   static get template() {
@@ -27,7 +27,7 @@ class HaLabeledSlider extends PolymerElement {
           color: var(--secondary-text-color);
         }
 
-        ha-paper-slider {
+        ha-slider {
           flex-grow: 1;
           background-image: var(--ha-slider-background);
         }
@@ -37,7 +37,7 @@ class HaLabeledSlider extends PolymerElement {
       <div class="extra-container"><slot name="extra"></slot></div>
       <div class="slider-container">
         <ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
-        <ha-paper-slider
+        <ha-slider
           min="[[min]]"
           max="[[max]]"
           step="[[step]]"
@@ -45,7 +45,7 @@ class HaLabeledSlider extends PolymerElement {
           disabled="[[disabled]]"
           disabled="[[disabled]]"
           value="{{value}}"
-        ></ha-paper-slider>
+        ></ha-slider>
       </div>
     `;
   }

src/components/ha-paper-slider.js

@@ -1,80 +0,0 @@
-import "@polymer/paper-slider/paper-slider";
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin paper-slider
- */
-const PaperSliderClass = customElements.get("paper-slider");
-
-class HaPaperSlider extends PaperSliderClass {
-  static get template() {
-    const tpl = document.createElement("template");
-    tpl.innerHTML = PaperSliderClass.template.innerHTML;
-    const styleEl = document.createElement("style");
-    styleEl.innerHTML = `
-      .pin > .slider-knob > .slider-knob-inner {
-        font-size:  var(--ha-paper-slider-pin-font-size, 10px);
-        line-height: normal;
-      }
-
-      .disabled.ring > .slider-knob > .slider-knob-inner {
-        background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
-        border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
-      }
-
-      .pin > .slider-knob > .slider-knob-inner::before {
-        top: unset;
-        margin-left: unset;
-
-        bottom: calc(15px + var(--calculated-paper-slider-height)/2);
-        left: 50%;
-        width: 2.2em;
-        height: 2.2em;
-
-        -webkit-transform-origin: left bottom;
-        transform-origin: left bottom;
-        -webkit-transform: rotate(-45deg) scale(0) translate(0);
-        transform: rotate(-45deg) scale(0) translate(0);
-      }
-
-      .pin.expand > .slider-knob > .slider-knob-inner::before {
-        -webkit-transform: rotate(-45deg) scale(1) translate(7px, -7px);
-        transform: rotate(-45deg) scale(1) translate(7px, -7px);
-      }
-
-      .pin > .slider-knob > .slider-knob-inner::after {
-        top: unset;
-        font-size: unset;
-
-        bottom: calc(15px + var(--calculated-paper-slider-height)/2);
-        left: 50%;
-        margin-left: -1.1em;
-        width: 2.2em;
-        height: 2.1em;
-
-        -webkit-transform-origin: center bottom;
-        transform-origin: center bottom;
-        -webkit-transform: scale(0) translate(0);
-        transform: scale(0) translate(0);
-      }
-
-      .pin.expand > .slider-knob > .slider-knob-inner::after {
-        -webkit-transform: scale(1) translate(0, -10px);
-        transform: scale(1) translate(0, -10px);
-      }
-
-      :host([dir="rtl"]) .pin.expand > .slider-knob > .slider-knob-inner::after {
-        -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
-        transform: scale(1) translate(0, -17px) scaleX(-1) !important;
-        }
-
-        .slider-input {
-          width: 54px;
-        }
-    `;
-    tpl.content.appendChild(styleEl);
-    return tpl;
-  }
-}
-customElements.define("ha-paper-slider", HaPaperSlider);

src/components/ha-slider.js

@@ -17,6 +17,61 @@ class HaSlider extends PaperSliderClass {
             -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
             transform: scale(1) translate(0, -17px) scaleX(-1) !important;
             }
+
+            .pin > .slider-knob > .slider-knob-inner {
+              font-size:  var(--ha-slider-pin-font-size, 10px);
+              line-height: normal;
+            }
+
+            .disabled.ring > .slider-knob > .slider-knob-inner {
+              background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+              border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+            }
+
+            .pin > .slider-knob > .slider-knob-inner::before {
+              top: unset;
+              margin-left: unset;
+
+              bottom: calc(15px + var(--calculated-paper-slider-height)/2);
+              left: 50%;
+              width: 2.2em;
+              height: 2.2em;
+
+              -webkit-transform-origin: left bottom;
+              transform-origin: left bottom;
+              -webkit-transform: rotate(-45deg) scale(0) translate(0);
+              transform: rotate(-45deg) scale(0) translate(0);
+            }
+
+            .pin.expand > .slider-knob > .slider-knob-inner::before {
+              -webkit-transform: rotate(-45deg) scale(1) translate(7px, -7px);
+              transform: rotate(-45deg) scale(1) translate(7px, -7px);
+            }
+
+            .pin > .slider-knob > .slider-knob-inner::after {
+              top: unset;
+              font-size: unset;
+
+              bottom: calc(15px + var(--calculated-paper-slider-height)/2);
+              left: 50%;
+              margin-left: -1.1em;
+              width: 2.2em;
+              height: 2.1em;
+
+              -webkit-transform-origin: center bottom;
+              transform-origin: center bottom;
+              -webkit-transform: scale(0) translate(0);
+              transform: scale(0) translate(0);
+            }
+
+            .pin.expand > .slider-knob > .slider-knob-inner::after {
+              -webkit-transform: scale(1) translate(0, -10px);
+              transform: scale(1) translate(0, -10px);
+            }
+
+              .slider-input {
+                width: 54px;
+              }
         `)
       );
     }

src/dialogs/more-info/controls/more-info-climate.ts

@@ -16,7 +16,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-climate-control";
 import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
+import "../../../components/ha-slider";
 import "../../../components/ha-switch";
 import {
   ClimateEntity,
@@ -148,7 +148,7 @@ class MoreInfoClimate extends LitElement {
                   <div class="target-humidity">
                     ${stateObj.attributes.humidity} %
                   </div>
-                  <ha-paper-slider
+                  <ha-slider
                     class="humidity"
                     step="1"
                     pin
@@ -160,7 +160,7 @@ class MoreInfoClimate extends LitElement {
                     .value=${stateObj.attributes.humidity}
                     @change=${this._targetHumiditySliderChanged}
                   >
-                  </ha-paper-slider>
+                  </ha-slider>
                 </div>
               </div>
             `
@@ -451,7 +451,7 @@ class MoreInfoClimate extends LitElement {
         cursor: pointer;
       }
 
-      ha-paper-slider {
+      ha-slider {
         width: 100%;
       }
 

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -15,7 +15,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
+import "../../../components/ha-slider";
 import "../../../components/ha-switch";
 import {
   HumidifierEntity,
@@ -54,7 +54,7 @@ class MoreInfoHumidifier extends LitElement {
             <div class="target-humidity">
               ${stateObj.attributes.humidity} %
             </div>
-            <ha-paper-slider
+            <ha-slider
               class="humidity"
               step="1"
               pin
@@ -66,7 +66,7 @@ class MoreInfoHumidifier extends LitElement {
               .value=${stateObj.attributes.humidity}
               @change=${this._targetHumiditySliderChanged}
             >
-            </ha-paper-slider>
+            </ha-slider>
           </div>
         </div>
 
@@ -187,7 +187,7 @@ class MoreInfoHumidifier extends LitElement {
         cursor: pointer;
       }
 
-      ha-paper-slider {
+      ha-slider {
         width: 100%;
       }
 

src/dialogs/more-info/controls/more-info-water_heater.js

@@ -9,7 +9,6 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { featureClassNames } from "../../../common/entity/feature_class_names";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
 import "../../../components/ha-switch";
 import "../../../components/ha-water_heater-control";
 import { EventsMixin } from "../../../mixins/events-mixin";
@@ -36,10 +35,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
           cursor: pointer;
         }
 
-        ha-paper-slider {
-          width: 100%;
-        }
-
         ha-water_heater-control.range-control-left,
         ha-water_heater-control.range-control-right {
           float: left;

src/resources/ha-style.ts

@@ -82,7 +82,7 @@ documentContainer.innerHTML = `<custom-style>
       --light-primary-opacity: 1.0;
 
       /* set our slider style */
-      --ha-paper-slider-pin-font-size: 15px;
+      --ha-slider-pin-font-size: 15px;
 
       /* rgb */
       --rgb-primary-color: 3, 169, 244;