diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts
index e199a0bcc1..5a13e3ec9c 100644
--- a/hassio/src/addon-view/config/hassio-addon-network.ts
+++ b/hassio/src/addon-view/config/hassio-addon-network.ts
@@ -71,7 +71,7 @@ class HassioAddonNetwork extends LitElement {
diff --git a/src/common/dom/load_resource.ts b/src/common/dom/load_resource.ts
index f5288b886d..f8df3f2366 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 = "use-credentials";
}
break;
case "link":
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index a3194ad23d..c6b38fc84b 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -604,10 +604,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 +639,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 +657,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 +701,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 +734,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 +746,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 +775,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 +786,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 +796,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;
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index d341cf2b8c..31691ed8d7 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -40,7 +40,7 @@ export class HaDialog extends MwcDialog {
display: block;
height: 20px;
}
- .mdc-dialog__content {
+ .mdc-dialog .mdc-dialog__content {
padding: var(--dialog-content-padding, 20px 24px);
}
.header_button {
diff --git a/src/components/ha-form/ha-form-constant.ts b/src/components/ha-form/ha-form-constant.ts
new file mode 100644
index 0000000000..9ce3a02437
--- /dev/null
+++ b/src/components/ha-form/ha-form-constant.ts
@@ -0,0 +1,47 @@
+import {
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+ CSSResult,
+ css,
+ PropertyValues,
+} from "lit-element";
+import { HaFormElement, HaFormConstantSchema } from "./ha-form";
+import { fireEvent } from "../../common/dom/fire_event";
+
+@customElement("ha-form-constant")
+export class HaFormConstant extends LitElement implements HaFormElement {
+ @property({ attribute: false }) public schema!: HaFormConstantSchema;
+
+ @property() public label!: string;
+
+ protected firstUpdated(changedProps: PropertyValues) {
+ super.firstUpdated(changedProps);
+ fireEvent(this, "value-changed", {
+ value: this.schema.value,
+ });
+ }
+
+ protected render(): TemplateResult {
+ return html`${this.label}: ${this.schema.value}`;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: block;
+ }
+ .label {
+ font-weight: 500;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-form-constant": HaFormConstant;
+ }
+}
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/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index b55bbcfa37..74bf72e597 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -20,6 +20,7 @@ import type {
import type { HomeAssistant, Route } from "../types";
import "./hass-tabs-subpage";
import type { PageNavigation } from "./hass-tabs-subpage";
+import { computeRTLDirection } from "../common/util/compute_rtl";
@customElement("hass-tabs-subpage-data-table")
export class HaTabsSubpageDataTable extends LitElement {
@@ -158,6 +159,7 @@ export class HaTabsSubpageDataTable extends LitElement {
.hasFab=${this.hasFab}
.id=${this.id}
.noDataText=${this.noDataText}
+ .dir=${computeRTLDirection(this.hass)}
>
${!this.narrow
? html`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts
index 54cad8cf74..ad615721b1 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts
@@ -16,6 +16,7 @@ import "../../../../../components/entity/ha-state-icon";
import type { Cluster } from "../../../../../data/zha";
import type { HomeAssistant } from "../../../../../types";
import { formatAsPaddedHex } from "./functions";
+import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
export interface ClusterRowData extends Cluster {
cluster?: Cluster;
@@ -91,6 +92,7 @@ export class ZHAClustersDataTable extends LitElement {
.id=${"cluster_id"}
selectable
auto-height
+ .dir=${computeRTLDirection(this.hass)}
>
`;
}
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts
index e1c926b74e..b316805b31 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts
@@ -21,6 +21,7 @@ import type {
ZHAEntityReference,
} from "../../../../../data/zha";
import type { HomeAssistant } from "../../../../../types";
+import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
export interface DeviceEndpointRowData extends DataTableRowData {
id: string;
@@ -147,6 +148,7 @@ export class ZHADeviceEndpointDataTable extends LitElement {
.data=${this._deviceEndpoints(this.deviceEndpoints)}
.selectable=${this.selectable}
auto-height
+ .dir=${computeRTLDirection(this.hass)}
>
`;
}
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-groups.js b/src/panels/config/integrations/integration-panels/zwave/zwave-groups.js
index 102567a289..94037f1e03 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-groups.js
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-groups.js
@@ -7,9 +7,10 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import { computeStateName } from "../../../../../common/entity/compute_state_name";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
+import LocalizeMixin from "../../../../../mixins/localize-mixin";
import "../../../../../styles/polymer-ha-style";
-class ZwaveGroups extends PolymerElement {
+class ZwaveGroups extends LocalizeMixin(PolymerElement) {
static get template() {
return html`