Add hass object to state badge (#314)

* Add hass object to state badge

This get's passed to ha-state-icon and is needed to handle changes in:

https://developers.home-assistant.io/blog/2024/01/30/ha-state-icon-properties-changes/

* Fixed unit tests

* Updated info.md

* console.log removal

---------

Co-authored-by: Marco Kreeft <marco.kreeft@gmail.com>

info.md

@@ -1,6 +1,10 @@
 {% if installed %}
 
 ### Features
+{% if version_installed.replace("v", "").replace(".","") | int < 10803  %}
+- Fixed `State badges updating again thanks to @elupus`
+{% endif %}
+
 {% if version_installed.replace("v", "").replace(".","") | int < 10802  %}
 - Fixed `Entity icons not updating on state change`
 {% endif %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "room-card",
-  "version": "1.08.02",
+  "version": "1.08.03",
   "description": "Show entities in Home Assistant's Lovelace UI",
   "keywords": [
     "home-assistant",
@@ -19,6 +19,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jest-ts-auto-mock": "^2.1.0",
     "lit": "^3.1.0",
+    "minify-html-literals-loader": "^1.1.1",
     "ts-auto-mock": "3.5.0",
     "ttypescript": "^1.5.13",
     "yarn": "^1.22.18"

src/entity.ts

@@ -123,6 +123,7 @@ export const renderIcon = (stateObj: HomeAssistantEntity, config: RoomCardEntity
 
     return html`<state-badge
         class="icon-small ${classes}"
+        .hass=${hass}
         .stateObj="${stateObj}"
         .overrideIcon="${isObject(customIcon) ? (customIcon as EntityCondition).icon : customIcon as string}"
         .stateColor="${config.state_color}"

tests/entity/renderEntitiesRow.test.ts

@@ -47,7 +47,7 @@ describe('Testing entity file function renderEntitiesRow', () => {
         const result = renderEntitiesRow(config, entities, hass, element);
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<div class="entities-row content-left"><div class="entity" style="" @action=_handleAction .actionHandler=> <span>Test Entity</span> <div><state-badge class="icon-small " .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
+        expect(htmlResult).toMatch('<div class="entities-row content-left"><div class="entity" style="" @action=_handleAction .actionHandler=> <span>Test Entity</span> <div><state-badge class="icon-small " .hass= .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
     }),
     test('Passing entities and classes should return entities-row with one child element', () => {   
 
@@ -64,6 +64,6 @@ describe('Testing entity file function renderEntitiesRow', () => {
         const result = renderEntitiesRow(config, entities, hass, element, 'test-class');
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<div class="entities-row content-left test-class"><div class="entity" style="" @action=_handleAction .actionHandler=> <span>Test Entity</span> <div><state-badge class="icon-small " .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
+        expect(htmlResult).toMatch('<div class="entities-row content-left test-class"><div class="entity" style="" @action=_handleAction .actionHandler=> <span>Test Entity</span> <div><state-badge class="icon-small " .hass= .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
     })
 })