Skip to content

Commit 05ff063

Browse files
rkaraivanovrkaraivanov
authored
Merge branch 'master' into circular-dependencies-slider-master
2 parents 70edf32 + 5a9f07a commit 05ff063

File tree

65 files changed

+1856
-896
lines changed

Some content is hidden

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

65 files changed

+1856
-896
lines changed

‎CHANGELOG.md

+41
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,35 @@ All notable changes for each version of this project will be documented in this
1919
- **Breaking Change** `onClose` event is renamed to `onClosed`.
2020
- **Behavioral Change** - action buttons are now available in the dropdown mode.
2121
- **Feature** `igxDatePicker` and `igxTimePicker` now provide the ability for adding custom action buttons. Read up more information in [igxDatePicker ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/date-picker/README.md) or [igxTimePicker ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/time-picker/README.md)
22+
- `IgxToggleAction` / `IgxTooltip`: Removed the deprecated `closeOnOutsideClick` Input that has been superseded by `overlaySettings` in 6.2.0.
23+
24+
- `IgxList` - The list component has been refactored. It now includes several new supporting directives:
25+
- `igxListThumbnail` - Use it to mark the target as list thumbnail which will be automatically positioned as a first item in the list item;
26+
- `igxListAction` - Use it to mark the target as list action which will be automatically positioned as a last item in the list item;
27+
- `igxListLine` - Use it to mark the target as list content which will be automatically positioned between the thumbnail and action;
28+
- `igxListLineTitle` - Use it to mark the target as list title which will be automatically formatted as a list-item title;
29+
- `igxListLineSubTitle` - Use it to mark the target as list subtitle which will be automatically formatted as a list-item subtitle;
30+
31+
```html
32+
<igx-list>
33+
<igx-list-item [isHeader]="true">List items</igx-list-item>
34+
<igx-list-item>
35+
<igx-avatar igxListThumbnail></igx-avatar>
36+
<h1 igxListLineTitle>List item title</h1>
37+
<h3 igxListLineSubTitle>List item subtitle</h3>
38+
<igx-icon igxListAction>info</igx-icon>
39+
</igx-list-item>
40+
</igx-list>
41+
42+
<igx-list>
43+
<igx-list-item [isHeader]="true">List items</igx-list-item>
44+
<igx-list-item>
45+
<igx-avatar igxListThumbnail></igx-avatar>
46+
<span igxListLine>Some content</span>
47+
<igx-icon igxListAction>info</igx-icon>
48+
</igx-list-item>
49+
</igx-list>
50+
```
2251

2352
## 7.3.4
2453

@@ -46,6 +75,18 @@ All notable changes for each version of this project will be documented in this
4675
- **Behavioral Change** - action buttons are now available in the dropdown mode.
4776
- **Feature** `IgxDatePickerComponent` now provides the ability for adding custom action buttons. Read up more information in the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/date-picker/README.md)
4877

78+
- Excel-Style Filtering and Quick Filtering user interfaces now display the date picker's calendar in a dropdown.
79+
- `IgxCard` - The card component has been refactored. It now includes several new supporting components/directives:
80+
- `igxCardHeaderTitle` - tag your headings placed in the `igx-card-header` container to be displayed as a card title;
81+
- `igxCardHeaderSubtitle` - tag your headings placed in the `igx-card-header` container to be displayed as a card subtitle;
82+
- `igxCardThumbnail` - tag anything placed in the `igx-card-header` as a thumb to be placed to the left of your titles;
83+
- `igx-card-header` - the card header can now detect and automatically position `igx-avatar`s placed in it;
84+
- `igx-card-media` - wrap images or videos that will be automatically sized for you;
85+
- `igx-card-actions` - the card actions can now detect and automatically position all `igxButton`s placed in it;
86+
- The card has a new `type` property. It can be set to `outlined` to get the new outlined card look;
87+
- The card has a new `horizontal` property. When set to true, the layout will become horizontally aligned;
88+
- New Directive `igx-divider` - The igx-divider is a thin, configurable line that groups content in lists and layouts.
89+
4990
### Bug Fixing
5091
- igx-input: Top of Japanese characters get cut off in Density Compact mode #4752
5192
- When no condition is provided, filter() method of grid throws undescriptive error #4897

‎projects/igniteui-angular/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"@angular/core": "^8.0.0",
7676
"@angular/animations": "^8.0.0",
7777
"@angular/forms": "^8.0.0",
78+
"node-sass": "^4.9.0",
7879
"web-animations-js": "^2.3.1"
7980
},
8081
"devDependencies": {

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

-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPip
3434
import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
3535
import { Subject, Subscription } from 'rxjs';
3636
import { takeUntil } from 'rxjs/operators';
37-
import { DeprecateProperty } from '../core/deprecateDecorators';
3837
import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
3938
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
4039
import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';

‎projects/igniteui-angular/src/lib/core/grid-selection.ts

+69-30
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ interface ISelectionKeyboardState {
3333

3434
interface ISelectionPointerState extends ISelectionKeyboardState {
3535
ctrl: boolean;
36+
primaryButton: boolean;
3637
}
3738

3839
type SelectionState = ISelectionKeyboardState | ISelectionPointerState;
@@ -105,7 +106,7 @@ export class IgxGridCRUDService {
105106
}
106107

107108
sameRow(rowID): boolean {
108-
return this.row.id === rowID;
109+
return this.row && this.row.id === rowID;
109110
}
110111

111112
sameCell(cell: IgxCell): boolean {
@@ -180,6 +181,8 @@ export class IgxGridCRUDService {
180181
this.beginRowEdit();
181182
return;
182183
}
184+
} else {
185+
this.endRowEdit();
183186
}
184187
}
185188

@@ -209,6 +212,7 @@ export class IgxGridSelectionService {
209212
selection = new Map<number, Set<number>>();
210213
temp = new Map<number, Set<number>>();
211214
_ranges: Set<string> = new Set<string>();
215+
_selectionRange: Range;
212216

213217

214218
/**
@@ -218,9 +222,7 @@ export class IgxGridSelectionService {
218222
get ranges(): GridSelectionRange[] {
219223

220224
// The last action was keyboard + shift selection -> add it
221-
if (this.keyboardState.range) {
222-
this._ranges.add(JSON.stringify(this.keyboardState.range));
223-
}
225+
this.addKeyboardRange();
224226

225227
const ranges = Array.from(this._ranges).map(range => JSON.parse(range));
226228

@@ -232,6 +234,14 @@ export class IgxGridSelectionService {
232234
return ranges;
233235
}
234236

237+
get primaryButton(): boolean {
238+
return this.pointerState.primaryButton;
239+
}
240+
241+
set primaryButton(value: boolean) {
242+
this.pointerState.primaryButton = value;
243+
}
244+
235245
constructor(private zone: NgZone) {
236246
this.initPointerState();
237247
this.initKeyboardState();
@@ -255,6 +265,7 @@ export class IgxGridSelectionService {
255265
this.pointerState.ctrl = false;
256266
this.pointerState.shift = false;
257267
this.pointerState.range = null;
268+
this.pointerState.primaryButton = true;
258269
}
259270

260271
/**
@@ -268,6 +279,15 @@ export class IgxGridSelectionService {
268279
this._ranges.add(JSON.stringify(this.generateRange(node)));
269280
}
270281

282+
/**
283+
* Adds the active keyboard range selection (if any) to the `ranges` meta.
284+
*/
285+
addKeyboardRange(): void {
286+
if (this.keyboardState.range) {
287+
this._ranges.add(JSON.stringify(this.keyboardState.range));
288+
}
289+
}
290+
271291
remove(node: ISelectionNode): void {
272292
if (this.selection.has(node.row)) {
273293
this.selection.get(node.row).delete(node.column);
@@ -287,13 +307,22 @@ export class IgxGridSelectionService {
287307
return this.isActiveNode(node) || this.isInMap(node);
288308
}
289309

290-
isActiveNode(node: ISelectionNode): boolean {
310+
isActiveNode(node: ISelectionNode, mrl = false): boolean {
291311
if (this.activeElement) {
292-
return this.activeElement.column === node.column && this.activeElement.row === node.row;
312+
const isActive = this.activeElement.column === node.column && this.activeElement.row === node.row;
313+
if (mrl) {
314+
const layout = this.activeElement.layout;
315+
return isActive && this.isActiveLayout(layout, node.layout);
316+
}
317+
return isActive;
293318
}
294319
return false;
295320
}
296321

322+
isActiveLayout(current: IMultiRowLayoutNode, target: IMultiRowLayoutNode): boolean {
323+
return current.columnVisibleIndex === target.columnVisibleIndex;
324+
}
325+
297326
addRangeMeta(node: ISelectionNode, state?: SelectionState): void {
298327
this._ranges.add(JSON.stringify(this.generateRange(node, state)));
299328
}
@@ -329,7 +358,7 @@ export class IgxGridSelectionService {
329358
/**
330359
*
331360
*/
332-
keyboardStateOnKeydown(node: ISelectionNode, shift: boolean, shiftTab: boolean) {
361+
keyboardStateOnKeydown(node: ISelectionNode, shift: boolean, shiftTab: boolean): void {
333362
this.keyboardState.active = true;
334363
this.initPointerState();
335364
this.keyboardState.shift = shift && !shiftTab;
@@ -363,10 +392,7 @@ export class IgxGridSelectionService {
363392

364393
pointerDown(node: ISelectionNode, shift: boolean, ctrl: boolean): void {
365394

366-
if (this.keyboardState.range) {
367-
this._ranges.add(JSON.stringify(this.keyboardState.range));
368-
}
369-
395+
this.addKeyboardRange();
370396
this.initKeyboardState();
371397
this.pointerState.ctrl = ctrl;
372398
this.pointerState.shift = shift;
@@ -379,7 +405,7 @@ export class IgxGridSelectionService {
379405
if (shift) {
380406
// No previously 'clicked' node. Use the last active node.
381407
if (!this.pointerState.node) {
382-
this.pointerState.node = this.activeElement;
408+
this.pointerState.node = this.activeElement || node;
383409
}
384410
this.pointerDownShiftKey(node);
385411
this.clearTextSelection();
@@ -414,8 +440,9 @@ export class IgxGridSelectionService {
414440
}
415441
}
416442

417-
pointerEnter(node: ISelectionNode, dragEnabled: boolean): boolean {
418-
this.dragMode = dragEnabled;
443+
pointerEnter(node: ISelectionNode, event: PointerEvent): boolean {
444+
// https://www.w3.org/TR/pointerevents/#the-button-property
445+
this.dragMode = event.buttons === 1 && event.button === -1;
419446
if (!this.dragMode) {
420447
return false;
421448
}
@@ -428,13 +455,14 @@ export class IgxGridSelectionService {
428455
this.pointerState.node = node;
429456
}
430457

431-
this.pointerState.ctrl ? this.blah(node, this.pointerState) :
458+
this.pointerState.ctrl ? this.selectRange(node, this.pointerState, this.temp) :
432459
this.dragSelect(node, this.pointerState);
433460
return true;
434461
}
435462

436463
pointerUp(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>): boolean {
437464
if (this.dragMode) {
465+
this.restoreTextSelection();
438466
this.addRangeMeta(node, this.pointerState);
439467
this.mergeMap(this.selection, this.temp);
440468
this.zone.runTask(() => emitter.emit(this.generateRange(node, this.pointerState)));
@@ -445,6 +473,7 @@ export class IgxGridSelectionService {
445473

446474
if (this.pointerState.shift) {
447475
this.clearTextSelection();
476+
this.restoreTextSelection();
448477
emitter.emit(this.generateRange(node, this.pointerState));
449478
this.addRangeMeta(node, this.pointerState);
450479
return true;
@@ -454,23 +483,15 @@ export class IgxGridSelectionService {
454483
return false;
455484
}
456485

457-
selectRange(node: ISelectionNode, state: SelectionState) {
458-
const { rowStart, rowEnd, columnStart, columnEnd } = this.generateRange(node, state);
459-
for (let i = rowStart; i <= rowEnd; i++) {
460-
for (let j = columnStart as number; j <= columnEnd; j++) {
461-
this.selection.has(i) ? this.selection.get(i).add(j) :
462-
this.selection.set(i, new Set<number>()).get(i).add(j);
463-
}
486+
selectRange(node: ISelectionNode, state: SelectionState, collection: Map<number, Set<number>> = this.selection): void {
487+
if (collection === this.temp) {
488+
collection.clear();
464489
}
465-
}
466-
467-
blah(node: ISelectionNode, state: SelectionState) {
468-
this.temp.clear();
469490
const { rowStart, rowEnd, columnStart, columnEnd } = this.generateRange(node, state);
470491
for (let i = rowStart; i <= rowEnd; i++) {
471492
for (let j = columnStart as number; j <= columnEnd; j++) {
472-
this.temp.has(i) ? this.temp.get(i).add(j) :
473-
this.temp.set(i, new Set<number>()).get(i).add(j);
493+
collection.has(i) ? collection.get(i).add(j) :
494+
collection.set(i, new Set<number>()).get(i).add(j);
474495
}
475496
}
476497
}
@@ -488,10 +509,28 @@ export class IgxGridSelectionService {
488509
this._ranges.clear();
489510
}
490511

491-
clearTextSelection() {
512+
clearTextSelection(): void {
492513
const selection = window.getSelection();
493-
if (selection) {
514+
if (selection.rangeCount) {
515+
this._selectionRange = selection.getRangeAt(0);
516+
this._selectionRange.collapse(true);
494517
selection.removeAllRanges();
495518
}
496519
}
520+
521+
restoreTextSelection(): void {
522+
const selection = window.getSelection();
523+
if (!selection.rangeCount) {
524+
selection.addRange(this._selectionRange);
525+
}
526+
}
527+
528+
_moveSelectionChrome(node: Node) {
529+
const selection = window.getSelection();
530+
selection.removeAllRanges();
531+
const range = new Range();
532+
range.selectNode(node);
533+
range.collapse(true);
534+
selection.addRange(range);
535+
}
497536
}

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss

+36
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,26 @@
4545
}
4646
}
4747

48+
@include e(item-thumbnail) {
49+
@extend %igx-list__item-thumbnail !optional;
50+
}
51+
52+
@include e(item-actions) {
53+
@extend %igx-list__item-actions !optional;
54+
}
55+
56+
@include e(item-lines) {
57+
@extend %igx-list__item-lines !optional;
58+
}
59+
60+
@include e(item-line-title) {
61+
@extend %igx-list__item-line-title !optional;
62+
}
63+
64+
@include e(item-line-subtitle) {
65+
@extend %igx-list__item-line-subtitle !optional;
66+
}
67+
4868
@include e(empty) {
4969
@extend %igx-list !optional;
5070
@extend %igx-list-empty !optional;
@@ -65,6 +85,14 @@
6585
@include m(compact) {
6686
@extend %igx-list !optional;
6787

88+
@include e(item-thumbnail) {
89+
@extend %igx-list__item-thumbnail--compact !optional;
90+
}
91+
92+
@include e(item-actions) {
93+
@extend %igx-list__item-actions--compact !optional;
94+
}
95+
6896
@include e(empty) {
6997
@include b(message) {
7098
@extend %igx-list-empty-message--compact !optional;
@@ -83,6 +111,14 @@
83111
@include m(cosy) {
84112
@extend %igx-list !optional;
85113

114+
@include e(item-thumbnail) {
115+
@extend %igx-list__item-thumbnail--cosy !optional;
116+
}
117+
118+
@include e(item-actions) {
119+
@extend %igx-list__item-actions--cosy !optional;
120+
}
121+
86122
@include e(empty) {
87123
@include b(message) {
88124
@extend %igx-list-empty-message--cosy !optional;

0 commit comments

Comments
 (0)