Merge branch 'master' into sass

Author: simeonoff

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

@@ -0,0 +1,2 @@
+export * from './slider.component';
+export * from './slider.common';

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

@@ -0,0 +1,59 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Template directive that allows you to set a custom template representing the lower label value of the {@link IgxSliderComponent}
+ *
+ *```html
+ * <igx-slider>
+ *  <ng-template igxSliderThumbFrom let-value let-labels>{{value}}</ng-template>
+ * </igx-slider>
+ * ```
+ *
+ * @context {@link IgxSliderComponent.context}
+ */
+@Directive({
+    selector: '[igxSliderThumbFrom]'
+})
+export class IgxThumbFromTemplateDirective {}
+
+/**
+ * Template directive that allows you to set a custom template representing the upper label value of the {@link IgxSliderComponent}
+ *
+ * ```html
+ * <igx-slider>
+ *  <ng-template igxSliderThumbTo let-value let-labels>{{value}}</ng-template>
+ * </igx-slider>
+ * ```
+ *
+ * @context {@link IgxSliderComponent.context}
+ */
+@Directive({
+    selector: '[igxSliderThumbTo]'
+})
+export class IgxThumbToTemplateDirective {}
+
+export enum SliderType {
+    /**
+     * Slider with single thumb.
+     */
+    SLIDER,
+    /**
+     *  Range slider with multiple thumbs, that can mark the range.
+     */
+    RANGE
+}
+
+export enum SliderHandle {
+    FROM,
+    TO
+}
+
+export interface IRangeSliderValue {
+    lower: number;
+    upper: number;
+}
+
+export interface ISliderValueChangeEventArgs {
+    oldValue: number | IRangeSliderValue;
+    value: number | IRangeSliderValue;
+}

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

@@ -1,10 +1,11 @@
 import { Component, ViewChild } from '@angular/core';
 import { async, TestBed, ComponentFixture, fakeAsync, tick, flush } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { IgxSliderComponent, IgxSliderModule, IRangeSliderValue, SliderType } from './slider.component';
+import { IgxSliderComponent, IgxSliderModule } from './slider.component';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { configureTestSuite } from '../test-utils/configure-suite';
+import { SliderType, IRangeSliderValue } from './slider.common';
 
 declare var Simulator: any;
 
@@ -724,7 +725,7 @@ export class SliderMinMaxComponent {
                     </igx-slider>
                 </div>`
 })
-class SliderTestComponent {
+export class SliderTestComponent {
     @ViewChild(IgxSliderComponent, { static: true }) public slider: IgxSliderComponent;
 
     minValue = 0;

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

@@ -3,7 +3,6 @@ import {
     AfterViewInit, Component, ElementRef, EventEmitter,
     HostBinding, Input, NgModule, OnInit, Output, Renderer2,
     ViewChild,
-    Directive,
     TemplateRef,
     ContentChild,
     AfterContentInit,
@@ -15,67 +14,17 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { EditorProvider } from '../core/edit-provider';
 import { DeprecateProperty } from '../core/deprecateDecorators';
-import { IgxSliderThumbModule, IgxSliderThumbComponent } from './thumb/thumb-slider.component';
-import { Subject, merge, concat } from 'rxjs';
+import { IgxSliderThumbComponent } from './thumb/thumb-slider.component';
+import { Subject, merge } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { SliderHandle,
+    IgxThumbFromTemplateDirective,
+    IgxThumbToTemplateDirective,
+    IRangeSliderValue,
+    SliderType,
+    ISliderValueChangeEventArgs
+} from './slider.common';
 
-/**
- * Template directive that allows you to set a custom template representing the lower label value of the {@link IgxSliderComponent}
- *
- *```html
- * <igx-slider>
- *  <ng-template igxSliderThumbFrom let-value let-labels>{{value}}</ng-template>
- * </igx-slider>
- * ```
- *
- * @context {@link IgxSliderComponent.context}
- */
-@Directive({
-    selector: '[igxSliderThumbFrom]'
-})
-export class IgxThumbFromTemplateDirective {}
-
-/**
- * Template directive that allows you to set a custom template representing the upper label value of the {@link IgxSliderComponent}
- *
- * ```html
- * <igx-slider>
- *  <ng-template igxSliderThumbTo let-value let-labels>{{value}}</ng-template>
- * </igx-slider>
- * ```
- *
- * @context {@link IgxSliderComponent.context}
- */
-@Directive({
-    selector: '[igxSliderThumbTo]'
-})
-export class IgxThumbToTemplateDirective {}
-
-export enum SliderType {
-    /**
-     * Slider with single thumb.
-     */
-    SLIDER,
-    /**
-     *  Range slider with multiple thumbs, that can mark the range.
-     */
-    RANGE
-}
-
-export enum SliderHandle {
-    FROM,
-    TO
-}
-
-export interface IRangeSliderValue {
-    lower: number;
-    upper: number;
-}
-
-export interface ISliderValueChangeEventArgs {
-    oldValue: number | IRangeSliderValue;
-    value: number | IRangeSliderValue;
-}
 
 const noop = () => {
 };
@@ -1240,9 +1189,9 @@ export class IgxSliderComponent implements
  * @hidden
  */
 @NgModule({
-    declarations: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective],
-    exports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective],
-    imports: [CommonModule, IgxSliderThumbModule]
+    declarations: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxSliderThumbComponent],
+    exports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxSliderThumbComponent],
+    imports: [CommonModule]
 })
 export class IgxSliderModule {
 }

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

@@ -10,10 +10,9 @@ import {
     OnInit,
     OnDestroy,
     TemplateRef} from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { SliderHandle } from '../slider.component';
+import { SliderHandle } from '../slider.common';
 
 /**
  * @hidden
@@ -213,9 +212,3 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
         return Math.round(scaleX / stepDist) * this.step;
     }
 }
-@NgModule({
-    declarations: [IgxSliderThumbComponent],
-    imports: [CommonModule],
-    exports: [IgxSliderThumbComponent]
-})
-export class IgxSliderThumbModule {}

projects/igniteui-angular/src/public_api.ts

@@ -74,7 +74,7 @@ export * from './lib/navbar/navbar.component';
 export * from './lib/navigation-drawer/index';
 export * from './lib/progressbar/progressbar.component';
 export * from './lib/radio/radio.component';
-export * from './lib/slider/slider.component';
+export * from './lib/slider/index';
 export * from './lib/snackbar/snackbar.component';
 export * from './lib/switch/switch.component';
 export * from './lib/tabbar/tabbar.component';

src/app/slider/slider.sample.html

@@ -13,7 +13,7 @@ <h4 class="sample-title">Slider</h4>
 
             <article class="sample-column">
                 <h4 class="sample-title">Range slider</h4>
-                <igx-slider #slider2 [type]="sliderType" [disabled]="true" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
+                <igx-slider #slider2 [type]="sliderType" [disabled]="false" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
                 </igx-slider>
             </article>