Merge pull request #80 from smonesi/master

Apply templated style to elements, both for element and card

README.md

@@ -47,7 +47,7 @@ resources:
 | card      | object | **Optional** | Card configuration. (A card, row, or element configuaration must be provided)                                    |
 | row       | object | **Optional** | Row configuration. (A card, row, or element configuaration must be provided)                                     |
 | element   | object | **Optional** | Element configuration. (A card, row, or element configuaration must be provided)                                 |
-| style     | object | **Optional** | Style configuration. (Required if you use an element)                                                            |
+| style     | object | **Optional** | Style configuration.                                                                                             |
 
 ### Available variables for templating
 
@@ -107,14 +107,17 @@ elements:
       - states['light.bed_light'].state
     entities:
       - light.bed_light
+      - sensor.light_icon_color
     element:
       type: icon
       icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
+      style:
+        '--paper-item-icon-color': '${ states[''sensor.light_icon_color''].state }'
     style:
       top: 47%
       left: 75%
 ```
-Note how the `style` object is on the config-template-card itself and not within the element configuration.
+The `style` object on the element configuration is applied to the element itself, the `style` object on the `config-template-card` is applied to the surrounding card, both can contain templated values. For example, in order to place the card properly, the `top` and `left` attributes must always be configured on the `config-template-card`.
 
 ### Entities card example
 

src/config-template-card.ts

@@ -46,8 +46,8 @@ export class ConfigTemplateCard extends LitElement {
       );
     }
 
-    if (config.element && !config.style) {
-      throw new Error('No style defined for element');
+    if (config.element && !config.element.type) {
+      throw new Error('No element type defined');
     }
 
     if (!config.entities) {
@@ -101,7 +101,12 @@ export class ConfigTemplateCard extends LitElement {
       ? deepClone(this._config.row)
       : deepClone(this._config.element);
 
+    let style = this._config.style ? deepClone(this._config.style) : {};
+
     config = this._evaluateConfig(config);
+    if (style) {
+      style = this._evaluateConfig(style);
+    }
 
     const element = this._config.card
       ? this._helpers.createCardElement(config)
@@ -110,6 +115,19 @@ export class ConfigTemplateCard extends LitElement {
       : this._helpers.createHuiElement(config);
     element.hass = this.hass;
 
+    if (this._config.element) {
+      if (style) {
+        Object.keys(style).forEach(prop => {
+          this.style.setProperty(prop, style[prop]);
+        });
+      }
+      if (config.style) {
+        Object.keys(config.style).forEach(prop => {
+          element.style.setProperty(prop, config.style[prop]);
+        });
+      }
+    }
+
     return html`
       ${element}
     `;

src/types.ts

@@ -7,5 +7,5 @@ export interface ConfigTemplateConfig {
   card?: LovelaceCardConfig;
   row?: EntitiesCardEntityConfig;
   element?: LovelaceElementConfigBase;
-  style?: string[];
+  style?: Record<string, string>;
 }