Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-01 16:17:21 +01:00
Code Activity

Migrate all from ha-textfield to ha-input (#30349)

Browse Source
This commit is contained in:
Wendelin
2026-04-01 08:37:49 +02:00
committed by GitHub
parent 514cb9da9d
commit ab20383a3a
70 changed files with 696 additions and 942 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
cast/src/launcher/layout/hc-connect.ts
View File

@@ -26,7 +26,7 @@ import "../../../../src/components/ha-svg-icon";
import "../../../../src/layouts/hass-loading-screen";
import { registerServiceWorker } from "../../../../src/util/register-service-worker";
import "./hc-layout";
import "../../../../src/components/ha-textfield";
import "../../../../src/components/input/ha-input";
import "../../../../src/components/ha-button";
const seeFAQ = (qid) => html`
@@ -123,11 +123,11 @@ export class HcConnect extends LitElement {
To get started, enter your Home Assistant URL and click authorize.
If you want a preview instead, click the show demo button.
</p>
<ha-textfield
<ha-input
label="Home Assistant URL"
placeholder="https://abcdefghijklmnop.ui.nabu.casa"
@keydown=${this._handleInputKeyDown}
></ha-textfield>
></ha-input>
${this.error ? html` <p class="error">${this.error}</p> ` : ""}
</div>
<div class="card-actions">
@@ -204,7 +204,7 @@ export class HcConnect extends LitElement {
}
private async _handleConnect() {
const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
const inputEl = this.shadowRoot!.querySelector("ha-input")!;
const value = inputEl.value || "";
this.error = undefined;
@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
flex: 1;
}
ha-textfield {
ha-input {
width: 100%;
}
`;

294
src/components/ha-textfield.ts
View File

@@ -1,294 +0,0 @@
import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query } from "lit/decorators";
import "./input/ha-input";
import type { HaInput } from "./input/ha-input";
/**
* Legacy wrapper around ha-input that preserves the mwc-textfield API.
* New code should use ha-input directly.
* @deprecated Use ha-input instead.
*/
@customElement("ha-textfield")
export class HaTextField extends LitElement {
@property({ type: String })
public value = "";
@property({ type: String })
public type:
| "text"
| "search"
| "tel"
| "url"
| "email"
| "password"
| "date"
| "month"
| "week"
| "time"
| "datetime-local"
| "number"
| "color" = "text";
@property({ type: String })
public label = "";
@property({ type: String })
public placeholder = "";
@property({ type: String })
public prefix = "";
@property({ type: String })
public suffix = "";
@property({ type: Boolean })
// @ts-ignore
public icon = false;
@property({ type: Boolean })
// @ts-ignore
// eslint-disable-next-line lit/attribute-names
public iconTrailing = false;
@property({ type: Boolean })
public disabled = false;
@property({ type: Boolean })
public required = false;
@property({ type: Number, attribute: "minlength" })
public minLength = -1;
@property({ type: Number, attribute: "maxlength" })
public maxLength = -1;
@property({ type: Boolean, reflect: true })
public outlined = false;
@property({ type: String })
public helper = "";
@property({ type: Boolean, attribute: "validateoninitialrender" })
public validateOnInitialRender = false;
@property({ type: String, attribute: "validationmessage" })
public validationMessage = "";
@property({ type: Boolean, attribute: "autovalidate" })
public autoValidate = false;
@property({ type: String })
public pattern = "";
@property()
public min: number | string = "";
@property()
public max: number | string = "";
@property()
public step: number | "any" | null = null;
@property({ type: Number })
public size: number | null = null;
@property({ type: Boolean, attribute: "helperpersistent" })
public helperPersistent = false;
@property({ attribute: "charcounter" })
public charCounter: boolean | "external" | "internal" = false;
@property({ type: Boolean, attribute: "endaligned" })
public endAligned = false;
@property({ type: String, attribute: "inputmode" })
public inputMode = "";
@property({ type: Boolean, reflect: true, attribute: "readonly" })
public readOnly = false;
@property({ type: String })
public name = "";
@property({ type: String })
// eslint-disable-next-line lit/no-native-attributes
public autocapitalize = "";
// --- ha-textfield-specific properties ---
@property({ type: Boolean })
public invalid = false;
@property({ attribute: "error-message" })
public errorMessage?: string;
@property()
public autocomplete?: string;
@property({ type: Boolean })
public autocorrect = true;
@property({ attribute: "input-spellcheck" })
public inputSpellcheck?: string;
@query("ha-input")
private _haInput?: HaInput;
static shadowRootOptions: ShadowRootInit = {
mode: "open",
delegatesFocus: true,
};
public get formElement(): HTMLInputElement | undefined {
return (this._haInput as any)?._input?.input;
}
public select(): void {
this._haInput?.select();
}
public setSelectionRange(
selectionStart: number,
selectionEnd: number,
selectionDirection?: "forward" | "backward" | "none"
): void {
this._haInput?.setSelectionRange(
selectionStart,
selectionEnd,
selectionDirection
);
}
public setRangeText(
replacement: string,
start?: number,
end?: number,
selectMode?: "select" | "start" | "end" | "preserve"
): void {
this._haInput?.setRangeText(replacement, start, end, selectMode);
}
public checkValidity(): boolean {
return this._haInput?.checkValidity() ?? true;
}
public reportValidity(): boolean {
return this._haInput?.reportValidity() ?? true;
}
public setCustomValidity(message: string): void {
this.validationMessage = message;
this.invalid = !!message;
}
/** No-op. Preserved for backward compatibility. */
public layout(): void {
// no-op — mwc-textfield needed this for notched outline recalculation
}
protected override firstUpdated(changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties);
if (this.validateOnInitialRender) {
this.reportValidity();
}
}
protected override updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
if (changedProperties.has("invalid") && this._haInput) {
if (
this.invalid ||
(changedProperties.get("invalid") !== undefined && !this.invalid)
) {
this.reportValidity();
}
}
}
protected override render(): TemplateResult {
const errorMsg = this.errorMessage || this.validationMessage;
return html`
<ha-input
.type=${this.type}
.value=${this.value || undefined}
.label=${this.label}
.placeholder=${this.placeholder}
.disabled=${this.disabled}
.required=${this.required}
.readonly=${this.readOnly}
.pattern=${this.pattern || undefined}
.minlength=${this.minLength > 0 ? this.minLength : undefined}
.maxlength=${this.maxLength > 0 ? this.maxLength : undefined}
.min=${this.min !== "" ? this.min : undefined}
.max=${this.max !== "" ? this.max : undefined}
.step=${this.step ?? undefined}
.name=${this.name || undefined}
.autocomplete=${this.autocomplete}
.autocorrect=${this.autocorrect}
.spellcheck=${this.inputSpellcheck === "true"}
.inputmode=${this.inputMode}
.autocapitalize=${this.autocapitalize || ""}
.invalid=${this.invalid}
.validationMessage=${errorMsg || ""}
.autoValidate=${this.autoValidate}
.hint=${this.helper}
.withoutSpinButtons=${this.type === "number"}
.insetLabel=${this.prefix}
@input=${this._onInput}
@change=${this._onChange}
>
${this.icon
? html`<slot name="leadingIcon" slot="start"></slot>`
: nothing}
${this.prefix
? html`<span class="prefix" slot="start">${this.prefix}</span>`
: nothing}
${this.suffix
? html`<span class="suffix" slot="end">${this.suffix}</span>`
: nothing}
${this.iconTrailing
? html`<slot name="trailingIcon" slot="end"></slot>`
: nothing}
</ha-input>
`;
}
private _onInput(): void {
this.value = this._haInput?.value ?? "";
}
private _onChange(): void {
this.value = this._haInput?.value ?? "";
}
static override styles = css`
:host {
display: inline-flex;
flex-direction: column;
outline: none;
}
ha-input {
--ha-input-padding-bottom: 0;
width: 100%;
}
.prefix,
.suffix {
color: var(--secondary-text-color);
}
.prefix {
padding-top: var(--ha-space-3);
margin-inline-end: var(--text-field-prefix-padding-right);
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-textfield": HaTextField;
}
}

9
src/components/input/ha-input.ts
View File

@@ -235,7 +235,8 @@ export class HaInput extends LitElement {
this,
"label",
"hint",
"input"
"input",
"start"
);
static shadowRootOptions: ShadowRootInit = {
@@ -318,6 +319,8 @@ export class HaInput extends LitElement {
? false
: this._hasSlotController.test("hint");
const hasStartSlot = this._hasSlotController.test("start");
return html`
<wa-input
.type=${this.type}
@@ -348,7 +351,8 @@ export class HaInput extends LitElement {
invalid: this.invalid || this._invalid,
"label-raised":
(this.value !== undefined && this.value !== "") ||
(this.label && this.placeholder),
(this.label && this.placeholder) ||
(hasStartSlot && this.insetLabel),
"no-label": !this.label,
"hint-hidden":
!this.hint &&
@@ -589,6 +593,7 @@ export class HaInput extends LitElement {
}
:host([type="color"]) wa-input::part(input) {
padding-top: var(--ha-space-6);
padding-bottom: 2px;
cursor: pointer;
}
:host([type="color"]) wa-input.no-label::part(input) {

2
src/dialogs/config-flow/previews/entity-preview-row.ts
View File

@@ -338,7 +338,7 @@ class EntityPreviewRow extends LitElement {
.autoValidate=${stateObj.attributes.pattern}
.pattern=${stateObj.attributes.pattern}
.type=${stateObj.attributes.mode}
placeholder=${this.hass!.localize("ui.card.text.emtpy_value")}
.placeholder=${this.hass!.localize("ui.card.text.empty_value")}
></ha-input>
`;
}

1
src/panels/config/automation/action/types/ha-automation-action-parallel.ts
View File

@@ -2,7 +2,6 @@ import type { CSSResultGroup } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-textfield";
import type { Action, ParallelAction } from "../../../../../data/script";
import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types";

5
src/panels/config/automation/action/types/ha-automation-action-sequence.ts
View File

@@ -1,14 +1,13 @@
import type { CSSResultGroup } from "lit";
import { html, LitElement } from "lit";
import { query, customElement, property } from "lit/decorators";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-textfield";
import type { Action, SequenceAction } from "../../../../../data/script";
import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types";
import "../ha-automation-action";
import type { ActionElement } from "../ha-automation-action-row";
import type HaAutomationAction from "../ha-automation-action";
import type { ActionElement } from "../ha-automation-action-row";
@customElement("ha-automation-action-sequence")
export class HaSequenceAction extends LitElement implements ActionElement {

25
src/panels/config/blueprint/dialog-import-blueprint.ts
View File

@@ -2,23 +2,23 @@ import { mdiClose, mdiOpenInNew } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { documentationUrl } from "../../../util/documentation-url";
import { withViewTransition } from "../../../common/util/view-transition";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-code-editor";
import "../../../components/ha-dialog-header";
import "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
import "../../../components/ha-dialog-header";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-markdown";
import "../../../components/ha-spinner";
import "../../../components/ha-textfield";
import "../../../components/ha-dialog";
import type { HaTextField } from "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import type { BlueprintImportResult } from "../../../data/blueprint";
import { importBlueprint, saveBlueprint } from "../../../data/blueprint";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { withViewTransition } from "../../../common/util/view-transition";
import { documentationUrl } from "../../../util/documentation-url";
@customElement("ha-dialog-import-blueprint")
class DialogImportBlueprint extends LitElement {
@@ -42,7 +42,7 @@ class DialogImportBlueprint extends LitElement {
@state() private _sourceUrlWarning = false;
@query("#input") private _input?: HaTextField;
@query("#input") private _input?: HaInput;
public showDialog(params): void {
this._params = params;
@@ -131,14 +131,14 @@ class DialogImportBlueprint extends LitElement {
</ul>
`
: html`
<ha-textfield
<ha-input
id="input"
.value=${this._result.suggested_filename || ""}
.label=${this.hass.localize(
"ui.panel.config.blueprint.add.file_name"
)}
autofocus
></ha-textfield>
></ha-input>
`}
<ha-expansion-panel
.header=${this.hass.localize(
@@ -185,14 +185,14 @@ class DialogImportBlueprint extends LitElement {
)}
<ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-button>
<ha-textfield
<ha-input
id="input"
.label=${this.hass.localize(
"ui.panel.config.blueprint.add.url"
)}
.value=${this._url || ""}
autofocus
></ha-textfield>
></ha-input>
`}
</div>
<ha-dialog-footer slot="footer">
@@ -328,8 +328,7 @@ class DialogImportBlueprint extends LitElement {
margin-top: 0;
margin-bottom: var(--ha-space-2);
}
ha-textfield {
display: block;
ha-input {
margin-top: var(--ha-space-6);
}
ha-alert {

2
src/panels/config/category/dialog-assign-category.ts
View File

@@ -53,7 +53,6 @@ class DialogAssignCategory extends LitElement {
const entry = this._params.entityReg.categories[this._params.scope];
return html`
<ha-dialog
.hass=${this.hass}
.open=${this._open}
header-title=${entry
? this.hass.localize("ui.panel.config.category.assign.edit")
@@ -127,7 +126,6 @@ class DialogAssignCategory extends LitElement {
return [
haStyleDialog,
css`
ha-textfield,
ha-icon-picker {
display: block;
margin-bottom: 16px;

18
src/panels/config/category/dialog-category-registry-detail.ts
View File

@@ -7,7 +7,8 @@ import "../../../components/ha-button";
import "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
import "../../../components/ha-icon-picker";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import type {
CategoryRegistryEntry,
CategoryRegistryEntryMutableParams,
@@ -15,6 +16,7 @@ import type {
import { localizeContext } from "../../../data/context";
import { DialogMixin } from "../../../dialogs/dialog-mixin";
import { haStyleDialog } from "../../../resources/styles";
import type { ValueChangedEvent } from "../../../types";
import type { CategoryRegistryDetailDialogParams } from "./show-dialog-category-registry-detail";
@customElement("dialog-category-registry-detail")
@@ -62,7 +64,7 @@ class DialogCategoryDetail extends DialogMixin<CategoryRegistryDetailDialogParam
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
@input=${this._nameChanged}
.label=${this.localize("ui.panel.config.category.editor.name")}
@@ -71,7 +73,7 @@ class DialogCategoryDetail extends DialogMixin<CategoryRegistryDetailDialogParam
)}
required
autofocus
></ha-textfield>
></ha-input>
<ha-icon-picker
.value=${this._icon ?? undefined}
@@ -105,12 +107,12 @@ class DialogCategoryDetail extends DialogMixin<CategoryRegistryDetailDialogParam
return this._name.trim() !== "";
}
private _nameChanged(ev) {
private _nameChanged(ev: InputEvent) {
this._error = undefined;
this._name = ev.target.value;
this._name = (ev.target as HaInput).value ?? "";
}
private _iconChanged(ev) {
private _iconChanged(ev: ValueChangedEvent<string>) {
this._error = undefined;
this._icon = ev.detail.value;
}
@@ -144,10 +146,8 @@ class DialogCategoryDetail extends DialogMixin<CategoryRegistryDetailDialogParam
return [
haStyleDialog,
css`
ha-textfield,
ha-icon-picker {
display: block;
margin-bottom: 16px;
margin-bottom: var(--ha-space-3);
}
`,
];

18
src/panels/config/cloud/forgot-password/cloud-forgot-password-card.ts
View File

@@ -2,15 +2,15 @@ import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import "../../../../components/buttons/ha-progress-button";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
import type { HaTextField } from "../../../../components/ha-textfield";
import "../../../../components/ha-textfield";
import { haStyle } from "../../../../resources/styles";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import { cloudForgotPassword } from "../../../../data/cloud";
import { forgotPasswordHaCloud } from "../../../../data/onboarding";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@customElement("cloud-forgot-password-card")
@@ -31,7 +31,7 @@ export class CloudForgotPasswordCard extends LitElement {
@state() private _error?: string;
@query("#email", true) public emailField!: HaTextField;
@query("#email", true) public emailField!: HaInput;
protected render(): TemplateResult {
if (this.cardLess) {
@@ -59,7 +59,7 @@ export class CloudForgotPasswordCard extends LitElement {
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing}
<ha-textfield
<ha-input
autofocus
id="email"
label=${this.localize(`ui.panel.${this.translationKeyPanel}.email`)}
@@ -71,7 +71,7 @@ export class CloudForgotPasswordCard extends LitElement {
.validationMessage=${this.localize(
`ui.panel.${this.translationKeyPanel}.email_error_msg`
)}
></ha-textfield>
></ha-input>
</div>
<div class="card-actions">
<ha-progress-button
@@ -126,7 +126,7 @@ export class CloudForgotPasswordCard extends LitElement {
private async _handleEmailPasswordReset() {
const emailField = this.emailField;
const email = emailField.value;
const email = emailField.value ?? "";
if (!emailField.reportValidity()) {
emailField.focus();
@@ -150,7 +150,7 @@ export class CloudForgotPasswordCard extends LitElement {
h1 {
margin: 0;
}
ha-textfield {
ha-input {
width: 100%;
}
.card-actions {

32
src/panels/config/core/ha-config-section-general.ts
View File

@@ -7,8 +7,8 @@ import { navigate } from "../../../common/navigate";
import "../../../components/buttons/ha-progress-button";
import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-checkbox";
import type { HaCheckbox } from "../../../components/ha-checkbox";
import "../../../components/ha-country-picker";
@@ -17,14 +17,14 @@ import "../../../components/ha-formfield";
import "../../../components/ha-language-picker";
import "../../../components/ha-radio";
import type { HaRadio } from "../../../components/ha-radio";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
import "../../../components/ha-timezone-picker";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import "../../../components/map/ha-map";
import type { ConfigUpdateValues } from "../../../data/core";
import { saveCoreConfig } from "../../../data/core";
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-subpage";
import "../../../components/map/ha-map";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant, ValueChangedEvent } from "../../../types";
@@ -101,7 +101,7 @@ class HaConfigSectionGeneral extends LitElement {
)}
>
<div class="card-content">
<ha-textfield
<ha-input
name="name"
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.location_name"
@@ -109,7 +109,7 @@ class HaConfigSectionGeneral extends LitElement {
.disabled=${disabled}
.value=${this._name}
@change=${this._handleChange}
></ha-textfield>
></ha-input>
</div>
<div class="card-actions">
<ha-progress-button
@@ -186,20 +186,24 @@ class HaConfigSectionGeneral extends LitElement {
@value-changed=${this._handleValueChanged}
hide-clear-icon
></ha-timezone-picker>
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.elevation"
)}
name="elevation"
type="number"
.disabled=${disabled}
.value=${this._elevation}
.suffix=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.elevation_meters"
)}
.value=${this._elevation !== undefined
? String(this._elevation)
: ""}
@change=${this._handleChange}
>
</ha-textfield>
<span slot="end"
>${this.hass.localize(
"ui.panel.config.core.section.core.core_config.elevation_meters"
)}</span
>
</ha-input>
<div>
<div>
${this.hass.localize(
@@ -358,8 +362,8 @@ class HaConfigSectionGeneral extends LitElement {
this[`_${target.getAttribute("name")}`] = ev.detail.value;
}
private _handleChange(ev: Event) {
const target = ev.currentTarget as HaTextField;
private _handleChange(ev: InputEvent) {
const target = ev.currentTarget as HaInput;
this[`_${target.name}`] = target.value;
}

23
src/panels/config/developer-tools/event/developer-tools-event.ts
View File

@@ -1,17 +1,18 @@
import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, css, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../../components/ha-yaml-editor";
import "../../../../components/ha-textfield";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-card";
import "../../../../components/ha-yaml-editor";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import { documentationUrl } from "../../../../util/documentation-url";
import "./event-subscribe-card";
import "./events-list";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import { fireEvent } from "../../../../common/dom/fire_event";
@customElement("developer-tools-event")
class HaPanelDevEvent extends LitElement {
@@ -55,7 +56,7 @@ class HaPanelDevEvent extends LitElement {
</a>
</p>
<div class="inputs">
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.developer-tools.tabs.events.type"
)}
@@ -63,7 +64,7 @@ class HaPanelDevEvent extends LitElement {
required
.value=${this._eventType}
@change=${this._eventTypeChanged}
></ha-textfield>
></ha-input>
<p>
${this.hass.localize(
"ui.panel.config.developer-tools.tabs.events.data"
@@ -117,8 +118,8 @@ class HaPanelDevEvent extends LitElement {
this._selectedEventType = ev.detail.eventType;
}
private _eventTypeChanged(ev) {
this._eventType = ev.target.value;
private _eventTypeChanged(ev: InputEvent) {
this._eventType = (ev.target as HaInput).value ?? "";
}
private _yamlChanged(ev) {
@@ -178,10 +179,6 @@ class HaPanelDevEvent extends LitElement {
margin-top: var(--ha-space-2);
}
ha-textfield {
display: block;
}
event-subscribe-card {
display: block;
margin-top: var(--ha-space-4);

33
src/panels/config/developer-tools/event/event-subscribe-card.ts
View File

@@ -4,11 +4,12 @@ import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { formatTime } from "../../../../common/datetime/format_time";
import "../../../../components/ha-card";
import "../../../../components/ha-textfield";
import "../../../../components/ha-yaml-editor";
import "../../../../components/ha-button";
import "../../../../components/ha-alert";
import "../../../../components/ha-button";
import "../../../../components/ha-card";
import "../../../../components/ha-yaml-editor";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import type { HomeAssistant } from "../../../../types";
@customElement("event-subscribe-card")
@@ -62,7 +63,7 @@ class EventSubscribeCard extends LitElement {
)}
>
<div class="card-content">
<ha-textfield
<ha-input
.label=${this._subscribed
? this.hass!.localize(
"ui.panel.config.developer-tools.tabs.events.listening_to"
@@ -73,17 +74,16 @@ class EventSubscribeCard extends LitElement {
.disabled=${this._subscribed !== undefined}
.value=${this._eventType}
@input=${this._valueChanged}
></ha-textfield>
<ha-textfield
></ha-input>
<ha-input
.label=${this.hass!.localize(
"ui.panel.config.developer-tools.tabs.events.filter_events"
)}
.value=${this._eventFilter}
.disabled=${this._subscribed !== undefined}
helperPersistent
.helper=${`${this.hass!.localize("ui.panel.config.developer-tools.tabs.events.filter_helper")}${this._ignoredEventsCount ? ` ${this.hass!.localize("ui.panel.config.developer-tools.tabs.events.filter_ignored", { count: this._ignoredEventsCount })}` : ""}`}
.hint=${`${this.hass!.localize("ui.panel.config.developer-tools.tabs.events.filter_helper")}${this._ignoredEventsCount ? ` ${this.hass!.localize("ui.panel.config.developer-tools.tabs.events.filter_ignored", { count: this._ignoredEventsCount })}` : ""}`}
@input=${this._filterChanged}
></ha-textfield>
></ha-input>
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
@@ -144,13 +144,13 @@ class EventSubscribeCard extends LitElement {
`;
}
private _valueChanged(ev): void {
this._eventType = ev.target.value;
private _valueChanged(ev: InputEvent): void {
this._eventType = (ev.target as HaInput).value ?? "";
this._error = undefined;
}
private _filterChanged(ev): void {
this._eventFilter = ev.target.value;
private _filterChanged(ev: InputEvent): void {
this._eventFilter = (ev.target as HaInput).value ?? "";
}
private _testEventFilter(event: HassEvent): boolean {
@@ -231,9 +231,8 @@ class EventSubscribeCard extends LitElement {
}
static styles = css`
ha-textfield {
display: block;
margin-bottom: var(--ha-space-4);
ha-input {
margin-bottom: var(--ha-space-2);
}
.error-message {
margin-top: var(--ha-space-2);

16
src/panels/config/developer-tools/state/developer-tools-state.ts
View File

@@ -24,6 +24,8 @@ import "../../../../components/ha-svg-icon";
import "../../../../components/ha-tip";
import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import "../../../../components/input/ha-input-search";
import type { HaInputSearch } from "../../../../components/input/ha-input-search";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -161,7 +163,7 @@ class HaPanelDevState extends LitElement {
</div>
`
: nothing}
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.developer-tools.tabs.states.state"
)}
@@ -169,11 +171,11 @@ class HaPanelDevState extends LitElement {
autocapitalize="none"
autocomplete="off"
.autocorrect=${false}
input-spellcheck="false"
.spellcheck=${false}
.value=${this._state}
@change=${this._stateChanged}
class="state-input"
></ha-textfield>
></ha-input>
<p>
${this.hass.localize(
"ui.panel.config.developer-tools.tabs.states.state_attributes"
@@ -313,8 +315,8 @@ class HaPanelDevState extends LitElement {
this._expanded = true;
}
private _stateChanged(ev) {
this._state = ev.target.value;
private _stateChanged(ev: InputEvent) {
this._state = (ev.target as HaInput).value ?? "";
}
private _entityFilterChanged(ev: InputEvent) {
@@ -513,10 +515,6 @@ class HaPanelDevState extends LitElement {
--ha-input-padding-bottom: 0;
}
ha-textfield {
display: block;
}
.heading {
display: flex;
justify-content: space-between;

20
src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
View File

@@ -3,14 +3,15 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
import "../../../../components/ha-adaptive-dialog";
import "../../../../components/ha-alert";
import "../../../../components/ha-area-picker";
import "../../../../components/ha-adaptive-dialog";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-labels-picker";
import type { HaSwitch } from "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import type { DeviceRegistryEntry } from "../../../../data/device/device_registry";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -77,7 +78,7 @@ class DialogDeviceRegistryDetail extends LitElement {
? html`<ha-alert alert-type="error">${this._error}</ha-alert> `
: ""}
<div class="form">
<ha-textfield
<ha-input
autofocus
.value=${this._nameByUser}
@input=${this._nameChanged}
@@ -86,7 +87,7 @@ class DialogDeviceRegistryDetail extends LitElement {
)}
.placeholder=${device.name || ""}
.disabled=${this._submitting}
></ha-textfield>
></ha-input>
<ha-area-picker
.hass=${this.hass}
.value=${this._areaId}
@@ -163,9 +164,9 @@ class DialogDeviceRegistryDetail extends LitElement {
`;
}
private _nameChanged(ev): void {
private _nameChanged(ev: InputEvent): void {
this._error = undefined;
this._nameByUser = ev.target.value;
this._nameByUser = (ev.target as HaInput).value ?? "";
}
private _areaPicked(event: CustomEvent): void {
@@ -209,11 +210,12 @@ class DialogDeviceRegistryDetail extends LitElement {
margin-inline-end: auto;
margin-inline-start: initial;
}
ha-textfield,
ha-input,
ha-labels-picker,
ha-area-picker {
display: block;
margin-bottom: 16px;
margin-bottom: var(--ha-space-4);
--ha-input-padding-bottom: 0;
}
ha-switch {
margin-right: 16px;

19
src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts
View File

@@ -5,11 +5,13 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-radio";
import "../../../../components/ha-select";
import "../../../../components/ha-dialog";
import type { HaSelectSelectEvent } from "../../../../components/ha-select";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
import { energyStatisticHelpUrl } from "../../../../data/energy";
import { getStatisticLabel } from "../../../../data/recorder";
@@ -179,7 +181,7 @@ export class DialogEnergyDeviceSettingsWater
)}
></ha-statistic-picker>
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.energy.device_consumption_water.dialog.display_name"
)}
@@ -195,7 +197,7 @@ export class DialogEnergyDeviceSettingsWater
: ""}
@input=${this._nameChanged}
>
</ha-textfield>
</ha-input>
<ha-select
.label=${this.hass.localize(
@@ -255,10 +257,10 @@ export class DialogEnergyDeviceSettingsWater
this._device = newDevice;
}
private _nameChanged(ev) {
private _nameChanged(ev: InputEvent) {
const newDevice = {
...this._device!,
name: ev.target!.value,
name: (ev.target as HaInput).value,
} as DeviceConsumptionEnergyPreference;
if (!newDevice.name) {
delete newDevice.name;
@@ -297,11 +299,12 @@ export class DialogEnergyDeviceSettingsWater
}
ha-select {
display: block;
margin-top: 16px;
margin-top: var(--ha-space-4);
width: 100%;
}
ha-textfield {
margin-top: 16px;
ha-input {
margin-top: var(--ha-space-4);
--ha-input-padding-bottom: 0;
width: 100%;
}
`,

16
src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
View File

@@ -5,14 +5,16 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-radio";
import "../../../../components/ha-select";
import "../../../../components/ha-dialog";
import type {
HaSelectOption,
HaSelectSelectEvent,
} from "../../../../components/ha-select";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
import { energyStatisticHelpUrl } from "../../../../data/energy";
import { getStatisticLabel } from "../../../../data/recorder";
@@ -180,11 +182,10 @@ export class DialogEnergyDeviceSettings
)}
></ha-statistic-picker>
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.energy.device_consumption.dialog.display_name"
)}
type="text"
.disabled=${!this._device}
.value=${this._device?.name || ""}
.placeholder=${this._device
@@ -196,7 +197,7 @@ export class DialogEnergyDeviceSettings
: ""}
@input=${this._nameChanged}
>
</ha-textfield>
</ha-input>
<ha-select
.label=${this.hass.localize(
@@ -256,10 +257,10 @@ export class DialogEnergyDeviceSettings
this._device = newDevice;
}
private _nameChanged(ev) {
private _nameChanged(ev: InputEvent) {
const newDevice = {
...this._device!,
name: ev.target!.value,
name: (ev.target as HaInput).value,
} as DeviceConsumptionEnergyPreference;
if (!newDevice.name) {
delete newDevice.name;
@@ -303,8 +304,9 @@ export class DialogEnergyDeviceSettings
margin-top: var(--ha-space-4);
width: 100%;
}
ha-textfield {
ha-input {
margin-top: var(--ha-space-4);
--ha-input-padding-bottom: 0;
width: 100%;
}
`,

24
src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
View File

@@ -4,14 +4,14 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import "../../../../components/ha-button";
import "../../../../components/ha-markdown";
import "../../../../components/ha-dialog";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { GasSourceTypeEnergyPreference } from "../../../../data/energy";
import {
emptyGasEnergyPreference,
@@ -300,18 +300,22 @@ export class DialogEnergyGasSettings
></ha-radio>
</ha-formfield>
${this._costs === "number"
? html`<ha-textfield
? html`<ha-input
.label=${`${this.hass.localize(
"ui.panel.config.energy.gas.dialog.cost_number_input"
)} ${unitPrice ? ` (${unitPrice})` : ""}`}
class="price-options"
step="any"
type="number"
.value=${this._source.number_energy_price}
.value=${this._source.number_energy_price !== null
? String(this._source.number_energy_price)
: ""}
@change=${this._numberPriceChanged}
.suffix=${unitPrice || ""}
>
</ha-textfield>`
${unitPrice
? html`<span slot="end">${unitPrice}</span>`
: nothing}
</ha-input>`
: ""}
<ha-dialog-footer slot="footer">
@@ -339,10 +343,10 @@ export class DialogEnergyGasSettings
this._costs = input.value as any;
}
private _numberPriceChanged(ev) {
private _numberPriceChanged(ev: InputEvent) {
this._source = {
...this._source!,
number_energy_price: Number(ev.target.value),
number_energy_price: Number((ev.target as HTMLInputElement).value),
entity_energy_price: null,
stat_cost: null,
};

35
src/panels/config/energy/dialogs/dialog-energy-grid-settings.ts
View File

@@ -5,12 +5,12 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import "../../../../components/ha-dialog";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/input/ha-input";
import type {
GridSourceTypeEnergyPreference,
PowerConfig,
@@ -312,16 +312,19 @@ export class DialogEnergyGridSettings
: nothing}
${this._importCostType === "number"
? html`
<ha-textfield
.value=${this._source.number_energy_price ?? ""}
<ha-input
.value=${this._source.number_energy_price !== null
? String(this._source.number_energy_price)
: ""}
.label=${this.hass.localize(
"ui.panel.config.energy.grid.dialog.cost_number_label"
)}
type="number"
step="any"
@input=${this._numberCostChanged}
.suffix=${`${this.hass.config.currency}/kWh`}
></ha-textfield>
>
<span slot="end">${this.hass.config.currency}/kWh</span>
</ha-input>
`
: nothing}
${hasExport
@@ -415,16 +418,19 @@ export class DialogEnergyGridSettings
: nothing}
${this._exportCostType === "number"
? html`
<ha-textfield
.value=${this._source.number_energy_price_export ?? ""}
<ha-input
.value=${this._source.number_energy_price_export !== null
? String(this._source.number_energy_price_export)
: ""}
.label=${this.hass.localize(
"ui.panel.config.energy.grid.dialog.compensation_number_label"
)}
type="number"
step="any"
@input=${this._numberCompensationChanged}
.suffix=${`${this.hass.config.currency}/kWh`}
></ha-textfield>
>
<span slot="end">${this.hass.config.currency}/kWh</span>
</ha-input>
`
: nothing}
`
@@ -628,14 +634,17 @@ export class DialogEnergyGridSettings
haStyleDialog,
css`
ha-statistic-picker,
ha-entity-picker,
ha-textfield {
ha-entity-picker {
display: block;
margin-bottom: var(--ha-space-4);
}
ha-input {
margin-bottom: var(--ha-space-4);
--ha-input-padding-bottom: 0;
}
ha-statistic-picker:last-of-type,
ha-entity-picker:last-of-type,
ha-textfield:last-of-type {
ha-input:last-of-type {
margin-bottom: 0;
}
ha-formfield {

16
src/panels/config/energy/dialogs/dialog-energy-water-settings.ts
View File

@@ -11,7 +11,7 @@ import "../../../../components/ha-radio";
import "../../../../components/ha-markdown";
import "../../../../components/ha-dialog";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { WaterSourceTypeEnergyPreference } from "../../../../data/energy";
import {
emptyWaterEnergyPreference,
@@ -240,18 +240,20 @@ export class DialogEnergyWaterSettings
></ha-radio>
</ha-formfield>
${this._costs === "number"
? html`<ha-textfield
? html`<ha-input
.label=${`${this.hass.localize(
"ui.panel.config.energy.water.dialog.cost_number_input"
)} (${unitPriceFixed})`}
class="price-options"
step="any"
type="number"
.value=${this._source.number_energy_price}
.value=${this._source.number_energy_price !== null
? String(this._source.number_energy_price)
: ""}
@change=${this._numberPriceChanged}
.suffix=${unitPriceFixed}
>
</ha-textfield>`
<span slot="end">${unitPriceFixed}</span>
</ha-input>`
: ""}
<ha-dialog-footer slot="footer">
@@ -279,10 +281,10 @@ export class DialogEnergyWaterSettings
this._costs = input.value as any;
}
private _numberPriceChanged(ev) {
private _numberPriceChanged(ev: InputEvent) {
this._source = {
...this._source!,
number_energy_price: Number(ev.target.value),
number_energy_price: Number((ev.target as HTMLInputElement).value),
entity_energy_price: null,
stat_cost: null,
};

92
src/panels/config/entities/entity-registry-settings-editor.ts
View File

@@ -35,7 +35,7 @@ import type { HaSelectSelectEvent } from "../../../components/ha-select";
import "../../../components/ha-state-icon";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import {
CAMERA_ORIENTATIONS,
CAMERA_SUPPORT_STREAM,
@@ -387,20 +387,21 @@ export class EntityRegistrySettingsEditor extends LitElement {
return html`
${this.hideName
? nothing
: html`<ha-textfield
: html`<ha-input
inset-label
class="name"
.value=${this._name}
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.name"
)}
.disabled=${this.disabled}
.placeholder=${this.entry.original_name}
@input=${this._nameChanged}
></ha-textfield>`}
>
</ha-input>`}
${this.hideIcon
? nothing
: html`
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
@value-changed=${this._iconChanged}
.label=${this.hass.localize(
@@ -594,7 +595,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
: nothing}
${domain === "lock"
? html`
<ha-textfield
<ha-input
.validationMessage=${this.hass.localize(
"ui.dialogs.entity_registry.editor.default_code_error"
)}
@@ -606,12 +607,13 @@ export class EntityRegistrySettingsEditor extends LitElement {
.invalid=${invalidDefaultCode}
.disabled=${this.disabled}
@input=${this._defaultcodeChanged}
></ha-textfield>
password-toggle
></ha-input>
`
: nothing}
${domain === "alarm_control_panel"
? html`
<ha-textfield
<ha-input
.value=${this._defaultCode == null ? "" : this._defaultCode}
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.default_code"
@@ -619,7 +621,8 @@ export class EntityRegistrySettingsEditor extends LitElement {
type="password"
.disabled=${this.disabled}
@input=${this._defaultcodeChanged}
></ha-textfield>
password-toggle
></ha-input>
`
: nothing}
${domain === "calendar"
@@ -741,33 +744,33 @@ export class EntityRegistrySettingsEditor extends LitElement {
</ha-select>
`
: nothing}
<ha-textfield
<ha-input
class="entityId"
.value=${computeObjectId(this._entityId)}
.prefix=${domain + "."}
inset-label
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_id"
)}
.disabled=${this.disabled}
required
@input=${this._entityIdChanged}
iconTrailing
autocapitalize="none"
autocomplete="off"
.autocorrect=${false}
input-spellcheck="false"
.spellcheck=${false}
>
<div class="layout horizontal" slot="trailingIcon">
<ha-icon-button
@click=${this._restoreEntityId}
.path=${mdiRestore}
></ha-icon-button>
<ha-icon-button
@click=${this._copyEntityId}
.path=${mdiContentCopy}
></ha-icon-button>
</div>
</ha-textfield>
<span class="input-prefix" slot="start">${domain + "."}</span>
<ha-icon-button
slot="end"
@click=${this._restoreEntityId}
.path=${mdiRestore}
></ha-icon-button>
<ha-icon-button
slot="end"
@click=${this._copyEntityId}
.path=${mdiContentCopy}
></ha-icon-button>
</ha-input>
${!this.entry.device_id
? html`<ha-area-picker
.hass=${this.hass}
@@ -1313,9 +1316,9 @@ export class EntityRegistrySettingsEditor extends LitElement {
});
}
private _nameChanged(ev): void {
private _nameChanged(ev: InputEvent): void {
fireEvent(this, "change");
this._name = ev.target.value;
this._name = (ev.target as HTMLInputElement).value;
}
private _iconChanged(ev: CustomEvent): void {
@@ -1337,9 +1340,9 @@ export class EntityRegistrySettingsEditor extends LitElement {
});
}
private _entityIdChanged(ev): void {
private _entityIdChanged(ev: InputEvent): void {
fireEvent(this, "change");
this._entityId = `${computeDomain(this._origEntityId)}.${ev.target.value}`;
this._entityId = `${computeDomain(this._origEntityId)}.${(ev.target as HTMLInputElement).value}`;
}
private _deviceClassChanged(ev: HaSelectSelectEvent<string, true>): void {
@@ -1352,9 +1355,12 @@ export class EntityRegistrySettingsEditor extends LitElement {
this._unit_of_measurement = ev.detail.value;
}
private _defaultcodeChanged(ev): void {
private _defaultcodeChanged(ev: InputEvent): void {
fireEvent(this, "change");
this._defaultCode = ev.target.value === "" ? null : ev.target.value;
this._defaultCode =
(ev.target as HTMLInputElement).value === ""
? null
: (ev.target as HTMLInputElement).value;
}
private _calendarColorChanged(ev: CustomEvent): void {
@@ -1590,24 +1596,28 @@ export class EntityRegistrySettingsEditor extends LitElement {
:host {
display: block;
}
ha-textfield.entityId {
--text-field-prefix-padding-right: 0;
--textfield-icon-trailing-padding: 0;
.input-prefix {
color: var(--secondary-text-color);
margin: var(--ha-space-3) 0 0;
}
ha-textfield.entityId ha-icon-button {
position: relative;
right: calc(var(--ha-space-2) * -1);
ha-input.entityId,
ha-input.name {
--ha-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: calc(var(--ha-space-2) * -1);
direction: var(--direction);
}
ha-input.name {
--ha-input-start-max-width: 35%;
}
ha-input.entityId ha-icon-button:last-child {
margin-inline-start: 0;
}
ha-md-list-item ha-select {
width: auto;
}
ha-textfield,
ha-input,
ha-icon-picker,
ha-select,
ha-area-picker {

38
src/panels/config/helpers/forms/ha-counter-form.ts
View File

@@ -6,7 +6,7 @@ import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import type { HaSwitch } from "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { Counter } from "../../../../data/counter";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -71,23 +71,22 @@ class HaCounterForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
.configValue=${"name"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
dialogInitialFocus
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
@@ -96,8 +95,8 @@ class HaCounterForm extends LitElement {
)}
.disabled=${this.disabled}
></ha-icon-picker>
<ha-textfield
.value=${this._minimum}
<ha-input
.value=${this._minimum !== undefined ? String(this._minimum) : ""}
.configValue=${"minimum"}
type="number"
@input=${this._valueChanged}
@@ -105,9 +104,9 @@ class HaCounterForm extends LitElement {
"ui.dialogs.helper_settings.counter.minimum"
)}
.disabled=${this.disabled}
></ha-textfield>
<ha-textfield
.value=${this._maximum}
></ha-input>
<ha-input
.value=${this._maximum !== undefined ? String(this._maximum) : ""}
.configValue=${"maximum"}
type="number"
@input=${this._valueChanged}
@@ -115,9 +114,9 @@ class HaCounterForm extends LitElement {
"ui.dialogs.helper_settings.counter.maximum"
)}
.disabled=${this.disabled}
></ha-textfield>
<ha-textfield
.value=${this._initial}
></ha-input>
<ha-input
.value=${this._initial !== undefined ? String(this._initial) : ""}
.configValue=${"initial"}
type="number"
@input=${this._valueChanged}
@@ -125,15 +124,15 @@ class HaCounterForm extends LitElement {
"ui.dialogs.helper_settings.counter.initial"
)}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-expansion-panel
header=${this.hass.localize(
"ui.dialogs.helper_settings.generic.advanced_settings"
)}
outlined
>
<ha-textfield
.value=${this._step}
<ha-input
.value=${this._step !== undefined ? String(this._step) : ""}
.configValue=${"step"}
type="number"
@input=${this._valueChanged}
@@ -141,7 +140,7 @@ class HaCounterForm extends LitElement {
"ui.dialogs.helper_settings.counter.step"
)}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<div class="row">
<ha-switch
.checked=${this._restore}
@@ -209,9 +208,8 @@ class HaCounterForm extends LitElement {
margin-inline-start: 16px;
margin-inline-end: initial;
}
ha-textfield {
display: block;
margin: 8px 0;
ha-input {
margin: var(--ha-space-2) 0;
}
`,
];

16
src/panels/config/helpers/forms/ha-input_boolean-form.ts
View File

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing } 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 "../../../../components/input/ha-input";
import type { InputBoolean } from "../../../../data/input_boolean";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -48,23 +48,22 @@ class HaInputBooleanForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
.configValue=${"name"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
dialogInitialFocus
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
@@ -106,11 +105,10 @@ class HaInputBooleanForm extends LitElement {
color: var(--primary-text-color);
}
.row {
padding: 16px 0;
padding: var(--ha-space-4) 0;
}
ha-textfield {
display: block;
margin: 8px 0;
ha-input {
margin: var(--ha-space-2) 0;
}
`,
];

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

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing } 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 "../../../../components/input/ha-input";
import type { InputButton } from "../../../../data/input_button";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -48,21 +48,21 @@ class HaInputButtonForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
.configValue=${"name"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
dialogInitialFocus
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
@@ -106,11 +106,10 @@ class HaInputButtonForm extends LitElement {
color: var(--primary-text-color);
}
.row {
padding: 16px 0;
padding: var(--ha-space-4) 0;
}
ha-textfield {
display: block;
margin: 8px 0;
ha-input {
margin: var(--ha-space-2) 0;
}
`,
];

15
src/panels/config/helpers/forms/ha-input_datetime-form.ts
View File

@@ -6,7 +6,7 @@ import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { InputDateTime } from "../../../../data/input_datetime";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -62,21 +62,21 @@ class HaInputDateTimeForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
.configValue=${"name"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
dialogInitialFocus
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
@@ -174,11 +174,10 @@ class HaInputDateTimeForm extends LitElement {
color: var(--primary-text-color);
}
.row {
padding: 16px 0;
padding: var(--ha-space-4) 0;
}
ha-textfield {
display: block;
margin: 8px 0;
ha-input {
margin: var(--ha-space-2) 0;
}
`,
];

40
src/panels/config/helpers/forms/ha-input_number-form.ts
View File

@@ -7,7 +7,7 @@ import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { InputNumber } from "../../../../data/input_number";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -78,23 +78,22 @@ class HaInputNumberForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
.configValue=${"name"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
dialogInitialFocus
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
@@ -103,8 +102,8 @@ class HaInputNumberForm extends LitElement {
)}
.disabled=${this.disabled}
></ha-icon-picker>
<ha-textfield
.value=${this._min}
<ha-input
.value=${this._min !== undefined ? String(this._min) : ""}
.configValue=${"min"}
type="number"
step="any"
@@ -113,9 +112,9 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.input_number.min"
)}
.disabled=${this.disabled}
></ha-textfield>
<ha-textfield
.value=${this._max}
></ha-input>
<ha-input
.value=${this._max !== undefined ? String(this._max) : ""}
.configValue=${"max"}
type="number"
step="any"
@@ -124,7 +123,7 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.input_number.max"
)}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-expansion-panel
header=${this.hass.localize(
"ui.dialogs.helper_settings.generic.advanced_settings"
@@ -162,8 +161,8 @@ class HaInputNumberForm extends LitElement {
></ha-radio>
</ha-formfield>
</div>
<ha-textfield
.value=${this._step}
<ha-input
.value=${this._step !== undefined ? String(this._step) : ""}
.configValue=${"step"}
type="number"
step="any"
@@ -172,9 +171,9 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.input_number.step"
)}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-textfield
<ha-input
.value=${this._unit_of_measurement || ""}
.configValue=${"unit_of_measurement"}
@input=${this._valueChanged}
@@ -182,7 +181,7 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.input_number.unit_of_measurement"
)}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
</ha-expansion-panel>
</div>
`;
@@ -227,10 +226,15 @@ class HaInputNumberForm extends LitElement {
.form {
color: var(--primary-text-color);
}
ha-input {
--ha-input-padding-bottom: 0;
}
ha-textfield {
ha-icon-picker,
ha-input:not([required]) {
display: block;
margin-bottom: 8px;
margin-bottom: var(--ha-space-5);
--ha-input-padding-bottom: 0;
}
`,
];

61
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@@ -1,4 +1,4 @@
import { mdiDelete, mdiDragHorizontalVariant } from "@mdi/js";
import { mdiDelete, mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@@ -10,8 +10,9 @@ import "../../../../components/ha-icon-picker";
import "../../../../components/ha-list";
import "../../../../components/ha-list-item";
import "../../../../components/ha-sortable";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import "../../../../components/ha-svg-icon";
import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import type { InputSelect } from "../../../../data/input_select";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
@@ -33,7 +34,7 @@ class HaInputSelectForm extends LitElement {
@state() private _options: string[] = [];
@query("#option_input", true) private _optionInput?: HaTextField;
@query("#option_input", true) private _optionInput?: HaInput;
private _optionMoved(ev: CustomEvent): void {
ev.stopPropagation();
@@ -75,9 +76,9 @@ class HaInputSelectForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
dialogInitialFocus
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
@@ -89,9 +90,8 @@ class HaInputSelectForm extends LitElement {
.configValue=${"name"}
@input=${this._valueChanged}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
@@ -138,17 +138,11 @@ class HaInputSelectForm extends LitElement {
</ha-list-item>
`
)
: html`
<ha-list-item noninteractive>
${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.no_options"
)}
</ha-list-item>
`}
: nothing}
</ha-list>
</ha-sortable>
<div class="layout horizontal center">
<ha-textfield
<ha-input
class="flex-auto"
id="option_input"
.label=${this.hass!.localize(
@@ -156,16 +150,17 @@ class HaInputSelectForm extends LitElement {
)}
@keydown=${this._handleKeyAdd}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-button
size="small"
appearance="plain"
appearance="filled"
@click=${this._addOption}
.disabled=${this.disabled}
>${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.add"
)}</ha-button
>
)}
<ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
</ha-button>
</div>
</div>
`;
@@ -244,29 +239,27 @@ class HaInputSelectForm extends LitElement {
.option {
border: 1px solid var(--divider-color);
border-radius: var(--ha-border-radius-sm);
margin-top: 4px;
margin-top: var(--ha-space-1);
--ha-icon-button-size: 24px;
--mdc-ripple-color: transparent;
--mdc-list-side-padding: 16px;
--mdc-list-side-padding: var(--ha-space-4);
cursor: default;
background-color: var(--card-background-color);
}
ha-textfield {
display: block;
margin-bottom: 8px;
ha-input {
--ha-input-padding-bottom: 0;
}
#option_input {
margin-top: 8px;
margin-top: var(--ha-space-2);
}
.header {
margin-top: 8px;
margin-bottom: 8px;
margin-top: var(--ha-space-2);
}
.handle {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
padding-right: 12px;
padding-inline-end: 12px;
padding-right: var(--ha-space-3);
padding-inline-end: var(--ha-space-3);
padding-inline-start: initial;
}
.handle ha-svg-icon {
@@ -277,6 +270,14 @@ class HaInputSelectForm extends LitElement {
display: flex;
align-items: center;
}
ha-icon-picker {
display: block;
margin-bottom: var(--ha-space-5);
}
ha-button {
margin-inline-start: var(--ha-space-3);
margin-top: var(--ha-space-1);
}
`,
];
}

41
src/panels/config/helpers/forms/ha-input_text-form.ts
View File

@@ -8,7 +8,7 @@ import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { InputText } from "../../../../data/input_text";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -68,21 +68,21 @@ class HaInputTextForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
.configValue=${"name"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
dialogInitialFocus
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
@@ -99,8 +99,8 @@ class HaInputTextForm extends LitElement {
)}
outlined
>
<ha-textfield
.value=${this._min}
<ha-input
.value=${this._min !== undefined ? String(this._min) : ""}
.configValue=${"min"}
type="number"
min="0"
@@ -110,9 +110,9 @@ class HaInputTextForm extends LitElement {
"ui.dialogs.helper_settings.input_text.min"
)}
.disabled=${this.disabled}
></ha-textfield>
<ha-textfield
.value=${this._max}
></ha-input>
<ha-input
.value=${this._max !== undefined ? String(this._max) : ""}
.configValue=${"max"}
min="0"
max="255"
@@ -121,7 +121,7 @@ class HaInputTextForm extends LitElement {
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.max"
)}
></ha-textfield>
></ha-input>
<div class="layout horizontal center justified">
${this.hass.localize("ui.dialogs.helper_settings.input_text.mode")}
<ha-formfield
@@ -151,18 +151,18 @@ class HaInputTextForm extends LitElement {
></ha-radio>
</ha-formfield>
</div>
<ha-textfield
<ha-input
.value=${this._pattern || ""}
.configValue=${"pattern"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.pattern_label"
)}
.helper=${this.hass!.localize(
.hint=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.pattern_helper"
)}
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
</ha-expansion-panel>
</div>
`;
@@ -205,13 +205,16 @@ class HaInputTextForm extends LitElement {
.row {
padding: 16px 0;
}
ha-textfield,
ha-icon-picker {
display: block;
margin: 8px 0;
ha-input {
--ha-input-padding-bottom: 0;
}
ha-expansion-panel {
margin-top: 16px;
ha-icon-picker,
ha-input:not([required]) {
display: block;
margin-bottom: var(--ha-space-5);
}
ha-expansion-panel ha-input:first-child {
margin-top: var(--ha-space-4);
}
`,
];

17
src/panels/config/helpers/forms/ha-schedule-form.ts
View File

@@ -13,7 +13,7 @@ import { formatTime24h } from "../../../../common/datetime/format_time";
import { useAmPm } from "../../../../common/datetime/use_am_pm";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { Schedule, ScheduleDay } from "../../../../data/schedule";
import { weekdays } from "../../../../data/schedule";
import { TimeZone } from "../../../../data/translation";
@@ -121,23 +121,22 @@ class HaScheduleForm extends LitElement {
return html`
<div class="form">
<ha-textfield
<ha-input
.value=${this._name}
.configValue=${"name"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
autoValidate
auto-validate
required
.validationMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
dialogInitialFocus
.disabled=${this.disabled}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
@@ -424,13 +423,13 @@ class HaScheduleForm extends LitElement {
color: var(--primary-text-color);
}
ha-textfield {
display: block;
margin: 8px 0;
ha-input {
margin: var(--ha-space-2) 0;
--ha-input-padding-bottom: 0;
}
#calendar {
margin: 8px 0;
margin: var(--ha-space-2) 0;
height: 450px;
width: 100%;
-webkit-user-select: none;

10
src/panels/config/integrations/integration-panels/matter/dialog-matter-lock-user-edit.ts
View File

@@ -8,7 +8,7 @@ import "../../../../../components/ha-dialog-footer";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-select-box";
import type { SelectBoxOption } from "../../../../../components/ha-select-box";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import "../../../../../components/ha-dialog";
import type { MatterLockUserType } from "../../../../../data/matter-lock";
import {
@@ -83,18 +83,18 @@ class DialogMatterLockUserEdit extends LitElement {
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing}
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.matter.lock.users.name"
)}
.value=${this._userName}
@input=${this._handleNameChange}
maxlength="10"
></ha-textfield>
></ha-input>
${isNew
? html`
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.matter.lock.credentials.data"
)}
@@ -110,7 +110,7 @@ class DialogMatterLockUserEdit extends LitElement {
minlength=${minPin}
maxlength=${maxPin}
required
></ha-textfield>
></ha-input>
`
: nothing}

10
src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-apple-home.ts
View File

@@ -4,7 +4,7 @@ import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-md-list";
import "../../../../../../components/ha-textfield";
import "../../../../../../components/input/ha-input";
import type { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles";
@@ -54,19 +54,19 @@ class MatterAddDeviceAppleHome extends LitElement {
"ui.dialogs.matter-add-device.apple_home.code_instructions"
)}
</p>
<ha-textfield
<ha-input
label=${this.hass.localize(
"ui.dialogs.matter-add-device.apple_home.setup_code"
)}
.value=${this._code}
@input=${this._onCodeChanged}
></ha-textfield>
></ha-input>
</div>
`;
}
private _onCodeChanged(ev: any) {
const value = ev.currentTarget.value;
private _onCodeChanged(ev: InputEvent) {
const value = (ev.target as HTMLInputElement).value;
this._code = value;
fireEvent(this, "pairing-code-changed", { code: value });
}

10
src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-generic.ts
View File

@@ -4,7 +4,7 @@ import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-md-list";
import "../../../../../../components/ha-textfield";
import "../../../../../../components/input/ha-input";
import type { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles";
@@ -22,19 +22,19 @@ class MatterAddDeviceGeneric extends LitElement {
"ui.dialogs.matter-add-device.generic.code_instructions"
)}
</p>
<ha-textfield
<ha-input
label=${this.hass.localize(
"ui.dialogs.matter-add-device.generic.setup_code"
)}
.value=${this._code}
@input=${this._onCodeChanged}
></ha-textfield>
></ha-input>
</div>
`;
}
private _onCodeChanged(ev: any) {
const value = ev.currentTarget.value;
private _onCodeChanged(ev: InputEvent) {
const value = (ev.target as HTMLInputElement).value;
this._code = value;
fireEvent(this, "pairing-code-changed", { code: value });
}

10
src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts
View File

@@ -4,7 +4,7 @@ import { fireEvent } from "../../../../../../common/dom/fire_event";
import "../../../../../../components/ha-icon-next";
import "../../../../../../components/ha-md-list-item";
import "../../../../../../components/ha-md-list";
import "../../../../../../components/ha-textfield";
import "../../../../../../components/input/ha-input";
import type { HomeAssistant } from "../../../../../../types";
import { sharedStyles } from "./matter-add-device-shared-styles";
@@ -59,19 +59,19 @@ class MatterAddDeviceGoogleHomeFallback extends LitElement {
`ui.dialogs.matter-add-device.google_home_fallback.code_instructions`
)}
</p>
<ha-textfield
<ha-input
label=${this.hass.localize(
`ui.dialogs.matter-add-device.google_home_fallback.pairing_code`
)}
.value=${this._code}
@input=${this._onCodeChanged}
></ha-textfield>
></ha-input>
</div>
`;
}
private _onCodeChanged(ev: any) {
const value = ev.currentTarget.value;
private _onCodeChanged(ev: InputEvent) {
const value = (ev.target as HTMLInputElement).value;
this._code = value;
fireEvent(this, "pairing-code-changed", { code: value });
}

2
src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts
View File

@@ -29,7 +29,7 @@ export const sharedStyles = css`
--md-list-item-trailing-space: var(--horizontal-padding, 16px);
margin-bottom: 16px;
}
ha-textfield {
ha-input {
width: 100%;
}
`;

13
src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
View File

@@ -8,6 +8,7 @@ import "../../../../../components/ha-code-editor";
import "../../../../../components/ha-formfield";
import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
import "../../../../../components/ha-switch";
import "../../../../../components/input/ha-input";
import { getConfigEntries } from "../../../../../data/config_entries";
import type { Action } from "../../../../../data/script";
import { callExecuteScript } from "../../../../../data/service";
@@ -80,11 +81,11 @@ export class MQTTConfigPanel extends LitElement {
>
<div class="card-content">
<div class="panel-dev-mqtt-fields">
<ha-textfield
<ha-input
.label=${this.hass.localize("ui.panel.config.mqtt.topic")}
.value=${this._topic}
@change=${this._handleTopic}
></ha-textfield>
></ha-input>
<ha-select
.label=${this.hass.localize("ui.panel.config.mqtt.qos")}
.value=${this._qos}
@@ -127,8 +128,8 @@ export class MQTTConfigPanel extends LitElement {
`;
}
private _handleTopic(ev: CustomEvent) {
this._topic = (ev.target! as any).value;
private _handleTopic(ev: InputEvent) {
this._topic = (ev.target as HTMLInputElement).value;
}
private _handlePayload(ev: CustomEvent) {
@@ -210,7 +211,7 @@ export class MQTTConfigPanel extends LitElement {
width: 96px;
margin: 0 8px;
}
ha-textfield {
ha-input {
flex: 1;
}
@media screen and (max-width: 600px) {
@@ -220,7 +221,7 @@ export class MQTTConfigPanel extends LitElement {
margin-inline-end: initial;
margin-top: 8px;
}
ha-textfield {
ha-input {
flex: auto;
width: 100%;
}

14
src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
View File

@@ -6,7 +6,7 @@ import "../../../../../components/ha-button";
import "../../../../../components/ha-card";
import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
import "../../../../../components/ha-select";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import type { MQTTMessage } from "../../../../../data/mqtt";
import { subscribeMQTTTopic } from "../../../../../data/mqtt";
import type { HomeAssistant } from "../../../../../types";
@@ -83,14 +83,14 @@ class MqttSubscribeCard extends LitElement {
</ha-formfield>
</p>
<div class="panel-dev-mqtt-subscribe-fields">
<ha-textfield
<ha-input
.label=${this._subscribed
? this.hass.localize("ui.panel.config.mqtt.listening_to")
: this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
.disabled=${this._subscribed !== undefined}
.value=${this._topic}
@change=${this._handleTopic}
></ha-textfield>
></ha-input>
<ha-select
.label=${this.hass.localize("ui.panel.config.mqtt.qos")}
.disabled=${this._subscribed !== undefined}
@@ -137,8 +137,8 @@ class MqttSubscribeCard extends LitElement {
`;
}
private _handleTopic(ev): void {
this._topic = ev.target.value;
private _handleTopic(ev: InputEvent): void {
this._topic = (ev.target as HTMLInputElement).value;
}
private _handleQos(ev: HaSelectSelectEvent): void {
@@ -223,7 +223,7 @@ class MqttSubscribeCard extends LitElement {
width: 96px;
margin: 0 8px;
}
ha-textfield {
ha-input {
flex: 1;
}
@media screen and (max-width: 600px) {
@@ -234,7 +234,7 @@ class MqttSubscribeCard extends LitElement {
margin-inline-start: 0px;
margin-inline-end: initial;
}
ha-textfield {
ha-input {
flex: auto;
width: 100%;
}

18
src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
View File

@@ -10,7 +10,7 @@ import { addGroup, fetchGroupableDevices } from "../../../../../data/zha";
import "../../../../../layouts/hass-subpage";
import type { HomeAssistant } from "../../../../../types";
import "../../../ha-config-section";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import "./zha-device-endpoint-data-table";
import type { ZHADeviceEndpointDataTable } from "./zha-device-endpoint-data-table";
@@ -64,23 +64,23 @@ export class ZHAAddGroupPage extends LitElement {
"ui.panel.config.zha.groups.create_group_details"
)}
</p>
<ha-textfield
<ha-input
type="string"
.value=${this._groupName}
@change=${this._handleNameChange}
.placeholder=${this.hass!.localize(
"ui.panel.config.zha.groups.group_name_placeholder"
)}
></ha-textfield>
></ha-input>
<ha-textfield
<ha-input
type="number"
.value=${this._groupId}
@change=${this._handleGroupIdChange}
.placeholder=${this.hass!.localize(
"ui.panel.config.zha.groups.group_id_placeholder"
)}
></ha-textfield>
></ha-input>
<div class="header">
${this.hass.localize("ui.panel.config.zha.groups.add_members")}
@@ -146,12 +146,12 @@ export class ZHAAddGroupPage extends LitElement {
navigate(`/config/zha/group/${group.group_id}`, { replace: true });
}
private _handleGroupIdChange(event) {
this._groupId = event.target.value;
private _handleGroupIdChange(event: InputEvent) {
this._groupId = (event.target as HTMLInputElement).value;
}
private _handleNameChange(event) {
this._groupName = event.target.value || "";
private _handleNameChange(event: InputEvent) {
this._groupName = (event.target as HTMLInputElement).value || "";
}
static get styles(): CSSResultGroup {

21
src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
View File

@@ -6,7 +6,7 @@ import "../../../../../components/buttons/ha-progress-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-select";
import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import { forwardHaptic } from "../../../../../data/haptics";
import type {
Attribute,
@@ -86,18 +86,17 @@ export class ZHAClusterAttributes extends LitElement {
private _renderAttributeInteractions(): TemplateResult {
return html`
<div class="input-text">
<ha-textfield
<ha-input
.label=${this.hass!.localize("ui.panel.config.zha.common.value")}
type="string"
.value=${this._attributeValue}
@change=${this._onAttributeValueChanged}
.placeholder=${this.hass!.localize(
"ui.panel.config.zha.common.value"
)}
></ha-textfield>
></ha-input>
</div>
<div class="input-text">
<ha-textfield
<ha-input
.label=${this.hass!.localize(
"ui.panel.config.zha.common.manufacturer_code_override"
)}
@@ -107,7 +106,7 @@ export class ZHAClusterAttributes extends LitElement {
.placeholder=${this.hass!.localize(
"ui.panel.config.zha.common.value"
)}
></ha-textfield>
></ha-input>
</div>
<div class="card-actions">
<ha-call-service-button
@@ -186,13 +185,13 @@ export class ZHAClusterAttributes extends LitElement {
};
}
private _onAttributeValueChanged(event): void {
this._attributeValue = event.target!.value;
private _onAttributeValueChanged(event: InputEvent): void {
this._attributeValue = (event.target as HTMLInputElement).value;
this._setAttributeServiceData = this._computeSetAttributeServiceData();
}
private _onManufacturerCodeOverrideChanged(event): void {
this._manufacturerCodeOverride = event.target!.value;
private _onManufacturerCodeOverrideChanged(event: InputEvent): void {
this._manufacturerCodeOverride = (event.target as HTMLInputElement).value;
this._setAttributeServiceData = this._computeSetAttributeServiceData();
}
@@ -232,7 +231,7 @@ export class ZHAClusterAttributes extends LitElement {
}
.menu,
ha-textfield {
ha-input {
width: 100%;
}

14
src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
View File

@@ -6,7 +6,7 @@ import "../../../../../components/ha-card";
import "../../../../../components/ha-form/ha-form";
import "../../../../../components/ha-select";
import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import type { Cluster, Command, ZHADevice } from "../../../../../data/zha";
import { fetchCommandsForCluster } from "../../../../../data/zha";
import { haStyle } from "../../../../../resources/styles";
@@ -73,7 +73,7 @@ export class ZHAClusterCommands extends LitElement {
${this._selectedCommandId !== undefined
? html`
<div class="input-text">
<ha-textfield
<ha-input
.label=${this.hass!.localize(
"ui.panel.config.zha.common.manufacturer_code_override"
)}
@@ -83,7 +83,7 @@ export class ZHAClusterCommands extends LitElement {
.placeholder=${this.hass!.localize(
"ui.panel.config.zha.common.value"
)}
></ha-textfield>
></ha-input>
</div>
<div class="command-form">
<ha-form
@@ -166,8 +166,10 @@ export class ZHAClusterCommands extends LitElement {
this._computeIssueClusterCommandServiceData();
}
private _onManufacturerCodeOverrideChanged(event): void {
this._manufacturerCodeOverride = Number(event.target.value);
private _onManufacturerCodeOverrideChanged(event: InputEvent): void {
this._manufacturerCodeOverride = Number(
(event.target as HTMLInputElement).value
);
this._issueClusterCommandServiceData =
this._computeIssueClusterCommandServiceData();
}
@@ -190,7 +192,7 @@ export class ZHAClusterCommands extends LitElement {
margin-top: 16px;
}
.menu,
ha-textfield {
ha-input {
width: 100%;
}

14
src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
View File

@@ -9,7 +9,8 @@ import { stringCompare } from "../../../../../common/string/compare";
import "../../../../../components/entity/state-badge";
import "../../../../../components/ha-area-picker";
import "../../../../../components/ha-card";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import type { HaInput } from "../../../../../components/input/ha-input";
import { updateDeviceRegistryEntry } from "../../../../../data/device/device_registry";
import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
import {
@@ -98,14 +99,13 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
: ""
)}
</div>
<ha-textfield
type="string"
<ha-input
@change=${this._rename}
.value=${this.device.user_given_name || this.device.name}
.label=${this.hass.localize(
"ui.dialogs.zha_device_info.zha_device_card.device_name_placeholder"
)}
></ha-textfield>
></ha-input>
<ha-area-picker
.hass=${this.hass}
.device=${this.device.device_reg_id}
@@ -116,14 +116,14 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
`;
}
private async _rename(event): Promise<void> {
private async _rename(event: InputEvent): Promise<void> {
if (!this.hass || !this.device) {
return;
}
const device = this.device;
const oldDeviceName = device.user_given_name || device.name;
const newDeviceName = event.target.value;
const newDeviceName = (event.target as HaInput).value;
this.device.user_given_name = newDeviceName;
await updateDeviceRegistryEntry(this.hass, device.device_reg_id, {
name_by_user: newDeviceName,
@@ -234,7 +234,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
ha-card {
border: none;
}
ha-textfield {
ha-input {
width: 100%;
}
`,

27
src/panels/config/integrations/integration-panels/zha/zha-options-page.ts
View File

@@ -6,7 +6,7 @@ import "../../../../../components/ha-card";
import "../../../../../components/ha-md-list";
import "../../../../../components/ha-md-list-item";
import "../../../../../components/ha-select";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import "../../../../../components/ha-switch";
import type { ZHAConfiguration } from "../../../../../data/zha";
import {
@@ -139,18 +139,19 @@ class ZHAOptionsPage extends LitElement {
"ui.panel.config.zha.configuration_page.default_light_transition_description"
)}</span
>
<ha-textfield
<ha-input
slot="end"
type="number"
.value=${String(
(this._configuration.data.zha_options
?.default_light_transition as number) ?? 0
)}
.suffix=${"s"}
.min=${0}
.step=${0.5}
@change=${this._defaultLightTransitionChanged}
></ha-textfield>
>
<span slot="end">s</span>
</ha-input>
</ha-md-list-item>
<ha-md-list-item>
<span slot="headline"
@@ -231,7 +232,7 @@ class ZHAOptionsPage extends LitElement {
${this._customMains
? html`
<ha-md-list-item>
<ha-textfield
<ha-input
slot="end"
type="number"
.value=${String(
@@ -239,11 +240,12 @@ class ZHAOptionsPage extends LitElement {
?.consider_unavailable_mains as number) ??
7200
)}
.suffix=${"s"}
.min=${1}
.step=${1}
@change=${this._customMainsSecondsChanged}
></ha-textfield>
>
<span slot="end">s</span>
</ha-input>
</ha-md-list-item>
`
: nothing}
@@ -272,7 +274,7 @@ class ZHAOptionsPage extends LitElement {
${this._customBattery
? html`
<ha-md-list-item>
<ha-textfield
<ha-input
slot="end"
type="number"
.value=${String(
@@ -280,11 +282,12 @@ class ZHAOptionsPage extends LitElement {
?.consider_unavailable_battery as number) ??
21600
)}
.suffix=${"s"}
.min=${1}
.step=${1}
@change=${this._customBatterySecondsChanged}
></ha-textfield>
>
<span slot="end">s</span>
</ha-input>
</ha-md-list-item>
`
: nothing}
@@ -440,7 +443,7 @@ class ZHAOptionsPage extends LitElement {
}
ha-select,
ha-textfield {
ha-input {
min-width: 210px;
}
@@ -451,7 +454,7 @@ class ZHAOptionsPage extends LitElement {
@media all and (max-width: 450px) {
ha-select,
ha-textfield {
ha-input {
min-width: 160px;
width: 160px;
}

14
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
View File

@@ -6,7 +6,7 @@ import "../../../../../components/ha-button";
import "../../../../../components/ha-select";
import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import {
getZwaveNodeRawConfigParameter,
setZwaveNodeRawConfigParameter,
@@ -34,14 +34,14 @@ class ZWaveJSCustomParam extends LitElement {
protected render() {
return html`
<div class="custom-config-form">
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.zwave_js.node_config.parameter"
)}
.value=${this._customParamNumber ?? ""}
@input=${this._customParamNumberChanged}
type="number"
></ha-textfield>
></ha-input>
<ha-select
.label=${this.hass.localize(
"ui.panel.config.zwave_js.node_config.size"
@@ -51,14 +51,14 @@ class ZWaveJSCustomParam extends LitElement {
.options=${["1", "2", "4"]}
>
</ha-select>
<ha-textfield
<ha-input
.label=${this.hass.localize(
"ui.panel.config.zwave_js.node_config.value"
)}
.value=${this._value ?? ""}
@input=${this._customValueChanged}
type="number"
></ha-textfield>
></ha-input>
<ha-select
.label=${this.hass.localize(
"ui.panel.config.zwave_js.node_config.format"
@@ -230,7 +230,7 @@ class ZWaveJSCustomParam extends LitElement {
margin-bottom: 8px;
}
ha-textfield,
ha-input,
ha-select {
flex-grow: 1;
flex-basis: calc(50% - 8px);
@@ -242,7 +242,7 @@ class ZWaveJSCustomParam extends LitElement {
flex-wrap: nowrap;
}
ha-textfield,
ha-input,
ha-select {
flex-basis: 0;
}

15
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
View File

@@ -23,7 +23,7 @@ import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
import "../../../../../components/ha-selector/ha-selector-boolean";
import "../../../../../components/ha-settings-row";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-textfield";
import "../../../../../components/input/ha-input";
import type {
ZWaveJSNodeCapabilities,
ZWaveJSNodeConfigParam,
@@ -355,7 +355,7 @@ class ZWaveJSNodeConfig extends LitElement {
`;
}
return html`${labelAndDescription}
<ha-textfield
<ha-input
type="number"
.value=${item.value}
.min=${item.metadata.min}
@@ -366,11 +366,12 @@ class ZWaveJSNodeConfig extends LitElement {
.key=${id}
.disabled=${!item.metadata.writeable}
@change=${this._numericInputChanged}
.suffix=${item.metadata.unit}
.helper=${`${this.hass.localize("ui.panel.config.zwave_js.node_config.between_min_max", { min: item.metadata.min, max: item.metadata.max })}${defaultLabel ? `, ${defaultLabel}` : ""}`}
helperPersistent
.hint=${`${this.hass.localize("ui.panel.config.zwave_js.node_config.between_min_max", { min: item.metadata.min, max: item.metadata.max })}${defaultLabel ? `, ${defaultLabel}` : ""}`}
>
</ha-textfield>`;
${item.metadata.unit
? html`<span slot="end">${item.metadata.unit}</span>`
: nothing}
</ha-input>`;
}
if (
@@ -757,7 +758,7 @@ class ZWaveJSNodeConfig extends LitElement {
white-space: normal;
}
:host(:not([narrow])) ha-settings-row ha-textfield {
:host(:not([narrow])) ha-settings-row ha-input {
text-align: right;
}

19
src/panels/config/labels/dialog-label-detail.ts
View File

@@ -10,7 +10,7 @@ import "../../../components/ha-dialog-footer";
import "../../../components/ha-icon-picker";
import "../../../components/ha-switch";
import "../../../components/ha-textarea";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import { localizeContext } from "../../../data/context";
import type { LabelRegistryEntryMutableParams } from "../../../data/label/label_registry";
import { DialogMixin } from "../../../dialogs/dialog-mixin";
@@ -70,7 +70,7 @@ class DialogLabelDetail extends DialogMixin<LabelDetailDialogParams>(
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="form">
<ha-textfield
<ha-input
autofocus
.value=${this._name}
.configValue=${"name"}
@@ -80,7 +80,7 @@ class DialogLabelDetail extends DialogMixin<LabelDetailDialogParams>(
"ui.dialogs.label-detail.required_error_msg"
)}
required
></ha-textfield>
></ha-input>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@@ -138,9 +138,9 @@ class DialogLabelDetail extends DialogMixin<LabelDetailDialogParams>(
`;
}
private _input(ev: Event) {
const target = ev.target as any;
const configValue = target.configValue;
private _input(ev: InputEvent) {
const target = ev.target as HTMLInputElement;
const configValue = (target as any).configValue;
this._error = undefined;
this[`_${configValue}`] = target.value;
@@ -195,14 +195,13 @@ class DialogLabelDetail extends DialogMixin<LabelDetailDialogParams>(
color: var(--primary-color);
}
ha-textarea,
ha-textfield,
ha-icon-picker,
ha-color-picker {
display: block;
margin-bottom: var(--ha-space-5);
}
ha-color-picker,
ha-textarea {
margin-top: 16px;
ha-input {
--ha-input-padding-bottom: 0;
}
`,
];

5
src/panels/config/network/ha-config-url-form.ts
View File

@@ -9,7 +9,6 @@ import "../../../components/ha-card";
import "../../../components/ha-md-list-item";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaInput } from "../../../components/input/ha-input";
import "../../../components/input/ha-input-copy";
import type { HaInputCopy } from "../../../components/input/ha-input-copy";
@@ -44,10 +43,10 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
@state() private _cloudChecked = false;
@query('[data-name="external_url"]')
private _externalUrlField?: HaInput;
private _externalUrlField?: HaInputCopy;
@query('[data-name="internal_url"]')
private _internalUrlField?: HaInput;
private _internalUrlField?: HaInputCopy;
protected hassSubscribe() {
return [

12
src/panels/config/network/supervisor-hostname.ts
View File

@@ -8,7 +8,7 @@ import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-button";
import "../../../components/ha-radio";
import "../../../components/ha-settings-row";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import { extractApiErrorMessage } from "../../../data/hassio/common";
import {
changeHostOptions,
@@ -55,13 +55,13 @@ export class HassioHostname extends LitElement {
"ui.panel.config.network.supervisor.hostname.description"
)}
</p>
<ha-textfield
<ha-input
.disabled=${this._processing}
.value=${this._hostname}
@change=${this._handleChange}
placeholder="homeassistant"
>
</ha-textfield>
</ha-input>
</div>
<div class="card-actions">
<ha-button
@@ -76,8 +76,8 @@ export class HassioHostname extends LitElement {
`;
}
private _handleChange(ev) {
this._hostname = ev.target.value;
private _handleChange(ev: InputEvent) {
this._hostname = (ev.target as HTMLInputElement).value;
}
private async _save() {
@@ -97,7 +97,7 @@ export class HassioHostname extends LitElement {
}
static styles: CSSResultGroup = css`
ha-textfield {
ha-input {
width: 100%;
}
.card-actions {

13
src/panels/config/person/dialog-person-detail.ts
View File

@@ -11,7 +11,7 @@ import "../../../components/ha-icon-button";
import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import "../../../components/ha-md-list-item";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import "../../../components/ha-dialog";
import { adminChangeUsername } from "../../../data/auth";
import type { PersonMutableParams } from "../../../data/person";
@@ -144,7 +144,7 @@ class DialogPersonDetail extends LitElement implements HassDialog {
<div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
<div class="form">
<ha-textfield
<ha-input
autofocus
.value=${this._name}
@input=${this._nameChanged}
@@ -153,7 +153,7 @@ class DialogPersonDetail extends LitElement implements HassDialog {
"ui.panel.config.person.detail.name_error_msg"
)}
required
></ha-textfield>
></ha-input>
<ha-picture-upload
.hass=${this.hass}
@@ -365,9 +365,9 @@ class DialogPersonDetail extends LitElement implements HassDialog {
`;
}
private _nameChanged(ev) {
private _nameChanged(ev: InputEvent) {
this._error = undefined;
this._name = ev.target.value;
this._name = (ev.target as HTMLInputElement).value;
}
private _adminChanged(ev): void {
@@ -554,8 +554,7 @@ class DialogPersonDetail extends LitElement implements HassDialog {
return [
haStyleDialog,
css`
ha-picture-upload,
ha-textfield {
ha-picture-upload {
display: block;
}
ha-picture-upload {

36
src/panels/config/scene/scene-save-dialog/dialog-scene-save.ts
View File

@@ -9,24 +9,21 @@ import "../../../../components/ha-alert";
import "../../../../components/ha-area-picker";
import "../../../../components/ha-domain-icon";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-labels-picker";
import "../../../../components/ha-suggest-with-ai-button";
import type { SuggestWithAIGenerateTask } from "../../../../components/ha-suggest-with-ai-button";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-textfield";
import "../../../../components/ha-dialog";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog-footer";
import "../../../../components/input/ha-input";
import "../../category/ha-category-picker";
import type { GenDataTaskResult } from "../../../../data/ai_task";
import type { SceneConfig } from "../../../../data/scene";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import type {
EntityRegistryUpdate,
SceneSaveDialogParams,
} from "./show-dialog-scene-save";
import {
type MetadataSuggestionInclude,
type MetadataSuggestionResult,
@@ -34,7 +31,10 @@ import {
processMetadataSuggestion,
} from "../../common/suggest-metadata-ai";
import { buildEntityMetadataInspirations } from "../../common/suggest-metadata-inspirations";
import type { SceneConfig } from "../../../../data/scene";
import type {
EntityRegistryUpdate,
SceneSaveDialogParams,
} from "./show-dialog-scene-save";
const SUGGESTION_INCLUDE: MetadataSuggestionInclude = {
name: true,
@@ -113,7 +113,7 @@ class DialogSceneSave extends LitElement {
}
return html`
<ha-textfield
<ha-input
dialogInitialFocus
.value=${this._newName}
.placeholder=${this.hass.localize(
@@ -121,12 +121,10 @@ class DialogSceneSave extends LitElement {
)}
.label=${this.hass.localize("ui.panel.config.scene.editor.name")}
required
type="string"
@input=${this._valueChanged}
></ha-textfield>
></ha-input>
<ha-icon-picker
.hass=${this.hass}
.label=${this.hass.localize("ui.panel.config.scene.editor.icon")}
.value=${this._newIcon}
@value-changed=${this._iconChanged}
@@ -357,19 +355,12 @@ class DialogSceneSave extends LitElement {
return [
haStyleDialog,
css`
ha-textfield,
ha-icon-picker,
ha-category-picker,
ha-labels-picker,
ha-area-picker {
display: block;
}
ha-icon-picker,
ha-category-picker,
ha-labels-picker,
ha-area-picker,
ha-chip-set:has(> ha-assist-chip) {
margin-top: var(--ha-space-4);
margin-bottom: var(--ha-space-5);
}
ha-alert {
display: block;
@@ -379,6 +370,9 @@ class DialogSceneSave extends LitElement {
ha-suggest-with-ai-button {
margin: var(--ha-space-2) var(--ha-space-4);
}
ha-input {
--ha-input-padding-bottom: 0;
}
`,
];
}

56
src/panels/config/tags/dialog-tag-detail.ts
View File

@@ -2,18 +2,19 @@ import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { documentationUrl } from "../../../util/documentation-url";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
import "../../../components/ha-qr-code";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import "../../../components/ha-dialog";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import type { Tag, UpdateTagParams } from "../../../data/tag";
import type { HassDialog } from "../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import type { TagDetailDialogParams } from "./show-dialog-tag-detail";
@customElement("dialog-tag-detail")
@@ -85,13 +86,7 @@ class DialogTagDetail
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="form">
${this._params.entry
? html`${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id"
)}:
${this._params.entry.id}`
: ""}
<ha-textfield
<ha-input
autofocus
.value=${this._name}
.configValue=${"name"}
@@ -101,20 +96,19 @@ class DialogTagDetail
"ui.panel.config.tag.detail.required_error_msg"
)}
required
></ha-textfield>
${!this._params.entry
? html`<ha-textfield
.value=${this._id || ""}
.configValue=${"id"}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id"
)}
.placeholder=${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id_placeholder"
)}
></ha-textfield>`
: ""}
></ha-input>
<ha-input
.value=${this._params.entry
? this._params.entry.id
: this._id || ""}
.readonly=${!!this._params.entry}
.configValue=${"id"}
@input=${this._valueChanged}
.label=${this.hass!.localize("ui.panel.config.tag.detail.tag_id")}
.placeholder=${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id_placeholder"
)}
></ha-input>
</div>
${this._params.entry
? html`
@@ -187,9 +181,9 @@ class DialogTagDetail
`;
}
private _valueChanged(ev: Event) {
const target = ev.target as any;
const configValue = target.configValue;
private _valueChanged(ev: InputEvent) {
const target = ev.target as HaInput;
const configValue = (target as any).configValue;
this._error = undefined;
this[`_${configValue}`] = target.value;
@@ -246,9 +240,11 @@ class DialogTagDetail
#qr {
text-align: center;
}
ha-textfield {
display: block;
margin: 8px 0;
ha-input {
--ha-input-padding-bottom: 0;
}
ha-input:not([required]) {
margin-bottom: var(--ha-space-5);
}
::slotted(img) {
height: 100%;

16
src/panels/config/users/dialog-user-detail.ts
View File

@@ -5,14 +5,15 @@ import { customElement, property, state } from "lit/decorators";
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-icon-button";
import "../../../components/ha-label";
import "../../../components/ha-md-list-item";
import "../../../components/ha-svg-icon";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import "../../../components/ha-dialog";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import { adminChangeUsername } from "../../../data/auth";
import {
computeUserBadges,
@@ -103,14 +104,14 @@ class DialogUserDetail extends LitElement {
${
!user.system_generated
? html`
<ha-textfield
<ha-input
autofocus
.value=${this._name}
@input=${this._nameChanged}
.label=${this.hass!.localize(
"ui.panel.config.users.editor.name"
)}
></ha-textfield>
></ha-input>
<ha-md-list-item>
<span slot="headline"
>${this.hass.localize(
@@ -268,9 +269,9 @@ class DialogUserDetail extends LitElement {
`;
}
private _nameChanged(ev) {
private _nameChanged(ev: InputEvent) {
this._error = undefined;
this._name = ev.target.value;
this._name = (ev.target as HaInput).value ?? "";
}
private _adminChanged(ev): void {
@@ -398,9 +399,6 @@ class DialogUserDetail extends LitElement {
.secondary {
color: var(--secondary-text-color);
}
ha-textfield {
display: block;
}
ha-md-list-item {
--md-list-item-leading-space: 0;
--md-list-item-trailing-space: 0;

15
src/panels/config/voice-assistants/cloud-google-pref.ts
View File

@@ -10,8 +10,8 @@ import "../../../components/ha-button";
import "../../../components/ha-md-list-item";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
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 { CloudStatusLoggedIn } from "../../../data/cloud";
import { updateCloudPref } from "../../../data/cloud";
import type { ExposeEntitySettings } from "../../../data/expose";
@@ -208,7 +208,7 @@ export class CloudGooglePref extends LitElement {
<ha-switch slot="end"></ha-switch>
</ha-md-list-item>
<ha-textfield
<ha-input
id="google_secure_devices_pin"
.label=${this.hass.localize(
"ui.panel.config.cloud.account.google.devices_pin"
@@ -218,7 +218,7 @@ export class CloudGooglePref extends LitElement {
)}
.value=${google_secure_devices_pin || ""}
@change=${this._pinChanged}
></ha-textfield>
></ha-input>
`
: nothing}
`}
@@ -292,8 +292,8 @@ export class CloudGooglePref extends LitElement {
}
}
private async _pinChanged(ev) {
const input = ev.target as HaTextField;
private async _pinChanged(ev: InputEvent) {
const input = ev.target as HaInput;
try {
await updateCloudPref(this.hass, {
[input.id]: input.value || null,
@@ -336,9 +336,8 @@ export class CloudGooglePref extends LitElement {
--md-list-item-trailing-space: 0;
--md-item-overflow: visible;
}
ha-textfield {
ha-input {
width: 250px;
display: block;
margin-top: 8px;
}
.card-actions {

14
src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
View File

@@ -8,8 +8,8 @@ import "../../../../components/ha-button";
import "../../../../components/ha-checkbox";
import type { HaCheckbox } from "../../../../components/ha-checkbox";
import "../../../../components/ha-formfield";
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 {
PipelineRun,
PipelineRunOptions,
@@ -40,7 +40,7 @@ export class AssistPipelineRunDebug extends LitElement {
private _continueConversationCheckbox!: HaCheckbox;
@query("#continue-conversation-text")
private _continueConversationTextField?: HaTextField;
private _continueConversationTextField?: HaInput;
private _audioBuffer?: Int16Array[];
@@ -129,14 +129,14 @@ export class AssistPipelineRunDebug extends LitElement {
`
: this._pipelineRuns[0].init_options!.start_stage === "intent"
? html`
<ha-textfield
<ha-input
id="continue-conversation-text"
.label=${this.hass.localize(
"ui.panel.config.voice_assistants.debug.pipeline.response"
)}
.disabled=${!this._finished}
@keydown=${this._handleContinueKeyDown}
></ha-textfield>
></ha-input>
<ha-button
@click=${this._runTextPipeline}
.disabled=${!this._finished}
@@ -217,7 +217,7 @@ export class AssistPipelineRunDebug extends LitElement {
let text: string | null;
if (textfield) {
text = textfield.value;
text = textfield.value ?? null;
} else {
text = await showPromptDialog(this, {
title: this.hass.localize(
@@ -532,7 +532,7 @@ export class AssistPipelineRunDebug extends LitElement {
width: 100%;
margin-bottom: 16px;
}
.start-row ha-textfield {
.start-row ha-input {
flex: 1;
}
assist-render-pipeline-run {

29
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@@ -13,8 +13,8 @@ import "../../../components/chips/ha-assist-chip";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-state-icon";
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 { AlarmMode } from "../../../data/alarm_control_panel";
import {
ALARM_MODES,
@@ -275,15 +275,15 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
${!stateObj.attributes.code_format || defaultCode
? nothing
: html`
<ha-textfield
<ha-input
.value=${this._value || ""}
@input=${this._handleInput}
.label=${this.hass.localize("ui.card.alarm_control_panel.code")}
type="password"
.inputMode=${stateObj.attributes.code_format === FORMAT_NUMBER
.inputmode=${stateObj.attributes.code_format === FORMAT_NUMBER
? "numeric"
: "text"}
></ha-textfield>
></ha-input>
`}
${stateObj.attributes.code_format !== FORMAT_NUMBER || defaultCode
? nothing
@@ -335,7 +335,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
}
private _handleInput(e: Event): void {
this._value = (e.currentTarget as HaTextField).value;
this._value = (e.currentTarget as HaInput).value;
}
private _handlePadClick(e: MouseEvent): void {
@@ -402,26 +402,26 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
}
}
ha-textfield {
display: block;
margin: 8px;
ha-input {
margin: var(--ha-space-2);
max-width: 150px;
text-align: center;
--ha-input-padding-bottom: 0;
}
.state {
margin-left: 16px;
margin-inline-start: 16px;
margin-left: var(--ha-space-4);
margin-inline-start: var(--ha-space-4);
margin-inline-end: initial;
position: relative;
bottom: 16px;
bottom: var(--ha-space-4);
color: var(--alarm-state-color);
animation: none;
}
.keypad {
--keypad-columns: 3;
padding: 12px;
padding: var(--ha-space-3);
display: grid;
grid-template-columns: repeat(var(--keypad-columns), auto);
grid-auto-rows: auto;
@@ -448,10 +448,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.actions ha-button {
margin: 0 4px 4px;
margin: var(--ha-space-1);
}
`;
}

24
src/panels/lovelace/components/hui-action-editor.ts
View File

@@ -12,6 +12,8 @@ import "../../../components/ha-help-tooltip";
import "../../../components/ha-navigation-picker";
import type { HaSelectSelectEvent } from "../../../components/ha-select";
import "../../../components/ha-service-control";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import type {
ActionConfig,
CallServiceActionConfig,
@@ -20,7 +22,6 @@ import type {
} from "../../../data/lovelace/config/action";
import type { ServiceAction } from "../../../data/script";
import type { HomeAssistant } from "../../../types";
import type { EditorTarget } from "../editor/types";
export type UiAction = Exclude<ActionConfig["action"], "fire-dom-event">;
@@ -197,14 +198,14 @@ export class HuiActionEditor extends LitElement {
: nothing}
${this.config?.action === "url"
? html`
<ha-textfield
<ha-input
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.url_path"
)}
.value=${this._url_path}
.configValue=${"url_path"}
@input=${this._valueChanged}
></ha-textfield>
></ha-input>
`
: nothing}
${this.config?.action === "call-service" ||
@@ -276,19 +277,20 @@ export class HuiActionEditor extends LitElement {
});
}
private _valueChanged(ev): void {
private _valueChanged(ev: InputEvent): void {
ev.stopPropagation();
if (!this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value = ev.target.value ?? ev.target.checked;
if (this[`_${target.configValue}`] === value) {
const target = ev.target! as HaInput;
const configValue: string | undefined = (target as any).configValue;
const value = target.value ?? "";
if (this[`_${configValue}`] === value) {
return;
}
if (target.configValue) {
if (configValue) {
fireEvent(this, "value-changed", {
value: { ...this.config!, [target.configValue!]: value },
value: { ...this.config!, [configValue]: value },
});
}
}
@@ -344,7 +346,7 @@ export class HuiActionEditor extends LitElement {
direction: var(--direction);
}
ha-select,
ha-textfield {
ha-input {
width: 100%;
}
ha-service-control,
@@ -352,7 +354,7 @@ export class HuiActionEditor extends LitElement {
ha-form {
display: block;
}
ha-textfield,
ha-input,
ha-service-control,
ha-navigation-picker,
ha-form {

2
src/panels/lovelace/editor/config-elements/config-elements-style.ts
View File

@@ -29,7 +29,7 @@ export const configElementStyle = css`
}
hui-action-editor,
ha-select,
ha-textfield,
ha-input,
ha-icon-picker {
margin-top: 8px;
display: block;

21
src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
View File

@@ -1,6 +1,7 @@
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import {
any,
array,
@@ -17,7 +18,6 @@ import {
type,
union,
} from "superstruct";
import memoizeOne from "memoize-one";
import type { HASSDomEvent } from "../../../../common/dom/fire_event";
import { fireEvent } from "../../../../common/dom/fire_event";
import { customType } from "../../../../common/structs/is-custom-type";
@@ -25,11 +25,13 @@ import "../../../../components/ha-card";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon";
import "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import "../../../../components/ha-theme-picker";
import "../../../../components/input/ha-input";
import { isCustomType } from "../../../../data/lovelace_custom_cards";
import type { HomeAssistant } from "../../../../types";
import { computeShowHeaderToggle } from "../../cards/hui-entities-card";
import type { EntitiesCardConfig } from "../../cards/types";
import { processConfigEntities } from "../../common/process-config-entities";
import { TIMESTAMP_RENDERING_FORMATS } from "../../components/types";
import type { LovelaceRowConfig } from "../../entity-rows/types";
import { headerFooterConfigStructs } from "../../header-footer/structs";
@@ -43,13 +45,11 @@ import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { buttonEntityConfigStruct } from "../structs/button-entity-struct";
import { entitiesConfigStruct } from "../structs/entities-struct";
import type {
EditorTarget,
EditDetailElementEvent,
EditorTarget,
SubElementEditorConfig,
} from "../types";
import { configElementStyle } from "./config-elements-style";
import { computeShowHeaderToggle } from "../../cards/hui-entities-card";
import { processConfigEntities } from "../../common/process-config-entities";
const buttonEntitiesRowConfigStruct = object({
type: literal("button"),
@@ -249,7 +249,7 @@ export class HuiEntitiesCardEditor
return html`
<div class="card-config">
<ha-textfield
<ha-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
@@ -258,7 +258,7 @@ export class HuiEntitiesCardEditor
.value=${this._title}
.configValue=${"title"}
@input=${this._valueChanged}
></ha-textfield>
></ha-input>
<ha-theme-picker
.hass=${this.hass}
.value=${this._theme}
@@ -430,12 +430,11 @@ export class HuiEntitiesCardEditor
}
hui-header-footer-editor {
padding-top: 4px;
padding-top: var(--ha-space-1);
}
ha-textfield {
display: block;
margin-bottom: 16px;
ha-input {
--ha-input-padding-bottom: var(--ha-space-4);
}
`,
];

8
src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
View File

@@ -7,7 +7,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-formfield";
import "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import "../../../../components/input/ha-input";
import type { HomeAssistant } from "../../../../types";
import { graphHeaderFooterConfigStruct } from "../../header-footer/structs";
import type { GraphHeaderFooterConfig } from "../../header-footer/types";
@@ -73,18 +73,18 @@ export class HuiGraphFooterEditor
@change=${this._change}
></ha-switch>
</ha-formfield>
<ha-textfield
<ha-input
type="number"
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hours_to_show"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._hours_to_show}
.value=${String(this._hours_to_show)}
min="1"
.configValue=${"hours_to_show"}
@input=${this._valueChanged}
></ha-textfield>
></ha-input>
</div>
</div>
`;

8
src/panels/lovelace/entity-rows/hui-date-entity-row.ts
View File

@@ -1,5 +1,5 @@
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement, nothing } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-date-input";
import { setDateValue } from "../../../data/date";
@@ -64,6 +64,12 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
setDateValue(this.hass!, this._config!.entity, ev.detail.value);
}
}
static styles = css`
ha-date-input {
max-width: 50%;
}
`;
}
declare global {

15
src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
View File

@@ -3,7 +3,7 @@ import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-slider";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import { isUnavailableState } from "../../../data/entity/entity";
import { setValue } from "../../../data/input_text";
import type { HomeAssistant } from "../../../types";
@@ -92,18 +92,20 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
`
: html`
<div class="flex state">
<ha-textfield
<ha-input
.disabled=${isUnavailableState(stateObj.state)}
pattern="[0-9]+([\\.][0-9]+)?"
.step=${Number(stateObj.attributes.step)}
.min=${Number(stateObj.attributes.min)}
.max=${Number(stateObj.attributes.max)}
.value=${Number(stateObj.state).toString()}
.suffix=${stateObj.attributes.unit_of_measurement || ""}
type="number"
@change=${this._selectedValueChanged}
>
</ha-textfield>
<span slot="end"
>${stateObj.attributes.unit_of_measurement || ""}</span
>
</ha-input>
</div>
`}
</hui-generic-entity-row>
@@ -124,7 +126,10 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
min-width: 45px;
text-align: end;
}
ha-textfield {
ha-input {
width: 100%;
}
ha-input::part(wa-input) {
text-align: end;
}
ha-slider {

20
src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
View File

@@ -1,7 +1,8 @@
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import { isUnavailableState, UNAVAILABLE } from "../../../data/entity/entity";
import { setValue } from "../../../data/input_text";
import type { HomeAssistant } from "../../../types";
@@ -50,7 +51,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
.config=${this._config}
hide-name
>
<ha-textfield
<ha-input
.label=${name}
.disabled=${stateObj.state === UNAVAILABLE}
.value=${stateObj.state}
@@ -60,20 +61,21 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
.pattern=${stateObj.attributes.pattern}
.type=${stateObj.attributes.mode}
@change=${this._selectedValueChanged}
placeholder="(empty value)"
></ha-textfield>
.placeholder=${this.hass.localize("ui.card.text.empty_value")}
></ha-input>
</hui-generic-entity-row>
`;
}
private _selectedValueChanged(ev): void {
private _selectedValueChanged(ev: InputEvent): void {
const stateObj = this.hass!.states[this._config!.entity];
const target = ev.target as HaInput;
const newValue = ev.target.value;
const newValue = target.value ?? "";
// Filter out invalid text states
if (newValue && isUnavailableState(newValue)) {
ev.target.value = stateObj.state;
target.value = stateObj.state;
return;
}
@@ -81,7 +83,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
setValue(this.hass!, stateObj.entity_id, newValue);
}
ev.target.blur();
target.blur();
}
static styles = css`
@@ -89,7 +91,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
display: flex;
align-items: center;
}
ha-textfield {
ha-input {
width: 100%;
}
`;

22
src/panels/lovelace/entity-rows/hui-number-entity-row.ts
View File

@@ -3,7 +3,8 @@ import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-slider";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import { UNAVAILABLE } from "../../../data/entity/entity";
import { setValue } from "../../../data/input_text";
import type { HomeAssistant } from "../../../types";
@@ -96,18 +97,21 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
`
: html`
<div class="flex state">
<ha-textfield
autoValidate
<ha-input
auto-validate
.disabled=${stateObj.state === UNAVAILABLE}
pattern="[0-9]+([\\.][0-9]+)?"
.step=${Number(stateObj.attributes.step)}
.min=${Number(stateObj.attributes.min)}
.max=${Number(stateObj.attributes.max)}
.value=${stateObj.state}
.suffix=${stateObj.attributes.unit_of_measurement}
type="number"
@change=${this._selectedValueChanged}
></ha-textfield>
>
<span slot="end"
>${stateObj.attributes.unit_of_measurement}</span
>
</ha-input>
</div>
`}
</hui-generic-entity-row>
@@ -128,7 +132,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
min-width: 45px;
text-align: end;
}
ha-textfield {
ha-input::part(wa-input) {
text-align: end;
direction: ltr !important;
}
@@ -166,11 +170,11 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
}
}
private _selectedValueChanged(ev): void {
private _selectedValueChanged(ev: InputEvent): void {
const stateObj = this.hass!.states[this._config!.entity];
if (ev.target.value !== stateObj.state) {
setValue(this.hass!, stateObj.entity_id, ev.target.value!);
if ((ev.target as HaInput).value !== stateObj.state) {
setValue(this.hass!, stateObj.entity_id, (ev.target as HaInput).value!);
}
}
}

20
src/panels/lovelace/entity-rows/hui-text-entity-row.ts
View File

@@ -1,7 +1,8 @@
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-textfield";
import "../../../components/input/ha-input";
import type { HaInput } from "../../../components/input/ha-input";
import { isUnavailableState, UNAVAILABLE } from "../../../data/entity/entity";
import type { TextEntity } from "../../../data/text";
import { setValue } from "../../../data/text";
@@ -53,7 +54,7 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
.config=${this._config}
hide-name
>
<ha-textfield
<ha-input
.label=${name}
.disabled=${stateObj.state === UNAVAILABLE}
.value=${stateObj.state}
@@ -63,19 +64,20 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
.pattern=${stateObj.attributes.pattern}
.type=${stateObj.attributes.mode}
@change=${this._valueChanged}
placeholder=${this.hass!.localize("ui.card.text.emtpy_value")}
></ha-textfield>
.placeholder=${this.hass!.localize("ui.card.text.empty_value")}
></ha-input>
</hui-generic-entity-row>
`;
}
private _valueChanged(ev): void {
private _valueChanged(ev: InputEvent): void {
const stateObj = this.hass!.states[this._config!.entity] as TextEntity;
const newValue = ev.target.value;
const target = ev.target as HaInput;
const newValue = target.value ?? "";
// Filter out invalid text states
if (newValue && isUnavailableState(newValue)) {
ev.target.value = stateObj.state;
target.value = stateObj.state;
return;
}
@@ -83,7 +85,7 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
setValue(this.hass!, stateObj.entity_id, newValue);
}
ev.target.blur();
target.blur();
}
static styles = css`
@@ -91,7 +93,7 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
display: flex;
align-items: center;
}
ha-textfield {
ha-input {
width: 100%;
}
`;

23
src/panels/profile/ha-long-lived-access-token-dialog.ts
View File

@@ -6,14 +6,14 @@ import { fireEvent } from "../../common/dom/fire_event";
import { copyToClipboard } from "../../common/util/copy-clipboard";
import { withViewTransition } from "../../common/util/view-transition";
import "../../components/ha-alert";
import "../../components/ha-textfield";
import "../../components/ha-button";
import "../../components/ha-dialog";
import "../../components/ha-dialog-footer";
import "../../components/ha-svg-icon";
import "../../components/ha-dialog";
import "../../components/input/ha-input";
import type { HomeAssistant } from "../../types";
import type { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
import { showToast } from "../../util/toast";
import type { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
const QR_LOGO_URL = "/static/icons/favicon-192x192.png";
@@ -98,12 +98,12 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
)}
</p>
<div class="token-row">
<ha-textfield
<ha-input
autofocus
.value=${this._token}
type="text"
readOnly
></ha-textfield>
readonly
></ha-input>
<ha-button appearance="plain" @click=${this._copyToken}>
<ha-svg-icon
slot="start"
@@ -132,19 +132,19 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
</div>
`
: html`
<ha-textfield
<ha-input
autofocus
.value=${this._name}
.label=${this.hass.localize(
"ui.panel.profile.long_lived_access_tokens.name"
)}
.invalid=${this._hasDuplicateName()}
.errorMessage=${this.hass.localize(
.validationMessage=${this.hass.localize(
"ui.panel.profile.long_lived_access_tokens.name_exists"
)}
required
@input=${this._nameChanged}
></ha-textfield>
></ha-input>
`}
</div>
<ha-dialog-footer slot="footer">
@@ -285,15 +285,12 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
gap: var(--ha-space-2);
align-items: center;
}
.token-row ha-textfield {
.token-row ha-input {
flex: 1;
}
p {
margin: 0;
}
ha-textfield {
display: block;
}
`,
];
}

18
src/panels/profile/ha-pick-theme-row.ts
View File

@@ -7,10 +7,10 @@ import "../../components/ha-button";
import "../../components/ha-formfield";
import "../../components/ha-radio";
import type { HaRadio } from "../../components/ha-radio";
import type { HaSelectSelectEvent } from "../../components/ha-select";
import "../../components/ha-select";
import type { HaSelectSelectEvent } from "../../components/ha-select";
import "../../components/ha-settings-row";
import "../../components/ha-textfield";
import "../../components/input/ha-input";
import {
saveThemePreferences,
subscribeThemePreferences,
@@ -153,7 +153,7 @@ export class HaPickThemeRow extends SubscribeMixin(LitElement) {
</ha-formfield>
${curTheme === HOME_ASSISTANT_THEME
? html`<div class="color-pickers">
<ha-textfield
<ha-input
.value=${themeSettings?.primaryColor || DefaultPrimaryColor}
type="color"
.label=${this.hass.localize(
@@ -161,8 +161,8 @@ export class HaPickThemeRow extends SubscribeMixin(LitElement) {
)}
.name=${"primaryColor"}
@change=${this._handleColorChange}
></ha-textfield>
<ha-textfield
></ha-input>
<ha-input
.value=${themeSettings?.accentColor || DefaultAccentColor}
type="color"
.label=${this.hass.localize(
@@ -170,7 +170,7 @@ export class HaPickThemeRow extends SubscribeMixin(LitElement) {
)}
.name=${"accentColor"}
@change=${this._handleColorChange}
></ha-textfield>
></ha-input>
${themeSettings?.primaryColor || themeSettings?.accentColor
? html` <ha-button
appearance="plain"
@@ -327,11 +327,7 @@ export class HaPickThemeRow extends SubscribeMixin(LitElement) {
align-items: center;
flex-grow: 1;
}
ha-textfield {
--text-field-padding-top: 8px;
--text-field-padding-bottom: 8px;
--text-field-padding-start: 8px;
--text-field-padding-end: 8px;
ha-input {
min-width: 75px;
flex-grow: 1;
margin: 0 4px;

21
src/panels/todo/dialog-todo-item-editor.ts
View File

@@ -3,19 +3,22 @@ import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { formatShortDateTimeWithConditionalYear } from "../../common/datetime/format_date_time";
import { resolveTimeZone } from "../../common/datetime/resolve-time-zone";
import { fireEvent } from "../../common/dom/fire_event";
import { computeStateName } from "../../common/entity/compute_state_name";
import { supportsFeature } from "../../common/entity/supports-feature";
import { supportsMarkdownHelper } from "../../common/translations/markdown_support";
import "../../components/ha-alert";
import "../../components/ha-button";
import "../../components/ha-checkbox";
import "../../components/ha-date-input";
import "../../components/ha-dialog";
import "../../components/ha-dialog-footer";
import "../../components/ha-textarea";
import "../../components/ha-textfield";
import "../../components/ha-time-input";
import "../../components/ha-dialog";
import "../../components/input/ha-input";
import type { HaInput } from "../../components/input/ha-input";
import type { TodoItem } from "../../data/todo";
import {
TodoItemStatus,
@@ -28,8 +31,6 @@ import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import type { TodoItemEditDialogParams } from "./show-dialog-todo-item-editor";
import { supportsMarkdownHelper } from "../../common/translations/markdown_support";
import { formatShortDateTimeWithConditionalYear } from "../../common/datetime/format_date_time";
@customElement("dialog-todo-item-editor")
class DialogTodoItemEditor extends LitElement {
@@ -145,7 +146,7 @@ class DialogTodoItemEditor extends LitElement {
@change=${this._checkedCanged}
.disabled=${isCreate || !canUpdate}
></ha-checkbox>
<ha-textfield
<ha-input
class="summary"
name="summary"
.label=${this.hass.localize("ui.components.todo.item.summary")}
@@ -157,7 +158,7 @@ class DialogTodoItemEditor extends LitElement {
"ui.common.error_required"
)}
.disabled=${!canUpdate}
></ha-textfield>
></ha-input>
</div>
${this._completedTime
? html`<div class="italic">
@@ -301,8 +302,8 @@ class DialogTodoItemEditor extends LitElement {
this._checked = ev.target.checked;
}
private _handleSummaryChanged(ev) {
this._summary = ev.target.value;
private _handleSummaryChanged(ev: InputEvent) {
this._summary = (ev.target as HaInput).value ?? "";
}
private _handleDescriptionChanged(ev) {
@@ -438,7 +439,9 @@ class DialogTodoItemEditor extends LitElement {
display: block;
margin-bottom: 16px;
}
ha-textfield,
ha-input {
width: 100%;
}
ha-textarea {
display: block;
width: 100%;

16
src/state-summary/state-card-input_number.ts
View File

@@ -1,11 +1,11 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { debounce } from "../common/util/debounce";
import "../components/entity/state-info";
import "../components/ha-slider";
import "../components/ha-textfield";
import "../components/input/ha-input";
import { isUnavailableState } from "../data/entity/entity";
import { setValue } from "../data/input_text";
import type { HomeAssistant } from "../types";
@@ -71,18 +71,22 @@ class StateCardInputNumber extends LitElement {
`
: html`
<div class="flex state">
<ha-textfield
<ha-input
.disabled=${isUnavailableState(this.stateObj.state)}
pattern="[0-9]+([\\.][0-9]+)?"
.step=${Number(this.stateObj.attributes.step)}
.min=${Number(this.stateObj.attributes.min)}
.max=${Number(this.stateObj.attributes.max)}
.value=${Number(this.stateObj.state).toString()}
.suffix=${this.stateObj.attributes.unit_of_measurement || ""}
type="number"
@change=${this._selectedValueChanged}
>
</ha-textfield>
${this.stateObj.attributes.unit_of_measurement
? html`<span slot="end"
>${this.stateObj.attributes.unit_of_measurement}</span
>`
: nothing}
</ha-input>
</div>
`}
`;
@@ -102,7 +106,7 @@ class StateCardInputNumber extends LitElement {
min-width: 45px;
text-align: end;
}
ha-textfield {
ha-input::part(wa-input) {
text-align: end;
}
ha-slider {

25
src/state-summary/state-card-input_text.ts
View File

@@ -2,11 +2,12 @@ import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../components/entity/state-info";
import "../components/ha-textfield";
import type { HomeAssistant } from "../types";
import { haStyle } from "../resources/styles";
import { stopPropagation } from "../common/dom/stop_propagation";
import "../components/entity/state-info";
import "../components/input/ha-input";
import type { HaInput } from "../components/input/ha-input";
import { haStyle } from "../resources/styles";
import type { HomeAssistant } from "../types";
@customElement("state-card-input_text")
class StateCardInputText extends LitElement {
@@ -26,7 +27,7 @@ class StateCardInputText extends LitElement {
.stateObj=${this.stateObj}
.inDialog=${this.inDialog}
></state-info
><ha-textfield
><ha-input
.minlength=${this.stateObj.attributes.min}
.maxlength=${this.stateObj.attributes.max}
.value=${this.value}
@@ -35,9 +36,9 @@ class StateCardInputText extends LitElement {
@input=${this._onInput}
@change=${this._selectedValueChanged}
@click=${stopPropagation}
placeholder="(empty value)"
.placeholder=${this.hass.localize("ui.card.text.empty_value")}
>
</ha-textfield>
</ha-input>
</div>
`;
}
@@ -49,8 +50,8 @@ class StateCardInputText extends LitElement {
}
}
private _onInput(ev) {
this.value = ev.target.value;
private _onInput(ev: InputEvent) {
this.value = (ev.target as HaInput).value ?? "";
}
private async _selectedValueChanged() {
@@ -67,9 +68,9 @@ class StateCardInputText extends LitElement {
return [
haStyle,
css`
ha-textfield {
margin-left: 16px;
margin-inline-start: 16px;
ha-input {
margin-left: var(--ha-space-4);
margin-inline-start: var(--ha-space-4);
margin-inline-end: initial;
}
`,

16
src/state-summary/state-card-number.ts
View File

@@ -1,11 +1,11 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { debounce } from "../common/util/debounce";
import "../components/entity/state-info";
import "../components/ha-slider";
import "../components/ha-textfield";
import "../components/input/ha-input";
import { isUnavailableState } from "../data/entity/entity";
import { haStyle } from "../resources/styles";
import type { HomeAssistant } from "../types";
@@ -74,18 +74,22 @@ class StateCardNumber extends LitElement {
</div>
`
: html` <div class="flex state">
<ha-textfield
<ha-input
.disabled=${isUnavailableState(this.stateObj.state)}
pattern="[0-9]+([\\.][0-9]+)?"
.step=${Number(this.stateObj.attributes.step)}
.min=${Number(this.stateObj.attributes.min)}
.max=${Number(this.stateObj.attributes.max)}
.value=${Number(this.stateObj.state).toString()}
.suffix=${this.stateObj.attributes.unit_of_measurement || ""}
type="number"
@change=${this._selectedValueChanged}
>
</ha-textfield>
${this.stateObj.attributes.unit_of_measurement
? html`<span slot="end"
>${this.stateObj.attributes.unit_of_measurement}</span
>`
: nothing}
</ha-input>
</div>`}
`;
}
@@ -146,7 +150,7 @@ class StateCardNumber extends LitElement {
min-width: 45px;
text-align: end;
}
ha-textfield {
ha-input::part(wa-input) {
text-align: end;
}
ha-slider {

17
src/state-summary/state-card-text.ts
View File

@@ -4,7 +4,8 @@ import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name";
import "../components/entity/state-badge";
import "../components/ha-textfield";
import "../components/input/ha-input";
import type { HaInput } from "../components/input/ha-input";
import { isUnavailableState, UNAVAILABLE } from "../data/entity/entity";
import type { TextEntity } from "../data/text";
import { setValue } from "../data/text";
@@ -19,7 +20,7 @@ class StateCardText extends LitElement {
protected render(): TemplateResult {
return html`
<state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge>
<ha-textfield
<ha-input
.label=${computeStateName(this.stateObj)}
.disabled=${this.stateObj.state === UNAVAILABLE}
.value=${this.stateObj.state}
@@ -30,17 +31,17 @@ class StateCardText extends LitElement {
.type=${this.stateObj.attributes.mode}
@change=${this._valueChanged}
@click=${stopPropagation}
placeholder=${this.hass.localize("ui.card.text.emtpy_value")}
></ha-textfield>
.placeholder=${this.hass.localize("ui.card.text.empty_value")}
></ha-input>
`;
}
private _valueChanged(ev): void {
const value = ev.target.value;
private _valueChanged(ev: InputEvent): void {
const value = (ev.target as HaInput).value ?? "";
// Filter out invalid text states
if (value && isUnavailableState(value)) {
ev.target.value = this.stateObj.state;
(ev.target as HaInput).value = this.stateObj.state;
return;
}
@@ -60,7 +61,7 @@ class StateCardText extends LitElement {
margin-top: 10px;
}
ha-textfield {
ha-input {
width: 100%;
}
`;

2
src/translations/en.json
View File

@@ -295,7 +295,7 @@
"up_to_date": "Up-to-date"
},
"text": {
"emtpy_value": "(empty value)"
"empty_value": "(empty value)"
},
"timer": {
"actions": {