Skip to content

Commit 8c849aa

Browse files
kdinevkdinev
authored
Merge branch 'master' into pbozhinov/fix-10081
2 parents 7399ef9 + 9de7be9 commit 8c849aa

File tree

16 files changed

+350
-44
lines changed

16 files changed

+350
-44
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ All notable changes for each version of this project will be documented in this
2424
```
2525
- Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
2626
- Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
27-
27+
- `IgxSnackbarComponent`
28+
- Introduced new 'positionSettings' input which allows to define a custom animation and position.
29+
- `IgxToastComponent`
30+
- Introduced new 'positionSettings' input which allows to define a custom animation and position.
2831
## 12.1.3
2932

3033
### New Features

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
[![Build Status](https://dev.azure.com/IgniteUI/igniteui-angular/_apis/build/status/IgniteUI.igniteui-angular)](https://dev.azure.com/IgniteUI/igniteui-angular/_build/latest?definitionId=3)
55
[![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-angular/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-angular?branch=master)
66
[![npm version](https://badge.fury.io/js/igniteui-angular.svg)](https://badge.fury.io/js/igniteui-angular)
7+
![Discord](https://img.shields.io/discord/836634487483269200)
78

89
[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits, supporting directives for [Angular](https://angular.io/) by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers. With the use of all features, the world’s fastest Angular grid, 60+ real-time Angular charts, and more, you are empowered to engineer excellent mobile experiences and deliver progressive web apps (PWA’s) targeting Google's Angular framework.
910

‎projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
%display-container {
22
display: inherit;
3+
flex-flow: inherit;
34
position: relative;
45
width: 100%;
56
overflow: hidden;

‎projects/igniteui-angular/src/lib/directives/notification/notifications.directive.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective
6464
* @hidden
6565
* @internal
6666
*/
67-
public textMessage: string | OverlaySettings = '';
67+
public textMessage = '';
6868

6969
/**
7070
* @hidden

‎projects/igniteui-angular/src/lib/snackbar/snackbar.component.spec.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { By } from '@angular/platform-browser';
44
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
55
import { IgxSnackbarComponent, IgxSnackbarModule } from './snackbar.component';
66
import { configureTestSuite } from '../test-utils/configure-suite';
7+
import { HorizontalAlignment, PositionSettings, slideInLeft, slideInRight, VerticalAlignment } from 'igniteui-angular';
8+
import { useAnimation } from '@angular/animations';
79

810
describe('IgxSnackbar', () => {
911
configureTestSuite();
@@ -160,6 +162,30 @@ describe('IgxSnackbar', () => {
160162
expect(snackbar.textMessage).toBe('Custom Message');
161163
snackbar.close();
162164
}));
165+
it('should be able to set custom positionSettings', () => {
166+
const defaultPositionSettings = snackbar.positionSettings;
167+
const defaulOpenAnimationParams = {duration: '.35s', easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
168+
fromPosition: 'translateY(100%)', toPosition: 'translateY(0)'};
169+
expect(defaultPositionSettings.horizontalDirection).toBe(-0.5);
170+
expect(defaultPositionSettings.verticalDirection).toBe(0);
171+
expect(defaultPositionSettings.openAnimation.options.params).toEqual(defaulOpenAnimationParams);
172+
const newPositionSettings: PositionSettings = {
173+
openAnimation: useAnimation(slideInLeft, { params: { duration: '1000ms' } }),
174+
closeAnimation: useAnimation(slideInRight, { params: { duration: '1000ms' } }),
175+
horizontalDirection: HorizontalAlignment.Center,
176+
verticalDirection: VerticalAlignment.Middle,
177+
horizontalStartPoint: HorizontalAlignment.Center,
178+
verticalStartPoint: VerticalAlignment.Middle,
179+
minSize: { height: 100, width: 100 }
180+
};
181+
snackbar.positionSettings = newPositionSettings;
182+
fixture.detectChanges();
183+
const customPositionSettings = snackbar.positionSettings;
184+
expect(customPositionSettings.horizontalDirection).toBe(-0.5);
185+
expect(customPositionSettings.verticalDirection).toBe(-0.5);
186+
expect(customPositionSettings.openAnimation.options.params).toEqual({duration: '1000ms'});
187+
expect(customPositionSettings.minSize).toEqual({height: 100, width: 100});
188+
});
163189
});
164190

165191
describe('IgxSnackbar with custom content', () => {

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

Lines changed: 68 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {
1010
Output
1111
} from '@angular/core';
1212
import { takeUntil } from 'rxjs/operators';
13-
import { slideInBottom, slideOutBottom } from '../animations/main';
13+
import { fadeIn, fadeOut } from '../animations/main';
1414
import { ContainerPositionStrategy, GlobalPositionStrategy, HorizontalAlignment,
15-
OverlaySettings, PositionSettings, VerticalAlignment } from '../services/public_api';
15+
PositionSettings, VerticalAlignment } from '../services/public_api';
1616
import { IgxNotificationsDirective } from '../directives/notification/notifications.directive';
1717
import { ToggleViewEventArgs } from '../directives/toggle/toggle.directive';
1818

@@ -101,44 +101,85 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective
101101
*/
102102
@Output() public animationDone = new EventEmitter<ToggleViewEventArgs>();
103103

104+
105+
/**
106+
* Get the position and animation settings used by the snackbar.
107+
* ```typescript
108+
* @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
109+
* let currentPosition: PositionSettings = this.snackbar.positionSettings
110+
* ```
111+
*/
112+
@Input()
113+
public get positionSettings(): PositionSettings {
114+
return this._positionSettings;
115+
}
116+
117+
/**
118+
* Set the position and animation settings used by the snackbar.
119+
* ```html
120+
* <igx-snackbar [positionSettings]="newPositionSettings"></igx-snackbar>
121+
* ```
122+
* ```typescript
123+
* import { slideInTop, slideOutBottom } from 'igniteui-angular';
124+
* ...
125+
* @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
126+
* public newPositionSettings: PositionSettings = {
127+
* openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
128+
* closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
129+
* horizontalDirection: HorizontalAlignment.Left,
130+
* verticalDirection: VerticalAlignment.Middle,
131+
* horizontalStartPoint: HorizontalAlignment.Left,
132+
* verticalStartPoint: VerticalAlignment.Middle,
133+
* minSize: { height: 100, width: 100 }
134+
* };
135+
* this.snackbar.positionSettings = this.newPositionSettings;
136+
* ```
137+
*/
138+
public set positionSettings(settings: PositionSettings) {
139+
this._positionSettings = settings;
140+
}
141+
142+
private _positionSettings: PositionSettings = {
143+
horizontalDirection: HorizontalAlignment.Center,
144+
verticalDirection: VerticalAlignment.Bottom,
145+
openAnimation: useAnimation(fadeIn, { params: { duration: '.35s', easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
146+
fromPosition: 'translateY(100%)', toPosition: 'translateY(0)'} }),
147+
closeAnimation: useAnimation(fadeOut, { params: { duration: '.2s', easing: 'cubic-bezier(0.4, 0.0, 1, 1)',
148+
fromPosition: 'translateY(0)', toPosition: 'translateY(100%)'} }),
149+
};
150+
104151
/**
105152
* Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`.
106153
* ```typescript
107154
* this.snackbar.open();
108155
* ```
109156
*/
110-
public open(message?: string | OverlaySettings) {
157+
public open(message?: string) {
111158
if (message !== undefined) {
112159
this.textMessage = message;
113160
}
114161

115-
const snackbarSettings: PositionSettings = {
116-
horizontalDirection: HorizontalAlignment.Center,
117-
verticalDirection: VerticalAlignment.Bottom,
118-
openAnimation: useAnimation(slideInBottom, {
119-
params: {
120-
duration: '.35s',
121-
easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
122-
fromPosition: 'translateY(100%)',
123-
toPosition: 'translateY(0)'
124-
}
125-
}),
126-
closeAnimation: useAnimation(slideOutBottom, {
127-
params: {
128-
duration: '.2s',
129-
easing: 'cubic-bezier(0.4, 0.0, 1, 1)',
130-
fromPosition: 'translateY(0)',
131-
toOpacity: 1,
132-
toPosition: 'translateY(100%)'
133-
}
134-
})
135-
};
136-
137-
this.strategy = this.outlet ? new ContainerPositionStrategy(snackbarSettings)
138-
: new GlobalPositionStrategy(snackbarSettings);
162+
163+
this.strategy = this.outlet ? new ContainerPositionStrategy(this.positionSettings)
164+
: new GlobalPositionStrategy(this.positionSettings);
139165
super.open();
140166
}
141167

168+
/**
169+
* Opens or closes the snackbar, depending on its current state.
170+
*
171+
* ```typescript
172+
* this.snackbar.toggle();
173+
* ```
174+
*/
175+
public toggle() {
176+
if (this.collapsed || this.isClosing) {
177+
this.open();
178+
} else {
179+
this.close();
180+
}
181+
}
182+
142183
/**
143184
* @hidden
144185
*/

‎projects/igniteui-angular/src/lib/toast/toast.component.spec.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
IgxToastModule,
1212
} from './toast.component';
1313
import { configureTestSuite } from '../test-utils/configure-suite';
14+
import { useAnimation } from '@angular/animations';
15+
import { HorizontalAlignment, PositionSettings, slideInLeft, slideInRight, VerticalAlignment } from 'igniteui-angular';
1416

1517
describe('IgxToast', () => {
1618
configureTestSuite();
@@ -43,6 +45,28 @@ describe('IgxToast', () => {
4345
expect(toast.id).toBe('customToast');
4446
expect(domToast.id).toBe('customToast');
4547
});
48+
49+
it('should be able to set custom positionSettings', () => {
50+
const defaultPositionSettings = toast.positionSettings;
51+
expect(defaultPositionSettings.horizontalDirection).toBe(-0.5);
52+
expect(defaultPositionSettings.verticalDirection).toBe(0);
53+
const newPositionSettings: PositionSettings = {
54+
openAnimation: useAnimation(slideInLeft, { params: { duration: '1000ms' } }),
55+
closeAnimation: useAnimation(slideInRight, { params: { duration: '1000ms' } }),
56+
horizontalDirection: HorizontalAlignment.Center,
57+
verticalDirection: VerticalAlignment.Middle,
58+
horizontalStartPoint: HorizontalAlignment.Center,
59+
verticalStartPoint: VerticalAlignment.Middle,
60+
minSize: { height: 100, width: 100 }
61+
};
62+
toast.positionSettings = newPositionSettings;
63+
fixture.detectChanges();
64+
const customPositionSettings = toast.positionSettings;
65+
expect(customPositionSettings.horizontalDirection).toBe(-0.5);
66+
expect(customPositionSettings.verticalDirection).toBe(-0.5);
67+
expect(customPositionSettings.openAnimation.options.params).toEqual({duration: '1000ms'});
68+
expect(customPositionSettings.minSize).toEqual({height: 100, width: 100});
69+
});
4670
});
4771

4872
@Component({

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

Lines changed: 67 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,13 @@ import {
1919
HorizontalAlignment,
2020
VerticalAlignment,
2121
GlobalPositionStrategy,
22-
OverlaySettings,
2322
PositionSettings
2423
} from '../services/public_api';
2524
import { mkenum } from '../core/utils';
2625
import { IgxNotificationsDirective } from '../directives/notification/notifications.directive';
2726
import { ToggleViewEventArgs } from '../directives/toggle/toggle.directive';
27+
import { useAnimation } from '@angular/animations';
28+
import { fadeIn, fadeOut } from '../animations/fade';
2829

2930
let NEXT_ID = 0;
3031

@@ -121,6 +122,54 @@ export class IgxToastComponent extends IgxNotificationsDirective
121122
@Input()
122123
public position: IgxToastPosition = 'bottom';
123124

125+
/**
126+
* Get the position and animation settings used by the toast.
127+
* ```typescript
128+
* @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
129+
* let currentPosition: PositionSettings = this.toast.positionSettings
130+
* ```
131+
*/
132+
@Input()
133+
public get positionSettings(): PositionSettings {
134+
return this._positionSettings;
135+
}
136+
137+
/**
138+
* Set the position and animation settings used by the toast.
139+
* ```html
140+
* <igx-toast [positionSettings]="newPositionSettings"></igx-toast>
141+
* ```
142+
* ```typescript
143+
* import { slideInTop, slideOutBottom } from 'igniteui-angular';
144+
* ...
145+
* @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
146+
* public newPositionSettings: PositionSettings = {
147+
* openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
148+
* closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
149+
* horizontalDirection: HorizontalAlignment.Left,
150+
* verticalDirection: VerticalAlignment.Middle,
151+
* horizontalStartPoint: HorizontalAlignment.Left,
152+
* verticalStartPoint: VerticalAlignment.Middle
153+
* };
154+
* this.toast.positionSettings = this.newPositionSettings;
155+
* ```
156+
*/
157+
public set positionSettings(settings: PositionSettings) {
158+
this._positionSettings = settings;
159+
}
160+
161+
private _positionSettings: PositionSettings = {
162+
horizontalDirection: HorizontalAlignment.Center,
163+
verticalDirection:
164+
this.position === 'bottom'
165+
? VerticalAlignment.Bottom
166+
: this.position === 'middle'
167+
? VerticalAlignment.Middle
168+
: VerticalAlignment.Top,
169+
openAnimation: useAnimation(fadeIn),
170+
closeAnimation: useAnimation(fadeOut),
171+
};
172+
124173
/**
125174
* Gets the nativeElement of the toast.
126175
* ```typescript
@@ -150,25 +199,30 @@ export class IgxToastComponent extends IgxNotificationsDirective
150199
* this.toast.open();
151200
* ```
152201
*/
153-
public open(message?: string | OverlaySettings) {
202+
public open(message?: string) {
154203
if (message !== undefined) {
155204
this.textMessage = message;
156205
}
157206

158-
const toastSettings: PositionSettings = {
159-
horizontalDirection: HorizontalAlignment.Center,
160-
verticalDirection:
161-
this.position === 'bottom'
162-
? VerticalAlignment.Bottom
163-
: this.position === 'middle'
164-
? VerticalAlignment.Middle
165-
: VerticalAlignment.Top
166-
};
167-
168-
this.strategy = new GlobalPositionStrategy(toastSettings);
207+
this.strategy = new GlobalPositionStrategy(this.positionSettings);
169208
super.open();
170209
}
171210

211+
/**
212+
* Opens or closes the toast, depending on its current state.
213+
*
214+
* ```typescript
215+
* this.toast.toggle();
216+
* ```
217+
*/
218+
public toggle() {
219+
if (this.collapsed || this.isClosing) {
220+
this.open();
221+
} else {
222+
this.close();
223+
}
224+
}
225+
172226
/**
173227
* @hidden
174228
*/

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { ChipsSampleComponent } from './chips/chips.sample';
2828
import { DatePickerSampleComponent } from './date-picker/date-picker.sample';
2929
import { DialogSampleComponent } from './dialog/dialog.sample';
3030
import { DragDropSampleComponent } from './drag-drop/drag-drop.sample';
31+
import { ShadowGridSampleComponent } from './drag-drop/shadow-dom-grid/shadow-grid-sample';
3132
import { MaskSampleComponent, DisplayFormatPipe, InputFormatPipe } from './mask/mask.sample';
3233
import { IconSampleComponent } from './icon/icon.sample';
3334
import { InputSampleComponent } from './input/input.sample';
@@ -176,6 +177,7 @@ const components = [
176177
DisplayDensityDropDownComponent,
177178
DropDownVirtualComponent,
178179
DragDropSampleComponent,
180+
ShadowGridSampleComponent,
179181
ComboSampleComponent,
180182
IconSampleComponent,
181183
InputSampleComponent,

0 commit comments

Comments
 (0)