@@ -160,9 +160,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color);
}
- ha-textfield {
- display: block;
- margin-bottom: 24px;
+ ha-input {
+ margin-bottom: var(--ha-space-3);
}
`,
];
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
index e5cd4f9d84..5fda6fd3e7 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
@@ -1,11 +1,12 @@
-import { mdiClose } from "@mdi/js";
+import "@home-assistant/webawesome/dist/components/divider/divider";
+import { mdiClose, mdiPlus } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query } from "lit/decorators";
import { ensureArray } from "../../../../../common/array/ensure-array";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-textfield";
-import type { HaTextField } from "../../../../../components/ha-textfield";
+import "../../../../../components/input/ha-input";
+import type { HaInput } from "../../../../../components/input/ha-input";
import type { ConversationTrigger } from "../../../../../data/automation";
import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../../../types";
@@ -24,7 +25,7 @@ export class HaConversationTrigger
@property({ type: Boolean }) public disabled = false;
- @query("#option_input", true) private _optionInput?: HaTextField;
+ @query("#option_input", true) private _optionInput?: HaInput;
public static get defaultConfig(): ConversationTrigger {
return { trigger: "conversation", command: "" };
@@ -35,31 +36,31 @@ export class HaConversationTrigger
const commands = command ? ensureArray(command) : [];
return html`${commands.length
- ? commands.map(
- (option, index) => html`
-
-
-
- `
- )
+ ? html`${commands.map(
+ (option, index) => html`
+
+
+
+ `
+ )}
`
: nothing}
-
`;
+ >
+
+ `;
}
private _handleKeyAdd(ev: KeyboardEvent) {
@@ -104,14 +111,14 @@ export class HaConversationTrigger
input.value = "";
}
- private async _updateOption(ev: Event) {
+ private async _updateOption(ev: InputEvent) {
const index = (ev.target as any).index;
const command = [
...(Array.isArray(this.trigger.command)
? this.trigger.command
: [this.trigger.command]),
];
- command.splice(index, 1, (ev.target as HaTextField).value);
+ command.splice(index, 1, (ev.target as HaInput).value ?? "");
fireEvent(this, "value-changed", {
value: { ...this.trigger, command },
});
@@ -155,20 +162,8 @@ export class HaConversationTrigger
.option {
margin-top: 4px;
}
- ha-textfield {
- display: block;
- margin-bottom: 8px;
- --textfield-icon-trailing-padding: 0;
- }
- ha-textfield > ha-icon-button {
- position: relative;
- right: -8px;
- --ha-icon-button-size: 36px;
- --mdc-icon-size: 20px;
- color: var(--secondary-text-color);
- inset-inline-start: initial;
- inset-inline-end: -8px;
- direction: var(--direction);
+ ha-input {
+ margin-bottom: var(--ha-space-1);
}
#option_input {
margin-top: 8px;
@@ -177,6 +172,10 @@ export class HaConversationTrigger
margin-top: 8px;
margin-bottom: 8px;
}
+ wa-divider {
+ margin-top: var(--ha-space-2);
+ margin-bottom: var(--ha-space-3);
+ }
`;
}
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
index 0e4dfd1090..ad780f530e 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
@@ -1,8 +1,8 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-textfield";
import "../../../../../components/ha-yaml-editor";
+import "../../../../../components/input/ha-input";
import "../../../../../components/user/ha-users-picker";
import type { EventTrigger } from "../../../../../data/automation";
import type { HomeAssistant } from "../../../../../types";
@@ -24,7 +24,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
protected render() {
const { event_type, event_data, context } = this.trigger;
return html`
-
+ >
-
-
+
{
- const inputElement = ev.target.parentElement as HaTextField;
+ const inputElement = ev.target.parentElement as HaInput;
const url = this.hass.hassUrl(`/api/webhook/${inputElement.value}`);
await copyToClipboard(url);
@@ -229,11 +228,11 @@ export class HaWebhookTrigger extends LitElement {
display: flex;
}
- ha-textfield {
+ ha-input {
flex: 1;
}
- ha-textfield > ha-icon-button {
+ ha-input > ha-icon-button {
--ha-icon-button-size: 24px;
--mdc-icon-size: 18px;
color: var(--secondary-text-color);
diff --git a/src/panels/config/backup/dialogs/dialog-generate-backup.ts b/src/panels/config/backup/dialogs/dialog-generate-backup.ts
index 98c8397b15..a340cb276a 100644
--- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts
@@ -6,6 +6,7 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-dialog-header";
import "../../../../components/ha-expansion-panel";
@@ -14,8 +15,8 @@ import "../../../../components/ha-icon-button-prev";
import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item";
import "../../../../components/ha-select";
-import "../../../../components/ha-textfield";
-import "../../../../components/ha-dialog";
+import "../../../../components/input/ha-input";
+import type { HaInput } from "../../../../components/input/ha-input";
import type {
BackupAgent,
BackupConfig,
@@ -290,7 +291,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
const disabledAgentIds = this._disabledAgentIds();
return html`
-
-
+
@@ -385,10 +386,10 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
};
}
- private _nameChanged(ev) {
+ private _nameChanged(ev: InputEvent) {
this._formData = {
...this._formData!,
- name: ev.target.value,
+ name: (ev.target as HaInput).value ?? "",
};
}
@@ -468,7 +469,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
overflow: hidden;
white-space: nowrap;
}
- ha-textfield {
+ ha-input {
width: 100%;
}
.content {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
index 3b26d00f55..2df7ce2b3a 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
@@ -1,11 +1,11 @@
-import { customElement, property } from "lit/decorators";
import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event";
-import type { HaTextField } from "../../../../../../components/ha-textfield";
+import type { HaInput } from "../../../../../../components/input/ha-input";
-import "../../../../../../components/ha-textfield";
import "../../../../../../components/ha-alert";
+import "../../../../../../components/input/ha-input";
@customElement("zwave-js-add-node-code-input")
export class ZWaveJsAddNodeCodeInput extends LitElement {
@@ -27,14 +27,14 @@ export class ZWaveJsAddNodeCodeInput extends LitElement {
${this.error
? html`${this.error}`
: nothing}
-
+ >
${this.referenceKey
? html`
${this.value.padEnd(5, "ยท")}${this.referenceKey}
@@ -50,24 +50,24 @@ export class ZWaveJsAddNodeCodeInput extends LitElement {
}
private _handleChange(ev: InputEvent): void {
- const inputElement = ev.target as HaTextField;
+ const inputElement = ev.target as HaInput;
if (
this.numeric &&
- (isNaN(Number(inputElement.value)) || inputElement.value.length > 5)
+ (isNaN(Number(inputElement.value)) || inputElement.value!.length > 5)
) {
inputElement.value = this.value;
return;
}
- this.value = (ev.target as HaTextField).value;
+ this.value = (ev.target as HaInput).value ?? "";
fireEvent(this, "value-changed", {
- value: (ev.target as HaTextField).value,
+ value: (ev.target as HaInput).value,
});
}
static styles = css`
- ha-textfield {
+ ha-input {
width: 100%;
}
ha-alert {