Prefer set properties (#968)

* Use set properties

* Address comments

* Update partial-cards.html

src/dialogs/more-info-dialog.html

@@ -121,9 +121,11 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
 
   _stateObjChanged(newVal, oldVal) {
     if (!newVal) {
-      this._dialogOpen = false;
+      this.setProperties({
-      this._page = null;
+        _dialogOpen: false,
-      this._registryInfo = null;
+        _page: null,
+        _registryInfo: null,
+      });
       return;
     }
 

src/dialogs/more-info/controls/more-info-alarm_control_panel.html

@@ -16,7 +16,7 @@
         value='{{enteredCode}}'
         pattern='[[codeFormat]]'
         type='password'
-        hidden$='[[!codeInputVisible]]'
+        hidden$='[[!codeFormat]]'
         disabled='[[!codeInputEnabled]]'
       ></paper-input>
     </div>
@@ -68,10 +68,6 @@ class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.El
         type: Boolean,
         value: false,
       },
-      codeInputVisible: {
-        type: Boolean,
-        value: false,
-      },
       codeInputEnabled: {
         type: Boolean,
         value: false,
@@ -97,25 +93,20 @@ class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.El
 
   stateObjChanged(newVal, oldVal) {
     if (newVal) {
-      this.codeFormat = newVal.attributes.code_format;
+      const props = {
-      this.codeInputVisible = this.codeFormat !== null;
+        codeFormat: newVal.attributes.code_format,
-      this.codeInputEnabled = (
+        armHomeButtonVisible: newVal.state === 'disarmed',
-        newVal.state === 'armed_home' ||
+        armAwayButtonVisible: newVal.state === 'disarmed',
-        newVal.state === 'armed_away' ||
+      };
-        newVal.state === 'armed_night' ||
+      props.disarmButtonVisible = (
-        newVal.state === 'armed_custom_bypass' ||
-        newVal.state === 'disarmed' ||
-        newVal.state === 'pending' ||
-        newVal.state === 'triggered');
-      this.disarmButtonVisible = (
         newVal.state === 'armed_home' ||
         newVal.state === 'armed_away' ||
         newVal.state === 'armed_night' ||
         newVal.state === 'armed_custom_bypass' ||
         newVal.state === 'pending' ||
         newVal.state === 'triggered');
-      this.armHomeButtonVisible = newVal.state === 'disarmed';
+      props.codeInputEnabled = props.disarmButtonVisible || newVal.state === 'disarmed';
-      this.armAwayButtonVisible = newVal.state === 'disarmed';
+      this.setProperties(props);
     }
     if (oldVal) {
       setTimeout(() => {

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

@@ -287,9 +287,13 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   stateObjChanged(newVal, oldVal) {
-    this.awayToggleChecked = newVal.attributes.away_mode === 'on';
+    if (newVal) {
-    this.auxToggleChecked = newVal.attributes.aux_heat === 'on';
+      this.setProperties({
-    this.onToggleChecked = newVal.state !== 'off';
+        awayToggleChecked: newVal.attributes.away_mode === 'on',
+        auxToggleChecked: newVal.attributes.aux_heat === 'on',
+        onToggleChecked: newVal.state !== 'off',
+      });
+    }
 
     if (oldVal) {
       this._debouncer = Polymer.Debouncer.debounce(

src/dialogs/more-info/controls/more-info-cover.html

@@ -95,8 +95,12 @@
     }
 
     stateObjChanged(newVal) {
-      this.coverPositionSliderValue = newVal.attributes.current_position;
+      if (newVal) {
-      this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
+        this.setProperties({
+          coverPositionSliderValue: newVal.attributes.current_position,
+          coverTiltPositionSliderValue: newVal.attributes.current_tilt_position,
+        });
+      }
     }
 
     computeClassNames(stateObj) {

src/dialogs/more-info/controls/more-info-fan.html

@@ -104,12 +104,12 @@ class MoreInfoFan extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   stateObjChanged(newVal, oldVal) {
-    this.oscillationToggleChecked = newVal.attributes.oscillating;
+    if (newVal) {
-
+      this.setProperties({
-    if (newVal.attributes.speed_list) {
+        oscillationToggleChecked: newVal.attributes.oscillating,
-      this.speedIndex = newVal.attributes.speed_list.indexOf(newVal.attributes.speed);
+        speedIndex: newVal.attributes.speed_list ?
-    } else {
+          newVal.attributes.speed_list.indexOf(newVal.attributes.speed) : -1,
-      this.speedIndex = -1;
+      });
     }
 
     if (oldVal) {

src/dialogs/more-info/controls/more-info-light.html

@@ -160,22 +160,26 @@
     }
 
     stateObjChanged(newVal, oldVal) {
+      const props = {
+        brightnessSliderValue: 0
+      };
+
       if (newVal && newVal.state === 'on') {
-        this.brightnessSliderValue = newVal.attributes.brightness;
+        props.brightnessSliderValue = newVal.attributes.brightness;
-        this.ctSliderValue = newVal.attributes.color_temp;
+        props.ctSliderValue = newVal.attributes.color_temp;
-        this.wvSliderValue = newVal.attributes.white_value;
+        props.wvSliderValue = newVal.attributes.white_value;
         if (newVal.attributes.rgb_color) {
-          this.colorPickerColor = this.rgbArrToObj(newVal.attributes.rgb_color);
+          props.colorPickerColor = this.rgbArrToObj(newVal.attributes.rgb_color);
         }
         if (newVal.attributes.effect_list) {
-          this.effectIndex = newVal.attributes.effect_list.indexOf(newVal.attributes.effect);
+          props.effectIndex = newVal.attributes.effect_list.indexOf(newVal.attributes.effect);
         } else {
-          this.effectIndex = -1;
+          props.effectIndex = -1;
         }
-      } else {
-        this.brightnessSliderValue = 0;
       }
 
+      this.setProperties(props);
+
       if (oldVal) {
         setTimeout(() => {
           this.fire('iron-resize');

src/dialogs/more-info/controls/more-info-media_player.html

@@ -245,27 +245,29 @@
 
     stateObjChanged(newVal, oldVal) {
       if (newVal) {
-        this.isOff = newVal.state === 'off';
+        const props = {
-        this.isPlaying = newVal.state === 'playing';
+          isOff: newVal.state === 'off',
-        this.hasMediaControl = HAS_MEDIA_STATES.indexOf(newVal.state) !== -1;
+          isPlaying: newVal.state === 'playing',
-        this.volumeSliderValue = newVal.attributes.volume_level * 100;
+          hasMediaControl: HAS_MEDIA_STATES.indexOf(newVal.state) !== -1,
-        this.isMuted = newVal.attributes.is_volume_muted;
+          volumeSliderValue: newVal.attributes.volume_level * 100,
-        this.source = newVal.attributes.source;
+          isMuted: newVal.attributes.is_volume_muted,
-        this.supportsPause = (newVal.attributes.supported_features & 1) !== 0;
+          source: newVal.attributes.source,
-        this.supportsVolumeSet = (newVal.attributes.supported_features & 4) !== 0;
+          supportsPause: (newVal.attributes.supported_features & 1) !== 0,
-        this.supportsVolumeMute = (newVal.attributes.supported_features & 8) !== 0;
+          supportsVolumeSet: (newVal.attributes.supported_features & 4) !== 0,
-        this.supportsPreviousTrack = (newVal.attributes.supported_features & 16) !== 0;
+          supportsVolumeMute: (newVal.attributes.supported_features & 8) !== 0,
-        this.supportsNextTrack = (newVal.attributes.supported_features & 32) !== 0;
+          supportsPreviousTrack: (newVal.attributes.supported_features & 16) !== 0,
-        this.supportsTurnOn = (newVal.attributes.supported_features & 128) !== 0;
+          supportsNextTrack: (newVal.attributes.supported_features & 32) !== 0,
-        this.supportsTurnOff = (newVal.attributes.supported_features & 256) !== 0;
+          supportsTurnOn: (newVal.attributes.supported_features & 128) !== 0,
-        this.supportsPlayMedia = (newVal.attributes.supported_features & 512) !== 0;
+          supportsTurnOff: (newVal.attributes.supported_features & 256) !== 0,
-        this.supportsVolumeButtons = (newVal.attributes.supported_features & 1024) !== 0;
+          supportsPlayMedia: (newVal.attributes.supported_features & 512) !== 0,
-        this.supportsSelectSource = (newVal.attributes.supported_features & 2048) !== 0;
+          supportsVolumeButtons: (newVal.attributes.supported_features & 1024) !== 0,
-        this.supportsPlay = (newVal.attributes.supported_features & 16384) !== 0;
+          supportsSelectSource: (newVal.attributes.supported_features & 2048) !== 0,
-
+          supportsPlay: (newVal.attributes.supported_features & 16384) !== 0,
+        };
         if (newVal.attributes.source_list !== undefined) {
-          this.sourceIndex = newVal.attributes.source_list.indexOf(this.source);
+          props.sourceIndex = newVal.attributes.source_list.indexOf(this.source);
         }
+        this.setProperties(props);
       }
 
       if (oldVal) {

src/layouts/partial-cards.html

@@ -138,7 +138,8 @@
   const DEFAULT_VIEW_ENTITY_ID = 'group.default_view';
   const ALWAYS_SHOW_DOMAIN = ['persistent_notification', 'configurator'];
 
-  class PartialCards extends window.hassMixins.EventsMixin(Polymer.Element) {
+  // eslint-disable-next-line
+  class PartialCards extends window.hassMixins.EventsMixin(window.hassMixins.NavigateMixin(Polymer.Element)) {
     static get is() { return 'partial-cards'; }
 
     static get properties() {
@@ -210,27 +211,24 @@
       };
     }
 
-    constructor() {
+    ready() {
-      super();
       this.handleWindowChange = this.handleWindowChange.bind(this);
-      this.mqls = [300, 600, 900, 1200].map(function (width) {
+      this.mqls = [300, 600, 900, 1200].map(width => matchMedia(`(min-width: ${width}px)`));
-        var mql = window.matchMedia('(min-width: ' + width + 'px)');
+      super.ready();
-        mql.addListener(this.handleWindowChange);
+    }
-        return mql;
+
-      }.bind(this));
+    connectedCallback() {
+      super.connectedCallback();
+      this.mqls.forEach(mql => mql.addListener(this.handleWindowChange));
     }
 
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.mqls.forEach((mql) => {
+      this.mqls.forEach(mql => mql.removeListener(this.handleWindowChange));
-        mql.removeListener(this.handleWindowChange);
-      });
     }
 
     handleWindowChange() {
-      var matchColumns = this.mqls.reduce(function (cols, mql) {
+      const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
-        return cols + mql.matches;
-      }, 0);
       // Do -1 column if the menu is docked and open
       this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
     }
@@ -279,16 +277,14 @@
     }
 
     handleViewSelected(ev) {
-      var view = ev.detail.item.getAttribute('data-entity') || null;
+      const view = ev.detail.item.getAttribute('data-entity') || null;
-      var current = this.currentView;
 
-      if (view !== current) {
+      if (view !== this.currentView) {
-        var path = '/states';
+        let path = '/states';
         if (view) {
           path += '/' + view;
         }
-        history.pushState(null, null, path);
+        this.navigate(path);
-        this.fire('location-changed');
       }
     }