Sizing panes corectly with minSize and when the browser is shrinked (#15421)

* fix(splitter): Sizing panes corectly with minSize and the browser is shrinked

* fix(tests): providing bg locale for date-util test spec

---------

Co-authored-by: Ivan Kitanov <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Vasya Kacheshmarova <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 5 people

projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts

@@ -1,13 +1,19 @@
 import { DateTimeUtil } from './date-time.util';
 import { DatePart, DatePartInfo } from '../../directives/date-time-editor/date-time-editor.common';
 import { DataType } from '../../data-operations/data-util';
+import localeBg from "@angular/common/locales/bg";
+import { registerLocaleData } from '@angular/common';
+
 
 const reduceToDictionary = (parts: DatePartInfo[]) => parts.reduce((obj, x) => {
     obj[x.type] = x;
     return obj;
 }, {});
 
 describe(`DateTimeUtil Unit tests`, () => {
+
+    registerLocaleData(localeBg);
+
     describe('Date Time Parsing', () => {
         it('should correctly parse all date time parts (base)', () => {
             let result = DateTimeUtil.parseDateTimeFormat('dd/MM/yyyy HH:mm:ss:SS a');

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,74 @@ 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>
+    `,
+    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