jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 05:47:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate single textfields (#11799)

Browse Source 
* Migrate single textfields

* Update ha-config-name-form.ts

* Update dialog-area-registry-detail.ts

* Update manual-automation-editor.ts

* Update manual-automation-editor.ts

* required to number selector fix script

* review
This commit is contained in:
Bram Kragten 2022-02-23 17:27:03 +01:00 committed by GitHub
parent 5d8b3227f3
commit 430b47fc4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 103 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ha-selector/ha-selector-number.ts
View File

@ -19,6 +19,8 @@ export class HaNumberSelector extends LitElement {
@property() public label?: string; @property() public label?: string;
@property({ type: Boolean }) public required = true;
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
protected render() { protected render() {
@ -29,6 +31,7 @@ export class HaNumberSelector extends LitElement {
.value=${this._value} .value=${this._value}
.step=${this.selector.number.step ?? 1} .step=${this.selector.number.step ?? 1}
.disabled=${this.disabled} .disabled=${this.disabled}
.required=${this.required}
pin pin
ignore-bar-touch ignore-bar-touch
@change=${this._handleSliderChange} @change=${this._handleSliderChange}
@ -43,9 +46,10 @@ export class HaNumberSelector extends LitElement {
class=${classMap({ single: this.selector.number.mode === "box" })} class=${classMap({ single: this.selector.number.mode === "box" })}
.min=${this.selector.number.min} .min=${this.selector.number.min}
.max=${this.selector.number.max} .max=${this.selector.number.max}
.value=${this.value} .value=${this.value || ""}
.step=${this.selector.number.step ?? 1} .step=${this.selector.number.step ?? 1}
.disabled=${this.disabled} .disabled=${this.disabled}
.required=${this.required}
.suffix=${this.selector.number.unit_of_measurement} .suffix=${this.selector.number.unit_of_measurement}
type="number" type="number"
autoValidate autoValidate
@ -56,14 +60,16 @@ export class HaNumberSelector extends LitElement {
} }
private get _value() { private get _value() {
return this.value ?? 0; return this.value ?? (this.selector.number.min || 0);
} }
private _handleInputChange(ev) { private _handleInputChange(ev) {
ev.stopPropagation(); ev.stopPropagation();
const value = const value =
ev.target.value === "" || isNaN(ev.target.value) ev.target.value === "" || isNaN(ev.target.value)
? undefined ? this.required
? this.selector.number.min || 0
: undefined
: Number(ev.target.value); : Number(ev.target.value);
if (this.value === value) { if (this.value === value) {
return; return;

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

@ -1,10 +1,10 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators"; import { property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-alert"; import "../../../components/ha-alert";
import "../../../components/ha-textfield";
import "../../../components/ha-picture-upload"; import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload"; import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import { AreaRegistryEntryMutableParams } from "../../../data/area_registry"; import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
@ -69,7 +69,7 @@ class DialogAreaDetail extends LitElement {
> >
<div> <div>
${this._error ${this._error
? html` <ha-alert alert-type="error">${this._error}</ha-alert> ` ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""} : ""}
<div class="form"> <div class="form">
${entry ${entry
@ -83,17 +83,16 @@ class DialogAreaDetail extends LitElement {
` `
: ""} : ""}
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
@value-changed=${this._nameChanged} @input=${this._nameChanged}
@keyup=${this._handleKeyup}
.label=${this.hass.localize("ui.panel.config.areas.editor.name")} .label=${this.hass.localize("ui.panel.config.areas.editor.name")}
.errorMessage=${this.hass.localize( .errorMessage=${this.hass.localize(
"ui.panel.config.areas.editor.name_required" "ui.panel.config.areas.editor.name_required"
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-picture-upload <ha-picture-upload
.hass=${this.hass} .hass=${this.hass}
.value=${this._picture} .value=${this._picture}
@ -132,15 +131,9 @@ class DialogAreaDetail extends LitElement {
return this._name.trim() !== ""; return this._name.trim() !== "";
} }
private _handleKeyup(ev: KeyboardEvent) { private _nameChanged(ev) {
if (ev.keyCode === 13 && this._isNameValid() && !this._submitting) {
this._updateEntry();
}
}
private _nameChanged(ev: PolymerChangedEvent<string>) {
this._error = undefined; this._error = undefined;
this._name = ev.detail.value; this._name = ev.target.value;
} }
private _pictureChanged(ev: PolymerChangedEvent<string | null>) { private _pictureChanged(ev: PolymerChangedEvent<string | null>) {
@ -188,6 +181,10 @@ class DialogAreaDetail extends LitElement {
.form { .form {
padding-bottom: 24px; padding-bottom: 24px;
} }
ha-textfield {
display: block;
margin-bottom: 16px;
}
`, `,
]; ];
} }

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

@ -99,7 +99,7 @@ export class HaManualAutomationEditor extends LitElement {
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.modes.label" "ui.panel.config.automation.editor.modes.label"
)} )}
.value=${this.config.mode ? MODES.indexOf(this.config.mode) : 0} .value=${this.config.mode}
@selected=${this._modeChanged} @selected=${this._modeChanged}
fixedMenuPosition fixedMenuPosition
> >
@ -115,7 +115,7 @@ export class HaManualAutomationEditor extends LitElement {
</mwc-select> </mwc-select>
${this.config.mode && MODES_MAX.includes(this.config.mode) ${this.config.mode && MODES_MAX.includes(this.config.mode)
? html` ? html`
<ha-textfield <br /><ha-textfield
.label=${this.hass.localize( .label=${this.hass.localize(
`ui.panel.config.automation.editor.max.${this.config.mode}` `ui.panel.config.automation.editor.max.${this.config.mode}`
)} )}
@ -123,6 +123,7 @@ export class HaManualAutomationEditor extends LitElement {
name="max" name="max"
.value=${this.config.max || "10"} .value=${this.config.max || "10"}
@change=${this._valueChanged} @change=${this._valueChanged}
class="max"
> >
</ha-textfield> </ha-textfield>
` `
@ -357,8 +358,10 @@ export class HaManualAutomationEditor extends LitElement {
ha-entity-toggle { ha-entity-toggle {
margin-right: 8px; margin-right: 8px;
} }
mwc-select { mwc-select,
margin-top: 8px; .max {
margin-top: 16px;
width: 200px;
} }
`, `,
]; ];

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

@ -1,13 +1,13 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-input/paper-input"; import { css, html, LitElement, TemplateResult } from "lit";
import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { customElement, property, query, state } from "lit/decorators";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-circular-progress"; import "../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-expansion-panel"; import "../../../components/ha-expansion-panel";
import "../../../components/ha-markdown"; import "../../../components/ha-markdown";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
import { import {
BlueprintImportResult, BlueprintImportResult,
importBlueprint, importBlueprint,
@ -32,7 +32,7 @@ class DialogImportBlueprint extends LitElement {
@state() private _url?: string; @state() private _url?: string;
@query("#input") private _input?: PaperInputElement; @query("#input") private _input?: HaTextField;
public showDialog(params): void { public showDialog(params): void {
this._params = params; this._params = params;
@ -90,13 +90,13 @@ class DialogImportBlueprint extends LitElement {
</ul> </ul>
` `
: html` : html`
<paper-input <ha-textfield
id="input" id="input"
.value=${this._result.suggested_filename} .value=${this._result.suggested_filename || ""}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.blueprint.add.file_name" "ui.panel.config.blueprint.add.file_name"
)} )}
></paper-input> ></ha-textfield>
`} `}
<ha-expansion-panel <ha-expansion-panel
.header=${this.hass.localize( .header=${this.hass.localize(
@ -116,14 +116,14 @@ class DialogImportBlueprint extends LitElement {
"ui.panel.config.blueprint.add.community_forums" "ui.panel.config.blueprint.add.community_forums"
)}</a )}</a
>` >`
)}<paper-input )}<ha-textfield
id="input" id="input"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.blueprint.add.url" "ui.panel.config.blueprint.add.url"
)} )}
.value=${this._url} .value=${this._url || ""}
dialogInitialFocus dialogInitialFocus
></paper-input>`} ></ha-textfield>`}
</div> </div>
${!this._result ${!this._result
? html`<mwc-button ? html`<mwc-button
@ -212,9 +212,15 @@ class DialogImportBlueprint extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = [
return haStyleDialog; haStyleDialog,
} css`
ha-textfield {
display: block;
margin-top: 8px;
}
`,
];
} }
declare global { declare global {

21
src/panels/config/core/ha-config-name-form.ts
View File

@ -1,12 +1,11 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-card"; import "../../../components/ha-card";
import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core"; import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
@customElement("ha-config-name-form") @customElement("ha-config-name-form")
class ConfigNameForm extends LitElement { class ConfigNameForm extends LitElement {
@ -34,16 +33,15 @@ class ConfigNameForm extends LitElement {
</p> </p>
` `
: ""} : ""}
<paper-input <ha-textfield
class="flex" class="flex"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.location_name" "ui.panel.config.core.section.core.core_config.location_name"
)} )}
name="name"
.disabled=${disabled} .disabled=${disabled}
.value=${this._nameValue} .value=${this._nameValue}
@value-changed=${this._handleChange} @changed=${this._handleChange}
></paper-input> ></ha-textfield>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<mwc-button @click=${this._save} .disabled=${disabled}> <mwc-button @click=${this._save} .disabled=${disabled}>
@ -62,9 +60,9 @@ class ConfigNameForm extends LitElement {
: this.hass.config.location_name; : this.hass.config.location_name;
} }
private _handleChange(ev: PolymerChangedEvent<string>) { private _handleChange(ev) {
const target = ev.currentTarget as PaperInputElement; const target = ev.currentTarget as HaTextField;
this[`_${target.name}`] = target.value; this._name = target.value;
} }
private async _save() { private async _save() {
@ -85,6 +83,9 @@ class ConfigNameForm extends LitElement {
.card-actions { .card-actions {
text-align: right; text-align: right;
} }
ha-textfield {
display: block;
}
`; `;
} }
} }

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

@ -1,13 +1,12 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } 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 "../../../../components/ha-area-picker"; import "../../../../components/ha-area-picker";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import type { HaSwitch } from "../../../../components/ha-switch"; import type { HaSwitch } from "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import { computeDeviceName } from "../../../../data/device_registry"; import { computeDeviceName } from "../../../../data/device_registry";
import { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyle, haStyleDialog } from "../../../../resources/styles"; import { haStyle, haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail"; import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail";
@ -57,16 +56,18 @@ class DialogDeviceRegistryDetail extends LitElement {
.heading=${computeDeviceName(device, this.hass)} .heading=${computeDeviceName(device, this.hass)}
> >
<div> <div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert> `
: ""}
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._nameByUser} .value=${this._nameByUser}
@value-changed=${this._nameChanged} @input=${this._nameChanged}
.label=${this.hass.localize("ui.panel.config.devices.name")} .label=${this.hass.localize("ui.panel.config.devices.name")}
.placeholder=${device.name || ""} .placeholder=${device.name || ""}
.disabled=${this._submitting} .disabled=${this._submitting}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-area-picker <ha-area-picker
.hass=${this.hass} .hass=${this.hass}
.value=${this._areaId} .value=${this._areaId}
@ -132,9 +133,9 @@ class DialogDeviceRegistryDetail extends LitElement {
`; `;
} }
private _nameChanged(ev: PolymerChangedEvent<string>): void { private _nameChanged(ev): void {
this._error = undefined; this._error = undefined;
this._nameByUser = ev.detail.value; this._nameByUser = ev.target.value;
} }
private _areaPicked(event: CustomEvent): void { private _areaPicked(event: CustomEvent): void {
@ -174,8 +175,9 @@ class DialogDeviceRegistryDetail extends LitElement {
mwc-button.warning { mwc-button.warning {
margin-right: auto; margin-right: auto;
} }
.error { ha-textfield {
color: var(--error-color); display: block;
margin-bottom: 16px;
} }
ha-switch { ha-switch {
margin-right: 16px; margin-right: 16px;

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

@ -1,5 +1,4 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators"; import { property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -7,6 +6,7 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/entity/ha-entities-picker"; import "../../../components/entity/ha-entities-picker";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield"; import "../../../components/ha-formfield";
import "../../../components/ha-textfield";
import "../../../components/ha-picture-upload"; import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload"; import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import { adminChangePassword } from "../../../data/auth"; import { adminChangePassword } from "../../../data/auth";
@ -120,17 +120,17 @@ class DialogPersonDetail extends LitElement {
<div> <div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""} ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
<div class="form"> <div class="form">
<paper-input <ha-textfield
dialogInitialFocus dialogInitialFocus
.value=${this._name} .value=${this._name}
@value-changed=${this._nameChanged} @input=${this._nameChanged}
label=${this.hass!.localize("ui.panel.config.person.detail.name")} label=${this.hass!.localize("ui.panel.config.person.detail.name")}
error-message=${this.hass!.localize( error-message=${this.hass!.localize(
"ui.panel.config.person.detail.name_error_msg" "ui.panel.config.person.detail.name_error_msg"
)} )}
required required
auto-validate auto-validate
></paper-input> ></ha-textfield>
<ha-picture-upload <ha-picture-upload
.hass=${this.hass} .hass=${this.hass}
.value=${this._picture} .value=${this._picture}
@ -277,9 +277,9 @@ class DialogPersonDetail extends LitElement {
this._params = undefined; this._params = undefined;
} }
private _nameChanged(ev: PolymerChangedEvent<string>) { private _nameChanged(ev) {
this._error = undefined; this._error = undefined;
this._name = ev.detail.value; this._name = ev.target.value;
} }
private _adminChanged(ev): void { private _adminChanged(ev): void {
@ -460,7 +460,8 @@ class DialogPersonDetail extends LitElement {
.form { .form {
padding-bottom: 24px; padding-bottom: 24px;
} }
ha-picture-upload { ha-picture-upload,
ha-textfield {
display: block; display: block;
} }
ha-formfield { ha-formfield {

7
src/panels/config/script/ha-script-editor.ts
View File

@ -136,10 +136,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
if (currentMode && MODES_MAX.includes(currentMode)) { if (currentMode && MODES_MAX.includes(currentMode)) {
schema.push({ schema.push({
name: "max", name: "max",
required: true,
selector: { selector: {
text: { number: { mode: "box", min: 1, max: Infinity },
type: "number",
},
}, },
}); });
} }
@ -161,11 +160,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
const data = { const data = {
mode: MODES[0], mode: MODES[0],
icon: undefined,
max: max:
this._config.mode && MODES_MAX.includes(this._config.mode) this._config.mode && MODES_MAX.includes(this._config.mode)
? 10 ? 10
: undefined, : undefined,
icon: undefined,
...this._config, ...this._config,
id: this._entityId, id: this._entityId,
}; };

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

@ -1,11 +1,12 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } 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 "../../../components/ha-alert";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield"; import "../../../components/ha-formfield";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import { Tag, UpdateTagParams } from "../../../data/tag"; import { Tag, UpdateTagParams } from "../../../data/tag";
import { HassDialog } from "../../../dialogs/make-dialog-manager"; import { HassDialog } from "../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
@ -71,7 +72,9 @@ class DialogTagDetail
)} )}
> >
<div> <div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="form"> <div class="form">
${this._params.entry ${this._params.entry
? html`${this.hass!.localize( ? html`${this.hass!.localize(
@ -79,30 +82,30 @@ class DialogTagDetail
)}: )}:
${this._params.entry.id}` ${this._params.entry.id}`
: ""} : ""}
<paper-input <ha-textfield
dialogInitialFocus dialogInitialFocus
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize("ui.panel.config.tag.detail.name")} .label=${this.hass!.localize("ui.panel.config.tag.detail.name")}
.errorMessage=${this.hass!.localize( .errorMessage=${this.hass!.localize(
"ui.panel.config.tag.detail.required_error_msg" "ui.panel.config.tag.detail.required_error_msg"
)} )}
required required
auto-validate auto-validate
></paper-input> ></ha-textfield>
${!this._params.entry ${!this._params.entry
? html` <paper-input ? html`<ha-textfield
.value=${this._id} .value=${this._id}
.configValue=${"id"} .configValue=${"id"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id" "ui.panel.config.tag.detail.tag_id"
)} )}
.placeholder=${this.hass!.localize( .placeholder=${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id_placeholder" "ui.panel.config.tag.detail.tag_id_placeholder"
)} )}
></paper-input>` ></ha-textfield>`
: ""} : ""}
</div> </div>
${this._params.entry ${this._params.entry
@ -165,11 +168,12 @@ class DialogTagDetail
`; `;
} }
private _valueChanged(ev: CustomEvent) { private _valueChanged(ev: Event) {
const configValue = (ev.target as any).configValue; const target = ev.target as any;
const configValue = target.configValue;
this._error = undefined; this._error = undefined;
this[`_${configValue}`] = ev.detail.value; this[`_${configValue}`] = target.value;
} }
private async _updateEntry() { private async _updateEntry() {

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

@ -1,5 +1,4 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-tooltip/paper-tooltip"; import "@polymer/paper-tooltip/paper-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
@ -11,6 +10,7 @@ import "../../../components/ha-help-tooltip";
import "../../../components/ha-chip-set"; import "../../../components/ha-chip-set";
import "../../../components/ha-chip"; import "../../../components/ha-chip";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-textfield";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import { adminChangePassword } from "../../../data/auth"; import { adminChangePassword } from "../../../data/auth";
import { import {
@ -92,13 +92,13 @@ class DialogUserDetail extends LitElement {
</ha-chip-set> </ha-chip-set>
`} `}
<div class="form"> <div class="form">
<paper-input <ha-textfield
dialogInitialFocus dialogInitialFocus
.value=${this._name} .value=${this._name}
.disabled=${user.system_generated} .disabled=${user.system_generated}
@value-changed=${this._nameChanged} @input=${this._nameChanged}
label=${this.hass!.localize("ui.panel.config.users.editor.name")} .label=${this.hass!.localize("ui.panel.config.users.editor.name")}
></paper-input> ></ha-textfield>
<div class="row"> <div class="row">
<ha-formfield <ha-formfield
.label=${this.hass.localize( .label=${this.hass.localize(
@ -322,7 +322,8 @@ class DialogUserDetail extends LitElement {
.secondary { .secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-chip-set { ha-chip-set,
ha-textfield {
display: block; display: block;
} }
.state { .state {