chore(*): Add "resizable" input for pane to allow/disallow resizing.

Author: MKirova

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts

@@ -29,6 +29,12 @@ export class IgxSplitBarComponent {
     @Input()
     public pane!: IgxSplitterPaneComponent;
 
+    /**
+     * Sets/Gets the `SplitPaneComponent` sibling components associated with the current `SplitBarComponent`.
+     */
+    @Input()
+    public siblings!: Array<IgxSplitterPaneComponent>;
+
     /**
      * An event that is emitted whenever we start dragging the current `SplitBarComponent`.
      * @memberof SplitBarComponent
@@ -87,6 +93,10 @@ export class IgxSplitBarComponent {
     private startPoint!: number;
 
     public onDragStart(event: IDragStartEventArgs) {
+        if (this.resizeDisallowed) {
+            event.cancel = true;
+            return;
+        }
         this.startPoint = this.type === SplitterType.Horizontal ? event.startX : event.startY;
         this.moveStart.emit(this.pane);
     }
@@ -107,4 +117,9 @@ export class IgxSplitBarComponent {
         }
     }
 
+    protected get resizeDisallowed() {
+        const relatedTabs = [this.pane, ... this.siblings];
+        return !!relatedTabs.find(x => x.resizable === false);
+    }
+
 }

projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts

@@ -38,6 +38,13 @@ export class IgxSplitterPaneComponent {
     @Input()
     public maxSize!: string;
 
+    /**
+     * Sets/Gets whether pane is resizable.
+     */
+    @Input()
+    public resizable = true;
+
+
     /**
      * Sets/gets the `order` property of the current `IgxSplitterPaneComponent`.
      */

projects/igniteui-angular/src/lib/splitter/splitter.component.html

@@ -3,6 +3,7 @@
     <igx-splitter-bar *ngIf="!last" [style.order]="pane.order + 1"
                     [type]="type"
                     [pane]="pane"
+                    [siblings]='getSiblings(pane)'
                     (moveStart)="onMoveStart($event)"
                     (moving)="onMoving($event)">
     </igx-splitter-bar>

projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts

@@ -123,6 +123,15 @@ describe('IgxSplitter', () => {
         expect(pane2.size).toBe('100px');
     });
 
+    it('should not allow drag resize if resizable is set to false.', () => {
+        const pane1 =  splitter.panes.toArray()[0];
+        pane1.resizable = false;
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+        const args = {cancel: false};
+        splitterBarComponent.onDragStart(args);
+        expect(args.cancel).toBeTruthy();
+    });
+
 });
 
 @Component({

projects/igniteui-angular/src/lib/splitter/splitter.component.ts

@@ -163,4 +163,14 @@ export class IgxSplitterComponent implements AfterContentInit {
             k += 2;
         });
     }
+
+    public getSiblings(pane: IgxSplitterPaneComponent): Array<IgxSplitterPaneComponent> {
+        const panes = this.panes.toArray();
+        const index = panes.indexOf(pane);
+        const siblings = [panes[index + 1]];
+        if (index > 0) {
+            siblings.push(panes[index - 1]);
+        }
+        return siblings;
+    }
 }