diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts
new file mode 100644
index 0000000000..5b237208c9
--- /dev/null
+++ b/src/components/ha-check-list-item.ts
@@ -0,0 +1,22 @@
+import { css } from "lit";
+import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
+import { styles } from "@material/mwc-list/mwc-control-list-item.css";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-check-list-item")
+export class HaCheckListItem extends CheckListItemBase {
+ static override styles = [
+ styles,
+ css`
+ :host {
+ --mdc-theme-secondary: var(--primary-color);
+ }
+ `,
+ ];
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-check-list-item": HaCheckListItem;
+ }
+}
diff --git a/src/components/ha-checkbox.ts b/src/components/ha-checkbox.ts
index b3f5a1a2f4..0e33ee2a18 100644
--- a/src/components/ha-checkbox.ts
+++ b/src/components/ha-checkbox.ts
@@ -1,12 +1,18 @@
-import { Checkbox } from "@material/mwc-checkbox";
+import { CheckboxBase } from "@material/mwc-checkbox/mwc-checkbox-base";
+import { styles } from "@material/mwc-checkbox/mwc-checkbox.css";
+import { css } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-checkbox")
-export class HaCheckbox extends Checkbox {
- public firstUpdated() {
- super.firstUpdated();
- this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
- }
+export class HaCheckbox extends CheckboxBase {
+ static override styles = [
+ styles,
+ css`
+ :host {
+ --mdc-theme-secondary: var(--primary-color);
+ }
+ `,
+ ];
}
declare global {
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 34614bedc6..693bae6367 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -1,6 +1,7 @@
-import { Dialog } from "@material/mwc-dialog";
+import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
+import { styles } from "@material/mwc-dialog/mwc-dialog.css";
import { mdiClose } from "@mdi/js";
-import { css, CSSResultGroup, html, TemplateResult } from "lit";
+import { css, html, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import { computeRTLDirection } from "../common/util/compute_rtl";
import type { HomeAssistant } from "../types";
@@ -21,8 +22,7 @@ export const createCloseHeading = (
`;
@customElement("ha-dialog")
-// @ts-expect-error
-export class HaDialog extends Dialog {
+export class HaDialog extends DialogBase {
public scrollToPos(x: number, y: number) {
this.contentElement?.scrollTo(x, y);
}
@@ -31,77 +31,75 @@ export class HaDialog extends Dialog {
return html` ${super.renderHeading()} `;
}
- protected static get styles(): CSSResultGroup {
- return [
- Dialog.styles,
- css`
- .mdc-dialog {
- --mdc-dialog-scroll-divider-color: var(--divider-color);
- z-index: var(--dialog-z-index, 7);
- -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
- backdrop-filter: var(--dialog-backdrop-filter, none);
- }
- .mdc-dialog__actions {
- justify-content: var(--justify-action-buttons, flex-end);
- padding-bottom: max(env(safe-area-inset-bottom), 8px);
- }
- .mdc-dialog__actions span:nth-child(1) {
- flex: var(--secondary-action-button-flex, unset);
- }
- .mdc-dialog__actions span:nth-child(2) {
- flex: var(--primary-action-button-flex, unset);
- }
- .mdc-dialog__container {
- align-items: var(--vertial-align-dialog, center);
- }
- .mdc-dialog__title::before {
- display: block;
- height: 20px;
- }
- .mdc-dialog .mdc-dialog__content {
- position: var(--dialog-content-position, relative);
- padding: var(--dialog-content-padding, 20px 24px);
- }
- :host([hideactions]) .mdc-dialog .mdc-dialog__content {
- padding-bottom: max(
- var(--dialog-content-padding, 20px),
- env(safe-area-inset-bottom)
- );
- }
- .mdc-dialog .mdc-dialog__surface {
- position: var(--dialog-surface-position, relative);
- top: var(--dialog-surface-top);
- min-height: var(--mdc-dialog-min-height, auto);
- border-radius: var(
- --ha-dialog-border-radius,
- var(--ha-card-border-radius, 4px)
- );
- }
- :host([flexContent]) .mdc-dialog .mdc-dialog__content {
- display: flex;
- flex-direction: column;
- }
- .header_button {
- position: absolute;
- right: 16px;
- top: 10px;
- text-decoration: none;
- color: inherit;
- }
- .header_title {
- margin-right: 40px;
- }
- [dir="rtl"].header_button {
- right: auto;
- left: 16px;
- }
- [dir="rtl"].header_title {
- margin-left: 40px;
- margin-right: 0px;
- }
- `,
- ];
- }
+ static override styles = [
+ styles,
+ css`
+ .mdc-dialog {
+ --mdc-dialog-scroll-divider-color: var(--divider-color);
+ z-index: var(--dialog-z-index, 7);
+ -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
+ backdrop-filter: var(--dialog-backdrop-filter, none);
+ }
+ .mdc-dialog__actions {
+ justify-content: var(--justify-action-buttons, flex-end);
+ padding-bottom: max(env(safe-area-inset-bottom), 8px);
+ }
+ .mdc-dialog__actions span:nth-child(1) {
+ flex: var(--secondary-action-button-flex, unset);
+ }
+ .mdc-dialog__actions span:nth-child(2) {
+ flex: var(--primary-action-button-flex, unset);
+ }
+ .mdc-dialog__container {
+ align-items: var(--vertial-align-dialog, center);
+ }
+ .mdc-dialog__title::before {
+ display: block;
+ height: 20px;
+ }
+ .mdc-dialog .mdc-dialog__content {
+ position: var(--dialog-content-position, relative);
+ padding: var(--dialog-content-padding, 20px 24px);
+ }
+ :host([hideactions]) .mdc-dialog .mdc-dialog__content {
+ padding-bottom: max(
+ var(--dialog-content-padding, 20px),
+ env(safe-area-inset-bottom)
+ );
+ }
+ .mdc-dialog .mdc-dialog__surface {
+ position: var(--dialog-surface-position, relative);
+ top: var(--dialog-surface-top);
+ min-height: var(--mdc-dialog-min-height, auto);
+ border-radius: var(
+ --ha-dialog-border-radius,
+ var(--ha-card-border-radius, 4px)
+ );
+ }
+ :host([flexContent]) .mdc-dialog .mdc-dialog__content {
+ display: flex;
+ flex-direction: column;
+ }
+ .header_button {
+ position: absolute;
+ right: 16px;
+ top: 10px;
+ text-decoration: none;
+ color: inherit;
+ }
+ .header_title {
+ margin-right: 40px;
+ }
+ [dir="rtl"].header_button {
+ right: auto;
+ left: 16px;
+ }
+ [dir="rtl"].header_title {
+ margin-left: 40px;
+ margin-right: 0px;
+ }
+ `,
+ ];
}
declare global {
diff --git a/src/components/ha-form/ha-form-float.ts b/src/components/ha-form/ha-form-float.ts
index 7cae936ef7..ce28ee7cae 100644
--- a/src/components/ha-form/ha-form-float.ts
+++ b/src/components/ha-form/ha-form-float.ts
@@ -1,21 +1,21 @@
-import "@material/mwc-textfield";
-import type { TextField } from "@material/mwc-textfield";
import { css, html, LitElement, TemplateResult, PropertyValues } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
+import type { HaTextField } from "../ha-textfield";
+import "../ha-textfield";
import { HaFormElement, HaFormFloatData, HaFormFloatSchema } from "./types";
@customElement("ha-form-float")
export class HaFormFloat extends LitElement implements HaFormElement {
- @property() public schema!: HaFormFloatSchema;
+ @property({ attribute: false }) public schema!: HaFormFloatSchema;
- @property() public data!: HaFormFloatData;
+ @property({ attribute: false }) public data!: HaFormFloatData;
@property() public label!: string;
@property({ type: Boolean }) public disabled = false;
- @query("mwc-textfield") private _input?: HTMLElement;
+ @query("ha-textfield") private _input?: HaTextField;
public focus() {
if (this._input) {
@@ -25,7 +25,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
protected render(): TemplateResult {
return html`
-
+ >
`;
}
@@ -46,7 +46,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
}
private _valueChanged(ev: Event) {
- const source = ev.target as TextField;
+ const source = ev.target as HaTextField;
const rawValue = source.value.replace(",", ".");
let value: number | undefined;
@@ -81,7 +81,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
:host([own-margin]) {
margin-bottom: 5px;
}
- mwc-textfield {
+ ha-textfield {
display: block;
}
`;
diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index 3a684a3d40..5873eff158 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -1,6 +1,3 @@
-import "@material/mwc-textfield";
-import type { TextField } from "@material/mwc-textfield";
-import type { Slider } from "@material/mwc-slider";
import {
css,
CSSResultGroup,
@@ -14,18 +11,21 @@ import { fireEvent } from "../../common/dom/fire_event";
import { HaCheckbox } from "../ha-checkbox";
import { HaFormElement, HaFormIntegerData, HaFormIntegerSchema } from "./types";
import "../ha-slider";
+import { HaTextField } from "../ha-textfield";
@customElement("ha-form-integer")
export class HaFormInteger extends LitElement implements HaFormElement {
- @property() public schema!: HaFormIntegerSchema;
+ @property({ attribute: false }) public schema!: HaFormIntegerSchema;
- @property() public data?: HaFormIntegerData;
+ @property({ attribute: false }) public data?: HaFormIntegerData;
@property() public label?: string;
@property({ type: Boolean }) public disabled = false;
- @query("mwc-textfield ha-slider") private _input?: HTMLElement;
+ @query("ha-textfield ha-slider") private _input?:
+ | HaTextField
+ | HTMLInputElement;
private _lastValue?: HaFormIntegerData;
@@ -70,7 +70,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
}
return html`
-
+ >
`;
}
@@ -138,7 +138,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
}
private _valueChanged(ev: Event) {
- const source = ev.target as TextField | Slider;
+ const source = ev.target as HaTextField | HTMLInputElement;
const rawValue = source.value;
let value: number | undefined;
@@ -172,7 +172,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
ha-slider {
flex: 1;
}
- mwc-textfield {
+ ha-textfield {
display: block;
}
`;
diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts
index 3023a1a15f..4777eeb76b 100644
--- a/src/components/ha-form/ha-form-multi_select.ts
+++ b/src/components/ha-form/ha-form-multi_select.ts
@@ -1,25 +1,27 @@
+import "@material/mwc-select/mwc-select";
import { mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import "@material/mwc-textfield";
-import "@material/mwc-formfield";
import {
css,
CSSResultGroup,
html,
LitElement,
- TemplateResult,
PropertyValues,
+ TemplateResult,
} from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../ha-button-menu";
+import { HaCheckListItem } from "../ha-check-list-item";
+import "../ha-checkbox";
+import type { HaCheckbox } from "../ha-checkbox";
+import "../ha-formfield";
import "../ha-svg-icon";
+import "../ha-textfield";
import {
HaFormElement,
HaFormMultiSelectData,
HaFormMultiSelectSchema,
} from "./types";
-import "../ha-checkbox";
-import type { HaCheckbox } from "../ha-checkbox";
function optionValue(item: string | string[]): string {
return Array.isArray(item) ? item[0] : item;
@@ -57,23 +59,23 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
: Object.entries(this.schema.options);
const data = this.data || [];
- const renderedOptions = options.map((item: string | [string, string]) => {
- const value = optionValue(item);
- return html`
-
-
-
- `;
- });
-
// We will just render all checkboxes.
if (options.length < SHOW_ALL_ENTRIES_LIMIT) {
- return html`
${this.label}${renderedOptions}
`;
+ return html`
+ ${this.label}${options.map((item: string | [string, string]) => {
+ const value = optionValue(item);
+ return html`
+
+
+
+ `;
+ })}
+
`;
}
return html`
@@ -83,8 +85,10 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
corner="BOTTOM_START"
@opened=${this._handleOpen}
@closed=${this._handleClose}
+ multi
+ activatable
>
-
+ >
- ${renderedOptions}
+ ${options.map((item: string | [string, string]) => {
+ const value = optionValue(item);
+ const selected = data.includes(value);
+ return html`
+ ${optionLabel(item)}
+ `;
+ })}
`;
}
@@ -105,7 +122,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
protected firstUpdated() {
this.updateComplete.then(() => {
const { formElement, mdcRoot } =
- this.shadowRoot?.querySelector("mwc-textfield") || ({} as any);
+ this.shadowRoot?.querySelector("ha-textfield") || ({} as any);
if (formElement) {
formElement.style.textOverflow = "ellipsis";
}
@@ -125,9 +142,23 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
}
}
+ private _selectedChanged(ev: CustomEvent): void {
+ ev.stopPropagation();
+ if (ev.detail.source === "property") {
+ return;
+ }
+ this._handleValueChanged(
+ (ev.target as HaCheckListItem).value,
+ ev.detail.selected
+ );
+ }
+
private _valueChanged(ev: CustomEvent): void {
const { value, checked } = ev.target as HaCheckbox;
+ this._handleValueChanged(value, checked);
+ }
+ private _handleValueChanged(value, checked: boolean): void {
let newValue: string[];
if (checked) {
@@ -171,11 +202,11 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
display: block;
cursor: pointer;
}
- mwc-formfield {
+ ha-formfield {
display: block;
padding-right: 16px;
}
- mwc-textfield {
+ ha-textfield {
display: block;
pointer-events: none;
}
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index 22085ab2a5..e82a96519e 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -1,17 +1,17 @@
import { mdiEye, mdiEyeOff } from "@mdi/js";
-import "@material/mwc-textfield";
-import type { TextField } from "@material/mwc-textfield";
import {
css,
CSSResultGroup,
html,
LitElement,
- TemplateResult,
PropertyValues,
+ 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 "../ha-icon-button";
+import "../ha-textfield";
+import type { HaTextField } from "../ha-textfield";
import type {
HaFormElement,
HaFormStringData,
@@ -32,7 +32,7 @@ export class HaFormString extends LitElement implements HaFormElement {
@state() private _unmaskedPassword = false;
- @query("mwc-textfield") private _input?: HTMLElement;
+ @query("ha-textfield") private _input?: HaTextField;
public focus(): void {
if (this._input) {
@@ -45,7 +45,7 @@ export class HaFormString extends LitElement implements HaFormElement {
this.schema.name.includes(field)
);
return html`
-
+ >
${isPassword
? html`
${this.localize("ui.components.qr-scanner.manual_input")}
-
+ >
${this.localize("ui.common.submit")}
@@ -161,7 +161,7 @@ class HaQrScanner extends LitElement {
private _manualKeyup(ev: KeyboardEvent) {
if (ev.key === "Enter") {
- this._qrCodeScanned((ev.target as TextField).value);
+ this._qrCodeScanned((ev.target as HaTextField).value);
}
}
@@ -199,7 +199,7 @@ class HaQrScanner extends LitElement {
display: flex;
align-items: center;
}
- mwc-textfield {
+ ha-textfield {
flex: 1;
margin-right: 8px;
}
diff --git a/src/components/ha-radio.ts b/src/components/ha-radio.ts
index a2fb2b5929..f551d4fedc 100644
--- a/src/components/ha-radio.ts
+++ b/src/components/ha-radio.ts
@@ -1,12 +1,18 @@
-import { Radio } from "@material/mwc-radio";
+import { RadioBase } from "@material/mwc-radio/mwc-radio-base";
+import { styles } from "@material/mwc-radio/mwc-radio.css";
+import { css } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-radio")
-export class HaRadio extends Radio {
- public firstUpdated() {
- super.firstUpdated();
- this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
- }
+export class HaRadio extends RadioBase {
+ static override styles = [
+ styles,
+ css`
+ :host {
+ --mdc-theme-secondary: var(--primary-color);
+ }
+ `,
+ ];
}
declare global {
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 9f4d29a765..75d050e03c 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -5,7 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import { NumberSelector } from "../../data/selector";
import { HomeAssistant } from "../../types";
import "../ha-slider";
-import "@material/mwc-textfield/mwc-textfield";
+import "../ha-textfield";
@customElement("ha-selector-number")
export class HaNumberSelector extends LitElement {
@@ -36,7 +36,7 @@ export class HaNumberSelector extends LitElement {
>
`
: ""}
-
- `;
+ `;
}
private get _value() {
- return this.value || 0;
+ return this.value ?? 0;
}
private _handleInputChange(ev) {
@@ -90,10 +91,11 @@ export class HaNumberSelector extends LitElement {
ha-slider {
flex: 1;
}
- mwc-textfield {
- width: 70px;
+ ha-textfield {
+ --ha-textfield-input-width: 40px;
}
.single {
+ --ha-textfield-input-width: unset;
flex: 1;
}
`;
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index d9a1f87bfc..7431c05833 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -1,5 +1,4 @@
import "@material/mwc-textarea/mwc-textarea";
-import "@material/mwc-textfield/mwc-textfield";
import { mdiEye, mdiEyeOff } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import { StringSelector } from "../../data/selector";
import { HomeAssistant } from "../../types";
import "../ha-icon-button";
+import "../ha-textfield";
@customElement("ha-selector-text")
export class HaTextSelector extends LitElement {
@@ -38,7 +38,7 @@ export class HaTextSelector extends LitElement {
required
>`;
}
- return html`
`
: this.selector.text?.suffix}
required
- >
+ >
${this.selector.text?.type === "password"
? html` {
if (this.haptic) {
forwardHaptic("light");
@@ -24,29 +20,30 @@ export class HaSwitch extends Switch {
});
}
- static get styles(): CSSResultGroup {
- return [
- Switch.styles,
- css`
- .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
- background-color: var(--switch-checked-button-color);
- border-color: var(--switch-checked-button-color);
- }
- .mdc-switch.mdc-switch--checked .mdc-switch__track {
- background-color: var(--switch-checked-track-color);
- border-color: var(--switch-checked-track-color);
- }
- .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
- background-color: var(--switch-unchecked-button-color);
- border-color: var(--switch-unchecked-button-color);
- }
- .mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
- background-color: var(--switch-unchecked-track-color);
- border-color: var(--switch-unchecked-track-color);
- }
- `,
- ];
- }
+ static override styles = [
+ styles,
+ css`
+ :host {
+ --mdc-theme-secondary: var(--switch-checked-color);
+ }
+ .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
+ background-color: var(--switch-checked-button-color);
+ border-color: var(--switch-checked-button-color);
+ }
+ .mdc-switch.mdc-switch--checked .mdc-switch__track {
+ background-color: var(--switch-checked-track-color);
+ border-color: var(--switch-checked-track-color);
+ }
+ .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
+ background-color: var(--switch-unchecked-button-color);
+ border-color: var(--switch-unchecked-button-color);
+ }
+ .mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
+ background-color: var(--switch-unchecked-track-color);
+ border-color: var(--switch-unchecked-track-color);
+ }
+ `,
+ ];
}
declare global {
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index c5e0e21a90..8ca6992f2d 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -1,9 +1,10 @@
-import { TextField } from "@material/mwc-textfield";
-import { TemplateResult, html, PropertyValues } from "lit";
+import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
+import { styles } from "@material/mwc-textfield/mwc-textfield.css";
+import { TemplateResult, html, PropertyValues, css } from "lit";
import { customElement, property } from "lit/decorators";
@customElement("ha-textfield")
-export class HaTextField extends TextField {
+export class HaTextField extends TextFieldBase {
@property({ type: Boolean }) public invalid?: boolean;
@property({ attribute: "error-message" }) public errorMessage?: string;
@@ -37,6 +38,15 @@ export class HaTextField extends TextField {
`;
}
+
+ static override styles = [
+ styles,
+ css`
+ .mdc-text-field__input {
+ width: var(--ha-textfield-input-width, 100%);
+ }
+ `,
+ ];
}
declare global {
diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts
index 7e605d165d..3e7646911d 100644
--- a/src/panels/config/cloud/account/cloud-google-pref.ts
+++ b/src/panels/config/cloud/account/cloud-google-pref.ts
@@ -1,12 +1,12 @@
import "@material/mwc-button";
-import "@material/mwc-textfield/mwc-textfield";
-import type { TextField } from "@material/mwc-textfield/mwc-textfield";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
import type { HaSwitch } from "../../../../components/ha-switch";
+import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../components/ha-textfield";
import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
import { syncCloudGoogleEntities } from "../../../../data/google_assistant";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -136,7 +136,7 @@ export class CloudGooglePref extends LitElement {
${this.hass.localize(
"ui.panel.config.cloud.account.google.enter_pin_info"
)}
-
+ >
`}
@@ -229,7 +229,7 @@ export class CloudGooglePref extends LitElement {
}
private async _pinChanged(ev) {
- const input = ev.target as TextField;
+ const input = ev.target as HaTextField;
try {
await updateCloudPref(this.hass, {
[input.id]: input.value || null,
@@ -260,7 +260,7 @@ export class CloudGooglePref extends LitElement {
right: auto;
left: 24px;
}
- mwc-textfield {
+ ha-textfield {
width: 250px;
display: block;
margin-top: 8px;
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts b/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts
index a6b34b9054..003ef7ae66 100644
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts
+++ b/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts
@@ -1,11 +1,11 @@
-import "@material/mwc-textfield/mwc-textfield";
-import type { TextField } from "@material/mwc-textfield/mwc-textfield";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/buttons/ha-progress-button";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
+import type { HaTextField } from "../../../../components/ha-textfield";
+import "../../../../components/ha-textfield";
import { cloudForgotPassword } from "../../../../data/cloud";
import "../../../../layouts/hass-subpage";
import { haStyle } from "../../../../resources/styles";
@@ -23,7 +23,7 @@ export class CloudForgotPassword extends LitElement {
@state() private _error?: string;
- @query("#email", true) private _emailField!: TextField;
+ @query("#email", true) private _emailField!: HaTextField;
protected render(): TemplateResult {
return html`
@@ -49,7 +49,7 @@ export class CloudForgotPassword extends LitElement {
${this._error
? html`${this._error}`
: ""}
-
+ >
${this._error}`
: ""}
-
-
+
+ >
-
-
${this.hass!.localize(
"ui.panel.config.devices.picker.filter.show_disabled"
)}
-
+
`;
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 7c03fd89f3..8c8bcec0d7 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-list/mwc-list-item";
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
import {
mdiAlertCircle,
@@ -35,6 +34,7 @@ import type {
import "../../../components/ha-button-menu";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
+import "../../../components/ha-check-list-item";
import {
AreaRegistryEntry,
subscribeAreaRegistry,
@@ -586,45 +586,35 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
)}
.path=${mdiFilterVariant}
>
-
-
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_disabled"
)}
-
-
+
-
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_unavailable"
)}
-
-
+
-
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_readonly"
)}
-
+
`}
${includeZHAFab
? html`
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index 7aa599d8a2..3c1879e1c5 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -1,5 +1,4 @@
import { ActionDetail } from "@material/mwc-list";
-import "@material/mwc-list/mwc-list-item";
import { mdiFilterVariant, mdiPlus } from "@mdi/js";
import Fuse from "fuse.js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
@@ -26,6 +25,8 @@ import "../../../components/ha-checkbox";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
+import "../../../components/ha-check-list-item";
+
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
import {
@@ -308,21 +309,16 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.path=${mdiFilterVariant}
>
-
-
+
${this.hass.localize(
"ui.panel.config.integrations.ignore.show_ignored"
)}
-
-
-
+
+
${this.hass.localize(
"ui.panel.config.integrations.disable.show_disabled"
)}
-
+
`;
return html`
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
index 82a7ebda77..4c9603ba0a 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
-import "@material/mwc-textfield/mwc-textfield";
import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -811,10 +810,6 @@ class DialogZWaveJSAddNode extends LitElement {
}
}
- mwc-textfield {
- width: 100%;
- }
-
ha-svg-icon {
width: 68px;
height: 48px;