@cluetec/ngcx-tree 0.1.0-angular-15

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+<a name="0.1.0"></a>
+
+- initial release
+- cdk tree combined with cdk drag and drop

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 cluetec GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,318 @@
+A reusable tree component for Angular based on the CDK Tree and the CDK Drag n
+Drop features.
+
+<br>
+Status is beta - feedback welcome :)
+
+# Table of Content
+
+- [Table of Content](#table-of-content)
+- [Getting Started](#getting-started)
+- [Inputs](#inputs)
+- [Outputs](#outputs)
+- [Model](#model)
+  - [NgcxTreeConfig](#ngcxtreeconfig)
+  - [NgcxTreeNode](#ngcxtreenode)
+  - [NgcxTreeNodeWrapper](#ngcxtreenodewrapper)
+  - [NgcxTreeNodeMovedEvent](#ngcxtreenodemovedevent)
+  - [NgcxCustomComponent](#ngcxcustomcomponent)
+    - [Input](#input)
+    - [Output](#output)
+- [Api](#api)
+  - [treeControl](#treecontrol)
+  - [Helper methods](#helper-methods)
+    - [selectNodeById](#selectnodebyid)
+    - [findNodeById](#findnodebyid)
+- [Styling](#styling)
+  - [Include Styles](#include-styles)
+  - [Common styling](#common-styling)
+    - [Dotted tree lines](#dotted-tree-lines)
+    - [Selection highlighting](#selection-highlighting)
+    - [Icon color](#icon-color)
+  - [Font Awesome](#font-awesome)
+  - [Selection](#selection)
+- [Simple Sample](#simple-sample)
+- [Contributions](#contributions)
+
+# Getting Started
+
+1. Install the library:
+
+```
+npm install @cluetec/ngcx-tree
+```
+
+2. Import the component. Since it is standalone, either add it directly to
+   another standlone component or import it into your existing `NgModule`:
+
+```
+import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
+
+@Component({
+  standalone: true,
+  imports: [NgcxTreeComponent],
+})
+```
+
+```
+import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [NgcxTreeComponent],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+<br><br>
+
+# Inputs
+
+| Property | Type                              | required | Description                                                         |
+| -------- | --------------------------------- | -------- | ------------------------------------------------------------------- |
+| nodes    | [NgcxTreeNode](#NgcxTreeNode)[]   | no       | list of nodes to show in the tree                                   |
+| config   | [NgcxTreeConfig](#NgcxTreeConfig) | no       | used to render the node when no custom template or component is set |
+
+# Outputs
+
+| Property    | event content type     | Description                                                                               |
+| ----------- | ---------------------- | ----------------------------------------------------------------------------------------- |
+| nodeMoved   | NgcxTreeNodeMovedEvent | fired when a node is moved                                                                |
+| customEvent | any                    | may be fired by your own custom component                                                 |
+| clickEvent  | NgcxTreeNodeWrapper    | fired when node is clicked                                                                |
+| selectEvent | NgcxTreeNodeWrapper    | fired when node is selected or un-selected. Clicking a selected node un-selects the node. |
+
+# Model
+
+## NgcxTreeConfig
+
+The component includes a model called `NgcxTreeConfig` with some basic optional
+settings.
+
+- `allowDrag` method that decides if a node can be dragged:
+  `(node: NgcxTreeNodeWrapper<T>) => boolean` - all nodes are draggable by
+  default<br><br>
+- `allowDrop` method that decides if node can be dropped into another node
+  `(node: NgcxTreeNodeWrapper<T>, intoNode?: NgcxTreeNodeWrapper<T>) => boolean ` -
+  every node may be draggable everywhere by default<br><br>
+- `allowSelection` method that decides if node can be selected
+  `(node: NgcxTreeNodeWrapper<T>) => boolean ` - nodes are not selectable by
+  default<br><br>
+- `treeNodeContentTemplate` Angular TemplateRef that will be used to render a
+  node<br><br> `let-nodeWrapper="nodeWrapper"` may be used to access the node
+  wrapper to render the node
+- `treeNodeContentComponent` Angular Component that will be used to render a
+  node. (use `treeNodeContentComponent` or `treeNodeContentTemplate`, but not
+  both). see [NgcxCustomComponent<T>](#NgcxCustomComponent)
+
+<br><br>
+
+## NgcxTreeNode
+
+If no data is passed to the component, it will simply display some mock data.
+Data is provided to the tree in the following format:
+
+| Property | Type           | required | Description                                                                                                                                 |
+| -------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| id       | string         | yes      | necessary unique id of the node                                                                                                             |
+| title    | string         | no       | used to render the node when no custom template or component is set                                                                         |
+| faIcon   | string         | no       | font awesome icon used to render the node when no custom template or component is set. You must include fontawesome on your own if you want |
+| children | NgcxTreeNode[] | no       | children of the node                                                                                                                        |
+
+## NgcxTreeNodeWrapper<T>
+
+Generic T is the same as the elements of the input `nodes`.
+
+| Property     | Type                                | Description                                                                                |
+| ------------ | ----------------------------------- | ------------------------------------------------------------------------------------------ |
+| id           | string                              | same as NgcxTreeNode.id                                                                    |
+| data         | T                                   | data of the input nodes `nodes`                                                            |
+| depth        | number                              | depth in the tree starting with 0                                                          |
+| index        | number                              | index of the node in it's parent                                                           |
+| isSelectable | boolean                             | if the node is selectable. Depending on the config.allowSelection method. (default: false) |
+| isFirstChild | boolean                             | is first node from the same parent                                                         |
+| isLastChild  | boolean                             | is last node from the same parent                                                          |
+| children     | NgcxTreeNodeWrapper<T>[]            | list of children wrappers around the original nodes                                        |
+| parent       | NgcxTreeNodeWrapper<T> \| undefined | parent node                                                                                |
+| next         | NgcxTreeNodeWrapper<T> \| undefined | node after this node in same parent, if one exists.                                        |
+| previous     | NgcxTreeNodeWrapper<T> \| undefined | node before this node in same parent, if one exists.                                       |
+
+## NgcxTreeNodeMovedEvent
+
+| Property   | Type                                | Description                        |
+| ---------- | ----------------------------------- | ---------------------------------- |
+| node       | NgcxTreeNodeWrapper<T>              | the moved node                     |
+| parent     | NgcxTreeNodeWrapper<T> \| undefined | moved into this parent node        |
+| afterNode  | NgcxTreeNodeWrapper<T> \| undefined | moved to position after this node  |
+| beforeNode | NgcxTreeNodeWrapper<T> \| undefined | moved to position before this node |
+
+## NgcxCustomComponent<T>
+
+Your component can implement this interface and can be set as
+`Type<NgcxCustomComponent<T>>` in the config.treeNodeContentComponent input.
+
+### Input
+
+`nodeWrapper` the input to render the node. Type: NgcxTreeNodeWrapper<T>
+
+### Output
+
+`customEvent` `EventEmitter<any>` can be used to trigger the output
+'customEvent'
+
+# Api
+
+## treeControl
+
+the treeControl (`NestedTreeControl<NgcxTreeNodeWrapper<T>, string>`) of Angular
+CDK can be mainly used to expand and collapse nodes.
+
+## Helper methods
+
+### selectNodeById
+
+Can be called to select a node by id. the selectEvent event is fired afterwards.
+
+### findNodeById
+
+Can be used to get the `NgcxTreeNodeWrapper<T>` for an id. returns `undefined`
+if no node is available for the id.
+
+# Styling
+
+## Include Styles
+
+Or All styles from below:
+
+```scss
+@import '@cluetec/ngcx-tree/styles/styles';
+```
+
+## Common styling
+
+you should set the width of cdk-drop-list to 100%, otherwise, the node content
+may be on wrong place:
+
+```css
+.ngcx-tree .cdk-drop-list {
+  width: 100%;
+}
+```
+
+Or Include this:
+
+```scss
+@import '@cluetec/ngcx-tree/styles/ngcx-common';
+```
+
+### Dotted tree lines
+
+Import or copy the scss to show tree lines:
+
+```scss
+@import '@cluetec/ngcx-tree/styles/ngcx-doted-tree-line';
+```
+
+### Selection highlighting
+
+Import or copy the scss to show some selection styling:
+
+```scss
+@import '@cluetec/ngcx-tree/styles/ngcx-selection';
+```
+
+### Icon color
+
+Import or copy the scss to set the color of the node icon:
+
+```scss
+@import '@cluetec/ngcx-tree/styles/ngcx-icon-color';
+```
+
+## Font Awesome
+
+Font Awesome is not referenced included here, but to show icons for the nodes
+you must include font-awesome on your own and may use the `node.faIcon` property
+to set the icon.
+
+Include like this:
+[projects/ngcx-tree/stories/styles/styles.scss](projects/ngcx-tree/stories/styles/styles.scss)
+
+## Selection
+
+Selected node can be styled like this:
+
+```css
+.tree-node-content-container.selected .tree-node-content {
+  background-color: #555;
+  padding-left: 5px;
+}
+```
+
+Hover effect on selectable node:
+
+```css
+.ngcx-tree:not(.dragging)
+  .tree-node-content-container.is-selectable:hover
+  .tree-node-content {
+  background-color: #fbfbfb;
+}
+```
+
+Remove Selection css on dragging element:
+
+```css
+.cdk-drag-preview .tree-node-content-container.selected .tree-node-content {
+  background-color: inherit;
+}
+```
+
+# Simple Sample
+
+```ts
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { Component } from '@angular/core';
+import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
+
+@Component({
+  selector: 'app-simple-tree-sample',
+  template: '<ngcx-tree [nodes]="data"></ngcx-tree>',
+  standalone: true,
+  imports: [CdkTreeModule, DragDropModule, NgcxTreeComponent],
+})
+export class SimpleTreeSampleComponent {
+  data = [
+    {
+      id: 'fru',
+      title: 'Fruit',
+      children: [
+        {
+          id: 'app',
+          title: 'Apple',
+        },
+        {
+          id: 'ban',
+          title: 'Banana',
+        },
+      ],
+    },
+    {
+      id: 'fish',
+      title: 'Fish',
+    },
+  ];
+}
+```
+
+<br><br>
+
+# Contributions
+
+Contributions and improvement suggestions are always welcome!
+
+##Samples
+
+For samples see the storybook stories. run `npm run storybook` to see the
+samples.

package/esm2020/cluetec-ngcx-tree.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2x1ZXRlYy1uZ2N4LXRyZWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZ2N4LXRyZWUvc3JjL2NsdWV0ZWMtbmdjeC10cmVlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=

package/esm2020/lib/ngcx-tree/ngcx-tree-data.source.mjs

@@ -0,0 +1,16 @@
+import { DataSource } from '@angular/cdk/collections';
+import { BehaviorSubject } from 'rxjs';
+export class NgcxTreeDataSource extends DataSource {
+    constructor(data) {
+        super();
+        this.data$ = new BehaviorSubject(data);
+    }
+    connect() {
+        return this.data$.asObservable();
+    }
+    disconnect() { }
+    update(data) {
+        this.data$.next([...data]);
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdjeC10cmVlLWRhdGEuc291cmNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdjeC10cmVlL3NyYy9saWIvbmdjeC10cmVlL25nY3gtdHJlZS1kYXRhLnNvdXJjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGVBQWUsRUFBYyxNQUFNLE1BQU0sQ0FBQztBQUVuRCxNQUFNLE9BQU8sa0JBQXNCLFNBQVEsVUFBYTtJQUd0RCxZQUFZLElBQVM7UUFDbkIsS0FBSyxFQUFFLENBQUM7UUFDUixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFFRCxPQUFPO1FBQ0wsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ25DLENBQUM7SUFDRCxVQUFVLEtBQVUsQ0FBQztJQUVyQixNQUFNLENBQUMsSUFBUztRQUNkLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBQzdCLENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERhdGFTb3VyY2UgfSBmcm9tICdAYW5ndWxhci9jZGsvY29sbGVjdGlvbnMnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0LCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5cbmV4cG9ydCBjbGFzcyBOZ2N4VHJlZURhdGFTb3VyY2U8VD4gZXh0ZW5kcyBEYXRhU291cmNlPFQ+IHtcbiAgZGF0YSQ6IEJlaGF2aW9yU3ViamVjdDxUW10+O1xuXG4gIGNvbnN0cnVjdG9yKGRhdGE6IFRbXSkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5kYXRhJCA9IG5ldyBCZWhhdmlvclN1YmplY3QoZGF0YSk7XG4gIH1cblxuICBjb25uZWN0KCk6IE9ic2VydmFibGU8cmVhZG9ubHkgVFtdPiB7XG4gICAgcmV0dXJuIHRoaXMuZGF0YSQuYXNPYnNlcnZhYmxlKCk7XG4gIH1cbiAgZGlzY29ubmVjdCgpOiB2b2lkIHt9XG5cbiAgdXBkYXRlKGRhdGE6IFRbXSkge1xuICAgIHRoaXMuZGF0YSQubmV4dChbLi4uZGF0YV0pO1xuICB9XG59XG4iXX0=

package/esm2020/lib/ngcx-tree/ngcx-tree-models.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdjeC10cmVlLW1vZGVscy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nY3gtdHJlZS9zcmMvbGliL25nY3gtdHJlZS9uZ2N4LXRyZWUtbW9kZWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZXN0ZWRUcmVlQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay90cmVlJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciwgVGVtcGxhdGVSZWYsIFR5cGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGludGVyZmFjZSBOZ2N4VHJlZUNvbmZpZzxUPiB7XG4gIHRyZWVOb2RlQ29udGVudENvbXBvbmVudD86IFR5cGU8TmdjeEN1c3RvbUNvbXBvbmVudDxUPj47XG4gIHRyZWVOb2RlQ29udGVudFRlbXBsYXRlPzogVGVtcGxhdGVSZWY8YW55PjtcblxuICBhbGxvd0Ryb3A/OiAoXG4gICAgbm9kZTogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPixcbiAgICBpbnRvTm9kZT86IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD5cbiAgKSA9PiBib29sZWFuO1xuICBhbGxvd0RyYWc/OiAobm9kZTogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPikgPT4gYm9vbGVhbjtcbiAgYWxsb3dTZWxlY3Rpb24/OiAobm9kZTogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPikgPT4gYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBOZ2N4Q3VzdG9tQ29tcG9uZW50PFQ+IHtcbiAgbm9kZVdyYXBwZXI/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xuICBjdXN0b21FdmVudD86IEV2ZW50RW1pdHRlcjxhbnk+O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIE5nY3hUcmVlTm9kZSB7XG4gIGlkOiBzdHJpbmc7XG4gIHRpdGxlPzogYW55O1xuICBmYUljb24/OiBzdHJpbmc7XG4gIGNoaWxkcmVuPzogTmdjeFRyZWVOb2RlW107XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmdjeFRyZWVOb2RlV3JhcHBlcjxUPiB7XG4gIGlkOiBzdHJpbmc7XG4gIGRhdGE6IFQ7XG4gIGRlcHRoOiBudW1iZXI7XG4gIGluZGV4OiBudW1iZXI7XG4gIGlzU2VsZWN0YWJsZT86IGJvb2xlYW47XG4gIGlzRmlyc3RDaGlsZDogYm9vbGVhbjtcbiAgaXNMYXN0Q2hpbGQ6IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+W107XG4gIHBhcmVudD86IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD47XG4gIG5leHQ/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xuICBwcmV2aW91cz86IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmdjeFRyZWVOb2RlQ29tcG9uZW50PFQ+IHtcbiAgbm9kZVdyYXBwZXI/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIE5nY3hUcmVlTm9kZU1vdmVkRXZlbnQ8VD4ge1xuICBub2RlOiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xuICBwYXJlbnQ/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xuICBhZnRlck5vZGU/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xuICBiZWZvcmVOb2RlPzogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBOZ2N4VHJlZUFwaTxUPiB7XG4gIHNlbGVjdE5vZGVCeUlkKGlkOiBzdHJpbmcpOiB2b2lkO1xuICBmaW5kTm9kZUJ5SWQoaWQ6IHN0cmluZyk6IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD4gfCB1bmRlZmluZWQ7XG5cbiAgZ2V0IHRyZWVDb250cm9sKCk6IE5lc3RlZFRyZWVDb250cm9sPE5nY3hUcmVlTm9kZVdyYXBwZXI8YW55Piwgc3RyaW5nPjtcbn1cbiJdfQ==

package/esm2020/lib/ngcx-tree/ngcx-tree-node/ngcx-tree-node.component.mjs

@@ -0,0 +1,49 @@
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { Component, EventEmitter, Input, Output, ViewChild, ViewContainerRef, } from '@angular/core';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { Subject, takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/tree";
+export class NgcxTreeNodeComponent {
+    constructor() {
+        this.isSelected = false;
+        this.customEvent = new EventEmitter();
+        this.clickEvent = new EventEmitter();
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        if (this.vcRef && this.treeConfig?.treeNodeContentComponent) {
+            const nodeComponent = this.vcRef.createComponent(this.treeConfig.treeNodeContentComponent);
+            nodeComponent.instance.nodeWrapper = this.nodeWrapper;
+            nodeComponent.instance.customEvent
+                ?.pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((value) => this.customEvent.emit(value));
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next(undefined);
+        this.ngUnsubscribe.complete();
+    }
+}
+NgcxTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgcxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgcxTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgcxTreeNodeComponent, isStandalone: true, selector: "ngcx-tree-node", inputs: { nodeWrapper: "nodeWrapper", treeControl: "treeControl", treeConfig: "treeConfig", isSelected: "isSelected" }, outputs: { customEvent: "customEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["ref"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"tree-node-content-container\"\n  [class.selected]=\"isSelected\"\n  [class.first]=\"nodeWrapper.isFirstChild\"\n  [class.last]=\"nodeWrapper.isLastChild\"\n  [class.is-selectable]=\"nodeWrapper.isSelectable\"\n  (click)=\"clickEvent.emit()\">\n  <div class=\"tree-node-expand-container\">\n    <button\n      *ngIf=\"nodeWrapper.children.length > 0\"\n      class=\"tree-node-expand\"\n      cdkTreeNodeToggle\n      [attr.aria-label]=\"'Toggle ' + nodeWrapper.data.title\"\n      (click)=\"$event.preventDefault()\">\n      <div class=\"chevron\" [class.rotate]=\"treeControl.isExpanded(nodeWrapper)\">\n        <svg id=\"a\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 9\">\n          <path\n            d=\"m2.83.09l4.2,4.2c.05.05.09.14.09.21s-.04.15-.09.21l-4.2,4.2c-.05.05-.14.09-.21.09s-.15-.04-.21-.09l-.45-.45c-.05-.05-.09-.13-.09-.21,0-.07.04-.15.09-.21l3.54-3.54L1.97.96c-.05-.05-.09-.14-.09-.21s.04-.15.09-.21l.45-.45c.05-.05.14-.09.21-.09s.15.04.21.09Z\"\n            style=\"fill: var(--icon-color, #333); stroke-width: 0px\" />\n        </svg>\n      </div>\n    </button>\n  </div>\n  <div class=\"small-horizontal-tree-line\"></div>\n  <div class=\"tree-node-icon-container\" *ngIf=\"nodeWrapper.data.faIcon\">\n    <i class=\"fa\" [class]=\"nodeWrapper.data.faIcon\"></i>\n  </div>\n  <div class=\"tree-node-content\">\n    <span\n      *ngIf=\"\n        !treeConfig?.treeNodeContentComponent &&\n        !treeConfig?.treeNodeContentTemplate\n      \">\n      {{ nodeWrapper.data.title }}\n    </span>\n    <ng-container #ref></ng-container>\n    <ng-container *ngIf=\"treeConfig?.treeNodeContentTemplate as template\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          template;\n          context: {\n            nodeWrapper: nodeWrapper\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".tree-node-content-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%}.tree-node-content-container.is-selectable{cursor:pointer}.tree-node-content-container .tree-node-expand-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:30px;height:30px;margin-right:5px}.tree-node-content-container .tree-node-expand-container>.tree-node-expand{color:#2587be;background:none;border:none;font:inherit;cursor:pointer;outline:inherit;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron{width:10px;transition:transform .1s ease-in-out}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron.rotate{transform:rotate(90deg)}.tree-node-content-container .tree-node-icon-container{margin-right:7px;color:#2587be}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i1.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgcxTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngcx-tree-node', standalone: true, imports: [CdkTreeModule, NgTemplateOutlet, NgIf], template: "<div\n  class=\"tree-node-content-container\"\n  [class.selected]=\"isSelected\"\n  [class.first]=\"nodeWrapper.isFirstChild\"\n  [class.last]=\"nodeWrapper.isLastChild\"\n  [class.is-selectable]=\"nodeWrapper.isSelectable\"\n  (click)=\"clickEvent.emit()\">\n  <div class=\"tree-node-expand-container\">\n    <button\n      *ngIf=\"nodeWrapper.children.length > 0\"\n      class=\"tree-node-expand\"\n      cdkTreeNodeToggle\n      [attr.aria-label]=\"'Toggle ' + nodeWrapper.data.title\"\n      (click)=\"$event.preventDefault()\">\n      <div class=\"chevron\" [class.rotate]=\"treeControl.isExpanded(nodeWrapper)\">\n        <svg id=\"a\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 9\">\n          <path\n            d=\"m2.83.09l4.2,4.2c.05.05.09.14.09.21s-.04.15-.09.21l-4.2,4.2c-.05.05-.14.09-.21.09s-.15-.04-.21-.09l-.45-.45c-.05-.05-.09-.13-.09-.21,0-.07.04-.15.09-.21l3.54-3.54L1.97.96c-.05-.05-.09-.14-.09-.21s.04-.15.09-.21l.45-.45c.05-.05.14-.09.21-.09s.15.04.21.09Z\"\n            style=\"fill: var(--icon-color, #333); stroke-width: 0px\" />\n        </svg>\n      </div>\n    </button>\n  </div>\n  <div class=\"small-horizontal-tree-line\"></div>\n  <div class=\"tree-node-icon-container\" *ngIf=\"nodeWrapper.data.faIcon\">\n    <i class=\"fa\" [class]=\"nodeWrapper.data.faIcon\"></i>\n  </div>\n  <div class=\"tree-node-content\">\n    <span\n      *ngIf=\"\n        !treeConfig?.treeNodeContentComponent &&\n        !treeConfig?.treeNodeContentTemplate\n      \">\n      {{ nodeWrapper.data.title }}\n    </span>\n    <ng-container #ref></ng-container>\n    <ng-container *ngIf=\"treeConfig?.treeNodeContentTemplate as template\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          template;\n          context: {\n            nodeWrapper: nodeWrapper\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".tree-node-content-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%}.tree-node-content-container.is-selectable{cursor:pointer}.tree-node-content-container .tree-node-expand-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:30px;height:30px;margin-right:5px}.tree-node-content-container .tree-node-expand-container>.tree-node-expand{color:#2587be;background:none;border:none;font:inherit;cursor:pointer;outline:inherit;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron{width:10px;transition:transform .1s ease-in-out}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron.rotate{transform:rotate(90deg)}.tree-node-content-container .tree-node-icon-container{margin-right:7px;color:#2587be}\n"] }]
+        }], propDecorators: { nodeWrapper: [{
+                type: Input
+            }], treeControl: [{
+                type: Input
+            }], treeConfig: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], customEvent: [{
+                type: Output
+            }], clickEvent: [{
+                type: Output
+            }], vcRef: [{
+                type: ViewChild,
+                args: ['ref', { read: ViewContainerRef, static: true }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdjeC10cmVlLW5vZGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdjeC10cmVlL3NyYy9saWIvbmdjeC10cmVlL25nY3gtdHJlZS1ub2RlL25nY3gtdHJlZS1ub2RlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nY3gtdHJlZS9zcmMvbGliL25nY3gtdHJlZS9uZ2N4LXRyZWUtbm9kZS9uZ2N4LXRyZWUtbm9kZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFxQixNQUFNLG1CQUFtQixDQUFDO0FBQ3JFLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBQ04sU0FBUyxFQUNULGdCQUFnQixHQUNqQixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7OztBQVMxQyxNQUFNLE9BQU8scUJBQXFCO0lBUGxDO1FBV1csZUFBVSxHQUFHLEtBQUssQ0FBQztRQUVsQixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDdEMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFLaEQsa0JBQWEsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO0tBbUIvQjtJQWpCQyxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsd0JBQXdCLEVBQUU7WUFDM0QsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQzlDLElBQUksQ0FBQyxVQUFVLENBQUMsd0JBQXdCLENBQ3pDLENBQUM7WUFDRixhQUFhLENBQUMsUUFBUSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO1lBRXRELGFBQWEsQ0FBQyxRQUFRLENBQUMsV0FBVztnQkFDaEMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztpQkFDcEMsU0FBUyxDQUFDLENBQUMsS0FBVSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO1NBQzVEO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ2hDLENBQUM7O21IQTlCVSxxQkFBcUI7dUdBQXJCLHFCQUFxQiw4VUFTTixnQkFBZ0IsMkNDaEM1QyxxMURBK0NBLGs5QkQxQlksYUFBYSwySkFBRSxnQkFBZ0Isb0pBQUUsSUFBSTs0RkFFcEMscUJBQXFCO2tCQVBqQyxTQUFTOytCQUNFLGdCQUFnQixjQUdkLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLENBQUM7OEJBR3ZDLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNO2dCQUdQLEtBQUs7c0JBREosU0FBUzt1QkFBQyxLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENka1RyZWVNb2R1bGUsIE5lc3RlZFRyZWVDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3RyZWUnO1xuaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdjeFRyZWVDb25maWcsIE5nY3hUcmVlTm9kZVdyYXBwZXIgfSBmcm9tICcuLi9uZ2N4LXRyZWUtbW9kZWxzJztcblxuaW1wb3J0IHsgTmdJZiwgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBTdWJqZWN0LCB0YWtlVW50aWwgfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdjeC10cmVlLW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vbmdjeC10cmVlLW5vZGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9uZ2N4LXRyZWUtbm9kZS5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2RrVHJlZU1vZHVsZSwgTmdUZW1wbGF0ZU91dGxldCwgTmdJZl0sXG59KVxuZXhwb3J0IGNsYXNzIE5nY3hUcmVlTm9kZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KCkgbm9kZVdyYXBwZXIhOiBOZ2N4VHJlZU5vZGVXcmFwcGVyPGFueT47XG4gIEBJbnB1dCgpIHRyZWVDb250cm9sITogTmVzdGVkVHJlZUNvbnRyb2w8TmdjeFRyZWVOb2RlV3JhcHBlcjxhbnk+LCBzdHJpbmc+O1xuICBASW5wdXQoKSB0cmVlQ29uZmlnPzogTmdjeFRyZWVDb25maWc8YW55PjtcbiAgQElucHV0KCkgaXNTZWxlY3RlZCA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBjdXN0b21FdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgY2xpY2tFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBAVmlld0NoaWxkKCdyZWYnLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICB2Y1JlZj86IFZpZXdDb250YWluZXJSZWY7XG5cbiAgbmdVbnN1YnNjcmliZSA9IG5ldyBTdWJqZWN0KCk7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMudmNSZWYgJiYgdGhpcy50cmVlQ29uZmlnPy50cmVlTm9kZUNvbnRlbnRDb21wb25lbnQpIHtcbiAgICAgIGNvbnN0IG5vZGVDb21wb25lbnQgPSB0aGlzLnZjUmVmLmNyZWF0ZUNvbXBvbmVudChcbiAgICAgICAgdGhpcy50cmVlQ29uZmlnLnRyZWVOb2RlQ29udGVudENvbXBvbmVudFxuICAgICAgKTtcbiAgICAgIG5vZGVDb21wb25lbnQuaW5zdGFuY2Uubm9kZVdyYXBwZXIgPSB0aGlzLm5vZGVXcmFwcGVyO1xuXG4gICAgICBub2RlQ29tcG9uZW50Lmluc3RhbmNlLmN1c3RvbUV2ZW50XG4gICAgICAgID8ucGlwZSh0YWtlVW50aWwodGhpcy5uZ1Vuc3Vic2NyaWJlKSlcbiAgICAgICAgLnN1YnNjcmliZSgodmFsdWU6IGFueSkgPT4gdGhpcy5jdXN0b21FdmVudC5lbWl0KHZhbHVlKSk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5uZ1Vuc3Vic2NyaWJlLm5leHQodW5kZWZpbmVkKTtcbiAgICB0aGlzLm5nVW5zdWJzY3JpYmUuY29tcGxldGUoKTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cInRyZWUtbm9kZS1jb250ZW50LWNvbnRhaW5lclwiXG4gIFtjbGFzcy5zZWxlY3RlZF09XCJpc1NlbGVjdGVkXCJcbiAgW2NsYXNzLmZpcnN0XT1cIm5vZGVXcmFwcGVyLmlzRmlyc3RDaGlsZFwiXG4gIFtjbGFzcy5sYXN0XT1cIm5vZGVXcmFwcGVyLmlzTGFzdENoaWxkXCJcbiAgW2NsYXNzLmlzLXNlbGVjdGFibGVdPVwibm9kZVdyYXBwZXIuaXNTZWxlY3RhYmxlXCJcbiAgKGNsaWNrKT1cImNsaWNrRXZlbnQuZW1pdCgpXCI+XG4gIDxkaXYgY2xhc3M9XCJ0cmVlLW5vZGUtZXhwYW5kLWNvbnRhaW5lclwiPlxuICAgIDxidXR0b25cbiAgICAgICpuZ0lmPVwibm9kZVdyYXBwZXIuY2hpbGRyZW4ubGVuZ3RoID4gMFwiXG4gICAgICBjbGFzcz1cInRyZWUtbm9kZS1leHBhbmRcIlxuICAgICAgY2RrVHJlZU5vZGVUb2dnbGVcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiJ1RvZ2dsZSAnICsgbm9kZVdyYXBwZXIuZGF0YS50aXRsZVwiXG4gICAgICAoY2xpY2spPVwiJGV2ZW50LnByZXZlbnREZWZhdWx0KClcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjaGV2cm9uXCIgW2NsYXNzLnJvdGF0ZV09XCJ0cmVlQ29udHJvbC5pc0V4cGFuZGVkKG5vZGVXcmFwcGVyKVwiPlxuICAgICAgICA8c3ZnIGlkPVwiYVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB2aWV3Qm94PVwiMCAwIDkgOVwiPlxuICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICBkPVwibTIuODMuMDlsNC4yLDQuMmMuMDUuMDUuMDkuMTQuMDkuMjFzLS4wNC4xNS0uMDkuMjFsLTQuMiw0LjJjLS4wNS4wNS0uMTQuMDktLjIxLjA5cy0uMTUtLjA0LS4yMS0uMDlsLS40NS0uNDVjLS4wNS0uMDUtLjA5LS4xMy0uMDktLjIxLDAtLjA3LjA0LS4xNS4wOS0uMjFsMy41NC0zLjU0TDEuOTcuOTZjLS4wNS0uMDUtLjA5LS4xNC0uMDktLjIxcy4wNC0uMTUuMDktLjIxbC40NS0uNDVjLjA1LS4wNS4xNC0uMDkuMjEtLjA5cy4xNS4wNC4yMS4wOVpcIlxuICAgICAgICAgICAgc3R5bGU9XCJmaWxsOiB2YXIoLS1pY29uLWNvbG9yLCAjMzMzKTsgc3Ryb2tlLXdpZHRoOiAwcHhcIiAvPlxuICAgICAgICA8L3N2Zz5cbiAgICAgIDwvZGl2PlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInNtYWxsLWhvcml6b250YWwtdHJlZS1saW5lXCI+PC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJ0cmVlLW5vZGUtaWNvbi1jb250YWluZXJcIiAqbmdJZj1cIm5vZGVXcmFwcGVyLmRhdGEuZmFJY29uXCI+XG4gICAgPGkgY2xhc3M9XCJmYVwiIFtjbGFzc109XCJub2RlV3JhcHBlci5kYXRhLmZhSWNvblwiPjwvaT5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJ0cmVlLW5vZGUtY29udGVudFwiPlxuICAgIDxzcGFuXG4gICAgICAqbmdJZj1cIlxuICAgICAgICAhdHJlZUNvbmZpZz8udHJlZU5vZGVDb250ZW50Q29tcG9uZW50ICYmXG4gICAgICAgICF0cmVlQ29uZmlnPy50cmVlTm9kZUNvbnRlbnRUZW1wbGF0ZVxuICAgICAgXCI+XG4gICAgICB7eyBub2RlV3JhcHBlci5kYXRhLnRpdGxlIH19XG4gICAgPC9zcGFuPlxuICAgIDxuZy1jb250YWluZXIgI3JlZj48L25nLWNvbnRhaW5lcj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidHJlZUNvbmZpZz8udHJlZU5vZGVDb250ZW50VGVtcGxhdGUgYXMgdGVtcGxhdGVcIj5cbiAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJcbiAgICAgICAgICB0ZW1wbGF0ZTtcbiAgICAgICAgICBjb250ZXh0OiB7XG4gICAgICAgICAgICBub2RlV3JhcHBlcjogbm9kZVdyYXBwZXJcbiAgICAgICAgICB9XG4gICAgICAgIFwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2020/lib/ngcx-tree/ngcx-tree-utils.mjs

@@ -0,0 +1,10 @@
+export const isParentOf = (parent, node) => {
+    if (!node.parent) {
+        return false;
+    }
+    if (parent.id === node.parent.id) {
+        return true;
+    }
+    return isParentOf(parent, node.parent);
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdjeC10cmVlLXV0aWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdjeC10cmVlL3NyYy9saWIvbmdjeC10cmVlL25nY3gtdHJlZS11dGlscy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsQ0FDeEIsTUFBZ0MsRUFDaEMsSUFBOEIsRUFDckIsRUFBRTtJQUNYLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFO1FBQ2hCLE9BQU8sS0FBSyxDQUFDO0tBQ2Q7SUFDRCxJQUFJLE1BQU0sQ0FBQyxFQUFFLEtBQUssSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEVBQUU7UUFDaEMsT0FBTyxJQUFJLENBQUM7S0FDYjtJQUNELE9BQU8sVUFBVSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7QUFDekMsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdjeFRyZWVOb2RlV3JhcHBlciB9IGZyb20gJy4vbmdjeC10cmVlLW1vZGVscyc7XG5cbmV4cG9ydCBjb25zdCBpc1BhcmVudE9mID0gKFxuICBwYXJlbnQ6IE5nY3hUcmVlTm9kZVdyYXBwZXI8YW55PixcbiAgbm9kZTogTmdjeFRyZWVOb2RlV3JhcHBlcjxhbnk+XG4pOiBib29sZWFuID0+IHtcbiAgaWYgKCFub2RlLnBhcmVudCkge1xuICAgIHJldHVybiBmYWxzZTtcbiAgfVxuICBpZiAocGFyZW50LmlkID09PSBub2RlLnBhcmVudC5pZCkge1xuICAgIHJldHVybiB0cnVlO1xuICB9XG4gIHJldHVybiBpc1BhcmVudE9mKHBhcmVudCwgbm9kZS5wYXJlbnQpO1xufTtcbiJdfQ==