diff --git a/src/panels/config/core/ha-config-core.ts b/src/panels/config/core/ha-config-core.ts
index 75d59b5aa5..1670beb12d 100644
--- a/src/panels/config/core/ha-config-core.ts
+++ b/src/panels/config/core/ha-config-core.ts
@@ -1,73 +1,66 @@
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "../../../components/ha-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../layouts/hass-tabs-subpage";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../styles/polymer-ha-style";
+import {
+ LitElement,
+ CSSResult,
+ css,
+ TemplateResult,
+ html,
+ property,
+ customElement,
+} from "lit-element";
+import type { HomeAssistant, Route } from "../../../types";
import { configSections } from "../ha-panel-config";
+
+import "../../../layouts/hass-tabs-subpage";
import "./ha-config-section-core";
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaConfigCore extends LocalizeMixin(PolymerElement) {
- static get template() {
+@customElement("ha-config-core")
+export class HaConfigCore extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public narrow!: boolean;
+
+ @property({ type: Boolean }) public isWide!: boolean;
+
+ @property({ attribute: false }) public route!: Route;
+
+ @property({ type: Boolean }) public showAdvanced!: boolean;
+
+ protected render(): TemplateResult {
return html`
-
-
-
-
-
+
`;
}
- static get properties() {
- return {
- hass: Object,
- isWide: Boolean,
- narrow: Boolean,
- showAdvanced: Boolean,
- route: Object,
- };
- }
-
- _computeTabs() {
- return configSections.general;
- }
-
computeClasses(isWide) {
return isWide ? "content" : "content narrow";
}
+
+ static get styles(): CSSResult {
+ return css`
+ ha-config-section-core {
+ display: block;
+ padding-bottom: 32px;
+ }
+ `;
+ }
}
-customElements.define("ha-config-core", HaConfigCore);
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-config-core": HaConfigCore;
+ }
+}
diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts
index d8315c6104..3df7eb90fe 100644
--- a/src/panels/config/core/ha-config-name-form.ts
+++ b/src/panels/config/core/ha-config-name-form.ts
@@ -10,6 +10,8 @@ import {
property,
internalProperty,
TemplateResult,
+ CSSResult,
+ css,
} from "lit-element";
import "../../../components/ha-card";
import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
@@ -87,6 +89,21 @@ class ConfigNameForm extends LitElement {
this._working = false;
}
}
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: flex;
+ }
+
+ ha-card {
+ justify-content: space-between;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ `;
+ }
}
declare global {
diff --git a/src/panels/config/core/ha-config-section-core.ts b/src/panels/config/core/ha-config-section-core.ts
index 3dc768f19d..d65918d5de 100644
--- a/src/panels/config/core/ha-config-section-core.ts
+++ b/src/panels/config/core/ha-config-section-core.ts
@@ -1,126 +1,79 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import "../../../components/buttons/ha-call-service-button";
-import "../../../components/ha-card";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../styles/polymer-ha-style";
+import {
+ LitElement,
+ CSSResult,
+ css,
+ html,
+ property,
+ TemplateResult,
+ customElement,
+} from "lit-element";
+
+import type { HomeAssistant } from "../../../types";
+
import "../ha-config-section";
-import "./ha-config-core-form";
import "./ha-config-name-form";
+import "./ha-config-core-form";
import "./ha-config-url-form";
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
- static get template() {
+@customElement("ha-config-section-core")
+export class HaConfigSectionCore extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public isWide!: boolean;
+
+ @property({ type: Boolean, attribute: "narrow", reflect: true })
+ public narrow!: boolean;
+
+ protected render(): TemplateResult {
return html`
-
-
+
[[localize('ui.panel.config.core.section.core.header')]]${this.hass.localize(
+ "ui.panel.config.core.section.core.header"
+ )}
[[localize('ui.panel.config.core.section.core.introduction')]]${this.hass.localize(
+ "ui.panel.config.core.section.core.introduction"
+ )}
-
-
-
-
+
+
+
+
+
`;
}
- static get properties() {
- return {
- hass: {
- type: Object,
- },
-
- isWide: {
- type: Boolean,
- value: false,
- },
-
- validating: {
- type: Boolean,
- value: false,
- },
-
- isValid: {
- type: Boolean,
- value: null,
- },
-
- validateLog: {
- type: String,
- value: "",
- },
-
- showAdvanced: Boolean,
- };
- }
-
- groupLoaded(hass) {
- return isComponentLoaded(hass, "group");
- }
-
- automationLoaded(hass) {
- return isComponentLoaded(hass, "automation");
- }
-
- scriptLoaded(hass) {
- return isComponentLoaded(hass, "script");
- }
-
- validateConfig() {
- this.validating = true;
- this.validateLog = "";
- this.isValid = null;
-
- this.hass.callApi("POST", "config/core/check_config").then((result) => {
- this.validating = false;
- this.isValid = result.result === "valid";
-
- if (!this.isValid) {
- this.validateLog = result.errors;
+ static get styles(): CSSResult {
+ return css`
+ .content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
}
- });
+
+ ha-config-name-form,
+ ha-config-url-form {
+ width: calc(50% - 12px);
+ }
+
+ :host([narrow]) ha-config-url-form,
+ ha-config-core-form {
+ margin-top: 24px;
+ width: 100%;
+ }
+
+ :host([narrow]) ha-config-name-form {
+ width: 100%;
+ }
+ `;
}
}
-customElements.define("ha-config-section-core", HaConfigSectionCore);
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-config-section-core": HaConfigSectionCore;
+ }
+}
diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts
index 5f76bdfdd2..ead28199cc 100644
--- a/src/panels/config/ha-config-section.ts
+++ b/src/panels/config/ha-config-section.ts
@@ -3,7 +3,7 @@ import { classMap } from "lit-html/directives/class-map";
@customElement("ha-config-section")
export class HaConfigSection extends LitElement {
- @property() public isWide = false;
+ @property({ type: Boolean }) public isWide = false;
protected render() {
return html`
@@ -12,7 +12,10 @@ export class HaConfigSection extends LitElement {
narrow: !this.isWide,
})}"
>
-
+
@@ -38,10 +40,18 @@ export class HaConfigSection extends LitElement {
margin: 0 auto;
}
+ :host([side-by-side]) .content:not(.narrow) {
+ display: flex;
+ }
+
.layout {
display: flex;
}
+ :host([side-by-side]) .content:not(.narrow) .layout {
+ width: 100%;
+ }
+
.horizontal {
flex-direction: row;
}
@@ -54,6 +64,11 @@ export class HaConfigSection extends LitElement {
flex: 1 1 auto;
}
+ :host([side-by-side]) .content:not(.narrow) .heading {
+ max-width: 400px;
+ margin-right: 40px;
+ }
+
.header {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
@@ -64,6 +79,7 @@ export class HaConfigSection extends LitElement {
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
opacity: var(--dark-primary-opacity);
+ padding-bottom: 8px;
}
.together {
@@ -78,7 +94,6 @@ export class HaConfigSection extends LitElement {
font-weight: var(--paper-font-subhead_-_font-weight);
line-height: var(--paper-font-subhead_-_line-height);
width: 100%;
- max-width: 400px;
margin-right: 40px;
opacity: var(--dark-primary-opacity);
font-size: 14px;
@@ -86,7 +101,7 @@ export class HaConfigSection extends LitElement {
}
.panel {
- margin-top: -24px;
+ margin-top: -48px;
}
.panel ::slotted(*) {
@@ -108,3 +123,9 @@ export class HaConfigSection extends LitElement {
`;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-config-section": HaConfigSection;
+ }
+}
diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts
index 22ef7646eb..9b739b89d2 100644
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/src/panels/config/server_control/ha-config-server-control.ts
@@ -43,13 +43,14 @@ const reloadableDomains = [
export class HaConfigServerControl extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property() public isWide!: boolean;
+ @property({ type: Boolean }) public isWide!: boolean;
- @property() public narrow!: boolean;
+ @property({ type: Boolean, attribute: "narrow", reflect: true })
+ public narrow!: boolean;
- @property() public route!: Route;
+ @property({ attribute: false }) public route!: Route;
- @property() public showAdvanced!: boolean;
+ @property({ type: Boolean }) public showAdvanced!: boolean;
@internalProperty() private _validating = false;
@@ -60,90 +61,91 @@ export class HaConfigServerControl extends LitElement {
protected render(): TemplateResult {
return html`