Refresh
diff --git a/package.json b/package.json
index 87a988abf4..7b4ada4548 100644
--- a/package.json
+++ b/package.json
@@ -25,20 +25,23 @@
"@formatjs/intl-pluralrules": "^1.5.8",
"@fullcalendar/core": "^5.0.0-beta.2",
"@fullcalendar/daygrid": "^5.0.0-beta.2",
- "@material/chips": "7.0.0-canary.d92d8c93e.0",
- "@material/circular-progress": "7.0.0-canary.d92d8c93e.0",
- "@material/mwc-button": "^0.15.0",
- "@material/mwc-checkbox": "^0.15.0",
- "@material/mwc-dialog": "^0.15.0",
- "@material/mwc-fab": "^0.15.0",
- "@material/mwc-formfield": "^0.15.0",
- "@material/mwc-icon-button": "^0.15.0",
- "@material/mwc-list": "^0.15.0",
- "@material/mwc-menu": "^0.15.0",
- "@material/mwc-ripple": "^0.15.0",
- "@material/mwc-switch": "^0.15.0",
- "@mdi/js": "4.9.95",
- "@mdi/svg": "4.9.95",
+ "@material/chips": "=8.0.0-canary.a78ceb112.0",
+ "@material/circular-progress": "=8.0.0-canary.a78ceb112.0",
+ "@material/mwc-button": "^0.17.2",
+ "@material/mwc-checkbox": "^0.17.2",
+ "@material/mwc-dialog": "^0.17.2",
+ "@material/mwc-fab": "^0.17.2",
+ "@material/mwc-formfield": "^0.17.2",
+ "@material/mwc-icon-button": "^0.17.2",
+ "@material/mwc-list": "^0.17.2",
+ "@material/mwc-menu": "^0.17.2",
+ "@material/mwc-ripple": "^0.17.2",
+ "@material/mwc-switch": "^0.17.2",
+ "@material/mwc-tab": "^0.17.2",
+ "@material/mwc-tab-bar": "^0.17.2",
+ "@material/top-app-bar": "=8.0.0-canary.a78ceb112.0",
+ "@mdi/js": "5.3.45",
+ "@mdi/svg": "5.3.45",
"@polymer/app-layout": "^3.0.2",
"@polymer/app-route": "^3.0.2",
"@polymer/app-storage": "^3.0.2",
@@ -105,6 +108,7 @@
"resize-observer-polyfill": "^1.5.1",
"roboto-fontface": "^0.10.0",
"superstruct": "^0.6.1",
+ "svg-gauge": "^1.0.6",
"unfetch": "^4.1.0",
"vue": "^2.6.11",
"vue2-daterange-picker": "^0.5.1",
@@ -206,20 +210,7 @@
"@webcomponents/webcomponentsjs": "^2.2.10",
"@polymer/polymer": "3.1.0",
"lit-html": "1.2.1",
- "lit-element": "2.3.1",
- "@material/animation": "7.0.0-canary.d92d8c93e.0",
- "@material/base": "7.0.0-canary.d92d8c93e.0",
- "@material/checkbox": "7.0.0-canary.d92d8c93e.0",
- "@material/density": "7.0.0-canary.d92d8c93e.0",
- "@material/dom": "7.0.0-canary.d92d8c93e.0",
- "@material/elevation": "7.0.0-canary.d92d8c93e.0",
- "@material/feature-targeting": "7.0.0-canary.d92d8c93e.0",
- "@material/ripple": "7.0.0-canary.d92d8c93e.0",
- "@material/rtl": "7.0.0-canary.d92d8c93e.0",
- "@material/shape": "7.0.0-canary.d92d8c93e.0",
- "@material/theme": "7.0.0-canary.d92d8c93e.0",
- "@material/touch-target": "7.0.0-canary.d92d8c93e.0",
- "@material/typography": "7.0.0-canary.d92d8c93e.0"
+ "lit-element": "2.3.1"
},
"main": "src/home-assistant.js",
"husky": {
diff --git a/setup.py b/setup.py
index 5c4437c7f0..6db083fc4d 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
setup(
name="home-assistant-frontend",
- version="20200702.1",
+ version="20200714.0",
description="The Home Assistant frontend",
url="https://github.com/home-assistant/home-assistant-polymer",
author="The Home Assistant Authors",
diff --git a/src/cards/ha-history_graph-card.js b/src/cards/ha-history_graph-card.js
deleted file mode 100644
index 33e2472d82..0000000000
--- a/src/cards/ha-history_graph-card.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import "@polymer/paper-card/paper-card";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { computeStateName } from "../common/entity/compute_state_name";
-import "../components/state-history-charts";
-import "../data/ha-state-history-data";
-import { EventsMixin } from "../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HaHistoryGraphCard extends EventsMixin(PolymerElement) {
- static get template() {
- return html`
-
-
-
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- stateObj: {
- type: Object,
- observer: "stateObjObserver",
- },
- inDialog: {
- type: Boolean,
- value: false,
- },
- stateHistory: Object,
- stateHistoryLoading: Boolean,
- cacheConfig: {
- type: Object,
- value: {
- refresh: 0,
- cacheKey: null,
- hoursToShow: 24,
- },
- },
- };
- }
-
- stateObjObserver(stateObj) {
- if (!stateObj) return;
- if (
- this.cacheConfig.cacheKey !== stateObj.entity_id ||
- this.cacheConfig.refresh !== (stateObj.attributes.refresh || 0) ||
- this.cacheConfig.hoursToShow !== (stateObj.attributes.hours_to_show || 24)
- ) {
- this.cacheConfig = {
- refresh: stateObj.attributes.refresh || 0,
- cacheKey: stateObj.entity_id,
- hoursToShow: stateObj.attributes.hours_to_show || 24,
- };
- }
- }
-
- computeTitle(stateObj) {
- return computeStateName(stateObj);
- }
-
- computeContentClass(inDialog) {
- return inDialog ? "" : "content";
- }
-
- computeHistoryEntities(stateObj) {
- return stateObj.attributes.entity_id;
- }
-
- computeElevation(inDialog) {
- return inDialog ? 0 : 1;
- }
-
- cardTapped(ev) {
- const mq = window.matchMedia("(min-width: 610px) and (min-height: 550px)");
- if (mq.matches) {
- ev.stopPropagation();
- this.fire("hass-more-info", { entityId: this.stateObj.entity_id });
- }
- }
-}
-customElements.define("ha-history_graph-card", HaHistoryGraphCard);
diff --git a/src/common/const.ts b/src/common/const.ts
index b801ae37fc..dc2bf20595 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -22,7 +22,6 @@ export const DOMAINS_WITH_CARD = [
"timer",
"vacuum",
"water_heater",
- "weblink",
];
/** Domains with separate more info dialog. */
@@ -36,7 +35,6 @@ export const DOMAINS_WITH_MORE_INFO = [
"cover",
"fan",
"group",
- "history_graph",
"humidifier",
"input_datetime",
"light",
@@ -58,16 +56,10 @@ export const DOMAINS_HIDE_MORE_INFO = [
"input_select",
"input_text",
"scene",
- "weblink",
];
/** Domains that should have the history hidden in the more info dialog. */
-export const DOMAINS_MORE_INFO_NO_HISTORY = [
- "camera",
- "configurator",
- "history_graph",
- "scene",
-];
+export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"];
/** States that we consider "off". */
export const STATES_OFF = ["closed", "locked", "off"];
diff --git a/src/common/datetime/relative_time.ts b/src/common/datetime/relative_time.ts
index 8eaafb4ad3..cc414b1e12 100644
--- a/src/common/datetime/relative_time.ts
+++ b/src/common/datetime/relative_time.ts
@@ -20,31 +20,24 @@ export default function relativeTime(
let delta = (compareTime.getTime() - dateObj.getTime()) / 1000;
const tense = delta >= 0 ? "past" : "future";
delta = Math.abs(delta);
-
- let timeDesc;
+ let roundedDelta = Math.round(delta);
+ let unit = "week";
for (let i = 0; i < tests.length; i++) {
- if (delta < tests[i]) {
- delta = Math.floor(delta);
- timeDesc = localize(
- `ui.components.relative_time.duration.${langKey[i]}`,
- "count",
- delta
- );
+ if (roundedDelta < tests[i]) {
+ unit = langKey[i];
break;
}
delta /= tests[i];
+ roundedDelta = Math.round(delta);
}
- if (timeDesc === undefined) {
- delta = Math.floor(delta);
- timeDesc = localize(
- "ui.components.relative_time.duration.week",
- "count",
- delta
- );
- }
+ const timeDesc = localize(
+ `ui.components.relative_time.duration.${unit}`,
+ "count",
+ roundedDelta
+ );
return options.includeTense === false
? timeDesc
diff --git a/src/common/dom/load_resource.ts b/src/common/dom/load_resource.ts
index f5288b886d..670afddc9e 100644
--- a/src/common/dom/load_resource.ts
+++ b/src/common/dom/load_resource.ts
@@ -22,6 +22,8 @@ const _load = (
(element as HTMLScriptElement).async = true;
if (type) {
(element as HTMLScriptElement).type = type;
+ // https://github.com/home-assistant/frontend/pull/6328
+ (element as HTMLScriptElement).crossOrigin = url.substr(0, 1) === "/" ? "use-credentials" : "anonymous";
}
break;
case "link":
diff --git a/src/common/entity/battery_icon.ts b/src/common/entity/battery_icon.ts
new file mode 100644
index 0000000000..26ffb3a3d8
--- /dev/null
+++ b/src/common/entity/battery_icon.ts
@@ -0,0 +1,28 @@
+/** Return an icon representing a battery state. */
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const batteryIcon = (
+ batteryState: HassEntity,
+ batteryChargingState?: HassEntity
+) => {
+ const battery = Number(batteryState.state);
+ const battery_charging =
+ batteryChargingState && batteryChargingState.state === "on";
+
+ if (isNaN(battery)) {
+ return "hass:battery-unknown";
+ }
+
+ var icon = "hass:battery";
+ const batteryRound = Math.round(battery / 10) * 10;
+ if (battery_charging && battery > 10) {
+ icon += `-charging-${batteryRound}`;
+ } else if (battery_charging) {
+ icon += "-outline";
+ } else if (battery <= 5) {
+ icon += "-alert";
+ } else if (battery > 5 && battery < 95) {
+ icon += `-${batteryRound}`;
+ }
+ return icon;
+};
diff --git a/src/common/entity/domain_icon.ts b/src/common/entity/domain_icon.ts
index 650c4288e1..82b8795454 100644
--- a/src/common/entity/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@@ -13,14 +13,13 @@ const fixedIcons = {
calendar: "hass:calendar",
camera: "hass:video",
climate: "hass:thermostat",
- configurator: "hass:settings",
+ configurator: "hass:cog",
conversation: "hass:text-to-speech",
counter: "hass:counter",
device_tracker: "hass:account",
fan: "hass:fan",
google_assistant: "hass:google-assistant",
group: "hass:google-circles-communities",
- history_graph: "hass:chart-line",
homeassistant: "hass:home-assistant",
homekit: "hass:home-automation",
humidifier: "hass:air-humidifier",
@@ -29,7 +28,7 @@ const fixedIcons = {
input_datetime: "hass:calendar-clock",
input_number: "hass:ray-vertex",
input_select: "hass:format-list-bulleted",
- input_text: "hass:textbox",
+ input_text: "hass:form-textbox",
light: "hass:lightbulb",
mailbox: "hass:mailbox",
notify: "hass:comment-alert",
@@ -44,12 +43,11 @@ const fixedIcons = {
simple_alarm: "hass:bell",
sun: "hass:white-balance-sunny",
switch: "hass:flash",
- timer: "hass:timer",
+ timer: "hass:timer-outline",
updater: "hass:cloud-upload",
vacuum: "hass:robot-vacuum",
water_heater: "hass:thermometer",
weather: "hass:weather-cloudy",
- weblink: "hass:open-in-new",
zone: "hass:map-marker-radius",
};
diff --git a/src/common/entity/sensor_icon.ts b/src/common/entity/sensor_icon.ts
index 32d7436d3b..1ec97ff5d9 100644
--- a/src/common/entity/sensor_icon.ts
+++ b/src/common/entity/sensor_icon.ts
@@ -2,6 +2,7 @@
import { HassEntity } from "home-assistant-js-websocket";
import { UNIT_C, UNIT_F } from "../const";
import { domainIcon } from "./domain_icon";
+import { batteryIcon } from "./battery_icon";
const fixedDeviceClassIcons = {
humidity: "hass:water-percent",
@@ -19,29 +20,7 @@ export const sensorIcon = (state: HassEntity) => {
return fixedDeviceClassIcons[dclass];
}
if (dclass === "battery") {
- const battery = Number(state.state);
- if (isNaN(battery)) {
- return "hass:battery-unknown";
- }
- const batteryRound = Math.round(battery / 10) * 10;
- if (batteryRound >= 100) {
- return "hass:battery";
- }
- if (batteryRound <= 0) {
- return "hass:battery-alert";
- }
- // Will return one of the following icons: (listed so extractor picks up)
- // hass:battery-10
- // hass:battery-20
- // hass:battery-30
- // hass:battery-40
- // hass:battery-50
- // hass:battery-60
- // hass:battery-70
- // hass:battery-80
- // hass:battery-90
- // We obscure 'hass' in iconname so this name does not get picked up
- return `${"hass"}:battery-${batteryRound}`;
+ return batteryIcon(state);
}
const unit = state.attributes.unit_of_measurement;
diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index 0b819496f2..1d52dbcde6 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -26,6 +26,9 @@ class SearchInput extends LitElement {
@property({ type: Boolean })
public autofocus = false;
+ @property({ type: String })
+ public label?: string;
+
public focus() {
this.shadowRoot!.querySelector("paper-input")!.focus();
}
@@ -43,7 +46,7 @@ class SearchInput extends LitElement {
{
+export const slugify = (value: string, delimiter = "-") => {
const a =
"àáäâãåăæąçćčđďèéěėëêęğǵḧìíïîįłḿǹńňñòóöôœøṕŕřßşśšșťțùúüûǘůűūųẃẍÿýźžż·/_,:;";
- const b =
- "aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz------";
+ const b = `aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}`;
const p = new RegExp(a.split("").join("|"), "g");
return value
.toString()
.toLowerCase()
- .replace(/\s+/g, "-") // Replace spaces with -
+ .replace(/\s+/g, delimiter) // Replace spaces with delimiter
.replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
- .replace(/&/g, "-and-") // Replace & with 'and'
+ .replace(/&/g, `${delimiter}and${delimiter}`) // Replace & with 'and'
.replace(/[^\w-]+/g, "") // Remove all non-word characters
- .replace(/--+/g, "-") // Replace multiple - with single -
- .replace(/^-+/, "") // Trim - from start of text
- .replace(/-+$/, ""); // Trim - from end of text
+ .replace(/-/, delimiter) // Replace - with delimiter
+ .replace(new RegExp(`/${delimiter}${delimiter}+/`, "g"), delimiter) // Replace multiple delimiters with single delimiter
+ .replace(new RegExp(`/^${delimiter}+/`), "") // Trim delimiter from start of text
+ .replace(new RegExp(`/-+$/`), ""); // Trim delimiter from end of text
};
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index a3194ad23d..3ec2aba13a 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -69,6 +69,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
width?: string;
maxWidth?: string;
grows?: boolean;
+ forceLTR?: boolean;
}
export interface DataTableRowData {
@@ -352,6 +353,7 @@ export class HaDataTable extends LitElement {
column.type === "icon-button"
),
grows: Boolean(column.grows),
+ forceLTR: Boolean(column.forceLTR),
})}"
style=${column.width
? styleMap({
@@ -604,10 +606,8 @@ export class HaDataTable extends LitElement {
padding-right: 0;
width: 56px;
}
- [dir="rtl"] .mdc-data-table__header-cell--checkbox,
- .mdc-data-table__header-cell--checkbox[dir="rtl"],
- [dir="rtl"] .mdc-data-table__cell--checkbox,
- .mdc-data-table__cell--checkbox[dir="rtl"] {
+ :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
+ :host([dir="rtl"]) .mdc-data-table__cell--checkbox {
/* @noflip */
padding-left: 0;
/* @noflip */
@@ -641,8 +641,7 @@ export class HaDataTable extends LitElement {
.mdc-data-table__cell--numeric {
text-align: right;
}
- [dir="rtl"] .mdc-data-table__cell--numeric,
- .mdc-data-table__cell--numeric[dir="rtl"] {
+ :host([dir="rtl"]) .mdc-data-table__cell--numeric {
/* @noflip */
text-align: left;
}
@@ -660,18 +659,33 @@ export class HaDataTable extends LitElement {
.mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
text-align: center;
}
+
.mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
.mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
text-align: left;
}
+ :host([dir="rtl"])
+ .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
+ :host([dir="rtl"])
+ .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
+ text-align: right;
+ }
.mdc-data-table__cell--icon:first-child ha-icon {
margin-left: 8px;
}
+ :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon {
+ margin-left: auto;
+ margin-right: 8px;
+ }
.mdc-data-table__cell--icon:first-child state-badge {
margin-right: -8px;
}
+ :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child state-badge {
+ margin-right: auto;
+ margin-left: -8px;
+ }
.mdc-data-table__header-cell--icon-button,
.mdc-data-table__cell--icon-button {
@@ -689,12 +703,22 @@ export class HaDataTable extends LitElement {
width: 64px;
padding-left: 16px;
}
+ :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:first-child,
+ :host([dir="rtl"]) .mdc-data-table__cell--icon-button:first-child {
+ padding-left: auto;
+ padding-right: 16px;
+ }
.mdc-data-table__header-cell--icon-button:last-child,
.mdc-data-table__cell--icon-button:last-child {
width: 64px;
padding-right: 16px;
}
+ :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
+ :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
+ padding-right: auto;
+ padding-left: 16px;
+ }
.mdc-data-table__cell--icon-button a {
color: var(--secondary-text-color);
@@ -712,8 +736,7 @@ export class HaDataTable extends LitElement {
text-transform: inherit;
text-align: left;
}
- [dir="rtl"] .mdc-data-table__header-cell,
- .mdc-data-table__header-cell[dir="rtl"] {
+ :host([dir="rtl"]) .mdc-data-table__header-cell {
/* @noflip */
text-align: right;
}
@@ -725,11 +748,15 @@ export class HaDataTable extends LitElement {
.mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
text-align: left;
}
- [dir="rtl"] .mdc-data-table__header-cell--numeric,
- .mdc-data-table__header-cell--numeric[dir="rtl"] {
+ :host([dir="rtl"]) .mdc-data-table__header-cell--numeric {
/* @noflip */
text-align: left;
}
+ :host([dir="rtl"]) .mdc-data-table__header-cell--numeric.sortable:hover,
+ :host([dir="rtl"])
+ .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
+ text-align: right;
+ }
/* custom from here */
@@ -750,6 +777,10 @@ export class HaDataTable extends LitElement {
position: relative;
left: 0px;
}
+ :host([dir="rtl"]) .mdc-data-table__header-cell span {
+ left: auto;
+ right: 0px;
+ }
.mdc-data-table__header-cell.sortable {
cursor: pointer;
@@ -757,6 +788,9 @@ export class HaDataTable extends LitElement {
.mdc-data-table__header-cell > * {
transition: left 0.2s ease;
}
+ :host([dir="rtl"]) .mdc-data-table__header-cell > * {
+ transition: right 0.2s ease;
+ }
.mdc-data-table__header-cell ha-icon {
top: -3px;
position: absolute;
@@ -764,14 +798,35 @@ export class HaDataTable extends LitElement {
.mdc-data-table__header-cell.not-sorted ha-icon {
left: -20px;
}
+ :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-icon {
+ right: -20px;
+ }
.mdc-data-table__header-cell.sortable:not(.not-sorted) span,
.mdc-data-table__header-cell.sortable.not-sorted:hover span {
left: 24px;
}
+ :host([dir="rtl"])
+ .mdc-data-table__header-cell.sortable:not(.not-sorted)
+ span,
+ :host([dir="rtl"])
+ .mdc-data-table__header-cell.sortable.not-sorted:hover
+ span {
+ left: auto;
+ right: 24px;
+ }
.mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon,
.mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon {
left: 12px;
}
+ :host([dir="rtl"])
+ .mdc-data-table__header-cell.sortable:not(.not-sorted)
+ ha-icon,
+ :host([dir="rtl"])
+ .mdc-data-table__header-cell.sortable:hover.not-sorted
+ ha-icon {
+ left: auto;
+ right: 12px;
+ }
.table-header {
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
padding: 0 16px;
@@ -802,6 +857,9 @@ export class HaDataTable extends LitElement {
flex-grow: 1;
flex-shrink: 1;
}
+ .forceLTR {
+ direction: ltr;
+ }
`;
}
}
diff --git a/src/components/entity/ha-battery-icon.ts b/src/components/entity/ha-battery-icon.ts
new file mode 100644
index 0000000000..1838f6af5e
--- /dev/null
+++ b/src/components/entity/ha-battery-icon.ts
@@ -0,0 +1,18 @@
+import { batteryIcon } from "../../common/entity/battery_icon";
+import "../ha-icon";
+import { customElement, html, property, LitElement } from "lit-element";
+
+@customElement("ha-battery-icon")
+export class HaBatteryIcon extends LitElement {
+ @property() public batteryStateObj;
+
+ @property() public batteryChargingStateObj;
+
+ protected render() {
+ return html`
+
+ `;
+ }
+}
diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 1761191504..1c812a6065 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -155,7 +155,9 @@ export class HaStateLabelBadge extends LitElement {
? domainIcon(domain)
: "hass:brightness-3";
case "timer":
- return state.state === "active" ? "hass:timer" : "hass:timer-off";
+ return state.state === "active"
+ ? "hass:timer-outline"
+ : "hass:timer-off-outline";
default:
return null;
}
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 9d48bca2cb..8b2cbd8292 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -19,7 +19,7 @@ class HaCard extends LitElement {
:host {
background: var(
--ha-card-background,
- var(--paper-card-background-color, white)
+ var(--card-background-color, white)
);
border-radius: var(--ha-card-border-radius, 4px);
box-shadow: var(
diff --git a/src/components/ha-cover-controls.js b/src/components/ha-cover-controls.js
index 3cf69923d3..1849439d4a 100644
--- a/src/components/ha-cover-controls.js
+++ b/src/components/ha-cover-controls.js
@@ -65,6 +65,7 @@ class HaCoverControls extends PolymerElement {
computeOpenIcon(stateObj) {
switch (stateObj.attributes.device_class) {
case "awning":
+ case "door":
case "gate":
return "hass:arrow-expand-horizontal";
default:
@@ -75,6 +76,7 @@ class HaCoverControls extends PolymerElement {
computeCloseIcon(stateObj) {
switch (stateObj.attributes.device_class) {
case "awning":
+ case "door":
case "gate":
return "hass:arrow-collapse-horizontal";
default:
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 6a6d35a031..03472c6495 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -5,6 +5,7 @@ import "./ha-icon-button";
import { css, CSSResult, customElement, html } from "lit-element";
import type { Constructor, HomeAssistant } from "../types";
import { mdiClose } from "@mdi/js";
+import { computeRTL } from "../common/util/compute_rtl";
const MwcDialog = customElements.get("mwc-dialog") as Constructor
diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index be6b4eb1da..5f57df1bc1 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -15,8 +15,10 @@ import "./ha-form-multi_select";
import "./ha-form-positive_time_period_dict";
import "./ha-form-select";
import "./ha-form-string";
+import "./ha-form-constant";
export type HaFormSchema =
+ | HaFormConstantSchema
| HaFormStringSchema
| HaFormIntegerSchema
| HaFormFloatSchema
@@ -33,6 +35,11 @@ export interface HaFormBaseSchema {
description?: { suffix?: string; suggested_value?: HaFormData };
}
+export interface HaFormConstantSchema extends HaFormBaseSchema {
+ type: "constant";
+ value: string;
+}
+
export interface HaFormIntegerSchema extends HaFormBaseSchema {
type: "integer";
default?: HaFormIntegerData;
diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts
index 45462d0689..6d0a5b8ba0 100644
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -14,12 +14,12 @@ export class HaFormfield extends MwcFormfield {
return [
style,
css`
- ::slotted(ha-switch) {
+ :host(:not([alignEnd])) ::slotted(ha-switch) {
margin-right: 10px;
}
- [dir="rtl"] ::slotted(ha-switch),
- ::slotted(ha-switch)[dir="rtl"] {
+ :host([dir="rtl"]:not([alignEnd])) ::slotted(ha-switch) {
margin-left: 10px;
+ margin-right: auto;
}
`,
];
diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts
new file mode 100644
index 0000000000..946c1979de
--- /dev/null
+++ b/src/components/ha-header-bar.ts
@@ -0,0 +1,47 @@
+import { customElement, LitElement, html, unsafeCSS, css } from "lit-element";
+// @ts-ignore
+import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
+
+@customElement("ha-header-bar")
+export class HaHeaderBar extends LitElement {
+ protected render() {
+ return html`