Ha dialog header (#16485)

src/components/ha-dialog-header.ts

@@ -0,0 +1,81 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-dialog-header")
+export class HaDialogHeader extends LitElement {
+  protected render() {
+    return html`
+      <header class="header">
+        <div class="header-bar">
+          <section class="header-navigation-icon">
+            <slot name="navigationIcon"></slot>
+          </section>
+          <section class="header-title">
+            <slot name="title"></slot>
+          </section>
+          <section class="header-action-items">
+            <slot name="actionItems"></slot>
+          </section>
+        </div>
+        <slot></slot>
+      </header>
+    `;
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+        }
+        :host([show-border]) {
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+        }
+        .header-bar {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          padding: 4px;
+          box-sizing: border-box;
+        }
+        .header-title {
+          flex: 1;
+          font-size: 22px;
+          line-height: 28px;
+          font-weight: 400;
+          padding: 10px 4px;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        @media all and (min-width: 450px) and (min-height: 500px) {
+          .header-bar {
+            padding: 12px;
+          }
+        }
+        .header-navigation-icon {
+          flex: none;
+          min-width: 8px;
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+        }
+        .header-action-items {
+          flex: none;
+          min-width: 8px;
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-header": HaDialogHeader;
+  }
+}