@cluetec/ngcx-tree 0.1.0-angular-15 → 1.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 +56 -23
- package/esm2022/lib/ngcx-tree/ngcx-tree-models.mjs +2 -0
- package/{esm2020 → esm2022}/lib/ngcx-tree/ngcx-tree-node/ngcx-tree-node.component.mjs +4 -4
- package/esm2022/lib/ngcx-tree/ngcx-tree.component.mjs +332 -0
- package/fesm2022/cluetec-ngcx-tree.mjs +409 -0
- package/fesm2022/cluetec-ngcx-tree.mjs.map +1 -0
- package/lib/ngcx-tree/ngcx-tree-models.d.ts +5 -11
- package/lib/ngcx-tree/ngcx-tree-node/ngcx-tree-node.component.d.ts +1 -1
- package/lib/ngcx-tree/ngcx-tree.component.d.ts +42 -36
- package/package.json +11 -15
- package/esm2020/lib/ngcx-tree/ngcx-tree-models.mjs +0 -2
- package/esm2020/lib/ngcx-tree/ngcx-tree.component.mjs +0 -323
- package/fesm2015/cluetec-ngcx-tree.mjs +0 -410
- package/fesm2015/cluetec-ngcx-tree.mjs.map +0 -1
- package/fesm2020/cluetec-ngcx-tree.mjs +0 -400
- package/fesm2020/cluetec-ngcx-tree.mjs.map +0 -1
- /package/{esm2020 → esm2022}/cluetec-ngcx-tree.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/ngcx-tree/ngcx-tree-data.source.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/ngcx-tree/ngcx-tree-utils.mjs +0 -0
- /package/{esm2020 → esm2022}/public-api.mjs +0 -0
package/README.md
CHANGED
|
@@ -18,9 +18,9 @@ Status is beta - feedback welcome :)
|
|
|
18
18
|
- [NgcxCustomComponent](#ngcxcustomcomponent)
|
|
19
19
|
- [Input](#input)
|
|
20
20
|
- [Output](#output)
|
|
21
|
-
- [Api](#api)
|
|
21
|
+
- [TreeControl - Api](#treecontrol---api)
|
|
22
22
|
- [treeControl](#treecontrol)
|
|
23
|
-
- [Helper methods](#helper-methods)
|
|
23
|
+
- [Additional Helper methods](#additional-helper-methods)
|
|
24
24
|
- [selectNodeById](#selectnodebyid)
|
|
25
25
|
- [findNodeById](#findnodebyid)
|
|
26
26
|
- [Styling](#styling)
|
|
@@ -33,6 +33,7 @@ Status is beta - feedback welcome :)
|
|
|
33
33
|
- [Selection](#selection)
|
|
34
34
|
- [Simple Sample](#simple-sample)
|
|
35
35
|
- [Contributions](#contributions)
|
|
36
|
+
- [Samples](#samples)
|
|
36
37
|
|
|
37
38
|
# Getting Started
|
|
38
39
|
|
|
@@ -45,7 +46,7 @@ npm install @cluetec/ngcx-tree
|
|
|
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
|
|
@@ -271,19 +304,17 @@ Remove Selection css on dragging element:
|
|
|
271
304
|
# Simple Sample
|
|
272
305
|
|
|
273
306
|
```ts
|
|
274
|
-
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
275
|
-
import { CdkTreeModule } from '@angular/cdk/tree';
|
|
276
307
|
import { Component } from '@angular/core';
|
|
277
308
|
import { NgcxTreeComponent } from '@cluetec/ngcx-tree';
|
|
278
309
|
|
|
279
310
|
@Component({
|
|
280
311
|
selector: 'app-simple-tree-sample',
|
|
281
|
-
template: '<ngcx-tree [nodes]="
|
|
312
|
+
template: '<ngcx-tree [nodes]="nodes"></ngcx-tree>',
|
|
282
313
|
standalone: true,
|
|
283
|
-
imports: [
|
|
314
|
+
imports: [NgcxTreeComponent],
|
|
284
315
|
})
|
|
285
316
|
export class SimpleTreeSampleComponent {
|
|
286
|
-
|
|
317
|
+
nodes = [
|
|
287
318
|
{
|
|
288
319
|
id: 'fru',
|
|
289
320
|
title: 'Fruit',
|
|
@@ -312,7 +343,9 @@ export class SimpleTreeSampleComponent {
|
|
|
312
343
|
|
|
313
344
|
Contributions and improvement suggestions are always welcome!
|
|
314
345
|
|
|
315
|
-
##Samples
|
|
346
|
+
## Samples
|
|
347
|
+
|
|
348
|
+
You can run Storybook and see the samples there.
|
|
316
349
|
|
|
317
|
-
|
|
318
|
-
|
|
350
|
+
1. `npm run build`
|
|
351
|
+
2. `npm run storybook`
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
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.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"] }] }); }
|
|
27
29
|
}
|
|
28
|
-
|
|
29
|
-
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"] }] });
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgcxTreeNodeComponent, decorators: [{
|
|
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: [{
|
|
@@ -46,4 +46,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
46
46
|
type: ViewChild,
|
|
47
47
|
args: ['ref', { read: ViewContainerRef, static: true }]
|
|
48
48
|
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
49
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmdjeC10cmVlLW5vZGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmdjeC10cmVlL3NyYy9saWIvbmdjeC10cmVlL25nY3gtdHJlZS1ub2RlL25nY3gtdHJlZS1ub2RlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nY3gtdHJlZS9zcmMvbGliL25nY3gtdHJlZS9uZ2N4LXRyZWUtbm9kZS9uZ2N4LXRyZWUtbm9kZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFxQixNQUFNLG1CQUFtQixDQUFDO0FBQ3JFLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFHTCxNQUFNLEVBQ04sU0FBUyxFQUNULGdCQUFnQixHQUNqQixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7OztBQVMxQyxNQUFNLE9BQU8scUJBQXFCO0lBUGxDO1FBV1csZUFBVSxHQUFHLEtBQUssQ0FBQztRQUVsQixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDdEMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFLaEQsa0JBQWEsR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO0tBbUIvQjtJQWpCQyxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsd0JBQXdCLEVBQUU7WUFDM0QsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQzlDLElBQUksQ0FBQyxVQUFVLENBQUMsd0JBQXdCLENBQ3pDLENBQUM7WUFDRixhQUFhLENBQUMsUUFBUSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO1lBRXRELGFBQWEsQ0FBQyxRQUFRLENBQUMsV0FBVztnQkFDaEMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztpQkFDcEMsU0FBUyxDQUFDLENBQUMsS0FBVSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO1NBQzVEO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ2hDLENBQUM7OEdBOUJVLHFCQUFxQjtrR0FBckIscUJBQXFCLDhVQVNOLGdCQUFnQiwyQ0NoQzVDLHExREErQ0EsazlCRDFCWSxhQUFhLDJKQUFFLGdCQUFnQixvSkFBRSxJQUFJOzsyRkFFcEMscUJBQXFCO2tCQVBqQyxTQUFTOytCQUNFLGdCQUFnQixjQUdkLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLENBQUM7OEJBR3ZDLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNO2dCQUdQLEtBQUs7c0JBREosU0FBUzt1QkFBQyxLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENka1RyZWVNb2R1bGUsIE5lc3RlZFRyZWVDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3RyZWUnO1xuaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdjeFRyZWVDb25maWcsIE5nY3hUcmVlTm9kZVdyYXBwZXIgfSBmcm9tICcuLi9uZ2N4LXRyZWUtbW9kZWxzJztcblxuaW1wb3J0IHsgTmdJZiwgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBTdWJqZWN0LCB0YWtlVW50aWwgfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdjeC10cmVlLW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vbmdjeC10cmVlLW5vZGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9uZ2N4LXRyZWUtbm9kZS5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2RrVHJlZU1vZHVsZSwgTmdUZW1wbGF0ZU91dGxldCwgTmdJZl0sXG59KVxuZXhwb3J0IGNsYXNzIE5nY3hUcmVlTm9kZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KCkgbm9kZVdyYXBwZXIhOiBOZ2N4VHJlZU5vZGVXcmFwcGVyPGFueT47XG4gIEBJbnB1dCgpIHRyZWVDb250cm9sITogTmVzdGVkVHJlZUNvbnRyb2w8TmdjeFRyZWVOb2RlV3JhcHBlcjxhbnk+LCBzdHJpbmc+O1xuICBASW5wdXQoKSB0cmVlQ29uZmlnPzogTmdjeFRyZWVDb25maWc8YW55PjtcbiAgQElucHV0KCkgaXNTZWxlY3RlZCA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBjdXN0b21FdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgY2xpY2tFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBAVmlld0NoaWxkKCdyZWYnLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICB2Y1JlZj86IFZpZXdDb250YWluZXJSZWY7XG5cbiAgbmdVbnN1YnNjcmliZSA9IG5ldyBTdWJqZWN0KCk7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMudmNSZWYgJiYgdGhpcy50cmVlQ29uZmlnPy50cmVlTm9kZUNvbnRlbnRDb21wb25lbnQpIHtcbiAgICAgIGNvbnN0IG5vZGVDb21wb25lbnQgPSB0aGlzLnZjUmVmLmNyZWF0ZUNvbXBvbmVudChcbiAgICAgICAgdGhpcy50cmVlQ29uZmlnLnRyZWVOb2RlQ29udGVudENvbXBvbmVudFxuICAgICAgKTtcbiAgICAgIG5vZGVDb21wb25lbnQuaW5zdGFuY2Uubm9kZVdyYXBwZXIgPSB0aGlzLm5vZGVXcmFwcGVyO1xuXG4gICAgICBub2RlQ29tcG9uZW50Lmluc3RhbmNlLmN1c3RvbUV2ZW50XG4gICAgICAgID8ucGlwZSh0YWtlVW50aWwodGhpcy5uZ1Vuc3Vic2NyaWJlKSlcbiAgICAgICAgLnN1YnNjcmliZSgodmFsdWU6IGFueSkgPT4gdGhpcy5jdXN0b21FdmVudC5lbWl0KHZhbHVlKSk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5uZ1Vuc3Vic2NyaWJlLm5leHQodW5kZWZpbmVkKTtcbiAgICB0aGlzLm5nVW5zdWJzY3JpYmUuY29tcGxldGUoKTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cInRyZWUtbm9kZS1jb250ZW50LWNvbnRhaW5lclwiXG4gIFtjbGFzcy5zZWxlY3RlZF09XCJpc1NlbGVjdGVkXCJcbiAgW2NsYXNzLmZpcnN0XT1cIm5vZGVXcmFwcGVyLmlzRmlyc3RDaGlsZFwiXG4gIFtjbGFzcy5sYXN0XT1cIm5vZGVXcmFwcGVyLmlzTGFzdENoaWxkXCJcbiAgW2NsYXNzLmlzLXNlbGVjdGFibGVdPVwibm9kZVdyYXBwZXIuaXNTZWxlY3RhYmxlXCJcbiAgKGNsaWNrKT1cImNsaWNrRXZlbnQuZW1pdCgpXCI+XG4gIDxkaXYgY2xhc3M9XCJ0cmVlLW5vZGUtZXhwYW5kLWNvbnRhaW5lclwiPlxuICAgIDxidXR0b25cbiAgICAgICpuZ0lmPVwibm9kZVdyYXBwZXIuY2hpbGRyZW4ubGVuZ3RoID4gMFwiXG4gICAgICBjbGFzcz1cInRyZWUtbm9kZS1leHBhbmRcIlxuICAgICAgY2RrVHJlZU5vZGVUb2dnbGVcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiJ1RvZ2dsZSAnICsgbm9kZVdyYXBwZXIuZGF0YS50aXRsZVwiXG4gICAgICAoY2xpY2spPVwiJGV2ZW50LnByZXZlbnREZWZhdWx0KClcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjaGV2cm9uXCIgW2NsYXNzLnJvdGF0ZV09XCJ0cmVlQ29udHJvbC5pc0V4cGFuZGVkKG5vZGVXcmFwcGVyKVwiPlxuICAgICAgICA8c3ZnIGlkPVwiYVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB2aWV3Qm94PVwiMCAwIDkgOVwiPlxuICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICBkPVwibTIuODMuMDlsNC4yLDQuMmMuMDUuMDUuMDkuMTQuMDkuMjFzLS4wNC4xNS0uMDkuMjFsLTQuMiw0LjJjLS4wNS4wNS0uMTQuMDktLjIxLjA5cy0uMTUtLjA0LS4yMS0uMDlsLS40NS0uNDVjLS4wNS0uMDUtLjA5LS4xMy0uMDktLjIxLDAtLjA3LjA0LS4xNS4wOS0uMjFsMy41NC0zLjU0TDEuOTcuOTZjLS4wNS0uMDUtLjA5LS4xNC0uMDktLjIxcy4wNC0uMTUuMDktLjIxbC40NS0uNDVjLjA1LS4wNS4xNC0uMDkuMjEtLjA5cy4xNS4wNC4yMS4wOVpcIlxuICAgICAgICAgICAgc3R5bGU9XCJmaWxsOiB2YXIoLS1pY29uLWNvbG9yLCAjMzMzKTsgc3Ryb2tlLXdpZHRoOiAwcHhcIiAvPlxuICAgICAgICA8L3N2Zz5cbiAgICAgIDwvZGl2PlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInNtYWxsLWhvcml6b250YWwtdHJlZS1saW5lXCI+PC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJ0cmVlLW5vZGUtaWNvbi1jb250YWluZXJcIiAqbmdJZj1cIm5vZGVXcmFwcGVyLmRhdGEuZmFJY29uXCI+XG4gICAgPGkgY2xhc3M9XCJmYVwiIFtjbGFzc109XCJub2RlV3JhcHBlci5kYXRhLmZhSWNvblwiPjwvaT5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJ0cmVlLW5vZGUtY29udGVudFwiPlxuICAgIDxzcGFuXG4gICAgICAqbmdJZj1cIlxuICAgICAgICAhdHJlZUNvbmZpZz8udHJlZU5vZGVDb250ZW50Q29tcG9uZW50ICYmXG4gICAgICAgICF0cmVlQ29uZmlnPy50cmVlTm9kZUNvbnRlbnRUZW1wbGF0ZVxuICAgICAgXCI+XG4gICAgICB7eyBub2RlV3JhcHBlci5kYXRhLnRpdGxlIH19XG4gICAgPC9zcGFuPlxuICAgIDxuZy1jb250YWluZXIgI3JlZj48L25nLWNvbnRhaW5lcj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidHJlZUNvbmZpZz8udHJlZU5vZGVDb250ZW50VGVtcGxhdGUgYXMgdGVtcGxhdGVcIj5cbiAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgKm5nVGVtcGxhdGVPdXRsZXQ9XCJcbiAgICAgICAgICB0ZW1wbGF0ZTtcbiAgICAgICAgICBjb250ZXh0OiB7XG4gICAgICAgICAgICBub2RlV3JhcHBlcjogbm9kZVdyYXBwZXJcbiAgICAgICAgICB9XG4gICAgICAgIFwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|