use ha-nunjucks package

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "android-tv-card",
-	"version": "3.1.0",
+	"version": "3.1.1",
 	"description": "Android TV Remote Card",
 	"main": "./dist/android-tv-card.js",
 	"scripts": {
@@ -38,10 +38,9 @@
 		}
 	},
 	"dependencies": {
-		"@types/nunjucks": "^3.2.6",
 		"custom-card-helpers": "^1.9.0",
-		"lit": "^2.8.0",
-		"nunjucks": "^3.2.4"
+		"ha-nunjucks": "^1.1.0",
+		"lit": "^2.8.0"
 	},
 	"devDependencies": {
 		"@typescript-eslint/eslint-plugin": "^6.6.0",

src/android-tv-card.ts

@@ -5,6 +5,7 @@ import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { HomeAssistant, applyThemesOnElement } from 'custom-card-helpers';
+import { renderTemplate } from 'ha-nunjucks';
 
 import {
 	IConfig,
@@ -16,7 +17,6 @@ import {
 	IData,
 	IServiceCall,
 } from './models';
-import { renderTemplate } from './utils';
 
 import './classes/remote-button';
 import './classes/remote-keyboard';
@@ -358,7 +358,10 @@ class AndroidTVCard extends LitElement {
 		}
 		const rowContent: TemplateResult[] = [];
 		for (let elementName of row) {
-			elementName = renderTemplate(this.hass, elementName as string);
+			elementName = renderTemplate(
+				this.hass,
+				elementName as string,
+			) as string;
 			if (typeof elementName == 'object' && elementName != null) {
 				rowContent.push(this.buildElements(elementName, !isColumn));
 			} else {

src/classes/base-remote-element.ts

@@ -1,11 +1,11 @@
-import { HomeAssistant, HapticType, forwardHaptic } from 'custom-card-helpers';
-
 import { LitElement, CSSResult, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { StyleInfo } from 'lit/directives/style-map.js';
 
+import { HomeAssistant, HapticType, forwardHaptic } from 'custom-card-helpers';
+import { renderTemplate } from 'ha-nunjucks';
+
 import { IData, IKey, ISource, IAction } from '../models';
-import { renderTemplate } from '../utils';
 
 @customElement('base-remote-element')
 export class BaseRemoteElement extends LitElement {
@@ -42,9 +42,8 @@ export class BaseRemoteElement extends LitElement {
 			if (longPress && info.service == 'remote.send_command') {
 				data.hold_secs = 0.5;
 			}
-			const [domain, service] = renderTemplate(
-				this.hass,
-				info.service,
+			const [domain, service] = (
+				renderTemplate(this.hass, info.service) as string
 			).split('.', 2);
 			this.hass.callService(domain, service, data);
 		}

src/classes/remote-button.ts

@@ -1,11 +1,11 @@
-import { HapticType } from 'custom-card-helpers';
-
 import { TemplateResult, CSSResult, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { HapticType } from 'custom-card-helpers';
+import { renderTemplate } from 'ha-nunjucks';
+
 import { IAction } from '../models';
-import { renderTemplate } from '../utils';
 
 import { BaseRemoteElement } from './base-remote-element';
 
@@ -59,7 +59,10 @@ export class RemoteButton extends BaseRemoteElement {
 	}
 
 	render(inputTemplate?: TemplateResult<1>) {
-		const icon = renderTemplate(this.hass, this.info.icon as string);
+		const icon = renderTemplate(
+			this.hass,
+			this.info.icon as string,
+		) as string;
 		const svgPath =
 			renderTemplate(this.hass, this.info.svg_path as string) ??
 			renderTemplate(this.hass, this.customIcon as string);
@@ -71,7 +74,10 @@ export class RemoteButton extends BaseRemoteElement {
 
 		const style = structuredClone(this._style ?? {});
 		for (const key in style) {
-			style[key] = renderTemplate(this.hass, style[key] as string);
+			style[key] = renderTemplate(
+				this.hass,
+				style[key] as string,
+			) as string;
 		}
 
 		const action = renderTemplate(this.hass, this.actionKey);

src/classes/remote-keyboard.ts

@@ -1,8 +1,9 @@
 import { CSSResult, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import { renderTemplate } from 'ha-nunjucks';
+
 import { IData } from '../models';
-import { renderTemplate } from '../utils';
 
 import { BaseKeyboardElement } from './base-keyboard-element';
 
@@ -38,7 +39,9 @@ export class RemoteKeyboard extends BaseKeyboardElement {
 			}
 
 			switch (
-				renderTemplate(this.hass, this.keyboardMode).toUpperCase()
+				(
+					renderTemplate(this.hass, this.keyboardMode) as string
+				).toUpperCase()
 			) {
 				case 'KODI':
 					break;
@@ -62,7 +65,9 @@ export class RemoteKeyboard extends BaseKeyboardElement {
 				entity_id: renderTemplate(this.hass, this.keyboardId),
 			};
 			switch (
-				renderTemplate(this.hass, this.keyboardMode).toUpperCase()
+				(
+					renderTemplate(this.hass, this.keyboardMode) as string
+				).toUpperCase()
 			) {
 				case 'KODI':
 					data.method = 'Input.SendText';
@@ -92,7 +97,9 @@ export class RemoteKeyboard extends BaseKeyboardElement {
 				entity_id: renderTemplate(this.hass, this.keyboardId),
 			};
 			switch (
-				renderTemplate(this.hass, this.keyboardMode).toUpperCase()
+				(
+					renderTemplate(this.hass, this.keyboardMode) as string
+				).toUpperCase()
 			) {
 				case 'KODI':
 					data.method = 'Input.SendText';

src/classes/remote-search.ts

@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
+import { renderTemplate } from 'ha-nunjucks';
+
 import { IData } from '../models';
-import { renderTemplate } from '../utils';
 
 import { BaseKeyboardElement } from './base-keyboard-element';
 
@@ -13,7 +14,11 @@ export class RemoteSearch extends BaseKeyboardElement {
 
 		let promptText: string;
 		const entityId = renderTemplate(this.hass, this.keyboardId);
-		switch (renderTemplate(this.hass, this.keyboardMode).toUpperCase()) {
+		switch (
+			(
+				renderTemplate(this.hass, this.keyboardMode) as string
+			).toUpperCase()
+		) {
 			case 'KODI':
 				promptText = 'Global Search: ';
 				this.hass.callService('kodi', 'call_method', {
@@ -37,7 +42,9 @@ export class RemoteSearch extends BaseKeyboardElement {
 				entity_id: entityId,
 			};
 			switch (
-				renderTemplate(this.hass, this.keyboardMode).toUpperCase()
+				(
+					renderTemplate(this.hass, this.keyboardMode) as string
+				).toUpperCase()
 			) {
 				case 'KODI':
 					data.method = 'Input.SendText';

src/classes/remote-slider.ts

@@ -2,8 +2,9 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { renderTemplate } from 'ha-nunjucks';
+
 import { IServiceCall } from '../models';
-import { renderTemplate } from '../utils';
 
 import { BaseRemoteElement } from './base-remote-element';
 
@@ -70,9 +71,8 @@ export class RemoteSlider extends BaseRemoteElement {
 	}
 
 	onEnd(_e: MouseEvent | TouchEvent) {
-		const [domain, service] = renderTemplate(
-			this.hass,
-			this.info.service,
+		const [domain, service] = (
+			renderTemplate(this.hass, this.info.service) as string
 		).split('.');
 		if (!this.newValue && this.newValue != 0) {
 			this.newValue = this.value as number;
@@ -95,11 +95,11 @@ export class RemoteSlider extends BaseRemoteElement {
 
 	render() {
 		const background = html`<div class="slider-background"></div>`;
-		const sliderId = renderTemplate(this.hass, this.sliderId);
+		const sliderId = renderTemplate(this.hass, this.sliderId) as string;
 		const sliderAttribute = renderTemplate(
 			this.hass,
 			this.sliderAttribute as string,
-		);
+		) as string;
 
 		if (sliderAttribute) {
 			if (sliderAttribute == 'state') {
@@ -121,10 +121,16 @@ export class RemoteSlider extends BaseRemoteElement {
 		}
 
 		const end = parseFloat(
-			renderTemplate(this.hass, this.range[0] as unknown as string),
+			renderTemplate(
+				this.hass,
+				this.range[0] as unknown as string,
+			) as string,
 		);
 		const start = parseFloat(
-			renderTemplate(this.hass, this.range[1] as unknown as string),
+			renderTemplate(
+				this.hass,
+				this.range[1] as unknown as string,
+			) as string,
 		);
 
 		this.step = (start - end) / 100;
@@ -150,7 +156,10 @@ export class RemoteSlider extends BaseRemoteElement {
 
 		const style = structuredClone(this._style ?? {});
 		for (const key in style) {
-			style[key] = renderTemplate(this.hass, style[key] as string);
+			style[key] = renderTemplate(
+				this.hass,
+				style[key] as string,
+			) as string;
 		}
 
 		return html`<div class="container" style=${styleMap(style)}>

src/classes/remote-textbox.ts

@@ -1,7 +1,8 @@
 import { customElement } from 'lit/decorators.js';
 
+import { renderTemplate } from 'ha-nunjucks';
+
 import { IData } from '../models';
-import { renderTemplate } from '../utils';
 
 import { BaseKeyboardElement } from './base-keyboard-element';
 
@@ -16,7 +17,9 @@ export class RemoteTextbox extends BaseKeyboardElement {
 				entity_id: renderTemplate(this.hass, this.keyboardId),
 			};
 			switch (
-				renderTemplate(this.hass, this.keyboardMode).toUpperCase()
+				(
+					renderTemplate(this.hass, this.keyboardMode) as string
+				).toUpperCase()
 			) {
 				case 'KODI':
 					data.method = 'Input.SendText';

src/classes/remote-touchpad.ts

@@ -2,8 +2,9 @@ import { html, css } from 'lit';
 import { customElement, property, eventOptions } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { renderTemplate } from 'ha-nunjucks';
+
 import { IAction, TouchAction } from '../models';
-import { renderTemplate } from '../utils';
 
 import { BaseRemoteElement } from './base-remote-element';
 
@@ -131,7 +132,10 @@ export class RemoteTouchpad extends BaseRemoteElement {
 	render() {
 		const style = structuredClone(this._style ?? {});
 		for (const key in style) {
-			style[key] = renderTemplate(this.hass, style[key] as string);
+			style[key] = renderTemplate(
+				this.hass,
+				style[key] as string,
+			) as string;
 		}
 
 		return html`