Merge branch 'master' into mkirova/fix-6701-master

Author: ChronosSF

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/directives/autocomplete/autocomplete.directive.spec.ts

@@ -682,6 +682,13 @@ describe('IgxAutocomplete', () => {
             expect(dropDownAny.scrollContainer.getBoundingClientRect().width)
                 .toEqual(group.element.nativeElement.getBoundingClientRect().width);
         });
+        it('Should apply width to dropdown list if set', () => {
+            UIInteractions.sendInput(input, 's', fixture);
+            fixture.componentInstance.ddWidth = '600px';
+            fixture.detectChanges();
+            const dropDownAny = dropDown as any;
+            expect(dropDownAny.scrollContainer.getBoundingClientRect().width).toEqual(600);
+        });
         it('Should render aria attributes properly', fakeAsync(() => {
             expect(input.nativeElement.attributes['autocomplete'].value).toEqual('off');
             expect(input.nativeElement.attributes['role'].value).toEqual('combobox');
@@ -853,7 +860,7 @@ describe('IgxAutocomplete', () => {
         <label igxLabel for="towns">Towns</label>
         <igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
     </igx-input-group>
-    <igx-drop-down #townsPanel>
+    <igx-drop-down #townsPanel [width]="ddWidth">
         <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
             {{town}}
         </igx-drop-down-item>
@@ -866,6 +873,7 @@ class AutocompleteComponent {
     @ViewChild(IgxDropDownComponent, { static: true }) public dropDown: IgxDropDownComponent;
     townSelected;
     public towns;
+    public ddWidth = null;
     settings: AutocompleteOverlaySettings = null;
     onItemSelected(args) { }
 

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -277,7 +277,8 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         if (this.disabled || !this.collapsed) {
             return;
         }
-        this.target.width = this.parentElement.clientWidth + 'px';
+        // if no drop-down width is set, the drop-down will be as wide as the autocomplete input;
+        this.target.width = this.target.width || (this.parentElement.clientWidth + 'px');
         this.target.open(this.settings);
         this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
         this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem);

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.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.spec.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 });
     }

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

@@ -1717,7 +1717,7 @@ export class GridFunctions {
     }
 
     public static simulateCellKeydown(cellComp: IgxGridCellComponent, keyName: string,
-            altKey = false, shiftKey = false, ctrlKey = false) {
+        altKey = false, shiftKey = false, ctrlKey = false) {
         const keyboardEvent = new KeyboardEvent('keydown', {
             key: keyName,
             shiftKey: shiftKey,
@@ -1729,7 +1729,7 @@ export class GridFunctions {
     }
 
     public static simulateGroupRowKeydown(rowComp: IgxGridGroupByRowComponent, keyName: string,
-                                        altKey = false, shiftKey = false, ctrlKey = false) {
+        altKey = false, shiftKey = false, ctrlKey = false) {
         const keyboardEvent = new KeyboardEvent('keydown', {
             key: keyName,
             shiftKey: shiftKey,