diff --git a/package.json b/package.json index b7bf844e38..cba2ce9f90 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,13 @@ "dependencies": { "@material/chips": "^3.2.0", "@material/data-table": "^3.2.0", - "@material/mwc-base": "^0.8.0", - "@material/mwc-button": "^0.8.0", - "@material/mwc-checkbox": "^0.8.0", - "@material/mwc-fab": "^0.8.0", - "@material/mwc-ripple": "^0.8.0", - "@material/mwc-switch": "^0.8.0", + "@material/mwc-base": "^0.10.0", + "@material/mwc-button": "^0.10.0", + "@material/mwc-checkbox": "^0.10.0", + "@material/mwc-dialog": "^0.10.0", + "@material/mwc-fab": "^0.10.0", + "@material/mwc-ripple": "^0.10.0", + "@material/mwc-switch": "^0.10.0", "@mdi/svg": "4.5.95", "@polymer/app-layout": "^3.0.2", "@polymer/app-localize-behavior": "^3.0.1", @@ -68,8 +69,8 @@ "@polymer/paper-tooltip": "^3.0.1", "@polymer/polymer": "3.1.0", "@thomasloven/round-slider": "0.3.5", - "@vaadin/vaadin-combo-box": "^4.2.8", - "@vaadin/vaadin-date-picker": "^3.3.3", + "@vaadin/vaadin-combo-box": "^5.0.6", + "@vaadin/vaadin-date-picker": "^4.0.3", "@webcomponents/shadycss": "^1.9.0", "@webcomponents/webcomponentsjs": "^2.2.7", "chart.js": "~2.8.0", @@ -178,7 +179,6 @@ "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569", "resolutions": { "@webcomponents/webcomponentsjs": "^2.2.10", - "@vaadin/vaadin-lumo-styles": "^1.4.2", "@polymer/polymer": "3.1.0", "lit-html": "^1.1.2" }, diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 0fa519b4d9..ea7f0e59ac 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -6,8 +6,9 @@ import { MDCDataTableFoundation, } from "@material/data-table"; +import { classMap } from "lit-html/directives/class-map"; + import { - BaseElement, html, query, queryAll, @@ -15,10 +16,11 @@ import { css, customElement, property, - classMap, TemplateResult, PropertyValues, -} from "@material/mwc-base/base-element"; +} from "lit-element"; + +import { BaseElement } from "@material/mwc-base/base-element"; // eslint-disable-next-line import/no-webpack-loader-syntax // @ts-ignore diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index c2f250887e..84dec91a87 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -2,7 +2,7 @@ import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; -import "@vaadin/vaadin-combo-box/vaadin-combo-box-light"; +import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import memoizeOne from "memoize-one"; import "./state-badge"; diff --git a/src/components/ha-combo-box.js b/src/components/ha-combo-box.js index 8c554c470e..c2a7e34e42 100644 --- a/src/components/ha-combo-box.js +++ b/src/components/ha-combo-box.js @@ -3,7 +3,7 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "@vaadin/vaadin-combo-box/vaadin-combo-box-light"; +import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import { EventsMixin } from "../mixins/events-mixin"; diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts index 2003ac0c41..a2d0103b7f 100644 --- a/src/components/ha-fab.ts +++ b/src/components/ha-fab.ts @@ -1,4 +1,5 @@ -import { classMap, html, customElement } from "@material/mwc-base/base-element"; +import { classMap } from "lit-html/directives/class-map"; +import { html, customElement } from "lit-element"; import { ripple } from "@material/mwc-ripple/ripple-directive.js"; import "@material/mwc-fab"; diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.js b/src/dialogs/more-info/controls/more-info-input_datetime.js index fc16544b74..c96c526f53 100644 --- a/src/dialogs/more-info/controls/more-info-input_datetime.js +++ b/src/dialogs/more-info/controls/more-info-input_datetime.js @@ -2,7 +2,7 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes"; import "@polymer/paper-input/paper-input"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "@vaadin/vaadin-date-picker/vaadin-date-picker"; +import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker"; import "../../../components/ha-relative-time"; import "../../../components/paper-time-input"; diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index 9aad7d6dd5..c124de41ad 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -6,17 +6,16 @@ import { TemplateResult, property, } from "lit-element"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "@polymer/paper-input/paper-input"; -import "@material/mwc-button"; import memoizeOne from "memoize-one"; -import "../../../components/dialog/ha-paper-dialog"; +import "@polymer/paper-input/paper-input"; +import "@material/mwc-button"; +import "@material/mwc-dialog"; + import "../../../components/entity/ha-entities-picker"; import "../../../components/user/ha-user-picker"; import { PersonDetailDialogParams } from "./show-dialog-person-detail"; import { PolymerChangedEvent } from "../../../polymer-types"; -import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { PersonMutableParams } from "../../../data/person"; @@ -57,17 +56,14 @@ class DialogPersonDetail extends LitElement { } const nameInvalid = this._name.trim() === ""; return html` - - - ${this._params.entry - ? this._params.entry.name - : this.hass!.localize("ui.panel.config.person.detail.new_person")} - - + ${this._error ? html` ${this._error} @@ -144,29 +140,29 @@ class DialogPersonDetail extends LitElement { `} - - - ${this._params.entry - ? html` - - ${this.hass!.localize("ui.panel.config.person.detail.delete")} - - ` - : html``} - - ${this._params.entry - ? this.hass!.localize("ui.panel.config.person.detail.update") - : this.hass!.localize("ui.panel.config.person.detail.create")} - - + ${this._params.entry + ? html` + + ${this.hass!.localize("ui.panel.config.person.detail.delete")} + + ` + : html``} + + ${this._params.entry + ? this.hass!.localize("ui.panel.config.person.detail.update") + : this.hass!.localize("ui.panel.config.person.detail.create")} + + `; } @@ -221,18 +217,16 @@ class DialogPersonDetail extends LitElement { } } - private _openedChanged(ev: PolymerChangedEvent): void { - if (!ev.detail.value) { - this._params = undefined; - } + private _close(): void { + this._params = undefined; } static get styles(): CSSResult[] { return [ - haStyleDialog, css` - ha-paper-dialog { + mwc-dialog { min-width: 400px; + max-width: 600px; } .form { padding-bottom: 24px; @@ -241,11 +235,14 @@ class DialogPersonDetail extends LitElement { margin-top: 16px; } mwc-button.warning { - margin-right: auto; + --mdc-theme-primary: var(--google-red-500); } .error { color: var(--google-red-500); } + a { + color: var(--primary-color); + } `, ]; } diff --git a/src/panels/history/ha-panel-history.js b/src/panels/history/ha-panel-history.js index 81b16ffac0..3daf0f4345 100644 --- a/src/panels/history/ha-panel-history.js +++ b/src/panels/history/ha-panel-history.js @@ -8,7 +8,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "@vaadin/vaadin-date-picker/vaadin-date-picker"; +import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker"; import "../../components/ha-menu-button"; import "../../components/state-history-charts"; @@ -38,8 +38,8 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) { paper-dropdown-menu { max-width: 100px; - margin-top: 13px; margin-right: 16px; + margin-top: 5px; --paper-input-container-label-floating: { padding-bottom: 10px; } diff --git a/src/panels/logbook/ha-panel-logbook.js b/src/panels/logbook/ha-panel-logbook.js index 610ded0a68..7e46b66979 100644 --- a/src/panels/logbook/ha-panel-logbook.js +++ b/src/panels/logbook/ha-panel-logbook.js @@ -6,7 +6,7 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-spinner/paper-spinner"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "@vaadin/vaadin-date-picker/vaadin-date-picker"; +import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker"; import "../../components/ha-menu-button"; import "../../components/entity/ha-entity-picker"; @@ -43,9 +43,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) { } vaadin-date-picker { - --vaadin-date-picker-clear-icon: { - display: none; - } max-width: 200px; margin-right: 16px; } diff --git a/src/resources/ha-date-picker-style.js b/src/resources/ha-date-picker-style.js index d56efd3774..c663477bd0 100644 --- a/src/resources/ha-date-picker-style.js +++ b/src/resources/ha-date-picker-style.js @@ -1,25 +1,8 @@ const documentContainer = document.createElement("template"); documentContainer.setAttribute("style", "display: none;"); -documentContainer.innerHTML = ` - - - - +documentContainer.innerHTML = ` + - + + - + + - + +