From fe0571dee4c0a456658bfdafa5c51fcf42bbee57 Mon Sep 17 00:00:00 2001
From: VandeurenGlenn <vandeurenglenn@gmail.com>
Date: Mon, 12 Feb 2024 20:38:27 +0100
Subject: [PATCH] feat: add supporting pane

---
 .../internal/_supporting-pane.scss            | 61 +++++++++++++++++++
 .../internal/supporting-pane-styles.scss      | 10 +++
 .../internal/supporting-pane.ts               | 26 ++++++++
 labs/layout/supportingpane/supporting-pane.ts | 25 ++++++++
 4 files changed, 122 insertions(+)
 create mode 100644 labs/layout/supportingpane/internal/_supporting-pane.scss
 create mode 100644 labs/layout/supportingpane/internal/supporting-pane-styles.scss
 create mode 100644 labs/layout/supportingpane/internal/supporting-pane.ts
 create mode 100644 labs/layout/supportingpane/supporting-pane.ts

diff --git a/labs/layout/supportingpane/internal/_supporting-pane.scss b/labs/layout/supportingpane/internal/_supporting-pane.scss
new file mode 100644
index 0000000000..776f55ea02
--- /dev/null
+++ b/labs/layout/supportingpane/internal/_supporting-pane.scss
@@ -0,0 +1,61 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+
+@mixin styles() {
+  .host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+
+  slot {
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([variant='expanded']) {
+    flex-direction: row;
+  }
+
+  :host([variant='expanded']) slot[name='supporting'] {
+    max-width: var(--md-supporting-pane-width, 360px);
+    margin-left: 24px;
+  }
+
+  :host([variant='expanded'][left]) slot[name='supporting'] {
+    margin-right: 24px;
+  }
+
+  :host([variant='medium']) slot,
+  :host([variant='compact']) slot {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+  }
+
+  :host([variant='medium']) slot:not([name='supporting']) {
+    // max-height: calc(100% - (100% / 3));
+    bottom: calc(100% - (100% / 3));
+  }
+
+  :host([variant='medium']) slot[name='supporting'] {
+    top: calc(100% / 3);
+  }
+
+  :host([variant='compact']) slot:not([name='supporting']) {
+    bottom: calc(100% / 2);
+  }
+
+  :host([variant='compact']) slot[name='supporting'] {
+    top: calc(100% / 2);
+  }
+}
diff --git a/labs/layout/supportingpane/internal/supporting-pane-styles.scss b/labs/layout/supportingpane/internal/supporting-pane-styles.scss
new file mode 100644
index 0000000000..231e96566e
--- /dev/null
+++ b/labs/layout/supportingpane/internal/supporting-pane-styles.scss
@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './supporting-pane';
+// go/keep-sorted end
+
+@include supporting-pane.styles;
diff --git a/labs/layout/supportingpane/internal/supporting-pane.ts b/labs/layout/supportingpane/internal/supporting-pane.ts
new file mode 100644
index 0000000000..0646636c04
--- /dev/null
+++ b/labs/layout/supportingpane/internal/supporting-pane.ts
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators';
+
+/**
+ * The Supporting Pane Layout.
+ */
+export class SupportingPane extends LitElement {
+  @property({ type: String, reflect: true })
+  variant: 'compact' | 'medium' | 'expanded' = 'expanded';
+
+  @property({ type: Boolean, reflect: true })
+  left: boolean = false;
+
+  protected override render() {
+    return html`
+      <slot></slot>
+      <slot name="supporting"></slot>
+    `;
+  }
+}
diff --git a/labs/layout/supportingpane/supporting-pane.ts b/labs/layout/supportingpane/supporting-pane.ts
new file mode 100644
index 0000000000..e943937593
--- /dev/null
+++ b/labs/layout/supportingpane/supporting-pane.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { customElement } from 'lit/decorators.js';
+
+import { SupportingPane } from './internal/supporting-pane.js';
+import { styles } from './internal/supporting-pane-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-supporting-pane': MDSupportingPane;
+  }
+}
+
+/**
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-supporting-pane')
+export class MDSupportingPane extends SupportingPane {
+  static override styles = [styles];
+}