Add support for input_button / Button Helper (#10974)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
2025-11-10 03:19:44 +00:00 · 2022-01-11 19:24:59 +01:00
parent 3bbe1603eb
commit f852208eff
13 changed files with 320 additions and 0 deletions
--- a/src/panels/config/helpers/forms/ha-input_button-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_button-form.ts
@@ -0,0 +1,114 @@
+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 { InputButton } from "../../../../data/input_button";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("ha-input_button-form")
+class HaInputButtonForm extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public new?: boolean;
+
+  @state() private _name!: string;
+
+  @state() private _icon!: string;
+
+  private _item?: InputButton;
+
+  set item(item: InputButton) {
+    this._item = item;
+    if (item) {
+      this._name = item.name || "";
+      this._icon = item.icon || "";
+    } else {
+      this._name = "";
+      this._icon = "";
+    }
+  }
+
+  public focus() {
+    this.updateComplete.then(() =>
+      (
+        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+      )?.focus()
+    );
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    const nameInvalid = !this._name || this._name.trim() === "";
+
+    return html`
+      <div class="form">
+        <paper-input
+          .value=${this._name}
+          .configValue=${"name"}
+          @value-changed=${this._valueChanged}
+          .label=${this.hass!.localize(
+            "ui.dialogs.helper_settings.generic.name"
+          )}
+          .errorMessage=${this.hass!.localize(
+            "ui.dialogs.helper_settings.required_error_msg"
+          )}
+          .invalid=${nameInvalid}
+          dialogInitialFocus
+        ></paper-input>
+        <ha-icon-picker
+          .value=${this._icon}
+          .configValue=${"icon"}
+          @value-changed=${this._valueChanged}
+          .label=${this.hass!.localize(
+            "ui.dialogs.helper_settings.generic.icon"
+          )}
+        ></ha-icon-picker>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    if (!this.new && !this._item) {
+      return;
+    }
+    ev.stopPropagation();
+    const configValue = (ev.target as any).configValue;
+    const value = ev.detail.value;
+    if (this[`_${configValue}`] === value) {
+      return;
+    }
+    const newValue = { ...this._item };
+    if (!value) {
+      delete newValue[configValue];
+    } else {
+      newValue[configValue] = ev.detail.value;
+    }
+    fireEvent(this, "value-changed", {
+      value: newValue,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .form {
+          color: var(--primary-text-color);
+        }
+        .row {
+          padding: 16px 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-input_button-form": HaInputButtonForm;
+  }
+}