import * as i1 from '@angular/cdk/tree'; import { CdkTreeNode, CdkTreeNodeDef, CdkNestedTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodePadding, CdkTreeNodeOutlet, CdkTree, CdkTreeNodeToggle, CdkTreeModule } from '@angular/cdk/tree'; import * as i0 from '@angular/core'; import { Directive, Attribute, Input, Inject, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core'; import { mixinTabIndex, mixinDisabled, MatCommonModule } from '@angular/material/core'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { DataSource } from '@angular/cdk/collections'; import { BehaviorSubject, merge } from 'rxjs'; import { take, map } from 'rxjs/operators'; const _MatTreeNodeBase = mixinTabIndex(mixinDisabled(CdkTreeNode)); /** * Wrapper for the CdkTree node with Material design styles. */ class MatTreeNode extends _MatTreeNodeBase { constructor(elementRef, tree, tabIndex) { super(elementRef, tree); this.tabIndex = Number(tabIndex) || 0; } // This is a workaround for https://github.com/angular/angular/issues/23091 // In aot mode, the lifecycle hooks from parent class are not called. ngOnInit() { super.ngOnInit(); } ngOnDestroy() { super.ngOnDestroy(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNode, deps: [{ token: i0.ElementRef }, { token: i1.CdkTree }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatTreeNode, selector: "mat-tree-node", inputs: { role: "role", disabled: "disabled", tabIndex: "tabIndex" }, host: { classAttribute: "mat-tree-node" }, providers: [{ provide: CdkTreeNode, useExisting: MatTreeNode }], exportAs: ["matTreeNode"], usesInheritance: true, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNode, decorators: [{ type: Directive, args: [{ selector: 'mat-tree-node', exportAs: 'matTreeNode', inputs: ['role', 'disabled', 'tabIndex'], providers: [{ provide: CdkTreeNode, useExisting: MatTreeNode }], host: { 'class': 'mat-tree-node', }, }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.CdkTree }, { type: undefined, decorators: [{ type: Attribute, args: ['tabindex'] }] }]; } }); /** * Wrapper for the CdkTree node definition with Material design styles. * Captures the node's template and a when predicate that describes when this node should be used. */ class MatTreeNodeDef extends CdkTreeNodeDef { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodeDef, deps: null, target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: { when: ["matTreeNodeDefWhen", "when"], data: ["matTreeNode", "data"] }, providers: [{ provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef }], usesInheritance: true, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodeDef, decorators: [{ type: Directive, args: [{ selector: '[matTreeNodeDef]', inputs: ['when: matTreeNodeDefWhen'], providers: [{ provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef }], }] }], propDecorators: { data: [{ type: Input, args: ['matTreeNode'] }] } }); /** * Wrapper for the CdkTree nested node with Material design styles. */ class MatNestedTreeNode extends CdkNestedTreeNode { /** Whether the node is disabled. */ get disabled() { return this._disabled; } set disabled(value) { this._disabled = coerceBooleanProperty(value); } /** Tabindex for the node. */ get tabIndex() { return this.disabled ? -1 : this._tabIndex; } set tabIndex(value) { // If the specified tabIndex value is null or undefined, fall back to the default value. this._tabIndex = value != null ? value : 0; } constructor(elementRef, tree, differs, tabIndex) { super(elementRef, tree, differs); this._disabled = false; this.tabIndex = Number(tabIndex) || 0; } // This is a workaround for https://github.com/angular/angular/issues/19145 // In aot mode, the lifecycle hooks from parent class are not called. // TODO(tinayuangao): Remove when the angular issue #19145 is fixed ngOnInit() { super.ngOnInit(); } ngAfterContentInit() { super.ngAfterContentInit(); } ngOnDestroy() { super.ngOnDestroy(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatNestedTreeNode, deps: [{ token: i0.ElementRef }, { token: i1.CdkTree }, { token: i0.IterableDiffers }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: { role: "role", disabled: "disabled", tabIndex: "tabIndex", node: ["matNestedTreeNode", "node"] }, host: { classAttribute: "mat-nested-tree-node" }, providers: [ { provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode }, { provide: CdkTreeNode, useExisting: MatNestedTreeNode }, { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode }, ], exportAs: ["matNestedTreeNode"], usesInheritance: true, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatNestedTreeNode, decorators: [{ type: Directive, args: [{ selector: 'mat-nested-tree-node', exportAs: 'matNestedTreeNode', inputs: ['role', 'disabled', 'tabIndex'], providers: [ { provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode }, { provide: CdkTreeNode, useExisting: MatNestedTreeNode }, { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode }, ], host: { 'class': 'mat-nested-tree-node', }, }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.CdkTree }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{ type: Attribute, args: ['tabindex'] }] }]; }, propDecorators: { node: [{ type: Input, args: ['matNestedTreeNode'] }], disabled: [{ type: Input }], tabIndex: [{ type: Input }] } }); /** * Wrapper for the CdkTree padding with Material design styles. */ class MatTreeNodePadding extends CdkTreeNodePadding { /** The level of depth of the tree node. The padding will be `level * indent` pixels. */ get level() { return this._level; } set level(value) { this._setLevelInput(value); } /** The indent for each level. Default number 40px from material design menu sub-menu spec. */ get indent() { return this._indent; } set indent(indent) { this._setIndentInput(indent); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodePadding, deps: null, target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: { level: ["matTreeNodePadding", "level"], indent: ["matTreeNodePaddingIndent", "indent"] }, providers: [{ provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding }], usesInheritance: true, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodePadding, decorators: [{ type: Directive, args: [{ selector: '[matTreeNodePadding]', providers: [{ provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding }], }] }], propDecorators: { level: [{ type: Input, args: ['matTreeNodePadding'] }], indent: [{ type: Input, args: ['matTreeNodePaddingIndent'] }] } }); /** * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes * inside the outlet. */ class MatTreeNodeOutlet { constructor(viewContainer, _node) { this.viewContainer = viewContainer; this._node = _node; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: CDK_TREE_NODE_OUTLET_NODE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]", providers: [ { provide: CdkTreeNodeOutlet, useExisting: MatTreeNodeOutlet, }, ], ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodeOutlet, decorators: [{ type: Directive, args: [{ selector: '[matTreeNodeOutlet]', providers: [ { provide: CdkTreeNodeOutlet, useExisting: MatTreeNodeOutlet, }, ], }] }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{ type: Inject, args: [CDK_TREE_NODE_OUTLET_NODE] }, { type: Optional }] }]; } }); /** * Wrapper for the CdkTable with Material design styles. */ class MatTree extends CdkTree { constructor() { super(...arguments); // Outlets within the tree's template where the dataNodes will be inserted. // We need an initializer here to avoid a TS error. The value will be set in `ngAfterViewInit`. this._nodeOutlet = undefined; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatTree, selector: "mat-tree", host: { attributes: { "role": "tree" }, classAttribute: "mat-tree" }, providers: [{ provide: CdkTree, useExisting: MatTree }], viewQueries: [{ propertyName: "_nodeOutlet", first: true, predicate: MatTreeNodeOutlet, descendants: true, static: true }], exportAs: ["matTree"], usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [".mat-tree{display:block}.mat-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word}.mat-nested-tree-node{border-bottom-width:0}"], dependencies: [{ kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTree, decorators: [{ type: Component, args: [{ selector: 'mat-tree', exportAs: 'matTree', template: ``, host: { 'class': 'mat-tree', 'role': 'tree', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: CdkTree, useExisting: MatTree }], styles: [".mat-tree{display:block}.mat-tree-node{display:flex;align-items:center;flex:1;word-wrap:break-word}.mat-nested-tree-node{border-bottom-width:0}"] }] }], propDecorators: { _nodeOutlet: [{ type: ViewChild, args: [MatTreeNodeOutlet, { static: true }] }] } }); /** * Wrapper for the CdkTree's toggle with Material design styles. */ class MatTreeNodeToggle extends CdkTreeNodeToggle { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodeToggle, deps: null, target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: { recursive: ["matTreeNodeToggleRecursive", "recursive"] }, providers: [{ provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle }], usesInheritance: true, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeNodeToggle, decorators: [{ type: Directive, args: [{ selector: '[matTreeNodeToggle]', providers: [{ provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle }], inputs: ['recursive: matTreeNodeToggleRecursive'], }] }] }); const MAT_TREE_DIRECTIVES = [ MatNestedTreeNode, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeToggle, MatTree, MatTreeNode, MatTreeNodeOutlet, ]; class MatTreeModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: MatTreeModule, declarations: [MatNestedTreeNode, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeToggle, MatTree, MatTreeNode, MatTreeNodeOutlet], imports: [CdkTreeModule, MatCommonModule], exports: [MatCommonModule, MatNestedTreeNode, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeToggle, MatTree, MatTreeNode, MatTreeNodeOutlet] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeModule, imports: [CdkTreeModule, MatCommonModule, MatCommonModule] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatTreeModule, decorators: [{ type: NgModule, args: [{ imports: [CdkTreeModule, MatCommonModule], exports: [MatCommonModule, MAT_TREE_DIRECTIVES], declarations: MAT_TREE_DIRECTIVES, }] }] }); /** * Tree flattener to convert a normal type of node to node with children & level information. * Transform nested nodes of type `T` to flattened nodes of type `F`. * * For example, the input data of type `T` is nested, and contains its children data: * SomeNode: { * key: 'Fruits', * children: [ * NodeOne: { * key: 'Apple', * }, * NodeTwo: { * key: 'Pear', * } * ] * } * After flattener flatten the tree, the structure will become * SomeNode: { * key: 'Fruits', * expandable: true, * level: 1 * }, * NodeOne: { * key: 'Apple', * expandable: false, * level: 2 * }, * NodeTwo: { * key: 'Pear', * expandable: false, * level: 2 * } * and the output flattened type is `F` with additional information. */ class MatTreeFlattener { constructor(transformFunction, getLevel, isExpandable, getChildren) { this.transformFunction = transformFunction; this.getLevel = getLevel; this.isExpandable = isExpandable; this.getChildren = getChildren; } _flattenNode(node, level, resultNodes, parentMap) { const flatNode = this.transformFunction(node, level); resultNodes.push(flatNode); if (this.isExpandable(flatNode)) { const childrenNodes = this.getChildren(node); if (childrenNodes) { if (Array.isArray(childrenNodes)) { this._flattenChildren(childrenNodes, level, resultNodes, parentMap); } else { childrenNodes.pipe(take(1)).subscribe(children => { this._flattenChildren(children, level, resultNodes, parentMap); }); } } } return resultNodes; } _flattenChildren(children, level, resultNodes, parentMap) { children.forEach((child, index) => { let childParentMap = parentMap.slice(); childParentMap.push(index != children.length - 1); this._flattenNode(child, level + 1, resultNodes, childParentMap); }); } /** * Flatten a list of node type T to flattened version of node F. * Please note that type T may be nested, and the length of `structuredData` may be different * from that of returned list `F[]`. */ flattenNodes(structuredData) { let resultNodes = []; structuredData.forEach(node => this._flattenNode(node, 0, resultNodes, [])); return resultNodes; } /** * Expand flattened node with current expansion status. * The returned list may have different length. */ expandFlattenedNodes(nodes, treeControl) { let results = []; let currentExpand = []; currentExpand[0] = true; nodes.forEach(node => { let expand = true; for (let i = 0; i <= this.getLevel(node); i++) { expand = expand && currentExpand[i]; } if (expand) { results.push(node); } if (this.isExpandable(node)) { currentExpand[this.getLevel(node) + 1] = treeControl.isExpanded(node); } }); return results; } } /** * Data source for flat tree. * The data source need to handle expansion/collapsion of the tree node and change the data feed * to `MatTree`. * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted * to type `F` for `MatTree` to consume. */ class MatTreeFlatDataSource extends DataSource { get data() { return this._data.value; } set data(value) { this._data.next(value); this._flattenedData.next(this._treeFlattener.flattenNodes(this.data)); this._treeControl.dataNodes = this._flattenedData.value; } constructor(_treeControl, _treeFlattener, initialData) { super(); this._treeControl = _treeControl; this._treeFlattener = _treeFlattener; this._flattenedData = new BehaviorSubject([]); this._expandedData = new BehaviorSubject([]); this._data = new BehaviorSubject([]); if (initialData) { // Assign the data through the constructor to ensure that all of the logic is executed. this.data = initialData; } } connect(collectionViewer) { return merge(collectionViewer.viewChange, this._treeControl.expansionModel.changed, this._flattenedData).pipe(map(() => { this._expandedData.next(this._treeFlattener.expandFlattenedNodes(this._flattenedData.value, this._treeControl)); return this._expandedData.value; })); } disconnect() { // no op } } /** * Data source for nested tree. * * The data source for nested tree doesn't have to consider node flattener, or the way to expand * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node. */ class MatTreeNestedDataSource extends DataSource { constructor() { super(...arguments); this._data = new BehaviorSubject([]); } /** * Data for the nested tree */ get data() { return this._data.value; } set data(value) { this._data.next(value); } connect(collectionViewer) { return merge(...[collectionViewer.viewChange, this._data]).pipe(map(() => this.data)); } disconnect() { // no op } } /** * Generated bundle index. Do not edit. */ export { MatNestedTreeNode, MatTree, MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule, MatTreeNestedDataSource, MatTreeNode, MatTreeNodeDef, MatTreeNodeOutlet, MatTreeNodePadding, MatTreeNodeToggle }; //# sourceMappingURL=tree.mjs.map