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`