Merge pull request #8788 from IgniteUI/slider-enum-string-types

feat(slider): update slider enums as a string union types

Author: zdrawku

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

@@ -1,5 +1,5 @@
 import { Directive } from '@angular/core';
-import { IBaseEventArgs } from '../core/utils';
+import { IBaseEventArgs, mkenum } from '../core/utils';
 
 /**
  * Template directive that allows you to set a custom template representing the lower label value of the {@link IgxSliderComponent}
@@ -53,36 +53,40 @@ export interface ISliderValueChangeEventArgs {
     value: number | IRangeSliderValue;
 }
 
-export enum IgxSliderType {
+export const IgxSliderType = mkenum({
     /**
      * Slider with single thumb.
      */
-    SLIDER,
+    SLIDER: 'slider',
     /**
      *  Range slider with multiple thumbs, that can mark the range.
      */
-    RANGE
-}
+    RANGE: 'range'
+});
+export type IgxSliderType = (typeof IgxSliderType)[keyof typeof IgxSliderType];
 
-export enum SliderHandle {
-    FROM,
-    TO
-}
+export const SliderHandle = mkenum({
+    FROM: 'from',
+    TO: 'to'
+});
+export type SliderHandle = (typeof SliderHandle)[keyof typeof SliderHandle];
 
 /**
  * Slider Tick labels Orientation
  */
-export enum TickLabelsOrientation {
-    Horizontal,
-    TopToBottom,
-    BottomToTop
-}
+export const TickLabelsOrientation = mkenum({
+    Horizontal: 'horizontal',
+    TopToBottom: 'toptobottom',
+    BottomToTop: 'bottomtotop'
+});
+export type TickLabelsOrientation = (typeof TickLabelsOrientation)[keyof typeof TickLabelsOrientation];
 
 /**
  * Slider Ticks orientation
  */
-export enum TicksOrientation {
-    Top,
-    Bottom,
-    Mirror
-}
+export const TicksOrientation = mkenum({
+    Top: 'top',
+    Bottom: 'bottom',
+    Mirror: 'mirror'
+});
+export type TicksOrientation = (typeof TicksOrientation)[keyof typeof TicksOrientation];

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

@@ -1,7 +1,7 @@
 <div class="igx-slider__track">
     <igx-ticks
         *ngIf="showTicks && showTopTicks"
-        [ticksOrientation]="0"
+        ticksOrientation="top"
         [primaryTicks]="primaryTicks"
         [secondaryTicks]="secondaryTicks"
         [primaryTickLabels]="primaryTickLabels"
@@ -18,7 +18,7 @@
 
     <igx-ticks
         *ngIf="showTicks && showBottomTicks"
-        [ticksOrientation]="1"
+        ticksOrientation="bottom"
         [primaryTicks]="primaryTicks"
         [secondaryTicks]="secondaryTicks"
         [primaryTickLabels]="primaryTickLabels"
@@ -33,7 +33,7 @@
 <div class="igx-slider__thumbs">
     <igx-thumb-label
         *ngIf="isRange"
-        [type]="0"
+        type="from"
         [value]="lowerLabel"
         [templateRef]="thumbFromTemplateRef"
         [continuous]="continuous"
@@ -44,7 +44,7 @@
     <igx-thumb
         *ngIf="isRange"
         #thumbFrom
-        [type]="0"
+        type="from"
         [value]="lowerLabel"
         [disabled]="disabled"
         [continuous]="continuous"
@@ -60,7 +60,7 @@
 
     <igx-thumb-label
         [value]="upperLabel"
-        [type]="1"
+        type="to"
         [templateRef]="thumbToTemplateRef"
         [continuous]="continuous"
         [context]="context"
@@ -69,7 +69,7 @@
 
     <igx-thumb
         #thumbTo
-        [type]="1"
+        type="to"
         [value]="upperLabel"
         [disabled]="disabled"
         [continuous]="continuous"

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

@@ -1656,7 +1656,7 @@ describe('IgxSlider', () => {
 
         return new Promise((resolve, reject) => {
             Simulator.gestures.pan(element, panOptions, () => {
-                resolve();
+                resolve(null);
             });
         });
     }

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

@@ -242,7 +242,7 @@ export class IgxSliderComponent implements
      */
     @Input()
     public get type() {
-        return this._type;
+        return this._type as IgxSliderType;
     }
 
     /**
@@ -1096,7 +1096,7 @@ export class IgxSliderComponent implements
     /**
      * @hidden
      */
-    public thumbChanged(value: number, thumbType: number) {
+    public thumbChanged(value: number, thumbType: string) {
         const oldValue = this.value;
 
         let newVal: IRangeSliderValue;
@@ -1401,7 +1401,7 @@ export class IgxSliderComponent implements
         return value;
     }
 
-    private subscribeTo(thumb: IgxSliderThumbComponent, callback: (a: number, b: number) => void) {
+    private subscribeTo(thumb: IgxSliderThumbComponent, callback: (a: number, b: string) => void) {
         if (!thumb) {
             return;
         }

src/app/slider/slider.sample.html

@@ -24,7 +24,7 @@ <h4 class="sample-title">Range label slider</h4>
         <article class="sample-column" class="flex-row">
             <h4 class="sample-title">Range label slider</h4>
             <span class="outer-label">{{getLowerVal}}</span>
-            <igx-slider style="width: 60%;" #slider2 [type]="sliderType" (onValueChange)="valueChange($event)"
+            <igx-slider style="width: 60%;" #slider2 type="range" (onValueChange)="valueChange($event)"
                 [labels]="labels" [continuous]="true">
             </igx-slider>
             <span class="outer-label">{{getUpperVal}}</span>
@@ -90,7 +90,7 @@ <h4>Slider ticks</h4>
         <button igxButton="outlined" (click)="primaryTickLabels = !primaryTickLabels">show/hide primary labels</button>
         <button igxButton="outlined" (click)="secondaryTickLabels = !secondaryTickLabels">show/hide secondary labels</button>
         <button igxButton="outlined" (click)="changeLabels()">change labels</button>
-        <button igxButton="outlined" (click)="sliderType = sliderType === 0 ? 1 : 0">change type</button>
-        <button igxButton="outlined" (click)="sliderType = sliderType === 0 ? 1 : 0">change step</button>
+        <button igxButton="outlined" (click)="sliderType = sliderType === 'slider' ? 'range' : 'slider'">change type</button>
+        <button igxButton="outlined" (click)="sliderType = sliderType === 'slider' ? 'range' : 'slider'">change step</button>
     </div>
 </section>