diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index b25790a299..e2cd0425ec 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -48,10 +48,15 @@ const SCHEMAS: { boolean: { name: "Boolean", selector: { boolean: {} } }, time: { name: "Time", selector: { time: {} } }, action: { name: "Action", selector: { action: {} } }, - text: { name: "Text", selector: { text: { multiline: false } } }, + text: { + name: "Text", + selector: { text: { multiline: false } }, + }, text_multiline: { name: "Text multiline", - selector: { text: { multiline: true } }, + selector: { + text: { multiline: true }, + }, }, object: { name: "Object", selector: { object: {} } }, select: { diff --git a/package.json b/package.json index d8d7300978..6b536e78ff 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "@material/mwc-switch": "0.25.3", "@material/mwc-tab": "0.25.3", "@material/mwc-tab-bar": "0.25.3", + "@material/mwc-textarea": "^0.25.3", "@material/mwc-textfield": "0.25.3", "@material/mwc-top-app-bar-fixed": "^0.25.3", "@material/top-app-bar": "14.0.0-canary.261f2db59.0", diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts index d4d52fec23..3a684a3d40 100644 --- a/src/components/ha-form/ha-form-integer.ts +++ b/src/components/ha-form/ha-form-integer.ts @@ -25,7 +25,7 @@ export class HaFormInteger extends LitElement implements HaFormElement { @property({ type: Boolean }) public disabled = false; - @query("paper-input ha-slider") private _input?: HTMLElement; + @query("mwc-textfield ha-slider") private _input?: HTMLElement; private _lastValue?: HaFormIntegerData; diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts index 244f97e2ce..6b2652b5b9 100644 --- a/src/components/ha-selector/ha-selector-number.ts +++ b/src/components/ha-selector/ha-selector-number.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -6,6 +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"; @customElement("ha-selector-number") export class HaNumberSelector extends LitElement { @@ -36,27 +36,23 @@ export class HaNumberSelector extends LitElement { > ` : ""} - - ${this.selector.number.unit_of_measurement - ? html`
- ${this.selector.number.unit_of_measurement} -
` - : ""} -
`; + `; } private get _value() { @@ -94,6 +90,9 @@ export class HaNumberSelector extends LitElement { ha-slider { flex: 1; } + mwc-textfield { + width: 70px; + } .single { flex: 1; } diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts index 450a6d7e6a..eaaca5a6ea 100644 --- a/src/components/ha-selector/ha-selector-select.ts +++ b/src/components/ha-selector/ha-selector-select.ts @@ -1,9 +1,11 @@ import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; +import { stopPropagation } from "../../common/dom/stop_propagation"; import { SelectSelector } from "../../data/selector"; import { HomeAssistant } from "../../types"; -import "../ha-paper-dropdown-menu"; +import "@material/mwc-select/mwc-select"; +import "@material/mwc-list/mwc-list-item"; @customElement("ha-selector-select") export class HaSelectSelector extends LitElement { @@ -18,46 +20,37 @@ export class HaSelectSelector extends LitElement { @property({ type: Boolean }) public disabled = false; protected render() { - return html` - - ${this.selector.select.options.map( - (item: string) => html` - ${item} - ` - )} - - `; + ${this.selector.select.options.map( + (item: string) => html` + ${item} + ` + )} + `; } private _valueChanged(ev) { - if (this.disabled || !ev.detail.value) { + ev.stopPropagation(); + if (this.disabled || !ev.target.value) { return; } fireEvent(this, "value-changed", { - value: ev.detail.value.itemValue, + value: ev.target.value, }); } static get styles(): CSSResultGroup { return css` - ha-paper-dropdown-menu { + mwc-select { width: 100%; - min-width: 200px; - display: block; - } - paper-listbox { - min-width: 200px; - } - paper-item { - cursor: pointer; } `; } diff --git a/src/components/ha-selector/ha-selector-target.ts b/src/components/ha-selector/ha-selector-target.ts index 6ed0251665..4d81be67df 100644 --- a/src/components/ha-selector/ha-selector-target.ts +++ b/src/components/ha-selector/ha-selector-target.ts @@ -1,8 +1,3 @@ -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; -import "@material/mwc-tab-bar/mwc-tab-bar"; -import "@material/mwc-tab/mwc-tab"; -import "@polymer/paper-input/paper-input"; import { HassEntity, HassServiceTarget, diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts index 25cddf58d8..f0a093de79 100644 --- a/src/components/ha-selector/ha-selector-text.ts +++ b/src/components/ha-selector/ha-selector-text.ts @@ -1,10 +1,10 @@ -import "@polymer/paper-input/paper-input"; -import "@polymer/paper-input/paper-textarea"; -import { html, LitElement } from "lit"; +import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { StringSelector } from "../../data/selector"; import { HomeAssistant } from "../../types"; +import "@material/mwc-textfield/mwc-textfield"; +import "@material/mwc-textarea/mwc-textarea"; @customElement("ha-selector-text") export class HaTextSelector extends LitElement { @@ -22,25 +22,26 @@ export class HaTextSelector extends LitElement { protected render() { if (this.selector.text?.multiline) { - return html``; + required + >`; } - return html``; + @input=${this._handleChange} + .label=${this.label || ""} + required + >`; } private _handleChange(ev) { @@ -50,6 +51,15 @@ export class HaTextSelector extends LitElement { } fireEvent(this, "value-changed", { value }); } + + static get styles(): CSSResultGroup { + return css` + mwc-textfield, + mwc-textarea { + width: 100%; + } + `; + } } declare global { diff --git a/yarn.lock b/yarn.lock index 307a488dc3..8d3c0ef776 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2665,7 +2665,19 @@ __metadata: languageName: node linkType: hard -"@material/mwc-textfield@npm:0.25.3": +"@material/mwc-textarea@npm:^0.25.3": + version: 0.25.3 + resolution: "@material/mwc-textarea@npm:0.25.3" + dependencies: + "@material/mwc-base": ^0.25.3 + "@material/mwc-textfield": ^0.25.3 + lit: ^2.0.0 + tslib: ^2.0.1 + checksum: 918e28b72f7c687c481cd9ee00f652cd6c212d37cd281197cb02c87f04153792c5a60a86276e82f44684e7c7b4947e0e2e5fceaa08fc075a030ea769c1501d8e + languageName: node + linkType: hard + +"@material/mwc-textfield@npm:0.25.3, @material/mwc-textfield@npm:^0.25.3": version: 0.25.3 resolution: "@material/mwc-textfield@npm:0.25.3" dependencies: @@ -9133,6 +9145,7 @@ fsevents@^1.2.7: "@material/mwc-switch": 0.25.3 "@material/mwc-tab": 0.25.3 "@material/mwc-tab-bar": 0.25.3 + "@material/mwc-textarea": ^0.25.3 "@material/mwc-textfield": 0.25.3 "@material/mwc-top-app-bar-fixed": ^0.25.3 "@material/top-app-bar": 14.0.0-canary.261f2db59.0