feat(core/pane-layout): emit expand change only on user input and pro…

…vide default slot (#1563)

Co-authored-by: Lukas Maurer <[email protected]>

.changeset/seven-coins-fly.md

@@ -0,0 +1,7 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix': minor
+'@siemens/ix-vue': minor
+---
+
+Update expandedChange event to trigger only on user interactions and add unnamed default slot for ix-pane-layout content.

packages/core/src/components/pane-layout/pane-layout.tsx

@@ -31,7 +31,7 @@ import { matchBreakpoint } from '../utils/breakpoints';
   shadow: true,
 })
 export class Panes {
-  @Element() hostElement: HTMLIxPaneLayoutElement;
+  @Element() hostElement!: HTMLIxPaneLayoutElement;
 
   /**
    * Choose the layout of the panes.
@@ -59,7 +59,7 @@ export class Panes {
     floating: boolean;
   }> = [];
 
-  private observer: MutationObserver;
+  private observer?: MutationObserver;
 
   get currentPanes() {
     return this.hostElement.querySelectorAll('ix-pane');
@@ -179,30 +179,30 @@ export class Panes {
 
       if (isLeft) {
         if (leftCount) {
-          pane.slot = undefined;
+          pane.slot = '';
           return;
         }
         leftCount++;
       } else if (isRight) {
         if (rightCount) {
-          pane.slot = undefined;
+          pane.slot = '';
           return;
         }
         rightCount++;
       } else if (isTop) {
         if (topCount) {
-          pane.slot = undefined;
+          pane.slot = '';
           return;
         }
         topCount++;
       } else if (isBottom) {
         if (bottomCount) {
-          pane.slot = undefined;
+          pane.slot = '';
           return;
         }
         bottomCount++;
       } else {
-        pane.slot = undefined;
+        pane.slot = '';
         return;
       }
 
@@ -342,6 +342,7 @@ export class Panes {
                     onClick={() => this.closeFloatingPanes()}
                   >
                     <slot name="content"></slot>
+                    <slot></slot>
                   </div>
                   <div
                     key="bottom"
@@ -392,6 +393,7 @@ export class Panes {
                     onClick={() => this.closeFloatingPanes()}
                   >
                     <slot name="content"></slot>
+                    <slot></slot>
                   </div>
                   <div
                     key="right"
@@ -435,6 +437,7 @@ export class Panes {
               onClick={() => this.closeFloatingPanes()}
             >
               <slot name="content"></slot>
+              <slot></slot>
             </div>
             <div
               key="right"

packages/core/src/components/pane/pane.tsx

@@ -483,14 +483,15 @@ export class Pane {
     });
   }
 
-  @Watch('expanded')
-  onExpandedChange() {
-    this.onSizeChange();
-
-    this.expandedChanged.emit({
+  private dispatchExpandedChangedEvent() {
+    const event = this.expandedChanged.emit({
       slot: this.currentSlot ?? '',
-      expanded: this.expanded,
+      expanded: !this.expanded,
     });
+
+    if (!event.defaultPrevented) {
+      this.expanded = !this.expanded;
+    }
   }
 
   @Watch('parentHeightPx')
@@ -536,6 +537,7 @@ export class Pane {
     }
   }
 
+  @Watch('expanded')
   @Watch('size')
   onSizeChange() {
     if (this.expanded) {
@@ -643,9 +645,7 @@ export class Pane {
                   : this.minimizeIcon
               }
               ghost
-              onClick={() => {
-                this.expanded = !this.expanded;
-              }}
+              onClick={() => this.dispatchExpandedChangedEvent()}
               aria-controls={`pane-${this.composition}`}
             />
             <span

packages/core/src/components/pane/test/panes.ct.ts

@@ -31,3 +31,34 @@ test('expanded', async ({ mount, page }) => {
   const title = page.locator('h1');
   await expect(title).toBeVisible();
 });
+
+test('prevent pane expansion', async ({ mount, page }) => {
+  await mount(`
+    <ix-pane
+      heading="LEFT"
+      composition="left"
+      variant="inline"
+      icon="star"
+      expanded="false"
+    >
+      <h1>Test Heading</h1>
+    </ix-pane>
+  `);
+
+  const pane = page.locator('ix-pane');
+
+  await page.evaluate(() => {
+    const paneElement = document.querySelector('ix-pane');
+    paneElement?.addEventListener('expandedChanged', (event: Event) => {
+      event.preventDefault();
+    });
+  });
+
+  const iconButton = page.locator('ix-icon-button');
+  await iconButton.click();
+
+  const isExpanded = await pane.evaluate(
+    (el: HTMLIxPaneElement) => el.expanded
+  );
+  expect(isExpanded).toBe(false);
+});