diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.js b/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
deleted file mode 100644
index af9b84f131..0000000000
--- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
-
-import "../components/hui-generic-entity-row";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiLockEntityRow extends LocalizeMixin(PolymerElement) {
- static get template() {
- return html`
- ${this.styleTemplate}
-
- ${this.lockControlTemplate}
-
- `;
- }
-
- static get styleTemplate() {
- return html`
-
- `;
- }
-
- static get lockControlTemplate() {
- return html`
-
- [[_computeButtonTitle(_stateObj.state)]]
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- _config: Object,
- _stateObj: {
- type: Object,
- computed: "_computeStateObj(hass.states, _config.entity)",
- },
- };
- }
-
- _computeStateObj(states, entityId) {
- return states && entityId in states ? states[entityId] : null;
- }
-
- setConfig(config) {
- if (!config || !config.entity) {
- throw new Error("Entity not configured.");
- }
- this._config = config;
- }
-
- _computeButtonTitle(state) {
- return state === "locked"
- ? this.localize("ui.card.lock.unlock")
- : this.localize("ui.card.lock.lock");
- }
-
- _callService(ev) {
- ev.stopPropagation();
- const stateObj = this._stateObj;
- this.hass.callService(
- "lock",
- stateObj.state === "locked" ? "unlock" : "lock",
- { entity_id: stateObj.entity_id }
- );
- }
-}
-customElements.define("hui-lock-entity-row", HuiLockEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
new file mode 100644
index 0000000000..a63ae52753
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
@@ -0,0 +1,88 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../components/hui-generic-entity-row";
+import "./hui-error-entity-row";
+
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
+
+class HuiLockEntityRow extends hassLocalizeLitMixin(LitElement)
+ implements EntityRow {
+ public hass?: HomeAssistant;
+ private _config?: EntityConfig;
+
+ static get properties(): PropertyDeclarations {
+ return {
+ hass: {},
+ _config: {},
+ };
+ }
+
+ public setConfig(config: EntityConfig): void {
+ if (!config) {
+ throw new Error("Configuration error");
+ }
+ this._config = config;
+ }
+
+ protected render(): TemplateResult {
+ if (!this._config || !this.hass) {
+ return html``;
+ }
+
+ const stateObj = this.hass.states[this._config.entity];
+
+ if (!stateObj) {
+ return html`
+
+ `;
+ }
+
+ return html`
+ ${this.renderStyle()}
+
+
+ ${
+ stateObj.state === "locked"
+ ? this.localize("ui.card.lock.unlock")
+ : this.localize("ui.card.lock.lock")
+ }
+
+
+ `;
+ }
+
+ protected renderStyle(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private _callService(ev): void {
+ ev.stopPropagation();
+ const stateObj = this.hass!.states[this._config!.entity];
+ this.hass!.callService(
+ "lock",
+ stateObj.state === "locked" ? "unlock" : "lock",
+ { entity_id: stateObj.entity_id }
+ );
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-lock-entity-row": HuiLockEntityRow;
+ }
+}
+
+customElements.define("hui-lock-entity-row", HuiLockEntityRow);