tree.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { CDK_TREE_NODE_OUTLET_NODE, CdkNestedTreeNode, CdkTree, CdkTreeNode, CdkTreeNodeDef, CdkTreeNodePadding, CdkTreeNodeOutlet, CdkTreeNodeToggle, CdkTreeModule } from '@angular/cdk/tree';
  9. import { Attribute, Directive, ElementRef, Input, IterableDiffers, Inject, Optional, ViewContainerRef, ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
  10. import { mixinDisabled, mixinTabIndex, MatCommonModule } from '@angular/material/core';
  11. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  12. import { CommonModule } from '@angular/common';
  13. import { DataSource } from '@angular/cdk/collections';
  14. import { BehaviorSubject, merge } from 'rxjs';
  15. import { map, take } from 'rxjs/operators';
  16. /**
  17. * @fileoverview added by tsickle
  18. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  19. */
  20. /** @type {?} */
  21. const _MatTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkTreeNode));
  22. /**
  23. * Wrapper for the CdkTree node with Material design styles.
  24. * @template T
  25. */
  26. class MatTreeNode extends _MatTreeNodeMixinBase {
  27. /**
  28. * @param {?} _elementRef
  29. * @param {?} _tree
  30. * @param {?} tabIndex
  31. */
  32. constructor(_elementRef, _tree, tabIndex) {
  33. super(_elementRef, _tree);
  34. this._elementRef = _elementRef;
  35. this._tree = _tree;
  36. this.role = 'treeitem';
  37. this.tabIndex = Number(tabIndex) || 0;
  38. }
  39. }
  40. MatTreeNode.decorators = [
  41. { type: Directive, args: [{
  42. selector: 'mat-tree-node',
  43. exportAs: 'matTreeNode',
  44. inputs: ['disabled', 'tabIndex'],
  45. host: {
  46. '[attr.aria-expanded]': 'isExpanded',
  47. '[attr.aria-level]': 'role === "treeitem" ? level : null',
  48. '[attr.role]': 'role',
  49. 'class': 'mat-tree-node'
  50. },
  51. providers: [{ provide: CdkTreeNode, useExisting: MatTreeNode }]
  52. },] },
  53. ];
  54. /** @nocollapse */
  55. MatTreeNode.ctorParameters = () => [
  56. { type: ElementRef },
  57. { type: CdkTree },
  58. { type: String, decorators: [{ type: Attribute, args: ['tabindex',] }] }
  59. ];
  60. MatTreeNode.propDecorators = {
  61. role: [{ type: Input }]
  62. };
  63. /**
  64. * Wrapper for the CdkTree node definition with Material design styles.
  65. * @template T
  66. */
  67. class MatTreeNodeDef extends CdkTreeNodeDef {
  68. }
  69. MatTreeNodeDef.decorators = [
  70. { type: Directive, args: [{
  71. selector: '[matTreeNodeDef]',
  72. inputs: [
  73. 'when: matTreeNodeDefWhen'
  74. ],
  75. providers: [{ provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef }]
  76. },] },
  77. ];
  78. MatTreeNodeDef.propDecorators = {
  79. data: [{ type: Input, args: ['matTreeNode',] }]
  80. };
  81. /**
  82. * Wrapper for the CdkTree nested node with Material design styles.
  83. * @template T
  84. */
  85. class MatNestedTreeNode extends CdkNestedTreeNode {
  86. /**
  87. * @param {?} _elementRef
  88. * @param {?} _tree
  89. * @param {?} _differs
  90. * @param {?} tabIndex
  91. */
  92. constructor(_elementRef, _tree, _differs, tabIndex) {
  93. super(_elementRef, _tree, _differs);
  94. this._elementRef = _elementRef;
  95. this._tree = _tree;
  96. this._differs = _differs;
  97. this._disabled = false;
  98. this.tabIndex = Number(tabIndex) || 0;
  99. }
  100. /**
  101. * Whether the node is disabled.
  102. * @return {?}
  103. */
  104. get disabled() { return this._disabled; }
  105. /**
  106. * @param {?} value
  107. * @return {?}
  108. */
  109. set disabled(value) { this._disabled = coerceBooleanProperty(value); }
  110. /**
  111. * Tabindex for the node.
  112. * @return {?}
  113. */
  114. get tabIndex() { return this.disabled ? -1 : this._tabIndex; }
  115. /**
  116. * @param {?} value
  117. * @return {?}
  118. */
  119. set tabIndex(value) {
  120. // If the specified tabIndex value is null or undefined, fall back to the default value.
  121. this._tabIndex = value != null ? value : 0;
  122. }
  123. // This is a workaround for https://github.com/angular/angular/issues/23091
  124. // In aot mode, the lifecycle hooks from parent class are not called.
  125. // TODO(tinayuangao): Remove when the angular issue #23091 is fixed
  126. /**
  127. * @return {?}
  128. */
  129. ngAfterContentInit() {
  130. super.ngAfterContentInit();
  131. }
  132. /**
  133. * @return {?}
  134. */
  135. ngOnDestroy() {
  136. super.ngOnDestroy();
  137. }
  138. }
  139. MatNestedTreeNode.decorators = [
  140. { type: Directive, args: [{
  141. selector: 'mat-nested-tree-node',
  142. exportAs: 'matNestedTreeNode',
  143. host: {
  144. '[attr.aria-expanded]': 'isExpanded',
  145. '[attr.role]': 'role',
  146. 'class': 'mat-nested-tree-node',
  147. },
  148. providers: [
  149. { provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode },
  150. { provide: CdkTreeNode, useExisting: MatNestedTreeNode },
  151. { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode }
  152. ]
  153. },] },
  154. ];
  155. /** @nocollapse */
  156. MatNestedTreeNode.ctorParameters = () => [
  157. { type: ElementRef },
  158. { type: CdkTree },
  159. { type: IterableDiffers },
  160. { type: String, decorators: [{ type: Attribute, args: ['tabindex',] }] }
  161. ];
  162. MatNestedTreeNode.propDecorators = {
  163. node: [{ type: Input, args: ['matNestedTreeNode',] }],
  164. disabled: [{ type: Input }],
  165. tabIndex: [{ type: Input }]
  166. };
  167. /**
  168. * @fileoverview added by tsickle
  169. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  170. */
  171. /**
  172. * Wrapper for the CdkTree padding with Material design styles.
  173. * @template T
  174. */
  175. class MatTreeNodePadding extends CdkTreeNodePadding {
  176. }
  177. MatTreeNodePadding.decorators = [
  178. { type: Directive, args: [{
  179. selector: '[matTreeNodePadding]',
  180. providers: [{ provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding }]
  181. },] },
  182. ];
  183. MatTreeNodePadding.propDecorators = {
  184. level: [{ type: Input, args: ['matTreeNodePadding',] }],
  185. indent: [{ type: Input, args: ['matTreeNodePaddingIndent',] }]
  186. };
  187. /**
  188. * @fileoverview added by tsickle
  189. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  190. */
  191. /**
  192. * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes
  193. * inside the outlet.
  194. */
  195. class MatTreeNodeOutlet {
  196. /**
  197. * @param {?} viewContainer
  198. * @param {?=} _node
  199. */
  200. constructor(viewContainer, _node) {
  201. this.viewContainer = viewContainer;
  202. this._node = _node;
  203. }
  204. }
  205. MatTreeNodeOutlet.decorators = [
  206. { type: Directive, args: [{
  207. selector: '[matTreeNodeOutlet]',
  208. providers: [{
  209. provide: CdkTreeNodeOutlet,
  210. useExisting: MatTreeNodeOutlet
  211. }]
  212. },] },
  213. ];
  214. /** @nocollapse */
  215. MatTreeNodeOutlet.ctorParameters = () => [
  216. { type: ViewContainerRef },
  217. { type: undefined, decorators: [{ type: Inject, args: [CDK_TREE_NODE_OUTLET_NODE,] }, { type: Optional }] }
  218. ];
  219. /**
  220. * @fileoverview added by tsickle
  221. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  222. */
  223. /**
  224. * Wrapper for the CdkTable with Material design styles.
  225. * @template T
  226. */
  227. class MatTree extends CdkTree {
  228. }
  229. MatTree.decorators = [
  230. { type: Component, args: [{selector: 'mat-tree',
  231. exportAs: 'matTree',
  232. template: `<ng-container matTreeNodeOutlet></ng-container>`,
  233. host: {
  234. 'class': 'mat-tree',
  235. 'role': 'tree',
  236. },
  237. styles: [".mat-tree{display:block}.mat-tree-node{display:flex;align-items:center;min-height:48px;flex:1;overflow:hidden;word-wrap:break-word}.mat-nested-tree-ndoe{border-bottom-width:0}"],
  238. encapsulation: ViewEncapsulation.None,
  239. // See note on CdkTree for explanation on why this uses the default change detection strategy.
  240. // tslint:disable-next-line:validate-decorators
  241. changeDetection: ChangeDetectionStrategy.Default,
  242. providers: [{ provide: CdkTree, useExisting: MatTree }]
  243. },] },
  244. ];
  245. MatTree.propDecorators = {
  246. _nodeOutlet: [{ type: ViewChild, args: [MatTreeNodeOutlet, { static: true },] }]
  247. };
  248. /**
  249. * @fileoverview added by tsickle
  250. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  251. */
  252. /**
  253. * Wrapper for the CdkTree's toggle with Material design styles.
  254. * @template T
  255. */
  256. class MatTreeNodeToggle extends CdkTreeNodeToggle {
  257. constructor() {
  258. super(...arguments);
  259. this.recursive = false;
  260. }
  261. }
  262. MatTreeNodeToggle.decorators = [
  263. { type: Directive, args: [{
  264. selector: '[matTreeNodeToggle]',
  265. providers: [{ provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle }]
  266. },] },
  267. ];
  268. MatTreeNodeToggle.propDecorators = {
  269. recursive: [{ type: Input, args: ['matTreeNodeToggleRecursive',] }]
  270. };
  271. /**
  272. * @fileoverview added by tsickle
  273. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  274. */
  275. /** @type {?} */
  276. const MAT_TREE_DIRECTIVES = [
  277. MatNestedTreeNode,
  278. MatTreeNodeDef,
  279. MatTreeNodePadding,
  280. MatTreeNodeToggle,
  281. MatTree,
  282. MatTreeNode,
  283. MatTreeNodeOutlet
  284. ];
  285. class MatTreeModule {
  286. }
  287. MatTreeModule.decorators = [
  288. { type: NgModule, args: [{
  289. imports: [CdkTreeModule, CommonModule, MatCommonModule],
  290. exports: MAT_TREE_DIRECTIVES,
  291. declarations: MAT_TREE_DIRECTIVES,
  292. },] },
  293. ];
  294. /**
  295. * @fileoverview added by tsickle
  296. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  297. */
  298. /**
  299. * Tree flattener to convert a normal type of node to node with children & level information.
  300. * Transform nested nodes of type `T` to flattened nodes of type `F`.
  301. *
  302. * For example, the input data of type `T` is nested, and contains its children data:
  303. * SomeNode: {
  304. * key: 'Fruits',
  305. * children: [
  306. * NodeOne: {
  307. * key: 'Apple',
  308. * },
  309. * NodeTwo: {
  310. * key: 'Pear',
  311. * }
  312. * ]
  313. * }
  314. * After flattener flatten the tree, the structure will become
  315. * SomeNode: {
  316. * key: 'Fruits',
  317. * expandable: true,
  318. * level: 1
  319. * },
  320. * NodeOne: {
  321. * key: 'Apple',
  322. * expandable: false,
  323. * level: 2
  324. * },
  325. * NodeTwo: {
  326. * key: 'Pear',
  327. * expandable: false,
  328. * level: 2
  329. * }
  330. * and the output flattened type is `F` with additional information.
  331. * @template T, F
  332. */
  333. class MatTreeFlattener {
  334. /**
  335. * @param {?} transformFunction
  336. * @param {?} getLevel
  337. * @param {?} isExpandable
  338. * @param {?} getChildren
  339. */
  340. constructor(transformFunction, getLevel, isExpandable, getChildren) {
  341. this.transformFunction = transformFunction;
  342. this.getLevel = getLevel;
  343. this.isExpandable = isExpandable;
  344. this.getChildren = getChildren;
  345. }
  346. /**
  347. * @param {?} node
  348. * @param {?} level
  349. * @param {?} resultNodes
  350. * @param {?} parentMap
  351. * @return {?}
  352. */
  353. _flattenNode(node, level, resultNodes, parentMap) {
  354. /** @type {?} */
  355. const flatNode = this.transformFunction(node, level);
  356. resultNodes.push(flatNode);
  357. if (this.isExpandable(flatNode)) {
  358. /** @type {?} */
  359. const childrenNodes = this.getChildren(node);
  360. if (childrenNodes) {
  361. if (Array.isArray(childrenNodes)) {
  362. this._flattenChildren(childrenNodes, level, resultNodes, parentMap);
  363. }
  364. else {
  365. childrenNodes.pipe(take(1)).subscribe((/**
  366. * @param {?} children
  367. * @return {?}
  368. */
  369. children => {
  370. this._flattenChildren(children, level, resultNodes, parentMap);
  371. }));
  372. }
  373. }
  374. }
  375. return resultNodes;
  376. }
  377. /**
  378. * @param {?} children
  379. * @param {?} level
  380. * @param {?} resultNodes
  381. * @param {?} parentMap
  382. * @return {?}
  383. */
  384. _flattenChildren(children, level, resultNodes, parentMap) {
  385. children.forEach((/**
  386. * @param {?} child
  387. * @param {?} index
  388. * @return {?}
  389. */
  390. (child, index) => {
  391. /** @type {?} */
  392. let childParentMap = parentMap.slice();
  393. childParentMap.push(index != children.length - 1);
  394. this._flattenNode(child, level + 1, resultNodes, childParentMap);
  395. }));
  396. }
  397. /**
  398. * Flatten a list of node type T to flattened version of node F.
  399. * Please note that type T may be nested, and the length of `structuredData` may be different
  400. * from that of returned list `F[]`.
  401. * @param {?} structuredData
  402. * @return {?}
  403. */
  404. flattenNodes(structuredData) {
  405. /** @type {?} */
  406. let resultNodes = [];
  407. structuredData.forEach((/**
  408. * @param {?} node
  409. * @return {?}
  410. */
  411. node => this._flattenNode(node, 0, resultNodes, [])));
  412. return resultNodes;
  413. }
  414. /**
  415. * Expand flattened node with current expansion status.
  416. * The returned list may have different length.
  417. * @param {?} nodes
  418. * @param {?} treeControl
  419. * @return {?}
  420. */
  421. expandFlattenedNodes(nodes, treeControl) {
  422. /** @type {?} */
  423. let results = [];
  424. /** @type {?} */
  425. let currentExpand = [];
  426. currentExpand[0] = true;
  427. nodes.forEach((/**
  428. * @param {?} node
  429. * @return {?}
  430. */
  431. node => {
  432. /** @type {?} */
  433. let expand = true;
  434. for (let i = 0; i <= this.getLevel(node); i++) {
  435. expand = expand && currentExpand[i];
  436. }
  437. if (expand) {
  438. results.push(node);
  439. }
  440. if (this.isExpandable(node)) {
  441. currentExpand[this.getLevel(node) + 1] = treeControl.isExpanded(node);
  442. }
  443. }));
  444. return results;
  445. }
  446. }
  447. /**
  448. * Data source for flat tree.
  449. * The data source need to handle expansion/collapsion of the tree node and change the data feed
  450. * to `MatTree`.
  451. * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted
  452. * to type `F` for `MatTree` to consume.
  453. * @template T, F
  454. */
  455. class MatTreeFlatDataSource extends DataSource {
  456. /**
  457. * @param {?} _treeControl
  458. * @param {?} _treeFlattener
  459. * @param {?=} initialData
  460. */
  461. constructor(_treeControl, _treeFlattener, initialData = []) {
  462. super();
  463. this._treeControl = _treeControl;
  464. this._treeFlattener = _treeFlattener;
  465. this._flattenedData = new BehaviorSubject([]);
  466. this._expandedData = new BehaviorSubject([]);
  467. this._data = new BehaviorSubject(initialData);
  468. }
  469. /**
  470. * @return {?}
  471. */
  472. get data() { return this._data.value; }
  473. /**
  474. * @param {?} value
  475. * @return {?}
  476. */
  477. set data(value) {
  478. this._data.next(value);
  479. this._flattenedData.next(this._treeFlattener.flattenNodes(this.data));
  480. this._treeControl.dataNodes = this._flattenedData.value;
  481. }
  482. /**
  483. * @param {?} collectionViewer
  484. * @return {?}
  485. */
  486. connect(collectionViewer) {
  487. /** @type {?} */
  488. const changes = [
  489. collectionViewer.viewChange,
  490. this._treeControl.expansionModel.onChange,
  491. this._flattenedData
  492. ];
  493. return merge(...changes).pipe(map((/**
  494. * @return {?}
  495. */
  496. () => {
  497. this._expandedData.next(this._treeFlattener.expandFlattenedNodes(this._flattenedData.value, this._treeControl));
  498. return this._expandedData.value;
  499. })));
  500. }
  501. /**
  502. * @return {?}
  503. */
  504. disconnect() {
  505. // no op
  506. }
  507. }
  508. /**
  509. * @fileoverview added by tsickle
  510. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  511. */
  512. /**
  513. * Data source for nested tree.
  514. *
  515. * The data source for nested tree doesn't have to consider node flattener, or the way to expand
  516. * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
  517. * @template T
  518. */
  519. class MatTreeNestedDataSource extends DataSource {
  520. constructor() {
  521. super(...arguments);
  522. this._data = new BehaviorSubject([]);
  523. }
  524. /**
  525. * Data for the nested tree
  526. * @return {?}
  527. */
  528. get data() { return this._data.value; }
  529. /**
  530. * @param {?} value
  531. * @return {?}
  532. */
  533. set data(value) { this._data.next(value); }
  534. /**
  535. * @param {?} collectionViewer
  536. * @return {?}
  537. */
  538. connect(collectionViewer) {
  539. return merge(...[collectionViewer.viewChange, this._data])
  540. .pipe(map((/**
  541. * @return {?}
  542. */
  543. () => {
  544. return this.data;
  545. })));
  546. }
  547. /**
  548. * @return {?}
  549. */
  550. disconnect() {
  551. // no op
  552. }
  553. }
  554. /**
  555. * @fileoverview added by tsickle
  556. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  557. */
  558. /**
  559. * @fileoverview added by tsickle
  560. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  561. */
  562. export { MatTreeNode, MatTreeNodeDef, MatNestedTreeNode, MatTreeNodePadding, MatTree, MatTreeModule, MatTreeNodeToggle, MatTreeNodeOutlet, MatTreeFlattener, MatTreeFlatDataSource, MatTreeNestedDataSource };
  563. //# sourceMappingURL=tree.js.map