Splitter component

src/components/common/context.ts

@@ -1,5 +1,6 @@
 import { createContext } from '@lit/context';
 import type { Ref } from 'lit/directives/ref.js';
+import type { IgcSplitterComponent } from '../../index.js';
 import type IgcCarouselComponent from '../carousel/carousel.js';
 import type { ChatState } from '../chat/chat-state.js';
 import type IgcTileManagerComponent from '../tile-manager/tile-manager.js';
@@ -24,9 +25,14 @@ const chatUserInputContext = createContext<ChatState>(
   Symbol('chat-user-input-context')
 );
 
+const splitterContext = createContext<IgcSplitterComponent>(
+  Symbol('splitter-context')
+);
+
 export {
   carouselContext,
   tileManagerContext,
   chatContext,
   chatUserInputContext,
+  splitterContext,
 };

src/components/common/definitions/defineAllComponents.ts

@@ -56,6 +56,7 @@ import IgcRangeSliderComponent from '../../slider/range-slider.js';
 import IgcSliderComponent from '../../slider/slider.js';
 import IgcSliderLabelComponent from '../../slider/slider-label.js';
 import IgcSnackbarComponent from '../../snackbar/snackbar.js';
+import IgcSplitterComponent from '../../splitter/splitter.js';
 import IgcStepComponent from '../../stepper/step.js';
 import IgcStepperComponent from '../../stepper/stepper.js';
 import IgcTabComponent from '../../tabs/tab.js';
@@ -134,6 +135,7 @@ const allComponents: IgniteComponent[] = [
   IgcCircularGradientComponent,
   IgcSnackbarComponent,
   IgcDateTimeInputComponent,
+  IgcSplitterComponent,
   IgcStepperComponent,
   IgcStepComponent,
   IgcTextareaComponent,

src/components/resize-container/resize-controller.ts

@@ -21,6 +21,7 @@ class ResizeController implements ReactiveController {
 
   private readonly _options: ResizeControllerConfiguration = {
     enabled: true,
+    updateTarget: true,
     layer: getDefaultLayer,
   };
 
@@ -166,7 +167,9 @@ class ResizeController implements ReactiveController {
     const parameters = { event, state: this._stateParameters };
     this._options.resize?.call(this._host, parameters);
     this._state.current = parameters.state.current;
-    this._updatePosition(this._isDeferred ? this._ghost : this._resizeTarget);
+    if (this._options.updateTarget) {
+      this._updatePosition(this._isDeferred ? this._ghost : this._resizeTarget);
+    }
   }
 
   private _handlePointerEnd(event: PointerEvent): void {
@@ -175,7 +178,9 @@ class ResizeController implements ReactiveController {
     this._options.end?.call(this._host, parameters);
     this._state.current = parameters.state.current;
 
-    parameters.state.commit?.() ?? this._updatePosition(this._resizeTarget);
+    if (this._options.updateTarget) {
+      parameters.state.commit?.() ?? this._updatePosition(this._resizeTarget);
+    }
     this.dispose();
   }
 

src/components/resize-container/types.ts

@@ -24,6 +24,7 @@ export type ResizeControllerConfiguration = {
   enabled?: boolean;
   ref?: Ref<HTMLElement>[];
   mode?: ResizeMode;
+  updateTarget?: boolean;
   deferredFactory?: ResizeGhostFactory;
   layer?: () => HTMLElement;
   /** Callback invoked at the start of a resize operation. */