feat(splitter): implement splitter events

Author: MonikaKirkova

src/components/splitter/splitter-bar.ts

@@ -139,14 +139,14 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
     });
 
     addKeybindings(this)
-      .set(arrowUp, this.resizePanes)
-      .set(arrowDown, this.resizePanes)
-      .set(arrowLeft, this.resizePanes)
-      .set(arrowRight, this.resizePanes)
-      .set([ctrlKey, arrowUp], () => this._handleExpanderClick(true))
-      .set([ctrlKey, arrowDown], () => this._handleExpanderClick(false))
-      .set([ctrlKey, arrowLeft], () => this._handleExpanderClick(true))
-      .set([ctrlKey, arrowRight], () => this._handleExpanderClick(false));
+      .set(arrowUp, this._handleResizePanes)
+      .set(arrowDown, this._handleResizePanes)
+      .set(arrowLeft, this._handleResizePanes)
+      .set(arrowRight, this._handleResizePanes)
+      .set([ctrlKey, arrowUp], this._handleExpandPanes)
+      .set([ctrlKey, arrowDown], this._handleExpandPanes)
+      .set([ctrlKey, arrowLeft], this._handleExpandPanes)
+      .set([ctrlKey, arrowRight], this._handleExpandPanes);
     //addThemingController(this, all);
   }
 
@@ -157,7 +157,7 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
     });
   }
 
-  private resizePanes(event: KeyboardEvent) {
+  private _handleResizePanes(event: KeyboardEvent) {
     if (this._resizeDisallowed) {
       return false;
     }
@@ -185,6 +185,29 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
     return true;
   }
 
+  private _handleExpandPanes(event: KeyboardEvent) {
+    if (this._splitter?.nonCollapsible) {
+      return;
+    }
+    const { prevButtonHidden, nextButtonHidden } =
+      this._getExpanderHiddenState();
+
+    if (
+      ((event.key === arrowUp && this._orientation === 'vertical') ||
+        (event.key === arrowLeft && this._orientation === 'horizontal')) &&
+      !prevButtonHidden
+    ) {
+      this._handleExpanderClick(true);
+    }
+    if (
+      ((event.key === arrowDown && this._orientation === 'vertical') ||
+        (event.key === arrowRight && this._orientation === 'horizontal')) &&
+      !nextButtonHidden
+    ) {
+      this._handleExpanderClick(false);
+    }
+  }
+
   private _createSiblingPaneMutationController(pane: IgcSplitterPaneComponent) {
     createMutationController(pane, {
       callback: () => {
@@ -215,6 +238,7 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
 
     const prevSibling = this._siblingPanes[0]!;
     const nextSibling = this._siblingPanes[1]!;
+
     let target: IgcSplitterPaneComponent;
     if (start) {
       // if prev is clicked when next pane is hidden, show next pane, else hide prev pane.
@@ -224,15 +248,23 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
       target = prevSibling.collapsed ? prevSibling : nextSibling;
     }
     target.toggle();
+    target.emitEvent('igcToggle', { detail: target });
+  }
+
+  private _getExpanderHiddenState() {
+    const [prev, next] = this._siblingPanes;
+    return {
+      prevButtonHidden: !!(prev?.collapsed && !next?.collapsed),
+      nextButtonHidden: !!(next?.collapsed && !prev?.collapsed),
+    };
   }
 
   private _renderBarControls() {
     if (this._splitter?.nonCollapsible) {
       return nothing;
     }
-    const siblings = this._siblingPanes;
-    const prevButtonHidden = siblings[0]?.collapsed && !siblings[1]?.collapsed;
-    const nextButtonHidden = siblings[1]?.collapsed && !siblings[0]?.collapsed;
+    const { prevButtonHidden, nextButtonHidden } =
+      this._getExpanderHiddenState();
     return html`
       <div
         part="expander-start"

src/components/splitter/splitter-pane.ts

@@ -4,14 +4,22 @@ import { property, query } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import { splitterContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import type { SplitterOrientation } from '../types.js';
 import type IgcSplitterComponent from './splitter.js';
 import IgcSplitterBarComponent from './splitter-bar.js';
 import { styles } from './themes/splitter-pane.css.js';
 
-export default class IgcSplitterPaneComponent extends LitElement {
+export interface IgcSplitterPaneComponentEventMap {
+  igcToggle: CustomEvent<IgcSplitterPaneComponent>;
+}
+export default class IgcSplitterPaneComponent extends EventEmitterMixin<
+  IgcSplitterPaneComponentEventMap,
+  Constructor<LitElement>
+>(LitElement) {
   public static readonly tagName = 'igc-splitter-pane';
-  public static override styles = [styles];
+  public static styles = [styles];
 
   /* blazorSuppress */
   public static register() {
@@ -200,13 +208,21 @@ export default class IgcSplitterPaneComponent extends LitElement {
 
     this._prevPaneInitialSize = this._rectSize;
     this._nextPaneInitialSize = this._nextPane._rectSize;
+
+    this._splitter!.emitEvent('igcResizeStart', {
+      detail: { pane: this, sibling: this._nextPane },
+    });
   }
 
   private _handleMoving(event: CustomEvent<number>) {
     const [paneSize, siblingSize] = this._calcNewSizes(event.detail);
 
     this._prevPane.size = `${paneSize}px`;
     this._nextPane.size = `${siblingSize}px`;
+
+    this._splitter!.emitEvent('igcResizing', {
+      detail: { pane: this, sibling: this._nextPane },
+    });
   }
 
   private _handleMovingEnd(event: CustomEvent<number>) {
@@ -238,6 +254,10 @@ export default class IgcSplitterPaneComponent extends LitElement {
         totalSize
       );
     });
+
+    this._splitter!.emitEvent('igcResizeEnd', {
+      detail: { pane: this, sibling: this._nextPane },
+    });
   }
 
   private _adjustPaneSize(

src/components/splitter/splitter.ts

@@ -5,10 +5,23 @@ import { splitterContext } from '../common/context.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import type { SplitterOrientation } from '../types.js';
 import IgcSplitterPaneComponent from './splitter-pane.js';
 import { styles } from './themes/splitter.base.css.js';
 
+export interface IgcSplitterBarResizeEventArgs {
+  pane: IgcSplitterPaneComponent;
+  sibling: IgcSplitterPaneComponent;
+}
+
+export interface IgcSplitterComponentEventMap {
+  igcResizeStart: CustomEvent<IgcSplitterBarResizeEventArgs>;
+  igcResizing: CustomEvent<IgcSplitterBarResizeEventArgs>;
+  igcResizeEnd: CustomEvent<IgcSplitterBarResizeEventArgs>;
+}
+
 /**
  * The Splitter component provides a framework for a simple layout, splitting the view horizontally or vertically
  * into multiple smaller resizable and collapsible areas.
@@ -19,9 +32,12 @@ import { styles } from './themes/splitter.base.css.js';
  *
  * @csspart ... - ... .
  */
-export default class IgcSplitterComponent extends LitElement {
+export default class IgcSplitterComponent extends EventEmitterMixin<
+  IgcSplitterComponentEventMap,
+  Constructor<LitElement>
+>(LitElement) {
   public static readonly tagName = 'igc-splitter';
-  public static override styles = [styles];
+  public static styles = [styles];
 
   /* blazorSuppress */
   public static register() {