Extract black/white row into component (#10212)

* Extract black/white row into component

* Remove unused import

gallery/src/components/demo-black-white-row.ts

@@ -0,0 +1,122 @@
+import { html, LitElement, css, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+
+@customElement("demo-black-white-row")
+class DemoBlackWhiteRow extends LitElement {
+  @property() title!: string;
+
+  @property() value!: any;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="row">
+        <div class="content light">
+          <ha-card .header=${this.title}>
+            <div class="card-content">
+              <slot name="light"></slot>
+            </div>
+            <div class="card-actions">
+              <mwc-button>Submit</mwc-button>
+            </div>
+          </ha-card>
+        </div>
+        <div class="content dark">
+          <ha-card .header=${this.title}>
+            <div class="card-content">
+              <slot name="dark"></slot>
+            </div>
+            <div class="card-actions">
+              <mwc-button>Submit</mwc-button>
+            </div>
+          </ha-card>
+          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: false,
+      },
+      "default",
+      { dark: true }
+    );
+  }
+
+  static styles = css`
+    .row {
+      display: flex;
+    }
+    .content {
+      padding: 50px 0;
+      background-color: var(--primary-background-color);
+    }
+    .light {
+      flex: 1;
+      padding-left: 50px;
+      padding-right: 50px;
+      box-sizing: border-box;
+    }
+    .light ha-card {
+      margin-left: auto;
+    }
+    .dark {
+      display: flex;
+      flex: 1;
+      padding-left: 50px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+    }
+    ha-card {
+      width: 400px;
+    }
+    pre {
+      width: 300px;
+      margin: 0 16px 0;
+      overflow: auto;
+      color: var(--primary-text-color);
+    }
+    .card-actions {
+      display: flex;
+      flex-direction: row-reverse;
+      border-top: none;
+    }
+    @media only screen and (max-width: 1500px) {
+      .light {
+        flex: initial;
+      }
+    }
+    @media only screen and (max-width: 1000px) {
+      .light,
+      .dark {
+        padding: 16px;
+      }
+      .row,
+      .dark {
+        flex-direction: column;
+      }
+      ha-card {
+        margin: 0 auto;
+        width: 100%;
+        max-width: 400px;
+      }
+      pre {
+        margin: 16px auto;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-black-white-row": DemoBlackWhiteRow;
+  }
+}

gallery/src/demos/demo-ha-form.ts

@@ -1,12 +1,11 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
-import { LitElement, TemplateResult, css, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators";
 import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data";
-import "../../../src/components/ha-card";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import type { HaFormSchema } from "../../../src/components/ha-form/types";
 import "../../../src/components/ha-form/ha-form";
+import "../components/demo-black-white-row";
 
 const SCHEMAS: {
   title: string;
@@ -235,138 +234,30 @@ class DemoHaForm extends LitElement {
     return html`
       ${SCHEMAS.map((info, idx) => {
         const translations = info.translations || {};
-        const computeLabel = (schema) =>
-          translations[schema.name] || schema.name;
-        const computeError = (error) => translations[error] || error;
-
         return html`
-          <div class="row">
+          <demo-black-white-row .title=${info.title} .value=${this.data[idx]}>
-            <div class="content light">
+            ${["light", "dark"].map(
-              <ha-card .header=${info.title}>
+              (slot) => html`
-                <div class="card-content">
+                <ha-form
-                  <ha-form
+                  slot=${slot}
-                    .data=${this.data[idx]}
+                  .data=${this.data[idx]}
-                    .schema=${info.schema}
+                  .schema=${info.schema}
-                    .error=${info.error}
+                  .error=${info.error}
-                    .computeError=${computeError}
+                  .computeError=${(error) => translations[error] || error}
-                    .computeLabel=${computeLabel}
+                  .computeLabel=${(schema) =>
-                    @value-changed=${(e) => {
+                    translations[schema.name] || schema.name}
-                      this.data[idx] = e.detail.value;
+                  @value-changed=${(e) => {
-                      this.requestUpdate();
+                    this.data[idx] = e.detail.value;
-                    }}
+                    this.requestUpdate();
-                  ></ha-form>
+                  }}
-                </div>
+                ></ha-form>
-                <div class="card-actions">
+              `
-                  <mwc-button>Submit</mwc-button>
+            )}
-                </div>
+          </demo-black-white-row>
-              </ha-card>
-            </div>
-            <div class="content dark">
-              <ha-card .header=${info.title}>
-                <div class="card-content">
-                  <ha-form
-                    .data=${this.data[idx]}
-                    .schema=${info.schema}
-                    .error=${info.error}
-                    .computeError=${computeError}
-                    .computeLabel=${computeLabel}
-                    @value-changed=${(e) => {
-                      this.data[idx] = e.detail.value;
-                      this.requestUpdate();
-                    }}
-                  ></ha-form>
-                </div>
-                <div class="card-actions">
-                  <mwc-button>Submit</mwc-button>
-                </div>
-              </ha-card>
-              <pre>${JSON.stringify(this.data[idx], undefined, 2)}</pre>
-            </div>
-          </div>
         `;
       })}
     `;
   }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    this.shadowRoot!.querySelectorAll(".dark").forEach((el) => {
-      applyThemesOnElement(
-        el,
-        {
-          default_theme: "default",
-          default_dark_theme: "default",
-          themes: {},
-          darkMode: false,
-        },
-        "default",
-        { dark: true }
-      );
-    });
-  }
-
-  static styles = css`
-    .row {
-      display: flex;
-    }
-    .content {
-      padding: 50px 0;
-      background-color: var(--primary-background-color);
-    }
-    .light {
-      flex: 1;
-      padding-left: 50px;
-      padding-right: 50px;
-      box-sizing: border-box;
-    }
-    .light ha-card {
-      margin-left: auto;
-    }
-    .dark {
-      display: flex;
-      flex: 1;
-      padding-left: 50px;
-      box-sizing: border-box;
-      flex-wrap: wrap;
-    }
-    ha-card {
-      width: 400px;
-    }
-    pre {
-      width: 300px;
-      margin: 0 16px 0;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    .card-actions {
-      display: flex;
-      flex-direction: row-reverse;
-      border-top: none;
-    }
-    @media only screen and (max-width: 1500px) {
-      .light {
-        flex: initial;
-      }
-    }
-    @media only screen and (max-width: 1000px) {
-      .light,
-      .dark {
-        padding: 16px;
-      }
-      .row,
-      .dark {
-        flex-direction: column;
-      }
-      ha-card {
-        margin: 0 auto;
-        width: 100%;
-        max-width: 400px;
-      }
-      pre {
-        margin: 16px auto;
-      }
-    }
-  `;
 }
 
 declare global {