Add Template extension points (#1230)

* Added first extension points for cover & climate

* Finished state-summary cards

* Cleanup

src/components/entity/state-info.js

@@ -7,6 +7,14 @@ import computeStateName from '../../common/entity/compute_state_name.js';
 
 class StateInfo extends PolymerElement {
   static get template() {
+    return html`
+    ${this.styleTemplate}
+    ${this.stateBadgeTemplate}
+    ${this.infoTemplate}
+`;
+  }
+
+  static get styleTemplate() {
     return html`
     <style>
     :host {
@@ -38,9 +46,17 @@ class StateInfo extends PolymerElement {
       color: var(--secondary-text-color);
     }
     </style>
+`;
+  }
 
+  static get stateBadgeTemplate() {
+    return html`
     <state-badge state-obj="[[stateObj]]"></state-badge>
+`;
+  }
 
+  static get infoTemplate() {
+    return html`
     <div class="info">
       <div class="name" in-dialog\$="[[inDialog]]">[[computeStateName(stateObj)]]</div>
 

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

@@ -22,12 +22,18 @@ class StateCardClimate extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <ha-climate-state state-obj="[[stateObj]]"></ha-climate-state>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       stateObj: Object,

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

@@ -20,7 +20,7 @@ class StateCardConfigurator extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <paper-button hidden\$="[[inDialog]]">[[stateObj.state]]</paper-button>
     </div>
 
@@ -31,6 +31,12 @@ class StateCardConfigurator extends PolymerElement {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       stateObj: Object,

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

@@ -18,7 +18,7 @@ class StateCardCover extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <div class="horizontal layout">
         <ha-cover-controls hidden\$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-controls>
         <ha-cover-tilt-controls hidden\$="[[!entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-tilt-controls>
@@ -27,6 +27,12 @@ class StateCardCover extends PolymerElement {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -39,11 +39,17 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
       }
     </style>
 
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    ${this.stateInfoTemplate}
     <div class\$="[[computeClassNames(stateObj)]]">[[computeStateDisplay(localize, stateObj, language)]]</div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -38,7 +38,7 @@ class StateCardInputNumber extends mixinBehaviors([
     </style>
 
     <div class="horizontal justified layout" id="input_number_card">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" step="[[step]]" hidden="[[hiddenslider]]" pin="" on-change="selectedValueChanged" on-click="stopPropagation" id="slider" ignore-bar-touch="">
       </paper-slider>
       <paper-input no-label-float="" auto-validate="" pattern="[0-9]+([\\.][0-9]+)?" step="[[step]]" min="[[min]]" max="[[max]]" value="{{value}}" type="number" on-change="selectedValueChanged" on-click="stopPropagation" hidden="[[hiddenbox]]">
@@ -49,6 +49,12 @@ class StateCardInputNumber extends mixinBehaviors([
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   ready() {
     super.ready();
     if (typeof ResizeObserver === 'function') {

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

@@ -31,7 +31,7 @@ class StateCardInputSelect extends PolymerElement {
       }
     </style>
 
-    <state-badge state-obj="[[stateObj]]"></state-badge>
+    ${this.stateBadgeTemplate}
     <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]]">
@@ -42,6 +42,12 @@ class StateCardInputSelect extends PolymerElement {
 `;
   }
 
+  static get stateBadgeTemplate() {
+    return html`
+    <state-badge state-obj="[[stateObj]]"></state-badge>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -16,13 +16,20 @@ class StateCardInputText extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <paper-input no-label-float="" minlength="[[stateObj.attributes.min]]" maxlength="[[stateObj.attributes.max]]" value="{{value}}" auto-validate="[[stateObj.attributes.pattern]]" pattern="[[stateObj.attributes.pattern]]" type="[[stateObj.attributes.mode]]" on-change="selectedValueChanged" on-click="stopPropagation" placeholder="(empty value)">
       </paper-input>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
+
   static get properties() {
     return {
       hass: Object,

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

@@ -42,7 +42,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <div class="state">
         <div class="main-text" take-height\$="[[!playerObj.secondaryTitle]]">[[computePrimaryText(localize, playerObj)]]</div>
         <div class="secondary-text">[[playerObj.secondaryTitle]]</div>
@@ -51,6 +51,12 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -24,12 +24,18 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <paper-button on-click="activateScene">[[localize('ui.card.scene.activate')]]</paper-button>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -30,7 +30,7 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <template is="dom-if" if="[[stateObj.attributes.can_cancel]]">
         <ha-entity-toggle state-obj="[[stateObj]]" hass="[[hass]]"></ha-entity-toggle>
       </template>
@@ -41,6 +41,12 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -28,12 +28,18 @@ class StateCardTimer extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <div class="state">[[_secondsToDuration(timeRemaining)]]</div>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -17,12 +17,18 @@ class StateCardToggle extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <ha-entity-toggle state-obj="[[stateObj]]" hass="[[hass]]"></ha-entity-toggle>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,

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

@@ -23,11 +23,17 @@ class StateCardWeblink extends PolymerElement {
       }
     </style>
 
-    <state-badge state-obj="[[stateObj]]"></state-badge>
+    ${this.stateBadgeTemplate}
     <a href\$="[[stateObj.state]]" target="_blank" class="name" id="link">[[_computeStateName(stateObj)]]</a>
 `;
   }
 
+  static get stateBadgeTemplate() {
+    return html`
+    <state-badge state-obj="[[stateObj]]"></state-badge>
+`;
+  }
+
   static get properties() {
     return {
       stateObj: Object,