Merge branch 'master' into simeonoff/fix-8794

Author: simeonoff

README.md

@@ -186,14 +186,33 @@ You can include Ignite UI for Angular in your project as a dependency using the
 [General Naming and Coding Guidelines for Ignite UI for Angular](https://github.com/IgniteUI/igniteui-angular/wiki/General-Naming-and-Coding--Guidelines-for-Ignite-UI-for-Angular)
 
 ## Demo Apps & Documentation
-The [Warehouse Picklist App](https://github.com/IgniteUI/warehouse-js-blocks) demonstrates using several Ignite UI for Angular widgets together to build a modern, mobile app.
 
-The [Crypto Portfolio App](https://github.com/IgniteUI/crypto-portfolio-app) is a web and mobile application, developed with Ignite UI for Angular components and styled with our one of a kind theming engine.
+### List of Angular Demo Apps
+- [Warehouse Picklist App](https://github.com/IgniteUI/warehouse-js-blocks) - Demonstrates using several Ignite UI for Angular widgets together to build a modern, mobile app.
 
+- [FinTech Grid App]( https://github.com/Infragistics/angular-samples/tree/master/Grid/FinJS) - The Ignite UI for Angular Grid component is able to handle thousands of updates per second, while keeping the grid responsive for any interaction that the user may undertake. This sample demonstrates the Angular Grid handling thousands of updates per second.
+
+- [FinTech Tree Grid App](https://github.com/Infragistics/angular-samples/tree/master/TreeGrid/FinJS) - The Ignite UI for Angular Tree Grid component is able to handle thousands of updates per second, while keeping the grid responsive for any interaction that the user may undertake. This sample demonstrates the Tree Grid handling thousands of updates per second.
+
+- [Crypto Portfolio App](https://github.com/IgniteUI/crypto-portfolio-app) - This is a web and mobile application, developed with Ignite UI for Angular components and styled with our one of a kind theming engine.
+
+- [Task Planner Application](https://github.com/IgniteUI/TaskPlanner) – Task Planner is an Angular web application. It provides an effective means for managing projects and related tasks. Thus, it loads data from the Web API endpoint, enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. It shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.
+
+- [Dock Manager with Data Analysis Tool](https://github.com/IgniteUI/DockManager-DataAnalysis) - The Data Analysis sample application provides users with the flexibility to customize the data visualization using one of several chart types. Built with Angular UI components, it showcases the Angular Data Grid integrated with an Angular Data Chart, Angular Pie Chart, and an Angular Category Chart, to provide an interactive and engaging visualization. The Dock Manager web component provides a windowing experience, allowing users to customize the layout and view, and make the data more accessible.
+
+- [COVID-19 Dashboard](https://github.com/IgniteUI/COVID-19-Dashboard) - This dynamic dashboard was built using Indigo.Design and Ignite UI for Angular leveraging timely reports data from CSSEGISandData/COVID-19 to create an useful and impactful visualization. Built in a matter of hours, it showcases the Ignite UI Category and Data Charts, Map and List components for Angular and the how easy it is to get those quickly configured and populated with data.
+
+-[Inventory Management App](https://github.com/IgniteUI/InventoryManagementApp) - The Inventory Management App consists of 2 pages: The Products Page and the Dashboard Page. The Products Page contains a grid with product information and includes a number of useful features
+
+### Angular apps with ASP.NET Core Web Application
+If you consider Angular client side application with ASP.NET Core application you can check out our [ASP.NET-Core-Samples](https://github.com/IgniteUI/ASP.NET-Core-Samples)
+
+### Documentation
 To get started with the Data Grid, use the steps in the [grid walk-through](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid).
 
 All help, related API documents and walk-throughs can be found for each control [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started).
 
+
 ## Roadmap
 [Roadmap document](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md)
 

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>