${this.configs.map(
@@ -69,12 +63,6 @@ class DemoCards extends LitElement {
demo-card {
margin: 16px 16px 32px;
}
- app-toolbar {
- background-color: var(--light-primary-color);
- }
- .filters {
- margin-left: 60px;
- }
ha-formfield {
margin-right: 16px;
}
diff --git a/gallery/src/components/demo-more-info.js b/gallery/src/components/demo-more-info.js
deleted file mode 100644
index 9e2fe30b22..0000000000
--- a/gallery/src/components/demo-more-info.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../src/components/ha-card";
-import "../../../src/dialogs/more-info/more-info-content";
-import "../../../src/state-summary/state-card-content";
-
-class DemoMoreInfo extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
-
-
-
-
-
-
- [[_jsonEntity(_stateObj)]]
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- entityId: String,
- showConfig: Boolean,
- _stateObj: {
- type: Object,
- computed: "_getState(entityId, hass.states)",
- },
- };
- }
-
- _getState(entityId, states) {
- return states[entityId];
- }
-
- _jsonEntity(stateObj) {
- // We are caching some things on stateObj
- // (it sucks, we will remove in the future)
- const tmp = {};
- Object.keys(stateObj).forEach((key) => {
- if (key[0] !== "_") {
- tmp[key] = stateObj[key];
- }
- });
- return JSON.stringify(tmp, null, 2);
- }
-}
-
-customElements.define("demo-more-info", DemoMoreInfo);
diff --git a/gallery/src/components/demo-more-info.ts b/gallery/src/components/demo-more-info.ts
new file mode 100644
index 0000000000..2aa2ca1336
--- /dev/null
+++ b/gallery/src/components/demo-more-info.ts
@@ -0,0 +1,93 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../src/components/ha-card";
+import "../../../src/dialogs/more-info/more-info-content";
+import "../../../src/state-summary/state-card-content";
+import "../ha-demo-options";
+import { HomeAssistant } from "../../../src/types";
+
+@customElement("demo-more-info")
+class DemoMoreInfo extends LitElement {
+ @property() public hass!: HomeAssistant;
+
+ @property() public entityId!: string;
+
+ @property() public showConfig!: boolean;
+
+ render() {
+ const state = this._getState(this.entityId, this.hass.states);
+ return html`
+
+
+
+
+
+
+
+
+ ${this.showConfig ? html`
${this._jsonEntity(state)}` : ""}
+
+ `;
+ }
+
+ private _getState(entityId, states) {
+ return states[entityId];
+ }
+
+ private _jsonEntity(stateObj) {
+ // We are caching some things on stateObj
+ // (it sucks, we will remove in the future)
+ const tmp = {};
+ Object.keys(stateObj).forEach((key) => {
+ if (key[0] !== "_") {
+ tmp[key] = stateObj[key];
+ }
+ });
+ return JSON.stringify(tmp, null, 2);
+ }
+
+ static styles = css`
+ .root {
+ display: flex;
+ }
+ #card {
+ max-width: 400px;
+ width: 100vw;
+ }
+ ha-card {
+ width: 352px;
+ padding: 20px 24px;
+ }
+ state-card-content {
+ display: block;
+ margin-bottom: 16px;
+ }
+ pre {
+ width: 400px;
+ margin: 0 16px;
+ overflow: auto;
+ color: var(--primary-text-color);
+ }
+ @media only screen and (max-width: 800px) {
+ .root {
+ flex-direction: column;
+ }
+ pre {
+ margin: 16px 0;
+ }
+ }
+ `;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "demo-more-info": DemoMoreInfo;
+ }
+}
diff --git a/gallery/src/components/demo-more-infos.js b/gallery/src/components/demo-more-infos.js
deleted file mode 100644
index 26d5fd002f..0000000000
--- a/gallery/src/components/demo-more-infos.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-switch";
-import "./demo-more-info";
-
-class DemoMoreInfos extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
-
-
-
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- entities: Array,
- hass: Object,
- _showConfig: {
- type: Boolean,
- value: false,
- },
- };
- }
-
- _showConfigToggled(ev) {
- this._showConfig = ev.target.checked;
- }
-
- _darkThemeToggled(ev) {
- applyThemesOnElement(this.$.container, { themes: {} }, "default", {
- dark: ev.target.checked,
- });
- }
-}
-
-customElements.define("demo-more-infos", DemoMoreInfos);
diff --git a/gallery/src/components/demo-more-infos.ts b/gallery/src/components/demo-more-infos.ts
new file mode 100644
index 0000000000..5d7d928620
--- /dev/null
+++ b/gallery/src/components/demo-more-infos.ts
@@ -0,0 +1,87 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+import "./demo-more-info";
+import "../ha-demo-options";
+import { HomeAssistant } from "../../../src/types";
+
+@customElement("demo-more-infos")
+class DemoMoreInfos extends LitElement {
+ @property() public hass!: HomeAssistant;
+
+ @property() public entities!: [];
+
+ @property({ attribute: false }) _showConfig: boolean = false;
+
+ render() {
+ return html`
+
+
+
+
+
+
+
+
+
+
+ ${this.entities.map(
+ (item) =>
+ html``
+ )}
+
+
+ `;
+ }
+
+ static styles = css`
+ #container {
+ min-height: calc(100vh - 128px);
+ background: var(--primary-background-color);
+ }
+ .cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ demo-more-info {
+ margin: 16px 16px 32px;
+ }
+ ha-formfield {
+ margin-right: 16px;
+ }
+ `;
+
+ _showConfigToggled(ev) {
+ this._showConfig = ev.target.checked;
+ }
+
+ _darkThemeToggled(ev) {
+ applyThemesOnElement(
+ this.shadowRoot!.querySelector("#container"),
+ {
+ default_theme: "default",
+ default_dark_theme: "default",
+ themes: {},
+ darkMode: false,
+ theme: "default",
+ },
+ "default",
+ {
+ dark: ev.target.checked,
+ }
+ );
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "demo-more-infos": DemoMoreInfos;
+ }
+}
diff --git a/gallery/src/ha-demo-options.ts b/gallery/src/ha-demo-options.ts
new file mode 100644
index 0000000000..f3565e7891
--- /dev/null
+++ b/gallery/src/ha-demo-options.ts
@@ -0,0 +1,47 @@
+import "@material/mwc-drawer";
+import "@material/mwc-top-app-bar-fixed";
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import "../../src/components/ha-icon-button";
+import "../../src/managers/notification-manager";
+import { haStyle } from "../../src/resources/styles";
+import "./components/page-description";
+
+@customElement("ha-demo-options")
+class HaDemoOptions extends LitElement {
+ render() {
+ return html`
`;
+ }
+
+ static styles = [
+ haStyle,
+ css`
+ :host {
+ display: block;
+ background-color: var(--light-primary-color);
+ margin-left: 60px
+ margin-right: 60px;
+ display: var(--layout-horizontal_-_display);
+ -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
+ -webkit-flex-direction: var(
+ --layout-horizontal_-_-webkit-flex-direction
+ );
+ flex-direction: var(--layout-horizontal_-_flex-direction);
+ -ms-flex-align: var(--layout-center_-_-ms-flex-align);
+ -webkit-align-items: var(--layout-center_-_-webkit-align-items);
+ align-items: var(--layout-center_-_align-items);
+ position: relative;
+ height: 64px;
+ padding: 0 16px;
+ pointer-events: none;
+ font-size: 20px;
+ }
+ `,
+ ];
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-demo-options": HaDemoOptions;
+ }
+}