Skip to content

Commit 37fd4d4

Browse files
ddariboddaribo
committed
feat(dp, drp): add orientation property + tests
1 parent 999a915 commit 37fd4d4

File tree

5 files changed

+78
-2
lines changed

5 files changed

+78
-2
lines changed

‎projects/igniteui-angular/src/lib/date-common/types.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ export const PickerHeaderOrientation = {
55
} as const;
66
export type PickerHeaderOrientation = (typeof PickerHeaderOrientation)[keyof typeof PickerHeaderOrientation];
77

8+
/** Calendar orientation. */
9+
export const PickerCalendarOrientation = {
10+
Horizontal: 'horizontal',
11+
Vertical: 'vertical'
12+
} as const;
13+
export type PickerCalendarOrientation = (typeof PickerCalendarOrientation)[keyof typeof PickerCalendarOrientation];
14+
815
/**
916
* This enumeration is used to configure whether the date/time picker has an editable input with drop down
1017
* or is readonly - the date/time is selected only through a dialog.

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

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '../services/public_api';
1515
import { Component, DebugElement, ElementRef, EventEmitter, QueryList, Renderer2, ViewChild } from '@angular/core';
1616
import { By } from '@angular/platform-browser';
17-
import { PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
17+
import { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
1818
import { DatePart } from '../directives/date-time-editor/date-time-editor.common';
1919
import { DateRangeDescriptor, DateRangeType } from '../core/dates';
2020
import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
@@ -33,6 +33,7 @@ const DATE_PICKER_CLEAR_ICON = 'clear';
3333
const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
3434
const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid';
3535
const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
36+
const CSS_CLASS_CALENDAR_WRAPPER_VERTICAL = 'igx-calendar__wrapper--vertical';
3637

3738
describe('IgxDatePicker', () => {
3839
describe('Integration tests', () => {
@@ -80,6 +81,28 @@ describe('IgxDatePicker', () => {
8081
const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
8182
expect(calendarHeader).toBeFalsy('Calendar header should not be present');
8283
}));
84+
85+
it('should set calendar orientation property', fakeAsync(() => {
86+
const datePicker = fixture.componentInstance.datePicker;
87+
datePicker.orientation = PickerCalendarOrientation.Horizontal;
88+
datePicker.open();
89+
tick();
90+
fixture.detectChanges();
91+
92+
expect(datePicker['_calendar'].orientation).toEqual(PickerCalendarOrientation.Horizontal.toString());
93+
expect(datePicker['_calendar'].wrapper.nativeElement).not.toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
94+
datePicker.close();
95+
tick();
96+
fixture.detectChanges();
97+
98+
datePicker.orientation = PickerCalendarOrientation.Vertical;
99+
datePicker.open();
100+
tick();
101+
fixture.detectChanges();
102+
103+
expect(datePicker['_calendar'].orientation).toEqual(PickerCalendarOrientation.Vertical.toString());
104+
expect(datePicker['_calendar'].wrapper.nativeElement).toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
105+
}));
83106
});
84107

85108
describe('Events', () => {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import { IgxIconComponent } from '../icon/icon.component';
6767
import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive';
6868
import { getCurrentResourceStrings } from '../core/i18n/resources';
6969
import { fadeIn, fadeOut } from 'igniteui-angular/animations';
70+
import { PickerCalendarOrientation } from '../date-common/types';
7071

7172
let NEXT_ID = 0;
7273

@@ -139,6 +140,15 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
139140
@Input()
140141
public displayMonthsCount = 1;
141142

143+
/**
144+
* Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.
145+
*
146+
* @example
147+
* <igx-date-picker orientation="vertical"></igx-date-picker>
148+
*/
149+
@Input()
150+
public orientation: PickerCalendarOrientation = PickerCalendarOrientation.Horizontal;
151+
142152
/**
143153
* Show/hide week numbers
144154
*
@@ -967,6 +977,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
967977
this._calendar.hideOutsideDays = this.hideOutsideDays;
968978
this._calendar.monthsViewNumber = this.displayMonthsCount;
969979
this._calendar.showWeekNumbers = this.showWeekNumbers;
980+
this._calendar.orientation = this.orientation;
970981
this._calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date) => this.handleSelection(ev));
971982
this.setDisabledDates();
972983

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
22
import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
33
import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
4-
import { PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
4+
import { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
66
import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
77
import { By } from '@angular/platform-browser';
@@ -48,6 +48,7 @@ const CSS_CLASS_CALENDAR_HEADER_TEMPLATE = '.igx-calendar__header-date';
4848
const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
4949
const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
5050
const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
51+
const CSS_CLASS_CALENDAR_WRAPPER_VERTICAL = 'igx-calendar__wrapper--vertical';
5152

5253
describe('IgxDateRangePicker', () => {
5354
describe('Unit tests: ', () => {
@@ -1621,6 +1622,29 @@ describe('IgxDateRangePicker', () => {
16211622
expect(calendarHeader).toBeFalsy('Calendar header should not be present');
16221623
}));
16231624

1625+
it('should set calendar orientation property', fakeAsync(() => {
1626+
fixture = TestBed.createComponent(DateRangeDefaultComponent);
1627+
fixture.detectChanges();
1628+
dateRange = fixture.componentInstance.dateRange;
1629+
dateRange.open();
1630+
tick();
1631+
fixture.detectChanges();
1632+
1633+
expect(dateRange['_calendar'].orientation).toEqual(PickerCalendarOrientation.Horizontal.toString());
1634+
expect(dateRange['_calendar'].wrapper.nativeElement).not.toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
1635+
dateRange.close();
1636+
tick();
1637+
fixture.detectChanges();
1638+
1639+
dateRange.orientation = PickerCalendarOrientation.Vertical;
1640+
dateRange.open();
1641+
tick();
1642+
fixture.detectChanges();
1643+
1644+
expect(dateRange['_calendar'].orientation).toEqual(PickerCalendarOrientation.Vertical.toString());
1645+
expect(dateRange['_calendar'].wrapper.nativeElement).toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
1646+
}));
1647+
16241648
describe('Templated Calendar Header', () => {
16251649
let dateRangeDebugEl: DebugElement;
16261650
beforeEach(fakeAsync(() => {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
3535
import { IgxIconComponent } from '../icon/icon.component';
3636
import { getCurrentResourceStrings } from '../core/i18n/resources';
3737
import { fadeIn, fadeOut } from 'igniteui-angular/animations';
38+
import { PickerCalendarOrientation } from '../date-common/types';
3839

3940
const SingleInputDatesConcatenationString = ' - ';
4041

@@ -93,6 +94,15 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
9394
@Input()
9495
public displayMonthsCount = 2;
9596

97+
/**
98+
* Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.
99+
*
100+
* @example
101+
* <igx-date-range-picker orientation="vertical"></igx-date-range-picker>
102+
*/
103+
@Input()
104+
public orientation: PickerCalendarOrientation = PickerCalendarOrientation.Horizontal;
105+
96106
/**
97107
* Gets/Sets whether dates that are not part of the current month will be displayed.
98108
*
@@ -1101,6 +1111,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
11011111
this._calendar.headerTemplate = this.headerTemplate;
11021112
this._calendar.subheaderTemplate = this.subheaderTemplate;
11031113
this._calendar.headerOrientation = this.headerOrientation;
1114+
this._calendar.orientation = this.orientation;
11041115
this.calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
11051116

11061117
componentInstance.mode = this.mode;

0 commit comments

Comments
 (0)