@cluetec/ngcx-tree 0.1.0 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -38
- package/esm2022/lib/ngcx-tree/ngcx-tree-models.mjs +1 -1
- package/esm2022/lib/ngcx-tree/ngcx-tree-node/ngcx-tree-node.component.mjs +3 -3
- package/esm2022/lib/ngcx-tree/ngcx-tree.component.mjs +33 -24
- package/fesm2022/cluetec-ngcx-tree.mjs +34 -25
- package/fesm2022/cluetec-ngcx-tree.mjs.map +1 -1
- package/lib/ngcx-tree/ngcx-tree-models.d.ts +5 -11
- package/lib/ngcx-tree/ngcx-tree.component.d.ts +42 -36
- package/package.json +7 -5
- package/styles/styles.css +60 -0
- package/styles/styles.css.map +1 -0
package/README.md
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
# @cluetec/ngcx-tree
|
|
2
|
-
|
|
3
1
|
A reusable tree component for Angular based on the CDK Tree and the CDK Drag n
|
|
4
2
|
Drop features.
|
|
5
3
|
|
|
@@ -8,7 +6,6 @@ Status is beta - feedback welcome :)
|
|
|
8
6
|
|
|
9
7
|
# Table of Content
|
|
10
8
|
|
|
11
|
-
- [@cluetec/ngcx-tree](#cluetecngcx-tree)
|
|
12
9
|
- [Table of Content](#table-of-content)
|
|
13
10
|
- [Getting Started](#getting-started)
|
|
14
11
|
- [Inputs](#inputs)
|
|
@@ -21,9 +18,9 @@ Status is beta - feedback welcome :)
|
|
|
21
18
|
- [NgcxCustomComponent](#ngcxcustomcomponent)
|
|
22
19
|
- [Input](#input)
|
|
23
20
|
- [Output](#output)
|
|
24
|
-
- [Api](#api)
|
|
21
|
+
- [TreeControl - Api](#treecontrol---api)
|
|
25
22
|
- [treeControl](#treecontrol)
|
|
26
|
-
- [Helper methods](#helper-methods)
|
|
23
|
+
- [Additional Helper methods](#additional-helper-methods)
|
|
27
24
|
- [selectNodeById](#selectnodebyid)
|
|
28
25
|
- [findNodeById](#findnodebyid)
|
|
29
26
|
- [Styling](#styling)
|
|
@@ -34,18 +31,22 @@ Status is beta - feedback welcome :)
|
|
|
34
31
|
- [Icon color](#icon-color)
|
|
35
32
|
- [Font Awesome](#font-awesome)
|
|
36
33
|
- [Selection](#selection)
|
|
37
|
-
|
|
34
|
+
- [Simple Sample](#simple-sample)
|
|
35
|
+
- [Contributions](#contributions)
|
|
38
36
|
- [Samples](#samples)
|
|
39
|
-
- [Simple Sample](#simple-sample)
|
|
40
37
|
|
|
41
38
|
# Getting Started
|
|
42
39
|
|
|
43
|
-
1. Install the library:
|
|
40
|
+
1. Install the library:
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
npm install @cluetec/ngcx-tree
|
|
44
|
+
```
|
|
44
45
|
|
|
45
46
|
2. Import the component. Since it is standalone, either add it directly to
|
|
46
47
|
another standlone component or import it into your existing `NgModule`:
|
|
47
48
|
|
|
48
|
-
```
|
|
49
|
+
```ts
|
|
49
50
|
import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
|
|
50
51
|
|
|
51
52
|
@Component({
|
|
@@ -54,17 +55,21 @@ import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
|
|
|
54
55
|
})
|
|
55
56
|
```
|
|
56
57
|
|
|
57
|
-
```
|
|
58
|
+
```ts
|
|
58
59
|
import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
|
|
59
60
|
|
|
60
61
|
@NgModule({
|
|
61
62
|
declarations: [AppComponent],
|
|
62
63
|
imports: [NgcxTreeComponent],
|
|
63
|
-
bootstrap: [AppComponent]
|
|
64
|
+
bootstrap: [AppComponent],
|
|
64
65
|
})
|
|
65
66
|
export class AppModule {}
|
|
66
67
|
```
|
|
67
68
|
|
|
69
|
+
```html
|
|
70
|
+
<ngcx-tree [nodes]="nodes"></ngcx-tree>
|
|
71
|
+
```
|
|
72
|
+
|
|
68
73
|
<br><br>
|
|
69
74
|
|
|
70
75
|
# Inputs
|
|
@@ -161,14 +166,42 @@ Your component can implement this interface and can be set as
|
|
|
161
166
|
`customEvent` `EventEmitter<any>` can be used to trigger the output
|
|
162
167
|
'customEvent'
|
|
163
168
|
|
|
164
|
-
# Api
|
|
169
|
+
# TreeControl - Api
|
|
170
|
+
|
|
171
|
+
Access api like this
|
|
172
|
+
|
|
173
|
+
````ts
|
|
174
|
+
import { ViewChild } from '@angular/core';
|
|
175
|
+
import { Component } from '@angular/core';
|
|
176
|
+
import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
|
|
177
|
+
|
|
178
|
+
@Component({
|
|
179
|
+
selector: 'app-expand-tree-sample',
|
|
180
|
+
template: ```
|
|
181
|
+
<button (click)="expandAll()"></button>
|
|
182
|
+
<ngcx-tree #tree [nodes]="nodes"></ngcx-tree>
|
|
183
|
+
```,
|
|
184
|
+
standalone: true,
|
|
185
|
+
imports: [NgcxTreeComponent],
|
|
186
|
+
})
|
|
187
|
+
export class ExpandTreeSampleComponent {
|
|
188
|
+
nodes = [];
|
|
189
|
+
@ViewChild('tree', { static: false })
|
|
190
|
+
ngcxTree: NgcxTreeComponent;
|
|
191
|
+
|
|
192
|
+
expandAll(): void {
|
|
193
|
+
this.ngcxTree.treeControl.expandAll();
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
````
|
|
165
197
|
|
|
166
198
|
## treeControl
|
|
167
199
|
|
|
168
|
-
|
|
169
|
-
|
|
200
|
+
The treeControl extends the treeControl from Angular CDK
|
|
201
|
+
(`NestedTreeControl<NgcxTreeNodeWrapper<T>, string>`) and can mainly be used to
|
|
202
|
+
expand and collapse nodes.
|
|
170
203
|
|
|
171
|
-
## Helper methods
|
|
204
|
+
## Additional Helper methods
|
|
172
205
|
|
|
173
206
|
### selectNodeById
|
|
174
207
|
|
|
@@ -183,10 +216,10 @@ if no node is available for the id.
|
|
|
183
216
|
|
|
184
217
|
## Include Styles
|
|
185
218
|
|
|
186
|
-
|
|
219
|
+
styles.scss and styles.css contains all the parts described below in one file:
|
|
187
220
|
|
|
188
221
|
```scss
|
|
189
|
-
@import '
|
|
222
|
+
@import 'node_modules/@cluetec/ngcx-tree/styles/styles';
|
|
190
223
|
```
|
|
191
224
|
|
|
192
225
|
## Common styling
|
|
@@ -203,7 +236,7 @@ may be on wrong place:
|
|
|
203
236
|
Or Include this:
|
|
204
237
|
|
|
205
238
|
```scss
|
|
206
|
-
@import '
|
|
239
|
+
@import 'node_modules/@cluetec/ngcx-tree/styles/ngcx-common';
|
|
207
240
|
```
|
|
208
241
|
|
|
209
242
|
### Dotted tree lines
|
|
@@ -211,7 +244,7 @@ Or Include this:
|
|
|
211
244
|
Import or copy the scss to show tree lines:
|
|
212
245
|
|
|
213
246
|
```scss
|
|
214
|
-
@import '
|
|
247
|
+
@import 'node_modules/@cluetec/ngcx-tree/styles/ngcx-doted-tree-line';
|
|
215
248
|
```
|
|
216
249
|
|
|
217
250
|
### Selection highlighting
|
|
@@ -219,7 +252,7 @@ Import or copy the scss to show tree lines:
|
|
|
219
252
|
Import or copy the scss to show some selection styling:
|
|
220
253
|
|
|
221
254
|
```scss
|
|
222
|
-
@import '
|
|
255
|
+
@import 'node_modules/@cluetec/ngcx-tree/styles/ngcx-selection';
|
|
223
256
|
```
|
|
224
257
|
|
|
225
258
|
### Icon color
|
|
@@ -227,7 +260,7 @@ Import or copy the scss to show some selection styling:
|
|
|
227
260
|
Import or copy the scss to set the color of the node icon:
|
|
228
261
|
|
|
229
262
|
```scss
|
|
230
|
-
@import '
|
|
263
|
+
@import 'node_modules/@cluetec/ngcx-tree/styles/ngcx-icon-color';
|
|
231
264
|
```
|
|
232
265
|
|
|
233
266
|
## Font Awesome
|
|
@@ -268,33 +301,20 @@ Remove Selection css on dragging element:
|
|
|
268
301
|
}
|
|
269
302
|
```
|
|
270
303
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
## Contributions
|
|
274
|
-
|
|
275
|
-
Contributions and improvement suggestions are always welcome!
|
|
276
|
-
|
|
277
|
-
## Samples
|
|
278
|
-
|
|
279
|
-
For samples see the storybook stories. run `npm run storybook` to see the
|
|
280
|
-
samples.
|
|
281
|
-
|
|
282
|
-
### Simple Sample
|
|
304
|
+
# Simple Sample
|
|
283
305
|
|
|
284
306
|
```ts
|
|
285
|
-
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
286
|
-
import { CdkTreeModule } from '@angular/cdk/tree';
|
|
287
307
|
import { Component } from '@angular/core';
|
|
288
308
|
import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
|
|
289
309
|
|
|
290
310
|
@Component({
|
|
291
311
|
selector: 'app-simple-tree-sample',
|
|
292
|
-
template: '<ngcx-tree [nodes]="
|
|
312
|
+
template: '<ngcx-tree [nodes]="nodes"></ngcx-tree>',
|
|
293
313
|
standalone: true,
|
|
294
|
-
imports: [
|
|
314
|
+
imports: [NgcxTreeComponent],
|
|
295
315
|
})
|
|
296
316
|
export class SimpleTreeSampleComponent {
|
|
297
|
-
|
|
317
|
+
nodes = [
|
|
298
318
|
{
|
|
299
319
|
id: 'fru',
|
|
300
320
|
title: 'Fruit',
|
|
@@ -316,3 +336,16 @@ export class SimpleTreeSampleComponent {
|
|
|
316
336
|
];
|
|
317
337
|
}
|
|
318
338
|
```
|
|
339
|
+
|
|
340
|
+
<br><br>
|
|
341
|
+
|
|
342
|
+
# Contributions
|
|
343
|
+
|
|
344
|
+
Contributions and improvement suggestions are always welcome!
|
|
345
|
+
|
|
346
|
+
## Samples
|
|
347
|
+
|
|
348
|
+
You can run Storybook and see the samples there.
|
|
349
|
+
|
|
350
|
+
1. `npm run build`
|
|
351
|
+
2. `npm run storybook`
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdjeC10cmVlLW1vZGVscy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nY3gtdHJlZS9zcmMvbGliL25nY3gtdHJlZS9uZ2N4LXRyZWUtbW9kZWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFdmVudEVtaXR0ZXIsIFRlbXBsYXRlUmVmLCBUeXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmdjeFRyZWVDb25maWc8VCBleHRlbmRzIE5nY3hUcmVlTm9kZT4ge1xuICB0cmVlTm9kZUNvbnRlbnRDb21wb25lbnQ/OiBUeXBlPE5nY3hDdXN0b21Db21wb25lbnQ8VD4+O1xuICB0cmVlTm9kZUNvbnRlbnRUZW1wbGF0ZT86IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgYWxsb3dEcm9wPzogKFxuICAgIG5vZGU6IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD4sXG4gICAgaW50b05vZGU/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+XG4gICkgPT4gYm9vbGVhbjtcbiAgYWxsb3dEcmFnPzogKG5vZGU6IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD4pID0+IGJvb2xlYW47XG4gIGFsbG93U2VsZWN0aW9uPzogKG5vZGU6IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD4pID0+IGJvb2xlYW47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTmdjeEN1c3RvbUNvbXBvbmVudDxUIGV4dGVuZHMgTmdjeFRyZWVOb2RlPiB7XG4gIG5vZGVXcmFwcGVyPzogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPjtcbiAgY3VzdG9tRXZlbnQ/OiBFdmVudEVtaXR0ZXI8YW55Pjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBOZ2N4VHJlZU5vZGUge1xuICBpZDogc3RyaW5nO1xuICB0aXRsZT86IGFueTtcbiAgZmFJY29uPzogc3RyaW5nO1xuICBjaGlsZHJlbj86IE5nY3hUcmVlTm9kZVtdO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIE5nY3hUcmVlTm9kZVdyYXBwZXI8VCBleHRlbmRzIE5nY3hUcmVlTm9kZT4ge1xuICBpZDogc3RyaW5nO1xuICBkYXRhOiBUO1xuICBkZXB0aDogbnVtYmVyO1xuICBpbmRleDogbnVtYmVyO1xuICBpc1NlbGVjdGFibGU/OiBib29sZWFuO1xuICBpc0ZpcnN0Q2hpbGQ6IGJvb2xlYW47XG4gIGlzTGFzdENoaWxkOiBib29sZWFuO1xuICBjaGlsZHJlbjogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPltdO1xuICBwYXJlbnQ/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xuICBuZXh0PzogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPjtcbiAgcHJldmlvdXM/OiBOZ2N4VHJlZU5vZGVXcmFwcGVyPFQ+O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIE5nY3hUcmVlTm9kZUNvbXBvbmVudDxUIGV4dGVuZHMgTmdjeFRyZWVOb2RlPiB7XG4gIG5vZGVXcmFwcGVyPzogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBOZ2N4VHJlZU5vZGVNb3ZlZEV2ZW50PFQgZXh0ZW5kcyBOZ2N4VHJlZU5vZGU+IHtcbiAgbm9kZTogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPjtcbiAgcGFyZW50PzogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPjtcbiAgYWZ0ZXJOb2RlPzogTmdjeFRyZWVOb2RlV3JhcHBlcjxUPjtcbiAgYmVmb3JlTm9kZT86IE5nY3hUcmVlTm9kZVdyYXBwZXI8VD47XG59XG4iXX0=
|
|
@@ -24,10 +24,10 @@ export class NgcxTreeNodeComponent {
|
|
|
24
24
|
this.ngUnsubscribe.next(undefined);
|
|
25
25
|
this.ngUnsubscribe.complete();
|
|
26
26
|
}
|
|
27
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
27
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: NgcxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", 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"] }] }); }
|
|
29
29
|
}
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: NgcxTreeNodeComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
32
|
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"] }]
|
|
33
33
|
}], propDecorators: { nodeWrapper: [{
|