diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts index 08c2590126..42308ee6c7 100644 --- a/src/components/ha-date-input.ts +++ b/src/components/ha-date-input.ts @@ -1,11 +1,11 @@ import { mdiCalendar } from "@mdi/js"; -import "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { formatDateNumeric } from "../common/datetime/format_date"; import { fireEvent } from "../common/dom/fire_event"; import { HomeAssistant } from "../types"; import "./ha-svg-icon"; +import "./ha-textfield"; const loadDatePickerDialog = () => import("./ha-dialog-date-picker"); @@ -38,17 +38,17 @@ export class HaDateInput extends LitElement { @property() public label?: string; render() { - return html` - - `; + + `; } private _openDialog() { @@ -73,9 +73,6 @@ export class HaDateInput extends LitElement { static get styles(): CSSResultGroup { return css` - paper-input { - width: 110px; - } ha-svg-icon { color: var(--secondary-text-color); } diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index ba67d54d79..98b33d540f 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -1,5 +1,3 @@ -import "@polymer/paper-input/paper-input"; -import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, @@ -15,6 +13,8 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { alarmPanelIcon } from "../../../common/entity/alarm_panel_icon"; import "../../../components/ha-card"; import "../../../components/ha-chip"; +import type { HaTextField } from "../../../components/ha-textfield"; +import "../../../components/ha-textfield"; import { callAlarmAction, FORMAT_NUMBER, @@ -61,7 +61,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { @state() private _config?: AlarmPanelCardConfig; - @query("#alarmCode") private _input?: PaperInputElement; + @query("#alarmCode") private _input?: HaTextField; public async getCardSize(): Promise { if (!this._config || !this.hass) { @@ -182,14 +182,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { ${!stateObj.attributes.code_format ? html`` : html` - + > `} ${stateObj.attributes.code_format !== FORMAT_NUMBER ? html`` @@ -263,6 +263,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { padding-bottom: 16px; position: relative; height: 100%; + display: flex; + flex-direction: column; + align-items: center; box-sizing: border-box; --alarm-color-disarmed: var(--label-badge-green); --alarm-color-pending: var(--label-badge-yellow); @@ -282,6 +285,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { display: flex; justify-content: space-between; align-items: center; + width: 100%; + box-sizing: border-box; } .unavailable { @@ -319,8 +324,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { } } - paper-input { - margin: 0 auto 8px; + ha-textfield { + display: block; + margin: 8px; max-width: 150px; text-align: center; } diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts index 7063c86a67..5c3e2dc444 100644 --- a/src/panels/lovelace/cards/hui-shopping-list-card.ts +++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts @@ -1,5 +1,4 @@ import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js"; -import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, @@ -17,6 +16,7 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import "../../../components/ha-card"; import "../../../components/ha-svg-icon"; import "../../../components/ha-checkbox"; +import "../../../components/ha-textfield"; import { addItem, clearItems, @@ -29,6 +29,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../types"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { SensorCardConfig, ShoppingListCardConfig } from "./types"; +import type { HaTextField } from "../../../components/ha-textfield"; let Sortable; @@ -123,14 +124,13 @@ class HuiShoppingListCard @click=${this._addItem} > - + > - + > ` )} @@ -213,12 +213,12 @@ class HuiShoppingListCard .itemId=${item.id} @change=${this._completeItem} > - + > ${this._reordering ? html` ${computeStateDisplay( @@ -108,23 +107,18 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow { ` : html`
- - - ${stateObj.attributes.unit_of_measurement} - - +
`} @@ -146,7 +140,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow { min-width: 45px; text-align: end; } - paper-input { + ha-textfield { text-align: end; } ha-slider { @@ -185,19 +179,11 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow { } } - private get _inputElement(): { value: string } { - // linter recommended the following syntax - return this.shadowRoot!.getElementById("input") as unknown as { - value: string; - }; - } - - private _selectedValueChanged(): void { - const element = this._inputElement; + private _selectedValueChanged(ev): void { const stateObj = this.hass!.states[this._config!.entity]; - if (element.value !== stateObj.state) { - setValue(this.hass!, stateObj.entity_id, element.value!); + if (ev.target.value !== stateObj.state) { + setValue(this.hass!, stateObj.entity_id, ev.target.value); } } } diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts index a8af772a68..87df1e0362 100644 --- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts @@ -1,4 +1,3 @@ -import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity"; @@ -8,6 +7,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import { EntityConfig, LovelaceRow } from "./types"; +import "../../../components/ha-textfield"; @customElement("hui-input-text-entity-row") class HuiInputTextEntityRow extends LitElement implements LovelaceRow { @@ -43,8 +43,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow { return html` - + > `; } - private get _inputEl(): PaperInputElement { - return this.shadowRoot!.querySelector("paper-input") as PaperInputElement; - } - private _selectedValueChanged(ev): void { - const element = this._inputEl; const stateObj = this.hass!.states[this._config!.entity]; + const newValue = ev.target.value; + // Filter out invalid text states - if (element.value && UNAVAILABLE_STATES.includes(element.value)) { - element.value = stateObj.state; + if (newValue && UNAVAILABLE_STATES.includes(newValue)) { + ev.target.value = stateObj.state; return; } - if (element.value !== stateObj.state) { - setValue(this.hass!, stateObj.entity_id, element.value!); + if (newValue !== stateObj.state) { + setValue(this.hass!, stateObj.entity_id, newValue); } ev.target.blur(); diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts index 65b306137a..22f5c34eb6 100644 --- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-input/paper-input"; import { css, CSSResultGroup, @@ -20,6 +19,7 @@ import { installResizeObserver } from "../common/install-resize-observer"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import { EntityConfig, LovelaceRow } from "./types"; +import "../../../components/ha-textfield"; @customElement("hui-number-entity-row") class HuiNumberEntityRow extends LitElement implements LovelaceRow { @@ -98,7 +98,6 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { pin @change=${this._selectedValueChanged} ignore-bar-touch - id="input" > ${computeStateDisplay( @@ -112,20 +111,18 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { ` : html`
- - ${stateObj.attributes.unit_of_measurement} + >
`} @@ -148,7 +145,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { min-width: 45px; text-align: end; } - paper-input { + ha-textfield { text-align: end; } ha-slider { @@ -187,19 +184,11 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { } } - private get _inputElement(): { value: string } { - // linter recommended the following syntax - return this.shadowRoot!.getElementById("input") as unknown as { - value: string; - }; - } - - private _selectedValueChanged(): void { - const element = this._inputElement; + private _selectedValueChanged(ev): void { const stateObj = this.hass!.states[this._config!.entity]; - if (element.value !== stateObj.state) { - setValue(this.hass!, stateObj.entity_id, element.value!); + if (ev.target.value !== stateObj.state) { + setValue(this.hass!, stateObj.entity_id, ev.target.value!); } } } diff --git a/src/panels/shopping-list/ha-panel-shopping-list.ts b/src/panels/shopping-list/ha-panel-shopping-list.ts index a852182225..7a3947dd44 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.ts +++ b/src/panels/shopping-list/ha-panel-shopping-list.ts @@ -88,10 +88,12 @@ class PanelShoppingList extends LitElement { haStyle, css` :host { - --mdc-theme-primary: var(--app-header-text-color); display: block; height: 100%; } + app-header { + --mdc-theme-primary: var(--app-header-text-color); + } :host([narrow]) app-toolbar mwc-button { width: 65px; } diff --git a/src/state-summary/state-card-input_number.js b/src/state-summary/state-card-input_number.js index afa4959bbb..2fabea717a 100644 --- a/src/state-summary/state-card-input_number.js +++ b/src/state-summary/state-card-input_number.js @@ -1,6 +1,5 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes"; import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior"; -import "@polymer/paper-input/paper-input"; import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ @@ -8,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import { computeStateDisplay } from "../common/entity/compute_state_display"; import "../components/entity/state-info"; import "../components/ha-slider"; +import "../components/ha-textfield"; class StateCardInputNumber extends mixinBehaviors( [IronResizableBehavior], @@ -33,7 +33,7 @@ class StateCardInputNumber extends mixinBehaviors( ha-slider[hidden] { display: none !important; } - paper-input { + ha-textfield { text-align: right; margin-left: auto; } @@ -54,23 +54,22 @@ class StateCardInputNumber extends mixinBehaviors( ignore-bar-touch="" > - +
${this.stateInfoTemplate} - - +
`; } @@ -68,6 +68,10 @@ class StateCardInputText extends PolymerElement { this.value = newVal.state; } + onInput(ev) { + this.value = ev.target.value; + } + selectedValueChanged() { if (this.value === this.stateObj.state) { return; diff --git a/src/state-summary/state-card-number.js b/src/state-summary/state-card-number.js index 24a3e64e0c..fd9e9dda2e 100644 --- a/src/state-summary/state-card-number.js +++ b/src/state-summary/state-card-number.js @@ -1,12 +1,12 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes"; import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior"; -import "@polymer/paper-input/paper-input"; import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../components/entity/state-info"; import "../components/ha-slider"; +import "../components/ha-textfield"; class StateCardNumber extends mixinBehaviors( [IronResizableBehavior], @@ -32,7 +32,7 @@ class StateCardNumber extends mixinBehaviors( ha-slider[hidden] { display: none !important; } - paper-input { + ha-textfield { text-align: right; margin-left: auto; } @@ -53,20 +53,20 @@ class StateCardNumber extends mixinBehaviors( ignore-bar-touch="" > - + @@ -178,6 +178,10 @@ class StateCardNumber extends mixinBehaviors( } } + onInput(ev) { + this.value = ev.target.value; + } + selectedValueChanged() { if (this.value === Number(this.stateObj.state)) { return;