Skip to content

Commit ac2ef82

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Merge branch 'mkirova/change-events' of https://github.com/IgniteUI/igniteui-angular into mkirova/change-events
2 parents 7cc5efa + 28f0ccc commit ac2ef82

34 files changed

+379
-143
lines changed

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export class IgxCarouselComponent implements OnDestroy {
107107
* Sets the time `interval` in milliseconds before the slide changes.
108108
* If not set, the carousel will not change `slides` automatically.
109109
* ```html
110-
* <igx-carousel [interval] = "1000"></carousel>
110+
* <igx-carousel [interval] = "1000"></igx-carousel>
111111
* ```
112112
* @memberof IgxCarouselComponent
113113
*/
@@ -517,7 +517,7 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
517517
* Gets/sets the `index` of the slide inside the carousel.
518518
* ```html
519519
* <igx-carousel>
520-
* <igx-slide index = "1"</igx-slide>
520+
* <igx-slide index = "1"></igx-slide>
521521
* <igx-carousel>
522522
* ```
523523
* @memberOf IgxSlideComponent
@@ -528,7 +528,7 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
528528
* Gets/sets the target `direction` for the slide.
529529
* ```html
530530
* <igx-carousel>
531-
* <igx-slide direction="NEXT"</igx-slide>
531+
* <igx-slide direction="NEXT"></igx-slide>
532532
* <igx-carousel>
533533
* ```
534534
* @memberOf IgxSlideComponent
@@ -538,7 +538,14 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
538538
* Gets/sets the `active` state of the slide.
539539
* ```html
540540
* <igx-carousel>
541-
* <igx-slide [active] ="false"</igx-slide>
541+
* <igx-slide [active] ="false"></igx-slide>
542+
* <igx-carousel>
543+
* ```
544+
*
545+
* Two-way data binding.
546+
* ```html
547+
* <igx-carousel>
548+
* <igx-slide [(active)] ="model.isActive"></igx-slide>
542549
* <igx-carousel>
543550
* ```
544551
* @memberof IgxSlideComponent
@@ -552,7 +559,10 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
552559
this._active = value;
553560
this.activeChange.emit(this._active);
554561
}
555-
@Output() public activeChange = new EventEmitter<any>();
562+
/**
563+
*@hidden
564+
*/
565+
@Output() public activeChange = new EventEmitter<boolean>();
556566

557567
constructor(private carousel: IgxCarouselComponent) { }
558568
/**

‎projects/igniteui-angular/src/lib/chips/chip.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,14 +165,22 @@ export class IgxChipComponent extends DisplayDensityBase {
165165
* ```html
166166
* <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">
167167
* ```
168+
*
169+
* Two-way data binding:
170+
* ```html
171+
* <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">
172+
* ```
168173
*/
169174
@Input()
170175
public set selected(newValue: boolean) {
171176
this.changeSelection(newValue);
172177
}
173178

179+
/**
180+
*@hidden
181+
*/
174182
@Output()
175-
public selectedChange = new EventEmitter<any>();
183+
public selectedChange = new EventEmitter<boolean>();
176184

177185
/**
178186
* Returns if the `IgxChipComponent` is selected.

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@
8585

8686
@include scale-in-out($start-scale: .9);
8787

88+
// If updating the WIDTH of the checkbox here, please update it in the grid theme as well.
89+
// It is under the name of $cbx-size
8890
$size: em(20px);
8991
$checkbox-radius: $size / 2;
9092

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,10 @@
331331
@extend %grid-cell-text !optional;
332332
}
333333

334+
@include e(cbx-padding) {
335+
@extend %cbx-padding !optional;
336+
}
337+
334338
@include e(cbx-selection) {
335339
@extend %grid__cbx-selection !optional;
336340
}
@@ -519,8 +523,8 @@
519523
@extend %igx-grid__drag-indicator--cosy !optional;
520524
}
521525

522-
@include e(cbx-selection) {
523-
@extend %grid__cbx-selection--cosy !optional;
526+
@include e(cbx-padding) {
527+
@extend %cbx-padding--cosy !optional;
524528
}
525529

526530
@include e(cbx-selection, $m: push) {
@@ -619,8 +623,8 @@
619623
@extend %igx-grid__drag-indicator--compact !optional;
620624
}
621625

622-
@include e(cbx-selection) {
623-
@extend %grid__cbx-selection--compact !optional;
626+
@include e(cbx-padding) {
627+
@extend %cbx-padding--compact !optional;
624628
}
625629

626630
@include e(cbx-selection, $m: push) {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,7 @@
503503
@include igx-root-css-vars($theme);
504504

505505
$palette: map-get($theme, 'palette');
506-
506+
$cbx-size: rem(20px);
507507
$grid-shadow: --var($theme, 'grid-shadow');
508508

509509
$grid-caption-fs: rem(20px);
@@ -534,6 +534,16 @@
534534
compact: 0 rem(12px)
535535
);
536536

537+
$grid-cbx-padding: (
538+
comfortable: rem(24px),
539+
cosy: rem(16px),
540+
compact: rem(12px)
541+
);
542+
543+
$cbx-padding: map-get($grid-cbx-padding, 'comfortable');
544+
$cbx-padding-cosy: map-get($grid-cbx-padding, 'cosy');
545+
$cbx-padding-compact: map-get($grid-cbx-padding, 'compact');
546+
537547
$grid-header-height: (
538548
comfortable: rem(50px),
539549
cosy: rem(40px),
@@ -1379,20 +1389,27 @@
13791389
display: flex;
13801390
justify-content: center;
13811391
align-items: center;
1382-
padding: map-get($grid-header-padding, 'comfortable');
13831392
border-right: --var($theme, 'header-border-width')
13841393
--var($theme, 'header-border-style')
13851394
--var($theme, 'header-border-color');
13861395
background: inherit;
13871396
z-index: 4;
13881397
}
13891398

1390-
%grid__cbx-selection--cosy {
1391-
padding: map-get($grid-header-padding, 'cosy');
1399+
%cbx-padding {
1400+
display: flex;
1401+
align-items: center;
1402+
justify-content: center;
1403+
// The min-width here plays the role of padding because of IE11
1404+
min-width: calc(#{$cbx-size} + (#{$cbx-padding} * 2));
13921405
}
13931406

1394-
%grid__cbx-selection--compact {
1395-
padding: map-get($grid-header-padding, 'compact');
1407+
%cbx-padding--cosy {
1408+
min-width: calc(#{$cbx-size} + (#{$cbx-padding-cosy} * 2));
1409+
}
1410+
1411+
%cbx-padding--compact {
1412+
min-width: calc(#{$cbx-size} + (#{$cbx-padding-compact} * 2));
13961413
}
13971414

13981415
%grid__resize-handle {

‎projects/igniteui-angular/src/lib/core/utils.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,17 @@ export function isFirefox(): boolean {
226226
return firefoxBrowser;
227227
}
228228

229+
/**
230+
* @hidden
231+
* TODO: make injectable, check isPlatformBrowser()
232+
*/
233+
export class PlatformUtil {
234+
static isIOS(): boolean {
235+
const iosBrowser = typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
236+
return iosBrowser;
237+
}
238+
}
239+
229240
/**
230241
* @hidden
231242
*/

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

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -301,14 +301,14 @@ describe('Dialog', () => {
301301
expect(overlayWrapper.classList.contains(OVERLAY_WRAPPER_CLASS)).toBe(false);
302302
}));
303303

304-
it('Default button of the dialog is focused after opening the dialog and can be closed with keyboard.', (async() => {
304+
it('Default button of the dialog is focused after opening the dialog and can be closed with keyboard.', fakeAsync( () => {
305305
const fix = TestBed.createComponent(DialogComponent);
306306
fix.detectChanges();
307307

308308
const dialog: IgxDialogComponent = fix.componentInstance.dialog as IgxDialogComponent;
309309
dialog.open();
310+
tick(100);
310311
fix.detectChanges();
311-
await wait(16);
312312

313313
// Verify dialog is opened and its default right button is focused
314314
const dialogDOM = fix.debugElement.query(By.css('.igx-dialog'));
@@ -318,8 +318,8 @@ describe('Dialog', () => {
318318

319319
// Press 'escape' key
320320
UIInteractions.simulateKeyDownEvent(document.activeElement, 'Escape');
321+
tick(100);
321322
fix.detectChanges();
322-
await wait(16);
323323

324324
// Verify dialog is closed and its default right button is no longer focused
325325
expect(document.activeElement).not.toBe(rightButton.nativeElement);
@@ -329,20 +329,18 @@ describe('Dialog', () => {
329329
describe('Position settings', () => {
330330
let fix;
331331
let dialog;
332-
let detect;
333332

334333
beforeEach( fakeAsync(() => {
335334
fix = TestBed.createComponent(PositionSettingsDialogComponent);
336335
fix.detectChanges();
337336
dialog = fix.componentInstance.dialog;
338-
detect = () => dialog.cdr.detectChanges();
339337
}));
340338

341-
it('Define different position settings ', (async() => {
339+
it('Define different position settings ', fakeAsync(() => {
342340
const currentElement = fix.componentInstance;
343341
dialog.open();
342+
tick(16);
344343
fix.detectChanges();
345-
await wait(16);
346344

347345
expect(dialog.isOpen).toEqual(true);
348346
const firstContentRect = document.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0].getBoundingClientRect();
@@ -352,17 +350,17 @@ describe('Dialog', () => {
352350
expect(firstContentRect.top).toBeLessThanOrEqual(middleDialogPosition + 2, 'OffsetTop position check');
353351

354352
dialog.close();
353+
tick(16);
355354
fix.detectChanges();
356-
await wait(16);
357355

358356
expect(dialog.isOpen).toEqual(false);
359357
dialog.positionSettings = currentElement.newPositionSettings;
358+
tick(16);
360359
fix.detectChanges();
361-
await wait(16);
362360

363361
dialog.open();
362+
tick(16);
364363
fix.detectChanges();
365-
await wait(16);
366364

367365
expect(dialog.isOpen).toEqual(true);
368366
const secondContentRect = document.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0].getBoundingClientRect();
@@ -372,13 +370,13 @@ describe('Dialog', () => {
372370
expect(secondContentRect.left).toBeLessThanOrEqual(topDialogPosition + 2, 'OffsetLeft position check');
373371

374372
dialog.close();
373+
tick(16);
375374
fix.detectChanges();
376-
await wait(16);
377375

378376
expect(dialog.isOpen).toEqual(false);
379377
}));
380378

381-
it('Set animation settings', (async() => {
379+
it('Set animation settings', () => {
382380
const currentElement = fix.componentInstance;
383381

384382
// Check initial animation settings
@@ -390,12 +388,11 @@ describe('Dialog', () => {
390388

391389
dialog.positionSettings = currentElement.animationSettings;
392390
fix.detectChanges();
393-
await wait(16);
394391

395392
// Check the new animation settings
396393
expect(dialog.positionSettings.openAnimation.options.params.duration).toEqual('800ms', 'Animation duration is set to 800ms');
397394
expect(dialog.positionSettings.closeAnimation.options.params.duration).toEqual('700ms', 'Animation duration is set to 700ms');
398-
}));
395+
});
399396
});
400397

401398
function dispatchEvent(element: HTMLElement, eventType: string) {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,8 @@ describe('IgxToggle', () => {
118118
toggle.open();
119119
tick();
120120
expect(toggle.onOpened.emit).toHaveBeenCalledTimes(2);
121-
const otherId = overlay.show(fixture.componentInstance.other);
121+
const otherId = overlay.attach(fixture.componentInstance.other);
122+
overlay.show(otherId);
122123
overlay.hide(otherId);
123124
tick();
124125
expect(toggle.onClosed.emit).toHaveBeenCalledTimes(1);

‎projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,11 @@ export abstract class IgxDropDownItemBase implements DoCheck {
122122
* let mySelectedItem = this.dropdown.selectedItem;
123123
* let isMyItemSelected = mySelectedItem.selected; // true
124124
* ```
125+
*
126+
* Two-way data binding
127+
* ```html
128+
* <igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item>
129+
* ```
125130
*/
126131
@Input()
127132
@HostBinding('attr.aria-selected')
@@ -138,8 +143,11 @@ export abstract class IgxDropDownItemBase implements DoCheck {
138143
this.selectedChange.emit(this._selected);
139144
}
140145

146+
/**
147+
*@hidden
148+
*/
141149
@Output()
142-
public selectedChange = new EventEmitter<any>();
150+
public selectedChange = new EventEmitter<boolean>();
143151

144152
/**
145153
* @hidden @internal

‎projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,11 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
9696
* ```html
9797
* this.panel.collapsed = true;
9898
* ```
99+
*
100+
* Two-way data binding:
101+
* ```html
102+
* <igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
103+
* ```
99104
*/
100105
@Input()
101106
public get collapsed(): boolean {
@@ -106,8 +111,11 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
106111
this.collapsedChange.emit(this._collapsed);
107112
}
108113

114+
/**
115+
*@hidden
116+
*/
109117
@Output()
110-
public collapsedChange = new EventEmitter<any>();
118+
public collapsedChange = new EventEmitter<boolean>();
111119

112120
/**
113121
* Emitted when the expansion panel finishes collapsing

0 commit comments

Comments
 (0)