feat(core/pane-layout): provide close/open event and default slot

.changeset/seven-coins-fly.md

@@ -0,0 +1,7 @@
+---
+'@siemens/ix-angular': patch
+'@siemens/ix': patch
+'@siemens/ix-vue': patch
+---
+
+feat(core/pane-layout): provide close/open event and default slot #1563

packages/angular/src/components.ts

@@ -1793,12 +1793,13 @@ export class IxPane {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['expandedChanged', 'variantChanged', 'borderlessChanged']);
+    proxyOutputs(this, this.el, ['expandedChanged', 'paneWillChange', 'variantChanged', 'borderlessChanged']);
   }
 }
 
 
 import type { ExpandedChangedEvent as IIxPaneExpandedChangedEvent } from '@siemens/ix';
+import type { PaneWillChangeEvent as IIxPanePaneWillChangeEvent } from '@siemens/ix';
 import type { VariantChangedEvent as IIxPaneVariantChangedEvent } from '@siemens/ix';
 import type { BorderlessChangedEvent as IIxPaneBorderlessChangedEvent } from '@siemens/ix';
 
@@ -1807,6 +1808,8 @@ export declare interface IxPane extends Components.IxPane {
    * This event is triggered when the pane either expands or contracts
    */
   expandedChanged: EventEmitter<CustomEvent<IIxPaneExpandedChangedEvent>>;
+
+  paneWillChange: EventEmitter<CustomEvent<IIxPanePaneWillChangeEvent>>;
   /**
    * This event is triggered when the variant of the pane is changed
    */

packages/core/component-doc.json

@@ -12366,6 +12366,26 @@
           "docs": "This event is triggered when the pane either expands or contracts",
           "docsTags": []
         },
+        {
+          "event": "paneWillChange",
+          "detail": "{ slot: string; action: \"close\" | \"open\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "PaneWillChangeEvent",
+            "resolved": "{ slot: string; action: \"close\" | \"open\"; }",
+            "references": {
+              "PaneWillChangeEvent": {
+                "location": "local",
+                "path": "src/components/pane/pane.tsx",
+                "id": "src/components/pane/pane.tsx::PaneWillChangeEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "variantChanged",
           "detail": "{ slot: string; variant: \"floating\" | \"inline\"; }",
@@ -17819,6 +17839,11 @@
       "docstring": "",
       "path": "src/components/pane/pane.tsx"
     },
+    "src/components/pane/pane.tsx::PaneWillChangeEvent": {
+      "declaration": "{\n  slot: string;\n  action: 'open' | 'close';\n}",
+      "docstring": "",
+      "path": "src/components/pane/pane.tsx"
+    },
     "src/components/pane/pane.tsx::VariantChangedEvent": {
       "declaration": "{\n  slot: string;\n  variant: 'floating' | 'inline';\n}",
       "docstring": "",

packages/core/src/components.d.ts

@@ -35,7 +35,7 @@ import { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 import { KeyValueLabelPosition } from "./components/key-value/key-value";
 import { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils";
 import { IxModalSize } from "./components/modal/modal";
-import { BorderlessChangedEvent, Composition, ExpandedChangedEvent, HideOnCollapseChangedEvent, SlotChangedEvent, VariantChangedEvent } from "./components/pane/pane";
+import { BorderlessChangedEvent, Composition, ExpandedChangedEvent, HideOnCollapseChangedEvent, PaneWillChangeEvent, SlotChangedEvent, VariantChangedEvent } from "./components/pane/pane";
 import { PushCardVariant } from "./components/push-card/push-card";
 import { SliderMarker } from "./components/slider/slider";
 import { SplitButtonVariant } from "./components/split-button/split-button";
@@ -78,7 +78,7 @@ export { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 export { KeyValueLabelPosition } from "./components/key-value/key-value";
 export { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils";
 export { IxModalSize } from "./components/modal/modal";
-export { BorderlessChangedEvent, Composition, ExpandedChangedEvent, HideOnCollapseChangedEvent, SlotChangedEvent, VariantChangedEvent } from "./components/pane/pane";
+export { BorderlessChangedEvent, Composition, ExpandedChangedEvent, HideOnCollapseChangedEvent, PaneWillChangeEvent, SlotChangedEvent, VariantChangedEvent } from "./components/pane/pane";
 export { PushCardVariant } from "./components/push-card/push-card";
 export { SliderMarker } from "./components/slider/slider";
 export { SplitButtonVariant } from "./components/split-button/split-button";
@@ -3634,6 +3634,7 @@ declare global {
     };
     interface HTMLIxPaneElementEventMap {
         "expandedChanged": ExpandedChangedEvent;
+        "paneWillChange": PaneWillChangeEvent;
         "variantChanged": VariantChangedEvent;
         "borderlessChanged": BorderlessChangedEvent;
         "hideOnCollapseChanged": HideOnCollapseChangedEvent;
@@ -5955,6 +5956,7 @@ declare namespace LocalJSX {
          */
         "onExpandedChanged"?: (event: IxPaneCustomEvent<ExpandedChangedEvent>) => void;
         "onHideOnCollapseChanged"?: (event: IxPaneCustomEvent<HideOnCollapseChangedEvent>) => void;
+        "onPaneWillChange"?: (event: IxPaneCustomEvent<PaneWillChangeEvent>) => void;
         "onSlotChanged"?: (event: IxPaneCustomEvent<SlotChangedEvent>) => void;
         /**
           * This event is triggered when the variant of the pane is changed

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

@@ -28,6 +28,10 @@ export type ExpandedChangedEvent = {
   slot: string;
   expanded: boolean;
 };
+export type PaneWillChangeEvent = {
+  slot: string;
+  action: 'open' | 'close';
+};
 export type SlotChangedEvent = {
   slot: string;
   newSlot: string;
@@ -122,6 +126,11 @@ export class Pane {
    */
   @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;
 
+  /*
+   * This event is triggered when the pane either expands or contracts
+   */
+  @Event() paneWillChange!: EventEmitter<PaneWillChangeEvent>;
+
   /**
    * This event is triggered when the variant of the pane is changed
    */
@@ -493,6 +502,20 @@ export class Pane {
     });
   }
 
+  private togglePane() {
+    const action = this.expanded ? 'close' : 'open';
+    const event = this.paneWillChange.emit({
+      slot: this.currentSlot ?? '',
+      action,
+    });
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    this.expanded = !this.expanded;
+  }
+
   @Watch('parentHeightPx')
   @Watch('parentWidthPx')
   onParentSizeChange() {
@@ -643,9 +666,7 @@ export class Pane {
                   : this.minimizeIcon
               }
               ghost
-              onClick={() => {
-                this.expanded = !this.expanded;
-              }}
+              onClick={() => this.togglePane()}
               aria-controls={`pane-${this.composition}`}
             />
             <span

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

@@ -31,3 +31,36 @@ 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('paneWillChange', (event) => {
+      if (event.detail.action === 'open') {
+        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);
+});

packages/vue/src/components.ts

@@ -748,6 +748,7 @@ export const IxPane = /*@__PURE__*/ defineContainer<JSX.IxPane>('ix-pane', defin
   'ignoreLayoutSettings',
   'isMobile',
   'expandedChanged',
+  'paneWillChange',
   'variantChanged',
   'borderlessChanged',
   'hideOnCollapseChanged',