Merge branch '7.1.x' into astaev/fix-3332

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -1293,7 +1293,7 @@ describe('IgxGrid - Filtering actions', () => {
         tick();
         fix.detectChanges();
 
-        const firstMonth = calendar.queryAll(By.css('.igx-calendar__month'))[0];
+        const firstMonth = calendar.queryAll(By.css(`[class*='igx-calendar__month']`))[0];
         firstMonth.nativeElement.click();
         tick();
         fix.detectChanges();

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

@@ -24,7 +24,7 @@ describe('IgxSlider', () => {
     }));
 
     describe('Base tests', () => {
-        configureTestSuite();
+    configureTestSuite();
         let fixture: ComponentFixture<SliderInitializeTestComponent>;
         let slider: IgxSliderComponent;
 
@@ -152,7 +152,7 @@ describe('IgxSlider', () => {
 
             slider.value = 45;
             fixture.detectChanges();
-            expect(fixture.componentInstance.slider.value).toBe(20);
+            expect(fixture.componentInstance.slider.value).toBe(40);
         });
 
         it('should not set upper value to outside bounds slider when slider is RANGE', () => {
@@ -178,7 +178,7 @@ describe('IgxSlider', () => {
 
             fixture.detectChanges();
             expect(slider.value.lower).toBe(20);
-            expect(slider.value.upper).toBe(30);
+            expect(slider.value.upper).toBe(40);
         });
 
         it('should not set value upper when is less than lower value when slider is RANGE', () => {
@@ -227,7 +227,7 @@ describe('IgxSlider', () => {
                 upper: 30
             };
             fixture.detectChanges();
-            expect(slider.value.lower).toBe(20);
+            expect(slider.value.lower).toBe(10);
             expect(slider.value.upper).toBe(30);
         });
 
@@ -321,6 +321,28 @@ describe('IgxSlider', () => {
             expect(Math.round(slider.value as number)).toBe(60);
         }));
 
+        it('Value should remain to the max one if it exceeds.', () => {
+            const fix = TestBed.createComponent(SliderMinMaxComponent);
+            fix.detectChanges();
+
+            const sliderRef = fix.componentInstance.slider;
+            let expectedVal = 150;
+            let expectedMax = 300;
+
+            expect(sliderRef.value).toEqual(expectedVal);
+            expect(sliderRef.maxValue).toEqual(expectedMax);
+
+            expectedVal = 250;
+            expectedMax = 200;
+            sliderRef.maxValue = expectedMax;
+            sliderRef.value = expectedVal;
+            fix.detectChanges();
+
+            expect(sliderRef.value).not.toEqual(expectedVal);
+            expect(sliderRef.value).toEqual(expectedMax);
+            expect(sliderRef.maxValue).toEqual(expectedMax);
+        });
+
         function panRight(element, elementHeight, elementWidth, duration) {
             const panOptions = {
                 deltaX: elementWidth * 0.6,
@@ -628,6 +650,27 @@ describe('IgxSlider', () => {
         expect((slider.value as IRangeSliderValue).upper).toBe(7);
     });
 
+    it('Lower and upper bounds should not exceed min and max values', () => {
+        const fix = TestBed.createComponent(SliderTestComponent);
+        fix.detectChanges();
+
+        const componentInst = fix.componentInstance;
+        const slider = componentInst.slider;
+        const expectedMinVal = 0;
+        const expectedMaxVal = 10;
+
+        expect(slider.minValue).toEqual(expectedMinVal);
+        expect(slider.maxValue).toEqual(expectedMaxVal);
+
+        const expectedLowerBound = -1;
+        const expectedUpperBound = 11;
+        slider.lowerBound = expectedLowerBound;
+        slider.upperBound = expectedUpperBound;
+
+        expect(slider.lowerBound).toEqual(expectedMinVal);
+        expect(slider.upperBound).toEqual(expectedMaxVal);
+    });
+
     describe('EditorProvider', () => {
         it('Should return correct edit element (single)', () => {
             const fixture = TestBed.createComponent(SliderInitializeTestComponent);

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

@@ -158,7 +158,6 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
     @ViewChild('thumbTo')
     private thumbTo: ElementRef;
 
-    private _minValue = 0;
 
     // Measures & Coordinates
     private width = 0;
@@ -173,6 +172,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
     // From/upperValue in percent values
     private hasViewInit = false;
     private timer;
+    private _minValue = 0;
     private _maxValue = 100;
     private _lowerBound?: number;
     private _upperBound?: number;
@@ -306,7 +306,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
             return;
         }
 
-        this._lowerBound = value;
+        this._lowerBound = this.valueInRange(value, this.minValue, this.maxValue);
     }
 
     /**
@@ -342,7 +342,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
             return;
         }
 
-        this._upperBound = value;
+        this._upperBound = this.valueInRange(value, this.minValue, this.maxValue);
     }
 
     /**
@@ -370,9 +370,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
      *```
      */
     public set lowerValue(value: number) {
-        if (value < this.lowerBound || this.upperBound < value) {
-            return;
-        }
+        value = this.valueInRange(value, this.lowerBound, this.upperBound);
 
         if (this.isRange && value > this.upperValue) {
             return;
@@ -406,9 +404,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
      *```
      */
     public set upperValue(value: number) {
-        if (value < this.lowerBound || this.upperBound < value) {
-            return;
-        }
+        value = this.valueInRange(value, this.lowerBound, this.upperBound);
 
         if (this.isRange && value < this.lowerValue) {
             return;
@@ -725,6 +721,10 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
         );
     }
 
+    private valueInRange(value, min = 0, max = 100) {
+        return Math.max(Math.min(value, max), min);
+    }
+
     private invalidateValue() {
         if (!this.isRange) {
             if (this.value >= this._lowerBound && this.value <= this._upperBound) {
@@ -885,11 +885,11 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
     }
 
     private setPointerPercent() {
-        this.pPointer = this.limit(this.toFixed(this.xPointer / this.width));
+        this.pPointer = this.valueInRange(this.toFixed(this.xPointer / this.width), this.pMin, this.pMax);
     }
 
     private valueToFraction(value: number) {
-        return this.limit((value - this.minValue) / (this.maxValue - this.minValue));
+        return this.valueInRange((value - this.minValue) / (this.maxValue - this.minValue), this.pMin, this.pMax);
     }
 
     private fractionToValue(fraction: number): number {
@@ -899,14 +899,6 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider,
         return (max - min) * fraction + min;
     }
 
-    private fractionToPercent(fraction: number): number {
-        return this.toFixed(fraction * 100);
-    }
-
-    private limit(num: number): number {
-        return Math.max(this.pMin, Math.min(num, this.pMax));
-    }
-
     private updateTrack() {
         const fromPosition = this.valueToFraction(this.lowerValue);
         const toPosition = this.valueToFraction(this.upperValue);