github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Convert inputs (#11907) 

* Convert inputs

* Update dialog-thingtalk.ts

* imports
This commit is contained in:
Bram Kragten 2022-03-07 12:45:39 +01:00 committed by GitHub
parent ccb91e0b49
commit 3873203721
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 168 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hassio/src/components/hassio-upload-backup.ts
View File

@ -1,5 +1,4 @@
import { mdiFolderUpload } from "@mdi/js";
import "@polymer/paper-input/paper-input-container";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators";
import { fireEvent } from "../../../src/common/dom/fire_event";

2
src/components/ha-date-input.ts
View File

@ -41,7 +41,7 @@ export class HaDateInput extends LitElement {
return html`<ha-textfield
.label=${this.label}
.disabled=${this.disabled}
iconTrailing="calendar"
iconTrailing
@click=${this._openDialog}
.value=${this.value
? formatDateNumeric(new Date(this.value), this.locale)

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

@ -9,6 +9,12 @@ export class HaTextField extends TextFieldBase {
@property({ attribute: "error-message" }) public errorMessage?: string;
// @ts-ignore
@property({ type: Boolean }) public icon?: boolean;
// @ts-ignore
@property({ type: Boolean }) public iconTrailing?: boolean;
override updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (
@ -53,6 +59,11 @@ export class HaTextField extends TextFieldBase {
padding-right: var(--text-field-suffix-padding-right, 0px);
}
.mdc-text-field:not(.mdc-text-field--disabled)
.mdc-text-field__affix--suffix {
color: var(--secondary-text-color);
}
.mdc-text-field__icon {
color: var(--secondary-text-color);
}

2
src/components/search-input.ts
View File

@ -35,7 +35,7 @@ class SearchInput extends LitElement {
.autofocus=${this.autofocus}
.label=${this.label || "Search"}
.value=${this.filter || ""}
.icon=${true}
icon
.iconTrailing=${this.filter || this.suffix}
@input=${this._filterInputChanged}
>

2
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@ -162,7 +162,7 @@ export class QuickBar extends LitElement {
"ui.dialogs.quick-bar.filter_placeholder"
)}
.value=${this._commandMode ? `>${this._search}` : this._search}
.icon=${true}
icon
.iconTrailing=${this._search !== undefined || this._narrow}
@input=${this._handleSearchChange}
@keydown=${this._handleInputKeyDown}

29
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -1,7 +1,6 @@
/* eslint-disable lit/prefer-static-styles */
import "@material/mwc-button/mwc-button";
import { mdiMicrophone } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
css,
CSSResultGroup,
@ -10,12 +9,16 @@ import {
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../common/dom/fire_event";
import { SpeechRecognition } from "../../common/dom/speech-recognition";
import { uid } from "../../common/util/uid";
import "../../components/ha-dialog";
import type { HaDialog } from "../../components/ha-dialog";
import "../../components/ha-icon-button";
import "../../components/ha-textfield";
import type { HaTextField } from "../../components/ha-textfield";
import {
AgentInfo,
getAgentInfo,
@ -24,9 +27,6 @@ import {
} from "../../data/conversation";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import "../../components/ha-dialog";
import type { HaDialog } from "../../components/ha-dialog";
import "@material/mwc-button/mwc-button";
interface Message {
who: string;
@ -127,18 +127,19 @@ export class HaVoiceCommandDialog extends LitElement {
: ""}
</div>
<div class="input" slot="primaryAction">
<paper-input
<ha-textfield
@keyup=${this._handleKeyUp}
.label=${this.hass.localize(
`ui.dialogs.voice_command.${
SpeechRecognition ? "label_voice" : "label"
}`
)}
autofocus
dialogInitialFocus
iconTrailing
>
${SpeechRecognition
? html`
<span suffix="" slot="suffix">
<span slot="trailingIcon">
${this.results
? html`
<div class="bouncer">
@ -155,7 +156,7 @@ export class HaVoiceCommandDialog extends LitElement {
</span>
`
: ""}
</paper-input>
</ha-textfield>
${this._agentInfo && this._agentInfo.attribution
? html`
<a
@ -195,7 +196,7 @@ export class HaVoiceCommandDialog extends LitElement {
}
private _handleKeyUp(ev: KeyboardEvent) {
const input = ev.target as PaperInputElement;
const input = ev.target as HaTextField;
if (ev.keyCode === 13 && input.value) {
this._processText(input.value);
input.value = "";
@ -327,6 +328,7 @@ export class HaVoiceCommandDialog extends LitElement {
css`
ha-icon-button {
color: var(--secondary-text-color);
margin-right: -24px;
}
ha-icon-button[active] {
@ -338,7 +340,9 @@ export class HaVoiceCommandDialog extends LitElement {
--secondary-action-button-flex: 0;
--mdc-dialog-max-width: 450px;
}
ha-textfield {
display: block;
}
a.button {
text-decoration: none;
}
@ -406,7 +410,6 @@ export class HaVoiceCommandDialog extends LitElement {
width: 48px;
height: 48px;
position: absolute;
top: 0;
}
.double-bounce1,
.double-bounce2 {

84
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -1,7 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-textarea";
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-toggle";
@ -11,6 +10,7 @@ import "../../../components/ha-circular-progress";
import "../../../components/ha-markdown";
import "../../../components/ha-selector/ha-selector";
import "../../../components/ha-settings-row";
import "../../../components/ha-textfield";
import {
BlueprintAutomationConfig,
triggerAutomationActions,
@ -38,6 +38,8 @@ export class HaBlueprintAutomationEditor extends LitElement {
@state() private _blueprints?: Blueprints;
@state() private _showDescription = false;
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
this._getBlueprints();
@ -50,6 +52,17 @@ export class HaBlueprintAutomationEditor extends LitElement {
return this._blueprints[this.config.use_blueprint.path];
}
protected willUpdate(changedProps: PropertyValues): void {
super.willUpdate(changedProps);
if (
!this._showDescription &&
changedProps.has("config") &&
this.config.description
) {
this._showDescription = true;
}
}
protected render() {
const blueprint = this._blueprint;
return html`
@ -64,26 +77,39 @@ export class HaBlueprintAutomationEditor extends LitElement {
</span>
<ha-card>
<div class="card-content">
<paper-input
<ha-textfield
.label=${this.hass.localize(
"ui.panel.config.automation.editor.alias"
)}
name="alias"
.value=${this.config.alias}
@value-changed=${this._valueChanged}
.value=${this.config.alias || ""}
@change=${this._valueChanged}
>
</paper-input>
<paper-textarea
.label=${this.hass.localize(
"ui.panel.config.automation.editor.description.label"
)}
.placeholder=${this.hass.localize(
"ui.panel.config.automation.editor.description.placeholder"
)}
name="description"
.value=${this.config.description}
@value-changed=${this._valueChanged}
></paper-textarea>
</ha-textfield>
${this._showDescription
? html`
<ha-textarea
.label=${this.hass.localize(
"ui.panel.config.automation.editor.description.label"
)}
.placeholder=${this.hass.localize(
"ui.panel.config.automation.editor.description.placeholder"
)}
name="description"
autogrow
.value=${this.config.description || ""}
@change=${this._valueChanged}
></ha-textarea>
`
: html`
<div class="link-button-row">
<button class="link" @click=${this._addDescription}>
${this.hass.localize(
"ui.panel.config.automation.editor.description.add"
)}
</button>
</div>
`}
</div>
${this.stateObj
? html`
@ -173,15 +199,14 @@ export class HaBlueprintAutomationEditor extends LitElement {
value?.default}
@value-changed=${this._inputChanged}
></ha-selector>`
: html`<paper-input
: html`<ha-textfield
.key=${key}
required
.value=${(this.config.use_blueprint.input &&
this.config.use_blueprint.input[key]) ??
value?.default}
@value-changed=${this._inputChanged}
no-label-float
></paper-input>`}
@input=${this._inputChanged}
></ha-textfield>`}
</ha-settings-row>`
)
: html`<p class="padding">
@ -221,7 +246,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
ev.stopPropagation();
const target = ev.target as any;
const key = target.key;
const value = ev.detail.value;
const value = ev.detail?.value || target.value;
if (
(this.config.use_blueprint.input &&
this.config.use_blueprint.input[key] === value) ||
@ -262,6 +287,10 @@ export class HaBlueprintAutomationEditor extends LitElement {
});
}
private _addDescription() {
this._showDescription = true;
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -273,9 +302,16 @@ export class HaBlueprintAutomationEditor extends LitElement {
.padding {
padding: 16px;
}
.link-button-row {
padding: 14px;
}
.blueprint-picker-container {
padding: 0 16px 16px;
}
ha-textarea,
ha-textfield {
display: block;
}
h3 {
margin: 16px;
}
@ -292,9 +328,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
--paper-time-input-justify-content: flex-end;
border-top: 1px solid var(--divider-color);
}
:host(:not([narrow])) ha-settings-row paper-input {
width: 60%;
}
:host(:not([narrow])) ha-settings-row ha-textfield,
:host(:not([narrow])) ha-settings-row ha-selector {
width: 60%;
}

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

@ -1,10 +1,11 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-circular-progress";
import "../../../../components/ha-dialog";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import type { AutomationConfig } from "../../../../data/automation";
import { convertThingTalk } from "../../../../data/cloud";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
@ -12,7 +13,6 @@ import type { HomeAssistant } from "../../../../types";
import "./ha-thingtalk-placeholders";
import type { PlaceholderValues } from "./ha-thingtalk-placeholders";
import type { ThingtalkDialogParams } from "./show-dialog-thingtalk";
import "../../../../components/ha-dialog";
export interface Placeholder {
name: string;
@ -38,7 +38,7 @@ class DialogThingtalk extends LitElement {
@state() private _placeholders?: PlaceholderContainer;
@query("#input") private _input?: PaperInputElement;
@query("#input") private _input?: HaTextField;
private _value?: string;
@ -58,7 +58,7 @@ class DialogThingtalk extends LitElement {
this._placeholders = undefined;
this._params = undefined;
if (this._input) {
this._input.value = null;
this._input.value = "";
}
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@ -127,13 +127,13 @@ class DialogThingtalk extends LitElement {
</button>
</li>
</ul>
<paper-input
<ha-textfield
id="input"
label="What should this automation do?"
.value=${this._value}
autofocus
@keyup=${this._handleKeyUp}
></paper-input>
></ha-textfield>
<a
href="https://almond.stanford.edu/"
target="_blank"

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

@ -88,7 +88,7 @@ export class HaWebhookTrigger extends LitElement {
.helper=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.webhook.webhook_id_helper"
)}
.iconTrailing=${true}
iconTrailing
.value=${webhookId || ""}
@input=${this._valueChanged}
>

40
src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
View File

@ -1,11 +1,12 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { state } from "lit/decorators";
import { query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import type { HaTextField } from "../../../../components/ha-textfield";
import "../../../../components/ha-textfield";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { documentationUrl } from "../../../../util/documentation-url";
import { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
@ -17,6 +18,8 @@ export class DialogManageCloudhook extends LitElement {
@state() private _params?: WebhookDialogParams;
@query("ha-textfield") _input!: HaTextField;
public showDialog(params: WebhookDialogParams) {
this._params = params;
}
@ -53,12 +56,12 @@ export class DialogManageCloudhook extends LitElement {
"ui.panel.config.cloud.dialog_cloudhook.available_at"
)}
</p>
<paper-input
label=${inputLabel}
value=${cloudhook.cloudhook_url}
<ha-textfield
.label=${inputLabel}
.value=${cloudhook.cloudhook_url}
@click=${this._copyClipboard}
@blur=${this._restoreLabel}
></paper-input>
></ha-textfield>
<p>
${cloudhook.managed
? html`
@ -98,10 +101,6 @@ export class DialogManageCloudhook extends LitElement {
`;
}
private get _paperInput(): PaperInputElement {
return this.shadowRoot!.querySelector("paper-input")!;
}
private async _disableWebhook() {
showConfirmationDialog(this, {
text: this.hass!.localize(
@ -117,14 +116,10 @@ export class DialogManageCloudhook extends LitElement {
}
private _copyClipboard(ev: FocusEvent) {
// paper-input -> iron-input -> input
const paperInput = ev.currentTarget as PaperInputElement;
const input = (paperInput.inputElement as any)
.inputElement as HTMLInputElement;
input.setSelectionRange(0, input.value.length);
const textField = ev.currentTarget as HaTextField;
try {
document.execCommand("copy");
paperInput.label = this.hass!.localize(
copyToClipboard(textField.value);
textField.label = this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.copied_to_clipboard"
);
} catch (err: any) {
@ -133,18 +128,19 @@ export class DialogManageCloudhook extends LitElement {
}
private _restoreLabel() {
this._paperInput.label = inputLabel;
this._input.label = inputLabel;
}
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,
css`
ha-dialog {
width: 650px;
}
paper-input {
margin-top: -8px;
ha-textfield {
display: block;
}
button.link {
color: var(--primary-color);

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

@ -19,6 +19,7 @@ import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-radio";
import "../../../../components/ha-formfield";
import "../../../../components/ha-textfield";
import type { HaRadio } from "../../../../components/ha-radio";
@customElement("dialog-energy-gas-settings")
@ -188,20 +189,19 @@ export class DialogEnergyGasSettings
></ha-radio>
</ha-formfield>
${this._costs === "number"
? html`<paper-input
? html`<ha-textfield
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_number_input`,
{ unit }
)}
no-label-float
class="price-options"
step=".01"
type="number"
.value=${this._source.number_energy_price}
@value-changed=${this._numberPriceChanged}
@change=${this._numberPriceChanged}
.suffix=${`${this.hass.config.currency}/${unit}`}
>
<span slot="suffix">${this.hass.config.currency}/${unit}</span>
</paper-input>`
</ha-textfield>`
: ""}
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
@ -223,10 +223,10 @@ export class DialogEnergyGasSettings
this._costs = input.value as any;
}
private _numberPriceChanged(ev: CustomEvent) {
private _numberPriceChanged(ev) {
this._source = {
...this._source!,
number_energy_price: Number(ev.detail.value),
number_energy_price: Number(ev.target.value),
entity_energy_price: null,
stat_cost: null,
};
@ -295,13 +295,10 @@ export class DialogEnergyGasSettings
ha-formfield {
display: block;
}
ha-statistic-picker {
width: 100%;
}
.price-options {
display: block;
padding-left: 52px;
margin-top: -16px;
margin-top: -8px;
}
`,
];

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

@ -190,24 +190,21 @@ export class DialogEnergyGridFlowSettings
></ha-radio>
</ha-formfield>
${this._costs === "number"
? html`<paper-input
? html`<ha-textfield
.label=${this.hass.localize(
`ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_input`
)}
no-label-float
class="price-options"
step=".01"
type="number"
.value=${this._source.number_energy_price}
@value-changed=${this._numberPriceChanged}
.suffix=${this.hass.localize(
`ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_suffix`,
{ currency: this.hass.config.currency }
)}
@change=${this._numberPriceChanged}
>
<span slot="suffix"
>${this.hass.localize(
`ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_suffix`,
{ currency: this.hass.config.currency }
)}</span
>
</paper-input>`
</ha-textfield>`
: ""}
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
@ -302,13 +299,10 @@ export class DialogEnergyGridFlowSettings
ha-formfield {
display: block;
}
ha-statistic-picker {
width: 100%;
}
.price-options {
display: block;
padding-left: 52px;
margin-top: -16px;
margin-top: -8px;
}
`,
];

24
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
View File

@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button";
import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -11,28 +9,30 @@ import { HaCheckbox } from "../../../../../components/ha-checkbox";
import "../../../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-formfield";
import "../../../../../components/ha-qr-scanner";
import "../../../../../components/ha-radio";
import "../../../../../components/ha-switch";
import "../../../../../components/ha-textfield";
import type { HaTextField } from "../../../../../components/ha-textfield";
import {
zwaveGrantSecurityClasses,
InclusionStrategy,
MINIMUM_QR_STRING_LENGTH,
zwaveParseQrCode,
PlannedProvisioningEntry,
provisionZwaveSmartStartNode,
QRProvisioningInformation,
RequestedGrant,
SecurityClass,
stopZwaveInclusion,
subscribeAddZwaveNode,
ZWaveFeature,
zwaveGrantSecurityClasses,
zwaveParseQrCode,
zwaveSupportsFeature,
zwaveValidateDskAndEnterPin,
ZWaveFeature,
PlannedProvisioningEntry,
} from "../../../../../data/zwave_js";
import { haStyle, haStyleDialog } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import { ZWaveJSAddNodeDialogParams } from "./show-dialog-zwave_js-add-node";
import "../../../../../components/ha-qr-scanner";
export interface ZWaveJSAddNodeDevice {
id: string;
@ -98,7 +98,7 @@ class DialogZWaveJSAddNode extends LitElement {
this._startInclusion();
}
@query("#pin-input") private _pinInput?: PaperInputElement;
@query("#pin-input") private _pinInput?: HaTextField;
protected render(): TemplateResult {
if (!this._entryId) {
@ -202,12 +202,11 @@ class DialogZWaveJSAddNode extends LitElement {
: ""
}
<div class="flex-container">
<paper-input
<ha-textfield
label="PIN"
id="pin-input"
@keyup=${this._handlePinKeyUp}
no-label-float
></paper-input>
></ha-textfield>
${this._dsk}
</div>
<mwc-button
@ -814,6 +813,9 @@ class DialogZWaveJSAddNode extends LitElement {
width: 68px;
height: 48px;
}
ha-textfield {
display: block;
}
.secondary {
color: var(--secondary-text-color);
}

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

@ -25,6 +25,7 @@ import "../../../../../components/ha-select";
import "../../../../../components/ha-settings-row";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-switch";
import "../../../../../components/ha-textfield";
import {
computeDeviceName,
DeviceRegistryEntry,
@ -265,7 +266,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
if (item.configuration_value_type === "manual_entry") {
return html`${labelAndDescription}
<paper-input
<ha-textfield
type="number"
.value=${item.value}
.min=${item.metadata.min}
@ -274,12 +275,12 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
.propertyKey=${item.property_key}
.key=${id}
.disabled=${!item.metadata.writeable}
@value-changed=${this._numericInputChanged}
@input=${this._numericInputChanged}
>
${item.metadata.unit
? html`<span slot="suffix">${item.metadata.unit}</span>`
: ""}
</paper-input> `;
</ha-textfield>`;
}
if (item.configuration_value_type === "enumerated") {
@ -492,7 +493,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
font-size: 1.3em;
}
:host(:not([narrow])) ha-settings-row paper-input {
:host(:not([narrow])) ha-settings-row ha-textfield {
width: 30%;
text-align: right;
}

4
src/panels/config/script/blueprint-script-editor.ts
View File

@ -186,9 +186,7 @@ export class HaBlueprintScriptEditor extends LitElement {
--paper-time-input-justify-content: flex-end;
border-top: 1px solid var(--divider-color);
}
:host(:not([narrow])) ha-settings-row paper-input {
width: 60%;
}
:host(:not([narrow])) ha-settings-row ha-textfield,
:host(:not([narrow])) ha-settings-row ha-selector {
width: 60%;
}

29
src/panels/lovelace/components/hui-input-list-editor.ts
View File

@ -1,11 +1,11 @@
import { mdiClose } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-icon-button";
import { HomeAssistant } from "../../../types";
import { EditorTarget } from "../editor/types";
import "../../../components/ha-textfield";
@customElement("hui-input-list-editor")
export class HuiInputListEditor extends LitElement {
@ -23,30 +23,31 @@ export class HuiInputListEditor extends LitElement {
return html`
${this.value.map(
(listEntry, index) => html`
<paper-input
label=${this.inputLabel}
<ha-textfield
.label=${this.inputLabel}
.value=${listEntry}
.configValue=${"entry"}
.index=${index}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
@blur=${this._consolidateEntries}
@keydown=${this._handleKeyDown}
iconTrailing
><ha-icon-button
slot="suffix"
slot="trailingIcon"
class="clear-button"
.path=${mdiClose}
no-ripple
@click=${this._removeEntry}
.label=${this.hass!.localize("ui.common.clear")}
>Clear</ha-icon-button
></paper-input
>
>
</ha-icon-button>
</ha-textfield>
`
)}
<paper-input
label=${this.inputLabel}
<ha-textfield
.label=${this.inputLabel}
@change=${this._addEntry}
></paper-input>
></ha-textfield>
`;
}
@ -103,10 +104,12 @@ export class HuiInputListEditor extends LitElement {
static get styles(): CSSResultGroup {
return css`
ha-icon-button {
--mdc-icon-button-size: 24px;
padding: 2px;
margin-right: -24px;
color: var(--secondary-text-color);
}
ha-textfield {
display: block;
}
`;
}
}

7
src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
View File

@ -1,5 +1,4 @@
import "../../../../components/ha-form/ha-form";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import {
@ -24,7 +23,7 @@ import { EntityConfig } from "../../entity-rows/types";
import { LovelaceCardEditor } from "../../types";
import { processEditorEntities } from "../process-editor-entities";
import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { HaFormSchema } from "../../../../components/ha-form/types";
@ -127,10 +126,6 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
if (!target.configValue) {
return;
}
const value = ev.detail.value;

1
src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
View File

@ -1,4 +1,3 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, object, optional, string, assign } from "superstruct";