Skip to content

Commit e79c6f3

Browse files
mpavlinovmpavlinov
authored
Merge branch '7.3.x' into tzhelev/fix-4018-7.3.x
2 parents ddca5ae + 23dc339 commit e79c6f3

18 files changed

+337
-104
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Ignite UI for Angular Change Log
22

33
All notable changes for each version of this project will be documented in this file.
4+
## 7.3.13
5+
- `IgxDatePicker` changes
6+
- `valueChange` event is added.
47

58
## 7.3.7
69
- **Behavioral Change** default min column width is changed according the grid display density property:

‎projects/igniteui-angular/src/lib/date-picker/README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ In order to re-template a date picker in `dropdown` mode, an element should be m
8181
```html
8282
<igx-date-picker>
8383
<ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value" let-displayData="displayData">
84-
<igx-input-group (click)="openDialog()" #dropDownTarget>
84+
<igx-input-group (click)="openDialog()" #dropDownTarget>
8585
<label igxLabel>Date</label>
8686
<input igxInput [value]="displayData"/>
8787
</igx-input-group>
@@ -133,10 +133,12 @@ The DatePicker action buttons could be retemplated.
133133
| Name | Return Type | Description |
134134
|:--:|:---|:---|
135135
| `onSelection` | `Date` | Fired when selection is made in the calendar. The event contains the selected value(s) based on the type of selection the component is set to |
136-
| `onOpen` | `datePicker` | Emitted when a datePicker calendar is being opened. |
137-
| `onClose` | `datePicker` | Emitted when a datePicker calendar is being closed. |
136+
| `onOpened` | `datePicker` | Emitted when a datePicker calendar is opened. |
137+
| `onClosed` | `datePicker` | Emitted when a datePicker calendar is closed. |
138+
| `onClosing` | `CancelableBrowserEventArgs` | Emitted when a datePicker calendar is being closed. |
138139
| `onDisabledDate` | `IDatePickerDisabledDateEventArgs` | Emitted when a disabled date is entered in `dropdown` mode. |
139140
| `onValidationFailed` | `IDatePickerValidationFailedEventArgs` | Emitted when an invalid date is entered in `dropdown` mode. |
141+
| `valueChange` | `Date` | Fired when date picker value is changed |
140142

141143
### Methods
142144
| Name | Arguments | Return Type | Description |

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

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,15 @@ describe('IgxDatePicker', () => {
7474
const dom = fixture.debugElement;
7575
const target = dom.query(By.css('.igx-date-picker__input-date'));
7676

77-
spyOn(datePicker.onOpen, 'emit');
78-
spyOn(datePicker.onClose, 'emit');
77+
spyOn(datePicker.onOpened, 'emit');
78+
spyOn(datePicker.onClosed, 'emit');
7979

8080
UIInteractions.clickElement(target);
8181
fixture.detectChanges();
8282
await wait();
8383

84-
expect(datePicker.onOpen.emit).toHaveBeenCalled();
85-
expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker);
84+
expect(datePicker.onOpened.emit).toHaveBeenCalled();
85+
expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker);
8686

8787
const overlayDiv = document.getElementsByClassName('igx-overlay__wrapper--modal')[0];
8888
expect(overlayDiv).toBeDefined();
@@ -92,17 +92,20 @@ describe('IgxDatePicker', () => {
9292
fixture.detectChanges();
9393
await wait();
9494

95-
expect(datePicker.onClose.emit).toHaveBeenCalled();
96-
expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker);
95+
expect(datePicker.onClosed.emit).toHaveBeenCalled();
96+
expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker);
9797
});
9898

99-
it('Datepicker onSelection event and selectDate method propagation', () => {
99+
it('Datepicker onSelection and valueChange events and selectDate method propagation', () => {
100100
spyOn(datePicker.onSelection, 'emit');
101+
spyOn(datePicker.valueChange, 'emit');
101102
const newDate: Date = new Date(2016, 4, 6);
102-
datePicker.selectDate(newDate);
103+
datePicker.selectDate(newDate);
103104
fixture.detectChanges();
104105

105106
expect(datePicker.onSelection.emit).toHaveBeenCalled();
107+
expect(datePicker.valueChange.emit).toHaveBeenCalled();
108+
expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate);
106109
expect(datePicker.value).toBe(newDate);
107110
});
108111

@@ -611,15 +614,15 @@ describe('IgxDatePicker', () => {
611614
const iconDate = dom.query(By.css('.igx-icon'));
612615
expect(iconDate).not.toBeNull();
613616

614-
spyOn(datePicker.onOpen, 'emit');
615-
spyOn(datePicker.onClose, 'emit');
617+
spyOn(datePicker.onOpened, 'emit');
618+
spyOn(datePicker.onClosed, 'emit');
616619

617620
UIInteractions.clickElement(iconDate);
618621
fixture.detectChanges();
619622
await wait();
620623

621-
expect(datePicker.onOpen.emit).toHaveBeenCalled();
622-
expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker);
624+
expect(datePicker.onOpened.emit).toHaveBeenCalled();
625+
expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker);
623626

624627
const dropDown = document.getElementsByClassName('igx-date-picker--dropdown');
625628
expect(dropDown.length).toBe(1);
@@ -630,8 +633,8 @@ describe('IgxDatePicker', () => {
630633
fixture.detectChanges();
631634
await wait();
632635

633-
expect(datePicker.onClose.emit).toHaveBeenCalled();
634-
expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker);
636+
expect(datePicker.onClosed.emit).toHaveBeenCalled();
637+
expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker);
635638
});
636639

637640
it('Handling keyboard navigation with `space`(open) and `esc`(close) buttons - dropdown mode', fakeAsync(() => {
@@ -677,13 +680,16 @@ describe('IgxDatePicker', () => {
677680
expect(overlays.length).toEqual(0);
678681
}));
679682

680-
it('Datepicker onSelection event and selectDate method propagation - dropdown mode', () => {
683+
it('Datepicker onSelection and valueChange events and selectDate method propagation - dropdown mode', () => {
681684
spyOn(datePicker.onSelection, 'emit');
685+
spyOn(datePicker.valueChange, 'emit');
682686
const newDate: Date = new Date(2016, 4, 6);
683687
datePicker.selectDate(newDate);
684688
fixture.detectChanges();
685689

686690
expect(datePicker.onSelection.emit).toHaveBeenCalled();
691+
expect(datePicker.valueChange.emit).toHaveBeenCalled();
692+
expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate);
687693
expect(datePicker.value).toBe(newDate);
688694

689695
const input = fixture.debugElement.query(By.directive(IgxInputDirective));
@@ -923,12 +929,15 @@ describe('IgxDatePicker', () => {
923929
}));
924930

925931
it('should reset value on clear button click - dropdown mode', () => {
926-
const input = fixture.debugElement.query(By.directive(IgxInputDirective));
932+
spyOn(datePicker.valueChange, 'emit');
933+
const input = fixture.debugElement.query(By.directive(IgxInputDirective));
927934
const dom = fixture.debugElement;
928935
const clear = dom.queryAll(By.css('.igx-icon'))[1];
929936
UIInteractions.clickElement(clear);
930937
fixture.detectChanges();
931938

939+
expect(datePicker.valueChange.emit).toHaveBeenCalled();
940+
expect(datePicker.valueChange.emit).toHaveBeenCalledWith(null);
932941
expect(datePicker.value).toEqual(null);
933942
expect(input.nativeElement.innerText).toEqual('');
934943

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ import {
5050
} from './date-picker.utils';
5151
import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes';
5252
import { IDatePicker } from './date-picker.common';
53-
import { KEYS, CancelableBrowserEventArgs, isIE } from '../core/utils';
53+
import { KEYS, CancelableBrowserEventArgs, isIE, isEqual } from '../core/utils';
5454
import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives';
5555
import { IgxCalendarContainerComponent } from './calendar-container.component';
5656
import { InteractionMode } from '../core/enums';
@@ -622,6 +622,20 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
622622
@Output()
623623
public onSelection = new EventEmitter<Date>();
624624

625+
/**
626+
*An @Output property that is fired when date picker value is changed.
627+
*```typescript
628+
*public valueChanged(event){
629+
* alert("Date picker value is changed");
630+
*}
631+
*```
632+
*```html
633+
*<igx-date-picker (valueChange)="valueChanged($event)" mode="dropdown"></igx-date-picker>
634+
*```
635+
*/
636+
@Output()
637+
public valueChange = new EventEmitter<Date>();
638+
625639
/**
626640
*An @Output property that fires when the user types/spins to a disabled date in the date-picker editor.
627641
*```typescript
@@ -916,7 +930,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
916930
* @memberOf {@link IgxDatePickerComponent}
917931
*/
918932
public selectDate(date: Date): void {
933+
const oldValue = this.value;
919934
this.value = date;
935+
936+
this.emitValueChangeEvent(oldValue, this.value );
920937
this.onSelection.emit(date);
921938
this._onChangeCallback(date);
922939
}
@@ -933,7 +950,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
933950
* @memberOf {@link IgxDatePickerComponent}
934951
*/
935952
public deselectDate(): void {
953+
const oldValue = this.value;
936954
this.value = null;
955+
this.emitValueChangeEvent(oldValue, this.value );
937956
if (this.calendar) {
938957
this.calendar.deselectDate();
939958
}
@@ -1025,8 +1044,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
10251044
date.setSeconds(this.value.getSeconds());
10261045
date.setMilliseconds(this.value.getMilliseconds());
10271046
}
1028-
1047+
const oldValue = this.value;
10291048
this.value = date;
1049+
1050+
this.emitValueChangeEvent(oldValue, this.value );
10301051
this.calendar.viewDate = date;
10311052
this._onChangeCallback(date);
10321053
this.closeCalendar();
@@ -1144,6 +1165,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
11441165
}
11451166
}
11461167

1168+
private emitValueChangeEvent(oldValue: Date, newValue: Date) {
1169+
if (!isEqual(oldValue, newValue)) {
1170+
this.valueChange.emit(newValue);
1171+
}
1172+
}
1173+
11471174
private calculateDate(dateString: string, invokedByEvent: string): void {
11481175
if (dateString !== '') {
11491176
const prevDateValue = this.value;
@@ -1162,9 +1189,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
11621189

11631190
if (this.disabledDates === null
11641191
|| (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) {
1165-
this.value = newValue;
1166-
this.invalidDate = '';
1167-
this._onChangeCallback(newValue);
1192+
const oldValue = this.value;
1193+
this.value = newValue;
1194+
1195+
this.emitValueChangeEvent(oldValue, this.value );
1196+
this.invalidDate = '';
1197+
this._onChangeCallback(newValue);
11681198
} else {
11691199
const args: IDatePickerDisabledDateEventArgs = {
11701200
datePicker: this,

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ const FAB_BUTTON_COSY = 'igx-button--fab-cosy';
1717

1818
describe('IgxButton', () => {
1919
configureTestSuite();
20+
21+
const baseClass = 'igx-button';
22+
const classes = {
23+
flat: `${baseClass}--flat`,
24+
raised: `${baseClass}--raised`,
25+
outlined: `${baseClass}--outlined`,
26+
fab: `${baseClass}--fab`,
27+
icon: `${baseClass}--icon`
28+
};
29+
2030
beforeEach(async(() => {
2131
TestBed.configureTestingModule({
2232
declarations: [
@@ -108,6 +118,40 @@ describe('IgxButton', () => {
108118
verifyDisplayDensity(fabButton, fabButtonDOM, 'fab', DisplayDensity.cosy);
109119
verifyDisplayDensity(iconButton, iconButtonDOM, 'icon', DisplayDensity.cosy);
110120
});
121+
122+
it('Should set the correct CSS class on the element using the "type" input', () => {
123+
const fixture = TestBed.createComponent(InitButtonComponent);
124+
fixture.detectChanges();
125+
const theButton = fixture.componentInstance.button;
126+
const theButtonNativeEl = theButton.nativeElement;
127+
expect(theButtonNativeEl.classList.length).toEqual(1);
128+
expect(theButtonNativeEl.classList).toContain(classes.flat);
129+
130+
theButton.type = 'raised';
131+
fixture.detectChanges();
132+
expect(theButtonNativeEl.classList.length).toEqual(1);
133+
expect(theButtonNativeEl.classList).toContain(classes.raised);
134+
135+
theButton.type = 'outlined';
136+
fixture.detectChanges();
137+
expect(theButtonNativeEl.classList.length).toEqual(1);
138+
expect(theButtonNativeEl.classList).toContain(classes.outlined);
139+
140+
theButton.type = 'fab';
141+
fixture.detectChanges();
142+
expect(theButtonNativeEl.classList.length).toEqual(1);
143+
expect(theButtonNativeEl.classList).toContain(classes.fab);
144+
145+
theButton.type = 'icon';
146+
fixture.detectChanges();
147+
expect(theButtonNativeEl.classList.length).toEqual(1);
148+
expect(theButtonNativeEl.classList).toContain(classes.icon);
149+
150+
theButton.type = 'flat';
151+
fixture.detectChanges();
152+
expect(theButtonNativeEl.classList.length).toEqual(1);
153+
expect(theButtonNativeEl.classList).toContain(classes.flat);
154+
});
111155
});
112156

113157
@Component({
@@ -117,6 +161,8 @@ describe('IgxButton', () => {
117161
</span>`
118162
})
119163
class InitButtonComponent {
164+
@ViewChild(IgxButtonDirective, { read: IgxButtonDirective })
165+
button: IgxButtonDirective;
120166
}
121167

122168
@Component({

0 commit comments

Comments
 (0)