Merge branch 'rkolev/tabsBottonNavTabsDefinitionMode' of https://github.com/IgniteUI/igniteui-angular-samples into rkolev/tabsBottonNavTabsDefinitionMode

Author: rmkrmk

.travis.yml

@@ -5,4 +5,4 @@ node_js:
 - '10.14.1'
 script:
 - npm run lint
-- travis_wait 30 npm run build
+- travis_wait 60 npm run build

README.md

@@ -1,3 +1,4 @@
+[![Build Status](https://dev.azure.com/IgniteUI/igniteui-angular/_apis/build/status/IgniteUI.igniteui-angular-samples?branchName=master)](https://dev.azure.com/IgniteUI/igniteui-angular/_build/latest?definitionId=4&branchName=master)
 [![Build Status](https://travis-ci.org/IgniteUI/igniteui-angular-samples.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-angular-samples)
 
 # Ignite UI for Angular - Samples
@@ -21,25 +22,45 @@ npm run build
 This will produce an AOT build and [live editing](https://github.com/IgniteUI/igniteui-angular-samples/blob/master/live-editing/README.md) samples supporting both Sass and CSS.
 
 ## Dev Server
-To start the dev server run:
+To start the dev server (including IE support) run:
 
 ```
 npm run start
 ```
 
+To start in modern browsers only, run:
+
+```
+npm run start:es6
+```
+
+### Starting from Angular v8 the project will not be supported/start in IE due to the new default compilation target es2015.
+
 ## Dev Server and Live Editing
-To generate the live editing applications along with the dev server run:
+To generate the live editing applications along with the dev server (including IE support) run:
 ```
 npm run start:live-editing
 ```
 
+To start in modern browsers only, run:
+
+```
+npm run start:live-editing:es6
+```
+
 ## Live Editing Watcher
-Use this command to start the server with capability to regenerate [live editing](https://github.com/IgniteUI/igniteui-angular-samples/blob/master/live-editing/README.md) JSON files (e.g. `"/src/assets/samples/avatar-sample-3.json"`) when a change related to the samples is made:
+Use this command to start the server with capability to regenerate [live editing](https://github.com/IgniteUI/igniteui-angular-samples/blob/master/live-editing/README.md) JSON files (e.g. `"/src/assets/samples/avatar-sample-3.json"`) when a change related to the samples is made (including IE support):
 
 ```
 npm run start:watch-live-editing
 ```
 
+To start in modern browsers only, run:
+
+```
+npm run start:watch-live-editing:es6
+```
+
 ## Generate Live Editing JSON files
 To generate only the [live editing](https://github.com/IgniteUI/igniteui-angular-samples/blob/master/live-editing/README.md) samples files (e.g. `"/src/assets/samples/avatar-sample-3.json"`) run:
 ```

angular.json

@@ -25,7 +25,8 @@
               "src/styles.scss"
             ],
             "scripts": [],
-            "es5BrowserSupport": true
+            "es5BrowserSupport": true,
+            "webWorkerTsConfig": "tsconfig.worker.json"
           },
           "configurations": {
             "production": {
@@ -44,6 +45,9 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "es5": {
+              "tsConfig": "src/tsconfig-es5.app.json"
             }
           }
         },
@@ -55,6 +59,9 @@
           "configurations": {
             "production": {
               "browserTarget": "my-app:build:production"
+            },
+            "es5": {
+              "browserTarget": "my-app:build:es5"
             }
           }
         },
@@ -86,7 +93,8 @@
           "options": {
             "tsConfig": [
               "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "src/tsconfig.spec.json",
+              "tsconfig.worker.json"
             ],
             "exclude": [
               "**/node_modules/**"

live-editing/LiveEditingManager.ts

@@ -16,13 +16,24 @@ class LiveEditingManager {
         fs.mkdirSync(ASSETS_SAMPLES_DIR);
         fs.mkdirSync(ASSETS_SAMPLES_CSS_SUPPORT_DIR);
 
-        console.log("Live-Editing... CSS with logs:");
-        this._run(StyleSyntax.CSS, false);
-        console.log("Live-Editing... SASS without logs:");
-        this._run(StyleSyntax.Sass, false);
+        this.generate(StyleSyntax.CSS, false);
+        this.generate(StyleSyntax.Sass, false);
+
+        console.log("-----------------------------------------------------");
+        console.log("Live-Editing - output folder: " + ASSETS_SAMPLES_DIR);
     }
 
-    public _run(styleSyntax: StyleSyntax, showLogs?: boolean) {
+    private generate(styleSyntax: StyleSyntax, showLogs?: boolean) {
+
+        let logInfo = "";
+        if (styleSyntax === StyleSyntax.CSS) {
+            logInfo = "CSS syntax"
+        } else {
+            logInfo = "Sass syntax"
+        }
+        console.log("-----------------------------------------------------");
+        console.log("Live-Editing - with " + logInfo);
+
         new SharedAssetsGenerator(styleSyntax, showLogs).generateSharedAssets();
         new SampleAssetsGenerator(styleSyntax, showLogs).generateSamplesAssets();
         new MetaDataGenerator(styleSyntax).Generate();

live-editing/configs/CategoryChartConfigGenerator.ts

@@ -1,157 +1,80 @@
 /* tslint:disable:object-literal-sort-keys */
+// tslint:disable:object-literal-shorthand
+// tslint:disable:max-line-length
+// tslint:disable:member-ordering
+// tslint:disable:prefer-const
 import { IgxSliderModule } from "igniteui-angular";
 import { IgxCategoryChartModule } from "igniteui-angular-charts/ES5/igx-category-chart-module";
-import {
-    CategoryChartAnnotationsComponent
-} from "../../src/app/charts/category-chart/annotations/category-chart-annotations.component";
-import {
-    CategoryChartAxisOptionsComponent
-} from "../../src/app/charts/category-chart/axis-options/category-chart-axis-options-sample.component";
-import {
-    CategoryChartConfigOptionsComponent
-} from "../../src/app/charts/category-chart/config-options/category-chart-config-options-sample.component";
-import {
-    CategoryChartHighFrequencyComponent
-} from "../../src/app/charts/category-chart/high-frequency/category-chart-high-frequency-sample.component";
-import {
-    CategoryChartHighVolumeComponent
-} from "../../src/app/charts/category-chart/high-volume/category-chart-high-volume-sample.component";
-import {
-    CategoryChartHighlightingComponent
-} from "../../src/app/charts/category-chart/highlighting/category-chart-highlighting.component";
-import {
-    CategoryChartOverlapColumnsComponent
-} from "../../src/app/charts/category-chart/overlap-columns/category-chart-overlap-columns.component";
-import {
-    CategoryChartOverviewComponent
-} from "../../src/app/charts/category-chart/overview/category-chart-overview-sample.component";
-import {
-    CategoryChartTooltipTemplateComponent
-} from "../../src/app/charts/category-chart/tooltip-template/category-chart-tooltip-template.component";
-import {
-    CategoryChartTooltipTypesComponent
-} from "../../src/app/charts/category-chart/tooltip-types/category-chart-tooltip-types.component";
-import {
-    CategoryChartTrendlinesComponent
-} from "../../src/app/charts/category-chart/trendline/category-chart-trendlines.component";
+
+import { CategoryChartAnnotationsComponent } from "../../src/app/charts/category-chart/annotations/category-chart-annotations.component";
+import { CategoryChartAxisOptionsComponent } from "../../src/app/charts/category-chart/axis-options/category-chart-axis-options-sample.component";
+import { CategoryChartConfigOptionsComponent } from "../../src/app/charts/category-chart/config-options/category-chart-config-options-sample.component";
+import { CategoryChartHighFrequencyComponent } from "../../src/app/charts/category-chart/high-frequency/category-chart-high-frequency-sample.component";
+import { CategoryChartHighVolumeComponent } from "../../src/app/charts/category-chart/high-volume/category-chart-high-volume-sample.component";
+import { CategoryChartHighlightingComponent } from "../../src/app/charts/category-chart/highlighting/category-chart-highlighting.component";
+import { CategoryChartOverlapColumnsComponent } from "../../src/app/charts/category-chart/overlap-columns/category-chart-overlap-columns.component";
+import { CategoryChartOverviewComponent } from "../../src/app/charts/category-chart/overview/category-chart-overview-sample.component";
+import { CategoryChartTooltipTemplateComponent } from "../../src/app/charts/category-chart/tooltip-template/category-chart-tooltip-template.component";
+import { CategoryChartTooltipTypesComponent } from "../../src/app/charts/category-chart/tooltip-types/category-chart-tooltip-types.component";
+import { CategoryChartTrendlinesComponent } from "../../src/app/charts/category-chart/trendline/category-chart-trendlines.component";
+
 import { DependenciesType } from "../services/DependenciesType";
-import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
-import { IConfigGenerator } from "./core/IConfigGenerator";
+import { BaseConfigGenerator } from "./core/BaseConfigGenerator";
+
+export class CategoryChartConfigGenerator extends BaseConfigGenerator {
+
+    constructor() {
+        super(DependenciesType.Charts, "/charts/category-chart/");
+    }
 
-export class CategoryChartConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        configs.push(new Config({
-            component: CategoryChartOverviewComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartOverviewComponent],
-                ngDeclarations: [CategoryChartOverviewComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartHighVolumeComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartHighVolumeComponent, IgxSliderModule],
-                ngDeclarations: [CategoryChartHighVolumeComponent],
-                ngImports: [IgxCategoryChartModule, IgxSliderModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartHighFrequencyComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartHighFrequencyComponent, IgxSliderModule],
-                ngDeclarations: [CategoryChartHighFrequencyComponent],
-                ngImports: [IgxCategoryChartModule, IgxSliderModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartTooltipTemplateComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartTooltipTemplateComponent],
-                ngDeclarations: [CategoryChartTooltipTemplateComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartConfigOptionsComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartConfigOptionsComponent],
-                ngDeclarations: [CategoryChartConfigOptionsComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartAxisOptionsComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartAxisOptionsComponent],
-                ngDeclarations: [CategoryChartAxisOptionsComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartAnnotationsComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartAnnotationsComponent],
-                ngDeclarations: [CategoryChartAnnotationsComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartHighlightingComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartHighlightingComponent],
-                ngDeclarations: [CategoryChartHighlightingComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartTooltipTypesComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartTooltipTypesComponent],
-                ngDeclarations: [CategoryChartTooltipTypesComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
-
-        configs.push(new Config({
-            component: CategoryChartOverlapColumnsComponent,
-            appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule, CategoryChartOverlapColumnsComponent],
-                ngDeclarations: [CategoryChartOverlapColumnsComponent],
-                ngImports: [IgxCategoryChartModule]
-            }),
-            dependenciesType: DependenciesType.Charts,
-            shortenComponentPathBy: "/charts/category-chart/"
-        }));
+        configs.push(this.getConfig(
+            CategoryChartOverviewComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartHighVolumeComponent,
+            [IgxCategoryChartModule, IgxSliderModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartHighFrequencyComponent,
+            [IgxCategoryChartModule, IgxSliderModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartTooltipTemplateComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartConfigOptionsComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartAxisOptionsComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartAnnotationsComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartHighlightingComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartTooltipTypesComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartOverlapColumnsComponent,
+            [IgxCategoryChartModule]));
+
+        configs.push(this.getConfig(
+            CategoryChartTrendlinesComponent,
+            [IgxCategoryChartModule]));
+
         return configs;
     }
 }

live-editing/configs/ChipConfigGenerator.ts

@@ -1,5 +1,5 @@
 /* tslint:disable:object-literal-sort-keys */
-import { IgxAvatarModule, IgxChipsModule, IgxDropDownModule, IgxInputGroupModule, IgxToastModule, IgxButtonModule
+import { IgxAvatarModule, IgxButtonModule, IgxChipsModule, IgxDropDownModule, IgxInputGroupModule, IgxToastModule
 } from "igniteui-angular";
 import { ChipSampleComponent, EmailFilterPipe } from "../../src/app/data-display/chip/chip.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";