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;