diff --git a/src/dialogs/more-info/controls/more-info-configurator.js b/src/dialogs/more-info/controls/more-info-configurator.js
deleted file mode 100644
index 52f7ce6406..0000000000
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../components/ha-circular-progress";
-import "../../../components/ha-markdown";
-
-class MoreInfoConfigurator extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
-
-
-
-
- [[stateObj.attributes.errors]]
-
-
-
-
-
-
-
-
-
- [[stateObj.attributes.submit_caption]]
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- stateObj: {
- type: Object,
- },
-
- action: {
- type: String,
- value: "display",
- },
-
- isConfigurable: {
- type: Boolean,
- computed: "computeIsConfigurable(stateObj)",
- },
-
- isConfiguring: {
- type: Boolean,
- value: false,
- },
-
- fieldInput: {
- type: Object,
- value: function () {
- return {};
- },
- },
- };
- }
-
- computeIsConfigurable(stateObj) {
- return stateObj.state === "configure";
- }
-
- fieldChanged(ev) {
- const el = ev.target;
- this.fieldInput[el.name] = el.value;
- }
-
- submitClicked() {
- const data = {
- configure_id: this.stateObj.attributes.configure_id,
- fields: this.fieldInput,
- };
-
- this.isConfiguring = true;
-
- this.hass.callService("configurator", "configure", data).then(
- () => {
- this.isConfiguring = false;
- },
- () => {
- this.isConfiguring = false;
- }
- );
- }
-}
-
-customElements.define("more-info-configurator", MoreInfoConfigurator);
diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts
new file mode 100644
index 0000000000..f6f77f451b
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-configurator.ts
@@ -0,0 +1,128 @@
+import "@material/mwc-button";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-alert";
+import "../../../components/ha-circular-progress";
+import "../../../components/ha-markdown";
+import "../../../components/ha-textfield";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-configurator")
+export class MoreInfoConfigurator extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj?: HassEntity;
+
+ @state() private _isConfiguring = false;
+
+ private _fieldInput = {};
+
+ protected render(): TemplateResult {
+ if (this.stateObj?.state !== "configure") {
+ return html``;
+ }
+
+ return html`
+
+
+
+ ${this.stateObj.attributes.errors
+ ? html`
+ ${this.stateObj.attributes.errors}
+ `
+ : ""}
+ ${this.stateObj.attributes.fields.map(
+ (field) => html`
`
+ )}
+ ${this.stateObj.attributes.submit_caption
+ ? html`
+
+ ${this._isConfiguring
+ ? html``
+ : ""}
+ ${this.stateObj.attributes.submit_caption}
+
+
`
+ : ""}
+
+ `;
+ }
+
+ private _fieldChanged(ev) {
+ const el = ev.target;
+ this._fieldInput[el.name] = el.value;
+ }
+
+ private _submitClicked() {
+ const data = {
+ configure_id: this.stateObj!.attributes.configure_id,
+ fields: this._fieldInput,
+ };
+
+ this._isConfiguring = true;
+
+ this.hass.callService("configurator", "configure", data).then(
+ () => {
+ this._isConfiguring = false;
+ },
+ () => {
+ this._isConfiguring = false;
+ }
+ );
+ }
+
+ static styles = css`
+ .container {
+ display: flex;
+ flex-direction: column;
+ }
+ p {
+ margin: 8px 0;
+ }
+
+ a {
+ color: var(--primary-color);
+ }
+
+ p > img {
+ max-width: 100%;
+ }
+
+ p.center {
+ text-align: center;
+ }
+
+ p.submit {
+ text-align: center;
+ height: 41px;
+ }
+
+ ha-circular-progress {
+ width: 14px;
+ height: 14px;
+ margin-right: 20px;
+ }
+ `;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "more-info-configurator": MoreInfoConfigurator;
+ }
+}