Polymer 2 prepare (#309)

* Remove unused paper-range-slider

* Update app-storage

* Upgrade paper-slider to 2.0

* Upgrade paper-scroll-header-panel

* Update paper-card

* Update slots

* Working upgrades

* More slots

* Upgrade app-layout

* More slot upgrades

* Vaadin components to Polymer hybrid ones

* Polymer 2 fixes

* Update polymer to 1.9.2

* Lint

bower.json

@@ -8,23 +8,58 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "app-layout": "~0.10.6",
-    "app-storage": "PolymerElements/app-storage#~0.9.8",
+    "app-layout": "^2.0.0",
+    "app-storage": "^2.0.2",
     "fecha": "~2.3.0",
     "font-roboto-local": "~1.0.1",
     "google-apis": "GoogleWebComponents/google-apis#~1.1.6",
-    "iron-elements": "PolymerElements/iron-elements#~1.0.10",
-    "paper-elements": "PolymerElements/paper-elements#~1.0.7",
-    "paper-range-slider": "IftachSadeh/paper-range-slider#~0.2.4",
-    "paper-scroll-header-panel": "~1.0.16",
-    "polymer": "Polymer/polymer#~1.8.0",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#~1.1.5",
-    "vaadin-date-picker": "^1.2.1",
-    "paper-slider": "1.0.14",
+    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-image": "PolymerElements/iron-image#^2.1.1",
+    "iron-input": "PolymerElements/iron-input#^2.0.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
+    "iron-pages": "PolymerElements/iron-pages#^2.0.0",
     "leaflet": "^1.0.2",
-    "polymer-sortablejs": "^0.1.3"
+    "neon-animation": "PolymerElements/neon-animation#^2.0.1",
+    "paper-button": "PolymerElements/paper-button#^2.0.0",
+    "paper-card": "PolymerElements/paper-card#^2.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
+    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
+    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^2.0.0",
+    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
+    "paper-fab": "PolymerElements/paper-fab#^2.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.1",
+    "paper-item": "PolymerElements/paper-item#^2.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
+    "paper-material": "PolymerElements/paper-material#^2.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^1.3.0",
+    "paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
+    "paper-progress": "PolymerElements/paper-progress#^2.0.1",
+    "paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",
+    "paper-radio-group": "PolymerElements/paper-radio-group#^2.0.0",
+    "paper-scroll-header-panel": "~2.0.0",
+    "paper-slider": "PolymerElements/paper-slider#^2.0.1",
+    "paper-spinner": "PolymerElements/paper-spinner#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
+    "paper-toast": "PolymerElements/paper-toast#^2.0.0",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
+    "polymer": "Polymer/polymer#~1.9.2",
+    "polymer-sortablejs": "^0.1.3",
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#v2.0.0-alpha4",
+    "vaadin-date-picker": "vaadin/vaadin-date-picker#v2.0.0-alpha1",
+    "web-animations-js": "^2.2.5"
   },
   "resolutions": {
-    "paper-slider": "1.0.14"
+    "polymer": "^1.0.0",
+    "webcomponentsjs": "^0.7.24",
+    "iron-flex-layout": "^2.0.0",
+    "paper-input": "^2.0.0",
+    "paper-styles": "2.0.0",
+    "iron-resizable-behavior": "^2.0.0",
+    "iron-a11y-keys-behavior": "^2.0.0"
   }
 }

panels/automation/ha-automation-editor.html

@@ -76,7 +76,7 @@
     </style>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
             icon='mdi:arrow-left'

panels/automation/ha-automation-picker.html

@@ -51,7 +51,7 @@
     </style>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Automations Editor</div>

panels/config/group/ha-form-group.html

@@ -95,10 +95,10 @@
         >
           <paper-icon-button
             icon='mdi:plus'
-            class="dropdown-trigger"
+            slot="dropdown-trigger"
           ></paper-icon-button>
           <paper-listbox
-            class="dropdown-content"
+            slot="dropdown-content"
             selected='{{entityPollingIntensity}}'
           >
             <paper-item>Do not poll (0)</paper-item>

panels/config/ha-entity-config.html

@@ -34,7 +34,7 @@
             disabled='[[!entities.length]]'
           >
             <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
               selected='{{selectedEntity}}'
             >
               <template is='dom-repeat' items='[[entities]]' as='state'>

panels/config/ha-panel-config.html

@@ -31,7 +31,7 @@
     <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
     </iron-media-query>
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Configuration</div>

panels/config/z-wave/ha-form-zwave-device.html

@@ -22,7 +22,7 @@
         disabled='[[entityIgnored]]'
       >
         <paper-listbox
-          class="dropdown-content"
+          slot="dropdown-content"
           selected='{{entityPollingIntensity}}'
         >
           <paper-item>Do not poll (0)</paper-item>

panels/dev-event/ha-panel-dev-event.html

@@ -40,7 +40,7 @@
     </style>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Events</div>

panels/dev-info/ha-panel-dev-info.html

@@ -57,7 +57,7 @@
     </style>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>About</div>

panels/dev-service/ha-panel-dev-service.html

@@ -63,7 +63,7 @@
     </style>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Services</div>
@@ -188,6 +188,7 @@ Polymer({
   },
 
   computeAttributesArray: function (serviceDomains, domain, service) {
+    if (!serviceDomains) return [];
     if (!(domain in serviceDomains)) return [];
     if (!(service in serviceDomains[domain])) return [];
 

panels/dev-state/ha-panel-dev-state.html

@@ -48,7 +48,7 @@
     </style>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>States</div>

panels/dev-template/ha-panel-dev-template.html

@@ -59,7 +59,7 @@
     </style>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Templates</div>

panels/hassio/addon-store/hassio-addon-store.html

@@ -26,7 +26,7 @@
       }
     </style>
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
             icon='mdi:arrow-left'

panels/hassio/addon-view/hassio-addon-view.html

@@ -37,7 +37,7 @@
       }
     </style>
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
             icon='mdi:arrow-left'

panels/hassio/dashboard/hassio-dashboard.html

@@ -33,7 +33,7 @@
       }
     </style>
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Hass.io</div>

panels/hassio/supervisor/hassio-supervisor.html

@@ -16,7 +16,7 @@
       }
     </style>
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
             icon='mdi:arrow-left'

panels/history/ha-panel-history.html

@@ -23,6 +23,9 @@
       }
 
       vaadin-date-picker {
+        --vaadin-date-picker-clear-icon: {
+          display: none;
+        }
         margin-bottom: 24px;
         margin-right: 16px;
         max-width: 200px;
@@ -42,7 +45,7 @@
       is-loading='{{isLoadingData}}'
     ></ha-state-history-data>
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>History</div>
@@ -63,7 +66,10 @@
             label='Period'
             disabled='[[isLoadingData]]'
           >
-            <paper-menu class="dropdown-content" selected="{{_periodIndex}}">
+            <paper-menu
+              slot="dropdown-content"
+              selected="{{_periodIndex}}"
+            >
               <paper-item>1 day</paper-item>
               <paper-item>3 days</paper-item>
               <paper-item>1 week</paper-item>

panels/logbook/ha-panel-logbook.html

@@ -30,6 +30,9 @@
     }
 
     vaadin-date-picker {
+      --vaadin-date-picker-clear-icon: {
+        display: none;
+      }
       margin-bottom: 24px;
       max-width: 200px;
     }
@@ -47,7 +50,7 @@
     ></ha-logbook-data>
 
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Logbook</div>

panels/zwave/ha-panel-zwave.html

@@ -51,7 +51,7 @@
         }
     </style>
     <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Z-Wave Manager</div>
@@ -74,7 +74,7 @@
           <div class='device-picker'>
             <paper-dropdown-menu label="Nodes" class="flex">
               <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                 selected='{{selectedNode}}'>
               <template is='dom-repeat' items='[[nodes]]' as='state'>
                 <paper-item>[[computeSelectCaption(state)]]</paper-item>
@@ -138,7 +138,7 @@
            <div class='device-picker'>
             <paper-dropdown-menu label="Entities of this node" class="flex">
               <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                 selected='{{selectedEntity}}'>
                 <template is='dom-repeat' items='[[entities]]' as='state'>
                   <paper-item>[[computeSelectCaptionEnt(state)]]</paper-item>

panels/zwave/zwave-groups.html

@@ -37,7 +37,7 @@
           <div class='device-picker'>
           <paper-dropdown-menu label="Node to control" class='flex'>
             <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
               selected='{{selectedTargetNode}}'>
                <template is='dom-repeat' items='[[nodes]]' as='state'>
                 <paper-item>[[computeSelectCaption(state)]]</paper-item>
@@ -50,7 +50,7 @@
           <div class='device-picker'>
           <paper-dropdown-menu label="Group" class='flex'>
             <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
               selected='{{selectedGroup}}'>
               <template is='dom-repeat' items='[[groups]]' as='state'>
                 <paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>

panels/zwave/zwave-node-config.html

@@ -55,7 +55,7 @@
         <div class='device-picker'>
         <paper-dropdown-menu label="Config parameter" class='flex'>
           <paper-listbox
-            class="dropdown-content"
+            slot="dropdown-content"
             selected='{{selectedConfigParameter}}'>
             <template is='dom-repeat' items='[[config]]' as='state'>
               <paper-item>[[computeSelectCaptionConfigParameter(state)]]</paper-item>
@@ -67,7 +67,7 @@
           <div class='device-picker'>
             <paper-dropdown-menu label="Config value" class='flex' placeholder='{{loadedConfigValue}}'>
               <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                 selected='{{selectedConfigValue}}'>
                 <template is='dom-repeat' items='[[selectedConfigParameterValues]]' as='state'>
                   <paper-item>[[state]]</paper-item>
@@ -92,7 +92,7 @@
           <div class='device-picker'>
             <paper-dropdown-menu label="Config value" class='flex' placeholder='{{loadedConfigValue}}'>
               <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                 selected='{{selectedConfigValue}}'>
                 <template is='dom-repeat' items='[[selectedConfigParameterValues]]' as='state'>
                   <paper-item>[[state]]</paper-item>

panels/zwave/zwave-usercodes.html

@@ -33,7 +33,7 @@
           <div class='device-picker'>
           <paper-dropdown-menu label="Code slot" class='flex'>
             <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
               selected='{{selectedUserCode}}'>
               <template is='dom-repeat' items='[[userCodes]]' as='state'>
                 <paper-item>[[computeSelectCaptionUserCodes(state)]]</paper-item>

panels/zwave/zwave-values.html

@@ -37,7 +37,7 @@
         <div class='device-picker'>
         <paper-dropdown-menu label="Value" class='flex'>
           <paper-listbox
-            class="dropdown-content"
+            slot="dropdown-content"
             selected='{{selectedValue}}'>
              <template is='dom-repeat' items='[[values]]' as='item'>
               <paper-item>[[computeSelectCaption(item)]]</paper-item>

preact-src/script/script_action.js

@@ -56,7 +56,7 @@ export default class Action extends Component {
         <div>
           <paper-dropdown-menu-light label="Action Type" no-animations>
             <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
               selected={selected}
               oniron-select={this.typeChanged}
             >
@@ -90,9 +90,9 @@ export default class Action extends Component {
           >
             <paper-icon-button
               icon="mdi:dots-vertical"
-              class="dropdown-trigger"
+              slot="dropdown-trigger"
             />
-            <paper-menu class="dropdown-content">
+            <paper-menu slot="dropdown-content">
               <paper-item disabled>Duplicate</paper-item>
               <paper-item onTap={this.onDelete}>Delete</paper-item>
             </paper-menu>

preact-src/trigger/trigger_row.js

@@ -54,7 +54,7 @@ export default class TriggerRow extends Component {
         <div>
           <paper-dropdown-menu-light label="Trigger Type" no-animations>
             <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
               selected={selected}
               oniron-select={this.typeChanged}
             >
@@ -88,9 +88,9 @@ export default class TriggerRow extends Component {
           >
             <paper-icon-button
               icon="mdi:dots-vertical"
-              class="dropdown-trigger"
+              slot="dropdown-trigger"
             />
-            <paper-menu class="dropdown-content">
+            <paper-menu slot="dropdown-content">
               <paper-item disabled>Duplicate</paper-item>
               <paper-item onTap={this.onDelete}>Delete</paper-item>
             </paper-menu>

src/components/ha-sidebar.html

@@ -101,19 +101,19 @@
 
     <paper-menu attr-for-selected='data-panel' selected='[[hass.currentPanel]]' on-iron-select='menuSelect'>
       <paper-icon-item on-tap='menuClicked' data-panel='states'>
-        <iron-icon item-icon icon='mdi:apps'></iron-icon>
+        <iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
         <span class='item-text'>States</span>
       </paper-icon-item>
 
       <template is='dom-repeat' items='[[panels]]'>
         <paper-icon-item on-tap='menuClicked' data-panel$='[[item.url_path]]'>
-          <iron-icon item-icon icon='[[item.icon]]'></iron-icon>
+          <iron-icon slot="item-icon" icon='[[item.icon]]'></iron-icon>
           <span class='item-text'>[[item.title]]</span>
         </paper-icon-item>
       </template>
 
       <paper-icon-item on-tap='menuClicked' data-panel='logout' class='logout'>
-        <iron-icon item-icon icon='mdi:exit-to-app'></iron-icon>
+        <iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
         <span class='item-text'>Log Out</span>
       </paper-icon-item>
     </paper-menu>

src/home-assistant.html

@@ -5,6 +5,10 @@
 <link rel='import' href='../bower_components/paper-styles/typography.html'>
 <link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
 
+<!--polyfill for paper-dropdown-->
+<link rel="import" href="../bower_components/neon-animation/web-animations.html">
+
+
 <link rel='import' href='./util/hass-util.html'>
 <link rel='import' href='./util/ha-pref-storage.html'>
 <link rel='import' href='./util/hass-call-api.html'>

src/layouts/home-assistant-main.html

@@ -26,10 +26,10 @@
       force-narrow='[[computeForceNarrow(narrow, dockedSidebar)]]'
       responsive-width='0' disable-swipe='[[isSelectedMap]]'
       disable-edge-swipe='[[isSelectedMap]]'>
-      <ha-sidebar drawer narrow='[[narrow]]' hass='[[hass]]'></ha-sidebar>
+      <ha-sidebar slot="drawer" narrow='[[narrow]]' hass='[[hass]]'></ha-sidebar>
 
       <iron-pages
-        main
+        slot="main"
         attr-for-selected='id'
         fallback-selection='panel-resolver'
         selected='[[currentPanel]]'
@@ -63,6 +63,7 @@ Polymer({
     hass: {
       type: Object,
       value: null,
+      observer: 'hassChanged',
     },
 
     narrow: {
@@ -71,8 +72,6 @@ Polymer({
 
     currentPanel: {
       type: String,
-      computed: 'computeCurrentPanel(hass)',
-      observer: 'currentPanelChanged',
     },
 
     dockedSidebar: {
@@ -87,6 +86,16 @@ Polymer({
     'hass-start-voice': 'handleStartVoice',
   },
 
+  hassChanged: function (hass) {
+    if (this.currentPanel !== hass.currentPanel) {
+      this.currentPanel = hass.currentPanel;
+
+      if (this.narrow) {
+        this.$.drawer.closeDrawer();
+      }
+    }
+  },
+
   handleStartVoice: function (ev) {
     ev.stopPropagation();
     this.$.voiceDialog.startListening();
@@ -107,12 +116,6 @@ Polymer({
     }
   },
 
-  currentPanelChanged: function () {
-    if (this.narrow) {
-      this.$.drawer.closeDrawer();
-    }
-  },
-
   attached: function () {
     window.removeInitMsg();
   },
@@ -121,10 +124,6 @@ Polymer({
     return narrow || !dockedSidebar;
   },
 
-  computeCurrentPanel: function (hass) {
-    return hass.currentPanel;
-  },
-
   computeDockedSidebar: function (hass) {
     return hass.dockedSidebar;
   },

src/layouts/partial-cards.html

@@ -37,7 +37,7 @@
     </style>
 
     <app-header-layout has-scrolling-region id='layout'>
-      <app-header effects="waterfall" condenses fixed>
+      <app-header effects="waterfall" condenses fixed slot="header">
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>[[computeTitle(views, locationName)]]</div>
@@ -126,7 +126,7 @@ Polymer({
     hass: {
       type: Object,
       value: null,
-      observer: 'computeAllViews'
+      observer: 'hassChanged'
     },
 
     narrow: {
@@ -162,7 +162,6 @@ Polymer({
 
     currentView: {
       type: String,
-      computed: 'computeCurrentView(hass)',
     },
 
     views: {
@@ -250,7 +249,7 @@ Polymer({
   },
 
   computeTitle: function (views, locationName) {
-    return views.length > 0 ? 'Home Assistant' : locationName;
+    return views && views.length > 0 ? 'Home Assistant' : locationName;
   },
 
   computeShowIntroduction: function (currentView, introductionLoaded, states) {
@@ -276,7 +275,13 @@ Polymer({
     return window.hassUtil.isComponentLoaded(hass, 'introduction');
   },
 
-  computeAllViews: function (hass) {
+  hassChanged: function (hass) {
+    var newView = hass.currentView || '';
+
+    if (newView !== this.currentView) {
+      this.currentView = newView;
+    }
+
     var views = window.HAWS.extractViews(hass.states);
     // If default view present, it's in first index.
     if (views.length > 0 && views[0].entity_id === this.DEFAULT_VIEW_ENTITY_ID) {
@@ -334,9 +339,5 @@ Polymer({
 
     return states;
   },
-
-  computeCurrentView: function (hass) {
-    return hass.currentView || '';
-  },
 });
 </script>

src/more-infos/more-info-climate.html

@@ -7,7 +7,6 @@
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
-<link rel="import" href="../../bower_components/paper-range-slider/paper-range-slider.html">
 
 <link rel="import" href='../components/ha-climate-control.html'>
 
@@ -76,15 +75,6 @@
         --paper-slider-secondary-color: var(--paper-blue-400);
       }
 
-      paper-range-slider {
-        --paper-range-slider-lower-color: var(--paper-orange-400);
-        --paper-range-slider-active-color: var(--paper-green-400);
-        --paper-range-slider-higher-color: var(--paper-blue-400);
-        --paper-range-slider-knob-color: var(--primary-color);
-        --paper-range-slider-pin-color: var(--primary-color);
-        --paper-range-slider-width: 100%;
-      }
-
       .single-row {
         padding: 8px 0;
       }
@@ -129,7 +119,7 @@
       <div class='container-operation_list'>
         <div class='controls'>
           <paper-dropdown-menu label-float label='Operation'>
-            <paper-menu class="dropdown-content" selected="{{operationIndex}}">
+            <paper-menu slot="dropdown-content" selected="{{operationIndex}}">
               <template is='dom-repeat'
                         items='[[stateObj.attributes.operation_list]]'>
                 <paper-item class="capitalize">[[item]]</paper-item>
@@ -141,7 +131,7 @@
 
       <div class='container-fan_list'>
         <paper-dropdown-menu label-float label='Fan Mode'>
-          <paper-menu class="dropdown-content" selected="{{fanIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{fanIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.fan_list]]'>
               <paper-item>[[item]]</paper-item>
@@ -152,7 +142,7 @@
 
       <div class='container-swing_list'>
         <paper-dropdown-menu label-float label='Swing Mode'>
-          <paper-menu class="dropdown-content" selected="{{swingIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{swingIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.swing_list]]'>
               <paper-item>[[item]]</paper-item>

src/more-infos/more-info-fan.html

@@ -28,7 +28,7 @@
 
       <div class="container-speed_list">
         <paper-dropdown-menu label-float label='Speed'>
-          <paper-menu class='dropdown-content' selected='{{speedIndex}}'>
+          <paper-menu slot="dropdown-content" selected='{{speedIndex}}'>
             <template is='dom-repeat'
                       items='[[stateObj.attributes.speed_list]]'>
               <paper-item>[[item]]</paper-item>

src/more-infos/more-info-light.html

@@ -52,7 +52,7 @@
 
       <div class='effect_list'>
         <paper-dropdown-menu label-float label='Effect'>
-          <paper-menu class="dropdown-content" selected="{{effectIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{effectIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.effect_list]]'>
               <paper-item>[[item]]</paper-item>

src/more-infos/more-info-media_player.html

@@ -93,7 +93,7 @@
            hidden$='[[computeHideSelectSource(isOff, supportsSelectSource)]]'>
         <iron-icon class="source-input" icon="mdi:login-variant"></iron-icon>
         <paper-dropdown-menu class="flex source-input" label-float label='Source'>
-          <paper-menu class="dropdown-content" selected="{{sourceIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{sourceIndex}}">
             <template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
               <paper-item>[[item]]</paper-item>
             </template>

src/state-summary/state-card-input_select.html

@@ -28,7 +28,7 @@
       on-tap='stopPropagation'
       selected-item-label='{{selectedOption}}'
       label='[[computeStateName(stateObj)]]'>
-      <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
+      <paper-menu slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
         <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
           <paper-item>[[item]]</paper-item>
         </template>