Entity Settings Page to MWC 3 (#11694)

src/panels/config/helpers/forms/ha-input_button-form.ts

@@ -1,8 +1,8 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-textfield";
 import { InputButton } from "../../../../data/input_button";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -46,10 +46,10 @@ class HaInputButtonForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -58,7 +58,7 @@ class HaInputButtonForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -77,7 +77,7 @@ class HaInputButtonForm extends LitElement {
     }
     ev.stopPropagation();
     const configValue = (ev.target as any).configValue;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || (ev.target as any).value;
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -85,7 +85,7 @@ class HaInputButtonForm extends LitElement {
     if (!value) {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -102,6 +102,10 @@ class HaInputButtonForm extends LitElement {
         .row {
           padding: 16px 0;
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
       `,
     ];
   }