fix(slider): remove slider wrapper el and update API comments

Aleksandyr · Aleksandyr · commit e6023fe9ffca · 2019-06-06T15:25:19.000+03:00
Closes #3449 #4562 #4559 #2622
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -63,6 +63,7 @@ In order to turn them off, you need to pass an argument and set it to `false`
 ## 7.2.12
 ### New feature
 - **igxSlider** - exposing new `labels` property accepting a collection of literal values that become equally spread over the slider, by placing each element as a thumb label.
+- **igxSlider** - deprecate **isContiunous** property.
  
 ## 7.2.9
 - `Pager`
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.html b/projects/igniteui-angular/src/lib/slider/slider.component.html
@@ -1,41 +1,33 @@
-<div
-    #slider
-    class="igx-slider"
-    [class.igx-slider--disabled]="disabled"
-    (pointerdown)="findClosestThumb($event)"
-    (pan)="update($event.srcEvent.clientX)"
-    (tap)="onTap($event)">
-    <div class="igx-slider__track">
-        <div #track class="igx-slider__track-fill"></div>
-        <div #ticks class="igx-slider__track-ticks"></div>
-    </div>
-    <div class="igx-slider__thumbs">
-        <igx-thumb *ngIf="isRange"
-            #thumbFrom
-            [type]="0"
-            [value]="lowerLabel"
-            [disabled]="disabled"
-            [continuous]="continuous"
-            [onPan]="onPan"
-            [stepDistance]="stepDistance"
-            [step]="step"
-            [fromHandler]="true"
-            [templateRef]="thumbFromTemplateRef"
-            [context]="context"
-            (onChange)="onThumbChange()"
-            [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
-        <igx-thumb
-            #thumbTo
-            [type]="1"
-            [value]="upperLabel"
-            [disabled]="disabled"
-            [continuous]="continuous"
-            [onPan]="onPan"
-            [stepDistance]="stepDistance"
-            [step]="step"
-            [templateRef]="thumbToTemplateRef"
-            [context]="context"
-            (onChange)="onThumbChange()"
-            [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
-    </div>
+<div class="igx-slider__track">
+    <div #track class="igx-slider__track-fill"></div>
+    <div #ticks class="igx-slider__track-ticks"></div>
+</div>
+<div class="igx-slider__thumbs">
+    <igx-thumb *ngIf="isRange"
+        #thumbFrom
+        [type]="0"
+        [value]="lowerLabel"
+        [disabled]="disabled"
+        [continuous]="continuous"
+        [onPan]="onPan"
+        [stepDistance]="stepDistance"
+        [step]="step"
+        [fromHandler]="true"
+        [templateRef]="thumbFromTemplateRef"
+        [context]="context"
+        (onChange)="onThumbChange()"
+        [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
+    <igx-thumb
+        #thumbTo
+        [type]="1"
+        [value]="upperLabel"
+        [disabled]="disabled"
+        [continuous]="continuous"
+        [onPan]="onPan"
+        [stepDistance]="stepDistance"
+        [step]="step"
+        [templateRef]="thumbToTemplateRef"
+        [context]="context"
+        (onChange)="onThumbChange()"
+        [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
 </div>
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts
@@ -139,15 +139,21 @@ export class IgxSliderComponent implements
     private _onChangeCallback: (_: any) => void = noop;
     private _onTouchedCallback: () => void = noop;
 
-    @ViewChild('slider')
-    private slider: ElementRef;
-
+    /**
+     * @hidden
+     */
     @ViewChild('track')
     private track: ElementRef;
 
+    /**
+     * @hidden
+     */
     @ViewChild('ticks')
     private ticks: ElementRef;
 
+    /**
+     * @hidden
+     */
     @ViewChildren(IgxSliderThumbComponent)
     private thumbs: QueryList<IgxSliderThumbComponent> = new QueryList<IgxSliderThumbComponent>();
 
@@ -159,7 +165,14 @@ export class IgxSliderComponent implements
         return this.thumbs.find(thumb => thumb.type === SliderHandle.TO);
     }
 
+    /**
+     * @hidden
+     */
     public stepDistance = this._step;
+
+    /**
+     * @hidden
+     */
     public onPan: Subject<number> = new Subject<number>();
 
     /**
@@ -204,6 +217,19 @@ export class IgxSliderComponent implements
         return this.disabled;
     }
 
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-slider')
+    public slierClass = true;
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-slider--disabled')
+    public get disabledClass() {
+        return this.disabled;
+    }
 
     /**
      * An @Input property that sets the value of the `id` attribute.
@@ -216,6 +242,20 @@ export class IgxSliderComponent implements
     @Input()
     public id = `igx-slider-${NEXT_ID++}`;
 
+    /**
+     * An @Input property that gets the type of the `IgxSliderComponent`. The slider can be SliderType.SLIDER(default) or SliderType.RANGE.
+     * ```typescript
+     * @ViewChild("slider2")
+     * public slider: IgxSliderComponent;
+     * ngAfterViewInit(){
+     *     let type = this.slider.type;
+     * }
+     */
+    @Input()
+    public get type() {
+        return this._type;
+    }
+
     /**
      * An @Input property that sets the type of the `IgxSliderComponent`. The slider can be SliderType.SLIDER(default) or SliderType.RANGE.
      * ```typescript
@@ -225,11 +265,6 @@ export class IgxSliderComponent implements
      * <igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
      * ```
      */
-    @Input()
-    public get type() {
-        return this._type;
-    }
-
     public set type(type: SliderType) {
         this._type = type;
 
@@ -639,17 +674,25 @@ export class IgxSliderComponent implements
     public onValueChange = new EventEmitter<ISliderValueChangeEventArgs>();
 
 
-    constructor(private renderer: Renderer2) { }
+    constructor(private renderer: Renderer2, private _el: ElementRef) { }
+
+    /**
+     * @hidden
+     */
+    @HostListener('pointerdown', ['$event'])
+    public onPointerDown($event) {
+        this.findClosestThumb($event);
 
-    @HostListener('pointerdown')
-    public onPointerDown() {
         if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
             return;
         }
 
         this.showThumbLabels();
     }
 
+    /**
+     * @hidden
+     */
     @HostListener('pointerup')
     public onPointerUp() {
         if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
@@ -659,16 +702,38 @@ export class IgxSliderComponent implements
         this.hideThumbLabels();
     }
 
+    /**
+     * @hidden
+     */
     @HostListener('focus')
     public onFocus() {
         this.toggleThumbLabels();
     }
 
+    /**
+     * @hidden
+     */
     @HostListener('blur')
     public onBlur() {
         this.hideThumbLabels();
     }
 
+    /**
+     * @hidden
+     */
+    @HostListener('pan', ['$event'])
+    public onPanListener($event) {
+        this.update($event.srcEvent.clientX)
+    }
+
+    /**
+     * @hidden
+     */
+    @HostListener('tap', ['$event'])
+    public onTapListener($event) {
+        this.onTap($event);
+    }
+
     /**
      *Returns whether the `IgxSliderComponent` type is RANGE.
      *```typescript
@@ -889,6 +954,9 @@ export class IgxSliderComponent implements
         this._onTouchedCallback();
     }
 
+    /**
+     * @hidden
+     */
     public thumbChanged(value: number, thumbType: number) {
         const oldValue = this.value;
 
@@ -922,7 +990,14 @@ export class IgxSliderComponent implements
         }
     }
 
-    public swapThumb(value: IRangeSliderValue) {
+    /**
+     * @hidden
+     */
+    public onThumbChange() {
+        this.toggleThumbLabels();
+    }
+
+    private swapThumb(value: IRangeSliderValue) {
         if (this.thumbFrom.isActive) {
             value.upper = this.upperValue;
             value.lower = this.upperValue;
@@ -936,10 +1011,7 @@ export class IgxSliderComponent implements
         return value;
     }
 
-    /**
-     * @hidden
-     */
-    public findClosestThumb(event) {
+    private findClosestThumb(event) {
         if (this.isRange) {
             this.closestHandle(event.clientX);
         } else {
@@ -951,10 +1023,6 @@ export class IgxSliderComponent implements
         event.preventDefault();
     }
 
-    public onThumbChange() {
-        this.toggleThumbLabels();
-    }
-
     private updateLowerBoundAndMinTravelZone() {
         this.lowerBound = this.minValue;
         this._pMin = 0;
@@ -976,7 +1044,7 @@ export class IgxSliderComponent implements
     }
 
     private calculateStepDistance() {
-        return this.slider.nativeElement.getBoundingClientRect().width / (this.maxValue - this.minValue) * this.step;
+        return this._el.nativeElement.getBoundingClientRect().width / (this.maxValue - this.minValue) * this.step;
     }
 
     private toggleThumb() {
@@ -1027,7 +1095,7 @@ export class IgxSliderComponent implements
     private closestHandle(mouseX) {
         const fromOffset = this.thumbFrom.nativeElement.offsetLeft + this.thumbFrom.nativeElement.offsetWidth / 2;
         const toOffset = this.thumbTo.nativeElement.offsetLeft + this.thumbTo.nativeElement.offsetWidth / 2;
-        const xPointer = mouseX - this.slider.nativeElement.getBoundingClientRect().left;
+        const xPointer = mouseX - this._el.nativeElement.getBoundingClientRect().left;
         const match = this.closestTo(xPointer, [fromOffset, toOffset]);
 
         if (match === fromOffset) {
diff --git a/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts b/projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts
@@ -15,6 +15,9 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { SliderHandle } from '../slider.component';
 
+/**
+ * @hidden
+ */
 @Component({
     selector: 'igx-thumb',
     templateUrl: 'thumb-slider.component.html',
diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html
@@ -13,13 +13,13 @@ <h4 class="sample-title">Slider</h4>
 
             <article class="sample-column">
                 <h4 class="sample-title">Range slider</h4>
-                <igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
+                <igx-slider #slider2 [type]="sliderType" [disabled]="true" [(ngModel)]="rangeValue" [minValue]="0" [maxValue]="100">
                 </igx-slider>
             </article>
 
             <article class="sample-column">
                 <h4 class="sample-title">Range label slider</h4>
-                <igx-slider #slider2 [type]="sliderType" [(ngModel)]="rangeLabel"
+                <igx-slider #slider3 [type]="sliderType" [(ngModel)]="rangeLabel"
                     [labels]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']">
                     <ng-template igxSliderThumbFrom let-value let-labels="labels">
                         <span class="ellipsis">{{ labels[value.lower] }}</span>
