P3: Replace hassUtil with imports (#1181)

* P3: Remove get is()

* P3: Replace hassUtil with imports

* Remove hass-util imports

* Fix errors

hassio/hassio-main.js

@@ -3,11 +3,12 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../src/layouts/hass-loading-screen.js';
-import '../src/util/hass-util.js';
 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';
+
 class HassioMain extends window.hassMixins.EventsMixin(PolymerElement) {
   static get template() {
     return html`
@@ -57,7 +58,7 @@ class HassioMain extends window.hassMixins.EventsMixin(PolymerElement) {
 
   ready() {
     super.ready();
-    window.hassUtil.applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
+    applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
     this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
   }
 

panels/config/automation/ha-automation-editor.js

@@ -24,8 +24,10 @@ import '../../../src/components/ha-service-picker.js';
 import '../../../src/layouts/ha-app-layout.js';
 import '../../../src/util/hass-mixins.js';
 import '../ha-config-section.js';
+
 import Automation from '../../../js/panel-config/automation.js';
 import unmountPreact from '../../../js/common/preact/unmount.js';
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
 
 function AutomationEditor(mountEl, props, mergeEl) {
   return render(h(Automation, props), mountEl, mergeEl);
@@ -282,7 +284,7 @@ class HaAutomationEditor extends
 
   computeName(automation, localize) {
     return automation
-      ? window.hassUtil.computeStateName(automation)
+      ? computeStateName(automation)
       : localize('ui.panel.config.automation.editor.default_name');
   }
 }

panels/config/automation/ha-automation-picker.js

@@ -13,6 +13,7 @@ import '../../../src/layouts/ha-app-layout.js';
 import '../../../src/util/hass-mixins.js';
 import '../ha-config-section.js';
 
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  * @appliesMixin window.hassMixins.EventsMixin
@@ -122,7 +123,7 @@ class HaAutomationPicker extends
   }
 
   computeName(automation) {
-    return window.hassUtil.computeStateName(automation);
+    return computeStateName(automation);
   }
 
   // Still thinking of something to add here.

panels/config/automation/ha-config-automation.js

@@ -5,6 +5,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import './ha-automation-editor.js';
 import './ha-automation-picker.js';
 
+import computeDomain from '../../../js/common/entity/compute_domain.js';
+
 class HaConfigAutomation extends PolymerElement {
   static get template() {
     return html`
@@ -74,7 +76,7 @@ class HaConfigAutomation extends PolymerElement {
     Object.keys(hass.states).forEach(function (key) {
       var entity = hass.states[key];
 
-      if (window.hassUtil.computeDomain(entity) === 'automation' &&
+      if (computeDomain(entity) === 'automation' &&
           'id' in entity.attributes) {
         automations.push(entity);
       }

panels/config/cloud/ha-config-cloud-account.js

@@ -10,6 +10,8 @@ import '../../../src/resources/ha-style.js';
 import '../../../src/util/hass-mixins.js';
 import '../ha-config-section.js';
 
+import formatDateTime from '../../../js/common/datetime/format_date_time.js';
+
 class HaConfigCloudAccount extends window.hassMixins.EventsMixin(PolymerElement) {
   static get template() {
     return html`
@@ -148,7 +150,7 @@ class HaConfigCloudAccount extends window.hassMixins.EventsMixin(PolymerElement)
   }
 
   _formatExpiration(date) {
-    return window.hassUtil.formatDateTime(new Date(date));
+    return formatDateTime(new Date(date));
   }
 
   _accountChanged(newAccount) {

panels/config/core/ha-config-core.js

@@ -12,6 +12,8 @@ import './ha-config-section-push-notifications.js';
 import './ha-config-section-themes.js';
 import './ha-config-section-translation.js';
 
+import isComponentLoaded from '../../../js/common/config/is_component_loaded.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -80,7 +82,7 @@ class HaConfigCore extends window.hassMixins.LocalizeMixin(PolymerElement) {
   }
 
   computeIsZwaveLoaded(hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
+    return isComponentLoaded(hass, 'config.zwave');
   }
 
   computeIsTranslationLoaded(hass) {

panels/config/core/ha-config-section-core.js

@@ -9,6 +9,8 @@ import '../../../src/resources/ha-style.js';
 import '../../../src/util/hass-mixins.js';
 import '../ha-config-section.js';
 
+import isComponentLoaded from '../../../js/common/config/is_component_loaded.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -144,15 +146,15 @@ class HaConfigSectionCore extends window.hassMixins.LocalizeMixin(PolymerElement
   }
 
   groupLoaded(hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'group');
+    return isComponentLoaded(hass, 'group');
   }
 
   automationLoaded(hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'automation');
+    return isComponentLoaded(hass, 'automation');
   }
 
   scriptLoaded(hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'script');
+    return isComponentLoaded(hass, 'script');
   }
 
   validateConfig() {

panels/config/customize/ha-config-customize.js

@@ -7,11 +7,14 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../src/resources/ha-style.js';
 import '../../../src/util/hass-mixins.js';
-import '../../../src/util/hass-util.js';
 import '../ha-config-section.js';
 import '../ha-entity-config.js';
 import './ha-form-customize.js';
 
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+import computeDomain from '../../../js/common/entity/compute_domain.js';
+import sortByName from '../../../js/common/entity/states_sort_by_name.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -59,7 +62,7 @@ class HaConfigCustomize extends window.hassMixins.LocalizeMixin(PolymerElement)
         value: {
           component: 'ha-form-customize',
           computeSelectCaption: stateObj =>
-            window.hassUtil.computeStateName(stateObj) + ' (' + window.hassUtil.computeDomain(stateObj) + ')'
+            computeStateName(stateObj) + ' (' + computeDomain(stateObj) + ')'
         }
       },
     };
@@ -76,7 +79,7 @@ class HaConfigCustomize extends window.hassMixins.LocalizeMixin(PolymerElement)
   computeEntities(hass) {
     return Object.keys(hass.states)
       .map(key => hass.states[key])
-      .sort(window.hassUtil.sortByName);
+      .sort(sortByName);
   }
 }
 customElements.define('ha-config-customize', HaConfigCustomize);

panels/config/customize/ha-form-customize.js

@@ -5,9 +5,10 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../src/util/hass-attributes-util.js';
-import '../../../src/util/hass-util.js';
 import './ha-form-customize-attributes.js';
 
+import computeDomain from '../../../js/common/entity/compute_domain';
+
 class HaFormCustomize extends PolymerElement {
   static get template() {
     return html`
@@ -119,7 +120,7 @@ class HaFormCustomize extends PolymerElement {
       attribute: key,
       value: value,
       closed: false,
-      domain: window.hassUtil.computeDomain(this.entity),
+      domain: computeDomain(this.entity),
       secondary: secondary,
       description: key,
     }, config);
@@ -199,7 +200,7 @@ class HaFormCustomize extends PolymerElement {
           .filter((key) => {
             const conf = window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES[key];
             return conf && (!conf.domains || !this.entity ||
-                              conf.domains.includes(window.hassUtil.computeDomain(this.entity)));
+                              conf.domains.includes(computeDomain(this.entity)));
           })
           .filter(this.filterFromAttributes(localAttributes))
           .filter(this.filterFromAttributes(globalAttributes))

panels/config/dashboard/ha-config-dashboard.js

@@ -11,6 +11,8 @@ import './ha-config-cloud-menu.js';
 import './ha-config-entries-menu.js';
 import './ha-config-navigation.js';
 
+import isComponentLoaded from '../../../js/common/config/is_component_loaded.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -62,7 +64,7 @@ class HaConfigDashboard extends window.hassMixins.LocalizeMixin(PolymerElement)
   }
 
   computeIsLoaded(hass, component) {
-    return window.hassUtil.isComponentLoaded(hass, component);
+    return isComponentLoaded(hass, component);
   }
 }
 

panels/config/dashboard/ha-config-navigation.js

@@ -7,6 +7,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../src/util/hass-mixins.js';
 
+import isComponentLoaded from '../../../js/common/config/is_component_loaded.js';
+
 {
   const CORE_PAGES = [
     'core',
@@ -64,7 +66,7 @@ import '../../../src/util/hass-mixins.js';
     }
 
     _computeLoaded(hass, page) {
-      return CORE_PAGES.includes(page) || window.hassUtil.isComponentLoaded(hass, page);
+      return CORE_PAGES.includes(page) || isComponentLoaded(hass, page);
     }
 
     _computeCaption(page, localize) {

panels/config/ha-entity-config.js

@@ -7,6 +7,8 @@ import '@polymer/paper-spinner/paper-spinner.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+import computeStateName from '../../js/common/entity/compute_state_name.js';
+
 class HaEntityConfig extends PolymerElement {
   static get template() {
     return html`
@@ -125,7 +127,7 @@ class HaEntityConfig extends PolymerElement {
   computeSelectCaption(stateObj) {
     return this.config.computeSelectCaption ?
       this.config.computeSelectCaption(stateObj) :
-      window.hassUtil.computeStateName(stateObj);
+      computeStateName(stateObj);
   }
 
   computeShowNoDevices(formState) {

panels/config/ha-panel-config.js

@@ -14,6 +14,7 @@ import './dashboard/ha-config-dashboard.js';
 import './script/ha-config-script.js';
 import './zwave/ha-config-zwave.js';
 
+import isComponentLoaded from '../../js/common/config/is_component_loaded.js';
 
 class HaPanelConfig extends window.hassMixins.NavigateMixin(PolymerElement) {
   static get template() {
@@ -128,7 +129,7 @@ class HaPanelConfig extends window.hassMixins.NavigateMixin(PolymerElement) {
 
   ready() {
     super.ready();
-    if (window.hassUtil.isComponentLoaded(this.hass, 'cloud')) {
+    if (isComponentLoaded(this.hass, 'cloud')) {
       this.hass.callApi('get', 'cloud/account').then((account) => { this.account = account; });
     }
     this.addEventListener('ha-account-refreshed', (ev) => {

panels/config/script/ha-config-script.js

@@ -5,6 +5,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import './ha-script-editor.js';
 import './ha-script-picker.js';
 
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+import computeDomain from '../../../js/common/entity/compute_domain.js';
+
 class HaConfigScript extends PolymerElement {
   static get template() {
     return html`
@@ -74,14 +77,14 @@ class HaConfigScript extends PolymerElement {
     Object.keys(hass.states).forEach(function (key) {
       var entity = hass.states[key];
 
-      if (window.hassUtil.computeDomain(entity) === 'script') {
+      if (computeDomain(entity) === 'script') {
         scripts.push(entity);
       }
     });
 
     return scripts.sort(function entitySortBy(entityA, entityB) {
-      var nameA = window.hassUtil.computeStateName(entityA);
+      var nameA = computeStateName(entityA);
-      var nameB = window.hassUtil.computeStateName(entityB);
+      var nameB = computeStateName(entityB);
 
       if (nameA < nameB) {
         return -1;

panels/config/script/ha-script-editor.js

@@ -25,6 +25,9 @@ import '../ha-config-section.js';
 import Script from '../../../js/panel-config/script.js';
 import unmountPreact from '../../../js/common/preact/unmount.js';
 
+import computeObjectId from '../../../js/common/entity/compute_object_id.js';
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+
 function ScriptEditor(mountEl, props, mergeEl) {
   return render(h(Script, props), mountEl, mergeEl);
 }
@@ -202,7 +205,7 @@ class HaScriptEditor extends
     if (oldVal && oldVal.entity_id === newVal.entity_id) {
       return;
     }
-    this.hass.callApi('get', 'config/script/config/' + window.hassUtil.computeObjectId(newVal.entity_id))
+    this.hass.callApi('get', 'config/script/config/' + computeObjectId(newVal.entity_id))
       .then((config) => {
         // Normalize data: ensure sequence is a list
         // Happens when people copy paste their scripts into the config
@@ -260,7 +263,7 @@ class HaScriptEditor extends
 
   saveScript() {
     var id = this.creatingNew ?
-      '' + Date.now() : window.hassUtil.computeObjectId(this.script.entity_id);
+      '' + Date.now() : computeObjectId(this.script.entity_id);
     this.hass.callApi('post', 'config/script/config/' + id, this.config).then(() => {
       this.dirty = false;
 
@@ -274,7 +277,7 @@ class HaScriptEditor extends
   }
 
   computeName(script) {
-    return script && window.hassUtil.computeStateName(script);
+    return script && computeStateName(script);
   }
 }
 

panels/config/script/ha-script-picker.js

@@ -12,6 +12,8 @@ import '../../../src/layouts/ha-app-layout.js';
 import '../../../src/util/hass-mixins.js';
 import '../ha-config-section.js';
 
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  * @appliesMixin window.hassMixins.EventsMixin
@@ -118,7 +120,7 @@ class HaScriptPicker extends
   }
 
   computeName(script) {
-    return window.hassUtil.computeStateName(script);
+    return computeStateName(script);
   }
 
   // Still thinking of something to add here.

panels/config/zwave/ha-config-zwave.js

@@ -25,6 +25,9 @@ import './zwave-node-information.js';
 import './zwave-usercodes.js';
 import './zwave-values.js';
 
+import sortByName from '../../../js/common/entity/states_sort_by_name.js';
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+import computeDomain from '../../../js/common/entity/compute_domain.js';
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -310,7 +313,7 @@ class HaConfigZwave extends window.hassMixins.LocalizeMixin(PolymerElement) {
       .filter(function (ent) {
         return ((ent.entity_id).match('zwave[.]'));
       })
-      .sort(window.hassUtil.sortByName);
+      .sort(sortByName);
   }
 
   computeEntities(selectedNode) {
@@ -328,7 +331,7 @@ class HaConfigZwave extends window.hassMixins.LocalizeMixin(PolymerElement) {
                 ent.attributes.node_id === nodeid &&
                 (!(ent.entity_id).match('zwave[.]')));
       })
-      .sort(window.hassUtil.sortByName);
+      .sort(sortByName);
   }
 
   selectedNodeChanged(selectedNode) {
@@ -388,14 +391,14 @@ class HaConfigZwave extends window.hassMixins.LocalizeMixin(PolymerElement) {
   }
 
   computeSelectCaption(stateObj) {
-    return window.hassUtil.computeStateName(stateObj) + ' (Node:' +
+    return computeStateName(stateObj) + ' (Node:' +
       stateObj.attributes.node_id + ' ' +
       stateObj.attributes.query_stage + ')';
   }
 
   computeSelectCaptionEnt(stateObj) {
-    return (window.hassUtil.computeDomain(stateObj) + '.'
+    return (computeDomain(stateObj) + '.'
-            + window.hassUtil.computeStateName(stateObj));
+            + computeStateName(stateObj));
   }
 
   computeIsNodeSelected() {

panels/config/zwave/zwave-groups.js

@@ -7,6 +7,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../src/components/buttons/ha-call-service-button.js';
 
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+
 class ZwaveGroups extends PolymerElement {
   static get template() {
     return html`
@@ -188,7 +190,7 @@ class ZwaveGroups extends PolymerElement {
   }
 
   computeSelectCaption(stateObj) {
-    return window.hassUtil.computeStateName(stateObj) + ' (Node:' +
+    return computeStateName(stateObj) + ' (Node:' +
       stateObj.attributes.node_id + ' ' +
       stateObj.attributes.query_stage + ')';
   }

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

@@ -14,6 +14,9 @@ import '../../src/components/buttons/ha-call-service-button.js';
 import '../../src/components/ha-menu-button.js';
 import '../../src/resources/ha-style.js';
 
+import formatDateTime from '../../js/common/datetime/format_date_time.js';
+import formatTime from '../../js/common/datetime/format_time.js';
+
 class HaPanelDevInfo extends PolymerElement {
   static get template() {
     return html`
@@ -311,7 +314,7 @@ class HaPanelDevInfo extends PolymerElement {
     const dateTimeDay = new Date(date * 1000).setHours(0, 0, 0, 0);
 
     return dateTimeDay < today ?
-      window.hassUtil.formatDateTime(dateTime) : window.hassUtil.formatTime(dateTime);
+      formatDateTime(dateTime) : formatTime(dateTime);
   }
 
   openLog(event) {

panels/history/ha-panel-history.js

@@ -17,6 +17,8 @@ import '../../src/resources/ha-date-picker-style.js';
 import '../../src/resources/ha-style.js';
 import '../../src/util/hass-mixins.js';
 
+import formatDate from '../../js/common/datetime/format_date.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -156,7 +158,7 @@ class HaPanelHistory extends window.hassMixins.LocalizeMixin(PolymerElement) {
     // We are unable to parse date because we use intl api to render date
     this.$.picker.set('i18n.parseDate', null);
     this.$.picker.set('i18n.formatDate', function (date) {
-      return window.hassUtil.formatDate(new Date(date.year, date.month, date.day));
+      return formatDate(new Date(date.year, date.month, date.day));
     });
   }
 

panels/logbook/ha-logbook.js

@@ -5,6 +5,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '../../src/components/domain-icon.js';
 import '../../src/util/hass-mixins.js';
 
+import formatTime from '../../js/common/datetime/format_time.js';
+
 class HaLogbook extends window.hassMixins.EventsMixin(PolymerElement) {
   static get template() {
     return html`
@@ -45,7 +47,7 @@ class HaLogbook extends window.hassMixins.EventsMixin(PolymerElement) {
 
     <template is="dom-repeat" items="[[entries]]">
       <div class="horizontal layout entry">
-        <div class="time">[[formatTime(item.when)]]</div>
+        <div class="time">[[_formatTime(item.when)]]</div>
         <domain-icon domain="[[item.domain]]" class="icon"></domain-icon>
         <div class="message" flex="">
           <template is="dom-if" if="[[!item.entity_id]]">
@@ -75,8 +77,8 @@ class HaLogbook extends window.hassMixins.EventsMixin(PolymerElement) {
     };
   }
 
-  formatTime(date) {
+  _formatTime(date) {
-    return window.hassUtil.formatTime(new Date(date));
+    return formatTime(new Date(date));
   }
 
   entityClicked(ev) {

panels/logbook/ha-panel-logbook.js

@@ -15,6 +15,8 @@ import '../../src/util/hass-mixins.js';
 import './ha-logbook-data.js';
 import './ha-logbook.js';
 
+import formatDate from '../../js/common/datetime/format_date.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -132,7 +134,7 @@ class HaPanelLogbook extends window.hassMixins.LocalizeMixin(PolymerElement) {
     // We are unable to parse date because we use intl api to render date
     this.$.picker.set('i18n.parseDate', null);
     this.$.picker.set('i18n.formatDate', function (date) {
-      return window.hassUtil.formatDate(new Date(date.year, date.month, date.day));
+      return formatDate(new Date(date.year, date.month, date.day));
     });
   }
 

panels/mailbox/ha-panel-mailbox.js

@@ -14,6 +14,8 @@ import '../../src/components/ha-menu-button.js';
 import '../../src/resources/ha-style.js';
 import '../../src/util/hass-mixins.js';
 
+import formatDateTime from '../../js/common/datetime/format_date_time.js';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -234,7 +236,7 @@ class HaPanelMailbox extends window.hassMixins.LocalizeMixin(PolymerElement) {
         var platformItems = [];
         var arrayLength = values.length;
         for (var i = 0; i < arrayLength; i++) {
-          var datetime = window.hassUtil.formatDateTime(new Date(values[i].info.origtime * 1000));
+          var datetime = formatDateTime(new Date(values[i].info.origtime * 1000));
           platformItems.push({
             timestamp: datetime,
             caller: values[i].info.callerid,

panels/map/ha-panel-map.js

@@ -8,6 +8,9 @@ import '../../src/components/ha-menu-button.js';
 import '../../src/util/hass-mixins.js';
 import './ha-entity-marker.js';
 
+import computeDomain from '../../js/common/entity/compute_domain.js';
+import computeStateName from '../../js/common/entity/compute_state_name.js';
+
 Leaflet.Icon.Default.imagePath = '/static/images/leaflet';
 
 /*
@@ -103,10 +106,10 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
 
     Object.keys(hass.states).forEach(function (entityId) {
       var entity = hass.states[entityId];
-      var title = window.hassUtil.computeStateName(entity);
+      var title = computeStateName(entity);
 
       if ((entity.attributes.hidden &&
-           window.hassUtil.computeDomain(entity) !== 'zone') ||
+          computeDomain(entity) !== 'zone') ||
           entity.state === 'home' ||
           !('latitude' in entity.attributes) ||
           !('longitude' in entity.attributes)) {
@@ -115,7 +118,7 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
 
       var icon;
 
-      if (window.hassUtil.computeDomain(entity) === 'zone') {
+      if (computeDomain(entity) === 'zone') {
         // DRAW ZONE
         if (entity.attributes.passive) return;
 
@@ -174,7 +177,7 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
         [entity.attributes.latitude, entity.attributes.longitude],
         {
           icon: icon,
-          title: window.hassUtil.computeStateName(entity),
+          title: computeStateName(entity),
         }
       ).addTo(map));
 

src/cards/ha-camera-card.js

@@ -4,6 +4,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../util/hass-mixins.js';
 
+import computeStateName from '../../js/common/entity/compute_state_name.js';
+
 {
   const UPDATE_INTERVAL = 10000; // ms
   /*
@@ -49,7 +51,7 @@ import '../util/hass-mixins.js';
       }
     </style>
 
-    <img src="[[cameraFeedSrc]]" class="camera-feed" hidden\$="[[!imageLoaded]]" alt="[[computeStateName(stateObj)]]">
+    <img src="[[cameraFeedSrc]]" class="camera-feed" hidden\$="[[!imageLoaded]]" alt="[[_computeStateName(stateObj)]]">
     <div class="caption">
       [[computeStateName(stateObj)]]
       <template is="dom-if" if="[[!imageLoaded]]">
@@ -109,8 +111,8 @@ import '../util/hass-mixins.js';
       });
     }
 
-    computeStateName(stateObj) {
+    _computeStateName(stateObj) {
-      return window.hassUtil.computeStateName(stateObj);
+      return computeStateName(stateObj);
     }
   }
   customElements.define('ha-camera-card', HaCameraCard);

src/cards/ha-card-chooser.js

@@ -8,6 +8,8 @@ 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';
+
 class HaCardChooser extends PolymerElement {
   static get properties() {
     return {
@@ -19,7 +21,7 @@ class HaCardChooser extends PolymerElement {
   }
 
   _updateCard(newData) {
-    window.hassUtil.dynamicContentUpdater(
+    dynamicContentUpdater(
       this, 'HA-' + newData.cardType.toUpperCase() + '-CARD',
       newData
     );

src/cards/ha-entities-card.js

@@ -7,6 +7,11 @@ import '../components/ha-card.js';
 import '../state-summary/state-card-content.js';
 import '../util/hass-mixins.js';
 
+import computeDomain from '../../js/common/entity/compute_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)) {
   static get template() {
@@ -79,9 +84,9 @@ class HaEntitiesCard extends
 
   computeTitle(states, groupEntity, localize) {
     if (groupEntity) {
-      return window.hassUtil.computeStateName(groupEntity).trim();
+      return computeStateName(groupEntity).trim();
     }
-    const domain = window.hassUtil.computeDomain(states[0]);
+    const domain = computeDomain(states[0]);
     return (localize && localize(`domain.${domain}`)) || domain.replace(/_/g, ' ');
   }
 
@@ -94,7 +99,7 @@ class HaEntitiesCard extends
   }
 
   computeStateClass(stateObj) {
-    return window.hassUtil.stateMoreInfoType(stateObj) !== 'hidden' ? 'state more-info' : 'state';
+    return stateMoreInfoType(stateObj) !== 'hidden' ? 'state more-info' : 'state';
   }
 
   addTapEvents() {
@@ -133,7 +138,7 @@ class HaEntitiesCard extends
     // Only show if we can toggle 2+ entities in group
     let canToggleCount = 0;
     for (let i = 0; i < states.length; i++) {
-      if (!window.hassUtil.canToggleState(this.hass, states[i])) {
+      if (!canToggleState(this.hass, states[i])) {
         continue;
       }
 

src/cards/ha-history_graph-card.js

@@ -6,6 +6,8 @@ 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) {
   static get template() {
     return html`
@@ -82,7 +84,7 @@ class HaHistoryGraphCard extends window.hassMixins.EventsMixin(PolymerElement) {
   }
 
   computeTitle(stateObj) {
-    return window.hassUtil.computeStateName(stateObj);
+    return computeStateName(stateObj);
   }
 
   computeContentClass(inDialog) {

src/cards/ha-media_player-card.js

@@ -8,6 +8,8 @@ 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';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  * @appliesMixin window.hassMixins.EventsMixin
@@ -158,7 +160,7 @@ class HaMediaPlayerCard extends
       <div class="cover" id="cover"></div>
 
       <div class="caption">
-        [[computeStateName(stateObj)]]
+        [[_computeStateName(stateObj)]]
         <div class="title">[[computePrimaryText(localize, playerObj)]]</div>
         [[playerObj.secondaryTitle]]<br>
       </div>
@@ -277,8 +279,8 @@ class HaMediaPlayerCard extends
     return '';
   }
 
-  computeStateName(stateObj) {
+  _computeStateName(stateObj) {
-    return window.hassUtil.computeStateName(stateObj);
+    return computeStateName(stateObj);
   }
 
   handleNext(ev) {

src/cards/ha-persistent_notification-card.js

@@ -6,6 +6,8 @@ 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';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -57,7 +59,7 @@ class HaPersistentNotificationCard extends window.hassMixins.LocalizeMixin(Polym
 
   computeTitle(stateObj) {
     return (stateObj.attributes.title ||
-            window.hassUtil.computeStateName(stateObj));
+            computeStateName(stateObj));
   }
 
   dismissTap(ev) {

src/cards/ha-plant-card.js

@@ -5,6 +5,8 @@ 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';
+
 class HaPlantCard extends window.hassMixins.EventsMixin(PolymerElement) {
   static get template() {
     return html`
@@ -68,7 +70,7 @@ class HaPlantCard extends window.hassMixins.EventsMixin(PolymerElement) {
   }
 
   computeTitle(stateObj) {
-    return window.hassUtil.computeStateName(stateObj);
+    return computeStateName(stateObj);
   }
 
   computeAttributes(data) {

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

@@ -5,6 +5,8 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 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';
 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
 
@@ -314,7 +316,7 @@ class HaChartBase extends mixinBehaviors([
       return value;
     }
     const date = new Date(values[index].value);
-    return window.hassUtil.formatTime(date);
+    return formatTime(date);
   }
   drawChart() {
     const data = this.data.data;

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

@@ -9,6 +9,8 @@ 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';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
@@ -40,7 +42,7 @@ class HaEntityPicker extends window.hassMixins.LocalizeMixin(PolymerElement) {
         <paper-icon-item>
           <state-badge state-obj="[[item]]" slot="item-icon"></state-badge>
           <paper-item-body two-line="">
-            <div>[[computeStateName(item)]]</div>
+            <div>[[_computeStateName(item)]]</div>
             <div secondary="">[[item.entity_id]]</div>
           </paper-item-body>
         </paper-icon-item>
@@ -113,8 +115,8 @@ class HaEntityPicker extends window.hassMixins.LocalizeMixin(PolymerElement) {
     return entities;
   }
 
-  computeStateName(state) {
+  _computeStateName(state) {
-    return window.hassUtil.computeStateName(state);
+    return computeStateName(state);
   }
 
   _openedChanged(newVal) {

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

@@ -3,6 +3,9 @@ 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 computeDomain from '../../../js/common/entity/compute_domain';
+
 class HaEntityToggle extends PolymerElement {
   static get template() {
     return html`
@@ -97,7 +100,7 @@ class HaEntityToggle extends PolymerElement {
   }
 
   computeIsOn(stateObj) {
-    return stateObj && !window.hassUtil.OFF_STATES.includes(stateObj.state);
+    return stateObj && !STATES_OFF.includes(stateObj.state);
   }
 
   stateObjObserver(newVal, oldVal) {
@@ -113,7 +116,7 @@ class HaEntityToggle extends PolymerElement {
   // result in the entity to be turned on. Since the state is not changing,
   // the resync is not called automatic.
   callService(turnOn) {
-    const stateDomain = window.hassUtil.computeDomain(this.stateObj);
+    const stateDomain = computeDomain(this.stateObj);
     let serviceDomain;
     let service;
 

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

@@ -2,9 +2,16 @@ 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-util.js';
 import '../ha-label-badge.js';
 
+import computeDomain from '../../../js/common/entity/compute_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';
+
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  * @appliesMixin window.hassMixins.EventsMixin
@@ -51,7 +58,7 @@ class HaStateLabelBadge extends
       }
     </style>
 
-    <ha-label-badge class\$="[[computeClassNames(state)]]" value="[[computeValue(localize, state)]]" icon="[[computeIcon(state)]]" image="[[computeImage(state)]]" label="[[computeLabel(localize, state, timerTimeRemaining)]]" description="[[computeDescription(state)]]"></ha-label-badge>
+    <ha-label-badge class\$="[[computeClassNames(state)]]" value="[[computeValue(localize, state)]]" icon="[[computeIcon(state)]]" image="[[computeImage(state)]]" label="[[computeLabel(localize, state, _timerTimeRemaining)]]" description="[[computeDescription(state)]]"></ha-label-badge>
 `;
   }
 
@@ -62,7 +69,7 @@ class HaStateLabelBadge extends
         type: Object,
         observer: 'stateChanged',
       },
-      timerTimeRemaining: {
+      _timerTimeRemaining: {
         type: Number,
         value: 0,
       }
@@ -90,13 +97,13 @@ class HaStateLabelBadge extends
   }
 
   computeClassNames(state) {
-    const classes = [window.hassUtil.computeDomain(state)];
+    const classes = [computeDomain(state)];
-    classes.push(window.hassUtil.attributeClassNames(state, ['unit_of_measurement']));
+    classes.push(attributeClassNames(state, ['unit_of_measurement']));
     return classes.join(' ');
   }
 
   computeValue(localize, state) {
-    const domain = window.hassUtil.computeDomain(state);
+    const domain = computeDomain(state);
     switch (domain) {
       case 'binary_sensor':
       case 'device_tracker':
@@ -118,7 +125,7 @@ class HaStateLabelBadge extends
     if (state.state === 'unavailable') {
       return null;
     }
-    const domain = window.hassUtil.computeDomain(state);
+    const domain = computeDomain(state);
     switch (domain) {
       case 'alarm_control_panel':
         if (state.state === 'pending') {
@@ -135,14 +142,14 @@ class HaStateLabelBadge extends
           return 'mdi:alert-circle';
         }
         // state == 'disarmed'
-        return window.hassUtil.domainIcon(domain, state.state);
+        return domainIcon(domain, state.state);
       case 'binary_sensor':
       case 'device_tracker':
       case 'updater':
-        return window.hassUtil.stateIcon(state);
+        return stateIcon(state);
       case 'sun':
         return state.state === 'above_horizon' ?
-          window.hassUtil.domainIcon(domain) : 'mdi:brightness-3';
+          domainIcon(domain) : 'mdi:brightness-3';
       case 'timer':
         return state.state === 'active' ? 'mdi:timer' : 'mdi:timer-off';
       default:
@@ -154,8 +161,8 @@ class HaStateLabelBadge extends
     return state.attributes.entity_picture || null;
   }
 
-  computeLabel(localize, state, timerTimeRemaining) {
+  computeLabel(localize, state, _timerTimeRemaining) {
-    const domain = window.hassUtil.computeDomain(state);
+    const domain = computeDomain(state);
     if (state.state === 'unavailable' ||
         ['device_tracker', 'alarm_control_panel'].includes(domain)) {
       // Localize the state with a special state_badge namespace, which has variations of
@@ -164,13 +171,13 @@ class HaStateLabelBadge extends
       return localize(`state_badge.${domain}.${state.state}`) || localize(`state_badge.default.${state.state}`) || state.state;
     }
     if (domain === 'timer') {
-      return window.hassUtil.secondsToDuration(timerTimeRemaining);
+      return secondsToDuration(_timerTimeRemaining);
     }
     return state.attributes.unit_of_measurement || null;
   }
 
   computeDescription(state) {
-    return window.hassUtil.computeStateName(state);
+    return computeStateName(state);
   }
 
   stateChanged(stateObj) {
@@ -187,7 +194,7 @@ class HaStateLabelBadge extends
 
   startInterval(stateObj) {
     this.clearInterval();
-    if (window.hassUtil.computeDomain(stateObj) === 'timer') {
+    if (computeDomain(stateObj) === 'timer') {
       this.calculateTimerRemaining(stateObj);
 
       if (stateObj.state === 'active') {
@@ -197,7 +204,7 @@ class HaStateLabelBadge extends
   }
 
   calculateTimerRemaining(stateObj) {
-    this.timerTimeRemaining = window.hassUtil.timerTimeRemaining(stateObj);
+    this._timerTimeRemaining = timerTimeRemaining(stateObj);
   }
 }
 

src/components/ha-cards.js

@@ -6,9 +6,10 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../cards/ha-badges-card.js';
 import '../cards/ha-card-chooser.js';
-import '../util/hass-util.js';
 import './ha-demo-badge.js';
 
+import computeDomain from '../../js/common/entity/compute_domain.js';
+
 {
   // mapping domain to size of the card.
   const DOMAINS_WITH_CARD = {
@@ -73,8 +74,6 @@ import './ha-demo-badge.js';
       });
   };
 
-  const computeDomain = window.hassUtil.computeDomain;
-
   class HaCards extends PolymerElement {
     static get template() {
       return html`

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

@@ -4,6 +4,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../util/hass-mixins.js';
 
+import isComponentLoaded from '../../js/common/config/is_component_loaded.js';
+
 class HaStartVoiceButton extends window.hassMixins.EventsMixin(PolymerElement) {
   static get template() {
     return html`
@@ -28,7 +30,7 @@ class HaStartVoiceButton extends window.hassMixins.EventsMixin(PolymerElement) {
 
   computeCanListen(hass) {
     return ('webkitSpeechRecognition' in window &&
-            window.hassUtil.isComponentLoaded(hass, 'conversation'));
+           isComponentLoaded(hass, 'conversation'));
   }
 
   handleListenClick() {

src/components/hassio-card-content.js

@@ -2,7 +2,6 @@ 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 '../util/hass-util.js';
 import './ha-relative-time.js';
 
 class HassioCardContent extends PolymerElement {

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

@@ -4,6 +4,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './entity/ha-chart-base.js';
 
+import formatDateTime from '../../js/common/datetime/format_date_time.js';
+
 class StateHistoryChartLine extends PolymerElement {
   static get template() {
     return html`
@@ -233,7 +235,7 @@ class StateHistoryChartLine extends PolymerElement {
       const item = items[0];
       const date = data.datasets[item.datasetIndex].data[item.index].x;
 
-      return window.hassUtil.formatDateTime(date);
+      return formatDateTime(date);
     };
 
     const chartOptions = {

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

@@ -4,6 +4,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './entity/ha-chart-base.js';
 
+import formatDateTime from '../../js/common/datetime/format_date_time';
+
 class StateHistoryChartTimeline extends PolymerElement {
   static get template() {
     return html`
@@ -148,8 +150,8 @@ class StateHistoryChartTimeline extends PolymerElement {
     const formatTooltipLabel = function (item, data) {
       const values = data.datasets[item.datasetIndex].data[item.index];
 
-      const start = window.hassUtil.formatDateTime(values[0]);
+      const start = formatDateTime(values[0]);
-      const end = window.hassUtil.formatDateTime(values[1]);
+      const end = formatDateTime(values[1]);
       const state = values[2];
 
       return [state, start, end];

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

@@ -3,7 +3,10 @@ import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../util/hass-mixins.js';
-import '../util/hass-util.js';
+
+import computeStateName from '../../js/common/entity/compute_state_name.js';
+import computeDomain from '../../js/common/entity/compute_domain.js';
+import computeStateDisplay from '../../js/common/entity/compute_state_display.js';
 
 {
   const RECENT_THRESHOLD = 60000; // 1 minute
@@ -31,11 +34,11 @@ import '../util/hass-util.js';
 
       if (!unit) {
         timelineDevices.push({
-          name: window.hassUtil.computeStateName(stateInfo[0]),
+          name: computeStateName(stateInfo[0]),
           entity_id: stateInfo[0].entity_id,
           data: stateInfo
             .map(state => ({
-              state_localize: window.hassUtil.computeStateDisplay(localize, state, language),
+              state_localize: computeStateDisplay(localize, state, language),
               state: state.state,
               last_changed: state.last_changed,
             }))
@@ -56,10 +59,10 @@ import '../util/hass-util.js';
       identifier: lineChartDevices[unit].map(states => states[0].entity_id).join(''),
       data: lineChartDevices[unit].map((states) => {
         const last = states[states.length - 1];
-        const domain = window.hassUtil.computeDomain(last);
+        const domain = computeDomain(last);
         return {
           domain: domain,
-          name: window.hassUtil.computeStateName(last),
+          name: computeStateName(last),
           entity_id: last.entity_id,
           states: states.map((state) => {
             const result = {

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

@@ -8,6 +8,9 @@ import '../util/hass-mixins.js';
 import './more-info/more-info-controls.js';
 import './more-info/more-info-settings.js';
 
+import computeDomain from '../../js/common/entity/compute_domain';
+import isComponentLoaded from '../../js/common/config/is_component_loaded.js';
+
 class HaMoreInfoDialog extends window.hassMixins.DialogMixin(PolymerElement) {
   static get template() {
     return html`
@@ -113,7 +116,7 @@ class HaMoreInfoDialog extends window.hassMixins.DialogMixin(PolymerElement) {
   }
 
   _computeDomain(stateObj) {
-    return stateObj ? window.hassUtil.computeDomain(stateObj) : '';
+    return stateObj ? computeDomain(stateObj) : '';
   }
 
   _computeStateObj(hass) {
@@ -131,7 +134,7 @@ class HaMoreInfoDialog extends window.hassMixins.DialogMixin(PolymerElement) {
       return;
     }
 
-    if (window.hassUtil.isComponentLoaded(this.hass, 'config.entity_registry') &&
+    if (isComponentLoaded(this.hass, 'config.entity_registry') &&
         (!oldVal || oldVal.entity_id !== newVal.entity_id)) {
       this.hass.callApi('get', `config/entity_registry/${newVal.entity_id}`)
         .then(

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

@@ -3,6 +3,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../util/hass-mixins.js';
 
+import computeStateName from '../../../../js/common/entity/compute_state_name.js';
+
 class MoreInfoCamera extends window.hassMixins.EventsMixin(PolymerElement) {
   static get template() {
     return html`
@@ -16,7 +18,7 @@ class MoreInfoCamera extends window.hassMixins.EventsMixin(PolymerElement) {
       }
     </style>
 
-    <img class="camera-image" src="[[computeCameraImageUrl(hass, stateObj, isVisible)]]" on-load="imageLoaded" alt="[[computeStateName(stateObj)]]">
+    <img class="camera-image" src="[[computeCameraImageUrl(hass, stateObj, isVisible)]]" on-load="imageLoaded" alt="[[_computeStateName(stateObj)]]">
 `;
   }
 
@@ -51,8 +53,8 @@ class MoreInfoCamera extends window.hassMixins.EventsMixin(PolymerElement) {
     this.fire('iron-resize');
   }
 
-  computeStateName(stateObj) {
+  _computeStateName(stateObj) {
-    return window.hassUtil.computeStateName(stateObj);
+    return computeStateName(stateObj);
   }
 
   computeCameraImageUrl(hass, stateObj, isVisible) {

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

@@ -12,6 +12,9 @@ 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) {
   static get template() {
     return html`
@@ -338,7 +341,7 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(PolymerElement) {
   }
 
   computeClassNames(stateObj) {
-    const featureClassNames = {
+    const _featureClassNames = {
       1: 'has-target_temperature',
       2: 'has-target_temperature_high',
       4: 'has-target_temperature_low',
@@ -356,8 +359,8 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(PolymerElement) {
 
 
     var classes = [
-      window.hassUtil.attributeClassNames(stateObj, ['current_temperature', 'current_humidity']),
+      attributeClassNames(stateObj, ['current_temperature', 'current_humidity']),
-      window.hassUtil.featureClassNames(stateObj, featureClassNames),
+      featureClassNames(stateObj, _featureClassNames),
     ];
 
     classes.push('more-info-climate');

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

@@ -20,6 +20,9 @@ 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';
+
 class MoreInfoContent extends PolymerElement {
   static get properties() {
     return {
@@ -56,9 +59,9 @@ class MoreInfoContent extends PolymerElement {
     if (stateObj.attributes && 'custom_ui_more_info' in stateObj.attributes) {
       moreInfoType = stateObj.attributes.custom_ui_more_info;
     } else {
-      moreInfoType = 'more-info-' + window.hassUtil.stateMoreInfoType(stateObj);
+      moreInfoType = 'more-info-' + stateMoreInfoType(stateObj);
     }
-    window.hassUtil.dynamicContentUpdater(
+    dynamicContentUpdater(
       this, moreInfoType.toUpperCase(),
       { hass: hass, stateObj: stateObj }
     );

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

@@ -7,6 +7,9 @@ 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';
+
 {
   const FEATURE_CLASS_NAMES = {
     128: 'has-set_tilt_position',
@@ -93,8 +96,8 @@ import '../../../util/cover-model.js';
 
     computeClassNames(stateObj) {
       var classes = [
-        window.hassUtil.attributeClassNames(stateObj, ['current_position', 'current_tilt_position']),
+        attributeClassNames(stateObj, ['current_position', 'current_tilt_position']),
-        window.hassUtil.featureClassNames(stateObj, FEATURE_CLASS_NAMES),
+        featureClassNames(stateObj, FEATURE_CLASS_NAMES),
       ];
       return classes.join(' ');
     }

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

@@ -10,6 +10,8 @@ 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) {
   static get template() {
     return html`
@@ -109,7 +111,7 @@ class MoreInfoFan extends window.hassMixins.EventsMixin(PolymerElement) {
   }
 
   computeClassNames(stateObj) {
-    return 'more-info-fan ' + window.hassUtil.attributeClassNames(stateObj, ['oscillating', 'speed_list', 'direction']);
+    return 'more-info-fan ' + attributeClassNames(stateObj, ['oscillating', 'speed_list', 'direction']);
   }
 
   speedChanged(speedIndex) {

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

@@ -4,6 +4,10 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../state-summary/state-card-content.js';
 
+import computeDomain from '../../../../js/common/entity/compute_domain';
+import dynamicContentUpdater from '../../../../js/common/dom/dynamic_content_updater.js';
+import stateMoreInfoType from '../../../../js/common/entity/state_more_info_type.js';
+
 class MoreInfoGroup extends PolymerElement {
   static get template() {
     return html`
@@ -69,7 +73,7 @@ class MoreInfoGroup extends PolymerElement {
 
     if (states && states.length > 0) {
       const baseStateObj = states.find(s => s.state === 'on') || states[0];
-      const groupDomain = window.hassUtil.computeDomain(baseStateObj);
+      const groupDomain = computeDomain(baseStateObj);
 
       // Groups need to be filtered out or we'll show content of
       // first child above the children of the current group
@@ -80,7 +84,7 @@ class MoreInfoGroup extends PolymerElement {
         });
 
         for (let i = 0; i < states.length; i++) {
-          if (groupDomain !== window.hassUtil.computeDomain(states[i])) {
+          if (groupDomain !== computeDomain(states[i])) {
             groupDomainStateObj = false;
             break;
           }
@@ -94,9 +98,9 @@ class MoreInfoGroup extends PolymerElement {
         el.removeChild(el.lastChild);
       }
     } else {
-      window.hassUtil.dynamicContentUpdater(
+      dynamicContentUpdater(
         this.$.groupedControlDetails,
-        'MORE-INFO-' + window.hassUtil.stateMoreInfoType(groupDomainStateObj).toUpperCase(),
+        'MORE-INFO-' + stateMoreInfoType(groupDomainStateObj).toUpperCase(),
         { stateObj: groupDomainStateObj, hass: this.hass }
       );
     }

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

@@ -7,6 +7,8 @@ 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';
+
 class DatetimeInput extends PolymerElement {
   static get template() {
     return html`
@@ -150,7 +152,7 @@ class DatetimeInput extends PolymerElement {
   }
 
   computeClassNames(stateObj) {
-    return 'more-info-input_datetime ' + window.hassUtil.attributeClassNames(stateObj, ['has_time', 'has_date']);
+    return 'more-info-input_datetime ' + attributeClassNames(stateObj, ['has_time', 'has_date']);
   }
 }
 

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

@@ -10,6 +10,8 @@ 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';
+
 {
   const FEATURE_CLASS_NAMES = {
     1: 'has-brightness',
@@ -176,7 +178,7 @@ import '../../../util/hass-mixins.js';
     }
 
     computeClassNames(stateObj) {
-      const classes = [window.hassUtil.featureClassNames(stateObj, FEATURE_CLASS_NAMES)];
+      const classes = [featureClassNames(stateObj, FEATURE_CLASS_NAMES)];
       if (stateObj && stateObj.state === 'on') {
         classes.push('is-on');
       }

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

@@ -11,6 +11,9 @@ 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';
+
 {
   class MoreInfoMediaPlayer extends window.hassMixins.EventsMixin(PolymerElement) {
     static get template() {
@@ -145,7 +148,7 @@ import '../../../util/hass-mixins.js';
     }
 
     computeClassNames(stateObj) {
-      return window.hassUtil.attributeClassNames(stateObj, ['volume_level']);
+      return attributeClassNames(stateObj, ['volume_level']);
     }
 
     computeMuteVolumeIcon(playerObj) {
@@ -180,7 +183,7 @@ import '../../../util/hass-mixins.js';
     }
 
     computeTTSLoaded(hass) {
-      return window.hassUtil.isComponentLoaded(hass, 'tts');
+      return isComponentLoaded(hass, 'tts');
     }
 
     handleTogglePower() {

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

@@ -4,6 +4,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/ha-relative-time.js';
 
+import formatTime from '../../../../js/common/datetime/format_time.js';
+
 class MoreInfoSun extends PolymerElement {
   static get template() {
     return html`
@@ -64,7 +66,7 @@ class MoreInfoSun extends PolymerElement {
   }
 
   itemValue(type) {
-    return window.hassUtil.formatTime(this.itemDate(type));
+    return formatTime(this.itemDate(type));
   }
 }
 

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

@@ -11,6 +11,11 @@ import '../../state-summary/state-card-content.js';
 import '../../util/hass-mixins.js';
 import './controls/more-info-content.js';
 
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+import computeDomain from '../../../js/common/entity/compute_domain.js';
+import isComponentLoaded from '../../../js/common/config/is_component_loaded.js';
+import DOMAINS_MORE_INFO_NO_HISTORY from '../../../js/common/const.js';
+
 {
   const DOMAINS_NO_INFO = [
     'camera',
@@ -116,21 +121,21 @@ import './controls/more-info-content.js';
     }
 
     _computeShowStateInfo(stateObj) {
-      return !stateObj || !DOMAINS_NO_INFO.includes(window.hassUtil.computeDomain(stateObj));
+      return !stateObj || !DOMAINS_NO_INFO.includes(computeDomain(stateObj));
     }
 
     _computeShowHistoryComponent(hass, stateObj) {
       return hass && stateObj &&
-        window.hassUtil.isComponentLoaded(hass, 'history') &&
+        isComponentLoaded(hass, 'history') &&
-        !window.hassUtil.DOMAINS_WITH_NO_HISTORY.includes(window.hassUtil.computeDomain(stateObj));
+        !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(stateObj));
     }
 
     _computeDomain(stateObj) {
-      return stateObj ? window.hassUtil.computeDomain(stateObj) : '';
+      return stateObj ? computeDomain(stateObj) : '';
     }
 
     _computeStateName(stateObj) {
-      return stateObj ? window.hassUtil.computeStateName(stateObj) : '';
+      return stateObj ? computeStateName(stateObj) : '';
     }
 
     _stateObjChanged(newVal) {

src/dialogs/more-info/more-info-settings.js

@@ -7,6 +7,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../util/hass-mixins.js';
 
+import computeStateName from '../../../js/common/entity/compute_state_name.js';
+import isComponentLoaded from '../../../js/common/config/is_component_loaded.js';
+
 class MoreInfoSettings extends window.hassMixins.EventsMixin(PolymerElement) {
   static get template() {
     return html`
@@ -67,11 +70,11 @@ class MoreInfoSettings extends window.hassMixins.EventsMixin(PolymerElement) {
 
   _computeStateName(stateObj) {
     if (!stateObj) return '';
-    return window.hassUtil.computeStateName(stateObj);
+    return computeStateName(stateObj);
   }
 
   _computeComponentLoaded(hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'config.entity_registry');
+    return isComponentLoaded(hass, 'config.entity_registry');
   }
 
   _registryInfoChanged(newVal) {

src/home-assistant.js

@@ -18,12 +18,14 @@ import './resources/panel-imports.js';
 import './util/ha-pref-storage.js';
 import './util/hass-call-api.js';
 import './util/hass-translation.js';
-import './util/hass-util.js';
 import './util/legacy-support';
 import './util/roboto.js';
 // For mdi icons.
 import './components/ha-iconset-svg.js';
 
+import computeStateName from '../js/common/entity/compute_state_name.js';
+import applyThemesOnElement from '../js/common/dom/apply_themes_on_element.js';
+
 setPassiveTouchGestures(true);
 /* LastPass createElement workaround. See #428 */
 document.createElement = Document.prototype.createElement;
@@ -180,7 +182,7 @@ class HomeAssistant extends PolymerElement {
               var name;
               if (serviceData.entity_id && this.hass.states &&
                 this.hass.states[serviceData.entity_id]) {
-                name = window.hassUtil.computeStateName(this.hass.states[serviceData.entity_id]);
+                name = computeStateName(this.hass.states[serviceData.entity_id]);
               }
               if (service === 'turn_on' && serviceData.entity_id) {
                 message = 'Turned on ' + (name || serviceData.entity_id) + '.';
@@ -253,7 +255,7 @@ class HomeAssistant extends PolymerElement {
 
     this.hass.callApi('get', 'themes').then((themes) => {
       this._updateHass({ themes: themes });
-      window.hassUtil.applyThemesOnElement(
+      applyThemesOnElement(
         document.documentElement,
         themes,
         this.hass.selectedTheme,
@@ -262,7 +264,7 @@ class HomeAssistant extends PolymerElement {
     });
     conn.subscribeEvents((event) => {
       this._updateHass({ themes: event.data });
-      window.hassUtil.applyThemesOnElement(
+      applyThemesOnElement(
         document.documentElement,
         event.data,
         this.hass.selectedTheme,
@@ -326,7 +328,7 @@ class HomeAssistant extends PolymerElement {
 
   setTheme(event) {
     this._updateHass({ selectedTheme: event.detail });
-    window.hassUtil.applyThemesOnElement(
+    applyThemesOnElement(
       document.documentElement,
       this.hass.themes,
       this.hass.selectedTheme,

src/layouts/home-assistant-main.js

@@ -11,7 +11,6 @@ import '../dialogs/ha-more-info-dialog.js';
 import '../dialogs/ha-voice-command-dialog.js';
 import '../util/ha-url-sync.js';
 import '../util/hass-mixins.js';
-import '../util/hass-util.js';
 import './partial-cards.js';
 import './partial-panel-resolver.js';
 

src/layouts/partial-cards.js

@@ -16,6 +16,10 @@ import '../components/ha-start-voice-button.js';
 import '../util/hass-mixins.js';
 import './ha-app-layout.js';
 
+import computeStateName from '../../js/common/entity/compute_state_name.js';
+import computeDomain from '../../js/common/entity/compute_domain.js';
+import computeLocationName from '../../js/common/config/location_name.js';
+
 {
   const DEFAULT_VIEW_ENTITY_ID = 'group.default_view';
   const ALWAYS_SHOW_DOMAIN = ['persistent_notification', 'configurator'];
@@ -58,20 +62,20 @@ import './ha-app-layout.js';
               </template>
               <template is="dom-if" if="[[defaultView]]">
                 <template is="dom-if" if="[[defaultView.attributes.icon]]">
-                  <iron-icon title\$="[[computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></iron-icon>
+                  <iron-icon title\$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></iron-icon>
                 </template>
                 <template is="dom-if" if="[[!defaultView.attributes.icon]]">
-                  [[computeStateName(defaultView)]]
+                  [[_computeStateName(defaultView)]]
                 </template>
               </template>
             </paper-tab>
             <template is="dom-repeat" items="[[views]]">
               <paper-tab data-entity\$="[[item.entity_id]]" on-click="scrollToTop">
                 <template is="dom-if" if="[[item.attributes.icon]]">
-                  <iron-icon title\$="[[computeStateName(item)]]" icon="[[item.attributes.icon]]"></iron-icon>
+                  <iron-icon title\$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></iron-icon>
                 </template>
                 <template is="dom-if" if="[[!item.attributes.icon]]">
-                  [[computeStateName(item)]]
+                  [[_computeStateName(item)]]
                 </template>
               </paper-tab>
             </template>
@@ -127,7 +131,7 @@ import './ha-app-layout.js';
         locationName: {
           type: String,
           value: '',
-          computed: 'computeLocationName(hass)',
+          computed: '_computeLocationName(hass)',
         },
 
         currentView: {
@@ -249,12 +253,12 @@ import './ha-app-layout.js';
       return (views && views.length > 0 && !defaultView && locationName === 'Home') || !locationName ? 'Home Assistant' : locationName;
     }
 
-    computeStateName(stateObj) {
+    _computeStateName(stateObj) {
-      return window.hassUtil.computeStateName(stateObj);
+      return computeStateName(stateObj);
     }
 
-    computeLocationName(hass) {
+    _computeLocationName(hass) {
-      return window.hassUtil.computeLocationName(hass);
+      return computeLocationName(hass);
     }
 
     hassChanged(hass) {
@@ -311,7 +315,7 @@ import './ha-app-layout.js';
       entityIds.forEach((entityId) => {
         const state = hass.states[entityId];
 
-        if (ALWAYS_SHOW_DOMAIN.includes(window.hassUtil.computeDomain(state))) {
+        if (ALWAYS_SHOW_DOMAIN.includes(computeDomain(state))) {
           states[entityId] = state;
         }
       });

src/layouts/partial-panel-resolver.js

@@ -6,6 +6,8 @@ import '../util/hass-mixins.js';
 import './hass-loading-screen.js';
 import { importHref } from '../resources/html-import/import-href';
 
+import dynamicContentUpdater from '../../js/common/dom/dynamic_content_updater.js';
+
 const loaded = {};
 
 function ensureLoaded(panel) {
@@ -163,7 +165,7 @@ class PartialPanelResolver extends window.hassMixins.NavigateMixin(PolymerElemen
 
     loadingProm.then(
       () => {
-        window.hassUtil.dynamicContentUpdater(this.$.panel, 'ha-panel-' + panel.component_name, {
+        dynamicContentUpdater(this.$.panel, 'ha-panel-' + panel.component_name, {
           hass: this.hass,
           narrow: this.narrow,
           showMenu: this.showMenu,

src/state-summary/state-card-content.js

@@ -1,6 +1,5 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../util/hass-util.js';
 import './state-card-climate.js';
 import './state-card-configurator.js';
 import './state-card-cover.js';
@@ -15,6 +14,9 @@ import './state-card-timer.js';
 import './state-card-toggle.js';
 import './state-card-weblink.js';
 
+import stateCardType from '../../js/common/entity/state_card_type.js';
+import dynamicContentUpdater from '../../js/common/dom/dynamic_content_updater.js';
+
 class StateCardContent extends PolymerElement {
   static get properties() {
     return {
@@ -34,16 +36,16 @@ class StateCardContent extends PolymerElement {
   }
 
   inputChanged(hass, inDialog, stateObj) {
-    let stateCardType;
+    let stateCard;
     if (!stateObj || !hass) return;
     if (stateObj.attributes && 'custom_ui_state_card' in stateObj.attributes) {
-      stateCardType = stateObj.attributes.custom_ui_state_card;
+      stateCard = stateObj.attributes.custom_ui_state_card;
     } else {
-      stateCardType = 'state-card-' + window.hassUtil.stateCardType(hass, stateObj);
+      stateCard = 'state-card-' + stateCardType(hass, stateObj);
     }
-    window.hassUtil.dynamicContentUpdater(
+    dynamicContentUpdater(
       this,
-      stateCardType.toUpperCase(),
+      stateCard.toUpperCase(),
       {
         hass: hass,
         stateObj: stateObj,

src/state-summary/state-card-input_number.js

@@ -7,7 +7,6 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/entity/state-info.js';
-import '../util/hass-util.js';
 
 class StateCardInputNumber extends mixinBehaviors([
   IronResizableBehavior

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

@@ -6,6 +6,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/entity/state-badge.js';
 
+import computeStateName from '../../js/common/entity/compute_state_name.js';
+
 class StateCardInputSelect extends PolymerElement {
   static get template() {
     return html`
@@ -30,7 +32,7 @@ class StateCardInputSelect extends PolymerElement {
     </style>
 
     <state-badge state-obj="[[stateObj]]"></state-badge>
-    <paper-dropdown-menu on-click="stopPropagation" selected-item-label="{{selectedOption}}" label="[[computeStateName(stateObj)]]">
+    <paper-dropdown-menu on-click="stopPropagation" selected-item-label="{{selectedOption}}" label="[[_computeStateName(stateObj)]]">
       <paper-listbox slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
         <template is="dom-repeat" items="[[stateObj.attributes.options]]">
           <paper-item>[[item]]</paper-item>
@@ -55,8 +57,8 @@ class StateCardInputSelect extends PolymerElement {
     };
   }
 
-  computeStateName(stateObj) {
+  _computeStateName(stateObj) {
-    return window.hassUtil.computeStateName(stateObj);
+    return computeStateName(stateObj);
   }
 
   computeSelected(stateObj) {

src/state-summary/state-card-input_text.js

@@ -4,7 +4,6 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/entity/state-info.js';
-import '../util/hass-util.js';
 
 class StateCardInputText extends PolymerElement {
   static get template() {

src/state-summary/state-card-timer.js

@@ -4,7 +4,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/entity/state-info.js';
 import '../util/hass-mixins.js';
-import '../util/hass-util.js';
+
+import timerTimeRemaining from '../../js/common/entity/timer_time_remaining.js';
+import secondsToDuration from '../../js/common/datetime/seconds_to_duration.js';
 
 class StateCardTimer extends window.hassMixins.LocalizeMixin(PolymerElement) {
   static get template() {
@@ -23,7 +25,7 @@ class StateCardTimer extends window.hassMixins.LocalizeMixin(PolymerElement) {
 
     <div class="horizontal justified layout">
       <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
-      <div class="state">[[secondsToDuration(timeRemaining)]]</div>
+      <div class="state">[[_secondsToDuration(timeRemaining)]]</div>
     </div>
 `;
   }
@@ -74,11 +76,11 @@ class StateCardTimer extends window.hassMixins.LocalizeMixin(PolymerElement) {
   }
 
   calculateRemaining(stateObj) {
-    this.timeRemaining = window.hassUtil.timerTimeRemaining(stateObj);
+    this.timeRemaining = timerTimeRemaining(stateObj);
   }
 
-  secondsToDuration(time) {
+  _secondsToDuration(time) {
-    return window.hassUtil.secondsToDuration(time);
+    return secondsToDuration(time);
   }
 }
 customElements.define('state-card-timer', StateCardTimer);

src/state-summary/state-card-weblink.js

@@ -3,6 +3,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/entity/state-badge.js';
 
+import computeStateName from '../../js/common/entity/compute_state_name.js';
+
 class StateCardWeblink extends PolymerElement {
   static get template() {
     return html`
@@ -22,7 +24,7 @@ class StateCardWeblink extends PolymerElement {
     </style>
 
     <state-badge state-obj="[[stateObj]]"></state-badge>
-    <a href\$="[[stateObj.state]]" target="_blank" class="name" id="link">[[computeStateName(stateObj)]]</a>
+    <a href\$="[[stateObj.state]]" target="_blank" class="name" id="link">[[_computeStateName(stateObj)]]</a>
 `;
   }
 
@@ -41,8 +43,8 @@ class StateCardWeblink extends PolymerElement {
     this.addEventListener('click', ev => this.onTap(ev));
   }
 
-  computeStateName(stateObj) {
+  _computeStateName(stateObj) {
-    return window.hassUtil.computeStateName(stateObj);
+    return computeStateName(stateObj);
   }
 
   onTap(ev) {