fix #37: style option not working

README.md

@@ -24,7 +24,7 @@ v2 is only compatible from version 2022.3 onwards
 
   ```yaml
   resources:
-    - url: /local/mini-climate-card-bundle.js?v=2.0.2
+    - url: /local/mini-climate-card-bundle.js?v=2.0.3
       type: module
   ```
 
@@ -35,14 +35,14 @@ v2 is only compatible from version 2022.3 onwards
 2. Grab `mini-climate-card-bundle.js`
 
   ```console
-  $ wget https://github.com/artem-sedykh/mini-climate-card/releases/download/v2.0.2/mini-climate-card-bundle.js
+  $ wget https://github.com/artem-sedykh/mini-climate-card/releases/download/v2.0.3/mini-climate-card-bundle.js
   ```
 
 3. Add a reference to `mini-climate-card-bundle.js` inside your `ui-lovelace.yaml`.
 
   ```yaml
   resources:
-    - url: /local/mini-climate-card-bundle.js?v=2.0.2
+    - url: /local/mini-climate-card-bundle.js?v=2.0.3
       type: module
   ```
 
@@ -55,7 +55,7 @@ v2 is only compatible from version 2022.3 onwards
 
   ```yaml
   resources:
-    - url: /local/mini-climate-card-bundle.js?v=2.0.2
+    - url: /local/mini-climate-card-bundle.js?v=2.0.3
       type: module
   ```
 
@@ -148,7 +148,7 @@ v2 is only compatible from version 2022.3 onwards
 | **buttons** | object | optional | v1.0.1 | any buttons, [example](#buttons).
 | buttons: `name` | object | optional | v1.0.1 | the name of your button see examples
 | buttons: `name:icon` | string | optional | v1.0.1 | Specify a custom icon from any of the available mdi icons.
-| buttons: `name:type` | string | optional | v1.0.1 | `dropdown` or `button` default `bitton`
+| buttons: `name:type` | string | optional | v1.0.1 | `dropdown` or `button` default `button`
 | buttons: `name:order` | number | optional | v1.0.1 | sort order
 | buttons: `name:location` | string | optional | v1.2.1 | allows you to display buttons on the main panel, types `main, bottom`, default `bottom`
 | buttons: `name:state` | object | optional | v1.0.1 | config to get button state.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-climate-card",
-  "version": "v2.0.2",
+  "version": "v2.0.3",
   "description": "a/c card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",

release_notes/v2.0.3.md

@@ -0,0 +1,6 @@
+## v2.0.3
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-climate-card/v2.0.3/total.svg)](https://github.com/artem-sedykh/mini-climate-card/releases/tag/v2.0.3)
+
+### FIXED
+- fix #37: 'style' option has no effect by @regevbr
+

src/components/dropdown-base.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { styleMap } from 'lit/directives/style-map';
 
 import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
@@ -27,9 +28,15 @@ export default class ClimateDropdownBase extends ScopedRegistryHost(LitElement)
       icon: String,
       active: Boolean,
       disabled: Boolean,
+      iconStyle: { type: Object },
     };
   }
 
+  constructor() {
+    super();
+    this.iconStyle = {};
+  }
+
   get selectedId() {
     return this.items.map(item => item.id).indexOf(this.selected);
   }
@@ -53,7 +60,8 @@ export default class ClimateDropdownBase extends ScopedRegistryHost(LitElement)
   render() {
     return html`
       <div class='mc-dropdown'>
-        <ha-icon-button class='mc-dropdown__button icon' 
+        <ha-icon-button class='mc-dropdown__button icon'
+          style=${styleMap(this.iconStyle)}
           id=${'button'}
           @click=${this.handleClick}
           ?disabled=${this.disabled}

src/components/dropdown.js

@@ -1,5 +1,4 @@
 import { LitElement, html, css } from 'lit';
-import { styleMap } from 'lit/directives/style-map';
 import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
 import ClimateDropdownBase from './dropdown-base';
@@ -52,7 +51,7 @@ export default class ClimateDropDown extends ScopedRegistryHost(LitElement) {
   render() {
     return html`
       <mc-dropdown-base
-        style=${styleMap(this.dropdown.style)}
+        .iconStyle=${this.dropdown.style}
         @change=${e => this.handleChange(e)}
         .items=${this.dropdown.source}
         .icon=${this.dropdown.icon}

src/components/mode-menu.js

@@ -1,5 +1,4 @@
 import { LitElement, html, css } from 'lit';
-import { styleMap } from 'lit/directives/style-map';
 import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import ICON from '../const';
 import ClimateDropdownBase from './dropdown-base';
@@ -61,7 +60,7 @@ export default class ClimateModeMenu extends ScopedRegistryHost(LitElement) {
         @change=${this.handleChange}
         .items=${this.sources}
         .icon=${this.calcIcon}
-        style=${styleMap(this.mode.style)}
+        .iconStyle=${this.mode.style}
         .active=${this.mode.isActive(this.mode.state)}
         .selected=${this.selected.id}>
       </mc-dropdown-base>

src/main.js

@@ -207,8 +207,7 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
     const buttons = [];
 
     for (let i = 0; i < data.length; i += 1) {
-      const key = data[i][0];
-      const value = data[i][1];
+      const [key, value] = data[i];
       const button = this.getButtonConfig(value, config);
       button.id = key;