From 7befbacc80bd2213bf9b911ec3e5509ae96ffecd Mon Sep 17 00:00:00 2001
From: VandeurenGlenn <vandeurenglenn@gmail.com>
Date: Tue, 21 May 2024 19:05:51 +0200
Subject: [PATCH] feat: add supporting pane media queries

---
 .../internal/supporting-pane.ts               | 52 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/labs/layout/supportingpane/internal/supporting-pane.ts b/labs/layout/supportingpane/internal/supporting-pane.ts
index 0646636c04..a187a80f54 100644
--- a/labs/layout/supportingpane/internal/supporting-pane.ts
+++ b/labs/layout/supportingpane/internal/supporting-pane.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { html, LitElement } from 'lit';
+import { html, LitElement, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators';
 
 /**
@@ -12,11 +12,59 @@ import { property } from 'lit/decorators';
  */
 export class SupportingPane extends LitElement {
   @property({ type: String, reflect: true })
-  variant: 'compact' | 'medium' | 'expanded' = 'expanded';
+  variant: 'compact' | 'medium' | 'expanded' = 'compact';
 
   @property({ type: Boolean, reflect: true })
   left: boolean = false;
 
+  @property()
+  mediumQuery: string = '(min-width: 600px)';
+
+  @property()
+  expandedQuery: string = '(min-width: 840px)';
+
+  mediumMediaQuery: MediaQueryList;
+
+  expandedMediaQuery: MediaQueryList;
+
+  private _handleMediumChange({
+    matches,
+  }: MediaQueryList | MediaQueryListEvent) {
+    if (matches) this.variant = 'medium';
+  }
+
+  private _handleExpandedChange({
+    matches,
+  }: MediaQueryList | MediaQueryListEvent) {
+    if (matches) this.variant = 'expanded';
+  }
+
+  protected override firstUpdated() {
+    this.mediumMediaQuery = window.matchMedia(this.mediumQuery);
+    this.mediumMediaQuery.addEventListener('change', this._handleMediumChange);
+    this._handleMediumChange(this.mediumMediaQuery);
+
+    this.expandedMediaQuery = window.matchMedia(this.expandedQuery);
+    this.expandedMediaQuery.addEventListener(
+      'change',
+      this._handleExpandedChange
+    );
+    this._handleExpandedChange(this.expandedMediaQuery);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mediumMediaQuery.removeEventListener(
+      'change',
+      this._handleMediumChange
+    );
+
+    this.expandedMediaQuery.removeEventListener(
+      'change',
+      this._handleExpandedChange
+    );
+  }
+
   protected override render() {
     return html`
       <slot></slot>