Nalipiev/update 11

angular.json

@@ -38,7 +38,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": false,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -153,7 +152,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,

package.json

@@ -39,15 +39,15 @@
     "url": "git://github.com/IgniteUI/igniteui-angular-samples/repository.git"
   },
   "dependencies": {
-    "@angular/animations": "^10.1.5",
-    "@angular/common": "^10.1.5",
-    "@angular/compiler": "^10.1.5",
-    "@angular/core": "^10.1.5",
-    "@angular/forms": "^10.1.5",
+    "@angular/animations": "^11.0.0-rc.2",
+    "@angular/common": "^11.0.0-rc.2",
+    "@angular/compiler": "^11.0.0-rc.2",
+    "@angular/core": "^11.0.0-rc.2",
+    "@angular/forms": "^11.0.0-rc.2",
     "@angular/http": "^7.2.16",
-    "@angular/platform-browser": "^10.1.5",
-    "@angular/platform-browser-dynamic": "^10.1.5",
-    "@angular/router": "^10.1.5",
+    "@angular/platform-browser": "^11.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "^11.0.0-rc.2",
+    "@angular/router": "^11.0.0-rc.2",
     "@igniteui/material-icons-extended": "^2.4.0",
     "@types/file-saver": "^2.0.1",
     "@types/hammerjs": "^2.0.35",
@@ -57,7 +57,7 @@
     "domino": "^2.1.4",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "10.2.1",
+    "igniteui-angular": "11.0.0-alpha.0",
     "igniteui-angular-charts": "^10.1.3",
     "igniteui-angular-core": "^10.1.3",
     "igniteui-angular-excel": "^9.1.2",
@@ -78,10 +78,10 @@
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1001.7",
-    "@angular/cli": "~10.1.7",
-    "@angular/compiler-cli": "^10.1.5",
-    "@angular/language-service": "^10.1.5",
+    "@angular-devkit/build-angular": "^0.1100.0-rc.2",
+    "@angular/cli": "~11.0.0-rc.2",
+    "@angular/compiler-cli": "^11.0.0-rc.2",
+    "@angular/language-service": "^11.0.0-rc.2",
     "@igniteui/angular-schematics": "^10.1.611",
     "@types/jasmine": "^3.5.10",
     "@types/jasminewd2": "^2.0.8",
@@ -92,7 +92,7 @@
     "gulp": "^4.0.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~5.0.0",
+    "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~2.0.0",
     "karma-coverage-istanbul-reporter": "^2.1.1",
@@ -103,7 +103,7 @@
     "sass.js": "0.11.1",
     "ts-node": "^8.8.1",
     "tslint": "~6.1.0",
-    "typescript": "3.9.5"
+    "typescript": "4.0.5"
   },
   "browserslist": [
     "> 3%",

projects/app-lob/src/app/app-routing.module.ts

@@ -66,7 +66,7 @@ export const appRoutes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(appRoutes)],
+  imports: [RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule {

projects/app-lob/src/app/app.component.spec.ts

@@ -1,9 +1,9 @@
-import { async, TestBed } from "@angular/core/testing";
+import { TestBed, waitForAsync } from "@angular/core/testing";
 import { RouterTestingModule } from "@angular/router/testing";
 import { AppComponent } from "./app.component";
 
 describe("AppComponent", () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule

projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html

@@ -1,14 +1,13 @@
 <div class="grid__wrapper">
     <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" [height]="'430px'" [width]="'100%'" [rowSelection]="selectionMode"
-        displayDensity="cosy" rowHeight="50" [allowFiltering]="true"
-        [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"
+        displayDensity="cosy" rowHeight="50" [allowFiltering]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"
         [columnPinning]="true" [exportExcel]="true" [exportCsv]="true" exportExcelText="Export to Excel" exportCsvText="Export to CSV">
+        <igx-grid-toolbar>
 
-        <ng-template igxToolbarCustomContent>
             <div class="crm-toolbar-template">
                 <div class="crm-sample-toolbar__title">
                     <span class="logo-propeller">
-                        <img src="assets/images/grid/propeller-logo.svg" class="animated-fan" />
+                        <img src="assets/images/grid/propeller-logo.svg" class="animated-fan"/>
                     </span>
                     <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
                 </div>
@@ -19,8 +18,7 @@
                             <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
                         </igx-prefix>
 
-                        <input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText"
-                            (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)" />
+                        <input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)"/>
 
                         <igx-suffix *ngIf="searchText.length > 0">
                             <div class="resultsText" *ngIf="grid1.lastSearchInfo">
@@ -33,8 +31,7 @@
                                 </span>
                             </div>
                             <div class="caseSensitiveButton">
-                                <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                                    [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                                <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()" [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
                                     <igx-icon class="caseSensitiveIcon" fontSet="material">text_fields</igx-icon>
                                 </button>
                             </div>
@@ -50,7 +47,11 @@
                     </igx-input-group>
                 </div>
             </div>
-        </ng-template>
+
+        </igx-grid-toolbar>
+
+
+
 
         <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false" [resizable]="true"
             [hidden]="true" [movable]="true">

projects/app-lob/src/app/grid-finjs/grid-finjs-demo.component.html

@@ -40,9 +40,11 @@
         (onRowSelectionChange)="rowSelectionChanged($event)" [data]="data"
         width="100%" height="30%" [autoGenerate]='false' displayDensity='compact'
         columnHidingTitle="Indicators" hiddenColumnsText="Hidden" primaryKey='ID' [rowSelection]="selectionMode"
-        [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [showToolbar]="false" [columnHiding]="true"
+        [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [columnHiding]="true"
         [columnPinning]="true" [exportExcel]="true" exportExcelText="Export to Excel"
         (keydown)="gridKeydown($event)" (onGridKeydown)="customKeydown($event)">
+        <igx-grid-toolbar *ngIf="false"></igx-grid-toolbar>
+
 
         <!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
         <!-- <ng-template igxExcelStyleSorting></ng-template>

projects/app-lob/src/app/grid-finjs/partial/grid-finjs-partial.component.html

@@ -3,9 +3,11 @@
         (onRowSelectionChange)="rowSelectionChanged($event)" [data]="data"
         width="100%" height="30%" [autoGenerate]='false' displayDensity='compact'
         columnHidingTitle="Indicators" hiddenColumnsText="Hidden" primaryKey='ID' [rowSelection]="selectionMode"
-        [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [showToolbar]="false" [columnHiding]="true"
+        [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [columnHiding]="true"
         [columnPinning]="true" [exportExcel]="true" exportExcelText="Export to Excel"
         (keydown)="gridKeydown($event)" (onGridKeydown)="customKeydown($event)">
+        <igx-grid-toolbar *ngIf="false"></igx-grid-toolbar>
+
 
         <!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
         <!-- <ng-template igxExcelStyleSorting></ng-template>

projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 
 import { GridComponent } from "./grid.component";
 
 describe("GridComponent", () => {
   let component: GridComponent;
   let fixture: ComponentFixture<GridComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ GridComponent ]
     })

projects/app-lob/src/app/tree-grid/tree-grid-childdatakey-sample/tree-grid-childdatakey-sample.component.html

@@ -1,8 +1,9 @@
 <div class="grid__wrapper">
     <igx-tree-grid igxPreventDocumentScroll #treeGrid [data]="localData" childDataKey="Employees" width="100%" height="800px"
-                   [autoGenerate]="false" [rowSelection]="selectionMode" [paging]="true" [allowFiltering]="true"
-                   [showToolbar]="true" toolbarTitle="Employees" [columnHiding]="true" [columnPinning]="true"
+                   [autoGenerate]="false" [rowSelection]="selectionMode" [paging]="true" [allowFiltering]="true" toolbarTitle="Employees" [columnHiding]="true" [columnPinning]="true"
                    [exportExcel]="true" [exportCsv]="true" exportExcelText="To Excel" exportCsvText="To CSV">
+        <igx-grid-toolbar></igx-grid-toolbar>
+
         <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true" [hasSummary]="true"></igx-column>
         <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
         <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>

projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html

@@ -37,8 +37,9 @@
         [data]="data | treeGridGrouping:groupColumns:aggregations:groupColumnKey:primaryKey:childDataKey"
         [height]="'calc(100% - 76px)'" width="100%" [autoGenerate]='false' displayDensity='compact'
         [primaryKey]="primaryKey" [childDataKey]="childDataKey" columnHidingTitle="Indicators"
-        hiddenColumnsText="Hidden" [rowSelection]="selectionMode" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
-        [showToolbar]="true" [columnHiding]="true" [exportExcel]="true" exportExcelText="Export to Excel">
+        hiddenColumnsText="Hidden" [rowSelection]="selectionMode" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [columnHiding]="true" [exportExcel]="true" exportExcelText="Export to Excel">
+        <igx-grid-toolbar></igx-grid-toolbar>
+
 
         <!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
         <!-- <ng-template igxExcelStyleSorting></ng-template>

src/app/app-routing.module.ts

@@ -95,7 +95,7 @@ export const appRoutes: Routes = [
 ];
 @NgModule({
     exports: [RouterModule],
-    imports: [RouterModule.forRoot(appRoutes)]
+    imports: [RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' })]
 })
 export class AppRoutingModule {
 

src/app/app.component.spec.ts

@@ -1,24 +1,24 @@
-import { async, TestBed } from "@angular/core/testing";
+import { TestBed, waitForAsync } from "@angular/core/testing";
 import { AppComponent } from "./app.component";
 describe("AppComponent", () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ]
     }).compileComponents();
   }));
-  it("should create the app", async(() => {
+  it("should create the app", waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'app'`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual("app");
   }));
-  it("should render title in a h1 tag", async(() => {
+  it("should render title in a h1 tag", waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

src/app/data-display/circular-progressbar/circular-progressbar.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 
 import { CircularProgressbarComponent } from "./circular-progressbar.component";
 
 describe("CircularProgressbarComponent", () => {
   let component: CircularProgressbarComponent;
   let fixture: ComponentFixture<CircularProgressbarComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ CircularProgressbarComponent ]
     })

src/app/data-display/linear-progressbar/linear-progressbar.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 
 import { LinearProgressbarComponent } from "./linear-progressbar.component";
 
 describe("LinearProgressbarComponent", () => {
   let component: LinearProgressbarComponent;
   let fixture: ComponentFixture<LinearProgressbarComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ LinearProgressbarComponent ]
     })

src/app/grid/column-selection-sample/column-selection-sample.component.html

@@ -1,13 +1,16 @@
 <div class="grid-wrapper">
-    <igx-grid [showToolbar]="true" #grid [columnSelection] = "columnSelectionType" [data]="data" height="500px" width="100%">
-        <ng-template igxToolbarCustomContent let-grid="grid">
+    <igx-grid #grid [columnSelection] = "columnSelectionType" [data]="data" height="500px" width="100%">
+        <igx-grid-toolbar>
+
                 <igx-select [(ngModel)]="columnSelectionType">
                     <label igxLabel>Column Selection</label>
                     <igx-select-item value="none">None</igx-select-item>
                     <igx-select-item value="single">Single</igx-select-item>
                     <igx-select-item value="multiple">Mulitple</igx-select-item>
                 </igx-select>
-        </ng-template>
+
+        </igx-grid-toolbar>
+
         <igx-column field="ID"></igx-column>
         <igx-column field="CompanyName" header="Company Name" ></igx-column>
         <igx-column field="ContactTitle" [selectable]="false" header="Contact Title"></igx-column>
@@ -16,4 +19,4 @@
         <igx-column field="PostalCode" header="Postal Code"></igx-column>
         <igx-column field="Address" [selectable]="false"></igx-column>
     </igx-grid>
-</div>
+</div>

src/app/grid/grid-advanced-filtering-sample/grid-advanced-filtering-sample.component.html

@@ -1,5 +1,7 @@
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [showToolbar]="true" [allowAdvancedFiltering]="true" [autoGenerate]="false" height="500px" width="100%">
+    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [allowAdvancedFiltering]="true" [autoGenerate]="false" height="500px" width="100%">
+        <igx-grid-toolbar></igx-grid-toolbar>
+
         <igx-column field="ProductName" header="Product Name" [sortable]="true" [movable]="true" [dataType]="'string'">
         </igx-column>
         <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [sortable]="true" [movable]="true" [dataType]="'string'">
@@ -15,4 +17,4 @@
             </ng-template>
         </igx-column>
     </igx-grid>
-</div>
+</div>

src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.html

@@ -1,5 +1,7 @@
 <div class="grid__wrapper">
-    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" [showToolbar]="true" [allowAdvancedFiltering]="true" height="500px" width="100%">
+    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" [allowAdvancedFiltering]="true" height="500px" width="100%">
+        <igx-grid-toolbar></igx-grid-toolbar>
+
         <igx-column field="ProductName" header="Product Name" [sortable]="true" [movable]="true" [dataType]="'string'">
         </igx-column>
         <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [sortable]="true" [movable]="true" [dataType]="'string'">
@@ -15,4 +17,4 @@
             </ng-template>
         </igx-column>
     </igx-grid>
-</div>
+</div>

src/app/grid/grid-batchEditing-remotePaging/batch-editing-remote-paging.component.html

@@ -1,13 +1,15 @@
 <div class="grid__wrapper">
     <app-grid-with-transactions>
       <igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="540px" [paging]="true" [perPage]="perPage"
-      [paginationTemplate]="customPager" [rowEditable]="true" [primaryKey]="'ID'" [showToolbar]="true">
-        <ng-template igxToolbarCustomContent>
+      [paginationTemplate]="customPager" [rowEditable]="true" [primaryKey]="'ID'">
+        <igx-grid-toolbar>
+
             <button igxButton (click)="addRow()">Add Row</button>
             <button igxButton [disabled]="!grid1.transactions.canUndo" (click)="undo()">Undo</button>
             <button igxButton [disabled]="!grid1.transactions.canRedo" (click)="redo()">Redo</button>
             <button igxButton [disabled]="!hasTransactions" (click)="openCommitDialog()">Commit</button>
-        </ng-template>
+
+        </igx-grid-toolbar>
         <igx-column [pinned]="true" [filterable]="false" [editable]="false">
             <ng-template igxCell let-cell="cell" let-val>
                   <button igxButton (click)="deleteRow(cell.cellID.rowID)" [disabled]="cell.row.deleted">Delete</button>

src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.html

@@ -13,9 +13,9 @@
                 </igx-hint>
             </igx-input-group>
             <div class="grid-wrapper">
-                <igx-grid igxPreventDocumentScroll #grid [data]="data" primaryKey="ProductID" rowEditable="true" (onColumnInit)="initColumn($event)"
-                    [showToolbar]="true" [clipboardOptions]="options" [autoGenerate]="true">
-                    <ng-template igxToolbarCustomContent let-grid="grid">
+                <igx-grid igxPreventDocumentScroll #grid [data]="data" primaryKey="ProductID" rowEditable="true" (onColumnInit)="initColumn($event)" [clipboardOptions]="options" [autoGenerate]="true">
+                    <igx-grid-toolbar>
+
                         <div class="tlb">
                             <igx-switch [(ngModel)]="options.enabled">Grid copy behavior</igx-switch>
                             <igx-switch [(ngModel)]="options.copyHeaders">Copying of header labels</igx-switch>
@@ -25,7 +25,8 @@
                                 Selection
                             </button>
                         </div>
-                    </ng-template>
+
+                    </igx-grid-toolbar>
                 </igx-grid>
             </div>
 
@@ -37,4 +38,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>