fix(scrolling): default to vertical CSS class for invalid orientation (#14145)

Since there are some structural styles that depend on the `cdk-virtual-scroll-orientation-*` classes, it's important that at least one of them is on the element at any time. Currently the user can end up with none if they did something like `orientation="horizontal-with-a-typo"`. These changes default to vertical, unless the value is `horizontal` which mirrors all the internal logic.
This commit is contained in:
Kristiyan Kostadinov
2018-11-27 16:40:09 +01:00
committed by Jeremy Elbourn
parent 18ef94f342
commit d8cd6a788b
2 changed files with 23 additions and 1 deletions
@@ -133,6 +133,28 @@ describe('CdkVirtualScrollViewport', () => {
expect(viewport.elementRef.nativeElement.scrollWidth).toBe(10000);
}));
it('should set a class based on the orientation', fakeAsync(() => {
finishInit(fixture);
const viewportElement: HTMLElement =
fixture.nativeElement.querySelector('.cdk-virtual-scroll-viewport');
expect(viewportElement.classList).toContain('cdk-virtual-scroll-orientation-vertical');
testComponent.orientation = 'horizontal';
fixture.detectChanges();
expect(viewportElement.classList).toContain('cdk-virtual-scroll-orientation-horizontal');
}));
it('should set the vertical class if an invalid orientation is set', fakeAsync(() => {
testComponent.orientation = 'diagonal';
finishInit(fixture);
const viewportElement: HTMLElement =
fixture.nativeElement.querySelector('.cdk-virtual-scroll-viewport');
expect(viewportElement.classList).toContain('cdk-virtual-scroll-orientation-vertical');
}));
it('should set rendered range', fakeAsync(() => {
finishInit(fixture);
viewport.setRenderedRange({start: 2, end: 3});
+1 -1
View File
@@ -46,7 +46,7 @@ function rangesEqual(r1: ListRange, r2: ListRange): boolean {
host: {
'class': 'cdk-virtual-scroll-viewport',
'[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
'[class.cdk-virtual-scroll-orientation-vertical]': 'orientation === "vertical"',
'[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== "horizontal"',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,