Org files (#1183)

* Organize files

* Import EventsMixin

* Import NavigateMixin

* Dissolve window.hassMixins

* Apply ElementMixin when we use it

* Update tests to point at right dir

* Eslint

* Clean

* Update mixins inside hassio

* Update lint command"

* Fix polymer lint

hassio/addon-store/hassio-addon-repository.js

@@ -4,9 +4,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/components/hassio-card-content.js';
 import '../../src/resources/hassio-style.js';
-import '../../src/util/hass-mixins.js';
+import NavigateMixin from '../../src/mixins/navigate-mixin.js';
 
-class HassioAddonRepository extends window.hassMixins.NavigateMixin(PolymerElement) {
+class HassioAddonRepository extends NavigateMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex ha-style hassio-style">

hassio/addon-store/hassio-addon-store.js

@@ -1,7 +1,6 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/util/hass-mixins.js';
 import './hassio-addon-repository.js';
 import './hassio-repositories-editor.js';
 

hassio/addon-view/hassio-addon-audio.js

@@ -9,9 +9,9 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/resources/ha-style.js';
-import '../../src/util/hass-mixins.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
-class HassioAddonAudio extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioAddonAudio extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style">

hassio/addon-view/hassio-addon-info.js

@@ -9,9 +9,9 @@ import '../../src/components/buttons/ha-call-api-button.js';
 import '../../src/components/ha-markdown.js';
 import '../../src/components/hassio-card-content.js';
 import '../../src/resources/ha-style.js';
-import '../../src/util/hass-mixins.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
-class HassioAddonInfo extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioAddonInfo extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style">

hassio/addon-view/hassio-addon-network.js

@@ -5,9 +5,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/components/buttons/ha-call-api-button.js';
 import '../../src/resources/ha-style.js';
-import '../../src/util/hass-mixins.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
-class HassioAddonNetwork extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioAddonNetwork extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style">

hassio/dashboard/hassio-addons.js

@@ -4,9 +4,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/components/hassio-card-content.js';
 import '../../src/resources/hassio-style.js';
-import '../../src/util/hass-mixins.js';
+import NavigateMixin from '../../src/mixins/navigate-mixin.js';
 
-class HassioAddons extends window.hassMixins.NavigateMixin(PolymerElement) {
+class HassioAddons extends NavigateMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style hassio-style">

hassio/dashboard/hassio-dashboard.js

@@ -3,8 +3,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './hassio-addons.js';
 import './hassio-hass-update.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
-class HassioDashboard extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioDashboard extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">

hassio/hassio-main.js

@@ -7,9 +7,10 @@ import './addon-view/hassio-addon-view.js';
 import './hassio-data.js';
 import './hassio-pages-with-tabs.js';
 
-import applyThemesOnElement from '../js/common/dom/apply_themes_on_element.js';
+import applyThemesOnElement from '../src/common/dom/apply_themes_on_element.js';
+import EventsMixin from '../src/mixins/events-mixin.js';
 
-class HassioMain extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioMain extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <app-route route="[[route]]" pattern="/:page" data="{{routeData}}"></app-route>

hassio/hassio-pages-with-tabs.js

@@ -9,15 +9,15 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../src/components/ha-menu-button.js';
 import '../src/resources/ha-style.js';
-import '../src/util/hass-mixins.js';
 import './addon-store/hassio-addon-store.js';
 import './dashboard/hassio-dashboard.js';
 import './hassio-markdown-dialog.js';
 import './snapshots/hassio-snapshot.js';
 import './snapshots/hassio-snapshots.js';
 import './system/hassio-system.js';
+import NavigateMixin from '../src/mixins/navigate-mixin.js';
 
-class HassioPagesWithTabs extends window.hassMixins.NavigateMixin(PolymerElement) {
+class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex iron-positioning ha-style">

hassio/snapshots/hassio-snapshots.js

@@ -9,9 +9,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/components/hassio-card-content.js';
 import '../../src/resources/hassio-style.js';
-import '../../src/util/hass-mixins.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
-class HassioSnapshots extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioSnapshots extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style hassio-style">

hassio/system/hassio-host-info.js

@@ -4,9 +4,9 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/components/buttons/ha-call-api-button.js';
-import '../../src/util/hass-mixins.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
-class HassioHostInfo extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioHostInfo extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">

hassio/system/hassio-supervisor-info.js

@@ -4,9 +4,9 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/components/buttons/ha-call-api-button.js';
-import '../../src/util/hass-mixins.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
-class HassioSupervisorInfo extends window.hassMixins.EventsMixin(PolymerElement) {
+class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">

js/util.js

@@ -1,97 +0,0 @@
-/**
- * Export hass util functions to window.
- *
- * This file is a workaround for the fact that Polymer 2 doesn't work well with
- * ES6 JS imports. Once we move to Polymer 3, we should be able to simply
- * import these functions where we need them.
- */
-import fecha from 'fecha';
-
-// const
-import {
-  DEFAULT_DOMAIN_ICON,
-  DOMAINS_MORE_INFO_NO_HISTORY,
-  STATES_OFF,
-} from './common/const.js';
-
-// config
-import computeLocationName from './common/config/location_name';
-import isComponentLoaded from './common/config/is_component_loaded.js';
-
-// dom
-import applyThemesOnElement from './common/dom/apply_themes_on_element.js';
-import dynamicContentUpdater from './common/dom/dynamic_content_updater.js';
-
-// datetime
-import durationToSeconds from './common/datetime/duration_to_seconds.js';
-import formatDate from './common/datetime/format_date.js';
-import formatDateTime from './common/datetime/format_date_time.js';
-import formatTime from './common/datetime/format_time.js';
-import relativeTime from './common/datetime/relative_time.js';
-import secondsToDuration from './common/datetime/seconds_to_duration.js';
-
-// entity
-import attributeClassNames from './common/entity/attribute_class_names.js';
-import binarySensorIcon from './common/entity/binary_sensor_icon.js';
-import canToggleDomain from './common/entity/can_toggle_domain.js';
-import canToggleState from './common/entity/can_toggle_state.js';
-import computeDomain from './common/entity/compute_state_domain.js';
-import computeObjectId from './common/entity/compute_object_id.js';
-import computeStateDisplay from './common/entity/compute_state_display.js';
-import computeStateName from './common/entity/compute_state_name.js';
-import coverIcon from './common/entity/cover_icon.js';
-import domainIcon from './common/entity/domain_icon.js';
-import featureClassNames from './common/entity/feature_class_names.js';
-import sensorIcon from './common/entity/sensor_icon.js';
-import sortByName from './common/entity/states_sort_by_name.js';
-import stateCardType from './common/entity/state_card_type.js';
-import stateIcon from './common/entity/state_icon.js';
-import stateMoreInfoType from './common/entity/state_more_info_type.js';
-import timerTimeRemaining from './common/entity/timer_time_remaining.js';
-
-const language = navigator.languages ?
-  navigator.languages[0] : navigator.language || navigator.userLanguage;
-
-fecha.masks.haDateTime = `${fecha.masks.shortTime} ${fecha.masks.mediumDate}`;
-
-window.hassUtil = {
-  // const
-  DEFAULT_ICON: DEFAULT_DOMAIN_ICON,
-  OFF_STATES: STATES_OFF,
-  DOMAINS_WITH_NO_HISTORY: DOMAINS_MORE_INFO_NO_HISTORY,
-
-  // config
-  computeLocationName,
-  isComponentLoaded,
-
-  // datetime
-  durationToSeconds,
-  formatDate: dateObj => formatDate(dateObj, language),
-  formatDateTime: dateObj => formatDateTime(dateObj, language),
-  formatTime: dateObj => formatTime(dateObj, language),
-  relativeTime,
-
-  // dom
-  applyThemesOnElement,
-  dynamicContentUpdater,
-
-  // entity
-  attributeClassNames,
-  binarySensorIcon,
-  canToggleDomain,
-  canToggleState,
-  computeDomain,
-  computeObjectId,
-  computeStateDisplay,
-  computeStateName,
-  coverIcon,
-  domainIcon,
-  featureClassNames,
-  secondsToDuration,
-  sensorIcon,
-  sortByName,
-  stateCardType,
-  stateIcon,
-  stateMoreInfoType,
-  timerTimeRemaining,
-};

package.json

@@ -10,7 +10,7 @@
     "clean": "rm -rf build/* build-temp/* build-es5/* build-temp-es5/* build-translations/*",
     "build": "script/build_frontend",
     "dev": "npm run gulp ru_all gen-service-worker",
-    "lint_js": "eslint src panels js hassio test-mocha",
+    "lint_js": "eslint src hassio test-mocha",
     "lint_html": "polymer lint",
     "mocha": "node_modules/.bin/mocha --opts test-mocha/mocha.opts",
     "test": "npm run lint_js && npm run lint_html && npm run mocha"

polymer.json

@@ -2,33 +2,33 @@
   "entrypoint": "index.html",
   "shell": "src/home-assistant.js",
   "fragments": [
-    "panels/config/ha-panel-config.js",
-    "panels/dev-event/ha-panel-dev-event.js",
-    "panels/dev-info/ha-panel-dev-info.js",
-    "panels/dev-mqtt/ha-panel-dev-mqtt.js",
-    "panels/dev-service/ha-panel-dev-service.js",
-    "panels/dev-state/ha-panel-dev-state.js",
-    "panels/dev-template/ha-panel-dev-template.js",
-    "panels/hassio/ha-panel-hassio.js",
-    "panels/history/ha-panel-history.js",
-    "panels/iframe/ha-panel-iframe.js",
-    "panels/kiosk/ha-panel-kiosk.js",
-    "panels/logbook/ha-panel-logbook.js",
-    "panels/map/ha-panel-map.js",
-    "panels/shopping-list/ha-panel-shopping-list.js",
-    "panels/mailbox/ha-panel-mailbox.js"
+    "src/panels/config/ha-panel-config.js",
+    "src/panels/dev-event/ha-panel-dev-event.js",
+    "src/panels/dev-info/ha-panel-dev-info.js",
+    "src/panels/dev-mqtt/ha-panel-dev-mqtt.js",
+    "src/panels/dev-service/ha-panel-dev-service.js",
+    "src/panels/dev-state/ha-panel-dev-state.js",
+    "src/panels/dev-template/ha-panel-dev-template.js",
+    "src/panels/hassio/ha-panel-hassio.js",
+    "src/panels/history/ha-panel-history.js",
+    "src/panels/iframe/ha-panel-iframe.js",
+    "src/panels/kiosk/ha-panel-kiosk.js",
+    "src/panels/logbook/ha-panel-logbook.js",
+    "src/panels/map/ha-panel-map.js",
+    "src/panels/shopping-list/ha-panel-shopping-list.js",
+    "src/panels/mailbox/ha-panel-mailbox.js"
   ],
   "sources": [
     "src/**/*",
-    "panels/**/*",
     "!src/translations/*"
   ],
   "lint": {
     "rules": ["polymer-3"],
+    "ignoreWarnings": ["could-not-resolve-reference"],
     "filesToIgnore": [
       "**/*.html",
+      "**/src/panels/config/js/**/*.js",
       "**/ha-paper-slider.js",
-      "**/hass-mixins.js",
       "**/ha-iconset-svg.js",
       "**/ha-script-editor.js",
       "**/ha-automation-editor.js"

src/auth/ha-auth-flow.js

@@ -2,12 +2,12 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '@polymer/paper-button/paper-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import '../components/ha-form.js';
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.EventsMixin
+ * @appliesMixin EventsMixin
  */
-class HaAuthFlow extends window.hassMixins.EventsMixin(PolymerElement) {
+class HaAuthFlow extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <template is="dom-if" if="[[_equals(_state, &quot;loading&quot;)]]">

src/auth/ha-pick-auth-provider.js

@@ -2,12 +2,12 @@ import '@polymer/paper-item/paper-item.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.EventsMixin
+ * @appliesMixin EventsMixin
  */
-class HaPickAuthProvider extends window.hassMixins.EventsMixin(PolymerElement) {
+class HaPickAuthProvider extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/cards/ha-camera-card.js

@@ -2,18 +2,18 @@ import '@polymer/paper-styles/element-styles/paper-material-styles.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
 
-import computeStateName from '../../js/common/entity/compute_state_name.js';
+import computeStateName from '../common/entity/compute_state_name.js';
+import EventsMixin from '../mixins/events-mixin.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
 
 {
   const UPDATE_INTERVAL = 10000; // ms
   /*
-   * @appliesMixin window.hassMixins.LocalizeMixin
-   * @appliesMixin window.hassMixins.EventsMixin
+   * @appliesMixin LocalizeMixin
+   * @appliesMixin EventsMixin
    */
-  class HaCameraCard extends
-    window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(PolymerElement)) {
+  class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     static get template() {
       return html`
     <style include="paper-material-styles">

src/cards/ha-card-chooser.js

@@ -8,7 +8,7 @@ import './ha-persistent_notification-card.js';
 import './ha-plant-card.js';
 import './ha-weather-card.js';
 
-import dynamicContentUpdater from '../../js/common/dom/dynamic_content_updater.js';
+import dynamicContentUpdater from '../common/dom/dynamic_content_updater.js';
 
 class HaCardChooser extends PolymerElement {
   static get properties() {

src/cards/ha-entities-card.js

@@ -5,15 +5,16 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '../components/entity/ha-entity-toggle.js';
 import '../components/ha-card.js';
 import '../state-summary/state-card-content.js';
-import '../util/hass-mixins.js';
 
-import computeStateDomain from '../../js/common/entity/compute_state_domain.js';
-import computeStateName from '../../js/common/entity/compute_state_name.js';
-import stateMoreInfoType from '../../js/common/entity/state_more_info_type.js';
-import canToggleState from '../../js/common/entity/can_toggle_state.js';
 
-class HaEntitiesCard extends
-  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(PolymerElement)) {
+import computeStateDomain from '../common/entity/compute_state_domain.js';
+import computeStateName from '../common/entity/compute_state_name.js';
+import stateMoreInfoType from '../common/entity/state_more_info_type.js';
+import canToggleState from '../common/entity/can_toggle_state.js';
+import EventsMixin from '../mixins/events-mixin.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
+class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style is="custom-style" include="iron-flex"></style>

src/cards/ha-history_graph-card.js

@@ -4,11 +4,15 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/state-history-charts.js';
 import '../data/ha-state-history-data.js';
-import '../util/hass-mixins.js';
 
-import computeStateName from '../../js/common/entity/compute_state_name.js';
 
-class HaHistoryGraphCard extends window.hassMixins.EventsMixin(PolymerElement) {
+import computeStateName from '../common/entity/compute_state_name.js';
+import EventsMixin from '../mixins/events-mixin.js';
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaHistoryGraphCard extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/cards/ha-media_player-card.js

@@ -6,16 +6,16 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../util/hass-media-player-model.js';
-import '../util/hass-mixins.js';
 
-import computeStateName from '../../js/common/entity/compute_state_name.js';
+import computeStateName from '../common/entity/compute_state_name.js';
+import EventsMixin from '../mixins/events-mixin.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.LocalizeMixin
- * @appliesMixin window.hassMixins.EventsMixin
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
  */
-class HaMediaPlayerCard extends
-  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(PolymerElement)) {
+class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="paper-material-styles iron-flex iron-flex-alignment iron-positioning">

src/cards/ha-persistent_notification-card.js

@@ -4,14 +4,15 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/ha-card.js';
 import '../components/ha-markdown.js';
-import '../util/hass-mixins.js';
 
-import computeStateName from '../../js/common/entity/compute_state_name.js';
+
+import computeStateName from '../common/entity/compute_state_name.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin LocalizeMixin
  */
-class HaPersistentNotificationCard extends window.hassMixins.LocalizeMixin(PolymerElement) {
+class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/cards/ha-plant-card.js

@@ -3,11 +3,11 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/ha-card.js';
-import '../util/hass-mixins.js';
 
-import computeStateName from '../../js/common/entity/compute_state_name.js';
+import computeStateName from '../common/entity/compute_state_name.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
-class HaPlantCard extends window.hassMixins.EventsMixin(PolymerElement) {
+class HaPlantCard extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/cards/ha-weather-card.js

@@ -3,13 +3,15 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/ha-card.js';
-import '../util/hass-mixins.js';
+
+import EventsMixin from '../mixins/events-mixin.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin LocalizeMixin
  */
 class HaWeatherCard extends
-  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(PolymerElement)) {
+  LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style>

src/components/buttons/ha-call-api-button.js

@@ -1,10 +1,14 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../util/hass-mixins.js';
-import './ha-progress-button.js';
 
-class HaCallApiButton extends window.hassMixins.EventsMixin(PolymerElement) {
+import './ha-progress-button.js';
+import EventsMixin from '../../mixins/events-mixin.js';
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaCallApiButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <ha-progress-button id="progress" progress="[[progress]]" on-click="buttonTapped" disabled="[[disabled]]"><slot></slot></ha-progress-button>

src/components/buttons/ha-call-service-button.js

@@ -1,10 +1,13 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../util/hass-mixins.js';
 import './ha-progress-button.js';
+import EventsMixin from '../../mixins/events-mixin.js';
 
-class HaCallServiceButton extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaCallServiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <ha-progress-button id="progress" progress="[[progress]]" on-click="buttonTapped"><slot></slot></ha-progress-button>

src/components/domain-icon.js

@@ -2,7 +2,7 @@ import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import domainIcon from '../../js/common/entity/domain_icon.js';
+import domainIcon from '../common/entity/domain_icon.js';
 
 class DomainIcon extends PolymerElement {
   static get template() {

src/components/entity/ha-chart-base.js

@@ -6,7 +6,7 @@ import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { timeOut } from '@polymer/polymer/lib/utils/async.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 
-import formatTime from '../../../js/common/datetime/format_time.js';
+import formatTime from '../../common/datetime/format_time.js';
 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
 

src/components/entity/ha-entity-picker.js

@@ -6,15 +6,16 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '@vaadin/vaadin-combo-box/vaadin-combo-box-light.js';
 
-import '../../util/hass-mixins.js';
+
 import './state-badge.js';
 
-import computeStateName from '../../../js/common/entity/compute_state_name.js';
+import computeStateName from '../../common/entity/compute_state_name.js';
+import LocalizeMixin from '../../mixins/localize-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin LocalizeMixin
  */
-class HaEntityPicker extends window.hassMixins.LocalizeMixin(PolymerElement) {
+class HaEntityPicker extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/components/entity/ha-entity-toggle.js

@@ -3,8 +3,8 @@ import '@polymer/paper-toggle-button/paper-toggle-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import { STATES_OFF } from '../../../js/common/const.js';
-import computeStateDomain from '../../../js/common/entity/compute_state_domain';
+import { STATES_OFF } from '../../common/const.js';
+import computeStateDomain from '../../common/entity/compute_state_domain';
 
 class HaEntityToggle extends PolymerElement {
   static get template() {

src/components/entity/ha-state-icon.js

@@ -2,7 +2,7 @@ import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import stateIcon from '../../../js/common/entity/state_icon.js';
+import stateIcon from '../../common/entity/state_icon.js';
 
 class HaStateIcon extends PolymerElement {
   static get template() {

src/components/entity/ha-state-label-badge.js

@@ -1,23 +1,26 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../util/hass-mixins.js';
+
 import '../ha-label-badge.js';
 
-import computeStateDomain from '../../../js/common/entity/compute_state_domain.js';
-import computeStateName from '../../../js/common/entity/compute_state_name.js';
-import domainIcon from '../../../js/common/entity/domain_icon.js';
-import stateIcon from '../../../js/common/entity/state_icon.js';
-import timerTimeRemaining from '../../../js/common/entity/timer_time_remaining.js';
-import attributeClassNames from '../../../js/common/entity/attribute_class_names.js';
-import secondsToDuration from '../../../js/common/datetime/seconds_to_duration.js';
+import computeStateDomain from '../../common/entity/compute_state_domain.js';
+import computeStateName from '../../common/entity/compute_state_name.js';
+import domainIcon from '../../common/entity/domain_icon.js';
+import stateIcon from '../../common/entity/state_icon.js';
+import timerTimeRemaining from '../../common/entity/timer_time_remaining.js';
+import attributeClassNames from '../../common/entity/attribute_class_names.js';
+import secondsToDuration from '../../common/datetime/seconds_to_duration.js';
+
+import EventsMixin from '../../mixins/events-mixin.js';
+import LocalizeMixin from '../../mixins/localize-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.LocalizeMixin
- * @appliesMixin window.hassMixins.EventsMixin
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin EventsMixin
  */
 class HaStateLabelBadge extends
-  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(PolymerElement)) {
+  LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style>

src/components/entity/state-badge.js

@@ -2,7 +2,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './ha-state-icon.js';
-import computeStateDomain from '../../../js/common/entity/compute_state_domain.js';
+import computeStateDomain from '../../common/entity/compute_state_domain.js';
 
 class StateBadge extends PolymerElement {
   static get template() {

src/components/entity/state-info.js

@@ -3,7 +3,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../ha-relative-time.js';
 import './state-badge.js';
-import computeStateName from '../../../js/common/entity/compute_state_name.js';
+import computeStateName from '../../common/entity/compute_state_name.js';
 
 class StateInfo extends PolymerElement {
   static get template() {

src/components/ha-cards.js

@@ -8,7 +8,7 @@ import '../cards/ha-badges-card.js';
 import '../cards/ha-card-chooser.js';
 import './ha-demo-badge.js';
 
-import computeStateDomain from '../../js/common/entity/compute_state_domain.js';
+import computeStateDomain from '../common/entity/compute_state_domain.js';
 
 {
   // mapping domain to size of the card.

src/components/ha-climate-control.js

@@ -3,9 +3,12 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
-class HaClimateControl extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaClimateControl extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>

src/components/ha-color-picker.js

@@ -1,12 +1,14 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
 /**
  * Color-picker custom element
+ *
+ * @appliesMixin EventsMixin
  */
-class HaColorPicker extends window.hassMixins.EventsMixin(PolymerElement) {
+class HaColorPicker extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/components/ha-form.js

@@ -6,10 +6,13 @@ import '@polymer/paper-listbox/paper-listbox.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
 import './ha-paper-slider.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
-class HaForm extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaForm extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/components/ha-markdown.js

@@ -1,12 +1,12 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
 let loaded = null;
 
 /*
- * @appliesMixin window.hassMixins.EventsMixin
+ * @appliesMixin EventsMixin
  */
-class HaMarkdown extends window.hassMixins.EventsMixin(PolymerElement) {
+class HaMarkdown extends EventsMixin(PolymerElement) {
   static get properties() {
     return {
       content: {

src/components/ha-menu-button.js

@@ -2,9 +2,12 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
-class HaMenuButton extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaMenuButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

src/components/ha-push-notifications-toggle.js

@@ -2,9 +2,12 @@ import '@polymer/paper-toggle-button/paper-toggle-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
-class HaPushNotificationsToggle extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaPushNotificationsToggle extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <paper-toggle-button hidden\$="[[!pushSupported]]" disabled="[[loading]]" checked="{{pushChecked}}"></paper-toggle-button>

src/components/ha-relative-time.js

@@ -1,7 +1,7 @@
 import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import relativeTime from '../../js/common/datetime/relative_time.js';
+import relativeTime from '../common/datetime/relative_time.js';
 
 class HaRelativeTime extends PolymerElement {
   static get properties() {

src/components/ha-service-picker.js

@@ -1,13 +1,15 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+
 import './ha-combo-box.js';
 
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
 /*
- * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin LocalizeMixin
  */
-class HaServicePicker extends window.hassMixins.LocalizeMixin(PolymerElement) {
+class HaServicePicker extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <ha-combo-box label="[[localize('ui.components.service-picker.service')]]" items="[[_services]]" value="{{value}}" allow-custom-value=""></ha-combo-box>

src/components/ha-sidebar.js

@@ -8,15 +8,17 @@ import '@polymer/paper-listbox/paper-listbox.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+
 import '../util/hass-translation.js';
+import NavigateMixin from '../mixins/navigate-mixin.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
 
 /*
- * @appliesMixin window.hassMixins.LocalizeMixin
- * @appliesMixin window.hassMixins.EventsMixin
+ * @appliesMixin LocalizeMixin
+ * @appliesMixin NavigateMixin
  */
 class HaSidebar extends
-  window.hassMixins.LocalizeMixin(window.hassMixins.NavigateMixin(PolymerElement)) {
+  LocalizeMixin(NavigateMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex iron-flex-alignment iron-positioning">

src/components/ha-start-voice-button.js

@@ -2,11 +2,14 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
+import EventsMixin from '../mixins/events-mixin.js';
 
-import isComponentLoaded from '../../js/common/config/is_component_loaded.js';
+import isComponentLoaded from '../common/config/is_component_loaded.js';
 
-class HaStartVoiceButton extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaStartVoiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <paper-icon-button icon="mdi:microphone" hidden\$="[[!canListen]]" on-click="handleListenClick"></paper-icon-button>

src/components/state-history-chart-line.js

@@ -4,7 +4,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './entity/ha-chart-base.js';
 
-import formatDateTime from '../../js/common/datetime/format_date_time.js';
+import formatDateTime from '../common/datetime/format_date_time.js';
 
 class StateHistoryChartLine extends PolymerElement {
   static get template() {

src/components/state-history-chart-timeline.js

@@ -4,7 +4,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './entity/ha-chart-base.js';
 
-import formatDateTime from '../../js/common/datetime/format_date_time';
+import formatDateTime from '../common/datetime/format_date_time';
 
 class StateHistoryChartTimeline extends PolymerElement {
   static get template() {

src/data/ha-state-history-data.js

@@ -2,11 +2,11 @@ import { timeOut } from '@polymer/polymer/lib/utils/async.js';
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-mixins.js';
 
-import computeStateName from '../../js/common/entity/compute_state_name.js';
-import computeStateDomain from '../../js/common/entity/compute_state_domain.js';
-import computeStateDisplay from '../../js/common/entity/compute_state_display.js';
+import computeStateName from '../common/entity/compute_state_name.js';
+import computeStateDomain from '../common/entity/compute_state_domain.js';
+import computeStateDisplay from '../common/entity/compute_state_display.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
 
 {
   const RECENT_THRESHOLD = 60000; // 1 minute
@@ -99,9 +99,9 @@ import computeStateDisplay from '../../js/common/entity/compute_state_display.js
   }
 
   /*
-   * @appliesMixin window.hassMixins.LocalizeMixin
+   * @appliesMixin LocalizeMixin
    */
-  class HaStateHistoryData extends window.hassMixins.LocalizeMixin(PolymerElement) {
+  class HaStateHistoryData extends LocalizeMixin(PolymerElement) {
     static get properties() {
       return {
         hass: {

src/dialogs/ha-more-info-dialog.js

@@ -4,14 +4,19 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../resources/ha-style.js';
-import '../util/hass-mixins.js';
+
 import './more-info/more-info-controls.js';
 import './more-info/more-info-settings.js';
 
-import computeStateDomain from '../../js/common/entity/compute_state_domain';
-import isComponentLoaded from '../../js/common/config/is_component_loaded.js';
+import computeStateDomain from '../common/entity/compute_state_domain';
+import isComponentLoaded from '../common/config/is_component_loaded.js';
 
-class HaMoreInfoDialog extends window.hassMixins.DialogMixin(PolymerElement) {
+import DialogMixin from '../mixins/dialog-mixin.js';
+
+/*
+ * @appliesMixin DialogMixin
+ */
+class HaMoreInfoDialog extends DialogMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style-dialog paper-dialog-shared-styles">

src/dialogs/ha-voice-command-dialog.js

@@ -4,7 +4,12 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-class HaVoiceCommandDialog extends window.hassMixins.DialogMixin(PolymerElement) {
+import DialogMixin from '../mixins/dialog-mixin.js';
+
+/*
+ * @appliesMixin DialogMixin
+ */
+class HaVoiceCommandDialog extends DialogMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="paper-dialog-shared-styles">

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

@@ -4,9 +4,12 @@ import '@polymer/paper-input/paper-input.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../../util/hass-mixins.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
 
-class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style is="custom-style" include="iron-flex"></style>

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

@@ -1,11 +1,13 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../../util/hass-mixins.js';
+import computeStateName from '../../../common/entity/compute_state_name.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
 
-import computeStateName from '../../../../js/common/entity/compute_state_name.js';
-
-class MoreInfoCamera extends window.hassMixins.EventsMixin(PolymerElement) {
+/*
+ * @appliesMixin EventsMixin
+ */
+class MoreInfoCamera extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>

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

@@ -10,12 +10,16 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/ha-climate-control.js';
 import '../../../components/ha-paper-slider.js';
-import '../../../util/hass-mixins.js';
 
-import attributeClassNames from '../../../../js/common/entity/attribute_class_names.js';
-import featureClassNames from '../../../../js/common/entity/feature_class_names';
 
-class MoreInfoClimate extends window.hassMixins.EventsMixin(PolymerElement) {
+import attributeClassNames from '../../../common/entity/attribute_class_names.js';
+import featureClassNames from '../../../common/entity/feature_class_names';
+import EventsMixin from '../../../mixins/events-mixin.js';
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class MoreInfoClimate extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style is="custom-style" include="iron-flex"></style>

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

@@ -20,8 +20,8 @@ import './more-info-updater.js';
 import './more-info-vacuum.js';
 import './more-info-weather.js';
 
-import stateMoreInfoType from '../../../../js/common/entity/state_more_info_type.js';
-import dynamicContentUpdater from '../../../../js/common/dom/dynamic_content_updater.js';
+import stateMoreInfoType from '../../../common/entity/state_more_info_type.js';
+import dynamicContentUpdater from '../../../common/dom/dynamic_content_updater.js';
 
 class MoreInfoContent extends PolymerElement {
   static get properties() {

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

@@ -7,8 +7,8 @@ import '../../../components/ha-cover-tilt-controls.js';
 import '../../../components/ha-paper-slider.js';
 import '../../../util/cover-model.js';
 
-import attributeClassNames from '../../../../js/common/entity/attribute_class_names';
-import featureClassNames from '../../../../js/common/entity/feature_class_names';
+import attributeClassNames from '../../../common/entity/attribute_class_names';
+import featureClassNames from '../../../common/entity/feature_class_names';
 
 {
   const FEATURE_CLASS_NAMES = {

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

@@ -8,11 +8,15 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/ha-attributes.js';
-import '../../../util/hass-mixins.js';
 
-import attributeClassNames from '../../../../js/common/entity/attribute_class_names';
 
-class MoreInfoFan extends window.hassMixins.EventsMixin(PolymerElement) {
+import attributeClassNames from '../../../common/entity/attribute_class_names';
+import EventsMixin from '../../../mixins/events-mixin.js';
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class MoreInfoFan extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style is="custom-style" include="iron-flex"></style>

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

@@ -4,9 +4,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../state-summary/state-card-content.js';
 
-import computeStateDomain from '../../../../js/common/entity/compute_state_domain';
-import dynamicContentUpdater from '../../../../js/common/dom/dynamic_content_updater.js';
-import stateMoreInfoType from '../../../../js/common/entity/state_more_info_type.js';
+import computeStateDomain from '../../../common/entity/compute_state_domain';
+import dynamicContentUpdater from '../../../common/dom/dynamic_content_updater.js';
+import stateMoreInfoType from '../../../common/entity/state_more_info_type.js';
 
 class MoreInfoGroup extends PolymerElement {
   static get template() {

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

@@ -7,7 +7,7 @@ import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
 
 import '../../../components/ha-relative-time.js';
 
-import attributeClassNames from '../../../../js/common/entity/attribute_class_names.js';
+import attributeClassNames from '../../../common/entity/attribute_class_names.js';
 
 class DatetimeInput extends PolymerElement {
   static get template() {

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

@@ -8,9 +8,10 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '../../../components/ha-attributes.js';
 import '../../../components/ha-color-picker.js';
 import '../../../components/ha-labeled-slider.js';
-import '../../../util/hass-mixins.js';
 
-import featureClassNames from '../../../../js/common/entity/feature_class_names';
+
+import featureClassNames from '../../../common/entity/feature_class_names';
+import EventsMixin from '../../../mixins/events-mixin.js';
 
 {
   const FEATURE_CLASS_NAMES = {
@@ -20,7 +21,10 @@ import featureClassNames from '../../../../js/common/entity/feature_class_names'
     16: 'has-color',
     128: 'has-white_value',
   };
-  class MoreInfoLight extends window.hassMixins.EventsMixin(PolymerElement) {
+  /*
+   * @appliesMixin EventsMixin
+   */
+  class MoreInfoLight extends EventsMixin(PolymerElement) {
     static get template() {
       return html`
     <style is="custom-style" include="iron-flex"></style>

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

@@ -9,13 +9,17 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/ha-paper-slider.js';
 import '../../../util/hass-media-player-model.js';
-import '../../../util/hass-mixins.js';
 
-import attributeClassNames from '../../../../js/common/entity/attribute_class_names';
-import isComponentLoaded from '../../../../js/common/config/is_component_loaded.js';
+
+import attributeClassNames from '../../../common/entity/attribute_class_names';
+import isComponentLoaded from '../../../common/config/is_component_loaded.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
 
 {
-  class MoreInfoMediaPlayer extends window.hassMixins.EventsMixin(PolymerElement) {
+  /*
+   * @appliesMixin EventsMixin
+   */
+  class MoreInfoMediaPlayer extends EventsMixin(PolymerElement) {
     static get template() {
       return html`
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>