diff --git a/src/cdk/tree/padding.ts b/src/cdk/tree/padding.ts index e26b088f9cad..30fad4993a27 100644 --- a/src/cdk/tree/padding.ts +++ b/src/cdk/tree/padding.ts @@ -37,7 +37,10 @@ export class CdkTreeNodePadding implements OnDestroy { @Input('cdkTreeNodePadding') get level(): number { return this._level; } set level(value: number) { - this._level = coerceNumberProperty(value); + // Set to null as the fallback value so that _setPadding can fall back to the node level if the + // consumer set the directive as `cdkTreeNodePadding=""`. We still want to take this value if + // they set 0 explicitly. + this._level = coerceNumberProperty(value, null)!; this._setPadding(); } _level: number; @@ -90,8 +93,8 @@ export class CdkTreeNodePadding implements OnDestroy { const nodeLevel = (this._treeNode.data && this._tree.treeControl.getLevel) ? this._tree.treeControl.getLevel(this._treeNode.data) : null; - const level = this._level || nodeLevel; - return level ? `${level * this._indent}${this.indentUnits}` : null; + const level = this._level == null ? nodeLevel : this._level; + return typeof level === 'number' ? `${level * this._indent}${this.indentUnits}` : null; } _setPadding(forceChange = false) { diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts index a9196a37cc9a..d8e48f44f9af 100644 --- a/src/cdk/tree/tree.spec.ts +++ b/src/cdk/tree/tree.spec.ts @@ -6,7 +6,15 @@ * found in the LICENSE file at https://angular.io/license */ import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing'; -import {Component, ViewChild, TrackByFunction, Type, EventEmitter} from '@angular/core'; +import { + Component, + ViewChild, + TrackByFunction, + Type, + EventEmitter, + ViewChildren, + QueryList, +} from '@angular/core'; import {CollectionViewer, DataSource} from '@angular/cdk/collections'; import {Directionality, Direction} from '@angular/cdk/bidi'; @@ -17,7 +25,7 @@ import {BaseTreeControl} from './control/base-tree-control'; import {TreeControl} from './control/tree-control'; import {FlatTreeControl} from './control/flat-tree-control'; import {NestedTreeControl} from './control/nested-tree-control'; -import {CdkTreeModule} from './index'; +import {CdkTreeModule, CdkTreeNodePadding} from './index'; import {CdkTree, CdkTreeNode} from './tree'; import {getTreeControlFunctionsMissingError} from './tree-errors'; @@ -137,6 +145,18 @@ describe('CdkTree', () => { [`${data[2].pizzaTopping} - ${data[2].pizzaCheese} + ${data[2].pizzaBase}`]); }); + it('should be able to set zero as the indent level', () => { + component.paddingNodes.forEach(node => node.level = 0); + fixture.detectChanges(); + + const data = dataSource.data; + + expectFlatTreeToMatch(treeElement, 0, 'px', + [`${data[0].pizzaTopping} - ${data[0].pizzaCheese} + ${data[0].pizzaBase}`], + [`${data[1].pizzaTopping} - ${data[1].pizzaCheese} + ${data[1].pizzaBase}`], + [`${data[2].pizzaTopping} - ${data[2].pizzaCheese} + ${data[2].pizzaBase}`]); + }); + it('should reset the opposite direction padding if the direction changes', () => { const node = getNodes(treeElement)[0]; @@ -1046,7 +1066,10 @@ function expectFlatTreeToMatch(treeElement: Element, } function checkLevel(node: Element, expectedNode: any[]) { - const actualLevel = (node as HTMLElement).style.paddingLeft; + const rawLevel = (node as HTMLElement).style.paddingLeft; + + // Some browsers return 0, while others return 0px. + const actualLevel = rawLevel === '0' ? '0px' : rawLevel; const expectedLevel = `${(expectedNode.length) * expectedPaddingIndent}${expectedPaddingUnits}`; if (actualLevel != expectedLevel) { missedExpectations.push( @@ -1132,7 +1155,7 @@ class SimpleCdkTreeApp { indent: number | string = 28; @ViewChild(CdkTree, {static: false}) tree: CdkTree; - + @ViewChildren(CdkTreeNodePadding) paddingNodes: QueryList>; } @Component({ diff --git a/src/material/tree/tree.spec.ts b/src/material/tree/tree.spec.ts index 0b9265936bc1..a4f1e39d66da 100644 --- a/src/material/tree/tree.spec.ts +++ b/src/material/tree/tree.spec.ts @@ -539,12 +539,14 @@ function expectFlatTreeToMatch(treeElement: Element, expectedPaddingIndent: numb } function checkLevel(node: Element, expectedNode: any[]) { + const rawLevel = (node as HTMLElement).style.paddingLeft; - const actualLevel = (node as HTMLElement).style.paddingLeft; + // Some browsers return 0, while others return 0px. + const actualLevel = rawLevel === '0' ? '0px' : rawLevel; if (expectedNode.length === 1) { - if (actualLevel !== ``) { + if (actualLevel !== `` && actualLevel !== '0px') { missedExpectations.push( - `Expected node level to be 0 but was ${actualLevel}`); + `Expected node level to be 0px but was ${actualLevel}`); } } else { const expectedLevel = `${(expectedNode.length - 1) * expectedPaddingIndent}px`;