Skip to content

Commit d5f3d98

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Merge from base.
2 parents 8604bbe + abaffa1 commit d5f3d98

File tree

300 files changed

+11482
-3619
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

300 files changed

+11482
-3619
lines changed

‎CHANGELOG.md‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,104 @@
1-
# Ignite UI for Angular Change Log
1+
# Ignite UI for Angular Change Log
22

33
All notable changes for each version of this project will be documented in this file.
44

55
## 8.2.0
66

7+
### New theme
8+
Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.
9+
Depending on your use case you can use one of the following mixins:
10+
`igx-fluent-theme` and `igx-fluent-dark-theme`
11+
12+
We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
13+
14+
Next example shows how you can use the Fluent theme.
15+
16+
```scss
17+
// Light version
18+
.fluent-word-theme {
19+
@include igx-fluent-theme($fluent-word-palette);
20+
}
21+
22+
// Dark version
23+
.fluent-excel-dark-theme {
24+
@include igx-fluent-dark-theme($fluent-excel-palette);
25+
}
26+
```
27+
28+
For more information about the theming please read our [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html)
29+
730
### New Features
831
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
932
- `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
1033
- `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
34+
- introduced new properties `cellSelection` and `rowSelection` which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also `hideRowSelectors` property is added, which allows you to show and hide row selectors when row selection is enabled.
35+
- `IgxHierarchicalGrid`
36+
- Row Islands now emit child grid events with an additional argument - `owner`, which holds reference to the related child grid component instance.
37+
- `IgxDrag`
38+
- Dragging without ghost. Now it is possible to drag the base element `igxDrag` is instanced on by setting the new input `ghost` to false.
39+
- Ghost template. A custom ghost template reference can be provided on the new `ghostTemplate` input.
40+
- Dragging using a single or multiple handles. New `igxDragHandle` directive is exposed to specify a handle by which and element can be interacted with instead of the whole element `igxDrag` is instanced on.
41+
- Linking of drag and drop elements. This can be achieved by using the new provided `dragChannel` input, specifying each element to which channel it corresponds.
42+
- Drag animation improvements. Three new methods have been exposed in place of the old `animateToOrigin` input in order to provide more flexibility when wanting to have transition animation to specific position when dropping. `setLocation`, `transitionToOrigin` and `transitionTo` are all methods that provide a various way to animate a transition to a specific location for the dragged element.
43+
- New getters - `location` and `originLocation` to aid in applying transition animations.
44+
- New outputs - `dragMove`, `ghostCreate` and `ghostDestroy`
45+
- `IgxDrop`
46+
- Linking of drag and drop elements. This can be achieved by using the new provided `dropChannel` input, specifying each drop area to which channel it corresponds.
47+
- Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert. Also an input `dropStrategy` to the `igxDrop` which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.
48+
1149
### General
1250
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
51+
- `isCellSelected` method has been deprecated. Now you can use `selected` property.
52+
- `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value).
53+
- Removed deprecated event `OnFocusChange`
1354
- **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
1455
- **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
1556
- **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
57+
- **Breaking Change** `onRowSelectionChange` event arguments are changed. The `row` property has been removed and the properties `added`, `removed` and `cancel` are newly added.
1658
- **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
59+
- **Breaking Change** `onRowDragEnd` and `onRowDragStart` event arguments are changed - `owner` now holds reference to the grid component instance, while `dragDirective` hold reference to the drag directive.
60+
- `IgxCombo`
61+
- Combo selection is now consistent when `valueKey` is defined. When `valueKey` is specified, selection is based on the value keys of the items. For example:
62+
```html
63+
<igx-combo [data]="myCustomData" valueKey="id" displayKey="text"></igx-combo>
64+
```
65+
```typescript
66+
export class MyCombo {
67+
...
68+
public combo: IgxComboComponent;
69+
public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
70+
...
71+
ngOnInit() {
72+
// Selection is done only by valueKey property value
73+
this.combo.selectItems([0, 1]);
74+
}
75+
}
76+
```
77+
- **Breaking Change** When using `[valueKey]`, combo methods, events and outputs **cannot** be handled with *data item references*.
78+
- For more information, visit the component's [readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/combo/README.md)
79+
1780
## 8.1.4
18-
- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
81+
- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
82+
83+
- `IgxDrag`
84+
- Deprecated inputs - `hideBaseOnDrag`, `animateOnRelease`, `visible`.
85+
- Deprecated methods - `dropFinished`.
86+
- **Breaking Change** `ghostImageClass` input is renamed to `ghostClass`.
87+
- **Breaking Change** `dragGhostHost` input is renamed to `ghostHost`.
88+
- **Breaking Change** `returnMoveEnd` input is renamed to `transitioned`.
89+
- **Breaking Change** `onDragStart` output is renamed to `dragStart`.
90+
- **Breaking Change** `onDragEnd` output is renamed to `dragEnd`.
91+
92+
- `IgxDrop`
93+
- **Breaking Change** Default drop strategy is now changed to not perform any actions.
94+
- **Breaking Change** `onEnter` output is renamed to `enter`.
95+
- **Breaking Change** `onOver` output is renamed to `over`.
96+
- **Breaking Change** `onLeave` output is renamed to `leave`.
97+
- **Breaking Change** `onDrop` output is renamed to `dropped`.
98+
- **Breaking Change** Interfaces `IgxDropEnterEventArgs`, `IgxDropLeaveEventArgs` are both now called `IDragBaseEventArgs`.
99+
- **Breaking Change** Interfaces `IgxDropEventArgs` is renamed to `IDropDroppedEventArgs`.
100+
- **Breaking Change** Outputs `enter`, `over`, `leave`(former `onEnter`, `onOver`, `onLeave`) now have arguments of type `IDropBaseEventArgs`
101+
- **Breaking Change** Output `dropped` (former `onDrop`) now have arguments of type `IDropDroppedEventArgs`
19102

20103
## 8.1.3
21104
- `IgxCombo`

‎projects/igniteui-angular/migrations/update-8_2_0/changes/inputs.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "renderGhost",
6+
"replaceWith": "ghost",
7+
"owner": {
8+
"selector": "igxDrag",
9+
"type": "directive"
10+
}
11+
},
12+
{
13+
"name": "ghostImageClass",
14+
"replaceWith": "ghostClass",
15+
"owner": {
16+
"selector": "igxDrag",
17+
"type": "directive"
18+
}
19+
},
20+
{
21+
"name": "dragGhostHost",
22+
"replaceWith": "ghostHost",
23+
"owner": {
24+
"selector": "igxDrag",
25+
"type": "directive"
26+
}
27+
}
28+
]
29+
}

‎projects/igniteui-angular/migrations/update-8_2_0/changes/outputs.json‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "onGhostCreate",
6+
"replaceWith": "ghostCreate",
7+
"owner": {
8+
"selector": "igxDrag",
9+
"type": "directive"
10+
}
11+
},
12+
{
13+
"name": "onGhostDestroy",
14+
"replaceWith": "ghostDestroy",
15+
"owner": {
16+
"selector": "igxDrag",
17+
"type": "directive"
18+
}
19+
},
20+
{
21+
"name": "returnMoveEnd",
22+
"replaceWith": "transitioned",
23+
"owner": {
24+
"selector": "igxDrag",
25+
"type": "directive"
26+
}
27+
},
28+
{
29+
"name": "dragClicked",
30+
"replaceWith": "click",
31+
"owner": {
32+
"selector": "igxDrag",
33+
"type": "directive"
34+
}
35+
},
36+
{
37+
"name": "onEnter",
38+
"replaceWith": "enter",
39+
"owner": {
40+
"selector": "igxDrop",
41+
"type": "directive"
42+
}
43+
},
44+
{
45+
"name": "onLeave",
46+
"replaceWith": "leave",
47+
"owner": {
48+
"selector": "igxDrop",
49+
"type": "directive"
50+
}
51+
},
52+
{
53+
"name": "onDrop",
54+
"replaceWith": "dropped",
55+
"owner": {
56+
"selector": "igxDrop",
57+
"type": "directive"
58+
}
59+
}
60+
]
61+
}

‎projects/igniteui-angular/migrations/update-8_2_0/index.spec.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,32 @@ describe('Update 8.2.0', () => {
5050

5151
done();
5252
});
53+
54+
it('should update igxDrag input bindings', done => {
55+
appTree.create(
56+
'/testSrc/appPrefix/component/custom.component.html',
57+
`<div igxDrag [renderGhost]="true" [ghostImageClass]="'casper'" [dragGhostHost]="host">Drag me</div>`);
58+
const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
59+
60+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
61+
.toEqual(
62+
`<div igxDrag [ghost]="true" [ghostClass]="'casper'" [ghostHost]="host">Drag me</div>`);
63+
done();
64+
});
65+
66+
it('should update igxDrag and igxDrop outputs bindings', done => {
67+
appTree.create(
68+
'/testSrc/appPrefix/component/custom.component.html',
69+
`<div igxDrag (onGhostCreate)="ghostCreateHandler($event)" (onGhostDestroy)="ghostDestroyHandler($event)" (returnMoveEnd)="moveEndHandler($event)" (dragClicked)="clickHandler($event)">Drag me</div>
70+
<div igxDrop (onEnter)="enterHandler($event)" (onLeave)="leaveHandler($event)" (onDrop)="dropHandler($event)">drop area</div>
71+
`);
72+
const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
73+
74+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
75+
.toEqual(
76+
`<div igxDrag (ghostCreate)="ghostCreateHandler($event)" (ghostDestroy)="ghostDestroyHandler($event)" (transitioned)="moveEndHandler($event)" (click)="clickHandler($event)">Drag me</div>
77+
<div igxDrop (enter)="enterHandler($event)" (leave)="leaveHandler($event)" (dropped)="dropHandler($event)">drop area</div>
78+
`);
79+
done();
80+
});
5381
});

‎projects/igniteui-angular/src/lib/banner/banner.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import { IgxButtonModule } from '../directives/button/button.directive';
99
import { IgxRippleModule } from '../directives/ripple/ripple.directive';
1010
import { IgxBannerActionsDirective } from './banner.directives';
1111
import { CommonModule } from '@angular/common';
12-
import { CancelableEventArgs } from '../core/utils';
12+
import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
1313

14-
export interface BannerEventArgs {
14+
export interface BannerEventArgs extends IBaseEventArgs {
1515
banner: IgxBannerComponent;
1616
event?: Event;
1717
}

‎projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
2323
import { IgxIconModule } from '../icon/index';
2424
import { takeUntil } from 'rxjs/operators';
2525
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions, DisplayDensity } from '../core/density';
26+
import { IBaseEventArgs } from '../core/utils';
2627

2728
export enum ButtonGroupAlignment { horizontal, vertical }
2829
let NEXT_ID = 0;
@@ -424,7 +425,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
424425
}
425426
}
426427

427-
export interface IButtonGroupEventArgs {
428+
export interface IButtonGroupEventArgs extends IBaseEventArgs {
428429
button: IgxButtonDirective;
429430
index: number;
430431
}

‎projects/igniteui-angular/src/lib/calendar/calendar.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ export function isDateInRanges(date: Date, ranges: DateRangeDescriptor[]): boole
5252
date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
5353
const dateInMs = date.getTime();
5454

55+
if (!ranges) {
56+
return false;
57+
}
58+
5559
for (const descriptor of ranges) {
5660
const dRanges = descriptor.dateRange ? descriptor.dateRange.map(
5761
r => new Date(r.getFullYear(), r.getMonth(), r.getDate())) : undefined;
@@ -296,7 +300,7 @@ export class Calendar {
296300

297301
const toType = (partType: string) => {
298302
const index = formattedParts.findIndex(({ type }) => type === partType);
299-
const o: IFormattedParts = { value: '', literal: '', combined: ''};
303+
const o: IFormattedParts = { value: '', literal: '', combined: '' };
300304

301305
if (partType === 'era' && index > -1) {
302306
o.value = formattedParts[index].value;
@@ -316,7 +320,7 @@ export class Calendar {
316320
}
317321
} else {
318322
for (const each of parts) {
319-
result[each] = { value: '', literal: '', combined: ''};
323+
result[each] = { value: '', literal: '', combined: '' };
320324
}
321325
}
322326
return result;

‎projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<ng-content></ng-content>
1+
<span class="igx-calendar__date-content">
2+
<ng-content></ng-content>
3+
</span>

‎projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, Input, Output, EventEmitter, HostBinding, ElementRef, HostListener } from '@angular/core';
2-
import { ICalendarDate, isDateInRanges } from '../calendar';
3-
import { DateRangeDescriptor } from '../../core/dates';
2+
import { ICalendarDate, isDateInRanges, Calendar } from '../calendar';
3+
import { DateRangeDescriptor, DateRangeType } from '../../core/dates';
44
import { CalendarSelection } from '../calendar-base';
55

66
/**
@@ -40,10 +40,13 @@ export class IgxDayItemComponent {
4040
}
4141

4242
if (this.selection === CalendarSelection.SINGLE) {
43-
this._selected = (this.value as Date).getTime() === date.getTime();
43+
this._selected = (this.value as Date).getTime() === date.getTime();
4444
} else {
45-
this._selected = (this.value as Date[])
46-
.some((each) => each.getTime() === date.getTime());
45+
const selectedDates = (this.value as Date[]);
46+
const currentDate = selectedDates.find(element => element.getTime() === date.getTime());
47+
48+
this._index = selectedDates.indexOf(currentDate) + 1;
49+
this._selected = !!this._index;
4750
}
4851

4952
return this._selected;
@@ -126,7 +129,7 @@ export class IgxDayItemComponent {
126129

127130
@HostBinding('class.igx-calendar__date--current')
128131
public get isTodayCSS(): boolean {
129-
return this.isToday && !this.selected;
132+
return this.isToday;
130133
}
131134

132135
@HostBinding('class.igx-calendar__date--selected')
@@ -144,11 +147,52 @@ export class IgxDayItemComponent {
144147
return this.isDisabled || this.isOutOfRange;
145148
}
146149

150+
@HostBinding('class.igx-calendar__date--range')
151+
public get isWithinRange() {
152+
if (Array.isArray(this.value) && this.value.length > 1) {
153+
154+
return isDateInRanges(this.date.date,
155+
[
156+
{
157+
type: DateRangeType.Between,
158+
dateRange: [this.value[0], this.value[this.value.length - 1]]
159+
}
160+
]
161+
);
162+
}
163+
164+
return false;
165+
}
166+
147167
@HostBinding('class.igx-calendar__date--special')
148168
public get isSpecialCSS(): boolean {
149169
return this.isSpecial;
150170
}
151171

172+
@HostBinding('class.igx-calendar__date--single')
173+
public get isSingleSelection(): boolean {
174+
return this.selection !== CalendarSelection.RANGE;
175+
}
176+
177+
@HostBinding('class.igx-calendar__date--first')
178+
public get isFirstInRange(): boolean {
179+
if (this.isSingleSelection) {
180+
return false;
181+
}
182+
183+
return this._index === 1;
184+
}
185+
186+
@HostBinding('class.igx-calendar__date--last')
187+
public get isLastInRange(): boolean {
188+
if (this.isSingleSelection) {
189+
return false;
190+
}
191+
192+
return (this.value as Date[]).length === this._index;
193+
}
194+
195+
private _index: Number;
152196
private _selected = false;
153197

154198
constructor(private elementRef: ElementRef) { }

0 commit comments

Comments
 (0)