Remove _hiddenState method. (#1557)

* Remove _hiddenState method since it always has the same result.

* Hide state when row element is narrow. Add input_number row to gallery.

gallery/src/demos/demo-hui-entities-card.js

@@ -55,6 +55,15 @@ const ENTITIES = [
     unit_of_measurement: '°F',
     friendly_name: 'Ecobee',
     supported_features: 1014
+  }),
+  getEntity('input_number', 'noise_allowance', 5, {
+    min: 0,
+    max: 10,
+    step: 1,
+    mode: 'slider',
+    unit_of_measurement: 'dB',
+    friendly_name: 'Allowed Noise',
+    icon: 'mdi:bell-ring'
   })
 ];
 
@@ -72,6 +81,7 @@ const CONFIGS = [
     - light.bed_light
     - light.non_existing
     - climate.ecobee
+    - input_number.noise_allowance
     `
   },
   {
@@ -86,6 +96,7 @@ const CONFIGS = [
     - lock.kitchen_door
     - light.bed_light
     - climate.ecobee
+    - input_number.noise_allowance
   title: Random group
     `
   },
@@ -101,6 +112,7 @@ const CONFIGS = [
     - lock.kitchen_door
     - light.bed_light
     - climate.ecobee
+    - input_number.noise_allowance
   title: Random group
   show_header_toggle: false
     `
@@ -130,6 +142,7 @@ const CONFIGS = [
     - lock.kitchen_door
     - light.bed_light
     - climate.ecobee
+    - input_number.noise_allowance
   title: Random group
   show_header_toggle: false
     `

src/panels/lovelace/entity-rows/hui-input-number-entity-row.js

@@ -40,7 +40,7 @@ class HuiInputNumberEntityRow extends mixinBehaviors([IronResizableBehavior], Po
                 on-change="_selectedValueChanged"
                 ignore-bar-touch
               ></paper-slider>
-              <div class="state">[[_value]] [[_stateObj.attributes.unit_of_measurement]]</div>
+              <span class="state">[[_value]] [[_stateObj.attributes.unit_of_measurement]]</span>
             </div>
           </template>
           <template is="dom-if" if="[[_equals(_stateObj.attributes.mode, 'box')]]">
@@ -113,14 +113,11 @@ class HuiInputNumberEntityRow extends mixinBehaviors([IronResizableBehavior], Po
   }
 
   _hiddenState() {
-    if (this._stateObj.attributes.mode !== 'slider') return;
-    const sliderwidth = this.shadowRoot.querySelector('paper-slider').offsetWidth;
-    const stateElement = this.shadowRoot.querySelector('.state');
-    if (sliderwidth < 100) {
-      stateElement.style.display = 'none';
-    } else if (sliderwidth >= 145) {
-      stateElement.style.display = 'inline';
-    }
+    if (!this.$ || this._stateObj.attributes.mode !== 'slider') return;
+    const width = this.$.input_number_card.offsetWidth;
+    const stateEl = this.shadowRoot.querySelector('.state');
+    if (!stateEl) return;
+    stateEl.hidden = width <= 350;
   }
 
   _stateObjChanged(stateObj, oldStateObj) {