Changed card creation to use lovelace helper (#248)

info.md

@@ -1,6 +1,10 @@
 {% if installed %}
 
 ### Features
+{% if version_installed.replace("v", "").replace(".","") | int < 10725 %}
+- Fixed `broken card creation`
+{% endif %}
+
 {% if version_installed.replace("v", "").replace(".","") | int < 10724 %}
 - Added `support for stack, grid and glance cards`
 {% endif %}

package.json

@@ -1,6 +1,6 @@
 {
  "name": "room-card",
- "version": "1.07.24",
+ "version": "1.07.25",
  "description": "Show entities in Home Assistant's Lovelace UI",
  "keywords": [
  "home-assistant",

src/index.ts

@@ -1,9 +1,10 @@
 import { CSSResult, html, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import { HomeAssistant } from 'custom-card-helpers';
+import { HomeAssistant, LovelaceCard, LovelaceCardConfig, createThing } from 'custom-card-helpers';
 
 import { checkConfig, entityStyles, renderEntitiesRow, renderInfoEntity, renderRows, renderTitle } from './entity';
-import { getEntityIds, hasConfigOrEntitiesChanged, mapStateObject, createCardElement } from './util';
+import { getEntityIds, hasConfigOrEntitiesChanged, mapStateObject } from './util';
+import { hideIfCard } from './hide';
 import { style } from './styles';
 import { HomeAssistantEntity, RoomCardConfig, RoomCardEntity, RoomCardLovelaceCardConfig, RoomCardRow } from './types/room-card-types';
 import * as packageJson from '../package.json';
@@ -17,9 +18,9 @@ console.info(
 /* eslint-disable @typescript-eslint/no-explicit-any */
 (window as any).customCards = (window as any).customCards || [];
 (window as any).customCards.push({
- type: 'room-card',
- name: 'Room card',
- preview: false,
+  type: 'room-card',
+  name: 'Room card',
+  preview: false,
  description: 'Show multiple entity states, attributes and icons in a single card in Home Assistant\'s Lovelace UI',
 });
 /* eslint-enable @typescript-eslint/no-explicit-any */
@@ -28,19 +29,25 @@ console.info(
 export default class RoomCard extends LitElement {
  @property() _hass?: HomeAssistant;
  @property() config?: RoomCardConfig;
- 
+
  private entity: RoomCardEntity | undefined;
  private info_entities: RoomCardEntity[] = [];
  private entities: RoomCardEntity[] = [];
  private rows: RoomCardRow[] = [];
  private stateObj: HomeAssistantEntity | undefined;
- private _refCards: RoomCardLovelaceCardConfig[] = [];
-
- setConfig(config: RoomCardConfig) { 
+ private _refCards: LovelaceCard[] = [];
+ private _helpers: { createCardElement(config: LovelaceCardConfig): LovelaceCard };
 
- checkConfig(config); 
+ async setConfig(config: RoomCardConfig) {
+ checkConfig(config);
 
  this.config = { ...config, entityIds: getEntityIds(config) };
+
+ /* eslint-disable @typescript-eslint/no-explicit-any */
+ if ((window as any).loadCardHelpers) {
+ this._helpers = await (window as any).loadCardHelpers();
+ }
+ /* eslint-enable @typescript-eslint/no-explicit-any */
  }
 
  protected shouldUpdate(changedProps: PropertyValues): boolean {
@@ -57,13 +64,13 @@ export default class RoomCard extends LitElement {
  this.info_entities = this.config.info_entities?.map(entity => mapStateObject(entity, hass, this.config)) ?? [];
 
  this.entities = this.config.entities?.map(entity => mapStateObject(entity, hass, this.config)) ?? [];
- this.rows = 
+ this.rows =
  this.config.rows?.map((row) => {
  const rowEntities = row.entities?.map(entity => mapStateObject(entity, hass, this.config));
  return { entities: rowEntities, hide_if: row.hide_if, content_alignment: row.content_alignment };
  }) ?? [];
 
- this._refCards = this.config.cards?.map(card => createCardElement(card, hass));
+ this._refCards = this.config.cards?.map((card) => this.createCardElement(card, hass));
 
  this.config.hass = hass;
  }
@@ -103,4 +110,27 @@ export default class RoomCard extends LitElement {
 
  return numberOfCards + numberOfRows + (this.config.entities ? this.config.entities.length > 0 ? 1 : 0 : 0) + mainSize;
  }
-}
+
+ createCardElement(config: RoomCardLovelaceCardConfig, hass: HomeAssistant) {
+ if (
+ hideIfCard(config, hass) ||
+ (config.show_states && !config.show_states.includes(hass.states[config.entity].state))
+ ) {
+ return;
+ }
+
+ let element: LovelaceCard;
+
+ if (this._helpers) {
+ element = this._helpers.createCardElement(config);
+ } else {
+ element = createThing(config);
+ }
+
+ element.hass = hass;
+ element.style.boxShadow = 'none';
+ element.style.borderRadius = '0';
+
+ return element;
+ }
+}

src/util.ts

@@ -1,10 +1,9 @@
-import { HomeAssistant, createThing } from 'custom-card-helpers';
+import { HomeAssistant } from 'custom-card-helpers';
 import { html, PropertyValues } from 'lit';
 import { HassEntity } from 'home-assistant-js-websocket';
 import { UNAVAILABLE_STATES } from './lib/constants';
 import { HomeAssistantEntity, RoomCardConfig, RoomCardEntity, EntityCondition, RoomCardLovelaceCardConfig, RoomCardRow, RoomCardIcon, HideIfConfig } from './types/room-card-types';
 import { mapTemplate } from './template';
-import { hideIfCard } from './hide';
 
 export const isObject = (obj: unknown) : boolean => typeof obj === 'object' && !Array.isArray(obj) && !!obj;
 
@@ -36,11 +35,11 @@ export const getConditionEntities = (entities?: RoomCardEntity[]) : EntityCondit
  entities?.forEach(entity => {
  const iconConditionsWithEntity = (entity?.icon as RoomCardIcon)?.conditions?.filter(x => x.entity !== undefined);
  if(iconConditionsWithEntity) {
- conditions = conditions.concat(iconConditionsWithEntity); 
+ conditions = conditions.concat(iconConditionsWithEntity);
  }
  const hideConditionsWithEntity = (entity?.hide_if as HideIfConfig)?.conditions?.filter(x => x.entity !== undefined);
  if(hideConditionsWithEntity) {
- conditions = conditions.concat(hideConditionsWithEntity); 
+ conditions = conditions.concat(hideConditionsWithEntity);
  }
  });
 
@@ -73,7 +72,7 @@ export const hasConfigOrEntitiesChanged = (node: RoomCardConfig, changedProps: P
  return false;
 };
 
-export const checkConditionalValue = (item: EntityCondition, checkValue: unknown) => { 
+export const checkConditionalValue = (item: EntityCondition, checkValue: unknown) => {
  const itemValue = typeof item.value === 'boolean' ? String(item.value) : item.value;
  if(item.condition == 'equals' && checkValue == itemValue) {
  return true;
@@ -97,27 +96,6 @@ export const mapStateObject = (entity: RoomCardEntity | string, hass: HomeAssist
  return { ...conf, stateObj: hass.states[conf.entity] };
 }
 
-export const createCardElement = (cardConfig: RoomCardLovelaceCardConfig, hass: HomeAssistant) => { 
- if (hideIfCard(cardConfig, hass) || cardConfig.show_states && !cardConfig.show_states.includes(hass.states[cardConfig.entity].state)) {
- return;
- }
-
- let tag = cardConfig.type;
- if (tag.startsWith('divider')) {
- tag = `hui-divider-row`;
- } else if (tag.startsWith('custom:')) {
- tag = tag.substr('custom:'.length);
- } else {
- tag = `hui-${tag}-card`;
- }
-
- const element = createThing(cardConfig);
- element.hass = hass;
- element.style.boxShadow = 'none';
- element.style.borderRadius = '0';
- return element;
-}
-
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const evalTemplate = (hass: HomeAssistant | undefined, state: HassEntity, func: string): Function => {
  /* eslint no-new-func: 0 */
@@ -131,10 +109,10 @@ export const evalTemplate = (hass: HomeAssistant | undefined, state: HassEntity,
  html,
  );
  } catch (e) {
- const funcTrimmed = func.length <= 100 ? func.trim() : `${func.trim().substring(0, 98)}...`;
- e.message = `${e.name}: ${e.message} in '${funcTrimmed}'`;
- e.name = 'RoomCardJSTemplateError';
- throw e;
+  const funcTrimmed = func.length <= 100 ? func.trim() : `${func.trim().substring(0, 98)}...`;
+  e.message = `${e.name}: ${e.message} in '${funcTrimmed}'`;
+  e.name = 'RoomCardJSTemplateError';
+  throw e;
  }
  }