source: trip-planner-front/node_modules/@angular/cdk/fesm2015/tree.js@ ceaed42

Last change on this file since ceaed42 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 35.6 KB
Line 
1import { SelectionModel, isDataSource } from '@angular/cdk/collections';
2import { isObservable, Subject, BehaviorSubject, of } from 'rxjs';
3import { take, filter, takeUntil } from 'rxjs/operators';
4import { InjectionToken, Directive, ViewContainerRef, Inject, Optional, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, IterableDiffers, ChangeDetectorRef, Input, ViewChild, ContentChildren, ElementRef, HostListener, NgModule } from '@angular/core';
5import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
6import { Directionality } from '@angular/cdk/bidi';
7
8/**
9 * @license
10 * Copyright Google LLC All Rights Reserved.
11 *
12 * Use of this source code is governed by an MIT-style license that can be
13 * found in the LICENSE file at https://angular.io/license
14 */
15/** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
16class BaseTreeControl {
17 constructor() {
18 /** A selection model with multi-selection to track expansion status. */
19 this.expansionModel = new SelectionModel(true);
20 }
21 /** Toggles one single data node's expanded/collapsed state. */
22 toggle(dataNode) {
23 this.expansionModel.toggle(this._trackByValue(dataNode));
24 }
25 /** Expands one single data node. */
26 expand(dataNode) {
27 this.expansionModel.select(this._trackByValue(dataNode));
28 }
29 /** Collapses one single data node. */
30 collapse(dataNode) {
31 this.expansionModel.deselect(this._trackByValue(dataNode));
32 }
33 /** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
34 isExpanded(dataNode) {
35 return this.expansionModel.isSelected(this._trackByValue(dataNode));
36 }
37 /** Toggles a subtree rooted at `node` recursively. */
38 toggleDescendants(dataNode) {
39 this.expansionModel.isSelected(this._trackByValue(dataNode)) ?
40 this.collapseDescendants(dataNode) :
41 this.expandDescendants(dataNode);
42 }
43 /** Collapse all dataNodes in the tree. */
44 collapseAll() {
45 this.expansionModel.clear();
46 }
47 /** Expands a subtree rooted at given data node recursively. */
48 expandDescendants(dataNode) {
49 let toBeProcessed = [dataNode];
50 toBeProcessed.push(...this.getDescendants(dataNode));
51 this.expansionModel.select(...toBeProcessed.map(value => this._trackByValue(value)));
52 }
53 /** Collapses a subtree rooted at given data node recursively. */
54 collapseDescendants(dataNode) {
55 let toBeProcessed = [dataNode];
56 toBeProcessed.push(...this.getDescendants(dataNode));
57 this.expansionModel.deselect(...toBeProcessed.map(value => this._trackByValue(value)));
58 }
59 _trackByValue(value) {
60 return this.trackBy ? this.trackBy(value) : value;
61 }
62}
63
64/**
65 * @license
66 * Copyright Google LLC All Rights Reserved.
67 *
68 * Use of this source code is governed by an MIT-style license that can be
69 * found in the LICENSE file at https://angular.io/license
70 */
71/** Flat tree control. Able to expand/collapse a subtree recursively for flattened tree. */
72class FlatTreeControl extends BaseTreeControl {
73 /** Construct with flat tree data node functions getLevel and isExpandable. */
74 constructor(getLevel, isExpandable, options) {
75 super();
76 this.getLevel = getLevel;
77 this.isExpandable = isExpandable;
78 this.options = options;
79 if (this.options) {
80 this.trackBy = this.options.trackBy;
81 }
82 }
83 /**
84 * Gets a list of the data node's subtree of descendent data nodes.
85 *
86 * To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
87 * with correct levels.
88 */
89 getDescendants(dataNode) {
90 const startIndex = this.dataNodes.indexOf(dataNode);
91 const results = [];
92 // Goes through flattened tree nodes in the `dataNodes` array, and get all descendants.
93 // The level of descendants of a tree node must be greater than the level of the given
94 // tree node.
95 // If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
96 // If we reach a node whose level is greater than the level of the tree node, we hit a
97 // sibling of an ancestor.
98 for (let i = startIndex + 1; i < this.dataNodes.length && this.getLevel(dataNode) < this.getLevel(this.dataNodes[i]); i++) {
99 results.push(this.dataNodes[i]);
100 }
101 return results;
102 }
103 /**
104 * Expands all data nodes in the tree.
105 *
106 * To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
107 * data nodes of the tree.
108 */
109 expandAll() {
110 this.expansionModel.select(...this.dataNodes.map(node => this._trackByValue(node)));
111 }
112}
113
114/**
115 * @license
116 * Copyright Google LLC All Rights Reserved.
117 *
118 * Use of this source code is governed by an MIT-style license that can be
119 * found in the LICENSE file at https://angular.io/license
120 */
121/** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
122class NestedTreeControl extends BaseTreeControl {
123 /** Construct with nested tree function getChildren. */
124 constructor(getChildren, options) {
125 super();
126 this.getChildren = getChildren;
127 this.options = options;
128 if (this.options) {
129 this.trackBy = this.options.trackBy;
130 }
131 }
132 /**
133 * Expands all dataNodes in the tree.
134 *
135 * To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
136 * data nodes of the tree.
137 */
138 expandAll() {
139 this.expansionModel.clear();
140 const allNodes = this.dataNodes.reduce((accumulator, dataNode) => [...accumulator, ...this.getDescendants(dataNode), dataNode], []);
141 this.expansionModel.select(...allNodes.map(node => this._trackByValue(node)));
142 }
143 /** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
144 getDescendants(dataNode) {
145 const descendants = [];
146 this._getDescendants(descendants, dataNode);
147 // Remove the node itself
148 return descendants.splice(1);
149 }
150 /** A helper function to get descendants recursively. */
151 _getDescendants(descendants, dataNode) {
152 descendants.push(dataNode);
153 const childrenNodes = this.getChildren(dataNode);
154 if (Array.isArray(childrenNodes)) {
155 childrenNodes.forEach((child) => this._getDescendants(descendants, child));
156 }
157 else if (isObservable(childrenNodes)) {
158 // TypeScript as of version 3.5 doesn't seem to treat `Boolean` like a function that
159 // returns a `boolean` specifically in the context of `filter`, so we manually clarify that.
160 childrenNodes.pipe(take(1), filter(Boolean))
161 .subscribe(children => {
162 for (const child of children) {
163 this._getDescendants(descendants, child);
164 }
165 });
166 }
167 }
168}
169
170/**
171 * @license
172 * Copyright Google LLC All Rights Reserved.
173 *
174 * Use of this source code is governed by an MIT-style license that can be
175 * found in the LICENSE file at https://angular.io/license
176 */
177/**
178 * Injection token used to provide a `CdkTreeNode` to its outlet.
179 * Used primarily to avoid circular imports.
180 * @docs-private
181 */
182const CDK_TREE_NODE_OUTLET_NODE = new InjectionToken('CDK_TREE_NODE_OUTLET_NODE');
183/**
184 * Outlet for nested CdkNode. Put `[cdkTreeNodeOutlet]` on a tag to place children dataNodes
185 * inside the outlet.
186 */
187class CdkTreeNodeOutlet {
188 constructor(viewContainer, _node) {
189 this.viewContainer = viewContainer;
190 this._node = _node;
191 }
192}
193CdkTreeNodeOutlet.decorators = [
194 { type: Directive, args: [{
195 selector: '[cdkTreeNodeOutlet]'
196 },] }
197];
198CdkTreeNodeOutlet.ctorParameters = () => [
199 { type: ViewContainerRef },
200 { type: undefined, decorators: [{ type: Inject, args: [CDK_TREE_NODE_OUTLET_NODE,] }, { type: Optional }] }
201];
202
203/**
204 * @license
205 * Copyright Google LLC All Rights Reserved.
206 *
207 * Use of this source code is governed by an MIT-style license that can be
208 * found in the LICENSE file at https://angular.io/license
209 */
210/** Context provided to the tree node component. */
211class CdkTreeNodeOutletContext {
212 constructor(data) {
213 this.$implicit = data;
214 }
215}
216/**
217 * Data node definition for the CdkTree.
218 * Captures the node's template and a when predicate that describes when this node should be used.
219 */
220class CdkTreeNodeDef {
221 /** @docs-private */
222 constructor(template) {
223 this.template = template;
224 }
225}
226CdkTreeNodeDef.decorators = [
227 { type: Directive, args: [{
228 selector: '[cdkTreeNodeDef]',
229 inputs: [
230 'when: cdkTreeNodeDefWhen'
231 ],
232 },] }
233];
234CdkTreeNodeDef.ctorParameters = () => [
235 { type: TemplateRef }
236];
237
238/**
239 * @license
240 * Copyright Google LLC All Rights Reserved.
241 *
242 * Use of this source code is governed by an MIT-style license that can be
243 * found in the LICENSE file at https://angular.io/license
244 */
245/**
246 * Returns an error to be thrown when there is no usable data.
247 * @docs-private
248 */
249function getTreeNoValidDataSourceError() {
250 return Error(`A valid data source must be provided.`);
251}
252/**
253 * Returns an error to be thrown when there are multiple nodes that are missing a when function.
254 * @docs-private
255 */
256function getTreeMultipleDefaultNodeDefsError() {
257 return Error(`There can only be one default row without a when predicate function.`);
258}
259/**
260 * Returns an error to be thrown when there are no matching node defs for a particular set of data.
261 * @docs-private
262 */
263function getTreeMissingMatchingNodeDefError() {
264 return Error(`Could not find a matching node definition for the provided node data.`);
265}
266/**
267 * Returns an error to be thrown when there are tree control.
268 * @docs-private
269 */
270function getTreeControlMissingError() {
271 return Error(`Could not find a tree control for the tree.`);
272}
273/**
274 * Returns an error to be thrown when tree control did not implement functions for flat/nested node.
275 * @docs-private
276 */
277function getTreeControlFunctionsMissingError() {
278 return Error(`Could not find functions for nested/flat tree in tree control.`);
279}
280
281/**
282 * CDK tree component that connects with a data source to retrieve data of type `T` and renders
283 * dataNodes with hierarchy. Updates the dataNodes when new data is provided by the data source.
284 */
285class CdkTree {
286 constructor(_differs, _changeDetectorRef) {
287 this._differs = _differs;
288 this._changeDetectorRef = _changeDetectorRef;
289 /** Subject that emits when the component has been destroyed. */
290 this._onDestroy = new Subject();
291 /** Level of nodes */
292 this._levels = new Map();
293 // TODO(tinayuangao): Setup a listener for scrolling, emit the calculated view to viewChange.
294 // Remove the MAX_VALUE in viewChange
295 /**
296 * Stream containing the latest information on what rows are being displayed on screen.
297 * Can be used by the data source to as a heuristic of what data should be provided.
298 */
299 this.viewChange = new BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
300 }
301 /**
302 * Provides a stream containing the latest data array to render. Influenced by the tree's
303 * stream of view window (what dataNodes are currently on screen).
304 * Data source can be an observable of data array, or a data array to render.
305 */
306 get dataSource() { return this._dataSource; }
307 set dataSource(dataSource) {
308 if (this._dataSource !== dataSource) {
309 this._switchDataSource(dataSource);
310 }
311 }
312 ngOnInit() {
313 this._dataDiffer = this._differs.find([]).create(this.trackBy);
314 if (!this.treeControl && (typeof ngDevMode === 'undefined' || ngDevMode)) {
315 throw getTreeControlMissingError();
316 }
317 }
318 ngOnDestroy() {
319 this._nodeOutlet.viewContainer.clear();
320 this.viewChange.complete();
321 this._onDestroy.next();
322 this._onDestroy.complete();
323 if (this._dataSource && typeof this._dataSource.disconnect === 'function') {
324 this.dataSource.disconnect(this);
325 }
326 if (this._dataSubscription) {
327 this._dataSubscription.unsubscribe();
328 this._dataSubscription = null;
329 }
330 }
331 ngAfterContentChecked() {
332 const defaultNodeDefs = this._nodeDefs.filter(def => !def.when);
333 if (defaultNodeDefs.length > 1 && (typeof ngDevMode === 'undefined' || ngDevMode)) {
334 throw getTreeMultipleDefaultNodeDefsError();
335 }
336 this._defaultNodeDef = defaultNodeDefs[0];
337 if (this.dataSource && this._nodeDefs && !this._dataSubscription) {
338 this._observeRenderChanges();
339 }
340 }
341 // TODO(tinayuangao): Work on keyboard traversal and actions, make sure it's working for RTL
342 // and nested trees.
343 /**
344 * Switch to the provided data source by resetting the data and unsubscribing from the current
345 * render change subscription if one exists. If the data source is null, interpret this by
346 * clearing the node outlet. Otherwise start listening for new data.
347 */
348 _switchDataSource(dataSource) {
349 if (this._dataSource && typeof this._dataSource.disconnect === 'function') {
350 this.dataSource.disconnect(this);
351 }
352 if (this._dataSubscription) {
353 this._dataSubscription.unsubscribe();
354 this._dataSubscription = null;
355 }
356 // Remove the all dataNodes if there is now no data source
357 if (!dataSource) {
358 this._nodeOutlet.viewContainer.clear();
359 }
360 this._dataSource = dataSource;
361 if (this._nodeDefs) {
362 this._observeRenderChanges();
363 }
364 }
365 /** Set up a subscription for the data provided by the data source. */
366 _observeRenderChanges() {
367 let dataStream;
368 if (isDataSource(this._dataSource)) {
369 dataStream = this._dataSource.connect(this);
370 }
371 else if (isObservable(this._dataSource)) {
372 dataStream = this._dataSource;
373 }
374 else if (Array.isArray(this._dataSource)) {
375 dataStream = of(this._dataSource);
376 }
377 if (dataStream) {
378 this._dataSubscription = dataStream.pipe(takeUntil(this._onDestroy))
379 .subscribe(data => this.renderNodeChanges(data));
380 }
381 else if (typeof ngDevMode === 'undefined' || ngDevMode) {
382 throw getTreeNoValidDataSourceError();
383 }
384 }
385 /** Check for changes made in the data and render each change (node added/removed/moved). */
386 renderNodeChanges(data, dataDiffer = this._dataDiffer, viewContainer = this._nodeOutlet.viewContainer, parentData) {
387 const changes = dataDiffer.diff(data);
388 if (!changes) {
389 return;
390 }
391 changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
392 if (item.previousIndex == null) {
393 this.insertNode(data[currentIndex], currentIndex, viewContainer, parentData);
394 }
395 else if (currentIndex == null) {
396 viewContainer.remove(adjustedPreviousIndex);
397 this._levels.delete(item.item);
398 }
399 else {
400 const view = viewContainer.get(adjustedPreviousIndex);
401 viewContainer.move(view, currentIndex);
402 }
403 });
404 this._changeDetectorRef.detectChanges();
405 }
406 /**
407 * Finds the matching node definition that should be used for this node data. If there is only
408 * one node definition, it is returned. Otherwise, find the node definition that has a when
409 * predicate that returns true with the data. If none return true, return the default node
410 * definition.
411 */
412 _getNodeDef(data, i) {
413 if (this._nodeDefs.length === 1) {
414 return this._nodeDefs.first;
415 }
416 const nodeDef = this._nodeDefs.find(def => def.when && def.when(i, data)) || this._defaultNodeDef;
417 if (!nodeDef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
418 throw getTreeMissingMatchingNodeDefError();
419 }
420 return nodeDef;
421 }
422 /**
423 * Create the embedded view for the data node template and place it in the correct index location
424 * within the data node view container.
425 */
426 insertNode(nodeData, index, viewContainer, parentData) {
427 const node = this._getNodeDef(nodeData, index);
428 // Node context that will be provided to created embedded view
429 const context = new CdkTreeNodeOutletContext(nodeData);
430 // If the tree is flat tree, then use the `getLevel` function in flat tree control
431 // Otherwise, use the level of parent node.
432 if (this.treeControl.getLevel) {
433 context.level = this.treeControl.getLevel(nodeData);
434 }
435 else if (typeof parentData !== 'undefined' && this._levels.has(parentData)) {
436 context.level = this._levels.get(parentData) + 1;
437 }
438 else {
439 context.level = 0;
440 }
441 this._levels.set(nodeData, context.level);
442 // Use default tree nodeOutlet, or nested node's nodeOutlet
443 const container = viewContainer ? viewContainer : this._nodeOutlet.viewContainer;
444 container.createEmbeddedView(node.template, context, index);
445 // Set the data to just created `CdkTreeNode`.
446 // The `CdkTreeNode` created from `createEmbeddedView` will be saved in static variable
447 // `mostRecentTreeNode`. We get it from static variable and pass the node data to it.
448 if (CdkTreeNode.mostRecentTreeNode) {
449 CdkTreeNode.mostRecentTreeNode.data = nodeData;
450 }
451 }
452}
453CdkTree.decorators = [
454 { type: Component, args: [{
455 selector: 'cdk-tree',
456 exportAs: 'cdkTree',
457 template: `<ng-container cdkTreeNodeOutlet></ng-container>`,
458 host: {
459 'class': 'cdk-tree',
460 'role': 'tree',
461 },
462 encapsulation: ViewEncapsulation.None,
463 // The "OnPush" status for the `CdkTree` component is effectively a noop, so we are removing it.
464 // The view for `CdkTree` consists entirely of templates declared in other views. As they are
465 // declared elsewhere, they are checked when their declaration points are checked.
466 // tslint:disable-next-line:validate-decorators
467 changeDetection: ChangeDetectionStrategy.Default
468 },] }
469];
470CdkTree.ctorParameters = () => [
471 { type: IterableDiffers },
472 { type: ChangeDetectorRef }
473];
474CdkTree.propDecorators = {
475 dataSource: [{ type: Input }],
476 treeControl: [{ type: Input }],
477 trackBy: [{ type: Input }],
478 _nodeOutlet: [{ type: ViewChild, args: [CdkTreeNodeOutlet, { static: true },] }],
479 _nodeDefs: [{ type: ContentChildren, args: [CdkTreeNodeDef, {
480 // We need to use `descendants: true`, because Ivy will no longer match
481 // indirect descendants if it's left as false.
482 descendants: true
483 },] }]
484};
485/**
486 * Tree node for CdkTree. It contains the data in the tree node.
487 */
488class CdkTreeNode {
489 constructor(_elementRef, _tree) {
490 this._elementRef = _elementRef;
491 this._tree = _tree;
492 /** Subject that emits when the component has been destroyed. */
493 this._destroyed = new Subject();
494 /** Emits when the node's data has changed. */
495 this._dataChanges = new Subject();
496 CdkTreeNode.mostRecentTreeNode = this;
497 // The classes are directly added here instead of in the host property because classes on
498 // the host property are not inherited with View Engine. It is not set as a @HostBinding because
499 // it is not set by the time it's children nodes try to read the class from it.
500 // TODO: move to host after View Engine deprecation
501 this._elementRef.nativeElement.classList.add('cdk-tree-node');
502 this.role = 'treeitem';
503 }
504 /**
505 * The role of the tree node.
506 * @deprecated The correct role is 'treeitem', 'group' should not be used. This input will be
507 * removed in a future version.
508 * @breaking-change 12.0.0 Remove this input
509 */
510 get role() { return 'treeitem'; }
511 set role(_role) {
512 // TODO: move to host after View Engine deprecation
513 this._elementRef.nativeElement.setAttribute('role', _role);
514 }
515 /** The tree node's data. */
516 get data() { return this._data; }
517 set data(value) {
518 if (value !== this._data) {
519 this._data = value;
520 this._setRoleFromData();
521 this._dataChanges.next();
522 }
523 }
524 get isExpanded() {
525 return this._tree.treeControl.isExpanded(this._data);
526 }
527 _setExpanded(_expanded) {
528 this._isAriaExpanded = _expanded;
529 this._elementRef.nativeElement.setAttribute('aria-expanded', `${_expanded}`);
530 }
531 get level() {
532 // If the treeControl has a getLevel method, use it to get the level. Otherwise read the
533 // aria-level off the parent node and use it as the level for this node (note aria-level is
534 // 1-indexed, while this property is 0-indexed, so we don't need to increment).
535 return this._tree.treeControl.getLevel ?
536 this._tree.treeControl.getLevel(this._data) : this._parentNodeAriaLevel;
537 }
538 ngOnInit() {
539 this._parentNodeAriaLevel = getParentNodeAriaLevel(this._elementRef.nativeElement);
540 this._elementRef.nativeElement.setAttribute('aria-level', `${this.level + 1}`);
541 }
542 ngDoCheck() {
543 // aria-expanded is be set here because the expanded state is stored in the tree control and
544 // the node isn't aware when the state is changed.
545 // It is not set using a @HostBinding because they sometimes get lost with Mixin based classes.
546 // TODO: move to host after View Engine deprecation
547 if (this.isExpanded != this._isAriaExpanded) {
548 this._setExpanded(this.isExpanded);
549 }
550 }
551 ngOnDestroy() {
552 // If this is the last tree node being destroyed,
553 // clear out the reference to avoid leaking memory.
554 if (CdkTreeNode.mostRecentTreeNode === this) {
555 CdkTreeNode.mostRecentTreeNode = null;
556 }
557 this._dataChanges.complete();
558 this._destroyed.next();
559 this._destroyed.complete();
560 }
561 /** Focuses the menu item. Implements for FocusableOption. */
562 focus() {
563 this._elementRef.nativeElement.focus();
564 }
565 // TODO: role should eventually just be set in the component host
566 _setRoleFromData() {
567 if (!this._tree.treeControl.isExpandable && !this._tree.treeControl.getChildren &&
568 (typeof ngDevMode === 'undefined' || ngDevMode)) {
569 throw getTreeControlFunctionsMissingError();
570 }
571 this.role = 'treeitem';
572 }
573}
574/**
575 * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
576 * in `CdkTree` and set the data to it.
577 */
578CdkTreeNode.mostRecentTreeNode = null;
579CdkTreeNode.decorators = [
580 { type: Directive, args: [{
581 selector: 'cdk-tree-node',
582 exportAs: 'cdkTreeNode',
583 },] }
584];
585CdkTreeNode.ctorParameters = () => [
586 { type: ElementRef },
587 { type: CdkTree }
588];
589CdkTreeNode.propDecorators = {
590 role: [{ type: Input }]
591};
592function getParentNodeAriaLevel(nodeElement) {
593 let parent = nodeElement.parentElement;
594 while (parent && !isNodeElement(parent)) {
595 parent = parent.parentElement;
596 }
597 if (!parent) {
598 if (typeof ngDevMode === 'undefined' || ngDevMode) {
599 throw Error('Incorrect tree structure containing detached node.');
600 }
601 else {
602 return -1;
603 }
604 }
605 else if (parent.classList.contains('cdk-nested-tree-node')) {
606 return coerceNumberProperty(parent.getAttribute('aria-level'));
607 }
608 else {
609 // The ancestor element is the cdk-tree itself
610 return 0;
611 }
612}
613function isNodeElement(element) {
614 const classList = element.classList;
615 return !!((classList === null || classList === void 0 ? void 0 : classList.contains('cdk-nested-tree-node')) || (classList === null || classList === void 0 ? void 0 : classList.contains('cdk-tree')));
616}
617
618/**
619 * @license
620 * Copyright Google LLC All Rights Reserved.
621 *
622 * Use of this source code is governed by an MIT-style license that can be
623 * found in the LICENSE file at https://angular.io/license
624 */
625/**
626 * Nested node is a child of `<cdk-tree>`. It works with nested tree.
627 * By using `cdk-nested-tree-node` component in tree node template, children of the parent node will
628 * be added in the `cdkTreeNodeOutlet` in tree node template.
629 * The children of node will be automatically added to `cdkTreeNodeOutlet`.
630 */
631class CdkNestedTreeNode extends CdkTreeNode {
632 constructor(elementRef, tree, _differs) {
633 super(elementRef, tree);
634 this._differs = _differs;
635 // The classes are directly added here instead of in the host property because classes on
636 // the host property are not inherited with View Engine. It is not set as a @HostBinding because
637 // it is not set by the time it's children nodes try to read the class from it.
638 // TODO: move to host after View Engine deprecation
639 elementRef.nativeElement.classList.add('cdk-nested-tree-node');
640 }
641 ngAfterContentInit() {
642 this._dataDiffer = this._differs.find([]).create(this._tree.trackBy);
643 if (!this._tree.treeControl.getChildren && (typeof ngDevMode === 'undefined' || ngDevMode)) {
644 throw getTreeControlFunctionsMissingError();
645 }
646 const childrenNodes = this._tree.treeControl.getChildren(this.data);
647 if (Array.isArray(childrenNodes)) {
648 this.updateChildrenNodes(childrenNodes);
649 }
650 else if (isObservable(childrenNodes)) {
651 childrenNodes.pipe(takeUntil(this._destroyed))
652 .subscribe(result => this.updateChildrenNodes(result));
653 }
654 this.nodeOutlet.changes.pipe(takeUntil(this._destroyed))
655 .subscribe(() => this.updateChildrenNodes());
656 }
657 // This is a workaround for https://github.com/angular/angular/issues/23091
658 // In aot mode, the lifecycle hooks from parent class are not called.
659 ngOnInit() {
660 super.ngOnInit();
661 }
662 ngDoCheck() {
663 super.ngDoCheck();
664 }
665 ngOnDestroy() {
666 this._clear();
667 super.ngOnDestroy();
668 }
669 /** Add children dataNodes to the NodeOutlet */
670 updateChildrenNodes(children) {
671 const outlet = this._getNodeOutlet();
672 if (children) {
673 this._children = children;
674 }
675 if (outlet && this._children) {
676 const viewContainer = outlet.viewContainer;
677 this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
678 }
679 else {
680 // Reset the data differ if there's no children nodes displayed
681 this._dataDiffer.diff([]);
682 }
683 }
684 /** Clear the children dataNodes. */
685 _clear() {
686 const outlet = this._getNodeOutlet();
687 if (outlet) {
688 outlet.viewContainer.clear();
689 this._dataDiffer.diff([]);
690 }
691 }
692 /** Gets the outlet for the current node. */
693 _getNodeOutlet() {
694 const outlets = this.nodeOutlet;
695 // Note that since we use `descendants: true` on the query, we have to ensure
696 // that we don't pick up the outlet of a child node by accident.
697 return outlets && outlets.find(outlet => !outlet._node || outlet._node === this);
698 }
699}
700CdkNestedTreeNode.decorators = [
701 { type: Directive, args: [{
702 selector: 'cdk-nested-tree-node',
703 exportAs: 'cdkNestedTreeNode',
704 inputs: ['role', 'disabled', 'tabIndex'],
705 providers: [
706 { provide: CdkTreeNode, useExisting: CdkNestedTreeNode },
707 { provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: CdkNestedTreeNode }
708 ]
709 },] }
710];
711CdkNestedTreeNode.ctorParameters = () => [
712 { type: ElementRef },
713 { type: CdkTree },
714 { type: IterableDiffers }
715];
716CdkNestedTreeNode.propDecorators = {
717 nodeOutlet: [{ type: ContentChildren, args: [CdkTreeNodeOutlet, {
718 // We need to use `descendants: true`, because Ivy will no longer match
719 // indirect descendants if it's left as false.
720 descendants: true
721 },] }]
722};
723
724/**
725 * @license
726 * Copyright Google LLC All Rights Reserved.
727 *
728 * Use of this source code is governed by an MIT-style license that can be
729 * found in the LICENSE file at https://angular.io/license
730 */
731/** Regex used to split a string on its CSS units. */
732const cssUnitPattern = /([A-Za-z%]+)$/;
733/**
734 * Indent for the children tree dataNodes.
735 * This directive will add left-padding to the node to show hierarchy.
736 */
737class CdkTreeNodePadding {
738 constructor(_treeNode, _tree, _element, _dir) {
739 this._treeNode = _treeNode;
740 this._tree = _tree;
741 this._element = _element;
742 this._dir = _dir;
743 /** Subject that emits when the component has been destroyed. */
744 this._destroyed = new Subject();
745 /** CSS units used for the indentation value. */
746 this.indentUnits = 'px';
747 this._indent = 40;
748 this._setPadding();
749 if (_dir) {
750 _dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this._setPadding(true));
751 }
752 // In Ivy the indentation binding might be set before the tree node's data has been added,
753 // which means that we'll miss the first render. We have to subscribe to changes in the
754 // data to ensure that everything is up to date.
755 _treeNode._dataChanges.subscribe(() => this._setPadding());
756 }
757 /** The level of depth of the tree node. The padding will be `level * indent` pixels. */
758 get level() { return this._level; }
759 set level(value) { this._setLevelInput(value); }
760 /**
761 * The indent for each level. Can be a number or a CSS string.
762 * Default number 40px from material design menu sub-menu spec.
763 */
764 get indent() { return this._indent; }
765 set indent(indent) { this._setIndentInput(indent); }
766 ngOnDestroy() {
767 this._destroyed.next();
768 this._destroyed.complete();
769 }
770 /** The padding indent value for the tree node. Returns a string with px numbers if not null. */
771 _paddingIndent() {
772 const nodeLevel = (this._treeNode.data && this._tree.treeControl.getLevel)
773 ? this._tree.treeControl.getLevel(this._treeNode.data)
774 : null;
775 const level = this._level == null ? nodeLevel : this._level;
776 return typeof level === 'number' ? `${level * this._indent}${this.indentUnits}` : null;
777 }
778 _setPadding(forceChange = false) {
779 const padding = this._paddingIndent();
780 if (padding !== this._currentPadding || forceChange) {
781 const element = this._element.nativeElement;
782 const paddingProp = this._dir && this._dir.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
783 const resetProp = paddingProp === 'paddingLeft' ? 'paddingRight' : 'paddingLeft';
784 element.style[paddingProp] = padding || '';
785 element.style[resetProp] = '';
786 this._currentPadding = padding;
787 }
788 }
789 /**
790 * This has been extracted to a util because of TS 4 and VE.
791 * View Engine doesn't support property rename inheritance.
792 * TS 4.0 doesn't allow properties to override accessors or vice-versa.
793 * @docs-private
794 */
795 _setLevelInput(value) {
796 // Set to null as the fallback value so that _setPadding can fall back to the node level if the
797 // consumer set the directive as `cdkTreeNodePadding=""`. We still want to take this value if
798 // they set 0 explicitly.
799 this._level = coerceNumberProperty(value, null);
800 this._setPadding();
801 }
802 /**
803 * This has been extracted to a util because of TS 4 and VE.
804 * View Engine doesn't support property rename inheritance.
805 * TS 4.0 doesn't allow properties to override accessors or vice-versa.
806 * @docs-private
807 */
808 _setIndentInput(indent) {
809 let value = indent;
810 let units = 'px';
811 if (typeof indent === 'string') {
812 const parts = indent.split(cssUnitPattern);
813 value = parts[0];
814 units = parts[1] || units;
815 }
816 this.indentUnits = units;
817 this._indent = coerceNumberProperty(value);
818 this._setPadding();
819 }
820}
821CdkTreeNodePadding.decorators = [
822 { type: Directive, args: [{
823 selector: '[cdkTreeNodePadding]',
824 },] }
825];
826CdkTreeNodePadding.ctorParameters = () => [
827 { type: CdkTreeNode },
828 { type: CdkTree },
829 { type: ElementRef },
830 { type: Directionality, decorators: [{ type: Optional }] }
831];
832CdkTreeNodePadding.propDecorators = {
833 level: [{ type: Input, args: ['cdkTreeNodePadding',] }],
834 indent: [{ type: Input, args: ['cdkTreeNodePaddingIndent',] }]
835};
836
837/**
838 * @license
839 * Copyright Google LLC All Rights Reserved.
840 *
841 * Use of this source code is governed by an MIT-style license that can be
842 * found in the LICENSE file at https://angular.io/license
843 */
844/**
845 * Node toggle to expand/collapse the node.
846 */
847class CdkTreeNodeToggle {
848 constructor(_tree, _treeNode) {
849 this._tree = _tree;
850 this._treeNode = _treeNode;
851 this._recursive = false;
852 }
853 /** Whether expand/collapse the node recursively. */
854 get recursive() { return this._recursive; }
855 set recursive(value) { this._recursive = coerceBooleanProperty(value); }
856 // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
857 // In Ivy the `host` bindings will be merged when this class is extended, whereas in
858 // ViewEngine they're overwritten.
859 // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
860 // tslint:disable-next-line:no-host-decorator-in-concrete
861 _toggle(event) {
862 this.recursive
863 ? this._tree.treeControl.toggleDescendants(this._treeNode.data)
864 : this._tree.treeControl.toggle(this._treeNode.data);
865 event.stopPropagation();
866 }
867}
868CdkTreeNodeToggle.decorators = [
869 { type: Directive, args: [{ selector: '[cdkTreeNodeToggle]' },] }
870];
871CdkTreeNodeToggle.ctorParameters = () => [
872 { type: CdkTree },
873 { type: CdkTreeNode }
874];
875CdkTreeNodeToggle.propDecorators = {
876 recursive: [{ type: Input, args: ['cdkTreeNodeToggleRecursive',] }],
877 _toggle: [{ type: HostListener, args: ['click', ['$event'],] }]
878};
879
880/**
881 * @license
882 * Copyright Google LLC All Rights Reserved.
883 *
884 * Use of this source code is governed by an MIT-style license that can be
885 * found in the LICENSE file at https://angular.io/license
886 */
887const EXPORTED_DECLARATIONS = [
888 CdkNestedTreeNode,
889 CdkTreeNodeDef,
890 CdkTreeNodePadding,
891 CdkTreeNodeToggle,
892 CdkTree,
893 CdkTreeNode,
894 CdkTreeNodeOutlet,
895];
896class CdkTreeModule {
897}
898CdkTreeModule.decorators = [
899 { type: NgModule, args: [{
900 exports: EXPORTED_DECLARATIONS,
901 declarations: EXPORTED_DECLARATIONS,
902 },] }
903];
904
905/**
906 * @license
907 * Copyright Google LLC All Rights Reserved.
908 *
909 * Use of this source code is governed by an MIT-style license that can be
910 * found in the LICENSE file at https://angular.io/license
911 */
912
913/**
914 * Generated bundle index. Do not edit.
915 */
916
917export { BaseTreeControl, CDK_TREE_NODE_OUTLET_NODE, CdkNestedTreeNode, CdkTree, CdkTreeModule, CdkTreeNode, CdkTreeNodeDef, CdkTreeNodeOutlet, CdkTreeNodeOutletContext, CdkTreeNodePadding, CdkTreeNodeToggle, FlatTreeControl, NestedTreeControl, getTreeControlFunctionsMissingError, getTreeControlMissingError, getTreeMissingMatchingNodeDefError, getTreeMultipleDefaultNodeDefsError, getTreeNoValidDataSourceError };
918//# sourceMappingURL=tree.js.map
Note: See TracBrowser for help on using the repository browser.