From 7a8f5c0cc93722334cf20ff9012508ab691d1719 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Fri, 5 Jan 2024 14:31:58 +0100 Subject: [PATCH] Replace remaining paper inputs (#19292) --- .../components/supervisor-backup-content.ts | 36 +++++++-------- .../dialogs/network/dialog-hassio-network.ts | 46 +++++++++---------- .../dialog-hassio-repositories.ts | 10 ++-- package.json | 1 - yarn.lock | 39 ---------------- 5 files changed, 44 insertions(+), 88 deletions(-) diff --git a/hassio/src/components/supervisor-backup-content.ts b/hassio/src/components/supervisor-backup-content.ts index 8174debcefc5..ff67b511c023 100644 --- a/hassio/src/components/supervisor-backup-content.ts +++ b/hassio/src/components/supervisor-backup-content.ts @@ -1,6 +1,4 @@ import { mdiFolder, mdiPuzzle } from "@mdi/js"; -import "@polymer/paper-input/paper-input"; -import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { CSSResultGroup, LitElement, @@ -16,6 +14,7 @@ import { formatDateTime } from "../../../src/common/datetime/format_date_time"; import { LocalizeFunc } from "../../../src/common/translations/localize"; import "../../../src/components/ha-checkbox"; import "../../../src/components/ha-formfield"; +import "../../../src/components/ha-textfield"; import "../../../src/components/ha-radio"; import type { HaRadio } from "../../../src/components/ha-radio"; import { @@ -25,12 +24,9 @@ import { } from "../../../src/data/hassio/backup"; import { Supervisor } from "../../../src/data/supervisor/supervisor"; import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg"; -import { - HomeAssistant, - TranslationDict, - ValueChangedEvent, -} from "../../../src/types"; +import { HomeAssistant, TranslationDict } from "../../../src/types"; import "./supervisor-formfield-label"; +import type { HaTextField } from "../../../src/components/ha-textfield"; type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] & keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"]; @@ -100,7 +96,7 @@ export class SupervisorBackupContent extends LitElement { @property() public confirmBackupPassword = ""; - @query("paper-input, ha-radio, ha-checkbox", true) private _focusTarget; + @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget; public willUpdate(changedProps) { super.willUpdate(changedProps); @@ -151,13 +147,13 @@ export class SupervisorBackupContent extends LitElement { ) : this.backup.date} ` - : html` - `} + `} ${!this.backup || this.backup.type === "full" ? html`
${!this.backup @@ -265,23 +261,23 @@ export class SupervisorBackupContent extends LitElement { : ""} ${this.backupHasPassword ? html` - - + ${!this.backup - ? html` - ` + ` : ""} ` : ""} @@ -429,9 +425,9 @@ export class SupervisorBackupContent extends LitElement { this[input.name] = input.value; } - private _handleTextValueChanged(ev: ValueChangedEvent) { - const input = ev.currentTarget as PaperInputElement; - this[input.name!] = ev.detail.value; + private _handleTextValueChanged(ev: InputEvent) { + const input = ev.currentTarget as HaTextField; + this[input.name!] = input.value; } private _toggleHasPassword(): void { diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index c831fb6c221d..b36b734a08e8 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -4,7 +4,6 @@ import "@material/mwc-list/mwc-list-item"; import "@material/mwc-tab"; import "@material/mwc-tab-bar"; import { mdiClose } from "@mdi/js"; -import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { cache } from "lit/directives/cache"; @@ -14,6 +13,7 @@ import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-expansion-panel"; import "../../../../src/components/ha-formfield"; +import "../../../../src/components/ha-textfield"; import "../../../../src/components/ha-header-bar"; import "../../../../src/components/ha-icon-button"; import "../../../../src/components/ha-radio"; @@ -34,6 +34,7 @@ import { HassDialog } from "../../../../src/dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; import { HassioNetworkDialogParams } from "./show-dialog-network"; +import type { HaTextField } from "../../../../src/components/ha-textfield"; const IP_VERSIONS = ["ipv4", "ipv6"]; @@ -245,7 +246,7 @@ export class DialogHassioNetwork ${this._wifiConfiguration.auth === "wpa-psk" || this._wifiConfiguration.auth === "wep" ? html` - - + ` : ""} ` @@ -358,33 +358,33 @@ export class DialogHassioNetwork
${this._interface![version].method === "static" ? html` - - - + - - + - + ` : ""} @@ -517,11 +517,11 @@ export class DialogHassioNetwork this.requestUpdate("_wifiConfiguration"); } - private _handleInputValueChanged(ev: CustomEvent): void { - const value: string | null | undefined = (ev.target as PaperInputElement) - .value; + private _handleInputValueChanged(ev: Event): void { + const source = ev.target as HaTextField; + const value = source.value; const version = (ev.target as any).version as "ipv4" | "ipv6"; - const id = (ev.target as PaperInputElement).id; + const id = source.id; if ( !value || @@ -535,10 +535,10 @@ export class DialogHassioNetwork this._interface[version]![id] = value; } - private _handleInputValueChangedWifi(ev: CustomEvent): void { - const value: string | null | undefined = (ev.target as PaperInputElement) - .value; - const id = (ev.target as PaperInputElement).id; + private _handleInputValueChangedWifi(ev: Event): void { + const source = ev.target as HaTextField; + const value = source.value; + const id = source.id; if ( !value || @@ -630,7 +630,7 @@ export class DialogHassioNetwork --expansion-panel-summary-padding: 0 16px; margin: 4px 0; } - paper-input { + ha-textfield { padding: 0 14px; } mwc-list-item { diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 98dfc32b2417..5443d7ed44c1 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -1,7 +1,5 @@ import "@material/mwc-button/mwc-button"; import { mdiDelete, mdiDeleteOff } from "@mdi/js"; -import "@polymer/paper-input/paper-input"; -import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; @@ -27,12 +25,14 @@ import { import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; import { HassioRepositoryDialogParams } from "./show-dialog-repositories"; +import type { HaTextField } from "../../../../src/components/ha-textfield"; +import "../../../../src/components/ha-textfield"; @customElement("dialog-hassio-repositories") class HassioRepositoriesDialog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @query("#repository_input", true) private _optionInput?: PaperInputElement; + @query("#repository_input", true) private _optionInput?: HaTextField; @state() private _repositories?: HassioAddonRepository[]; @@ -145,7 +145,7 @@ class HassioRepositoriesDialog extends LitElement { ) : html` No repositories `}
- + > ${this._processing ? html`