diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts
new file mode 100644
index 0000000000..45462d0689
--- /dev/null
+++ b/src/components/ha-formfield.ts
@@ -0,0 +1,33 @@
+import "@material/mwc-formfield";
+import type { Formfield } from "@material/mwc-formfield";
+import { style } from "@material/mwc-formfield/mwc-formfield-css";
+import { css, CSSResult, customElement } from "lit-element";
+import { Constructor } from "../types";
+
+const MwcFormfield = customElements.get("mwc-formfield") as Constructor<
+ Formfield
+>;
+
+@customElement("ha-formfield")
+export class HaFormfield extends MwcFormfield {
+ protected static get styles(): CSSResult[] {
+ return [
+ style,
+ css`
+ ::slotted(ha-switch) {
+ margin-right: 10px;
+ }
+ [dir="rtl"] ::slotted(ha-switch),
+ ::slotted(ha-switch)[dir="rtl"] {
+ margin-left: 10px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-formfield": HaFormfield;
+ }
+}
diff --git a/src/components/ha-switch.ts b/src/components/ha-switch.ts
index 0addeb5e1a..ed5c123a1d 100644
--- a/src/components/ha-switch.ts
+++ b/src/components/ha-switch.ts
@@ -1,15 +1,7 @@
-import { ripple } from "@material/mwc-ripple/ripple-directive";
import "@material/mwc-switch";
import type { Switch } from "@material/mwc-switch";
import { style } from "@material/mwc-switch/mwc-switch-css";
-import {
- css,
- CSSResult,
- customElement,
- html,
- property,
- query,
-} from "lit-element";
+import { css, CSSResult, customElement, property } from "lit-element";
import { forwardHaptic } from "../data/haptics";
import { Constructor } from "../types";
@@ -22,18 +14,12 @@ export class HaSwitch extends MwcSwitch {
// Do not add haptic when a user is required to press save.
@property({ type: Boolean }) public haptic = false;
- @query("slot") private _slot!: HTMLSlotElement;
-
protected firstUpdated() {
super.firstUpdated();
this.style.setProperty(
"--mdc-theme-secondary",
"var(--switch-checked-color)"
);
- this.classList.toggle(
- "slotted",
- Boolean(this._slot.assignedNodes().length)
- );
this.addEventListener("change", () => {
if (this.haptic) {
forwardHaptic("light");
@@ -41,40 +27,10 @@ export class HaSwitch extends MwcSwitch {
});
}
- protected render() {
- return html`
-
-
- `;
- }
-
protected static get styles(): CSSResult[] {
return [
style,
css`
- :host {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
background-color: var(--switch-checked-button-color);
border-color: var(--switch-checked-button-color);
@@ -91,18 +47,9 @@ export class HaSwitch extends MwcSwitch {
background-color: var(--switch-unchecked-track-color);
border-color: var(--switch-unchecked-track-color);
}
- :host(.slotted) .mdc-switch {
- margin-right: 24px;
- }
`,
];
}
-
- private _haChangeHandler(e: Event) {
- this.mdcFoundation.handleChange(e);
- // catch "click" event and sync properties
- this.checked = this.formElement.checked;
- }
}
declare global {
diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
index 5ee5bfd538..b995ce6d1d 100644
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -11,6 +11,7 @@ import {
} from "lit-element";
import "../../components/dialog/ha-paper-dialog";
import "../../components/ha-switch";
+import "../../components/ha-formfield";
import type { HaSwitch } from "../../components/ha-switch";
import {
getConfigEntrySystemOptions,
@@ -82,13 +83,8 @@ class DialogConfigEntrySystemOptions extends LitElement {
? html`
${this._error}
`
: ""}
`}
@@ -172,9 +174,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
padding-bottom: 24px;
color: var(--primary-text-color);
}
- p {
- margin: 0;
- }
.secondary {
color: var(--secondary-text-color);
}
diff --git a/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts b/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts
index 4eb09e5382..80b3326e64 100644
--- a/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts
+++ b/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts
@@ -11,6 +11,7 @@ import {
import { computeStateName } from "../../common/entity/compute_state_name";
import "../../components/ha-dialog";
import "../../components/ha-switch";
+import "../../components/ha-formfield";
import type { HaSwitch } from "../../components/ha-switch";
import { computeDeviceName } from "../../data/device_registry";
import { fetchMQTTDebugInfo, MQTTDeviceDebugInfo } from "../../data/mqtt";
@@ -61,22 +62,28 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
"ui.dialogs.mqtt_device_debug_info.payload_display"
)}
-
- ${this.hass!.localize(
+
-
- ${this.hass!.localize(
+
+
+
+
+ >
+
+
+
${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.entities")}
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index d9fbad2daa..e0218135b6 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -33,6 +33,7 @@ import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show
import "../../../../layouts/hass-loading-screen";
import "../../../../layouts/hass-subpage";
import type { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-formfield";
const DEFAULT_CONFIG_EXPOSE = true;
const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
@@ -127,14 +128,19 @@ class CloudAlexa extends LitElement {
)
.join(", ")}
-
- ${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
-
+
+
+
+
+ ${this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_label"
+ )}
+
+
+ ${this._disabledBy && this._disabledBy !== "user"
+ ? this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_cause",
+ "cause",
+ this.hass.localize(
+ `config_entry.disabled_by.${this._disabledBy}`
+ )
+ )
+ : ""}
+ ${this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_description"
+ )}
+
${this.hass.localize(
+ "ui.dialogs.entity_registry.editor.note"
+ )}
+
+
-
- ${this.hass.localize(
- "ui.dialogs.entity_registry.editor.enabled_label"
- )}
-
-
- ${this._disabledBy && this._disabledBy !== "user"
- ? this.hass.localize(
- "ui.dialogs.entity_registry.editor.enabled_cause",
- "cause",
- this.hass.localize(
- `config_entry.disabled_by.${this._disabledBy}`
- )
- )
- : ""}
- ${this.hass.localize(
- "ui.dialogs.entity_registry.editor.enabled_description"
- )}
-
${this.hass.localize(
- "ui.dialogs.entity_registry.editor.note"
- )}
-
-
+
+ ${this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_label"
+ )}
+
+
+ ${this._disabledBy && this._disabledBy !== "user"
+ ? this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_cause",
+ "cause",
+ this.hass.localize(
+ `config_entry.disabled_by.${this._disabledBy}`
+ )
+ )
+ : ""}
+ ${this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_description"
+ )}
+
${this.hass.localize(
+ "ui.dialogs.entity_registry.editor.note"
+ )}
+
+