Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-18 07:56:44 +01:00
Code Activity

Migrate ha-textfields to ha-input in 24 files (#30298)

Browse Source 
* migrate ha-textfields to ha-input in 24 files

* Fix import path for ha-input and update attribute syntax in entity-preview-row
This commit is contained in:
Wendelin
2026-03-25 10:28:10 +01:00
committed by GitHub
parent 79743c0afa
commit 6bdf1ccd8c
24 changed files with 286 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ha-qr-scanner.ts
View File

@@ -17,8 +17,8 @@ import "./ha-dropdown";
import type { HaDropdownSelectEvent } from "./ha-dropdown"; import type { HaDropdownSelectEvent } from "./ha-dropdown";
import "./ha-dropdown-item"; import "./ha-dropdown-item";
import "./ha-spinner"; import "./ha-spinner";
import "./ha-textfield"; import "./input/ha-input";
import type { HaTextField } from "./ha-textfield"; import type { HaInput } from "./input/ha-input";
prepareZXingModule({ prepareZXingModule({
overrides: { overrides: {
@@ -64,7 +64,7 @@ class HaQrScanner extends LitElement {
@query("#canvas-container", true) private _canvasContainer?: HTMLDivElement; @query("#canvas-container", true) private _canvasContainer?: HTMLDivElement;
@query("ha-textfield") private _manualInput?: HaTextField; @query("ha-input") private _manualInput?: HaInput;
public disconnectedCallback(): void { public disconnectedCallback(): void {
super.disconnectedCallback(); super.disconnectedCallback();
@@ -153,13 +153,13 @@ class HaQrScanner extends LitElement {
</ha-alert> </ha-alert>
<p>${this.hass.localize("ui.components.qr-scanner.manual_input")}</p> <p>${this.hass.localize("ui.components.qr-scanner.manual_input")}</p>
<div class="row"> <div class="row">
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.components.qr-scanner.enter_qr_code" "ui.components.qr-scanner.enter_qr_code"
)} )}
@keyup=${this._manualKeyup} @keyup=${this._manualKeyup}
@paste=${this._manualPaste} @paste=${this._manualPaste}
></ha-textfield> ></ha-input>
<ha-button @click=${this._manualSubmit}> <ha-button @click=${this._manualSubmit}>
${this.hass.localize("ui.common.submit")} ${this.hass.localize("ui.common.submit")}
</ha-button> </ha-button>
@@ -242,7 +242,7 @@ class HaQrScanner extends LitElement {
private _manualKeyup(ev: KeyboardEvent) { private _manualKeyup(ev: KeyboardEvent) {
if (ev.key === "Enter") { if (ev.key === "Enter") {
this._qrCodeScanned((ev.target as HaTextField).value); this._qrCodeScanned((ev.target as HaInput).value ?? "");
} }
} }
@@ -254,7 +254,7 @@ class HaQrScanner extends LitElement {
} }
private _manualSubmit() { private _manualSubmit() {
this._qrCodeScanned(this._manualInput!.value); this._qrCodeScanned(this._manualInput!.value ?? "");
} }
private _handleDropdownSelect(ev: HaDropdownSelectEvent) { private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
@@ -382,7 +382,7 @@ class HaQrScanner extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
} }
ha-textfield { ha-input {
flex: 1; flex: 1;
margin-right: 8px; margin-right: 8px;
margin-inline-end: 8px; margin-inline-end: 8px;

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

@@ -16,6 +16,7 @@ import "../../../components/ha-humidifier-state";
import "../../../components/ha-select"; import "../../../components/ha-select";
import "../../../components/ha-slider"; import "../../../components/ha-slider";
import "../../../components/ha-time-input"; import "../../../components/ha-time-input";
import "../../../components/input/ha-input";
import { isTiltOnly } from "../../../data/cover"; import { isTiltOnly } from "../../../data/cover";
import { isUnavailableState } from "../../../data/entity/entity"; import { isUnavailableState } from "../../../data/entity/entity";
import type { ImageEntity } from "../../../data/image"; import type { ImageEntity } from "../../../data/image";
@@ -72,7 +73,7 @@ class EntityPreviewRow extends LitElement {
min-width: 45px; min-width: 45px;
text-align: end; text-align: end;
} }
ha-textfield { ha-input {
text-align: end; text-align: end;
direction: ltr !important; direction: ltr !important;
} }
@@ -273,18 +274,23 @@ class EntityPreviewRow extends LitElement {
</span> </span>
</div> </div>
` `
: html` <div class="numberflex numberstate"> : html`<div class="numberflex numberstate">
<ha-textfield <ha-input
autoValidate auto-validate
.disabled=${isUnavailableState(stateObj.state)} .disabled=${isUnavailableState(stateObj.state)}
pattern="[0-9]+([\\.][0-9]+)?" pattern="[0-9]+([\\.][0-9]+)?"
.step=${Number(stateObj.attributes.step)} .step=${Number(stateObj.attributes.step)}
.min=${Number(stateObj.attributes.min)} .min=${Number(stateObj.attributes.min)}
.max=${Number(stateObj.attributes.max)} .max=${Number(stateObj.attributes.max)}
.value=${stateObj.state} .value=${stateObj.state}
.suffix=${stateObj.attributes.unit_of_measurement}
type="number" type="number"
></ha-textfield> >
${stateObj.attributes.unit_of_measurement
? html`<span slot="end"
>${stateObj.attributes.unit_of_measurement}</span
>`
: nothing}
</ha-input>
</div>`} </div>`}
`; `;
} }
@@ -323,7 +329,7 @@ class EntityPreviewRow extends LitElement {
if (domain === "text") { if (domain === "text") {
return html` return html`
<ha-textfield <ha-input
.label=${computeStateName(stateObj)} .label=${computeStateName(stateObj)}
.disabled=${isUnavailableState(stateObj.state)} .disabled=${isUnavailableState(stateObj.state)}
.value=${stateObj.state} .value=${stateObj.state}
@@ -333,7 +339,7 @@ class EntityPreviewRow extends LitElement {
.pattern=${stateObj.attributes.pattern} .pattern=${stateObj.attributes.pattern}
.type=${stateObj.attributes.mode} .type=${stateObj.attributes.mode}
placeholder=${this.hass!.localize("ui.card.text.emtpy_value")} placeholder=${this.hass!.localize("ui.card.text.emtpy_value")}
></ha-textfield> ></ha-input>
`; `;
} }

21
src/dialogs/config-flow/step-flow-create-entry.ts
View File

@@ -11,6 +11,8 @@ import { computeDomain } from "../../common/entity/compute_domain";
import { navigate } from "../../common/navigate"; import { navigate } from "../../common/navigate";
import "../../components/ha-area-picker"; import "../../components/ha-area-picker";
import "../../components/ha-button"; import "../../components/ha-button";
import "../../components/input/ha-input";
import type { HaInput } from "../../components/input/ha-input";
import { assistSatelliteSupportsSetupFlow } from "../../data/assist_satellite"; import { assistSatelliteSupportsSetupFlow } from "../../data/assist_satellite";
import { getConfigEntries } from "../../data/config_entries"; import { getConfigEntries } from "../../data/config_entries";
import type { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow"; import type { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
@@ -22,7 +24,7 @@ import {
type EntityRegistryDisplayEntry, type EntityRegistryDisplayEntry,
} from "../../data/entity/entity_registry"; } from "../../data/entity/entity_registry";
import { domainToName } from "../../data/integration"; import { domainToName } from "../../data/integration";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant, ValueChangedEvent } from "../../types";
import { brandsUrl } from "../../util/brands-url"; import { brandsUrl } from "../../util/brands-url";
import { showAlertDialog } from "../generic/show-dialog-box"; import { showAlertDialog } from "../generic/show-dialog-box";
import { showVoiceAssistantSetupDialog } from "../voice-assistant-setup/show-voice-assistant-setup-dialog"; import { showVoiceAssistantSetupDialog } from "../voice-assistant-setup/show-voice-assistant-setup-dialog";
@@ -162,7 +164,7 @@ class StepFlowCreateEntry extends LitElement {
: nothing} : nothing}
</div> </div>
</div> </div>
<ha-textfield <ha-input
.label=${localize( .label=${localize(
"ui.panel.config.integrations.config_flow.device_name" "ui.panel.config.integrations.config_flow.device_name"
)} )}
@@ -174,7 +176,7 @@ class StepFlowCreateEntry extends LitElement {
computeDeviceName(device)} computeDeviceName(device)}
@change=${this._deviceNameChanged} @change=${this._deviceNameChanged}
.device=${device.id} .device=${device.id}
></ha-textfield> ></ha-input>
<ha-area-picker <ha-area-picker
.hass=${this.hass} .hass=${this.hass}
.device=${device.id} .device=${device.id}
@@ -278,7 +280,7 @@ class StepFlowCreateEntry extends LitElement {
} }
} }
private async _areaPicked(ev: CustomEvent) { private async _areaPicked(ev: ValueChangedEvent<string>) {
const picker = ev.currentTarget as any; const picker = ev.currentTarget as any;
const device = picker.device; const device = picker.device;
const area = ev.detail.value; const area = ev.detail.value;
@@ -290,9 +292,9 @@ class StepFlowCreateEntry extends LitElement {
this.requestUpdate("_deviceUpdate"); this.requestUpdate("_deviceUpdate");
} }
private _deviceNameChanged(ev): void { private _deviceNameChanged(ev: InputEvent): void {
const picker = ev.currentTarget as any; const picker = ev.currentTarget as HaInput;
const device = picker.device; const device = (picker as any).device;
const name = picker.value; const name = picker.value;
if (!(device in this._deviceUpdate)) { if (!(device in this._deviceUpdate)) {
@@ -343,12 +345,11 @@ class StepFlowCreateEntry extends LitElement {
.secondary { .secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-textfield,
ha-area-picker { ha-area-picker {
display: block; display: block;
} }
ha-textfield { ha-input {
margin: 8px 0; margin: var(--ha-space-2) 0;
} }
.buttons > *:last-child { .buttons > *:last-child {
margin-left: auto; margin-left: auto;

21
src/dialogs/enter-code/dialog-enter-code.ts
View File

@@ -5,10 +5,10 @@ import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button"; import "../../components/ha-button";
import "../../components/ha-control-button"; import "../../components/ha-control-button";
import "../../components/ha-dialog-footer";
import "../../components/ha-textfield";
import "../../components/ha-dialog"; import "../../components/ha-dialog";
import type { HaTextField } from "../../components/ha-textfield"; import "../../components/ha-dialog-footer";
import "../../components/input/ha-input";
import type { HaInput } from "../../components/input/ha-input";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import type { HassDialog } from "../make-dialog-manager"; import type { HassDialog } from "../make-dialog-manager";
import type { EnterCodeDialogParams } from "./show-enter-code-dialog"; import type { EnterCodeDialogParams } from "./show-enter-code-dialog";
@@ -39,7 +39,7 @@ export class DialogEnterCode
@state() private _open = false; @state() private _open = false;
@query("#code") private _input?: HaTextField; @query("#code") private _input?: HaInput;
@state() private _showClearButton = false; @state() private _showClearButton = false;
@@ -97,7 +97,7 @@ export class DialogEnterCode
} }
private _inputValueChange(e) { private _inputValueChange(e) {
const field = e.currentTarget as HaTextField; const field = e.currentTarget as HaInput;
const val = field.value; const val = field.value;
this._showClearButton = !!val; this._showClearButton = !!val;
} }
@@ -119,7 +119,7 @@ export class DialogEnterCode
width="small" width="small"
@closed=${this._dialogClosed} @closed=${this._dialogClosed}
> >
<ha-textfield <ha-input
class="input" class="input"
?autofocus=${!this._narrow} ?autofocus=${!this._narrow}
id="code" id="code"
@@ -129,7 +129,7 @@ export class DialogEnterCode
validateOnInitialRender validateOnInitialRender
pattern=${ifDefined(this._dialogParams.codePattern)} pattern=${ifDefined(this._dialogParams.codePattern)}
inputmode="text" inputmode="text"
></ha-textfield> ></ha-input>
<ha-dialog-footer slot="footer"> <ha-dialog-footer slot="footer">
<ha-button <ha-button
slot="secondaryAction" slot="secondaryAction"
@@ -157,14 +157,15 @@ export class DialogEnterCode
@closed=${this._dialogClosed} @closed=${this._dialogClosed}
> >
<div class="container"> <div class="container">
<ha-textfield <ha-input
@input=${this._inputValueChange} @input=${this._inputValueChange}
id="code" id="code"
.label=${this.hass.localize("ui.dialogs.enter_code.input_label")} .label=${this.hass.localize("ui.dialogs.enter_code.input_label")}
type="password" type="password"
inputmode="numeric" inputmode="numeric"
?autofocus=${!this._narrow} ?autofocus=${!this._narrow}
></ha-textfield> password-toggle
></ha-input>
<div class="keypad"> <div class="keypad">
${BUTTONS.map((value) => ${BUTTONS.map((value) =>
value === "" value === ""
@@ -212,7 +213,7 @@ export class DialogEnterCode
/* Place above other dialogs */ /* Place above other dialogs */
--dialog-z-index: 104; --dialog-z-index: 104;
} }
ha-textfield { ha-input {
width: 100%; width: 100%;
margin: auto; margin: auto;
} }

21
src/dialogs/generic/dialog-box.ts
View File

@@ -5,12 +5,12 @@ import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button"; import "../../components/ha-button";
import "../../components/ha-dialog";
import "../../components/ha-dialog-footer"; import "../../components/ha-dialog-footer";
import "../../components/ha-dialog-header"; import "../../components/ha-dialog-header";
import "../../components/ha-svg-icon"; import "../../components/ha-svg-icon";
import "../../components/ha-textfield"; import "../../components/input/ha-input";
import type { HaTextField } from "../../components/ha-textfield"; import type { HaInput } from "../../components/input/ha-input";
import "../../components/ha-dialog";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import type { DialogBoxParams } from "./show-dialog-box"; import type { DialogBoxParams } from "./show-dialog-box";
@@ -28,7 +28,7 @@ class DialogBox extends LitElement {
@state() private _validInput = true; @state() private _validInput = true;
@query("ha-textfield") private _textField?: HaTextField; @query("ha-input") private _textField?: HaInput;
private _closePromise?: Promise<void>; private _closePromise?: Promise<void>;
@@ -109,14 +109,13 @@ class DialogBox extends LitElement {
${this._params.text ? html` <p>${this._params.text}</p> ` : ""} ${this._params.text ? html` <p>${this._params.text}</p> ` : ""}
${this._params.prompt ${this._params.prompt
? html` ? html`
<ha-textfield <ha-input
autofocus autofocus
value=${ifDefined(this._params.defaultValue)} value=${ifDefined(this._params.defaultValue)}
.placeholder=${this._params.placeholder} .placeholder=${this._params.placeholder}
.label=${this._params.inputLabel .label=${this._params.inputLabel
? this._params.inputLabel ? this._params.inputLabel
: ""} : ""}
.suffix=${this._params.inputSuffix}
.type=${this._params.inputType .type=${this._params.inputType
? this._params.inputType ? this._params.inputType
: "text"} : "text"}
@@ -124,9 +123,13 @@ class DialogBox extends LitElement {
.max=${this._params.inputMax} .max=${this._params.inputMax}
.disabled=${this._loading} .disabled=${this._loading}
@input=${this._validateInput} @input=${this._validateInput}
></ha-textfield> >
${this._params.inputSuffix
? html`<span slot="end">${this._params.inputSuffix}</span>`
: nothing}
</ha-input>
` `
: ""} : nothing}
</div> </div>
<ha-dialog-footer slot="footer"> <ha-dialog-footer slot="footer">
${confirmPrompt ${confirmPrompt
@@ -240,7 +243,7 @@ class DialogBox extends LitElement {
.secondary { .secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-textfield { ha-input {
width: 100%; width: 100%;
} }
.title.alert { .title.alert {

26
src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
View File

@@ -7,13 +7,13 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { supportsFeature } from "../../../../common/entity/supports-feature"; import { supportsFeature } from "../../../../common/entity/supports-feature";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-control-button"; import "../../../../components/ha-control-button";
import type { HaSelectSelectEvent } from "../../../../components/ha-select"; import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer"; import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-list-item"; import "../../../../components/ha-list-item";
import "../../../../components/ha-select"; import "../../../../components/ha-select";
import "../../../../components/ha-textfield"; import type { HaSelectSelectEvent } from "../../../../components/ha-select";
import "../../../../components/ha-dialog"; import "../../../../components/input/ha-input";
import { SirenEntityFeature } from "../../../../data/siren"; import { SirenEntityFeature } from "../../../../data/siren";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
@@ -95,27 +95,31 @@ class MoreInfoSirenAdvancedControls extends LitElement {
: nothing} : nothing}
${supportsVolume ${supportsVolume
? html` ? html`
<ha-textfield <ha-input
type="number" type="number"
.label=${this.hass.localize("ui.components.siren.volume")} .label=${this.hass.localize("ui.components.siren.volume")}
.suffix=${"%"} .value=${this._volume ? `${this._volume * 100}` : undefined}
.value=${this._volume ? this._volume * 100 : undefined}
@change=${this._handleVolumeChange} @change=${this._handleVolumeChange}
.min=${0} .min=${0}
.max=${100} .max=${100}
.step=${1} .step=${1}
></ha-textfield> >
<span slot="end">%</span>
</ha-input>
` `
: nothing} : nothing}
${supportsDuration ${supportsDuration
? html` ? html`
<ha-textfield <ha-input
type="number" type="number"
.label=${this.hass.localize("ui.components.siren.duration")} .label=${this.hass.localize("ui.components.siren.duration")}
.value=${this._duration} .value=${this._duration !== undefined
suffix="s" ? this._duration.toString()
: undefined}
@change=${this._handleDurationChange} @change=${this._handleDurationChange}
></ha-textfield> >
<span slot="end">s</span>
</ha-input>
` `
: nothing} : nothing}
</div> </div>

10
src/dialogs/more-info/controls/more-info-configurator.ts
View File

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-alert"; import "../../../components/ha-alert";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-markdown"; import "../../../components/ha-markdown";
import "../../../components/ha-textfield"; import "../../../components/input/ha-input";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
@customElement("more-info-configurator") @customElement("more-info-configurator")
@@ -33,15 +33,15 @@ export class MoreInfoConfigurator extends LitElement {
? html`<ha-alert alert-type="error"> ? html`<ha-alert alert-type="error">
${this.stateObj.attributes.errors} ${this.stateObj.attributes.errors}
</ha-alert>` </ha-alert>`
: ""} : nothing}
${this.stateObj.attributes.fields.map( ${this.stateObj.attributes.fields.map(
(field) => (field) =>
html`<ha-textfield html`<ha-input
.label=${field.name} .label=${field.name}
.name=${field.id} .name=${field.id}
.type=${field.type} .type=${field.type}
@change=${this._fieldChanged} @change=${this._fieldChanged}
></ha-textfield>` ></ha-input>`
)} )}
${this.stateObj.attributes.submit_caption ${this.stateObj.attributes.submit_caption
? html`<p class="submit"> ? html`<p class="submit">
@@ -53,7 +53,7 @@ export class MoreInfoConfigurator extends LitElement {
${this.stateObj.attributes.submit_caption} ${this.stateObj.attributes.submit_caption}
</ha-button> </ha-button>
</p>` </p>`
: ""} : nothing}
</div> </div>
`; `;
} }

7
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
View File

@@ -4,13 +4,14 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation"; import { stopPropagation } from "../../common/dom/stop_propagation";
import type { HaSelectSelectEvent } from "../../components/ha-select";
import { import {
computeDeviceName, computeDeviceName,
computeDeviceNameDisplay, computeDeviceNameDisplay,
} from "../../common/entity/compute_device_name"; } from "../../common/entity/compute_device_name";
import "../../components/ha-select"; import "../../components/ha-select";
import type { HaSelectSelectEvent } from "../../components/ha-select";
import "../../components/ha-tts-voice-picker"; import "../../components/ha-tts-voice-picker";
import "../../components/input/ha-input";
import type { AssistPipeline } from "../../data/assist_pipeline"; import type { AssistPipeline } from "../../data/assist_pipeline";
import { import {
listAssistPipelines, listAssistPipelines,
@@ -99,14 +100,14 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
: nothing} : nothing}
<div class="rows"> <div class="rows">
<div class="row"> <div class="row">
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.integrations.config_flow.device_name" "ui.panel.config.integrations.config_flow.device_name"
)} )}
.placeholder=${computeDeviceNameDisplay(device, this.hass)} .placeholder=${computeDeviceNameDisplay(device, this.hass)}
.value=${this._deviceName ?? computeDeviceName(device)} .value=${this._deviceName ?? computeDeviceName(device)}
@change=${this._deviceNameChanged} @change=${this._deviceNameChanged}
></ha-textfield> ></ha-input>
</div> </div>
${this.assistConfiguration && ${this.assistConfiguration &&
this.assistConfiguration.available_wake_words.length > 1 this.assistConfiguration.available_wake_words.length > 1

49
src/onboarding/onboarding-location.ts
View File

@@ -16,8 +16,8 @@ import "../components/ha-list";
import "../components/ha-list-item"; import "../components/ha-list-item";
import "../components/ha-radio"; import "../components/ha-radio";
import "../components/ha-spinner"; import "../components/ha-spinner";
import "../components/ha-textfield"; import "../components/input/ha-input";
import type { HaTextField } from "../components/ha-textfield"; import type { HaInput } from "../components/input/ha-input";
import "../components/map/ha-locations-editor"; import "../components/map/ha-locations-editor";
import type { import type {
HaLocationsEditor, HaLocationsEditor,
@@ -103,22 +103,20 @@ class OnboardingLocation extends LitElement {
</p> </p>
<div class="location-search"> <div class="location-search">
<ha-textfield <ha-input
label=${this.onboardingLocalize( label=${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.address_label" "ui.panel.page-onboarding.core-config.address_label"
)} )}
.disabled=${this._working} .disabled=${this._working}
icon
iconTrailing
@keyup=${this._addressSearch} @keyup=${this._addressSearch}
> >
<ha-svg-icon slot="leadingIcon" .path=${mdiMagnify}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiMagnify}></ha-svg-icon>
${this._working ${this._working
? html` <ha-spinner slot="trailingIcon" size="small"></ha-spinner> ` ? html`<ha-spinner slot="end" size="small"></ha-spinner>`
: html` : html`
<ha-icon-button <ha-icon-button
@click=${this._handleButtonClick} @click=${this._handleButtonClick}
slot="trailingIcon" slot="end"
.disabled=${this._working} .disabled=${this._working}
.label=${this.onboardingLocalize( .label=${this.onboardingLocalize(
this._search this._search
@@ -128,7 +126,7 @@ class OnboardingLocation extends LitElement {
.path=${this._search ? mdiMapSearchOutline : mdiCrosshairsGps} .path=${this._search ? mdiMapSearchOutline : mdiCrosshairsGps}
></ha-icon-button> ></ha-icon-button>
`} `}
</ha-textfield> </ha-input>
${this._places !== undefined ${this._places !== undefined
? html` ? html`
<ha-list activatable> <ha-list activatable>
@@ -204,10 +202,7 @@ class OnboardingLocation extends LitElement {
protected firstUpdated(changedProps) { protected firstUpdated(changedProps) {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
setTimeout( setTimeout(() => this.renderRoot.querySelector("ha-input")!.focus(), 100);
() => this.renderRoot.querySelector("ha-textfield")!.focus(),
100
);
this.addEventListener("keyup", (ev) => { this.addEventListener("keyup", (ev) => {
if (ev.key === "Enter") { if (ev.key === "Enter") {
this._save(ev); this._save(ev);
@@ -299,11 +294,11 @@ class OnboardingLocation extends LitElement {
private async _addressSearch(ev: KeyboardEvent) { private async _addressSearch(ev: KeyboardEvent) {
ev.stopPropagation(); ev.stopPropagation();
this._search = (ev.currentTarget as HaTextField).value.length > 0; this._search = ((ev.currentTarget as HaInput).value ?? "").length > 0;
if (ev.key !== "Enter") { if (ev.key !== "Enter") {
return; return;
} }
this._searchAddress((ev.currentTarget as HaTextField).value); this._searchAddress((ev.currentTarget as HaInput).value ?? "");
} }
private async _searchAddress(address: string) { private async _searchAddress(address: string) {
@@ -477,28 +472,6 @@ class OnboardingLocation extends LitElement {
margin-top: 32px; margin-top: 32px;
margin-bottom: 32px; margin-bottom: 32px;
} }
ha-textfield {
display: block;
}
ha-textfield > ha-icon-button {
position: absolute;
top: 10px;
right: 10px;
inset-inline-end: 10px;
inset-inline-start: initial;
--ha-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: 10px;
direction: var(--direction);
}
ha-textfield > ha-spinner {
position: relative;
left: 12px;
inset-inline-start: 12px;
inset-inline-end: initial;
}
ha-locations-editor { ha-locations-editor {
display: block; display: block;
height: 300px; height: 300px;
@@ -519,7 +492,7 @@ class OnboardingLocation extends LitElement {
height: 72px; height: 72px;
} }
.attribution { .attribution {
/* textfield helper style */ /* input helper style */
margin: 0; margin: 0;
padding: 4px 16px 12px 16px; padding: 4px 16px 12px 16px;
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6)); color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));

23
src/panels/calendar/dialog-calendar-event-editor.ts
View File

@@ -10,6 +10,11 @@ import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import {
formatDate,
formatTime,
parseDate,
} from "../../common/datetime/calc_date";
import { resolveTimeZone } from "../../common/datetime/resolve-time-zone"; import { resolveTimeZone } from "../../common/datetime/resolve-time-zone";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../common/entity/compute_state_domain";
@@ -19,13 +24,13 @@ import "../../components/entity/ha-entity-picker";
import "../../components/ha-alert"; import "../../components/ha-alert";
import "../../components/ha-button"; import "../../components/ha-button";
import "../../components/ha-date-input"; import "../../components/ha-date-input";
import "../../components/ha-dialog";
import "../../components/ha-dialog-footer"; import "../../components/ha-dialog-footer";
import "../../components/ha-formfield"; import "../../components/ha-formfield";
import "../../components/ha-switch"; import "../../components/ha-switch";
import "../../components/ha-textarea"; import "../../components/ha-textarea";
import "../../components/ha-textfield";
import "../../components/ha-time-input"; import "../../components/ha-time-input";
import "../../components/ha-dialog"; import "../../components/input/ha-input";
import type { CalendarEventMutableParams } from "../../data/calendar"; import type { CalendarEventMutableParams } from "../../data/calendar";
import { import {
CalendarEntityFeature, CalendarEntityFeature,
@@ -40,11 +45,6 @@ import "../lovelace/components/hui-generic-entity-row";
import "./ha-recurrence-rule-editor"; import "./ha-recurrence-rule-editor";
import { showConfirmEventDialog } from "./show-confirm-event-dialog-box"; import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
import type { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor"; import type { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";
import {
formatDate,
formatTime,
parseDate,
} from "../../common/datetime/calc_date";
const CALENDAR_DOMAINS = ["calendar"]; const CALENDAR_DOMAINS = ["calendar"];
@@ -170,7 +170,7 @@ class DialogCalendarEventEditor extends LitElement {
>` >`
: ""} : ""}
<ha-textfield <ha-input
class="summary" class="summary"
name="summary" name="summary"
.label=${this.hass.localize("ui.components.calendar.event.summary")} .label=${this.hass.localize("ui.components.calendar.event.summary")}
@@ -179,8 +179,8 @@ class DialogCalendarEventEditor extends LitElement {
@input=${this._handleSummaryChanged} @input=${this._handleSummaryChanged}
.validationMessage=${this.hass.localize("ui.common.error_required")} .validationMessage=${this.hass.localize("ui.common.error_required")}
autofocus autofocus
></ha-textfield> ></ha-input>
<ha-textfield <ha-input
class="location" class="location"
name="location" name="location"
.label=${this.hass.localize( .label=${this.hass.localize(
@@ -188,7 +188,7 @@ class DialogCalendarEventEditor extends LitElement {
)} )}
.value=${this._location} .value=${this._location}
@change=${this._handleLocationChanged} @change=${this._handleLocationChanged}
></ha-textfield> ></ha-input>
<ha-textarea <ha-textarea
class="description" class="description"
name="description" name="description"
@@ -624,7 +624,6 @@ class DialogCalendarEventEditor extends LitElement {
display: block; display: block;
margin-bottom: 16px; margin-bottom: 16px;
} }
ha-textfield,
ha-textarea { ha-textarea {
display: block; display: block;
} }

35
src/panels/calendar/ha-recurrence-rule-editor.ts
View File

@@ -12,7 +12,7 @@ import "../../components/chips/ha-filter-chip";
import "../../components/ha-date-input"; import "../../components/ha-date-input";
import "../../components/ha-select"; import "../../components/ha-select";
import type { HaSelectSelectEvent } from "../../components/ha-select"; import type { HaSelectSelectEvent } from "../../components/ha-select";
import "../../components/ha-textfield"; import "../../components/input/ha-input";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import type { import type {
MonthlyRepeatItem, MonthlyRepeatItem,
@@ -231,7 +231,7 @@ export class RecurrenceRuleEditor extends LitElement {
renderInterval() { renderInterval() {
return html` return html`
<ha-textfield <ha-input
id="interval" id="interval"
label=${this.hass.localize( label=${this.hass.localize(
"ui.components.calendar.event.repeat.interval.label" "ui.components.calendar.event.repeat.interval.label"
@@ -239,12 +239,15 @@ export class RecurrenceRuleEditor extends LitElement {
type="number" type="number"
min="1" min="1"
.value=${this._interval} .value=${this._interval}
.suffix=${this.hass.localize(
`ui.components.calendar.event.repeat.interval.${this
._freq!}` as LocalizeKeys
)}
@change=${this._onIntervalChange} @change=${this._onIntervalChange}
></ha-textfield> >
<span slot="end">
${this.hass.localize(
`ui.components.calendar.event.repeat.interval.${this
._freq!}` as LocalizeKeys
)}
</span>
</ha-input>
`; `;
} }
@@ -267,7 +270,7 @@ export class RecurrenceRuleEditor extends LitElement {
</ha-select> </ha-select>
${this._end === "after" ${this._end === "after"
? html` ? html`
<ha-textfield <ha-input
id="after" id="after"
label=${this.hass.localize( label=${this.hass.localize(
"ui.components.calendar.event.repeat.end_after.label" "ui.components.calendar.event.repeat.end_after.label"
@@ -275,11 +278,14 @@ export class RecurrenceRuleEditor extends LitElement {
type="number" type="number"
min="1" min="1"
.value=${this._count!} .value=${this._count!}
suffix=${this.hass.localize(
"ui.components.calendar.event.repeat.end_after.ocurrences"
)}
@change=${this._onCountChange} @change=${this._onCountChange}
></ha-textfield> >
<span slot="end">
${this.hass.localize(
"ui.components.calendar.event.repeat.end_after.ocurrences"
)}
</span>
</ha-input>
` `
: nothing} : nothing}
${this._end === "on" ${this._end === "on"
@@ -452,15 +458,16 @@ export class RecurrenceRuleEditor extends LitElement {
} }
static styles = css` static styles = css`
ha-textfield, ha-input,
ha-select { ha-select {
display: block; display: block;
margin-bottom: 16px; margin-bottom: 16px;
--ha-input-padding-bottom: 0;
} }
.weekdays { .weekdays {
margin-bottom: 16px; margin-bottom: 16px;
} }
ha-textfield:last-child, ha-input:last-child,
ha-select:last-child, ha-select:last-child,
.weekdays:last-child { .weekdays:last-child {
margin-bottom: 0; margin-bottom: 0;

19
src/panels/config/areas/dialog-area-registry-detail.ts
View File

@@ -8,6 +8,7 @@ import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker
import "../../../components/ha-alert"; import "../../../components/ha-alert";
import "../../../components/ha-aliases-editor"; import "../../../components/ha-aliases-editor";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer"; import "../../../components/ha-dialog-footer";
import "../../../components/ha-expansion-panel"; import "../../../components/ha-expansion-panel";
import "../../../components/ha-floor-picker"; import "../../../components/ha-floor-picker";
@@ -18,8 +19,8 @@ import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import "../../../components/ha-settings-row"; import "../../../components/ha-settings-row";
import "../../../components/ha-suggest-with-ai-button"; import "../../../components/ha-suggest-with-ai-button";
import type { SuggestWithAIGenerateTask } from "../../../components/ha-suggest-with-ai-button"; import type { SuggestWithAIGenerateTask } from "../../../components/ha-suggest-with-ai-button";
import "../../../components/ha-textfield"; import "../../../components/input/ha-input";
import "../../../components/ha-dialog"; import type { HaInput } from "../../../components/input/ha-input";
import type { GenDataTaskResult } from "../../../data/ai_task"; import type { GenDataTaskResult } from "../../../data/ai_task";
import type { import type {
AreaRegistryEntry, AreaRegistryEntry,
@@ -30,9 +31,9 @@ import {
SENSOR_DEVICE_CLASS_HUMIDITY, SENSOR_DEVICE_CLASS_HUMIDITY,
SENSOR_DEVICE_CLASS_TEMPERATURE, SENSOR_DEVICE_CLASS_TEMPERATURE,
} from "../../../data/sensor"; } from "../../../data/sensor";
import type { HassDialog } from "../../../dialogs/make-dialog-manager";
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog"; import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
import type { HassDialog } from "../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant, ValueChangedEvent } from "../../../types"; import type { HomeAssistant, ValueChangedEvent } from "../../../types";
import { import {
@@ -144,7 +145,7 @@ class DialogAreaDetail
` `
: nothing} : nothing}
<ha-textfield <ha-input
autofocus autofocus
.value=${this._name} .value=${this._name}
@input=${this._nameChanged} @input=${this._nameChanged}
@@ -152,8 +153,9 @@ class DialogAreaDetail
.validationMessage=${this.hass.localize( .validationMessage=${this.hass.localize(
"ui.panel.config.areas.editor.name_required" "ui.panel.config.areas.editor.name_required"
)} )}
auto-validate
required required
></ha-textfield> ></ha-input>
<ha-icon-picker <ha-icon-picker
.hass=${this.hass} .hass=${this.hass}
@@ -416,9 +418,9 @@ class DialogAreaDetail
return deviceReg && deviceReg.area_id === areaId; return deviceReg && deviceReg.area_id === areaId;
}; };
private _nameChanged(ev) { private _nameChanged(ev: InputEvent) {
this._error = undefined; this._error = undefined;
this._name = ev.target.value; this._name = (ev.target as HaInput).value ?? "";
} }
private _floorChanged(ev) { private _floorChanged(ev) {
@@ -509,9 +511,6 @@ class DialogAreaDetail
return [ return [
haStyleDialog, haStyleDialog,
css` css`
ha-textfield {
display: block;
}
ha-expansion-panel { ha-expansion-panel {
--expansion-panel-content-padding: 0; --expansion-panel-content-padding: 0;
} }

33
src/panels/config/areas/dialog-floor-registry-detail.ts
View File

@@ -11,13 +11,14 @@ import "../../../components/ha-alert";
import "../../../components/ha-aliases-editor"; import "../../../components/ha-aliases-editor";
import "../../../components/ha-area-picker"; import "../../../components/ha-area-picker";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer"; import "../../../components/ha-dialog-footer";
import "../../../components/ha-floor-icon"; import "../../../components/ha-floor-icon";
import "../../../components/ha-icon-picker"; import "../../../components/ha-icon-picker";
import "../../../components/ha-settings-row"; import "../../../components/ha-settings-row";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-textfield"; import "../../../components/input/ha-input";
import "../../../components/ha-dialog"; import type { HaInput } from "../../../components/input/ha-input";
import { updateAreaRegistryEntry } from "../../../data/area/area_registry"; import { updateAreaRegistryEntry } from "../../../data/area/area_registry";
import type { import type {
FloorRegistryEntry, FloorRegistryEntry,
@@ -133,7 +134,7 @@ class DialogFloorDetail extends LitElement {
` `
: nothing} : nothing}
<ha-textfield <ha-input
autofocus autofocus
.value=${this._name} .value=${this._name}
@input=${this._nameChanged} @input=${this._nameChanged}
@@ -142,20 +143,20 @@ class DialogFloorDetail extends LitElement {
"ui.panel.config.floors.editor.name_required" "ui.panel.config.floors.editor.name_required"
)} )}
required required
></ha-textfield> auto-validate
></ha-input>
<ha-textfield <ha-input
.value=${this._level} .value=${this._level}
@input=${this._levelChanged} @input=${this._levelChanged}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.floors.editor.level" "ui.panel.config.floors.editor.level"
)} )}
type="number" type="number"
.helper=${this.hass.localize( .hint=${this.hass.localize(
"ui.panel.config.floors.editor.level_helper" "ui.panel.config.floors.editor.level_helper"
)} )}
helperPersistent ></ha-input>
></ha-textfield>
<ha-icon-picker <ha-icon-picker
.hass=${this.hass} .hass=${this.hass}
@@ -293,14 +294,17 @@ class DialogFloorDetail extends LitElement {
this._addedAreas = new Set(this._addedAreas); this._addedAreas = new Set(this._addedAreas);
} }
private _nameChanged(ev) { private _nameChanged(ev: InputEvent) {
this._error = undefined; this._error = undefined;
this._name = ev.target.value; this._name = (ev.target as HaInput).value ?? "";
} }
private _levelChanged(ev) { private _levelChanged(ev: InputEvent) {
this._error = undefined; this._error = undefined;
this._level = ev.target.value === "" ? null : Number(ev.target.value); this._level =
(ev.target as HaInput).value === ""
? null
: Number((ev.target as HaInput).value);
} }
private _iconChanged(ev) { private _iconChanged(ev) {
@@ -355,9 +359,8 @@ class DialogFloorDetail extends LitElement {
haStyle, haStyle,
haStyleDialog, haStyleDialog,
css` css`
ha-textfield { ha-input {
display: block; --ha-input-padding-bottom: var(--ha-space-4);
margin-bottom: var(--ha-space-4);
} }
ha-floor-icon { ha-floor-icon {
color: var(--secondary-text-color); color: var(--secondary-text-color);

19
src/panels/config/automation/action/types/ha-automation-action-event.ts
View File

@@ -1,12 +1,13 @@
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { css, html, LitElement } from "lit"; import { html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/entity/ha-entity-picker"; import "../../../../../components/entity/ha-entity-picker";
import "../../../../../components/ha-service-picker"; import "../../../../../components/ha-service-picker";
import "../../../../../components/ha-textfield";
import "../../../../../components/ha-yaml-editor"; import "../../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../../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 type { EventAction } from "../../../../../data/script"; import type { EventAction } from "../../../../../data/script";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
import type { ActionElement } from "../ha-automation-action-row"; import type { ActionElement } from "../ha-automation-action-row";
@@ -44,14 +45,14 @@ export class HaEventAction extends LitElement implements ActionElement {
const { event, event_data } = this.action; const { event, event_data } = this.action;
return html` return html`
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.event.event" "ui.panel.config.automation.editor.actions.type.event.event"
)} )}
.value=${event} .value=${event}
.disabled=${this.disabled} .disabled=${this.disabled}
@change=${this._eventChanged} @change=${this._eventChanged}
></ha-textfield> ></ha-input>
<ha-yaml-editor <ha-yaml-editor
.hass=${this.hass} .hass=${this.hass}
.label=${this.hass.localize( .label=${this.hass.localize(
@@ -74,18 +75,12 @@ export class HaEventAction extends LitElement implements ActionElement {
handleChangeEvent(this, ev); handleChangeEvent(this, ev);
} }
private _eventChanged(ev: CustomEvent): void { private _eventChanged(ev: InputEvent): void {
ev.stopPropagation(); ev.stopPropagation();
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { ...this.action, event: (ev.target as any).value }, value: { ...this.action, event: (ev.target as HaInput).value },
}); });
} }
static styles = css`
ha-textfield {
display: block;
}
`;
} }
declare global { declare global {

15
src/panels/config/automation/action/types/ha-automation-action-service.ts
View File

@@ -5,6 +5,8 @@ import { assert } from "superstruct";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import { hasTemplate } from "../../../../../common/string/has-template"; import { hasTemplate } from "../../../../../common/string/has-template";
import "../../../../../components/ha-service-control"; import "../../../../../components/ha-service-control";
import "../../../../../components/input/ha-input";
import type { HaInput } from "../../../../../components/input/ha-input";
import type { ServiceAction } from "../../../../../data/script"; import type { ServiceAction } from "../../../../../data/script";
import { serviceActionStruct } from "../../../../../data/script"; import { serviceActionStruct } from "../../../../../data/script";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
@@ -105,7 +107,7 @@ export class HaServiceAction extends LitElement implements ActionElement {
"ui.panel.config.automation.editor.actions.type.service.has_response" "ui.panel.config.automation.editor.actions.type.service.has_response"
)} )}
</span> </span>
<ha-textfield <ha-input
.value=${this._action.response_variable || ""} .value=${this._action.response_variable || ""}
.required=${!this.hass.services[domain][service].response! .required=${!this.hass.services[domain][service].response!
.optional} .optional}
@@ -114,7 +116,7 @@ export class HaServiceAction extends LitElement implements ActionElement {
!this._action.response_variable && !this._action.response_variable &&
!this._responseChecked)} !this._responseChecked)}
@change=${this._responseVariableChanged} @change=${this._responseVariableChanged}
></ha-textfield> ></ha-input>
</ha-settings-row>` </ha-settings-row>`
: nothing} : nothing}
`; `;
@@ -143,9 +145,12 @@ export class HaServiceAction extends LitElement implements ActionElement {
fireEvent(this, "value-changed", { value }); fireEvent(this, "value-changed", { value });
} }
private _responseVariableChanged(ev) { private _responseVariableChanged(ev: InputEvent) {
const value = { ...this.action, response_variable: ev.target.value }; const value = {
if (!ev.target.value) { ...this.action,
response_variable: (ev.target as HaInput).value,
};
if (!(ev.target as HaInput).value) {
delete value.response_variable; delete value.response_variable;
} }
fireEvent(this, "value-changed", { value }); fireEvent(this, "value-changed", { value });

41
src/panels/config/automation/action/types/ha-automation-action-stop.ts
View File

@@ -1,21 +1,25 @@
import { consume, type ContextType } from "@lit/context";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-textfield";
import "../../../../../components/ha-formfield"; import "../../../../../components/ha-formfield";
import "../../../../../components/ha-switch"; import "../../../../../components/ha-switch";
import "../../../../../components/input/ha-input";
import type { HaInput } from "../../../../../components/input/ha-input";
import { localizeContext } from "../../../../../data/context";
import type { StopAction } from "../../../../../data/script"; import type { StopAction } from "../../../../../data/script";
import type { HomeAssistant } from "../../../../../types";
import type { ActionElement } from "../ha-automation-action-row"; import type { ActionElement } from "../ha-automation-action-row";
@customElement("ha-automation-action-stop") @customElement("ha-automation-action-stop")
export class HaStopAction extends LitElement implements ActionElement { export class HaStopAction extends LitElement implements ActionElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public action!: StopAction; @property({ attribute: false }) public action!: StopAction;
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
@state()
@consume({ context: localizeContext, subscribe: true })
private localize!: ContextType<typeof localizeContext>;
public static get defaultConfig(): StopAction { public static get defaultConfig(): StopAction {
return { stop: "" }; return { stop: "" };
} }
@@ -24,25 +28,25 @@ export class HaStopAction extends LitElement implements ActionElement {
const { error, stop, response_variable } = this.action; const { error, stop, response_variable } = this.action;
return html` return html`
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.localize(
"ui.panel.config.automation.editor.actions.type.stop.stop" "ui.panel.config.automation.editor.actions.type.stop.stop"
)} )}
.value=${stop} .value=${stop}
.disabled=${this.disabled} .disabled=${this.disabled}
@change=${this._stopChanged} @change=${this._stopChanged}
></ha-textfield> ></ha-input>
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.localize(
"ui.panel.config.automation.editor.actions.type.stop.response_variable" "ui.panel.config.automation.editor.actions.type.stop.response_variable"
)} )}
.value=${response_variable || ""} .value=${response_variable || ""}
.disabled=${this.disabled} .disabled=${this.disabled}
@change=${this._responseChanged} @change=${this._responseChanged}
></ha-textfield> ></ha-input>
<ha-formfield <ha-formfield
.disabled=${this.disabled} .disabled=${this.disabled}
.label=${this.hass.localize( .label=${this.localize(
"ui.panel.config.automation.editor.actions.type.stop.error" "ui.panel.config.automation.editor.actions.type.stop.error"
)} )}
> >
@@ -55,17 +59,17 @@ export class HaStopAction extends LitElement implements ActionElement {
`; `;
} }
private _stopChanged(ev: Event) { private _stopChanged(ev: InputEvent) {
ev.stopPropagation(); ev.stopPropagation();
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { ...this.action, stop: (ev.target as any).value }, value: { ...this.action, stop: (ev.target as HaInput).value },
}); });
} }
private _responseChanged(ev: Event) { private _responseChanged(ev: InputEvent) {
ev.stopPropagation(); ev.stopPropagation();
const newAction = { ...this.action }; const newAction = { ...this.action };
const newValue = (ev.target as any).value; const newValue = (ev.target as HaInput).value;
if (newValue) { if (newValue) {
newAction.response_variable = newValue; newAction.response_variable = newValue;
} else { } else {
@@ -84,9 +88,8 @@ export class HaStopAction extends LitElement implements ActionElement {
} }
static styles = css` static styles = css`
ha-textfield { ha-input {
display: block; margin-bottom: var(--ha-space-6);
margin-bottom: 24px;
} }
`; `;
} }

16
src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
View File

@@ -10,8 +10,9 @@ import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-list"; import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list-item";
import "../../../../components/ha-radio"; import "../../../../components/ha-radio";
import "../../../../components/ha-textfield"; import "../../../../components/input/ha-input";
import type { HaInput } from "../../../../components/input/ha-input";
import { import {
AUTOMATION_DEFAULT_MAX, AUTOMATION_DEFAULT_MAX,
AUTOMATION_DEFAULT_MODE, AUTOMATION_DEFAULT_MODE,
@@ -68,7 +69,6 @@ class DialogAutomationMode extends LitElement implements HassDialog {
return html` return html`
<ha-dialog <ha-dialog
.hass=${this.hass}
.open=${this._open} .open=${this._open}
header-title=${title} header-title=${title}
@closed=${this._dialogClosed} @closed=${this._dialogClosed}
@@ -133,7 +133,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
${isMaxMode(this._newMode) ${isMaxMode(this._newMode)
? html` ? html`
<div class="options"> <div class="options">
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.hass.localize(
`ui.panel.config.automation.editor.max.${this._newMode}` `ui.panel.config.automation.editor.max.${this._newMode}`
)} )}
@@ -141,9 +141,8 @@ class DialogAutomationMode extends LitElement implements HassDialog {
name="max" name="max"
.value=${this._newMax?.toString() ?? ""} .value=${this._newMax?.toString() ?? ""}
@input=${this._valueChanged} @input=${this._valueChanged}
class="max"
> >
</ha-textfield> </ha-input>
</div> </div>
` `
: nothing} : nothing}
@@ -176,9 +175,9 @@ class DialogAutomationMode extends LitElement implements HassDialog {
} }
} }
private _valueChanged(ev: CustomEvent) { private _valueChanged(ev: InputEvent) {
ev.stopPropagation(); ev.stopPropagation();
const target = ev.target as any; const target = ev.target as HaInput;
if (target.name === "max") { if (target.name === "max") {
this._newMax = Number(target.value); this._newMax = Number(target.value);
} }
@@ -201,9 +200,6 @@ class DialogAutomationMode extends LitElement implements HassDialog {
haStyle, haStyle,
haStyleDialog, haStyleDialog,
css` css`
ha-textfield {
display: block;
}
ha-dialog { ha-dialog {
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }

23
src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts
View File

@@ -7,6 +7,7 @@ import "../../../../components/chips/ha-assist-chip";
import "../../../../components/chips/ha-chip-set"; import "../../../../components/chips/ha-chip-set";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-area-picker"; import "../../../../components/ha-area-picker";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer"; import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-domain-icon"; import "../../../../components/ha-domain-icon";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
@@ -16,8 +17,7 @@ import "../../../../components/ha-suggest-with-ai-button";
import type { SuggestWithAIGenerateTask } from "../../../../components/ha-suggest-with-ai-button"; import type { SuggestWithAIGenerateTask } from "../../../../components/ha-suggest-with-ai-button";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import "../../../../components/ha-textarea"; import "../../../../components/ha-textarea";
import "../../../../components/ha-textfield"; import "../../../../components/input/ha-input";
import "../../../../components/ha-dialog";
import "../../category/ha-category-picker"; import "../../category/ha-category-picker";
import { supportsMarkdownHelper } from "../../../../common/translations/markdown_support"; import { supportsMarkdownHelper } from "../../../../common/translations/markdown_support";
@@ -27,16 +27,16 @@ import type { ScriptConfig } from "../../../../data/script";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyle, haStyleDialog } from "../../../../resources/styles"; import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import type {
EntityRegistryUpdate,
SaveDialogParams,
} from "./show-dialog-automation-save";
import { import {
type MetadataSuggestionResult, type MetadataSuggestionResult,
generateMetadataSuggestionTask, generateMetadataSuggestionTask,
processMetadataSuggestion, processMetadataSuggestion,
} from "../../common/suggest-metadata-ai"; } from "../../common/suggest-metadata-ai";
import { buildEntityMetadataInspirations } from "../../common/suggest-metadata-inspirations"; import { buildEntityMetadataInspirations } from "../../common/suggest-metadata-inspirations";
import type {
EntityRegistryUpdate,
SaveDialogParams,
} from "./show-dialog-automation-save";
@customElement("ha-dialog-automation-save") @customElement("ha-dialog-automation-save")
class DialogAutomationSave extends LitElement implements HassDialog { class DialogAutomationSave extends LitElement implements HassDialog {
@@ -129,7 +129,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
} }
return html` return html`
<ha-textfield <ha-input
autofocus autofocus
.value=${this._newName} .value=${this._newName}
.placeholder=${this.hass.localize( .placeholder=${this.hass.localize(
@@ -137,15 +137,14 @@ class DialogAutomationSave extends LitElement implements HassDialog {
)} )}
.label=${this.hass.localize("ui.panel.config.automation.editor.alias")} .label=${this.hass.localize("ui.panel.config.automation.editor.alias")}
required required
type="string" type="text"
@input=${this._valueChanged} @input=${this._valueChanged}
></ha-textfield> ></ha-input>
${this._params.domain === "script" && ${this._params.domain === "script" &&
this._visibleOptionals.includes("icon") this._visibleOptionals.includes("icon")
? html` ? html`
<ha-icon-picker <ha-icon-picker
.hass=${this.hass}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.icon" "ui.panel.config.automation.editor.icon"
)} )}
@@ -256,14 +255,13 @@ class DialogAutomationSave extends LitElement implements HassDialog {
return html` return html`
<ha-dialog <ha-dialog
.hass=${this.hass}
.open=${this._open} .open=${this._open}
@closed=${this._dialogClosed} @closed=${this._dialogClosed}
header-title=${this._params.title || title} header-title=${this._params.title || title}
> >
${this._params.hideInputs ${this._params.hideInputs
? nothing ? nothing
: html` <ha-suggest-with-ai-button : html`<ha-suggest-with-ai-button
slot="headerActionItems" slot="headerActionItems"
.hass=${this.hass} .hass=${this.hass}
.generateTask=${this._generateTask} .generateTask=${this._generateTask}
@@ -441,7 +439,6 @@ class DialogAutomationSave extends LitElement implements HassDialog {
var(--ha-space-6); var(--ha-space-6);
} }
ha-textfield,
ha-textarea, ha-textarea,
ha-icon-picker, ha-icon-picker,
ha-category-picker, ha-category-picker,

11
src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
View File

@@ -4,9 +4,9 @@ import { customElement, property, query } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-textfield";
import "../../../../components/ha-yaml-editor"; import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import "../../../../components/input/ha-input";
import type { Trigger } from "../../../../data/automation"; import type { Trigger } from "../../../../data/automation";
import { migrateAutomationTrigger } from "../../../../data/automation"; import { migrateAutomationTrigger } from "../../../../data/automation";
import type { TriggerDescription } from "../../../../data/trigger"; import type { TriggerDescription } from "../../../../data/trigger";
@@ -80,14 +80,14 @@ export default class HaAutomationTriggerEditor extends LitElement {
: html` : html`
${showId && !isTriggerList(this.trigger) ${showId && !isTriggerList(this.trigger)
? html` ? html`
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.id" "ui.panel.config.automation.editor.triggers.id"
)} )}
.value=${this.trigger.id || ""} .value=${this.trigger.id || ""}
.disabled=${this.disabled} .disabled=${this.disabled}
@change=${this._idChanged} @change=${this._idChanged}
></ha-textfield> ></ha-input>
` `
: nothing} : nothing}
<div @value-changed=${this._onUiChanged}> <div @value-changed=${this._onUiChanged}>
@@ -160,9 +160,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);
} }
ha-textfield { ha-input {
display: block; margin-bottom: var(--ha-space-3);
margin-bottom: 24px;
} }
`, `,
]; ];

91
src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
View File

@@ -1,11 +1,12 @@
import { mdiClose } from "@mdi/js"; import "@home-assistant/webawesome/dist/components/divider/divider";
import { mdiClose, mdiPlus } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { ensureArray } from "../../../../../common/array/ensure-array"; import { ensureArray } from "../../../../../common/array/ensure-array";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-textfield"; import "../../../../../components/input/ha-input";
import type { HaTextField } from "../../../../../components/ha-textfield"; import type { HaInput } from "../../../../../components/input/ha-input";
import type { ConversationTrigger } from "../../../../../data/automation"; import type { ConversationTrigger } from "../../../../../data/automation";
import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box"; import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
@@ -24,7 +25,7 @@ export class HaConversationTrigger
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
@query("#option_input", true) private _optionInput?: HaTextField; @query("#option_input", true) private _optionInput?: HaInput;
public static get defaultConfig(): ConversationTrigger { public static get defaultConfig(): ConversationTrigger {
return { trigger: "conversation", command: "" }; return { trigger: "conversation", command: "" };
@@ -35,31 +36,31 @@ export class HaConversationTrigger
const commands = command ? ensureArray(command) : []; const commands = command ? ensureArray(command) : [];
return html`${commands.length return html`${commands.length
? commands.map( ? html`${commands.map(
(option, index) => html` (option, index) => html`
<ha-textfield <ha-input
class="option" class="option"
iconTrailing iconTrailing
.index=${index} .index=${index}
.value=${option} .value=${option}
.validationMessage=${this.hass.localize( .validationMessage=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.conversation.no_punctuation" "ui.panel.config.automation.editor.triggers.type.conversation.no_punctuation"
)} )}
autoValidate auto-validate
validateOnInitialRender validateOnInitialRender
pattern=${PATTERN} pattern=${PATTERN}
@change=${this._updateOption} @change=${this._updateOption}
> >
<ha-icon-button <ha-icon-button
@click=${this._removeOption} @click=${this._removeOption}
slot="trailingIcon" slot="end"
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
</ha-textfield> </ha-input>
` `
) )} <wa-divider></wa-divider>`
: nothing} : nothing}
<ha-textfield <ha-input
class="flex-auto" class="flex-auto"
id="option_input" id="option_input"
.label=${this.hass.localize( .label=${this.hass.localize(
@@ -68,11 +69,17 @@ export class HaConversationTrigger
.validationMessage=${this.hass.localize( .validationMessage=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.conversation.no_punctuation" "ui.panel.config.automation.editor.triggers.type.conversation.no_punctuation"
)} )}
autoValidate auto-validate
pattern=${PATTERN} pattern=${PATTERN}
@keydown=${this._handleKeyAdd} @keydown=${this._handleKeyAdd}
@change=${this._addOption} @change=${this._addOption}
></ha-textfield>`; >
<ha-icon-button
@click=${this._addOption}
slot="end"
.path=${mdiPlus}
></ha-icon-button>
</ha-input>`;
} }
private _handleKeyAdd(ev: KeyboardEvent) { private _handleKeyAdd(ev: KeyboardEvent) {
@@ -104,14 +111,14 @@ export class HaConversationTrigger
input.value = ""; input.value = "";
} }
private async _updateOption(ev: Event) { private async _updateOption(ev: InputEvent) {
const index = (ev.target as any).index; const index = (ev.target as any).index;
const command = [ const command = [
...(Array.isArray(this.trigger.command) ...(Array.isArray(this.trigger.command)
? this.trigger.command ? this.trigger.command
: [this.trigger.command]), : [this.trigger.command]),
]; ];
command.splice(index, 1, (ev.target as HaTextField).value); command.splice(index, 1, (ev.target as HaInput).value ?? "");
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { ...this.trigger, command }, value: { ...this.trigger, command },
}); });
@@ -155,20 +162,8 @@ export class HaConversationTrigger
.option { .option {
margin-top: 4px; margin-top: 4px;
} }
ha-textfield { ha-input {
display: block; margin-bottom: var(--ha-space-1);
margin-bottom: 8px;
--textfield-icon-trailing-padding: 0;
}
ha-textfield > ha-icon-button {
position: relative;
right: -8px;
--ha-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: -8px;
direction: var(--direction);
} }
#option_input { #option_input {
margin-top: 8px; margin-top: 8px;
@@ -177,6 +172,10 @@ export class HaConversationTrigger
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
wa-divider {
margin-top: var(--ha-space-2);
margin-bottom: var(--ha-space-3);
}
`; `;
} }

14
src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
View File

@@ -1,8 +1,8 @@
import { css, html, LitElement } from "lit"; import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-textfield";
import "../../../../../components/ha-yaml-editor"; import "../../../../../components/ha-yaml-editor";
import "../../../../../components/input/ha-input";
import "../../../../../components/user/ha-users-picker"; import "../../../../../components/user/ha-users-picker";
import type { EventTrigger } from "../../../../../data/automation"; import type { EventTrigger } from "../../../../../data/automation";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
@@ -24,7 +24,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
protected render() { protected render() {
const { event_type, event_data, context } = this.trigger; const { event_type, event_data, context } = this.trigger;
return html` return html`
<ha-textfield <ha-input
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.event.event_type" "ui.panel.config.automation.editor.triggers.type.event.event_type"
)} )}
@@ -32,7 +32,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
.value=${event_type} .value=${event_type}
.disabled=${this.disabled} .disabled=${this.disabled}
@change=${this._valueChanged} @change=${this._valueChanged}
></ha-textfield> ></ha-input>
<ha-yaml-editor <ha-yaml-editor
.hass=${this.hass} .hass=${this.hass}
.label=${this.hass.localize( .label=${this.hass.localize(
@@ -94,12 +94,6 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
value, value,
}); });
} }
static styles = css`
ha-textfield {
display: block;
}
`;
} }
declare global { declare global {

19
src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
View File

@@ -11,8 +11,8 @@ import "../../../../../components/ha-dropdown";
import type { HaDropdownSelectEvent } from "../../../../../components/ha-dropdown"; import type { HaDropdownSelectEvent } from "../../../../../components/ha-dropdown";
import "../../../../../components/ha-dropdown-item"; import "../../../../../components/ha-dropdown-item";
import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-textfield"; import "../../../../../components/input/ha-input";
import type { HaTextField } from "../../../../../components/ha-textfield"; import type { HaInput } from "../../../../../components/input/ha-input";
import type { import type {
AutomationConfig, AutomationConfig,
WebhookTrigger, WebhookTrigger,
@@ -103,28 +103,27 @@ export class HaWebhookTrigger extends LitElement {
return html` return html`
<div class="flex"> <div class="flex">
<ha-textfield <ha-input
name="webhook_id" name="webhook_id"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.webhook.webhook_id" "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id"
)} )}
.helper=${this.hass.localize( .hint=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.webhook.webhook_id_helper" "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id_helper"
)} )}
.disabled=${this.disabled} .disabled=${this.disabled}
iconTrailing
.value=${webhookId || ""} .value=${webhookId || ""}
@input=${this._valueChanged} @input=${this._valueChanged}
> >
<ha-icon-button <ha-icon-button
@click=${this._copyUrl} @click=${this._copyUrl}
slot="trailingIcon" slot="end"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.webhook.copy_url" "ui.panel.config.automation.editor.triggers.type.webhook.copy_url"
)} )}
.path=${mdiContentCopy} .path=${mdiContentCopy}
></ha-icon-button> ></ha-icon-button>
</ha-textfield> </ha-input>
<ha-dropdown <ha-dropdown
@wa-select=${this._handleDropdownSelect} @wa-select=${this._handleDropdownSelect}
placement="bottom-end" placement="bottom-end"
@@ -199,7 +198,7 @@ export class HaWebhookTrigger extends LitElement {
} }
private async _copyUrl(ev): Promise<void> { private async _copyUrl(ev): Promise<void> {
const inputElement = ev.target.parentElement as HaTextField; const inputElement = ev.target.parentElement as HaInput;
const url = this.hass.hassUrl(`/api/webhook/${inputElement.value}`); const url = this.hass.hassUrl(`/api/webhook/${inputElement.value}`);
await copyToClipboard(url); await copyToClipboard(url);
@@ -229,11 +228,11 @@ export class HaWebhookTrigger extends LitElement {
display: flex; display: flex;
} }
ha-textfield { ha-input {
flex: 1; flex: 1;
} }
ha-textfield > ha-icon-button { ha-input > ha-icon-button {
--ha-icon-button-size: 24px; --ha-icon-button-size: 24px;
--mdc-icon-size: 18px; --mdc-icon-size: 18px;
color: var(--secondary-text-color); color: var(--secondary-text-color);

15
src/panels/config/backup/dialogs/dialog-generate-backup.ts
View File

@@ -6,6 +6,7 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-footer"; import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-expansion-panel";
@@ -14,8 +15,8 @@ import "../../../../components/ha-icon-button-prev";
import "../../../../components/ha-md-list"; import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list-item";
import "../../../../components/ha-select"; import "../../../../components/ha-select";
import "../../../../components/ha-textfield"; import "../../../../components/input/ha-input";
import "../../../../components/ha-dialog"; import type { HaInput } from "../../../../components/input/ha-input";
import type { import type {
BackupAgent, BackupAgent,
BackupConfig, BackupConfig,
@@ -290,7 +291,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
const disabledAgentIds = this._disabledAgentIds(); const disabledAgentIds = this._disabledAgentIds();
return html` return html`
<ha-textfield <ha-input
name="name" name="name"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.backup.dialogs.generate.sync.name" "ui.panel.config.backup.dialogs.generate.sync.name"
@@ -298,7 +299,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
.value=${this._formData.name} .value=${this._formData.name}
@change=${this._nameChanged} @change=${this._nameChanged}
> >
</ha-textfield> </ha-input>
<ha-md-list> <ha-md-list>
<ha-md-list-item> <ha-md-list-item>
<span slot="headline"> <span slot="headline">
@@ -385,10 +386,10 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
}; };
} }
private _nameChanged(ev) { private _nameChanged(ev: InputEvent) {
this._formData = { this._formData = {
...this._formData!, ...this._formData!,
name: ev.target.value, name: (ev.target as HaInput).value ?? "",
}; };
} }
@@ -468,7 +469,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
ha-textfield { ha-input {
width: 100%; width: 100%;
} }
.content { .content {

20
src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-code-input.ts
View File

@@ -1,11 +1,11 @@
import { customElement, property } from "lit/decorators";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../../common/dom/fire_event";
import type { HaTextField } from "../../../../../../components/ha-textfield"; import type { HaInput } from "../../../../../../components/input/ha-input";
import "../../../../../../components/ha-textfield";
import "../../../../../../components/ha-alert"; import "../../../../../../components/ha-alert";
import "../../../../../../components/input/ha-input";
@customElement("zwave-js-add-node-code-input") @customElement("zwave-js-add-node-code-input")
export class ZWaveJsAddNodeCodeInput extends LitElement { export class ZWaveJsAddNodeCodeInput extends LitElement {
@@ -27,14 +27,14 @@ export class ZWaveJsAddNodeCodeInput extends LitElement {
${this.error ${this.error
? html`<ha-alert alert-type="error">${this.error}</ha-alert>` ? html`<ha-alert alert-type="error">${this.error}</ha-alert>`
: nothing} : nothing}
<ha-textfield <ha-input
.placeholder=${this.placeholder} .placeholder=${this.placeholder}
.value=${this.value} .value=${this.value}
@input=${this._handleChange} @input=${this._handleChange}
@keyup=${this._handleKeyup} @keyup=${this._handleKeyup}
required required
autofocus autofocus
></ha-textfield> ></ha-input>
${this.referenceKey ${this.referenceKey
? html`<div> ? html`<div>
<span>${this.value.padEnd(5, "·")}</span>${this.referenceKey} <span>${this.value.padEnd(5, "·")}</span>${this.referenceKey}
@@ -50,24 +50,24 @@ export class ZWaveJsAddNodeCodeInput extends LitElement {
} }
private _handleChange(ev: InputEvent): void { private _handleChange(ev: InputEvent): void {
const inputElement = ev.target as HaTextField; const inputElement = ev.target as HaInput;
if ( if (
this.numeric && this.numeric &&
(isNaN(Number(inputElement.value)) || inputElement.value.length > 5) (isNaN(Number(inputElement.value)) || inputElement.value!.length > 5)
) { ) {
inputElement.value = this.value; inputElement.value = this.value;
return; return;
} }
this.value = (ev.target as HaTextField).value; this.value = (ev.target as HaInput).value ?? "";
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: (ev.target as HaTextField).value, value: (ev.target as HaInput).value,
}); });
} }
static styles = css` static styles = css`
ha-textfield { ha-input {
width: 100%; width: 100%;
} }
ha-alert { ha-alert {