@anglr/dynamic 1.0.0-beta.20220906124307 → 1.0.0-beta.20220906174129

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.
Files changed (15) hide show
  1. package/es2015/layout-editor/src/components/componentsTree/componentsTree.component.js +2 -11
  2. package/es2015/layout-editor/src/components/componentsTree/componentsTree.component.js.map +1 -1
  3. package/es2015/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js +60 -16
  4. package/es2015/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js.map +1 -1
  5. package/es2020/layout-editor/src/components/componentsTree/componentsTree.component.js +2 -11
  6. package/es2020/layout-editor/src/components/componentsTree/componentsTree.component.js.map +1 -1
  7. package/es2020/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js +45 -13
  8. package/es2020/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js.map +1 -1
  9. package/layout-editor/src/components/componentsTree/componentsTree.component.d.ts +3 -8
  10. package/layout-editor/src/components/componentsTree/componentsTree.component.d.ts.map +1 -1
  11. package/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.d.ts +14 -3
  12. package/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.d.ts.map +1 -1
  13. package/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.html +8 -8
  14. package/package.json +2 -2
  15. package/version.bak +1 -1
package/es2015/layout-editor/src/components/componentsTree/componentsTree.component.js CHANGED
@@ -30,7 +30,7 @@ export class ComponentsTreeSAComponent {
30
30
  */
31
31
  ngOnInit() {
32
32
  this._initSubscriptions.add(this._manager.layoutChange.subscribe(() => {
33
- this.root = this._manager.root;
33
+ this.root = this._manager.getMetadata();
34
34
  this._changeDetector.detectChanges();
35
35
  }));
36
36
  this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => {
@@ -40,7 +40,7 @@ export class ComponentsTreeSAComponent {
40
40
  }));
41
41
  this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));
42
42
  this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));
43
- this.root = this._manager.root;
43
+ this.root = this._manager.getMetadata();
44
44
  }
45
45
  //######################### public methods - implementation of OnDestroy #########################
46
46
  /**
@@ -49,15 +49,6 @@ export class ComponentsTreeSAComponent {
49
49
  ngOnDestroy() {
50
50
  this._initSubscriptions.unsubscribe();
51
51
  }
52
- //######################### protected methods - template bindings #########################
53
- /**
54
- * Indicates whether layout component has children
55
- * @param node layout component to check
56
- * @returns
57
- */
58
- hasChild(node) {
59
- return !!node.children && node.children.length > 0;
60
- }
61
52
  }
62
53
  ComponentsTreeSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeSAComponent, deps: [{ token: i1.LayoutEditorMetadataManager }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
63
54
  ComponentsTreeSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeSAComponent, isStandalone: true, selector: "components-tree", viewQueries: [{ propertyName: "rootTreeItem", first: true, predicate: ComponentsTreeItemSAComponent, descendants: true }], ngImport: i0, template: "\n<div class=\"component-tree\" *ngIf=\"root\">\n <button type=\"button\" mat-icon-button aria-label=\"Collapse all\" (click)=\"rootTreeItem?.collapseAll()\">\n <span class=\"fa fa-minus-square\"></span>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Expand all\" (click)=\"rootTreeItem?.expandAll()\">\n <span class=\"fa fa-plus-square\"></span>\n </button>\n <components-tree-item [data]=\"root\"></components-tree-item>\n</div>\n", styles: [":host\n{\n display: block;\n background-color: #fafafa;\n border-right: 1px solid #ccc;\n}"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: ComponentsTreeItemSAComponent, selector: "components-tree-item", inputs: ["data", "open"], exportAs: ["componentsTreeItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
package/es2015/layout-editor/src/components/componentsTree/componentsTree.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"componentsTree.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/componentsTree/componentsTree.component.ts","../../../../../layout-editor/src/components/componentsTree/componentsTree.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAqB,SAAS,EAAC,MAAM,eAAe,CAAC;AAClH,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,2BAA2B,EAAuC,MAAM,gBAAgB,CAAC;AACjG,OAAO,EAAC,oCAAoC,EAAE,2BAA2B,EAAC,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAC,6BAA6B,EAAC,MAAM,QAAQ,CAAC;;;;;AAErD;;GAEG;AAkBH,MAAM,OAAO,yBAAyB;IAsBlC,iEAAiE;IACjE,YAAsB,QAAqC,EACrC,eAAkC;QADlC,aAAQ,GAAR,QAAQ,CAA6B;QACrC,oBAAe,GAAf,eAAe,CAAmB;QAtBxD,sEAAsE;QAEtE;;WAEG;QACO,uBAAkB,GAAiB,IAAI,YAAY,EAAE,CAAC;IAmBhE,CAAC;IAED,+FAA+F;IAE/F;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;YAElE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YAC/B,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;;YAEpE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACnH,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAEnH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IACnC,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IAED,2FAA2F;IAE3F;;;;OAIG;IACO,QAAQ,CAAC,IAA0C;QAEzD,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;;sHAzEQ,yBAAyB;0GAAzB,yBAAyB,yHAmBvB,6BAA6B,gDCjD5C,oeAUA,4JDWQ,YAAY,kIACZ,eAAe,0VAEf,cAAc,+BAEd,6BAA6B;2FAIxB,yBAAyB;kBAjBrC,SAAS;+BAEI,iBAAiB,cAGf,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;wBACf,oCAAoC;wBACpC,cAAc;wBACd,2BAA2B;wBAC3B,6BAA6B;qBAChC,mBACgB,uBAAuB,CAAC,MAAM;kJAsBrC,YAAY;sBADrB,SAAS;uBAAC,6BAA6B","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy, ViewChild} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {Subscription} from 'rxjs';\n\nimport {LayoutEditorMetadataManager, LayoutEditorMetadataManagerComponent} from '../../services';\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../directives';\nimport {ComponentsTreeItemSAComponent} from './item';\n\n/**\n * Component displaying components tree\n */\n@Component(\n{\n selector: 'components-tree',\n templateUrl: 'componentsTree.component.html',\n styleUrls: ['componentsTree.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ComponentsTreeItemSAComponent,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Instance of root component in tree\n */\n protected root: LayoutEditorMetadataManagerComponent|undefined|null;\n\n /**\n * Root component tree item\n */\n @ViewChild(ComponentsTreeItemSAComponent)\n protected rootTreeItem: ComponentsTreeItemSAComponent|undefined|null;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() =>\n {\n this.root = this._manager.root;\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this.rootTreeItem?.expand(this._manager.selectedComponent);\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n\n this.root = this._manager.root;\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Indicates whether layout component has children\n * @param node layout component to check\n * @returns \n */\n protected hasChild(node: LayoutEditorMetadataManagerComponent): boolean\n {\n return !!node.children && node.children.length > 0;\n }\n}","\n<div class=\"component-tree\" *ngIf=\"root\">\n <button type=\"button\" mat-icon-button aria-label=\"Collapse all\" (click)=\"rootTreeItem?.collapseAll()\">\n <span class=\"fa fa-minus-square\"></span>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Expand all\" (click)=\"rootTreeItem?.expandAll()\">\n <span class=\"fa fa-plus-square\"></span>\n </button>\n <components-tree-item [data]=\"root\"></components-tree-item>\n</div>\n"]}
1
+ {"version":3,"file":"componentsTree.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/componentsTree/componentsTree.component.ts","../../../../../layout-editor/src/components/componentsTree/componentsTree.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAqB,SAAS,EAAC,MAAM,eAAe,CAAC;AAClH,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,2BAA2B,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAC,oCAAoC,EAAE,2BAA2B,EAAC,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAC,6BAA6B,EAAC,MAAM,QAAQ,CAAC;;;;;AAErD;;GAEG;AAkBH,MAAM,OAAO,yBAAyB;IAsBlC,iEAAiE;IACjE,YAAsB,QAAqC,EACrC,eAAkC;QADlC,aAAQ,GAAR,QAAQ,CAA6B;QACrC,oBAAe,GAAf,eAAe,CAAmB;QAtBxD,sEAAsE;QAEtE;;WAEG;QACO,uBAAkB,GAAiB,IAAI,YAAY,EAAE,CAAC;IAmBhE,CAAC;IAED,+FAA+F;IAE/F;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;YAElE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YACxC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;;YAEpE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACnH,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAEnH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;;sHA7DQ,yBAAyB;0GAAzB,yBAAyB,yHAmBvB,6BAA6B,gDClD5C,oeAUA,4JDYQ,YAAY,kIACZ,eAAe,0VAEf,cAAc,+BAEd,6BAA6B;2FAIxB,yBAAyB;kBAjBrC,SAAS;+BAEI,iBAAiB,cAGf,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;wBACf,oCAAoC;wBACpC,cAAc;wBACd,2BAA2B;wBAC3B,6BAA6B;qBAChC,mBACgB,uBAAuB,CAAC,MAAM;kJAsBrC,YAAY;sBADrB,SAAS;uBAAC,6BAA6B","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy, ViewChild} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {Subscription} from 'rxjs';\n\nimport {LayoutEditorMetadataManager} from '../../services';\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../directives';\nimport {ComponentsTreeItemSAComponent} from './item';\n\n/**\n * Component displaying components tree\n */\n@Component(\n{\n selector: 'components-tree',\n templateUrl: 'componentsTree.component.html',\n styleUrls: ['componentsTree.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ComponentsTreeItemSAComponent,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Instance of root component in tree\n */\n protected root: LayoutComponentMetadata|undefined|null;\n\n /**\n * Root component tree item\n */\n @ViewChild(ComponentsTreeItemSAComponent)\n protected rootTreeItem: ComponentsTreeItemSAComponent|undefined|null;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() =>\n {\n this.root = this._manager.getMetadata();\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this.rootTreeItem?.expand(this._manager.selectedComponent);\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n\n this.root = this._manager.getMetadata();\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n}","\n<div class=\"component-tree\" *ngIf=\"root\">\n <button type=\"button\" mat-icon-button aria-label=\"Collapse all\" (click)=\"rootTreeItem?.collapseAll()\">\n <span class=\"fa fa-minus-square\"></span>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Expand all\" (click)=\"rootTreeItem?.expandAll()\">\n <span class=\"fa fa-plus-square\"></span>\n </button>\n <components-tree-item [data]=\"root\"></components-tree-item>\n</div>\n"]}
package/es2015/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js CHANGED
@@ -1,10 +1,12 @@
1
+ import { __asyncValues, __awaiter, __decorate, __metadata } from "tslib";
1
2
  import { Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, ViewChildren, QueryList } from '@angular/core';
2
3
  import { CommonModule } from '@angular/common';
3
4
  import { MatButtonModule } from '@angular/material/button';
4
5
  import { DragDropModule } from '@angular/cdk/drag-drop';
6
+ import { DebounceCall } from '@jscrpt/common';
5
7
  import { Subscription } from 'rxjs';
6
8
  import { ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective } from '../../../directives';
7
- import { LayoutEditorMetadataManager } from '../../../services';
9
+ import { LayoutComponentsIteratorService, LayoutEditorMetadataManager } from '../../../services';
8
10
  import * as i0 from "@angular/core";
9
11
  import * as i1 from "../../../services";
10
12
  import * as i2 from "@angular/common";
@@ -15,14 +17,23 @@ import * as i4 from "@angular/cdk/drag-drop";
15
17
  */
16
18
  export class ComponentsTreeItemSAComponent {
17
19
  //######################### constructor #########################
18
- constructor(_manager, _changeDetector) {
20
+ constructor(_manager, _changeDetector, iteratorSvc) {
19
21
  this._manager = _manager;
20
22
  this._changeDetector = _changeDetector;
23
+ this.iteratorSvc = iteratorSvc;
21
24
  //######################### protected fields #########################
22
25
  /**
23
26
  * Subscriptions created during initialization
24
27
  */
25
28
  this._initSubscriptions = new Subscription();
29
+ /**
30
+ * Node children
31
+ */
32
+ this.children = [];
33
+ /**
34
+ * Promise used for syncing async operations
35
+ */
36
+ this.syncPromise = Promise.resolve();
26
37
  /**
27
38
  * Indication whether node is open
28
39
  */
@@ -31,7 +42,7 @@ export class ComponentsTreeItemSAComponent {
31
42
  * Indicataion whether drag data can be dropped into node
32
43
  * @returns
33
44
  */
34
- this._canDrop = () => { var _a, _b, _c; return (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.canDropFn()) !== null && _c !== void 0 ? _c : false; };
45
+ this._canDrop = () => false;
35
46
  }
36
47
  //######################### protected fields - template bindings #########################
37
48
  /**
@@ -40,8 +51,7 @@ export class ComponentsTreeItemSAComponent {
40
51
  * @returns
41
52
  */
42
53
  get hasChildren() {
43
- var _a, _b;
44
- return !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.children) && ((_b = this.data) === null || _b === void 0 ? void 0 : _b.children.length) > 0;
54
+ return !!this.children && this.children.length > 0;
45
55
  }
46
56
  //######################### public methods - implementation of OnInit #########################
47
57
  /**
@@ -49,13 +59,14 @@ export class ComponentsTreeItemSAComponent {
49
59
  */
50
60
  ngOnInit() {
51
61
  this._initSubscriptions.add(this._manager.layoutChange.subscribe(() => {
52
- this._changeDetector.detectChanges();
62
+ this.initChildren();
53
63
  }));
54
64
  this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => {
55
65
  this._changeDetector.detectChanges();
56
66
  }));
57
67
  this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));
58
68
  this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));
69
+ this.initChildren();
59
70
  }
60
71
  //######################### public methods - implementation of OnDestroy #########################
61
72
  /**
@@ -77,16 +88,16 @@ export class ComponentsTreeItemSAComponent {
77
88
  * @returns indication whether node or its children were expanded
78
89
  */
79
90
  expand(nodeId) {
80
- var _a, _b, _c, _d, _e;
91
+ var _a, _b;
81
92
  if (!nodeId) {
82
93
  this.open = true;
83
94
  return true;
84
95
  }
85
- if (((_d = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.typeMetadata) === null || _d === void 0 ? void 0 : _d.id) === nodeId) {
96
+ if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.id) === nodeId) {
86
97
  return true;
87
98
  }
88
99
  if (this.hasChildren) {
89
- for (const child of (_e = this._childrenNodes) === null || _e === void 0 ? void 0 : _e.toArray()) {
100
+ for (const child of (_b = this._childrenNodes) === null || _b === void 0 ? void 0 : _b.toArray()) {
90
101
  if (child.expand(nodeId)) {
91
102
  this.expand();
92
103
  return true;
@@ -100,7 +111,7 @@ export class ComponentsTreeItemSAComponent {
100
111
  */
101
112
  expandAll() {
102
113
  var _a;
103
- (_a = this._childrenNodes) === null || _a === void 0 ? void 0 : _a.forEach(child => child.expandAll());
114
+ (_a = this._childrenNodes) === null || _a === void 0 ? void 0 : _a.forEach((child) => child.expandAll());
104
115
  this.expand();
105
116
  this._changeDetector.detectChanges();
106
117
  }
@@ -115,10 +126,37 @@ export class ComponentsTreeItemSAComponent {
115
126
  */
116
127
  collapseAll() {
117
128
  var _a;
118
- (_a = this._childrenNodes) === null || _a === void 0 ? void 0 : _a.forEach(child => child.collapseAll());
129
+ (_a = this._childrenNodes) === null || _a === void 0 ? void 0 : _a.forEach((child) => child.collapseAll());
119
130
  this.collapse();
120
131
  this._changeDetector.detectChanges();
121
132
  }
133
+ //######################### protected methods #########################
134
+ initChildren() {
135
+ var e_1, _a;
136
+ return __awaiter(this, void 0, void 0, function* () {
137
+ yield this.syncPromise;
138
+ let syncResolve;
139
+ this.syncPromise = new Promise(resolve => syncResolve = resolve);
140
+ this.children = [];
141
+ if (this.data) {
142
+ try {
143
+ for (var _b = __asyncValues(this.iteratorSvc.getChildrenIteratorFor(this.data)), _c; _c = yield _b.next(), !_c.done;) {
144
+ const child = _c.value;
145
+ this.children.push(child.metadata);
146
+ }
147
+ }
148
+ catch (e_1_1) { e_1 = { error: e_1_1 }; }
149
+ finally {
150
+ try {
151
+ if (_c && !_c.done && (_a = _b.return)) yield _a.call(_b);
152
+ }
153
+ finally { if (e_1) throw e_1.error; }
154
+ }
155
+ }
156
+ this._changeDetector.detectChanges();
157
+ syncResolve === null || syncResolve === void 0 ? void 0 : syncResolve();
158
+ });
159
+ }
122
160
  //######################### protected methods - template bindings #########################
123
161
  /**
124
162
  * Highlights component
@@ -141,8 +179,14 @@ export class ComponentsTreeItemSAComponent {
141
179
  this._manager.cancelHighlightedComponent();
142
180
  }
143
181
  }
144
- ComponentsTreeItemSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeItemSAComponent, deps: [{ token: i1.LayoutEditorMetadataManager }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
145
- ComponentsTreeItemSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeItemSAComponent, isStandalone: true, selector: "components-tree-item", inputs: { data: "data", open: "open" }, host: { listeners: { "mouseleave": "_cancelHighlight($event)" } }, viewQueries: [{ propertyName: "_childrenNodes", predicate: ComponentsTreeItemSAComponent, descendants: true }], exportAs: ["componentsTreeItem"], ngImport: i0, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.component?.options?.typeMetadata?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.component?.options?.typeMetadata?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.component?.options?.typeMetadata?.id)\"\n (click)=\"_manager.selectComponent(data?.component?.options?.typeMetadata?.id)\">{{data?.component?.options?.typeMetadata?.displayName || data?.component?.options?.typeMetadata?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.component?.options?.typeMetadata?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of data?.children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child.component.options?.typeMetadata, parentId: child.parent?.component?.id}\"\n [cdkDragDisabled]=\"child.component.dragDisabled\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"], dependencies: [{ kind: "component", type: ComponentsTreeItemSAComponent, selector: "components-tree-item", inputs: ["data", "open"], exportAs: ["componentsTreeItem"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ConnectDropListsSADirective, selector: "[cdkDropList][connectDropLists]", inputs: ["connectDropListsPrefix"], exportAs: ["connectDropLists"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
182
+ ComponentsTreeItemSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeItemSAComponent, deps: [{ token: i1.LayoutEditorMetadataManager }, { token: i0.ChangeDetectorRef }, { token: i1.LayoutComponentsIteratorService }], target: i0.ɵɵFactoryTarget.Component });
183
+ ComponentsTreeItemSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeItemSAComponent, isStandalone: true, selector: "components-tree-item", inputs: { data: "data", open: "open" }, host: { listeners: { "mouseleave": "_cancelHighlight($event)" } }, viewQueries: [{ propertyName: "_childrenNodes", predicate: ComponentsTreeItemSAComponent, descendants: true }], exportAs: ["componentsTreeItem"], ngImport: i0, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.id)\"\n (click)=\"_manager.selectComponent(data?.id)\">{{data?.displayName || data?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child, parentId: data?.id}\"\n [cdkDragDisabled]=\"false\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"], dependencies: [{ kind: "component", type: ComponentsTreeItemSAComponent, selector: "components-tree-item", inputs: ["data", "open"], exportAs: ["componentsTreeItem"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ConnectDropListsSADirective, selector: "[cdkDropList][connectDropLists]", inputs: ["connectDropListsPrefix"], exportAs: ["connectDropLists"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
184
+ __decorate([
185
+ DebounceCall(10),
186
+ __metadata("design:type", Function),
187
+ __metadata("design:paramtypes", []),
188
+ __metadata("design:returntype", Promise)
189
+ ], ComponentsTreeItemSAComponent.prototype, "initChildren", null);
146
190
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeItemSAComponent, decorators: [{
147
191
  type: Component,
148
192
  args: [{ selector: 'components-tree-item', exportAs: 'componentsTreeItem', standalone: true, imports: [
@@ -151,15 +195,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
151
195
  ComponentTreeNodeTemplateSADirective,
152
196
  DragDropModule,
153
197
  ConnectDropListsSADirective,
154
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.component?.options?.typeMetadata?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.component?.options?.typeMetadata?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.component?.options?.typeMetadata?.id)\"\n (click)=\"_manager.selectComponent(data?.component?.options?.typeMetadata?.id)\">{{data?.component?.options?.typeMetadata?.displayName || data?.component?.options?.typeMetadata?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.component?.options?.typeMetadata?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of data?.children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child.component.options?.typeMetadata, parentId: child.parent?.component?.id}\"\n [cdkDragDisabled]=\"child.component.dragDisabled\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"] }]
155
- }], ctorParameters: function () { return [{ type: i1.LayoutEditorMetadataManager }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _childrenNodes: [{
198
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.id)\"\n (click)=\"_manager.selectComponent(data?.id)\">{{data?.displayName || data?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child, parentId: data?.id}\"\n [cdkDragDisabled]=\"false\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"] }]
199
+ }], ctorParameters: function () { return [{ type: i1.LayoutEditorMetadataManager }, { type: i0.ChangeDetectorRef }, { type: i1.LayoutComponentsIteratorService }]; }, propDecorators: { _childrenNodes: [{
156
200
  type: ViewChildren,
157
201
  args: [ComponentsTreeItemSAComponent]
158
202
  }], data: [{
159
203
  type: Input
160
204
  }], open: [{
161
205
  type: Input
162
- }], _cancelHighlight: [{
206
+ }], initChildren: [], _cancelHighlight: [{
163
207
  type: HostListener,
164
208
  args: ['mouseleave', ['$event']]
165
209
  }] } });
package/es2015/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"componentsTreeItem.component.js","sourceRoot":"","sources":["../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.ts","../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnInit, OnDestroy, ViewChildren, QueryList} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {Func} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../../directives';\nimport {LayoutEditorMetadataManager, LayoutEditorMetadataManagerComponent} from '../../../services';\n\n/**\n * Component displaying components tree item\n */\n@Component(\n{\n selector: 'components-tree-item',\n exportAs: 'componentsTreeItem',\n templateUrl: 'componentsTreeItem.component.html',\n styleUrls: ['componentsTreeItem.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeItemSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Indicates whether layout component has children\n * @param node layout component to check\n * @returns \n */\n protected get hasChildren(): boolean\n {\n return !!this.data?.children && this.data?.children.length > 0;\n }\n\n /**\n * Child tree node components\n */\n @ViewChildren(ComponentsTreeItemSAComponent)\n protected _childrenNodes!: QueryList<ComponentsTreeItemSAComponent>;\n\n //######################### public properties - inputs and outputs #########################\n\n /**\n * Instance component tree item\n */\n @Input()\n public data: LayoutEditorMetadataManagerComponent|undefined|null;\n\n /**\n * Indication whether node is open\n */\n @Input()\n public open: boolean = true;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() =>\n {\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n }\n \n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n\n //######################### public methods #########################\n\n /**\n * Toggle children visibility\n */\n public toggle(): void\n {\n this.open = !this.open;\n }\n\n /**\n * Expands tree node\n * @param nodeId node identifier to expand\n * @returns indication whether node or its children were expanded\n */\n public expand(nodeId?: string|undefined|null): boolean\n {\n if (!nodeId)\n {\n this.open = true;\n return true;\n }\n\n if (this.data?.component?.options?.typeMetadata?.id === nodeId)\n {\n return true;\n }\n\n if (this.hasChildren)\n {\n for (const child of this._childrenNodes?.toArray())\n {\n if (child.expand(nodeId))\n {\n this.expand();\n return true;\n }\n }\n }\n\n return false;\n }\n \n /**\n * Expands node and all its children\n */\n public expandAll(): void\n {\n this._childrenNodes?.forEach(child => child.expandAll());\n this.expand();\n this._changeDetector.detectChanges();\n }\n\n /**\n * Collapse tree node\n */\n public collapse(): void\n {\n this.open = false;\n }\n\n /**\n * Collapse node and all its children\n */\n public collapseAll(): void\n {\n this._childrenNodes?.forEach(child => child.collapseAll());\n this.collapse();\n this._changeDetector.detectChanges();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Highlights component\n * @param event - Mouse event that occured\n * @param id - Id of component that is highlighted\n */\n protected highlight(event: MouseEvent, id?: string): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.highlightComponent(id);\n }\n\n /**\n * Indicataion whether drag data can be dropped into node\n * @returns \n */\n protected _canDrop: Func<boolean> = () => this.data?.component?.canDropFn() ?? false;\n\n //######################### protected methods - host #########################\n\n /**\n * Cancels highlight of component\n * @param event - Mouse event that occured\n */\n @HostListener('mouseleave', ['$event'])\n protected _cancelHighlight(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.cancelHighlightedComponent();\n }\n}","<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.component?.options?.typeMetadata?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.component?.options?.typeMetadata?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.component?.options?.typeMetadata?.id)\"\n (click)=\"_manager.selectComponent(data?.component?.options?.typeMetadata?.id)\">{{data?.component?.options?.typeMetadata?.displayName || data?.component?.options?.typeMetadata?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.component?.options?.typeMetadata?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of data?.children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child.component.options?.typeMetadata, parentId: child.parent?.component?.id}\"\n [cdkDragDisabled]=\"child.component.dragDisabled\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>"]}
1
+ {"version":3,"file":"componentsTreeItem.component.js","sourceRoot":"","sources":["../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.ts","../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnInit, OnDestroy, ViewChildren, QueryList} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {DebounceCall, Func, NoopAction} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../../directives';\nimport {LayoutComponentsIteratorService, LayoutEditorMetadataManager} from '../../../services';\n\n/**\n * Component displaying components tree item\n */\n@Component(\n{\n selector: 'components-tree-item',\n exportAs: 'componentsTreeItem',\n templateUrl: 'componentsTreeItem.component.html',\n styleUrls: ['componentsTreeItem.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeItemSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n /**\n * Node children\n */\n protected children: LayoutComponentMetadata[] = [];\n\n /**\n * Promise used for syncing async operations\n */\n protected syncPromise: Promise<void> = Promise.resolve();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Indicates whether layout component has children\n * @param node layout component to check\n * @returns \n */\n protected get hasChildren(): boolean\n {\n return !!this.children && this.children.length > 0;\n }\n\n /**\n * Child tree node components\n */\n @ViewChildren(ComponentsTreeItemSAComponent)\n protected _childrenNodes!: QueryList<ComponentsTreeItemSAComponent>;\n\n //######################### public properties - inputs and outputs #########################\n\n /**\n * Instance component tree item\n */\n @Input()\n public data: LayoutComponentMetadata|undefined|null;\n\n /**\n * Indication whether node is open\n */\n @Input()\n public open: boolean = true;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,\n protected iteratorSvc: LayoutComponentsIteratorService,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() => \n {\n this.initChildren();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n\n this.initChildren();\n }\n \n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n\n //######################### public methods #########################\n\n /**\n * Toggle children visibility\n */\n public toggle(): void\n {\n this.open = !this.open;\n }\n\n /**\n * Expands tree node\n * @param nodeId node identifier to expand\n * @returns indication whether node or its children were expanded\n */\n public expand(nodeId?: string|undefined|null): boolean\n {\n if (!nodeId)\n {\n this.open = true;\n return true;\n }\n\n if (this.data?.id === nodeId)\n {\n return true;\n }\n\n if (this.hasChildren)\n {\n for (const child of this._childrenNodes?.toArray())\n {\n if (child.expand(nodeId))\n {\n this.expand();\n return true;\n }\n }\n }\n\n return false;\n }\n \n /**\n * Expands node and all its children\n */\n public expandAll(): void\n {\n this._childrenNodes?.forEach((child: ComponentsTreeItemSAComponent) => child.expandAll());\n this.expand();\n this._changeDetector.detectChanges();\n }\n\n /**\n * Collapse tree node\n */\n public collapse(): void\n {\n this.open = false;\n }\n\n /**\n * Collapse node and all its children\n */\n public collapseAll(): void\n {\n this._childrenNodes?.forEach((child: ComponentsTreeItemSAComponent) => child.collapseAll());\n this.collapse();\n this._changeDetector.detectChanges();\n }\n\n //######################### protected methods #########################\n\n @DebounceCall(10)\n protected async initChildren(): Promise<void>\n {\n await this.syncPromise;\n let syncResolve: NoopAction|undefined;\n this.syncPromise = new Promise(resolve => syncResolve = resolve);\n\n this.children = [];\n\n if (this.data)\n {\n for await(const child of this.iteratorSvc.getChildrenIteratorFor(this.data))\n {\n this.children.push(child.metadata);\n }\n }\n \n this._changeDetector.detectChanges();\n\n syncResolve?.();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Highlights component\n * @param event - Mouse event that occured\n * @param id - Id of component that is highlighted\n */\n protected highlight(event: MouseEvent, id?: string): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.highlightComponent(id);\n }\n\n /**\n * Indicataion whether drag data can be dropped into node\n * @returns \n */\n protected _canDrop: Func<boolean> = () => false;\n\n //######################### protected methods - host #########################\n\n /**\n * Cancels highlight of component\n * @param event - Mouse event that occured\n */\n @HostListener('mouseleave', ['$event'])\n protected _cancelHighlight(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.cancelHighlightedComponent();\n }\n}","<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.id)\"\n (click)=\"_manager.selectComponent(data?.id)\">{{data?.displayName || data?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child, parentId: data?.id}\"\n [cdkDragDisabled]=\"false\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>"]}
package/es2020/layout-editor/src/components/componentsTree/componentsTree.component.js CHANGED
@@ -30,7 +30,7 @@ export class ComponentsTreeSAComponent {
30
30
  */
31
31
  ngOnInit() {
32
32
  this._initSubscriptions.add(this._manager.layoutChange.subscribe(() => {
33
- this.root = this._manager.root;
33
+ this.root = this._manager.getMetadata();
34
34
  this._changeDetector.detectChanges();
35
35
  }));
36
36
  this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => {
@@ -39,7 +39,7 @@ export class ComponentsTreeSAComponent {
39
39
  }));
40
40
  this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));
41
41
  this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));
42
- this.root = this._manager.root;
42
+ this.root = this._manager.getMetadata();
43
43
  }
44
44
  //######################### public methods - implementation of OnDestroy #########################
45
45
  /**
@@ -48,15 +48,6 @@ export class ComponentsTreeSAComponent {
48
48
  ngOnDestroy() {
49
49
  this._initSubscriptions.unsubscribe();
50
50
  }
51
- //######################### protected methods - template bindings #########################
52
- /**
53
- * Indicates whether layout component has children
54
- * @param node layout component to check
55
- * @returns
56
- */
57
- hasChild(node) {
58
- return !!node.children && node.children.length > 0;
59
- }
60
51
  }
61
52
  ComponentsTreeSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeSAComponent, deps: [{ token: i1.LayoutEditorMetadataManager }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
62
53
  ComponentsTreeSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeSAComponent, isStandalone: true, selector: "components-tree", viewQueries: [{ propertyName: "rootTreeItem", first: true, predicate: ComponentsTreeItemSAComponent, descendants: true }], ngImport: i0, template: "\n<div class=\"component-tree\" *ngIf=\"root\">\n <button type=\"button\" mat-icon-button aria-label=\"Collapse all\" (click)=\"rootTreeItem?.collapseAll()\">\n <span class=\"fa fa-minus-square\"></span>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Expand all\" (click)=\"rootTreeItem?.expandAll()\">\n <span class=\"fa fa-plus-square\"></span>\n </button>\n <components-tree-item [data]=\"root\"></components-tree-item>\n</div>\n", styles: [":host\n{\n display: block;\n background-color: #fafafa;\n border-right: 1px solid #ccc;\n}"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "component", type: ComponentsTreeItemSAComponent, selector: "components-tree-item", inputs: ["data", "open"], exportAs: ["componentsTreeItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
package/es2020/layout-editor/src/components/componentsTree/componentsTree.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"componentsTree.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/componentsTree/componentsTree.component.ts","../../../../../layout-editor/src/components/componentsTree/componentsTree.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAqB,SAAS,EAAC,MAAM,eAAe,CAAC;AAClH,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,2BAA2B,EAAuC,MAAM,gBAAgB,CAAC;AACjG,OAAO,EAAC,oCAAoC,EAAE,2BAA2B,EAAC,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAC,6BAA6B,EAAC,MAAM,QAAQ,CAAC;;;;;AAErD;;GAEG;AAkBH,MAAM,OAAO,yBAAyB;IAsBlC,iEAAiE;IACjE,YAAsB,QAAqC,EACrC,eAAkC;QADlC,aAAQ,GAAR,QAAQ,CAA6B;QACrC,oBAAe,GAAf,eAAe,CAAmB;QAtBxD,sEAAsE;QAEtE;;WAEG;QACO,uBAAkB,GAAiB,IAAI,YAAY,EAAE,CAAC;IAmBhE,CAAC;IAED,+FAA+F;IAE/F;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;YAElE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YAC/B,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;YAEpE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACnH,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAEnH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IACnC,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IAED,2FAA2F;IAE3F;;;;OAIG;IACO,QAAQ,CAAC,IAA0C;QAEzD,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;;sHAzEQ,yBAAyB;0GAAzB,yBAAyB,yHAmBvB,6BAA6B,gDCjD5C,oeAUA,4JDWQ,YAAY,kIACZ,eAAe,0VAEf,cAAc,+BAEd,6BAA6B;2FAIxB,yBAAyB;kBAjBrC,SAAS;+BAEI,iBAAiB,cAGf,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;wBACf,oCAAoC;wBACpC,cAAc;wBACd,2BAA2B;wBAC3B,6BAA6B;qBAChC,mBACgB,uBAAuB,CAAC,MAAM;kJAsBrC,YAAY;sBADrB,SAAS;uBAAC,6BAA6B","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy, ViewChild} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {Subscription} from 'rxjs';\n\nimport {LayoutEditorMetadataManager, LayoutEditorMetadataManagerComponent} from '../../services';\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../directives';\nimport {ComponentsTreeItemSAComponent} from './item';\n\n/**\n * Component displaying components tree\n */\n@Component(\n{\n selector: 'components-tree',\n templateUrl: 'componentsTree.component.html',\n styleUrls: ['componentsTree.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ComponentsTreeItemSAComponent,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Instance of root component in tree\n */\n protected root: LayoutEditorMetadataManagerComponent|undefined|null;\n\n /**\n * Root component tree item\n */\n @ViewChild(ComponentsTreeItemSAComponent)\n protected rootTreeItem: ComponentsTreeItemSAComponent|undefined|null;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() =>\n {\n this.root = this._manager.root;\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this.rootTreeItem?.expand(this._manager.selectedComponent);\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n\n this.root = this._manager.root;\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Indicates whether layout component has children\n * @param node layout component to check\n * @returns \n */\n protected hasChild(node: LayoutEditorMetadataManagerComponent): boolean\n {\n return !!node.children && node.children.length > 0;\n }\n}","\n<div class=\"component-tree\" *ngIf=\"root\">\n <button type=\"button\" mat-icon-button aria-label=\"Collapse all\" (click)=\"rootTreeItem?.collapseAll()\">\n <span class=\"fa fa-minus-square\"></span>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Expand all\" (click)=\"rootTreeItem?.expandAll()\">\n <span class=\"fa fa-plus-square\"></span>\n </button>\n <components-tree-item [data]=\"root\"></components-tree-item>\n</div>\n"]}
1
+ {"version":3,"file":"componentsTree.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/componentsTree/componentsTree.component.ts","../../../../../layout-editor/src/components/componentsTree/componentsTree.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAqB,SAAS,EAAC,MAAM,eAAe,CAAC;AAClH,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,2BAA2B,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAC,oCAAoC,EAAE,2BAA2B,EAAC,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAC,6BAA6B,EAAC,MAAM,QAAQ,CAAC;;;;;AAErD;;GAEG;AAkBH,MAAM,OAAO,yBAAyB;IAsBlC,iEAAiE;IACjE,YAAsB,QAAqC,EACrC,eAAkC;QADlC,aAAQ,GAAR,QAAQ,CAA6B;QACrC,oBAAe,GAAf,eAAe,CAAmB;QAtBxD,sEAAsE;QAEtE;;WAEG;QACO,uBAAkB,GAAiB,IAAI,YAAY,EAAE,CAAC;IAmBhE,CAAC;IAED,+FAA+F;IAE/F;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;YAElE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YACxC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;YAEpE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACnH,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAEnH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;;sHA7DQ,yBAAyB;0GAAzB,yBAAyB,yHAmBvB,6BAA6B,gDClD5C,oeAUA,4JDYQ,YAAY,kIACZ,eAAe,0VAEf,cAAc,+BAEd,6BAA6B;2FAIxB,yBAAyB;kBAjBrC,SAAS;+BAEI,iBAAiB,cAGf,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;wBACf,oCAAoC;wBACpC,cAAc;wBACd,2BAA2B;wBAC3B,6BAA6B;qBAChC,mBACgB,uBAAuB,CAAC,MAAM;kJAsBrC,YAAY;sBADrB,SAAS;uBAAC,6BAA6B","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy, ViewChild} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {Subscription} from 'rxjs';\n\nimport {LayoutEditorMetadataManager} from '../../services';\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../directives';\nimport {ComponentsTreeItemSAComponent} from './item';\n\n/**\n * Component displaying components tree\n */\n@Component(\n{\n selector: 'components-tree',\n templateUrl: 'componentsTree.component.html',\n styleUrls: ['componentsTree.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ComponentsTreeItemSAComponent,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Instance of root component in tree\n */\n protected root: LayoutComponentMetadata|undefined|null;\n\n /**\n * Root component tree item\n */\n @ViewChild(ComponentsTreeItemSAComponent)\n protected rootTreeItem: ComponentsTreeItemSAComponent|undefined|null;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() =>\n {\n this.root = this._manager.getMetadata();\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this.rootTreeItem?.expand(this._manager.selectedComponent);\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n\n this.root = this._manager.getMetadata();\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n}","\n<div class=\"component-tree\" *ngIf=\"root\">\n <button type=\"button\" mat-icon-button aria-label=\"Collapse all\" (click)=\"rootTreeItem?.collapseAll()\">\n <span class=\"fa fa-minus-square\"></span>\n </button>\n <button type=\"button\" mat-icon-button aria-label=\"Expand all\" (click)=\"rootTreeItem?.expandAll()\">\n <span class=\"fa fa-plus-square\"></span>\n </button>\n <components-tree-item [data]=\"root\"></components-tree-item>\n</div>\n"]}
package/es2020/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js CHANGED
@@ -1,10 +1,12 @@
1
+ import { __decorate, __metadata } from "tslib";
1
2
  import { Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, ViewChildren, QueryList } from '@angular/core';
2
3
  import { CommonModule } from '@angular/common';
3
4
  import { MatButtonModule } from '@angular/material/button';
4
5
  import { DragDropModule } from '@angular/cdk/drag-drop';
6
+ import { DebounceCall } from '@jscrpt/common';
5
7
  import { Subscription } from 'rxjs';
6
8
  import { ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective } from '../../../directives';
7
- import { LayoutEditorMetadataManager } from '../../../services';
9
+ import { LayoutComponentsIteratorService, LayoutEditorMetadataManager } from '../../../services';
8
10
  import * as i0 from "@angular/core";
9
11
  import * as i1 from "../../../services";
10
12
  import * as i2 from "@angular/common";
@@ -15,14 +17,23 @@ import * as i4 from "@angular/cdk/drag-drop";
15
17
  */
16
18
  export class ComponentsTreeItemSAComponent {
17
19
  //######################### constructor #########################
18
- constructor(_manager, _changeDetector) {
20
+ constructor(_manager, _changeDetector, iteratorSvc) {
19
21
  this._manager = _manager;
20
22
  this._changeDetector = _changeDetector;
23
+ this.iteratorSvc = iteratorSvc;
21
24
  //######################### protected fields #########################
22
25
  /**
23
26
  * Subscriptions created during initialization
24
27
  */
25
28
  this._initSubscriptions = new Subscription();
29
+ /**
30
+ * Node children
31
+ */
32
+ this.children = [];
33
+ /**
34
+ * Promise used for syncing async operations
35
+ */
36
+ this.syncPromise = Promise.resolve();
26
37
  /**
27
38
  * Indication whether node is open
28
39
  */
@@ -31,7 +42,7 @@ export class ComponentsTreeItemSAComponent {
31
42
  * Indicataion whether drag data can be dropped into node
32
43
  * @returns
33
44
  */
34
- this._canDrop = () => this.data?.component?.canDropFn() ?? false;
45
+ this._canDrop = () => false;
35
46
  }
36
47
  //######################### protected fields - template bindings #########################
37
48
  /**
@@ -40,7 +51,7 @@ export class ComponentsTreeItemSAComponent {
40
51
  * @returns
41
52
  */
42
53
  get hasChildren() {
43
- return !!this.data?.children && this.data?.children.length > 0;
54
+ return !!this.children && this.children.length > 0;
44
55
  }
45
56
  //######################### public methods - implementation of OnInit #########################
46
57
  /**
@@ -48,13 +59,14 @@ export class ComponentsTreeItemSAComponent {
48
59
  */
49
60
  ngOnInit() {
50
61
  this._initSubscriptions.add(this._manager.layoutChange.subscribe(() => {
51
- this._changeDetector.detectChanges();
62
+ this.initChildren();
52
63
  }));
53
64
  this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => {
54
65
  this._changeDetector.detectChanges();
55
66
  }));
56
67
  this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));
57
68
  this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));
69
+ this.initChildren();
58
70
  }
59
71
  //######################### public methods - implementation of OnDestroy #########################
60
72
  /**
@@ -80,7 +92,7 @@ export class ComponentsTreeItemSAComponent {
80
92
  this.open = true;
81
93
  return true;
82
94
  }
83
- if (this.data?.component?.options?.typeMetadata?.id === nodeId) {
95
+ if (this.data?.id === nodeId) {
84
96
  return true;
85
97
  }
86
98
  if (this.hasChildren) {
@@ -97,7 +109,7 @@ export class ComponentsTreeItemSAComponent {
97
109
  * Expands node and all its children
98
110
  */
99
111
  expandAll() {
100
- this._childrenNodes?.forEach(child => child.expandAll());
112
+ this._childrenNodes?.forEach((child) => child.expandAll());
101
113
  this.expand();
102
114
  this._changeDetector.detectChanges();
103
115
  }
@@ -111,10 +123,24 @@ export class ComponentsTreeItemSAComponent {
111
123
  * Collapse node and all its children
112
124
  */
113
125
  collapseAll() {
114
- this._childrenNodes?.forEach(child => child.collapseAll());
126
+ this._childrenNodes?.forEach((child) => child.collapseAll());
115
127
  this.collapse();
116
128
  this._changeDetector.detectChanges();
117
129
  }
130
+ //######################### protected methods #########################
131
+ async initChildren() {
132
+ await this.syncPromise;
133
+ let syncResolve;
134
+ this.syncPromise = new Promise(resolve => syncResolve = resolve);
135
+ this.children = [];
136
+ if (this.data) {
137
+ for await (const child of this.iteratorSvc.getChildrenIteratorFor(this.data)) {
138
+ this.children.push(child.metadata);
139
+ }
140
+ }
141
+ this._changeDetector.detectChanges();
142
+ syncResolve?.();
143
+ }
118
144
  //######################### protected methods - template bindings #########################
119
145
  /**
120
146
  * Highlights component
@@ -137,8 +163,14 @@ export class ComponentsTreeItemSAComponent {
137
163
  this._manager.cancelHighlightedComponent();
138
164
  }
139
165
  }
140
- ComponentsTreeItemSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeItemSAComponent, deps: [{ token: i1.LayoutEditorMetadataManager }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
141
- ComponentsTreeItemSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeItemSAComponent, isStandalone: true, selector: "components-tree-item", inputs: { data: "data", open: "open" }, host: { listeners: { "mouseleave": "_cancelHighlight($event)" } }, viewQueries: [{ propertyName: "_childrenNodes", predicate: ComponentsTreeItemSAComponent, descendants: true }], exportAs: ["componentsTreeItem"], ngImport: i0, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.component?.options?.typeMetadata?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.component?.options?.typeMetadata?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.component?.options?.typeMetadata?.id)\"\n (click)=\"_manager.selectComponent(data?.component?.options?.typeMetadata?.id)\">{{data?.component?.options?.typeMetadata?.displayName || data?.component?.options?.typeMetadata?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.component?.options?.typeMetadata?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of data?.children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child.component.options?.typeMetadata, parentId: child.parent?.component?.id}\"\n [cdkDragDisabled]=\"child.component.dragDisabled\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"], dependencies: [{ kind: "component", type: ComponentsTreeItemSAComponent, selector: "components-tree-item", inputs: ["data", "open"], exportAs: ["componentsTreeItem"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ConnectDropListsSADirective, selector: "[cdkDropList][connectDropLists]", inputs: ["connectDropListsPrefix"], exportAs: ["connectDropLists"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
166
+ ComponentsTreeItemSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeItemSAComponent, deps: [{ token: i1.LayoutEditorMetadataManager }, { token: i0.ChangeDetectorRef }, { token: i1.LayoutComponentsIteratorService }], target: i0.ɵɵFactoryTarget.Component });
167
+ ComponentsTreeItemSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeItemSAComponent, isStandalone: true, selector: "components-tree-item", inputs: { data: "data", open: "open" }, host: { listeners: { "mouseleave": "_cancelHighlight($event)" } }, viewQueries: [{ propertyName: "_childrenNodes", predicate: ComponentsTreeItemSAComponent, descendants: true }], exportAs: ["componentsTreeItem"], ngImport: i0, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.id)\"\n (click)=\"_manager.selectComponent(data?.id)\">{{data?.displayName || data?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child, parentId: data?.id}\"\n [cdkDragDisabled]=\"false\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"], dependencies: [{ kind: "component", type: ComponentsTreeItemSAComponent, selector: "components-tree-item", inputs: ["data", "open"], exportAs: ["componentsTreeItem"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ConnectDropListsSADirective, selector: "[cdkDropList][connectDropLists]", inputs: ["connectDropListsPrefix"], exportAs: ["connectDropLists"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
168
+ __decorate([
169
+ DebounceCall(10),
170
+ __metadata("design:type", Function),
171
+ __metadata("design:paramtypes", []),
172
+ __metadata("design:returntype", Promise)
173
+ ], ComponentsTreeItemSAComponent.prototype, "initChildren", null);
142
174
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsTreeItemSAComponent, decorators: [{
143
175
  type: Component,
144
176
  args: [{ selector: 'components-tree-item', exportAs: 'componentsTreeItem', standalone: true, imports: [
@@ -147,15 +179,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
147
179
  ComponentTreeNodeTemplateSADirective,
148
180
  DragDropModule,
149
181
  ConnectDropListsSADirective,
150
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.component?.options?.typeMetadata?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.component?.options?.typeMetadata?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.component?.options?.typeMetadata?.id)\"\n (click)=\"_manager.selectComponent(data?.component?.options?.typeMetadata?.id)\">{{data?.component?.options?.typeMetadata?.displayName || data?.component?.options?.typeMetadata?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.component?.options?.typeMetadata?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of data?.children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child.component.options?.typeMetadata, parentId: child.parent?.component?.id}\"\n [cdkDragDisabled]=\"child.component.dragDisabled\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"] }]
151
- }], ctorParameters: function () { return [{ type: i1.LayoutEditorMetadataManager }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _childrenNodes: [{
182
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.id)\"\n (click)=\"_manager.selectComponent(data?.id)\">{{data?.displayName || data?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child, parentId: data?.id}\"\n [cdkDragDisabled]=\"false\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>", styles: [":host\n{\n display: block;\n}\n\n.highlighted\n{\n text-shadow: 0 0 2px #666;\n}\n\n.selected\n{\n text-shadow: 0 0 2px #009cd7;\n}\n\n.node-tree,\n.nested-node-tree\n{\n min-height: 48px;\n}\n\n.node-children \n{\n padding-left: 40px;\n min-height: 10px;\n}"] }]
183
+ }], ctorParameters: function () { return [{ type: i1.LayoutEditorMetadataManager }, { type: i0.ChangeDetectorRef }, { type: i1.LayoutComponentsIteratorService }]; }, propDecorators: { _childrenNodes: [{
152
184
  type: ViewChildren,
153
185
  args: [ComponentsTreeItemSAComponent]
154
186
  }], data: [{
155
187
  type: Input
156
188
  }], open: [{
157
189
  type: Input
158
- }], _cancelHighlight: [{
190
+ }], initChildren: [], _cancelHighlight: [{
159
191
  type: HostListener,
160
192
  args: ['mouseleave', ['$event']]
161
193
  }] } });
package/es2020/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"componentsTreeItem.component.js","sourceRoot":"","sources":["../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.ts","../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,YAAY,EAAE,KAAK,EAAqB,YAAY,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACrJ,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,oCAAoC,EAAE,2BAA2B,EAAC,MAAM,qBAAqB,CAAC;AACtG,OAAO,EAAC,2BAA2B,EAAuC,MAAM,mBAAmB,CAAC;;;;;;AAEpG;;GAEG;AAkBH,MAAM,OAAO,6BAA6B;IAyCtC,iEAAiE;IACjE,YAAsB,QAAqC,EACrC,eAAkC;QADlC,aAAQ,GAAR,QAAQ,CAA6B;QACrC,oBAAe,GAAf,eAAe,CAAmB;QAzCxD,sEAAsE;QAEtE;;WAEG;QACO,uBAAkB,GAAiB,IAAI,YAAY,EAAE,CAAC;QA4BhE;;WAEG;QAEI,SAAI,GAAY,IAAI,CAAC;QA6H5B;;;WAGG;QACO,aAAQ,GAAkB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,KAAK,CAAC;IA3HrF,CAAC;IApCD,0FAA0F;IAE1F;;;;OAIG;IACH,IAAc,WAAW;QAErB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACnE,CAAC;IA4BD,+FAA+F;IAE/F;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;YAElE,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;YAEpE,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACnH,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IACvH,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IAED,oEAAoE;IAEpE;;OAEG;IACI,MAAM;QAET,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IACI,MAAM,CAAC,MAA8B;QAExC,IAAI,CAAC,MAAM,EACX;YACI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,OAAO,IAAI,CAAC;SACf;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,KAAK,MAAM,EAC9D;YACI,OAAO,IAAI,CAAC;SACf;QAED,IAAI,IAAI,CAAC,WAAW,EACpB;YACI,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE,EAClD;gBACI,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EACxB;oBACI,IAAI,CAAC,MAAM,EAAE,CAAC;oBACd,OAAO,IAAI,CAAC;iBACf;aACJ;SACJ;QAED,OAAO,KAAK,CAAC;IACjB,CAAC;IAED;;OAEG;IACI,SAAS;QAEZ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;IACzC,CAAC;IAED;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;IAED;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;IACzC,CAAC;IAED,2FAA2F;IAE3F;;;;OAIG;IACO,SAAS,CAAC,KAAiB,EAAE,EAAW;QAE9C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC;IAQD,8EAA8E;IAE9E;;;OAGG;IAEO,gBAAgB,CAAC,KAAiB;QAExC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,QAAQ,CAAC,0BAA0B,EAAE,CAAC;IAC/C,CAAC;;0HAvLQ,6BAA6B;8GAA7B,6BAA6B,8NAwBxB,6BAA6B,kFCtD/C,mqDA8BM,0UDAO,6BAA6B,4HARlC,YAAY,6VACZ,eAAe,0VAEf,cAAc,88BACd,2BAA2B;2FAItB,6BAA6B;kBAjBzC,SAAS;+BAEI,sBAAsB,YACtB,oBAAoB,cAGlB,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;wBACf,oCAAoC;wBACpC,cAAc;wBACd,2BAA2B;qBAC9B,mBACgB,uBAAuB,CAAC,MAAM;kJA2BrC,cAAc;sBADvB,YAAY;uBAAC,6BAA6B;gBASpC,IAAI;sBADV,KAAK;gBAOC,IAAI;sBADV,KAAK;gBA2II,gBAAgB;sBADzB,YAAY;uBAAC,YAAY,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnInit, OnDestroy, ViewChildren, QueryList} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {Func} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../../directives';\nimport {LayoutEditorMetadataManager, LayoutEditorMetadataManagerComponent} from '../../../services';\n\n/**\n * Component displaying components tree item\n */\n@Component(\n{\n selector: 'components-tree-item',\n exportAs: 'componentsTreeItem',\n templateUrl: 'componentsTreeItem.component.html',\n styleUrls: ['componentsTreeItem.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeItemSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Indicates whether layout component has children\n * @param node layout component to check\n * @returns \n */\n protected get hasChildren(): boolean\n {\n return !!this.data?.children && this.data?.children.length > 0;\n }\n\n /**\n * Child tree node components\n */\n @ViewChildren(ComponentsTreeItemSAComponent)\n protected _childrenNodes!: QueryList<ComponentsTreeItemSAComponent>;\n\n //######################### public properties - inputs and outputs #########################\n\n /**\n * Instance component tree item\n */\n @Input()\n public data: LayoutEditorMetadataManagerComponent|undefined|null;\n\n /**\n * Indication whether node is open\n */\n @Input()\n public open: boolean = true;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() =>\n {\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n }\n \n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n\n //######################### public methods #########################\n\n /**\n * Toggle children visibility\n */\n public toggle(): void\n {\n this.open = !this.open;\n }\n\n /**\n * Expands tree node\n * @param nodeId node identifier to expand\n * @returns indication whether node or its children were expanded\n */\n public expand(nodeId?: string|undefined|null): boolean\n {\n if (!nodeId)\n {\n this.open = true;\n return true;\n }\n\n if (this.data?.component?.options?.typeMetadata?.id === nodeId)\n {\n return true;\n }\n\n if (this.hasChildren)\n {\n for (const child of this._childrenNodes?.toArray())\n {\n if (child.expand(nodeId))\n {\n this.expand();\n return true;\n }\n }\n }\n\n return false;\n }\n \n /**\n * Expands node and all its children\n */\n public expandAll(): void\n {\n this._childrenNodes?.forEach(child => child.expandAll());\n this.expand();\n this._changeDetector.detectChanges();\n }\n\n /**\n * Collapse tree node\n */\n public collapse(): void\n {\n this.open = false;\n }\n\n /**\n * Collapse node and all its children\n */\n public collapseAll(): void\n {\n this._childrenNodes?.forEach(child => child.collapseAll());\n this.collapse();\n this._changeDetector.detectChanges();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Highlights component\n * @param event - Mouse event that occured\n * @param id - Id of component that is highlighted\n */\n protected highlight(event: MouseEvent, id?: string): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.highlightComponent(id);\n }\n\n /**\n * Indicataion whether drag data can be dropped into node\n * @returns \n */\n protected _canDrop: Func<boolean> = () => this.data?.component?.canDropFn() ?? false;\n\n //######################### protected methods - host #########################\n\n /**\n * Cancels highlight of component\n * @param event - Mouse event that occured\n */\n @HostListener('mouseleave', ['$event'])\n protected _cancelHighlight(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.cancelHighlightedComponent();\n }\n}","<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.component?.options?.typeMetadata?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.component?.options?.typeMetadata?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.component?.options?.typeMetadata?.id)\"\n (click)=\"_manager.selectComponent(data?.component?.options?.typeMetadata?.id)\">{{data?.component?.options?.typeMetadata?.displayName || data?.component?.options?.typeMetadata?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.component?.options?.typeMetadata?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of data?.children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child.component.options?.typeMetadata, parentId: child.parent?.component?.id}\"\n [cdkDragDisabled]=\"child.component.dragDisabled\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>"]}
1
+ {"version":3,"file":"componentsTreeItem.component.js","sourceRoot":"","sources":["../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.ts","../../../../../../layout-editor/src/components/componentsTree/item/componentsTreeItem.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnInit, OnDestroy, ViewChildren, QueryList} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatButtonModule} from '@angular/material/button';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {DebounceCall, Func, NoopAction} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {ComponentTreeNodeTemplateSADirective, ConnectDropListsSADirective} from '../../../directives';\nimport {LayoutComponentsIteratorService, LayoutEditorMetadataManager} from '../../../services';\n\n/**\n * Component displaying components tree item\n */\n@Component(\n{\n selector: 'components-tree-item',\n exportAs: 'componentsTreeItem',\n templateUrl: 'componentsTreeItem.component.html',\n styleUrls: ['componentsTreeItem.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n MatButtonModule,\n ComponentTreeNodeTemplateSADirective,\n DragDropModule,\n ConnectDropListsSADirective,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsTreeItemSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /**\n * Subscriptions created during initialization\n */\n protected _initSubscriptions: Subscription = new Subscription();\n\n /**\n * Node children\n */\n protected children: LayoutComponentMetadata[] = [];\n\n /**\n * Promise used for syncing async operations\n */\n protected syncPromise: Promise<void> = Promise.resolve();\n\n //######################### protected fields - template bindings #########################\n\n /**\n * Indicates whether layout component has children\n * @param node layout component to check\n * @returns \n */\n protected get hasChildren(): boolean\n {\n return !!this.children && this.children.length > 0;\n }\n\n /**\n * Child tree node components\n */\n @ViewChildren(ComponentsTreeItemSAComponent)\n protected _childrenNodes!: QueryList<ComponentsTreeItemSAComponent>;\n\n //######################### public properties - inputs and outputs #########################\n\n /**\n * Instance component tree item\n */\n @Input()\n public data: LayoutComponentMetadata|undefined|null;\n\n /**\n * Indication whether node is open\n */\n @Input()\n public open: boolean = true;\n\n //######################### constructor #########################\n constructor(protected _manager: LayoutEditorMetadataManager,\n protected _changeDetector: ChangeDetectorRef,\n protected iteratorSvc: LayoutComponentsIteratorService,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this._initSubscriptions.add(this._manager.layoutChange.subscribe(() => \n {\n this.initChildren();\n }));\n \n this._initSubscriptions.add(this._manager.selectedChange.subscribe(() => \n {\n this._changeDetector.detectChanges();\n }));\n \n this._initSubscriptions.add(this._manager.highlightedChange.subscribe(() => this._changeDetector.detectChanges()));\n this._initSubscriptions.add(this._manager.displayNameChange.subscribe(() => this._changeDetector.detectChanges()));\n\n this.initChildren();\n }\n \n //######################### public methods - implementation of OnDestroy #########################\n \n /**\n * Called when component is destroyed\n */\n public ngOnDestroy(): void\n {\n this._initSubscriptions.unsubscribe();\n }\n\n //######################### public methods #########################\n\n /**\n * Toggle children visibility\n */\n public toggle(): void\n {\n this.open = !this.open;\n }\n\n /**\n * Expands tree node\n * @param nodeId node identifier to expand\n * @returns indication whether node or its children were expanded\n */\n public expand(nodeId?: string|undefined|null): boolean\n {\n if (!nodeId)\n {\n this.open = true;\n return true;\n }\n\n if (this.data?.id === nodeId)\n {\n return true;\n }\n\n if (this.hasChildren)\n {\n for (const child of this._childrenNodes?.toArray())\n {\n if (child.expand(nodeId))\n {\n this.expand();\n return true;\n }\n }\n }\n\n return false;\n }\n \n /**\n * Expands node and all its children\n */\n public expandAll(): void\n {\n this._childrenNodes?.forEach((child: ComponentsTreeItemSAComponent) => child.expandAll());\n this.expand();\n this._changeDetector.detectChanges();\n }\n\n /**\n * Collapse tree node\n */\n public collapse(): void\n {\n this.open = false;\n }\n\n /**\n * Collapse node and all its children\n */\n public collapseAll(): void\n {\n this._childrenNodes?.forEach((child: ComponentsTreeItemSAComponent) => child.collapseAll());\n this.collapse();\n this._changeDetector.detectChanges();\n }\n\n //######################### protected methods #########################\n\n @DebounceCall(10)\n protected async initChildren(): Promise<void>\n {\n await this.syncPromise;\n let syncResolve: NoopAction|undefined;\n this.syncPromise = new Promise(resolve => syncResolve = resolve);\n\n this.children = [];\n\n if (this.data)\n {\n for await(const child of this.iteratorSvc.getChildrenIteratorFor(this.data))\n {\n this.children.push(child.metadata);\n }\n }\n \n this._changeDetector.detectChanges();\n\n syncResolve?.();\n }\n\n //######################### protected methods - template bindings #########################\n\n /**\n * Highlights component\n * @param event - Mouse event that occured\n * @param id - Id of component that is highlighted\n */\n protected highlight(event: MouseEvent, id?: string): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.highlightComponent(id);\n }\n\n /**\n * Indicataion whether drag data can be dropped into node\n * @returns \n */\n protected _canDrop: Func<boolean> = () => false;\n\n //######################### protected methods - host #########################\n\n /**\n * Cancels highlight of component\n * @param event - Mouse event that occured\n */\n @HostListener('mouseleave', ['$event'])\n protected _cancelHighlight(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this._manager.cancelHighlightedComponent();\n }\n}","<div class=\"flex align-items-center\" [ngClass]=\"hasChildren ? 'nested-node-tree' : 'node-tree'\">\n <button type=\"button\" mat-icon-button [disabled]=\"!hasChildren\" (click)=\"toggle()\"\n [attr.aria-label]=\"'Toggle'\">\n <span class=\"fa\" *ngIf=\"hasChildren\" [ngClass]=\"open ? 'fa-chevron-down' : 'fa-chevron-right'\"></span>\n </button>\n <div \n [class.selected]=\"data?.id === _manager.selectedComponent\"\n [class.highlighted]=\"data?.id === _manager.highlightedComponent\"\n (mouseover)=\"highlight($event, data?.id)\"\n (click)=\"_manager.selectComponent(data?.id)\">{{data?.displayName || data?.id}}</div>\n</div>\n\n<div class=\"node-children\" \n cdkDropList\n \n [cdkDropListEnterPredicate]=\"_canDrop\"\n [id]=\"'component-tree-' + data?.id\"\n *ngIf=\"hasChildren || _canDrop()\"\n [class.hidden]=\"!open\"\n connectDropLists\n connectDropListsPrefix=\"component-tree-\">\n <!-- (cdkDropListDropped)=\"data?.component?.addDescendant($event)\" -->\n <div \n *ngFor=\"let child of children\"\n cdkDrag \n [cdkDragData]=\"{metadata: child, parentId: data?.id}\"\n [cdkDragDisabled]=\"false\"\n class=\"node-child\">\n <components-tree-item [data]=\"child\"></components-tree-item>\n </div>\n</div>"]}
package/layout-editor/src/components/componentsTree/componentsTree.component.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
2
+ import { LayoutComponentMetadata } from '@anglr/dynamic/layout';
2
3
  import { Subscription } from 'rxjs';
3
- import { LayoutEditorMetadataManager, LayoutEditorMetadataManagerComponent } from '../../services';
4
+ import { LayoutEditorMetadataManager } from '../../services';
4
5
  import { ComponentsTreeItemSAComponent } from './item';
5
6
  import * as i0 from "@angular/core";
6
7
  /**
@@ -16,7 +17,7 @@ export declare class ComponentsTreeSAComponent implements OnInit, OnDestroy {
16
17
  /**
17
18
  * Instance of root component in tree
18
19
  */
19
- protected root: LayoutEditorMetadataManagerComponent | undefined | null;
20
+ protected root: LayoutComponentMetadata | undefined | null;
20
21
  /**
21
22
  * Root component tree item
22
23
  */
@@ -30,12 +31,6 @@ export declare class ComponentsTreeSAComponent implements OnInit, OnDestroy {
30
31
  * Called when component is destroyed
31
32
  */
32
33
  ngOnDestroy(): void;
33
- /**
34
- * Indicates whether layout component has children
35
- * @param node layout component to check
36
- * @returns
37
- */
38
- protected hasChild(node: LayoutEditorMetadataManagerComponent): boolean;
39
34
  static ɵfac: i0.ɵɵFactoryDeclaration<ComponentsTreeSAComponent, never>;
40
35
  static ɵcmp: i0.ɵɵComponentDeclaration<ComponentsTreeSAComponent, "components-tree", never, {}, {}, never, never, true>;
41
36
  }
package/layout-editor/src/components/componentsTree/componentsTree.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"componentsTree.component.d.ts","sourceRoot":"","sources":["componentsTree.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,EAAE,SAAS,EAAY,MAAM,eAAe,CAAC;AAIlH,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,2BAA2B,EAAE,oCAAoC,EAAC,MAAM,gBAAgB,CAAC;AAEjG,OAAO,EAAC,6BAA6B,EAAC,MAAM,QAAQ,CAAC;;AAErD;;GAEG;AACH,qBAiBa,yBAA0B,YAAW,MAAM,EAAE,SAAS;IAuBnD,SAAS,CAAC,QAAQ,EAAE,2BAA2B;IAC/C,SAAS,CAAC,eAAe,EAAE,iBAAiB;IApBxD;;OAEG;IACH,SAAS,CAAC,kBAAkB,EAAE,YAAY,CAAsB;IAIhE;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,oCAAoC,GAAC,SAAS,GAAC,IAAI,CAAC;IAEpE;;OAEG;IAEH,SAAS,CAAC,YAAY,EAAE,6BAA6B,GAAC,SAAS,GAAC,IAAI,CAAC;gBAG/C,QAAQ,EAAE,2BAA2B,EACrC,eAAe,EAAE,iBAAiB;IAMxD;;OAEG;IACI,QAAQ,IAAI,IAAI;IAsBvB;;OAEG;IACI,WAAW,IAAI,IAAI;IAO1B;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,oCAAoC,GAAG,OAAO;yCAtE9D,yBAAyB;2CAAzB,yBAAyB;CA0ErC"}
1
+ {"version":3,"file":"componentsTree.component.d.ts","sourceRoot":"","sources":["componentsTree.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,EAAE,SAAS,EAAY,MAAM,eAAe,CAAC;AAIlH,OAAO,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,2BAA2B,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAC,6BAA6B,EAAC,MAAM,QAAQ,CAAC;;AAErD;;GAEG;AACH,qBAiBa,yBAA0B,YAAW,MAAM,EAAE,SAAS;IAuBnD,SAAS,CAAC,QAAQ,EAAE,2BAA2B;IAC/C,SAAS,CAAC,eAAe,EAAE,iBAAiB;IApBxD;;OAEG;IACH,SAAS,CAAC,kBAAkB,EAAE,YAAY,CAAsB;IAIhE;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,uBAAuB,GAAC,SAAS,GAAC,IAAI,CAAC;IAEvD;;OAEG;IAEH,SAAS,CAAC,YAAY,EAAE,6BAA6B,GAAC,SAAS,GAAC,IAAI,CAAC;gBAG/C,QAAQ,EAAE,2BAA2B,EACrC,eAAe,EAAE,iBAAiB;IAMxD;;OAEG;IACI,QAAQ,IAAI,IAAI;IAsBvB;;OAEG;IACI,WAAW,IAAI,IAAI;yCA1DjB,yBAAyB;2CAAzB,yBAAyB;CA8DrC"}
package/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { ChangeDetectorRef, OnInit, OnDestroy, QueryList } from '@angular/core';
2
+ import { LayoutComponentMetadata } from '@anglr/dynamic/layout';
2
3
  import { Func } from '@jscrpt/common';
3
4
  import { Subscription } from 'rxjs';
4
- import { LayoutEditorMetadataManager, LayoutEditorMetadataManagerComponent } from '../../../services';
5
+ import { LayoutComponentsIteratorService, LayoutEditorMetadataManager } from '../../../services';
5
6
  import * as i0 from "@angular/core";
6
7
  /**
7
8
  * Component displaying components tree item
@@ -9,10 +10,19 @@ import * as i0 from "@angular/core";
9
10
  export declare class ComponentsTreeItemSAComponent implements OnInit, OnDestroy {
10
11
  protected _manager: LayoutEditorMetadataManager;
11
12
  protected _changeDetector: ChangeDetectorRef;
13
+ protected iteratorSvc: LayoutComponentsIteratorService;
12
14
  /**
13
15
  * Subscriptions created during initialization
14
16
  */
15
17
  protected _initSubscriptions: Subscription;
18
+ /**
19
+ * Node children
20
+ */
21
+ protected children: LayoutComponentMetadata[];
22
+ /**
23
+ * Promise used for syncing async operations
24
+ */
25
+ protected syncPromise: Promise<void>;
16
26
  /**
17
27
  * Indicates whether layout component has children
18
28
  * @param node layout component to check
@@ -26,12 +36,12 @@ export declare class ComponentsTreeItemSAComponent implements OnInit, OnDestroy
26
36
  /**
27
37
  * Instance component tree item
28
38
  */
29
- data: LayoutEditorMetadataManagerComponent | undefined | null;
39
+ data: LayoutComponentMetadata | undefined | null;
30
40
  /**
31
41
  * Indication whether node is open
32
42
  */
33
43
  open: boolean;
34
- constructor(_manager: LayoutEditorMetadataManager, _changeDetector: ChangeDetectorRef);
44
+ constructor(_manager: LayoutEditorMetadataManager, _changeDetector: ChangeDetectorRef, iteratorSvc: LayoutComponentsIteratorService);
35
45
  /**
36
46
  * Initialize component
37
47
  */
@@ -62,6 +72,7 @@ export declare class ComponentsTreeItemSAComponent implements OnInit, OnDestroy
62
72
  * Collapse node and all its children
63
73
  */
64
74
  collapseAll(): void;
75
+ protected initChildren(): Promise<void>;
65
76
  /**
66
77
  * Highlights component
67
78
  * @param event - Mouse event that occured
package/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"componentsTreeItem.component.d.ts","sourceRoot":"","sources":["componentsTreeItem.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,iBAAiB,EAAuB,MAAM,EAAE,SAAS,EAAgB,SAAS,EAAC,MAAM,eAAe,CAAC;AAIrJ,OAAO,EAAC,IAAI,EAAC,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAGlC,OAAO,EAAC,2BAA2B,EAAE,oCAAoC,EAAC,MAAM,mBAAmB,CAAC;;AAEpG;;GAEG;AACH,qBAiBa,6BAA8B,YAAW,MAAM,EAAE,SAAS;IA0CvD,SAAS,CAAC,QAAQ,EAAE,2BAA2B;IAC/C,SAAS,CAAC,eAAe,EAAE,iBAAiB;IAvCxD;;OAEG;IACH,SAAS,CAAC,kBAAkB,EAAE,YAAY,CAAsB;IAIhE;;;;OAIG;IACH,SAAS,KAAK,WAAW,IAAI,OAAO,CAGnC;IAED;;OAEG;IAEH,SAAS,CAAC,cAAc,EAAG,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAIpE;;OAEG;IAEI,IAAI,EAAE,oCAAoC,GAAC,SAAS,GAAC,IAAI,CAAC;IAEjE;;OAEG;IAEI,IAAI,EAAE,OAAO,CAAQ;gBAGN,QAAQ,EAAE,2BAA2B,EACrC,eAAe,EAAE,iBAAiB;IAMxD;;OAEG;IACI,QAAQ,IAAI,IAAI;IAkBvB;;OAEG;IACI,WAAW,IAAI,IAAI;IAO1B;;OAEG;IACI,MAAM,IAAI,IAAI;IAKrB;;;;OAIG;IACI,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAC,SAAS,GAAC,IAAI,GAAG,OAAO;IA4BtD;;OAEG;IACI,SAAS,IAAI,IAAI;IAOxB;;OAEG;IACI,QAAQ,IAAI,IAAI;IAKvB;;OAEG;IACI,WAAW,IAAI,IAAI;IAS1B;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAQzD;;;OAGG;IACH,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAoD;IAIrF;;;OAGG;IAEH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCAjL1C,6BAA6B;2CAA7B,6BAA6B;CAwLzC"}
1
+ {"version":3,"file":"componentsTreeItem.component.d.ts","sourceRoot":"","sources":["componentsTreeItem.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,iBAAiB,EAAuB,MAAM,EAAE,SAAS,EAAgB,SAAS,EAAC,MAAM,eAAe,CAAC;AAIrJ,OAAO,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAe,IAAI,EAAa,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAGlC,OAAO,EAAC,+BAA+B,EAAE,2BAA2B,EAAC,MAAM,mBAAmB,CAAC;;AAE/F;;GAEG;AACH,qBAiBa,6BAA8B,YAAW,MAAM,EAAE,SAAS;IAoDvD,SAAS,CAAC,QAAQ,EAAE,2BAA2B;IAC/C,SAAS,CAAC,eAAe,EAAE,iBAAiB;IAC5C,SAAS,CAAC,WAAW,EAAE,+BAA+B;IAlDlE;;OAEG;IACH,SAAS,CAAC,kBAAkB,EAAE,YAAY,CAAsB;IAEhE;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,uBAAuB,EAAE,CAAM;IAEnD;;OAEG;IACH,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAqB;IAIzD;;;;OAIG;IACH,SAAS,KAAK,WAAW,IAAI,OAAO,CAGnC;IAED;;OAEG;IAEH,SAAS,CAAC,cAAc,EAAG,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAIpE;;OAEG;IAEI,IAAI,EAAE,uBAAuB,GAAC,SAAS,GAAC,IAAI,CAAC;IAEpD;;OAEG;IAEI,IAAI,EAAE,OAAO,CAAQ;gBAGN,QAAQ,EAAE,2BAA2B,EACrC,eAAe,EAAE,iBAAiB,EAClC,WAAW,EAAE,+BAA+B;IAMlE;;OAEG;IACI,QAAQ,IAAI,IAAI;IAoBvB;;OAEG;IACI,WAAW,IAAI,IAAI;IAO1B;;OAEG;IACI,MAAM,IAAI,IAAI;IAKrB;;;;OAIG;IACI,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAC,SAAS,GAAC,IAAI,GAAG,OAAO;IA4BtD;;OAEG;IACI,SAAS,IAAI,IAAI;IAOxB;;OAEG;IACI,QAAQ,IAAI,IAAI;IAKvB;;OAEG;IACI,WAAW,IAAI,IAAI;cAUV,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAuB7C;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAQzD;;;OAGG;IACH,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAe;IAIhD;;;OAGG;IAEH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCAtN1C,6BAA6B;2CAA7B,6BAA6B;CA6NzC"}
package/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.html CHANGED
@@ -4,27 +4,27 @@
4
4
  <span class="fa" *ngIf="hasChildren" [ngClass]="open ? 'fa-chevron-down' : 'fa-chevron-right'"></span>
5
5
  </button>
6
6
  <div
7
- [class.selected]="data?.component?.options?.typeMetadata?.id === _manager.selectedComponent"
8
- [class.highlighted]="data?.component?.options?.typeMetadata?.id === _manager.highlightedComponent"
9
- (mouseover)="highlight($event, data?.component?.options?.typeMetadata?.id)"
10
- (click)="_manager.selectComponent(data?.component?.options?.typeMetadata?.id)">{{data?.component?.options?.typeMetadata?.displayName || data?.component?.options?.typeMetadata?.id}}</div>
7
+ [class.selected]="data?.id === _manager.selectedComponent"
8
+ [class.highlighted]="data?.id === _manager.highlightedComponent"
9
+ (mouseover)="highlight($event, data?.id)"
10
+ (click)="_manager.selectComponent(data?.id)">{{data?.displayName || data?.id}}</div>
11
11
  </div>
12
12
 
13
13
  <div class="node-children"
14
14
  cdkDropList
15
15
 
16
16
  [cdkDropListEnterPredicate]="_canDrop"
17
- [id]="'component-tree-' + data?.component?.options?.typeMetadata?.id"
17
+ [id]="'component-tree-' + data?.id"
18
18
  *ngIf="hasChildren || _canDrop()"
19
19
  [class.hidden]="!open"
20
20
  connectDropLists
21
21
  connectDropListsPrefix="component-tree-">
22
22
  <!-- (cdkDropListDropped)="data?.component?.addDescendant($event)" -->
23
23
  <div
24
- *ngFor="let child of data?.children"
24
+ *ngFor="let child of children"
25
25
  cdkDrag
26
- [cdkDragData]="{metadata: child.component.options?.typeMetadata, parentId: child.parent?.component?.id}"
27
- [cdkDragDisabled]="child.component.dragDisabled"
26
+ [cdkDragData]="{metadata: child, parentId: data?.id}"
27
+ [cdkDragDisabled]="false"
28
28
  class="node-child">
29
29
  <components-tree-item [data]="child"></components-tree-item>
30
30
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anglr/dynamic",
3
- "version": "1.0.0-beta.20220906124307",
3
+ "version": "1.0.0-beta.20220906174129",
4
4
  "description": "Contains code for generating dynamic content from metadata",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -115,7 +115,7 @@
115
115
  "@anglr/rest": "12.0.0",
116
116
  "@anglr/select": "11.0.2",
117
117
  "@anglr/translate-extensions": "9.0.0",
118
- "@jscrpt/common": "^2.3.0",
118
+ "@jscrpt/common": "3.0.0-beta.20220906141616",
119
119
  "@ngx-translate/core": "14.0.0",
120
120
  "angular2-hotkeys": "13.1.0",
121
121
  "@ng-dnd/core": "2.0.2",
package/version.bak CHANGED
@@ -1 +1 @@
1
- 1.0.0-beta.20220906124307
1
+ 1.0.0-beta.20220906174129