Skip to content

Commit 978462b

Browse files
hanastasovhanastasov
authored
Merge branch 'vNext' into mch-export-switch
2 parents edef575 + 304dde9 commit 978462b

21 files changed

Lines changed: 163 additions & 215 deletions

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"domino": "^2.1.4",
6363
"file-saver": "^2.0.2",
6464
"hammerjs": "^2.0.8",
65-
"igniteui-angular": "^13.1.5",
65+
"igniteui-angular": "^13.2.0-beta.0",
6666
"igniteui-angular-charts": "^12.1.1",
6767
"igniteui-angular-core": "^12.1.1",
6868
"igniteui-angular-i18n": "^12.2.4",
@@ -118,4 +118,4 @@
118118
"typescript": "4.4.4",
119119
"webpack-bundle-analyzer": "^4.5.0"
120120
}
121-
}
121+
}

‎src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,37 @@
11
<div class="grid__wrapper">
2-
<igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
3-
(sortingDone)="removeSorting($event)">
2+
<igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%" sortable="true" [sortingOptions]="sortingOptions">
43
<igx-grid-toolbar>
4+
<button class="button-opitions" igxButton="raised" (click)="grid1.sortingExpressions = []">
5+
Clear Sorting
6+
</button>
7+
8+
<button class="button-opitions" igxButton="raised" (click)="grid1.groupingExpressions = []">
9+
Clear Grouped columns
10+
</button>
511
<igx-grid-toolbar-actions>
6-
<igx-select [(ngModel)]="currentSortingType" (selectionChanging)="sortTypeSelection($event)">
7-
<label igxLabel>Select Sorting Type</label>
8-
<igx-select-item *ngFor="let type of sortingTypes" [value]="type.value">
9-
{{type.name}}
10-
</igx-select-item>
11-
</igx-select>
12+
<igx-select (closed)="grid1.sortingExpressions = []">
13+
<label igxLabel>Select Sorting Type</label>
14+
<igx-select-item (click)="sortingOptions = type.toLocaleLowerCase() ==='single' ? {mode: 'single'} : {mode: 'multiple'}" *ngFor="let type of sortingTypes" [value]="type">
15+
{{type}}
16+
</igx-select-item>
17+
</igx-select>
1218
</igx-grid-toolbar-actions>
13-
1419
</igx-grid-toolbar>
15-
<igx-column field="OrderID" header="Order ID">
20+
21+
<igx-column field="OrderID" header="Order ID" [groupable]="true" sortable="true">
1622
</igx-column>
17-
<igx-column field="CategoryName" header="Category Name" [dataType]="'string'" sortable="true">
23+
<igx-column field="CategoryName" header="Category Name" [dataType]="'string'" [groupable]="true" sortable="true">
1824
</igx-column>
19-
<igx-column field="CompanyName" header="Company Name" [dataType]="'string'" sortable="true">
25+
<igx-column field="CompanyName" header="Company Name" [dataType]="'string'" [groupable]="true" sortable="true">
2026
</igx-column>
21-
<igx-column field="ShipCountry" header="Ship Country" [dataType]="'string'" sortable="true">
27+
<igx-column field="ShipCountry" header="Ship Country" [dataType]="'string'" [groupable]="true" sortable="true">
2228
</igx-column>
23-
<igx-column field="SaleAmount" header="Sale Amount" dataType="number" sortable="true">
29+
<igx-column field="SaleAmount" header="Sale Amount" dataType="number" [groupable]="true" sortable="true">
2430
<ng-template igxCell let-cell="cell" let-val let-row>
2531
${{val}}
2632
</ng-template>
2733
</igx-column>
28-
<igx-column field="ShippedDate" header="Shipped Date" [dataType]="'date'" [formatter]="formatDate"
29-
sortable="true">
34+
<igx-column field="ShippedDate" header="Shipped Date" [dataType]="'date'" [formatter]="formatDate" sortable="true">
3035
</igx-column>
3136
</igx-grid>
3237
</div>

‎src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,11 @@
22
margin: 0 auto;
33
padding: 16px;
44
}
5+
6+
.igx-grid-toolbar ::ng-deep {
7+
.igx-grid-toolbar__custom-content {
8+
display: flex;
9+
flex-direction: row;
10+
justify-content: flex-start;
11+
}
12+
}

‎src/app/grid/grid-sorting-sample/grid-sorting-sample.component.ts‎

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
/* eslint-disable @typescript-eslint/naming-convention */
22
import { Component, OnInit, ViewChild } from '@angular/core';
3-
import { DefaultSortingStrategy, IgxGridComponent, IgxSelectComponent, SortingDirection } from 'igniteui-angular';
3+
import { DefaultSortingStrategy, IgxGridComponent, ISortingOptions, SortingDirection } from 'igniteui-angular';
44
import { DATA } from '../../data/localData';
55

6-
// eslint-disable-next-line no-shadow
7-
enum TYPE {
8-
SINGLE = 'single',
9-
MULTI = 'multiple'
10-
}
116
@Component({
127
selector: 'app-grid-sample',
138
styleUrls: ['./grid-sorting-sample.component.scss'],
@@ -17,16 +12,12 @@ enum TYPE {
1712
export class SortingSampleComponent implements OnInit {
1813
@ViewChild('grid1', { read: IgxGridComponent, static: true })
1914
public grid1: IgxGridComponent;
20-
21-
@ViewChild(IgxSelectComponent)
22-
public igxSelect: IgxSelectComponent;
23-
2415
public data: any[];
25-
public sortingTypes = [{ name: 'Multiple Sort', value: TYPE.MULTI }, { name: 'Single Sort', value: TYPE.SINGLE }];
26-
public currentSortingType: TYPE = TYPE.SINGLE;
16+
public sortingTypes = ['SINGLE', 'MULTIPLE'];
17+
public sortingOptions: ISortingOptions = {mode: 'multiple'};
18+
19+
constructor() { }
2720

28-
constructor() {
29-
}
3021
public ngOnInit(): void {
3122
this.data = DATA;
3223
this.grid1.sortingExpressions = [
@@ -40,18 +31,4 @@ export class SortingSampleComponent implements OnInit {
4031
public formatDate(val: Date) {
4132
return new Intl.DateTimeFormat('en-US').format(val);
4233
}
43-
44-
public removeSorting($event) {
45-
if (this.currentSortingType === TYPE.SINGLE) {
46-
this.grid1.columns.forEach((col) => {
47-
if (!(col.field === $event.fieldName)) {
48-
this.grid1.clearSort(col.field);
49-
}
50-
});
51-
}
52-
}
53-
54-
public sortTypeSelection(event) {
55-
this.grid1.clearSort();
56-
}
5734
}

‎src/app/interactions/slider/slider-sample-1/slider-sample-1.component.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
<div class="sample-center">
22
<div class="container">
3-
<igx-slider id="slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [lowerBound]="100" [upperBound]="900" [(ngModel)]="priceRange"></igx-slider>
3+
<igx-slider id="slider"
4+
[type]="sliderType.RANGE"
5+
[minValue]="0"
6+
[maxValue]="1000"
7+
[lowerBound]="100"
8+
[upperBound]="900"
9+
[(lowerValue)]="priceRange.lower"
10+
[(upperValue)]="priceRange.upper">
11+
</igx-slider>
412
<div class="wrapper">
513
<igx-input-group type="border">
6-
<igx-prefix>USD</igx-prefix>
7-
<input #lowerInput igxInput type="number" id="lowerInput" [ngModel]="priceRange.lower" />
814
<label igxLabel for="lowerInput">Lower price:</label>
15+
<igx-prefix>$</igx-prefix>
16+
<input igxInput type="number" id="lowerInput" min="100" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" />
917
</igx-input-group>
1018
<igx-input-group type="border">
11-
<igx-prefix>USD</igx-prefix>
12-
<input #upperInput igxInput type="number" id="upperInput" [ngModel]="priceRange.upper" />
1319
<label igxLabel for="upperInput">Upper price:</label>
20+
<igx-prefix>$</igx-prefix>
21+
<input igxInput type="number" id="upperInput" [min]="priceRange.lower" max="900" [(ngModel)]="priceRange.upper" />
1422
</igx-input-group>
1523
</div>
1624
</div>

‎src/app/interactions/slider/slider-sample-1/slider-sample-1.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
display: flex;
99
flex-direction: column;
1010
padding: 16px;
11-
max-width: 500px;
11+
width: 100%;
1212
}
1313

1414
.wrapper {

‎src/app/interactions/slider/slider-sample-1/slider-sample-1.component.ts‎

Lines changed: 7 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,18 @@
1-
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
2-
import { IgxInputDirective, IgxInputState, IgxSliderComponent, IgxSliderType } from 'igniteui-angular';
3-
import { fromEvent, Subject } from 'rxjs';
4-
import { takeUntil } from 'rxjs/operators';
1+
import { Component } from '@angular/core';
2+
import { IgxSliderType } from 'igniteui-angular';
53

64
@Component({
75
selector: 'app-slider-sample-1',
86
styleUrls: ['./slider-sample-1.component.scss'],
97
templateUrl: './slider-sample-1.component.html'
108
})
11-
export class SliderSample1Component implements OnInit, OnDestroy {
12-
13-
@ViewChild(IgxSliderComponent, { static: true })
14-
public slider: IgxSliderComponent;
15-
16-
@ViewChild('lowerInput', { read: IgxInputDirective, static: true })
17-
public lowerInput: IgxInputDirective;
18-
19-
@ViewChild('upperInput', { read: IgxInputDirective, static: true })
20-
public upperInput: IgxInputDirective;
9+
export class SliderSample1Component {
2110

2211
public sliderType = IgxSliderType;
23-
public priceRange: PriceRange = new PriceRange(200, 800);
24-
public $destroyer = new Subject<boolean>();
12+
public priceRange = {
13+
lower: 200,
14+
upper: 800
15+
};
2516

2617
constructor() { }
27-
28-
public ngOnInit() {
29-
fromEvent(this.lowerInput.nativeElement, 'input').pipe(takeUntil(this.$destroyer))
30-
.subscribe((event) => {
31-
this.validate(this.lowerInput, event);
32-
});
33-
34-
fromEvent(this.lowerInput.nativeElement, 'blur').pipe(takeUntil(this.$destroyer))
35-
.subscribe((event) => {
36-
this.validate(this.lowerInput, event);
37-
});
38-
39-
fromEvent(this.upperInput.nativeElement, 'input').pipe(takeUntil(this.$destroyer))
40-
.subscribe((event) => {
41-
this.validate(this.upperInput, event);
42-
});
43-
44-
fromEvent(this.upperInput.nativeElement, 'blur').pipe(takeUntil(this.$destroyer))
45-
.subscribe((event) => {
46-
this.validate(this.upperInput, event);
47-
});
48-
}
49-
50-
public ngOnDestroy() {
51-
this.$destroyer.next(true);
52-
}
53-
54-
public validate(input: IgxInputDirective, event) {
55-
const val = parseInt(input.value, 10);
56-
if (isNaN(val) || val > this.slider.upperBound || val < this.slider.lowerBound) {
57-
input.valid = IgxInputState.INVALID;
58-
} else {
59-
input.valid = IgxInputState.VALID;
60-
this.updatePriceRange(val, event.currentTarget);
61-
}
62-
}
63-
64-
public updatePriceRange(value, event) {
65-
const prevPriceRange = this.priceRange;
66-
switch (event.id) {
67-
case 'lowerInput': {
68-
this.priceRange = new PriceRange(value, prevPriceRange.upper);
69-
break;
70-
}
71-
case 'upperInput': {
72-
this.priceRange = new PriceRange(prevPriceRange.lower, value);
73-
break;
74-
}
75-
}
76-
}
77-
}
78-
class PriceRange {
79-
constructor(
80-
public lower: number,
81-
public upper: number
82-
) {
83-
}
8418
}

‎src/app/interactions/slider/slider-sample-3/slider-sample-3.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="sample-center">
22
<div class="container">
3-
<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
3+
<igx-slider [step]="10" [(ngModel)]="task.completion"></igx-slider>
44
<igx-input-group type="border">
5-
<input igxInput id="percentInput" type="number" [ngModel]="task.completion" />
5+
<input igxInput id="percentInput" type="number" min="0" max="100" step="10" [(ngModel)]="task.completion" />
66
<label igxLabel for="percentInput">Task Completion</label>
77
<igx-suffix>%</igx-suffix>
88
</igx-input-group>

‎src/app/interactions/slider/slider-sample-3/slider-sample-3.component.ts‎

Lines changed: 6 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,21 @@
1-
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
2-
import { IgxInputDirective, IgxInputState, IgxSliderComponent } from 'igniteui-angular';
3-
import { fromEvent, Subject } from 'rxjs';
4-
import { takeUntil } from 'rxjs/operators';
1+
import { Component, ViewChild } from '@angular/core';
2+
import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
53

64
@Component({
75
selector: 'app-slider-sample-3',
86
styleUrls: ['./slider-sample-3.component.scss'],
97
templateUrl: './slider-sample-3.component.html'
108
})
11-
export class SliderSample3Component implements OnInit, OnDestroy {
9+
export class SliderSample3Component {
1210
@ViewChild(IgxInputDirective, { static: true })
1311
public input: IgxInputDirective;
1412

1513
@ViewChild(IgxSliderComponent, { static: true })
1614
public slider: IgxSliderComponent;
1715

18-
public task: Task = new Task(10);
19-
20-
public $destroyer = new Subject<boolean>();
16+
public task = {
17+
completion: 10
18+
};
2119

2220
constructor() { }
23-
24-
public updateTask() {
25-
const val = parseInt(this.input.value, 10);
26-
if (isNaN(val) || val < this.slider.lowerBound || val > this.slider.upperBound || val % 10 > 0) {
27-
this.input.valid = IgxInputState.INVALID;
28-
} else {
29-
this.input.valid = IgxInputState.VALID;
30-
this.task.completion = val;
31-
}
32-
}
33-
34-
public ngOnInit() {
35-
fromEvent(this.input.nativeElement, 'input').pipe(takeUntil(this.$destroyer))
36-
.subscribe(() => {
37-
this.updateTask();
38-
});
39-
40-
fromEvent(this.input.nativeElement, 'blur').pipe(takeUntil(this.$destroyer))
41-
.subscribe(() => {
42-
this.updateTask();
43-
});
44-
}
45-
46-
public ngOnDestroy() {
47-
this.$destroyer.next(true);
48-
}
49-
}
50-
51-
class Task {
52-
constructor(
53-
public completion: number
54-
) {
55-
}
5621
}

0 commit comments

Comments
 (0)