From 32dd13707786c12fa2fbe2ac661f1e065a05928e Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 8 Feb 2022 16:33:12 +0100 Subject: [PATCH 1/3] Replace checkboxes in list items with `check-list-item` --- src/components/ha-check-list-item.ts | 25 ++++++ src/components/ha-checkbox.ts | 14 +++- .../ha-form/ha-form-multi_select.ts | 76 ++++++++++++++----- src/components/ha-radio.ts | 14 +++- .../devices/ha-config-devices-dashboard.ts | 12 +-- .../config/entities/ha-config-entities.ts | 30 +++----- .../integrations/ha-config-integrations.ts | 16 ++-- 7 files changed, 122 insertions(+), 65 deletions(-) create mode 100644 src/components/ha-check-list-item.ts diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts new file mode 100644 index 000000000000..06d63d00c071 --- /dev/null +++ b/src/components/ha-check-list-item.ts @@ -0,0 +1,25 @@ +import { css } from "lit"; +import { CheckListItem } from "@material/mwc-list/mwc-check-list-item"; +import { customElement } from "lit/decorators"; + +const styles = [ + ...CheckListItem.styles, + css` + :host { + --mdc-theme-secondary: var(--primary-color); + } + `, +]; + +@customElement("ha-check-list-item") +export class HaCheckListItem extends CheckListItem { + static get styles() { + return styles; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-check-list-item": HaCheckListItem; + } +} diff --git a/src/components/ha-checkbox.ts b/src/components/ha-checkbox.ts index b3f5a1a2f46a..03d4250d3750 100644 --- a/src/components/ha-checkbox.ts +++ b/src/components/ha-checkbox.ts @@ -1,11 +1,19 @@ import { Checkbox } from "@material/mwc-checkbox"; +import { css } from "lit"; import { customElement } from "lit/decorators"; +const styles = [ + ...Checkbox.styles, + css` + :host { + --mdc-theme-secondary: var(--primary-color); + } + `, +]; @customElement("ha-checkbox") export class HaCheckbox extends Checkbox { - public firstUpdated() { - super.firstUpdated(); - this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)"); + static get styles() { + return styles; } } diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts index 3023a1a15fb1..9829fdce8993 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 { mdiMenuDown, mdiMenuUp } from "@mdi/js"; -import "@material/mwc-textfield"; import "@material/mwc-formfield"; +import "@material/mwc-select/mwc-select"; +import "@material/mwc-textfield"; +import { mdiMenuDown, mdiMenuUp } from "@mdi/js"; 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-svg-icon"; 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,6 +85,8 @@ 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)} + `; + })} `; } @@ -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) { @@ -179,6 +210,9 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { display: block; pointer-events: none; } + mwc-check-list-item { + --mdc-theme-secondary: var(--primary-color); + } ha-svg-icon { color: var(--input-dropdown-icon-color); position: absolute; diff --git a/src/components/ha-radio.ts b/src/components/ha-radio.ts index a2fb2b5929e9..42c0007c399a 100644 --- a/src/components/ha-radio.ts +++ b/src/components/ha-radio.ts @@ -1,11 +1,19 @@ import { Radio } from "@material/mwc-radio"; +import { css } from "lit"; import { customElement } from "lit/decorators"; +const styles = [ + ...Radio.styles, + css` + :host { + --mdc-theme-secondary: var(--primary-color); + } + `, +]; @customElement("ha-radio") export class HaRadio extends Radio { - public firstUpdated() { - super.firstUpdated(); - this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)"); + static get styles() { + return styles; } } diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 76b3c5d87ffd..2c1c99951d09 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiCancel, mdiFilterVariant, mdiPlus } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; @@ -19,6 +18,7 @@ import "../../../components/entity/ha-battery-icon"; import "../../../components/ha-button-menu"; import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; +import "../../../components/ha-check-list-item"; import { AreaRegistryEntry } from "../../../data/area_registry"; import { ConfigEntry } from "../../../data/config_entries"; import { @@ -435,19 +435,15 @@ export class HaConfigDeviceDashboard extends LitElement { )} .path=${mdiFilterVariant} > - - ${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 7c03fd89f346..8c8bcec0d71f 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 7aa599d8a2cd..3c1879e1c557 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` From b3ebfb60533be618fef0803e1971d0ff1b207661 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 9 Feb 2022 06:27:12 +0100 Subject: [PATCH 2/3] Update src/components/ha-form/ha-form-multi_select.ts Co-authored-by: Paulus Schoutsen --- src/components/ha-form/ha-form-multi_select.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts index 9829fdce8993..c5dc12c6f720 100644 --- a/src/components/ha-form/ha-form-multi_select.ts +++ b/src/components/ha-form/ha-form-multi_select.ts @@ -210,9 +210,6 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { display: block; pointer-events: none; } - mwc-check-list-item { - --mdc-theme-secondary: var(--primary-color); - } ha-svg-icon { color: var(--input-dropdown-icon-color); position: absolute; From 06b8d6ad5a35ed1eb65c361d53c677a948686a79 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 9 Feb 2022 10:28:54 +0100 Subject: [PATCH 3/3] Use base element to extend, use ha-textfield --- src/components/ha-check-list-item.ts | 25 ++- src/components/ha-checkbox.ts | 24 ++- src/components/ha-dialog.ts | 148 +++++++++--------- src/components/ha-form/ha-form-float.ts | 18 +-- src/components/ha-form/ha-form-integer.ts | 20 +-- .../ha-form/ha-form-multi_select.ts | 18 +-- src/components/ha-form/ha-form-string.ts | 18 +-- src/components/ha-formfield.ts | 34 ++-- src/components/ha-qr-scanner.ts | 16 +- src/components/ha-radio.ts | 24 ++- .../ha-selector/ha-selector-number.ts | 14 +- .../ha-selector/ha-selector-text.ts | 8 +- src/components/ha-slider.js | 2 +- src/components/ha-switch.ts | 59 ++++--- src/components/ha-textfield.ts | 16 +- .../config/cloud/account/cloud-google-pref.ts | 12 +- .../forgot-password/cloud-forgot-password.ts | 12 +- src/panels/config/cloud/login/cloud-login.ts | 16 +- .../config/cloud/register/cloud-register.ts | 16 +- .../zwave_js/dialog-zwave_js-add-node.ts | 5 - 20 files changed, 249 insertions(+), 256 deletions(-) diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts index 06d63d00c071..5b237208c9bb 100644 --- a/src/components/ha-check-list-item.ts +++ b/src/components/ha-check-list-item.ts @@ -1,21 +1,18 @@ import { css } from "lit"; -import { CheckListItem } from "@material/mwc-list/mwc-check-list-item"; +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"; -const styles = [ - ...CheckListItem.styles, - css` - :host { - --mdc-theme-secondary: var(--primary-color); - } - `, -]; - @customElement("ha-check-list-item") -export class HaCheckListItem extends CheckListItem { - static get styles() { - return styles; - } +export class HaCheckListItem extends CheckListItemBase { + static override styles = [ + styles, + css` + :host { + --mdc-theme-secondary: var(--primary-color); + } + `, + ]; } declare global { diff --git a/src/components/ha-checkbox.ts b/src/components/ha-checkbox.ts index 03d4250d3750..0e33ee2a18f2 100644 --- a/src/components/ha-checkbox.ts +++ b/src/components/ha-checkbox.ts @@ -1,20 +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"; -const styles = [ - ...Checkbox.styles, - css` - :host { - --mdc-theme-secondary: var(--primary-color); - } - `, -]; @customElement("ha-checkbox") -export class HaCheckbox extends Checkbox { - static get styles() { - return styles; - } +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 34614bedc628..693bae6367a2 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 7cae936ef718..ce28ee7caec6 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 3a684a3d40d3..5873eff158b2 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 c5dc12c6f720..4777eeb76b88 100644 --- a/src/components/ha-form/ha-form-multi_select.ts +++ b/src/components/ha-form/ha-form-multi_select.ts @@ -1,6 +1,4 @@ -import "@material/mwc-formfield"; import "@material/mwc-select/mwc-select"; -import "@material/mwc-textfield"; import { mdiMenuDown, mdiMenuUp } from "@mdi/js"; import { css, @@ -16,7 +14,9 @@ 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, @@ -65,14 +65,14 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { ${this.label}${options.map((item: string | [string, string]) => { const value = optionValue(item); return html` - + - + `; })} `; @@ -88,7 +88,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { multi activatable > - + > { const { formElement, mdcRoot } = - this.shadowRoot?.querySelector("mwc-textfield") || ({} as any); + this.shadowRoot?.querySelector("ha-textfield") || ({} as any); if (formElement) { formElement.style.textOverflow = "ellipsis"; } @@ -202,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 22085ab2a5f0..e82a96519e97 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 42c0007c399a..f551d4fedca7 100644 --- a/src/components/ha-radio.ts +++ b/src/components/ha-radio.ts @@ -1,20 +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"; -const styles = [ - ...Radio.styles, - css` - :host { - --mdc-theme-secondary: var(--primary-color); - } - `, -]; @customElement("ha-radio") -export class HaRadio extends Radio { - static get styles() { - return styles; - } +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 9f4d29a7654a..75d050e03ce9 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 d9a1f87bfc27..7431c058332d 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 c5e0e21a906f..8ca6992f2d74 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 7e605d165d7d..3e7646911dd7 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 a6b34b9054f9..003ef7ae66c6 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}` : ""} - - + + >