Merge pull request #6853 from IgniteUI/slider-input-order

Slider ivy input order independence

Author: zdrawku

CHANGELOG.md

@@ -122,6 +122,7 @@ All notable changes for each version of this project will be documented in this
     </igx-grid>
     ```
 - `IgxSlider`:
+    - **Breaking Change** - `isContinuous` - input has been deleted. The option is not supported anymore.
     - `primaryTicks` input was added. Which sets the number of primary ticks
     - `secondaryTicks` input was added. Which sets the number of secondary ticks.
     - `showTicks` input was added. Which show/hide all slider ticks and tick labels.
@@ -130,7 +131,6 @@ All notable changes for each version of this project will be documented in this
     - `ticksOrientation` input was added. Allows to change ticks orientation to top|bottom|mirror.
     - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
     - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
-    - `isContinuous` - input has been deleted. The option is not supported anymore.
     - `onValueChanged` - new output has been exposed. This event is emitted at the end of every slide interaction.
 
 - `IgxCarousel`:

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

@@ -580,15 +580,15 @@ describe('IgxSlider', () => {
             fixture.detectChanges();
 
             expect(sliderEl).toBeDefined();
-            let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
-            expect(activeThumb).not.toBeNull();
+            let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
+            expect(activeLabel).not.toBeNull();
 
             sliderEl.triggerEventHandler('pointerup', {pointerId: 1, preventDefault: <any>((e: any) => {})});
             await wait(slider.thumbLabelVisibilityDuration + 10);
             fixture.detectChanges();
 
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
-            expect(activeThumb).toBeNull();
+            activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
+            expect(activeLabel).toBeNull();
         });
 
         it('should be able to change thumbLabelVisibilityDuration', async() => {
@@ -599,20 +599,20 @@ describe('IgxSlider', () => {
             fixture.detectChanges();
 
             expect(sliderEl).toBeDefined();
-            let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
-            expect(activeThumb).not.toBeNull();
+            let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
+            expect(activeLabel).not.toBeNull();
 
             sliderEl.triggerEventHandler('pointerup', {pointerId: 1, preventDefault: <any>((e: any) => {})});
             await wait(750);
             fixture.detectChanges();
 
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
-            expect(activeThumb).not.toBeNull();
+            activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
+            expect(activeLabel).not.toBeNull();
 
             await wait(300);
             fixture.detectChanges();
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
-            expect(activeThumb).toBeNull();
+            activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
+            expect(activeLabel).toBeNull();
         });
 
         it('rendering of the slider should corresponds to the set labels', () => {
@@ -846,20 +846,22 @@ describe('IgxSlider', () => {
 
         it('labels should show/hide on pointer up/down', async() => {
             const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS));
+            fixture.detectChanges();
+
             sliderEl.triggerEventHandler('pointerdown', { pointerId: 1, preventDefault: <any>((e: any) => {})});
             await wait(100);
             fixture.detectChanges();
 
             expect(sliderEl).toBeDefined();
-            let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
-            expect(activeThumb).not.toBeNull();
+            let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
+            expect(activeLabel).not.toBeNull();
 
             sliderEl.triggerEventHandler('pointerup', { pointerId: 1, preventDefault: <any>((e: any) => {})});
             await wait(slider.thumbLabelVisibilityDuration + 10);
             fixture.detectChanges();
 
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
-            expect(activeThumb).toBeNull();
+            activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
+            expect(activeLabel).toBeNull();
         });
 
         it('should be able to change thumbLabelVisibilityDuration', async() => {
@@ -870,20 +872,20 @@ describe('IgxSlider', () => {
             fixture.detectChanges();
 
             expect(sliderEl).toBeDefined();
-            let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
-            expect(activeThumb).not.toBeNull();
+            let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
+            expect(activeLabel).not.toBeNull();
 
             sliderEl.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1}));
             await wait(750);
             fixture.detectChanges();
 
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
-            expect(activeThumb).not.toBeNull();
+            activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
+            expect(activeLabel).not.toBeNull();
 
             await wait(300);
             fixture.detectChanges();
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
-            expect(activeThumb).toBeNull();
+            activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
+            expect(activeLabel).toBeNull();
         });
 
         it('rendering of the slider should corresponds to the set labels', () => {
@@ -897,32 +899,32 @@ describe('IgxSlider', () => {
 
             UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
             fixture.detectChanges();
-            expect(fixture.componentInstance.label).toEqual({lower: 1, upper: 6});
+            expect(fixture.componentInstance.slider.value).toEqual({lower: 1, upper: 6});
             expect(slider.lowerLabel).toEqual('Tuesday');
 
             UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
             fixture.detectChanges();
-            expect(fixture.componentInstance.label).toEqual({lower: 2, upper: 6});
+            expect(fixture.componentInstance.slider.value).toEqual({lower: 2, upper: 6});
             expect(slider.lowerLabel).toEqual('Wednesday');
 
             UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
             fixture.detectChanges();
-            expect(fixture.componentInstance.label).toEqual({lower: 3, upper: 6});
+            expect(fixture.componentInstance.slider.value).toEqual({lower: 3, upper: 6});
             expect(slider.lowerLabel).toEqual('Thursday');
 
             UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
             fixture.detectChanges();
-            expect(fixture.componentInstance.label).toEqual({lower: 4, upper: 6});
+            expect(fixture.componentInstance.slider.value).toEqual({lower: 4, upper: 6});
             expect(slider.lowerLabel).toEqual('Friday');
 
             UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', toThumb.nativeElement, true);
             fixture.detectChanges();
-            expect(fixture.componentInstance.label).toEqual({lower: 4, upper: 5});
+            expect(fixture.componentInstance.slider.value).toEqual({lower: 4, upper: 5});
             expect(slider.upperLabel).toEqual('Saturday');
 
             UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', toThumb.nativeElement, true);
             fixture.detectChanges();
-            expect(fixture.componentInstance.label).toEqual({lower: 4, upper: 4});
+            expect(fixture.componentInstance.slider.value).toEqual({lower: 4, upper: 4});
             expect(slider.upperLabel).toEqual('Friday');
         });
 
@@ -1743,19 +1745,21 @@ class SliderWithLabelsComponent {
 
 @Component({
     template: `
-    <igx-slider [(ngModel)]='label' [type]="type"
-        [labels]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']">
+    <igx-slider
+    [labels]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"
+    [type]="type">
     </igx-slider> `
 })
 class RangeSliderWithLabelsComponent {
-    @ViewChild(IgxSliderComponent, { read: IgxSliderComponent, static: true }) public slider: IgxSliderComponent;
-    public label;
+    @ViewChild(IgxSliderComponent, { read: IgxSliderComponent, static: true })
+    public slider: IgxSliderComponent;
+
     public type = IgxSliderType.RANGE;
 }
 
 @Component({
     template: `
-    <igx-slider [(ngModel)]='label' [type]="type"
+    <igx-slider [type]="type"
         [labels]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']">
         <ng-template igxSliderThumbFrom let-value let-labels="labels">
             <span class="custom"> Lower {{ labels[value.lower] }}</span>

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

@@ -11,7 +11,8 @@ import {
     QueryList,
     ChangeDetectorRef,
     OnChanges,
-    NgZone
+    NgZone,
+    AfterContentInit
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { EditorProvider } from '../core/edit-provider';
@@ -64,6 +65,7 @@ export class IgxSliderComponent implements
     EditorProvider,
     OnInit,
     AfterViewInit,
+    AfterContentInit,
     OnChanges,
     OnDestroy {
 
@@ -82,6 +84,7 @@ export class IgxSliderComponent implements
     private _continuous = false;
     private _disabled = false;
     private _step = 1;
+    private _value: number | IRangeSliderValue = 0;
 
     // ticks
     private _primaryTicks = 0;
@@ -616,18 +619,11 @@ export class IgxSliderComponent implements
      */
     @Input()
     public set value(value: number | IRangeSliderValue) {
-        if (!this.isRange) {
-            this.upperValue = value as number - (value as number % this.step);
-        } else {
-            value = this.validateInitialValue(value as IRangeSliderValue);
-            this.upperValue = (value as IRangeSliderValue).upper;
-            this.lowerValue = (value as IRangeSliderValue).lower;
-        }
-
-        this._onChangeCallback(this.value);
-
         if (this._hasViewInit) {
+            this.setValue(value);
             this.positionHandlersAndUpdateTrack();
+        } else {
+            this._value = value;
         }
     }
 
@@ -992,6 +988,10 @@ export class IgxSliderComponent implements
         this._pMax = this.valueToFraction(this.upperBound) || 1;
     }
 
+    public ngAfterContentInit() {
+        this.setValue(this._value);
+    }
+
     /**
      * @hidden
      */
@@ -1413,6 +1413,18 @@ export class IgxSliderComponent implements
         return isSliderWithDifferentValue || isRangeWithOneDifferentValue;
     }
 
+    public setValue(value: number | IRangeSliderValue) {
+        if (!this.isRange) {
+            this.upperValue = value as number - (value as number % this.step);
+        } else {
+            value = this.validateInitialValue(value as IRangeSliderValue);
+            this.upperValue = (value as IRangeSliderValue).upper;
+            this.lowerValue = (value as IRangeSliderValue).lower;
+        }
+
+        this._onChangeCallback(this.value);
+    }
+
     private emitValueChanged(oldValue: number | IRangeSliderValue) {
         this.onValueChange.emit({ oldValue, value: this.value });
     }