fix(splitter): Sizing panes correctly with minSize when the browser is shrinked (#15517)

Author: IvanKitanov17

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

@@ -21,7 +21,7 @@ describe('IgxSplitter', () => {
 }).compileComponents()));
     let fixture: ComponentFixture<SplitterTestComponent>;
     let splitter: IgxSplitterComponent;
-    
+
     beforeEach(waitForAsync(() => {
         fixture = TestBed.createComponent(SplitterTestComponent);
         fixture.detectChanges();
@@ -462,6 +462,75 @@ describe('IgxSplitter pane collapse', () => {
     });
 });
 
+describe('IgxSplitter resizing with minSize and browser window is shrinked', () => {
+    configureTestSuite();
+    beforeAll(waitForAsync(() => TestBed.configureTestingModule({
+        imports: [
+            SplitterMinSiezComponent
+        ]
+    }).compileComponents()));
+
+    let fixture; let splitter;
+    beforeEach(waitForAsync(() => {
+        fixture = TestBed.createComponent(SplitterMinSiezComponent);
+        fixture.detectChanges();
+        splitter = fixture.componentInstance.splitter;
+    }));
+
+    it('should set the correct sizes when the user drags one pane to the end of another', () => {
+        const pane1 = splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+        const minSize = parseInt(pane1.minSize);
+        spyOn(splitter, 'onMoveEnd').and.callThrough();
+
+        pane1.size = (splitter.getTotalSize() - parseInt(pane2.size)) + 'px';
+        fixture.detectChanges();
+
+        splitterBarComponent.moveStart.emit(pane1);
+        fixture.detectChanges();
+        splitterBarComponent.movingEnd.emit(splitter.getTotalSize() -minSize);
+        fixture.detectChanges();
+
+        splitter.elementRef.nativeElement.style.width = '500px';
+        pane2.size = (splitter.getTotalSize() - minSize) + 'px';
+        fixture.detectChanges();
+
+        splitterBarComponent.moveStart.emit(pane1);
+        fixture.detectChanges();
+        splitterBarComponent.movingEnd.emit(-400);
+        fixture.detectChanges();
+
+        const isFullSize = pane1.size === '100%' || pane1.size === (splitter.getTotalSize() + 'px');
+
+        expect(splitter.onMoveEnd).toHaveBeenCalled();
+        expect(isFullSize).toBeTruthy();
+    });
+});
+
+@Component({
+    template: `
+    <igx-splitter>
+    <igx-splitter-pane minSize="200px">
+        <div>
+           Pane 1
+        </div>
+    </igx-splitter-pane>
+    <igx-splitter-pane size="200px">
+        <div>
+            Pane 2
+         </div>
+    </igx-splitter-pane>
+</igx-splitter>
+    `,
+    standalone: true,
+    imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
+})
+export class SplitterMinSiezComponent {
+    @ViewChild(IgxSplitterComponent, { static: true })
+    public splitter: IgxSplitterComponent;
+}
+
 @Component({
     template: `
     <igx-splitter [type]="type">

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

@@ -239,7 +239,15 @@ export class IgxSplitterComponent implements AfterContentInit {
     }
 
     public onMoveEnd(delta: number) {
-        const [ paneSize, siblingSize ] = this.calcNewSizes(delta);
+        let [ paneSize, siblingSize ] = this.calcNewSizes(delta);
+
+        if (paneSize + siblingSize > this.getTotalSize() && delta < 0) {
+            paneSize = this.getTotalSize();
+            siblingSize = 0;
+        } else if(paneSize + siblingSize > this.getTotalSize() && delta > 0) {
+            paneSize = 0;
+            siblingSize = this.getTotalSize();
+        }
 
         if (this.pane.isPercentageSize) {
             // handle % resizes