Skip to content

Commit cdc41c7

Browse files
authored
Merge branch 'master' into dTsvetkov/feat-9020-master
2 parents 25772e1 + 035c41b commit cdc41c7

37 files changed

+1015
-630
lines changed

CHANGELOG.md

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ All notable changes for each version of this project will be documented in this
1414
<igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
1515
</igx-grid-toolbar-actions>
1616
```
17-
- `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file.
1817
- `IgxPaginatorComponent`
1918
- Added `paging` and `pagingDone` events; `paging` event is cancellable and is emitted before pagination is performed, `pagingDone` event gives you information about the previous and the current page number and is not cancellable; Also `IgxPageSizeSelectorComponent` and `IgxPageNavigationComponent` are introduced and now the paginator components allows you to define a custom content, as it is shown in the example below:
2019
```html
@@ -27,7 +26,6 @@ All notable changes for each version of this project will be documented in this
2726
</igx-paginator-content>
2827
</igx-paginator>
2928
```
30-
3129
- `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file.
3230
```typescript
3331
this.excelExporterService.columnExporting.subscribe((col) => {
@@ -36,6 +34,9 @@ All notable changes for each version of this project will be documented in this
3634
}
3735
});
3836
```
37+
- `IgxExcelExporterService`
38+
- Added support for exporting the grids' multi-column headers to **Excel**. By default, the multi-column headers would be exported but this behavior can be controlled by the `ignoreMultiColumnHeaders` option off the IgxExcelExporterOptions object.
39+
3940
### General
4041
- `IgxPaginatorComponent`
4142
- Deprecated properties `selectLabel` and `prepositionPage` are now removed;
@@ -44,7 +45,12 @@ All notable changes for each version of this project will be documented in this
4445
- `pagerHidden `
4546
- `dropdownEnabled`
4647
- `dropdownHidden`
47-
48+
- `IgxSnackbarComponent`
49+
- Deprecated property `message` is now removed;
50+
- **Breaking Change** - the `snackbarAnimationStarted` and `snackbarAnimationDone` methods are now removed. The `animationStarted` and `animationDone` events now provide reference to the `ToggleViewEventArgs` interface as an argument and are emitted by the `onOpened` and `onClosed` events of the `IgxToggleDirective`.
51+
- `IgxToastComponent`
52+
- Deprecated property `message` is now removed;
53+
- **Breaking Change** - The `isVisibleChange` event now provides reference to the `ToggleViewEventArgs` interface as an argument.
4854

4955
- **Breaking Change** - `IgxOverlayService` events are renamed as follows:
5056
- `onOpening` -> `opening`
@@ -78,6 +84,10 @@ All notable changes for each version of this project will be documented in this
7884
</igx-expansion-panel>
7985
```
8086

87+
### Themes
88+
- **Breaking Change** - The `$color` property of the `igx-action-strip-theme` has been renamed as follows:
89+
- `$color` -> `$icon-color`
90+
8191
## 12.0.3
8292

8393
### General
@@ -3222,7 +3232,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
32223232
[igxForContainerSize]='"500px"'
32233233
[igxForItemSize]='"50px"'
32243234
let-rowIndex="index">
3225-
<div style='height:50px;'>{{rowIndex}} : {{item.text}}</div>
3235+
<div style='height: 50px;'>{{rowIndex}} : {{item.text}}</div>
32263236
</ng-template>
32273237
</div>
32283238
```
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"$schema": "../../common/schema/theme-props.schema.json",
3+
"changes": [
4+
{
5+
"name": "$color",
6+
"replaceWith": "$icon-color",
7+
"owner": "igx-action-strip-theme"
8+
}
9+
]
10+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
212212
* ```
213213
* ```html
214214
* <igx-buttongroup #MyChild [multiSelection]="!multi" (selected)="selectedHandler($event)"></igx-buttongroup>
215-
* <igx-toast #toast message="You have made a selection!"></igx-toast>
215+
* <igx-toast #toast>You have made a selection!</igx-toast>
216216
* ```
217217
*/
218218
@Output()
@@ -230,7 +230,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
230230
* ```
231231
* ```html
232232
* <igx-buttongroup> #MyChild [multiSelection]="multi" (deselected)="deselectedHandler($event)"></igx-buttongroup>
233-
* <igx-toast #toast message="You have deselected a button!"></igx-toast>
233+
* <igx-toast #toast>You have deselected a button!</igx-toast>
234234
* ```
235235
*/
236236
@Output()

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
/// @param {Map} $palette [null] - The palette used as basis for styling the component.
1010
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
1111
///
12-
/// @param {Color} $color [null] - The color used for the actions icons.
12+
/// @param {Color} $icon-color [null] - The color used for the actions icons.
1313
/// @param {Color} $background [null] - The color used for the action strip component content background.
1414
/// @param {Color} $actions-background [null] - The color used for the actions background.
1515
/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
@@ -30,7 +30,7 @@
3030
3131
$background: null,
3232
$actions-background: null,
33-
$color: null,
33+
$icon-color: null,
3434
$delete-action: null,
3535
$actions-border-radius: null,
3636
) {
@@ -49,16 +49,16 @@
4949
if($actions-border-radius, $actions-border-radius, map-get($action-strip-schema, 'actions-border-radius')), 0, 24px
5050
);
5151

52-
@if not($color) and $actions-background {
53-
$color: text-contrast($actions-background);
52+
@if not($icon-color) and $actions-background {
53+
$icon-color: text-contrast($actions-background);
5454
}
5555

5656
@return extend($theme, (
5757
name: $name,
5858
palette: $palette,
5959
background: $background,
6060
actions-background: $actions-background,
61-
color: $color,
61+
icon-color: $icon-color,
6262
delete-action: $delete-action,
6363
actions-border-radius: $actions-border-radius,
6464
));
@@ -175,7 +175,7 @@
175175
justify-content: center;
176176
pointer-events: all;
177177
position: relative;
178-
color: --var($theme, 'color');
178+
color: --var($theme, 'icon-color');
179179
border-radius: --var($theme, 'actions-border-radius');
180180
background: --var($theme, 'actions-background');
181181
max-height: 36px;
@@ -185,12 +185,12 @@
185185
}
186186

187187
igx-icon {
188-
color: --var($theme, 'color');
188+
color: --var($theme, 'icon-color');
189189
}
190190

191191
[igxButton='icon'] {
192192
igx-icon {
193-
color: --var($theme, 'color');
193+
color: --var($theme, 'icon-color');
194194
}
195195

196196
@if $variant == 'indigo-design' {

projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
/// @requires --var
8888
@mixin igx-snackbar($theme) {
8989
@include igx-css-vars($theme);
90+
@include fade-in();
9091

9192
// @debug $theme;
9293

@@ -114,6 +115,10 @@
114115
backdrop-filter: blur(8px);
115116
}
116117

118+
%igx-snackbar-message {
119+
@include animation('fade-in' .35s ease-out);
120+
}
121+
117122
%igx-snackbar-button {
118123
background: transparent;
119124
color: --var($theme, 'button-color');
@@ -129,6 +134,7 @@
129134
font-size: inherit;
130135
font-family: inherit;
131136
cursor: pointer;
137+
@include animation('fade-in' .35s ease-out);
132138

133139
&:hover {
134140
color: --var($theme, 'button-color');

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_action-strip.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
/// Generates a light action-strip schema.
1010
/// @type {Map}
11-
/// @prop {Color} color ["'currentColor'"] - The color used for the actions icons.
11+
/// @prop {Color} icon-color ["'currentColor'"] - The color used for the actions icons.
1212
/// @prop {Map} background [igx-color: ('grays', 100] - The color used for the action strip component content background.
1313
/// @prop {Map} actions-background [igx-color: ('grays', 200), to-opaque: #fff, rgba: .9] - The color used for actions background.
1414
/// @prop {Map} delete-action [igx-color: ('error')] - The color used for the delete icon in action strip component.
@@ -31,7 +31,7 @@ $_light-action-strip: extend(
3131
igx-color: ('grays', 100)
3232
),
3333

34-
color: "'currentColor'",
34+
icon-color: "'currentColor'",
3535

3636
delete-action: (
3737
igx-color: ('error')
@@ -85,7 +85,7 @@ $_indigo-action-strip: extend(
8585
igx-color: ('primary')
8686
),
8787

88-
color: (
88+
icon-color: (
8989
igx-contrast-color: 'primary'
9090
),
9191
)
Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { Directive, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core';
2+
import { Subject } from 'rxjs';
3+
import { IToggleView } from '../../core/navigation';
4+
import { IPositionStrategy, OverlaySettings } from '../../services/public_api';
5+
import { IgxOverlayOutletDirective, IgxToggleDirective } from '../toggle/toggle.directive';
6+
7+
@Directive()
8+
export abstract class IgxNotificationsDirective extends IgxToggleDirective
9+
implements IToggleView, OnDestroy {
10+
/**
11+
* Sets/gets the `aria-live` attribute.
12+
* If not set, `aria-live` will have value `"polite"`.
13+
*/
14+
@HostBinding('attr.aria-live')
15+
@Input()
16+
public ariaLive = 'polite';
17+
18+
/**
19+
* Sets/gets whether the element will be hidden after the `displayTime` is over.
20+
* Default value is `true`.
21+
*/
22+
@Input()
23+
public autoHide = true;
24+
25+
/**
26+
* Sets/gets the duration of time span (in milliseconds) which the element will be visible
27+
* after it is being shown.
28+
* Default value is `4000`.
29+
*/
30+
@Input()
31+
public displayTime = 4000;
32+
33+
/**
34+
* Gets/Sets the container used for the element.
35+
*
36+
* @remarks
37+
* `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
38+
*/
39+
@Input()
40+
public outlet: IgxOverlayOutletDirective | ElementRef;
41+
42+
/**
43+
* Enables/Disables the visibility of the element.
44+
* If not set, the `isVisible` attribute will have value `false`.
45+
*/
46+
@Input()
47+
public get isVisible() {
48+
return !this.collapsed;
49+
}
50+
51+
public set isVisible(value) {
52+
if (value !== this.isVisible) {
53+
if (value) {
54+
requestAnimationFrame(() => {
55+
this.open();
56+
});
57+
} else {
58+
this.close();
59+
}
60+
}
61+
}
62+
63+
/**
64+
* @hidden
65+
* @internal
66+
*/
67+
public textMessage: string | OverlaySettings = '';
68+
69+
/**
70+
* @hidden
71+
*/
72+
public timeoutId: number;
73+
public d$ = new Subject<boolean>();
74+
75+
/**
76+
* @hidden
77+
*/
78+
protected strategy: IPositionStrategy;
79+
80+
/**
81+
* @hidden
82+
*/
83+
public open() {
84+
clearInterval(this.timeoutId);
85+
86+
const overlaySettings: OverlaySettings = {
87+
positionStrategy: this.strategy,
88+
closeOnEscape: false,
89+
closeOnOutsideClick: false,
90+
modal: false,
91+
outlet: this.outlet
92+
};
93+
94+
super.open(overlaySettings);
95+
96+
if (this.autoHide) {
97+
this.timeoutId = window.setTimeout(() => {
98+
this.close();
99+
}, this.displayTime);
100+
}
101+
}
102+
103+
/**
104+
* Hides the element.
105+
*/
106+
public close() {
107+
clearTimeout(this.timeoutId);
108+
super.close();
109+
}
110+
111+
/**
112+
* @hidden
113+
*/
114+
public ngOnDestroy() {
115+
this.d$.next(true);
116+
this.d$.complete();
117+
}
118+
}

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
338338
const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId, event: ev.event };
339339
delete this._overlayId;
340340
this.onClosed.emit(closedEventArgs);
341+
this.cdr.markForCheck();
341342
};
342343

343344
private subscribe() {

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,8 +209,10 @@
209209
</div>
210210

211211
<div class="igx-grid__addrow-snackbar">
212-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
212+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
213213
</div>
214+
215+
<div #igxBodyOverlayOutlet igxOverlayOutlet></div>
214216
</div>
215217

216218

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,8 +176,10 @@
176176
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
177177
</div>
178178
<div class="igx-grid__addrow-snackbar">
179-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
179+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
180180
</div>
181+
182+
<div igxOverlayOutlet #igxBodyOverlayOutlet></div>
181183
</div>
182184

183185
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>

0 commit comments

Comments
 (0)