From 5ab9c62cd89ad2c02b5e9741dde2182801a899db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Wed, 8 Jan 2020 09:17:32 +0100
Subject: [PATCH] Add support for modding badges

---
 README.md                    | 34 ++++++++++++++++++++++++++++++++++
 src/hui-state-label-badge.js | 25 +++++++++++++++++++++++++
 src/main.js                  |  3 ++-
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/hui-state-label-badge.js

diff --git a/README.md b/README.md
index 6209cc7..411559b 100644
--- a/README.md
+++ b/README.md
@@ -140,6 +140,40 @@ entities:
       }
 ```
 
+## Styling badges
+
+Badges can be styled too, with the base style applied to `:host`.
+Note that to change the color of a badge, you need to override the variable for it's default color. I.e. the badges in the example below are normally red, thus the `--label-badge-red` variable is set.
+
+```yaml
+badges:
+  - entity: sun.sun
+    name: Original
+  - entity: sun.sun
+    style: |
+      :host {
+        --label-badge-red: purple;
+      }
+    name: Purple
+  - entity: sun.sun
+    name: Teal
+    style: |
+      :host {
+        --label-badge-red: teal;
+      }
+  - entity: sun.sun
+    name: Dashed
+    style:
+      ha-state-label-badge:
+        $:
+          ha-label-badge:
+            $: |
+              .label-badge {
+                border-style: dashed !important;
+              }
+```
+![badges](https://user-images.githubusercontent.com/1299821/71958861-9da5f580-31f1-11ea-8c70-b1d6b3a69f9b.png)
+
 ## Templating
 Jinja templates have access to a few special variables. Those are:
 
diff --git a/src/hui-state-label-badge.js b/src/hui-state-label-badge.js
new file mode 100644
index 0000000..7a087c3
--- /dev/null
+++ b/src/hui-state-label-badge.js
@@ -0,0 +1,25 @@
+import {fireEvent} from "card-tools/src/event.js";
+import {applyStyle} from "./apply-style.js";
+
+customElements.whenDefined('hui-state-label-badge').then(() => {
+    const HuiStateLabelBadge = customElements.get('hui-state-label-badge');
+
+    HuiStateLabelBadge.prototype.firstUpdated = function() {
+        const config = this._config;
+        if(!config || !config.style) return;
+
+        let entity_ids = config.entity_ids;
+
+        const apply = () => {
+          applyStyle(this.shadowRoot, config.style, {
+              variables: {config},
+              entity_ids
+            }, !!config.debug_cardmod);
+        }
+
+        apply();
+        window.addEventListener("location-changed", () => apply());
+      }
+
+    fireEvent('ll-rebuild', {});
+});
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 49cc72d..a57244c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,4 +2,5 @@ import "./card-mod";
 import "./ha-card";
 import "./hui-entities-card";
 import "./hui-glance-card";
-import "./mod-card"
\ No newline at end of file
+import "./hui-state-label-badge";
+import "./mod-card"