npm - @anglr/dynamic - Versions diffs - 1.0.0-beta.20220914181313 → 1.0.0-beta.20220916070320 - Mend

@anglr/dynamic 1.0.0-beta.20220914181313 → 1.0.0-beta.20220916070320

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 (179) hide show

package/es2015/layout-editor/src/components/componentsPalette/componentsPalette.component.js CHANGED Viewed

@@ -104,14 +104,14 @@ export class ComponentsPaletteSAComponent {
     }
 }
 ComponentsPaletteSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsPaletteSAComponent, deps: [{ token: LAYOUT_MODULE_TYPES_LOADER }, { token: i0.ChangeDetectorRef }, { token: i1.PackageManager }, { token: i2.LayoutEditorMetadataExtractor }, { token: REFRESH_PALETTE_OBSERVABLES, optional: true }, { token: LOGGER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ComponentsPaletteSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsPaletteSAComponent, isStandalone: true, selector: "components-palette", ngImport: i0, template: "<div class=\"dynamic-flex-column\">\n    <ng-container *ngFor=\"let groupKeyValue of groupedItems | keyvalue\">\n        <div class=\"text-spread text-small-caps margin-left-extra-small margin-horizontal-small bold\">{{groupKeyValue.key}}&nbsp;</div>\n\n        <div *ngFor=\"let item of groupKeyValue.value\"\n             class=\"palette-droplist\">\n            <div class=\"editor-component mat-elevation-z2\"\n                 [dndCorePaletteItem]=\"item | toLayoutDragData\"\n                 (itemDrop)=\"refreshPipe = !refreshPipe\">\n                <!-- <layout-editor-drag-preview class=\"mat-elevation-z4\" *cdkDragPreview [editorMetadata]=\"item.metadata\" [layoutMetadata]=\"(item | toLayoutDragData: newCompnentId).metadata\"></layout-editor-drag-preview> -->\n                <div class=\"editor-component-name\">{{item.metadata.metaInfo?.name ?? item.itemSource.name}}</div>\n                <div class=\"editor-component-description\" *ngIf=\"item.metadata.metaInfo?.description\">{{item.metadata.metaInfo?.description}}</div>\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [".editor-component\n{\n    margin: 2px 10px;\n    padding: 4px 8px;\n\n    border-radius: 6px;\n    border: 1px solid #F0F0F0;\n    background-color: #FAFAFA;\n}\n\n.editor-component-name\n{\n    font-weight: 500;\n}\n\n.editor-component-description\n{\n    margin-left: 4px;\n    margin-top: 2px;\n    font-size: .8em;\n}\n\n.palette-droplist layout-editor-drag-placeholder\n{\n    display: none;\n}"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "directive", type: i4.DndCorePaletteItemDirective, selector: "[dndCorePaletteItem]", inputs: ["dndCorePaletteItem"], outputs: ["itemDrop"] }, { kind: "pipe", type: ToLayoutDragDataSAPipe, name: "toLayoutDragData" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ComponentsPaletteSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsPaletteSAComponent, isStandalone: true, selector: "components-palette", ngImport: i0, template: "<div class=\"dynamic-flex-column\">\n    <ng-container *ngFor=\"let groupKeyValue of groupedItems | keyvalue\">\n        <div class=\"dynamic-text-spread dynamic-text-small-caps margin-left-extra-small margin-horizontal-small dynamic-bold\">{{groupKeyValue.key}}&nbsp;</div>\n\n        <div *ngFor=\"let item of groupKeyValue.value\"\n             class=\"palette-droplist\">\n            <div class=\"editor-component mat-elevation-z2\"\n                 [dndCorePaletteItem]=\"item | toLayoutDragData\"\n                 (itemDrop)=\"refreshPipe = !refreshPipe\">\n                <div class=\"editor-component-name\">{{item.metadata.metaInfo?.name ?? item.itemSource.name}}</div>\n                <div class=\"editor-component-description\" *ngIf=\"item.metadata.metaInfo?.description\">{{item.metadata.metaInfo?.description}}</div>\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [".editor-component\n{\n    margin: 2px 10px;\n    padding: 4px 8px;\n\n    border-radius: 6px;\n    border: 1px solid #F0F0F0;\n    background-color: #FAFAFA;\n}\n\n.editor-component-name\n{\n    font-weight: 500;\n}\n\n.editor-component-description\n{\n    margin-left: 4px;\n    margin-top: 2px;\n    font-size: .8em;\n}\n\n.palette-droplist layout-editor-drag-placeholder\n{\n    display: none;\n}"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "directive", type: i4.DndCorePaletteItemDirective, selector: "[dndCorePaletteItem]", inputs: ["dndCorePaletteItem"], outputs: ["itemDrop"] }, { kind: "pipe", type: ToLayoutDragDataSAPipe, name: "toLayoutDragData" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ComponentsPaletteSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'components-palette', standalone: true, imports: [
                         CommonModule,
                         LayoutDndCoreModule,
                         ToLayoutDragDataSAPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-flex-column\">\n    <ng-container *ngFor=\"let groupKeyValue of groupedItems | keyvalue\">\n        <div class=\"text-spread text-small-caps margin-left-extra-small margin-horizontal-small bold\">{{groupKeyValue.key}}&nbsp;</div>\n\n        <div *ngFor=\"let item of groupKeyValue.value\"\n             class=\"palette-droplist\">\n            <div class=\"editor-component mat-elevation-z2\"\n                 [dndCorePaletteItem]=\"item | toLayoutDragData\"\n                 (itemDrop)=\"refreshPipe = !refreshPipe\">\n                <!-- <layout-editor-drag-preview class=\"mat-elevation-z4\" *cdkDragPreview [editorMetadata]=\"item.metadata\" [layoutMetadata]=\"(item | toLayoutDragData: newCompnentId).metadata\"></layout-editor-drag-preview> -->\n                <div class=\"editor-component-name\">{{item.metadata.metaInfo?.name ?? item.itemSource.name}}</div>\n                <div class=\"editor-component-description\" *ngIf=\"item.metadata.metaInfo?.description\">{{item.metadata.metaInfo?.description}}</div>\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [".editor-component\n{\n    margin: 2px 10px;\n    padding: 4px 8px;\n\n    border-radius: 6px;\n    border: 1px solid #F0F0F0;\n    background-color: #FAFAFA;\n}\n\n.editor-component-name\n{\n    font-weight: 500;\n}\n\n.editor-component-description\n{\n    margin-left: 4px;\n    margin-top: 2px;\n    font-size: .8em;\n}\n\n.palette-droplist layout-editor-drag-placeholder\n{\n    display: none;\n}"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-flex-column\">\n    <ng-container *ngFor=\"let groupKeyValue of groupedItems | keyvalue\">\n        <div class=\"dynamic-text-spread dynamic-text-small-caps margin-left-extra-small margin-horizontal-small dynamic-bold\">{{groupKeyValue.key}}&nbsp;</div>\n\n        <div *ngFor=\"let item of groupKeyValue.value\"\n             class=\"palette-droplist\">\n            <div class=\"editor-component mat-elevation-z2\"\n                 [dndCorePaletteItem]=\"item | toLayoutDragData\"\n                 (itemDrop)=\"refreshPipe = !refreshPipe\">\n                <div class=\"editor-component-name\">{{item.metadata.metaInfo?.name ?? item.itemSource.name}}</div>\n                <div class=\"editor-component-description\" *ngIf=\"item.metadata.metaInfo?.description\">{{item.metadata.metaInfo?.description}}</div>\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [".editor-component\n{\n    margin: 2px 10px;\n    padding: 4px 8px;\n\n    border-radius: 6px;\n    border: 1px solid #F0F0F0;\n    background-color: #FAFAFA;\n}\n\n.editor-component-name\n{\n    font-weight: 500;\n}\n\n.editor-component-description\n{\n    margin-left: 4px;\n    margin-top: 2px;\n    font-size: .8em;\n}\n\n.palette-droplist layout-editor-drag-placeholder\n{\n    display: none;\n}"] }]
         }], ctorParameters: function () { return [{ type: i1.DynamicItemLoader, decorators: [{
                     type: Inject,
                     args: [LAYOUT_MODULE_TYPES_LOADER]

package/es2015/layout-editor/src/components/componentsPalette/componentsPalette.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"componentsPalette.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/componentsPalette/componentsPalette.component.ts","../../../../../layout-editor/src/components/componentsPalette/componentsPalette.component.html"],"names":[],"mappings":"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~~ulCAeM~~,~~wcDSE~~,YAAY,0TACZ,mBAAmB,gLACnB,sBAAsB;2FAIjB,4BAA4B;kBAdxC,SAAS;+BAEI,oBAAoB,cAGlB,IAAI,WAEhB;wBACI,YAAY;wBACZ,mBAAmB;wBACnB,sBAAsB;qBACzB,mBACgB,uBAAuB,CAAC,MAAM;;0BA6BlC,MAAM;2BAAC,0BAA0B;;0BAIjC,MAAM;2BAAC,2BAA2B;;0BAAG,QAAQ;;0BAC7C,MAAM;2BAAC,MAAM;;0BAAG,QAAQ","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, Inject, Optional, OnDestroy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {DynamicItemLoader, DynamicItemSource, PackageManager} from '@anglr/dynamic';\nimport {Logger, LOGGER} from '@anglr/common';\nimport {Dictionary} from '@jscrpt/common';\nimport {Observable, Subscription} from 'rxjs';\n\nimport {LayoutEditorMetadataExtractor} from '../../services';\nimport {ComponentsPaletteItem, LayoutModuleTypes} from './componentsPalette.interface';\nimport {ToLayoutDragDataSAPipe} from '../../pipes';\nimport {LAYOUT_MODULE_TYPES_LOADER, REFRESH_PALETTE_OBSERVABLES} from '../../misc/tokens';\nimport {LayoutDndCoreModule} from '../../modules';\n\n/*\n Component displaying available components palette\n /\n@Component(\n{\n selector: 'components-palette',\n templateUrl: 'componentsPalette.component.html',\n styleUrls: ['componentsPalette.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n LayoutDndCoreModule,\n ToLayoutDragDataSAPipe,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsPaletteSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /\n Subscriptions created during initialization\n /\n protected initSubscriptions: Subscription = new Subscription();\n\n /\n Array of all available items in palette\n /\n protected allItems: ComponentsPaletteItem[] = [];\n\n //######################### protected properties - template bindings #########################\n\n /\n Available items grouped by group name\n /\n protected groupedItems: Dictionary<(ComponentsPaletteItem & {temp?: boolean})[]> = {};\n\n /\n Used for refreshing pipe value\n /\n protected refreshPipe: boolean = false;\n\n //######################### constructor #########################\n constructor(@Inject(LAYOUT_MODULE_TYPES_LOADER) protected moduleTypesLoader: DynamicItemLoader<LayoutModuleTypes>,\n protected changeDetector: ChangeDetectorRef,\n protected packageManager: PackageManager,\n protected metadataExtractor: LayoutEditorMetadataExtractor,\n @Inject(REFRESH_PALETTE_OBSERVABLES) @Optional() protected _refreshObservables?: Observable<void>[],\n @Inject(LOGGER) @Optional() protected logger?: Logger,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n\n /\n Initialize component\n /\n public async ngOnInit(): Promise<void>\n {\n this.initSubscriptions.add(this.packageManager.usedPackagesChange.subscribe(() => this.initItems()));\n\n if(this._refreshObservables && Array.isArray(this._refreshObservables))\n {\n for(const obs of this._refreshObservables)\n {\n this.initSubscriptions.add(obs.subscribe(() => this.initItems()));\n }\n }\n\n await this.initItems();\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 #########################\n\n /\n Initialize items in palette\n /\n protected async initItems(): Promise<void>\n {\n this.groupedItems = {};\n this.allItems = [];\n\n for (const packageName of this.packageManager.usedPackages)\n {\n const types = (await this.moduleTypesLoader.loadItem({package: packageName, name: 'types'}))?.data ?? [];\n\n for(const type of types)\n {\n const itemSource: DynamicItemSource = {package: packageName, name: type};\n const metadata = await this.metadataExtractor.extractMetadata(itemSource);\n\n if(!metadata)\n {\n this.logger?.warn('ComponentsPaletteSAComponent: Failed to obtain layout editor metadata {@source}', itemSource);\n }\n else\n {\n this.allItems.push(\n {\n itemSource,\n metadata\n });\n }\n }\n }\n\n this.groupedItems[''] = [];\n\n //group items\n for(const item of this.allItems)\n {\n const group = item.metadata.metaInfo?.group ?? '';\n this.groupedItems[group] ??= [];\n this.groupedItems[group].push(item);\n }\n\n this.changeDetector.detectChanges();\n }\n}","<div class=\"dynamic-flex-column\">\n <ng-container ngFor=\"let groupKeyValue of groupedItems \| keyvalue\">\n <div class=\"text-spread text-small-caps margin-left-extra-small margin-horizontal-small bold\">{{groupKeyValue.key}} </div>\n\n <div ngFor=\"let item of groupKeyValue.value\"\n class=\"palette-droplist\">\n <div class=\"editor-component mat-elevation-z2\"\n [dndCorePaletteItem]=\"item \| toLayoutDragData\"\n (itemDrop)=\"refreshPipe = !refreshPipe\">\n ~~<!--~~ <layout-editor-drag-preview class=\"mat-elevation-z4\" cdkDragPreview [editorMetadata]=\"item.metadata\" [layoutMetadata]=\"(item \| toLayoutDragData: newCompnentId).metadata\"></layout-editor-drag-preview> -->\n <div class=\"editor-component-name\">{{item.metadata.metaInfo?.name ?? item.itemSource.name}}</div>\n <div class=\"editor-component-description\" *ngIf=\"item.metadata.metaInfo?.description\">{{item.metadata.metaInfo?.description}}</div>\n </div>\n </div>\n </ng-container>\n</div>"]}
1	+ {"version":3,"file":"componentsPalette.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/componentsPalette/componentsPalette.component.ts","../../../../../layout-editor/src/components/componentsPalette/componentsPalette.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, Inject, Optional, OnDestroy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {DynamicItemLoader, DynamicItemSource, PackageManager} from '@anglr/dynamic';\nimport {Logger, LOGGER} from '@anglr/common';\nimport {Dictionary} from '@jscrpt/common';\nimport {Observable, Subscription} from 'rxjs';\n\nimport {LayoutEditorMetadataExtractor} from '../../services';\nimport {ComponentsPaletteItem, LayoutModuleTypes} from './componentsPalette.interface';\nimport {ToLayoutDragDataSAPipe} from '../../pipes';\nimport {LAYOUT_MODULE_TYPES_LOADER, REFRESH_PALETTE_OBSERVABLES} from '../../misc/tokens';\nimport {LayoutDndCoreModule} from '../../modules';\n\n/*\n Component displaying available components palette\n /\n@Component(\n{\n selector: 'components-palette',\n templateUrl: 'componentsPalette.component.html',\n styleUrls: ['componentsPalette.component.css'],\n standalone: true,\n imports:\n [\n CommonModule,\n LayoutDndCoreModule,\n ToLayoutDragDataSAPipe,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComponentsPaletteSAComponent implements OnInit, OnDestroy\n{\n //######################### protected fields #########################\n\n /\n Subscriptions created during initialization\n /\n protected initSubscriptions: Subscription = new Subscription();\n\n /\n Array of all available items in palette\n /\n protected allItems: ComponentsPaletteItem[] = [];\n\n //######################### protected properties - template bindings #########################\n\n /\n Available items grouped by group name\n /\n protected groupedItems: Dictionary<(ComponentsPaletteItem & {temp?: boolean})[]> = {};\n\n /\n Used for refreshing pipe value\n /\n protected refreshPipe: boolean = false;\n\n //######################### constructor #########################\n constructor(@Inject(LAYOUT_MODULE_TYPES_LOADER) protected moduleTypesLoader: DynamicItemLoader<LayoutModuleTypes>,\n protected changeDetector: ChangeDetectorRef,\n protected packageManager: PackageManager,\n protected metadataExtractor: LayoutEditorMetadataExtractor,\n @Inject(REFRESH_PALETTE_OBSERVABLES) @Optional() protected _refreshObservables?: Observable<void>[],\n @Inject(LOGGER) @Optional() protected logger?: Logger,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n\n /\n Initialize component\n /\n public async ngOnInit(): Promise<void>\n {\n this.initSubscriptions.add(this.packageManager.usedPackagesChange.subscribe(() => this.initItems()));\n\n if(this._refreshObservables && Array.isArray(this._refreshObservables))\n {\n for(const obs of this._refreshObservables)\n {\n this.initSubscriptions.add(obs.subscribe(() => this.initItems()));\n }\n }\n\n await this.initItems();\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 #########################\n\n /\n Initialize items in palette\n /\n protected async initItems(): Promise<void>\n {\n this.groupedItems = {};\n this.allItems = [];\n\n for (const packageName of this.packageManager.usedPackages)\n {\n const types = (await this.moduleTypesLoader.loadItem({package: packageName, name: 'types'}))?.data ?? [];\n\n for(const type of types)\n {\n const itemSource: DynamicItemSource = {package: packageName, name: type};\n const metadata = await this.metadataExtractor.extractMetadata(itemSource);\n\n if(!metadata)\n {\n this.logger?.warn('ComponentsPaletteSAComponent: Failed to obtain layout editor metadata {@source}', itemSource);\n }\n else\n {\n this.allItems.push(\n {\n itemSource,\n metadata\n });\n }\n }\n }\n\n this.groupedItems[''] = [];\n\n //group items\n for(const item of this.allItems)\n {\n const group = item.metadata.metaInfo?.group ?? '';\n this.groupedItems[group] ??= [];\n this.groupedItems[group].push(item);\n }\n\n this.changeDetector.detectChanges();\n }\n}","<div class=\"dynamic-flex-column\">\n <ng-container ngFor=\"let groupKeyValue of groupedItems \| keyvalue\">\n <div class=\"dynamic-text-spread dynamic-text-small-caps margin-left-extra-small margin-horizontal-small dynamic-bold\">{{groupKeyValue.key}} </div>\n\n <div ngFor=\"let item of groupKeyValue.value\"\n class=\"palette-droplist\">\n <div class=\"editor-component mat-elevation-z2\"\n [dndCorePaletteItem]=\"item \| toLayoutDragData\"\n (itemDrop)=\"refreshPipe = !refreshPipe\">\n <div class=\"editor-component-name\">{{item.metadata.metaInfo?.name ?? item.itemSource.name}}</div>\n <div class=\"editor-component-description\" ngIf=\"item.metadata.metaInfo?.description\">{{item.metadata.metaInfo?.description}}</div>\n </div>\n </div>\n </ng-container>\n</div>"]}

package/es2015/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js CHANGED Viewed

@@ -210,7 +210,7 @@ export class ComponentsTreeItemSAComponent {
     }
 }
 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.DragActiveService }, { token: i1.LayoutComponentsIteratorService }], target: i0.ɵɵFactoryTarget.Component });
-ComponentsTreeItemSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeItemSAComponent, isStandalone: true, selector: "components-tree-item", inputs: { data: "data", index: "index", parentId: "parentId", open: "open" }, host: { listeners: { "mouseleave": "_cancelHighlight($event)" } }, viewQueries: [{ propertyName: "_childrenNodes", predicate: ComponentsTreeItemSAComponent, descendants: true }], exportAs: ["componentsTreeItem"], ngImport: i0, template: "<div\n    #dndCoreTree=\"dndCoreTreeItem\"\n    #dropzone\n    [dndCoreTreeItem]=\"{metadata: data, parentId: parentId, index: index}\"\n    [dropzoneElement]=\"dropzone\"\n    [containerElement]=\"childrenContainer\"\n    [dragDisabled]=\"dragDisabled\"\n    [dragSource]=\"dndCoreTree.drag\"\n    (dropMetadata)=\"addDescendant($event)\">\n\n    <div \n        class=\"designer-dropzone\" \n        [dropTarget]=\"dndCoreTree.dropzone\">\n        <div class=\"flex dynamic-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 \n            #childrenContainer\n            class=\"node-children\"\n            [class.hidden]=\"!open\">\n            <div \n                *ngFor=\"let child of children; let i = index;\"\n                class=\"node-child\">\n                <components-tree-item \n                    [data]=\"child\"\n                    [parentId]=\"data?.id\"\n                    [index]=\"i\"></components-tree-item>\n            </div>\n        </div>\n    </div>    \n</div>\n", 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", "index", "parentId", "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: DndModule }, { kind: "directive", type: i4.DragSourceDirective, selector: "[dragSource]", inputs: ["dragSource", "dragSourceType", "dragSourceOptions", "noHTML5Preview"] }, { kind: "directive", type: i4.DropTargetDirective, selector: "[dropTarget]", inputs: ["dropTarget", "dropTargetTypes", "dropTargetType"] }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "directive", type: i5.DndCoreTreeItemDirective, selector: "[dndCoreTreeItem]", inputs: ["dropzoneElement", "containerElement", "dndCoreTreeItem", "dragDisabled"], outputs: ["dropMetadata"], exportAs: ["dndCoreTreeItem"] }, { kind: "directive", type: DesignerDropzoneSADirective, selector: ".designer-dropzone", inputs: ["isDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ComponentsTreeItemSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ComponentsTreeItemSAComponent, isStandalone: true, selector: "components-tree-item", inputs: { data: "data", index: "index", parentId: "parentId", open: "open" }, host: { listeners: { "mouseleave": "_cancelHighlight($event)" } }, viewQueries: [{ propertyName: "_childrenNodes", predicate: ComponentsTreeItemSAComponent, descendants: true }], exportAs: ["componentsTreeItem"], ngImport: i0, template: "<div\n    #dndCoreTree=\"dndCoreTreeItem\"\n    #dropzone\n    [dndCoreTreeItem]=\"{metadata: data, parentId: parentId, index: index}\"\n    [dropzoneElement]=\"dropzone\"\n    [containerElement]=\"childrenContainer\"\n    [dragDisabled]=\"dragDisabled\"\n    [dragSource]=\"dndCoreTree.drag\"\n    [noHTML5Preview]=\"true\"\n    (dropMetadata)=\"addDescendant($event)\">\n\n    <div \n        class=\"designer-dropzone\" \n        [dropTarget]=\"dndCoreTree.dropzone\">\n        <div class=\"flex dynamic-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 \n            #childrenContainer\n            class=\"node-children\"\n            [class.hidden]=\"!open\">\n            <div \n                *ngFor=\"let child of children; let i = index;\"\n                class=\"node-child\">\n                <components-tree-item \n                    [data]=\"child\"\n                    [parentId]=\"data?.id\"\n                    [index]=\"i\"></components-tree-item>\n            </div>\n        </div>\n    </div>    \n</div>\n", 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", "index", "parentId", "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: DndModule }, { kind: "directive", type: i4.DragSourceDirective, selector: "[dragSource]", inputs: ["dragSource", "dragSourceType", "dragSourceOptions", "noHTML5Preview"] }, { kind: "directive", type: i4.DropTargetDirective, selector: "[dropTarget]", inputs: ["dropTarget", "dropTargetTypes", "dropTargetType"] }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "directive", type: i5.DndCoreTreeItemDirective, selector: "[dndCoreTreeItem]", inputs: ["dropzoneElement", "containerElement", "dndCoreTreeItem", "dragDisabled"], outputs: ["dropMetadata"], exportAs: ["dndCoreTreeItem"] }, { kind: "directive", type: DesignerDropzoneSADirective, selector: ".designer-dropzone", inputs: ["isDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     DebounceCall(10),
     WithSync(),
@@ -226,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                         DndModule,
                         LayoutDndCoreModule,
                         DesignerDropzoneSADirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    #dndCoreTree=\"dndCoreTreeItem\"\n    #dropzone\n    [dndCoreTreeItem]=\"{metadata: data, parentId: parentId, index: index}\"\n    [dropzoneElement]=\"dropzone\"\n    [containerElement]=\"childrenContainer\"\n    [dragDisabled]=\"dragDisabled\"\n    [dragSource]=\"dndCoreTree.drag\"\n    (dropMetadata)=\"addDescendant($event)\">\n\n    <div \n        class=\"designer-dropzone\" \n        [dropTarget]=\"dndCoreTree.dropzone\">\n        <div class=\"flex dynamic-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 \n            #childrenContainer\n            class=\"node-children\"\n            [class.hidden]=\"!open\">\n            <div \n                *ngFor=\"let child of children; let i = index;\"\n                class=\"node-child\">\n                <components-tree-item \n                    [data]=\"child\"\n                    [parentId]=\"data?.id\"\n                    [index]=\"i\"></components-tree-item>\n            </div>\n        </div>\n    </div>    \n</div>\n", 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}"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    #dndCoreTree=\"dndCoreTreeItem\"\n    #dropzone\n    [dndCoreTreeItem]=\"{metadata: data, parentId: parentId, index: index}\"\n    [dropzoneElement]=\"dropzone\"\n    [containerElement]=\"childrenContainer\"\n    [dragDisabled]=\"dragDisabled\"\n    [dragSource]=\"dndCoreTree.drag\"\n    [noHTML5Preview]=\"true\"\n    (dropMetadata)=\"addDescendant($event)\">\n\n    <div \n        class=\"designer-dropzone\" \n        [dropTarget]=\"dndCoreTree.dropzone\">\n        <div class=\"flex dynamic-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 \n            #childrenContainer\n            class=\"node-children\"\n            [class.hidden]=\"!open\">\n            <div \n                *ngFor=\"let child of children; let i = index;\"\n                class=\"node-child\">\n                <components-tree-item \n                    [data]=\"child\"\n                    [parentId]=\"data?.id\"\n                    [index]=\"i\"></components-tree-item>\n            </div>\n        </div>\n    </div>    \n</div>\n", 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}"] }]
         }], ctorParameters: function () { return [{ type: i1.LayoutEditorMetadataManager }, { type: i0.ChangeDetectorRef }, { type: i1.DragActiveService }, { type: i1.LayoutComponentsIteratorService }]; }, propDecorators: { _childrenNodes: [{
                 type: ViewChildren,
                 args: [ComponentsTreeItemSAComponent]

package/es2015/layout-editor/src/components/componentsTree/item/componentsTreeItem.component.js.map CHANGED Viewed

	@@ -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 {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {DebounceCall, WithSync} from '@jscrpt/common';\nimport {DndModule} from '@ng-dnd/core';\nimport {Subscription, timer} from 'rxjs';\n\nimport {DragActiveService, LayoutComponentsIteratorService, LayoutEditorMetadataManager} from '../../../services';\nimport {LayoutDndCoreModule} from '../../../modules';\nimport {LayoutComponentDragData} from '../../../interfaces';\nimport {DesignerDropzoneSADirective} from '../../../directives';\n\nconst DRAG_OVER_DELAY = 500;\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 DndModule,\n LayoutDndCoreModule,\n DesignerDropzoneSADirective,\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 Handles drag over events\n /\n protected dragOverSubscription?: Subscription\|null;\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 Indication whether drag is disabled\n /\n protected get dragDisabled(): boolean\n {\n return !this.parentId \|\| !this.data \|\| this._manager.getComponent(this.data.id)?.dragDisabled === true;\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 Tree item index\n /\n @Input()\n public index: number = 0;\n\n /\n Parent identifier\n /\n @Input()\n public parentId: string\|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 _draggingSvc: DragActiveService,\n protected iteratorSvc: LayoutComponentsIteratorService,\n )\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 this._initSubscriptions.add(this._manager.draggedOverComponentChange.subscribe(() => this._handleDragOver()));\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 Adds descentant component metadata to this component metadata\n * @param dragData - Data from drag n drop event\n /\n public addDescendant(dragData: LayoutComponentDragData): void\n {\n if (this.data)\n {\n this._manager.getComponent(this.data.id)?.addDescendant(dragData);\n }\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 @WithSync()\n protected async initChildren(): Promise<void>\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\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 Handle event when user is dragging over this components\n /\n protected _handleDragOver(): void\n {\n if (this._manager.draggedOverComponent != this.data?.id)\n {\n this.dragOverSubscription?.unsubscribe();\n this.dragOverSubscription = null;\n return;\n }\n\n if (!this.open)\n {\n this.dragOverSubscription = timer(DRAG_OVER_DELAY).subscribe(() =>\n {\n this.expand();\n this._changeDetector.detectChanges();\n });\n }\n }\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\n #dndCoreTree=\"dndCoreTreeItem\"\n #dropzone\n [dndCoreTreeItem]=\"{metadata: data, parentId: parentId, index: index}\"\n [dropzoneElement]=\"dropzone\"\n [containerElement]=\"childrenContainer\"\n [dragDisabled]=\"dragDisabled\"\n [dragSource]=\"dndCoreTree.drag\"\n (dropMetadata)=\"addDescendant($event)\">\n\n <div \n class=\"designer-dropzone\" \n [dropTarget]=\"dndCoreTree.dropzone\">\n <div class=\"flex dynamic-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 \n #childrenContainer\n class=\"node-children\"\n [class.hidden]=\"!open\">\n <div \n *ngFor=\"let child of children; let i = index;\"\n class=\"node-child\">\n <components-tree-item \n [data]=\"child\"\n [parentId]=\"data?.id\"\n [index]=\"i\"></components-tree-item>\n </div>\n </div>\n </div> \n</div>\n"]}
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 {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {DebounceCall, WithSync} from '@jscrpt/common';\nimport {DndModule} from '@ng-dnd/core';\nimport {Subscription, timer} from 'rxjs';\n\nimport {DragActiveService, LayoutComponentsIteratorService, LayoutEditorMetadataManager} from '../../../services';\nimport {LayoutDndCoreModule} from '../../../modules';\nimport {LayoutComponentDragData} from '../../../interfaces';\nimport {DesignerDropzoneSADirective} from '../../../directives';\n\nconst DRAG_OVER_DELAY = 500;\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 DndModule,\n LayoutDndCoreModule,\n DesignerDropzoneSADirective,\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 Handles drag over events\n /\n protected dragOverSubscription?: Subscription\|null;\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 Indication whether drag is disabled\n /\n protected get dragDisabled(): boolean\n {\n return !this.parentId \|\| !this.data \|\| this._manager.getComponent(this.data.id)?.dragDisabled === true;\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 Tree item index\n /\n @Input()\n public index: number = 0;\n\n /\n Parent identifier\n /\n @Input()\n public parentId: string\|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 _draggingSvc: DragActiveService,\n protected iteratorSvc: LayoutComponentsIteratorService,\n )\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 this._initSubscriptions.add(this._manager.draggedOverComponentChange.subscribe(() => this._handleDragOver()));\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 Adds descentant component metadata to this component metadata\n * @param dragData - Data from drag n drop event\n /\n public addDescendant(dragData: LayoutComponentDragData): void\n {\n if (this.data)\n {\n this._manager.getComponent(this.data.id)?.addDescendant(dragData);\n }\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 @WithSync()\n protected async initChildren(): Promise<void>\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\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 Handle event when user is dragging over this components\n /\n protected _handleDragOver(): void\n {\n if (this._manager.draggedOverComponent != this.data?.id)\n {\n this.dragOverSubscription?.unsubscribe();\n this.dragOverSubscription = null;\n return;\n }\n\n if (!this.open)\n {\n this.dragOverSubscription = timer(DRAG_OVER_DELAY).subscribe(() =>\n {\n this.expand();\n this._changeDetector.detectChanges();\n });\n }\n }\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\n #dndCoreTree=\"dndCoreTreeItem\"\n #dropzone\n [dndCoreTreeItem]=\"{metadata: data, parentId: parentId, index: index}\"\n [dropzoneElement]=\"dropzone\"\n [containerElement]=\"childrenContainer\"\n [dragDisabled]=\"dragDisabled\"\n [dragSource]=\"dndCoreTree.drag\"\n [noHTML5Preview]=\"true\"\n (dropMetadata)=\"addDescendant($event)\">\n\n <div \n class=\"designer-dropzone\" \n [dropTarget]=\"dndCoreTree.dropzone\">\n <div class=\"flex dynamic-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 \n #childrenContainer\n class=\"node-children\"\n [class.hidden]=\"!open\">\n <div \n *ngFor=\"let child of children; let i = index;\"\n class=\"node-child\">\n <components-tree-item \n [data]=\"child\"\n [parentId]=\"data?.id\"\n [index]=\"i\"></components-tree-item>\n </div>\n </div>\n </div> \n</div>\n"]}

package/es2015/layout-editor/src/components/layoutDesigner/layoutDesigner.component.js CHANGED Viewed

@@ -19,8 +19,7 @@ import * as i2 from "@angular/common";
 import * as i3 from "@anglr/common";
 import * as i4 from "@ng-dnd/core";
 import * as i5 from "../../modules/layoutDndCore/directives/dndCoreDesigner/dndCoreDesigner.directive";
-import * as i6 from "../../modules/layoutDndCore/directives/dndCorePreview/dndCorePreview.directive";
-import * as i7 from "@anglr/dynamic";
+import * as i6 from "@anglr/dynamic";
 /**
  * Component used as designer component wrapper for layout component
  */
@@ -274,9 +273,9 @@ export class LayoutDesignerSAComponent extends LayoutComponentBase {
     }
 }
 LayoutDesignerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: LayoutDesignerSAComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i1.LayoutEditorMetadataExtractor }, { token: i1.LayoutEditorMetadataManager }, { token: i1.LayoutComponentsIteratorService }, { token: LAYOUT_HISTORY_MANAGER }, { token: SCOPE_ID, optional: true }, { token: LOGGER, optional: true }, { token: LayoutDesignerSAComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-LayoutDesignerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: LayoutDesignerSAComponent, isStandalone: true, selector: "layout-designer-component", viewQueries: [{ propertyName: "designerElement", first: true, predicate: ["layoutDesigner"], descendants: true, static: true }, { propertyName: "dndCoreDesigner", first: true, predicate: ["dndCoreDesigner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"designer-overlay\" \n     #layoutDesigner\n     #dndCore=\"dndCoreDesigner\"\n     [dndCoreDesigner]=\"{metadata: renderedType, parentId: parent?.renderedType?.id, index: index}\"\n     [dropzoneElement]=\"layoutDropzone\"\n     [dragDisabled]=\"dragDisabled\"\n     [dragSource]=\"dndCore.drag\"\n     (dropMetadata)=\"addDescendant($event)\"\n     [copyDesignerStyles]=\"renderedType\"\n     (mouseleave)=\"hideOverlay($event)\"\n     (mouseover)=\"showOverlay($event)\"\n     (click)=\"selectComponent($event)\"\n     (dblclick)=\"unselectComponent($event)\">\n    <div class=\"designer-dropzone\"\n         #layoutDropzone\n         designerMinWidth\n         [canDrop]=\"canDrop\"\n         [editorMetadata]=\"editorMetadata\"\n         [horizontal]=\"parent?.horizontal ?? false\"\n         [dropTarget]=\"dndCore.dropzone\"\n         [isDropZone]=\"canDrop\">\n        <layout-editor-drag-preview class=\"mat-elevation-z4\" *dndCorePreview [editorMetadata]=\"editorMetadata\" [layoutMetadata]=\"renderedType\"></layout-editor-drag-preview>\n        <ng-template #renderer=\"layoutComponentRenderer\" [layoutComponentRenderer]=\"renderedType\" [layoutComponentRendererDisableTransformer]=\"true\"></ng-template>\n\n        <ng-container *ngIf=\"highlighted || selected\">\n            <div class=\"designer-overlay-border\"></div>\n            <div class=\"designer-overlay-layout\" [layoutDesignerOverlayFor]=\"renderer\"></div>\n\n            <div class=\"designer-overlay-title\"\n                 *bodyRender\n                 [positionTo]=\"layoutDesigner\"\n                 placement=\"TopStart\">{{editorMetadata?.metaInfo?.name ?? renderedType?.name}}</div>\n\n            <ng-container *ngIf=\"!!parent && parent.editorMetadata?.removeDescendant\">\n                <div *bodyRender\n                     class=\"designer-overlay-remove\"\n                     [positionTo]=\"layoutDesigner\"\n                     placement=\"TopEnd\"\n                     (click)=\"remove()\">\n                    <span class=\"fas fa-times\"></span>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host\n{\n    display: contents;\n}\n\n.designer-overlay\n{\n    position: relative;\n    overflow: hidden;\n}\n\n.designer-dropzone\n{\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n}\n\n.designer-dropzone.drag-active\n{\n    margin: 8px;\n    border: solid 1px rgb(0, 0, 0, .3);\n}\n\n.designer-overlay-layout,\n.designer-overlay-border\n{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n.designer-overlay-border\n{\n    border: 1px solid #009dd8;\n}\n\n.designer-overlay-title\n{\n    position: absolute;\n    background-color: #009dd8;\n    color: white;\n    font-weight: 500;\n    z-index: 500;\n    padding: 2px 6px;\n    pointer-events: none;\n}\n\n.designer-overlay-remove\n{\n    position: absolute;\n    border-radius: 50%;\n    background-color: #009dd8;\n    padding: 2px 7px;\n    opacity: .75;\n    color: #fff;\n    cursor: pointer;\n}"], dependencies: [{ kind: "ngmodule", type:
+LayoutDesignerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: LayoutDesignerSAComponent, isStandalone: true, selector: "layout-designer-component", viewQueries: [{ propertyName: "designerElement", first: true, predicate: ["layoutDesigner"], descendants: true, static: true }, { propertyName: "dndCoreDesigner", first: true, predicate: ["dndCoreDesigner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"designer-overlay\" \n     #layoutDesigner\n     #dndCore=\"dndCoreDesigner\"\n     [dndCoreDesigner]=\"{metadata: renderedType, parentId: parent?.renderedType?.id, index: index}\"\n     [dropzoneElement]=\"layoutDropzone\"\n     [dragDisabled]=\"dragDisabled\"\n     [dragSource]=\"dndCore.drag\"\n     [noHTML5Preview]=\"true\"\n     (dropMetadata)=\"addDescendant($event)\"\n     [copyDesignerStyles]=\"renderedType\"\n     (mouseleave)=\"hideOverlay($event)\"\n     (mouseover)=\"showOverlay($event)\"\n     (click)=\"selectComponent($event)\"\n     (dblclick)=\"unselectComponent($event)\">\n    <div class=\"designer-dropzone\"\n         #layoutDropzone\n         designerMinWidth\n         [canDrop]=\"canDrop\"\n         [editorMetadata]=\"editorMetadata\"\n         [horizontal]=\"parent?.horizontal ?? false\"\n         [dropTarget]=\"dndCore.dropzone\"\n         [isDropZone]=\"canDrop\">\n        <ng-template #renderer=\"layoutComponentRenderer\" [layoutComponentRenderer]=\"renderedType\" [layoutComponentRendererDisableTransformer]=\"true\"></ng-template>\n\n        <ng-container *ngIf=\"highlighted || selected\">\n            <div class=\"designer-overlay-border\"></div>\n            <div class=\"designer-overlay-layout\" [layoutDesignerOverlayFor]=\"renderer\"></div>\n\n            <div class=\"designer-overlay-title\"\n                 *bodyRender\n                 [positionTo]=\"layoutDesigner\"\n                 placement=\"TopStart\">{{editorMetadata?.metaInfo?.name ?? renderedType?.name}}</div>\n\n            <ng-container *ngIf=\"!!parent && parent.editorMetadata?.removeDescendant\">\n                <div *bodyRender\n                     class=\"designer-overlay-remove\"\n                     [positionTo]=\"layoutDesigner\"\n                     placement=\"TopEnd\"\n                     (click)=\"remove()\">\n                    <span class=\"fas fa-times\"></span>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host\n{\n    display: contents;\n}\n\n.designer-overlay\n{\n    position: relative;\n    overflow: hidden;\n}\n\n.designer-dropzone\n{\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n}\n\n.designer-dropzone.drag-active\n{\n    margin: 8px;\n    border: solid 1px rgb(0, 0, 0, .3);\n}\n\n.designer-overlay-layout,\n.designer-overlay-border\n{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n.designer-overlay-border\n{\n    border: 1px solid #009dd8;\n}\n\n.designer-overlay-title\n{\n    position: absolute;\n    background-color: #009dd8;\n    color: white;\n    font-weight: 500;\n    z-index: 500;\n    padding: 2px 6px;\n    pointer-events: none;\n}\n\n.designer-overlay-remove\n{\n    position: absolute;\n    border-radius: 50%;\n    background-color: #009dd8;\n    padding: 2px 7px;\n    opacity: .75;\n    color: #fff;\n    cursor: pointer;\n}"], dependencies: [{ kind: "ngmodule", type:
             //TODO: cleanup
-            CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PositionModule }, { kind: "directive", type: i3.PositionToDirective, selector: "[positionTo]", inputs: ["positionTo", "placement"], outputs: ["flip"] }, { kind: "component", type: LayoutEditorDragPreviewSAComponent, selector: "layout-editor-drag-preview", inputs: ["editorMetadata", "layoutMetadata"] }, { kind: "component", type: LayoutDesignerOverlayForSAComponent, selector: "[layoutDesignerOverlayFor]", inputs: ["layoutDesignerOverlayFor"] }, { kind: "directive", type: DesignerMinDimensionSADirective, selector: "[designerMinWidth]", inputs: ["horizontal", "canDrop", "editorMetadata"] }, { kind: "directive", type: CopyDesignerStylesSADirective, selector: "[copyDesignerStyles]", inputs: ["copyDesignerStyles"], exportAs: ["copyDesignerStyles"] }, { kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererInjector", "layoutComponentRendererDisableTransformer"], outputs: ["layoutComponentRendererComponentChange", "componentElementChange"], exportAs: ["layoutComponentRenderer"] }, { kind: "directive", type: DesignerDropzoneSADirective, selector: ".designer-dropzone", inputs: ["isDropZone"] }, { kind: "directive", type: BodyRenderSADirective, selector: "[bodyRender]" }, { kind: "ngmodule", type: DndModule }, { kind: "directive", type: i4.DragSourceDirective, selector: "[dragSource]", inputs: ["dragSource", "dragSourceType", "dragSourceOptions", "noHTML5Preview"] }, { kind: "directive", type: i4.DropTargetDirective, selector: "[dropTarget]", inputs: ["dropTarget", "dropTargetTypes", "dropTargetType"] }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "directive", type: i5.DndCoreDesignerDirective, selector: "[dndCoreDesigner]", inputs: ["dropzoneElement", "dndCoreDesigner", "dragDisabled"], outputs: ["dropMetadata"], exportAs: ["dndCoreDesigner"] }, { kind: "directive", type: i6.DndCorePreviewDirective, selector: "[dndCorePreview]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PositionModule }, { kind: "directive", type: i3.PositionToDirective, selector: "[positionTo]", inputs: ["positionTo", "placement"], outputs: ["flip"] }, { kind: "component", type: LayoutDesignerOverlayForSAComponent, selector: "[layoutDesignerOverlayFor]", inputs: ["layoutDesignerOverlayFor"] }, { kind: "directive", type: DesignerMinDimensionSADirective, selector: "[designerMinWidth]", inputs: ["horizontal", "canDrop", "editorMetadata"] }, { kind: "directive", type: CopyDesignerStylesSADirective, selector: "[copyDesignerStyles]", inputs: ["copyDesignerStyles"], exportAs: ["copyDesignerStyles"] }, { kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererInjector", "layoutComponentRendererDisableTransformer"], outputs: ["layoutComponentRendererComponentChange", "componentElementChange"], exportAs: ["layoutComponentRenderer"] }, { kind: "directive", type: DesignerDropzoneSADirective, selector: ".designer-dropzone", inputs: ["isDropZone"] }, { kind: "directive", type: BodyRenderSADirective, selector: "[bodyRender]" }, { kind: "ngmodule", type: DndModule }, { kind: "directive", type: i4.DragSourceDirective, selector: "[dragSource]", inputs: ["dragSource", "dragSourceType", "dragSourceOptions", "noHTML5Preview"] }, { kind: "directive", type: i4.DropTargetDirective, selector: "[dropTarget]", inputs: ["dropTarget", "dropTargetTypes", "dropTargetType"] }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "directive", type: i5.DndCoreDesignerDirective, selector: "[dndCoreDesigner]", inputs: ["dropzoneElement", "dndCoreDesigner", "dragDisabled"], outputs: ["dropMetadata"], exportAs: ["dndCoreDesigner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: LayoutDesignerSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'layout-designer-component', standalone: true, imports: [
@@ -292,8 +291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                         BodyRenderSADirective,
                         DndModule,
                         LayoutDndCoreModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"designer-overlay\" \n     #layoutDesigner\n     #dndCore=\"dndCoreDesigner\"\n     [dndCoreDesigner]=\"{metadata: renderedType, parentId: parent?.renderedType?.id, index: index}\"\n     [dropzoneElement]=\"layoutDropzone\"\n     [dragDisabled]=\"dragDisabled\"\n     [dragSource]=\"dndCore.drag\"\n     (dropMetadata)=\"addDescendant($event)\"\n     [copyDesignerStyles]=\"renderedType\"\n     (mouseleave)=\"hideOverlay($event)\"\n     (mouseover)=\"showOverlay($event)\"\n     (click)=\"selectComponent($event)\"\n     (dblclick)=\"unselectComponent($event)\">\n    <div class=\"designer-dropzone\"\n         #layoutDropzone\n         designerMinWidth\n         [canDrop]=\"canDrop\"\n         [editorMetadata]=\"editorMetadata\"\n         [horizontal]=\"parent?.horizontal ?? false\"\n         [dropTarget]=\"dndCore.dropzone\"\n         [isDropZone]=\"canDrop\">\n        <layout-editor-drag-preview class=\"mat-elevation-z4\" *dndCorePreview [editorMetadata]=\"editorMetadata\" [layoutMetadata]=\"renderedType\"></layout-editor-drag-preview>\n        <ng-template #renderer=\"layoutComponentRenderer\" [layoutComponentRenderer]=\"renderedType\" [layoutComponentRendererDisableTransformer]=\"true\"></ng-template>\n\n        <ng-container *ngIf=\"highlighted || selected\">\n            <div class=\"designer-overlay-border\"></div>\n            <div class=\"designer-overlay-layout\" [layoutDesignerOverlayFor]=\"renderer\"></div>\n\n            <div class=\"designer-overlay-title\"\n                 *bodyRender\n                 [positionTo]=\"layoutDesigner\"\n                 placement=\"TopStart\">{{editorMetadata?.metaInfo?.name ?? renderedType?.name}}</div>\n\n            <ng-container *ngIf=\"!!parent && parent.editorMetadata?.removeDescendant\">\n                <div *bodyRender\n                     class=\"designer-overlay-remove\"\n                     [positionTo]=\"layoutDesigner\"\n                     placement=\"TopEnd\"\n                     (click)=\"remove()\">\n                    <span class=\"fas fa-times\"></span>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host\n{\n    display: contents;\n}\n\n.designer-overlay\n{\n    position: relative;\n    overflow: hidden;\n}\n\n.designer-dropzone\n{\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n}\n\n.designer-dropzone.drag-active\n{\n    margin: 8px;\n    border: solid 1px rgb(0, 0, 0, .3);\n}\n\n.designer-overlay-layout,\n.designer-overlay-border\n{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n.designer-overlay-border\n{\n    border: 1px solid #009dd8;\n}\n\n.designer-overlay-title\n{\n    position: absolute;\n    background-color: #009dd8;\n    color: white;\n    font-weight: 500;\n    z-index: 500;\n    padding: 2px 6px;\n    pointer-events: none;\n}\n\n.designer-overlay-remove\n{\n    position: absolute;\n    border-radius: 50%;\n    background-color: #009dd8;\n    padding: 2px 7px;\n    opacity: .75;\n    color: #fff;\n    cursor: pointer;\n}"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i1.LayoutEditorMetadataExtractor }, { type: i1.LayoutEditorMetadataManager }, { type: i1.LayoutComponentsIteratorService }, { type: i7.MetadataHistoryManager, decorators: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"designer-overlay\" \n     #layoutDesigner\n     #dndCore=\"dndCoreDesigner\"\n     [dndCoreDesigner]=\"{metadata: renderedType, parentId: parent?.renderedType?.id, index: index}\"\n     [dropzoneElement]=\"layoutDropzone\"\n     [dragDisabled]=\"dragDisabled\"\n     [dragSource]=\"dndCore.drag\"\n     [noHTML5Preview]=\"true\"\n     (dropMetadata)=\"addDescendant($event)\"\n     [copyDesignerStyles]=\"renderedType\"\n     (mouseleave)=\"hideOverlay($event)\"\n     (mouseover)=\"showOverlay($event)\"\n     (click)=\"selectComponent($event)\"\n     (dblclick)=\"unselectComponent($event)\">\n    <div class=\"designer-dropzone\"\n         #layoutDropzone\n         designerMinWidth\n         [canDrop]=\"canDrop\"\n         [editorMetadata]=\"editorMetadata\"\n         [horizontal]=\"parent?.horizontal ?? false\"\n         [dropTarget]=\"dndCore.dropzone\"\n         [isDropZone]=\"canDrop\">\n        <ng-template #renderer=\"layoutComponentRenderer\" [layoutComponentRenderer]=\"renderedType\" [layoutComponentRendererDisableTransformer]=\"true\"></ng-template>\n\n        <ng-container *ngIf=\"highlighted || selected\">\n            <div class=\"designer-overlay-border\"></div>\n            <div class=\"designer-overlay-layout\" [layoutDesignerOverlayFor]=\"renderer\"></div>\n\n            <div class=\"designer-overlay-title\"\n                 *bodyRender\n                 [positionTo]=\"layoutDesigner\"\n                 placement=\"TopStart\">{{editorMetadata?.metaInfo?.name ?? renderedType?.name}}</div>\n\n            <ng-container *ngIf=\"!!parent && parent.editorMetadata?.removeDescendant\">\n                <div *bodyRender\n                     class=\"designer-overlay-remove\"\n                     [positionTo]=\"layoutDesigner\"\n                     placement=\"TopEnd\"\n                     (click)=\"remove()\">\n                    <span class=\"fas fa-times\"></span>\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host\n{\n    display: contents;\n}\n\n.designer-overlay\n{\n    position: relative;\n    overflow: hidden;\n}\n\n.designer-dropzone\n{\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n}\n\n.designer-dropzone.drag-active\n{\n    margin: 8px;\n    border: solid 1px rgb(0, 0, 0, .3);\n}\n\n.designer-overlay-layout,\n.designer-overlay-border\n{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n.designer-overlay-border\n{\n    border: 1px solid #009dd8;\n}\n\n.designer-overlay-title\n{\n    position: absolute;\n    background-color: #009dd8;\n    color: white;\n    font-weight: 500;\n    z-index: 500;\n    padding: 2px 6px;\n    pointer-events: none;\n}\n\n.designer-overlay-remove\n{\n    position: absolute;\n    border-radius: 50%;\n    background-color: #009dd8;\n    padding: 2px 7px;\n    opacity: .75;\n    color: #fff;\n    cursor: pointer;\n}"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i1.LayoutEditorMetadataExtractor }, { type: i1.LayoutEditorMetadataManager }, { type: i1.LayoutComponentsIteratorService }, { type: i6.MetadataHistoryManager, decorators: [{
                     type: Inject,
                     args: [LAYOUT_HISTORY_MANAGER]
                 }] }, { type: undefined, decorators: [{

package/es2015/layout-editor/src/components/layoutDesigner/layoutDesigner.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"layoutDesigner.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/layoutDesigner/layoutDesigner.component.ts","../../../../../layout-editor/src/components/layoutDesigner/layoutDesigner.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, SkipSelf, Optional, Inject, OnDestroy, Injector, ViewChild} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {Logger, LOGGER, PositionModule} from '@anglr/common';\nimport {LayoutComponent, LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {LayoutComponentBase, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {MetadataHistoryManager, SCOPE_ID} from '@anglr/dynamic';\nimport {Func, isPresent} from '@jscrpt/common';\nimport {DndModule} from '@ng-dnd/core';\nimport {Subscription} from 'rxjs';\n\nimport {LayoutDesignerComponentOptions} from './layoutDesigner.options';\nimport {BodyRenderSADirective, CopyDesignerStylesSADirective, DesignerDropzoneSADirective, DesignerMinDimensionSADirective} from '../../directives';\nimport {LayoutComponentsIteratorService, LayoutEditorMetadataExtractor, LayoutEditorMetadataManager} from '../../services';\nimport {LayoutEditorDragPreviewSAComponent} from '../layoutEditorDragPreview/layoutEditorDragPreview.component';\nimport {LayoutDesignerOverlayForSAComponent} from '../layoutDesignerOverlayFor/layoutDesignerOverlayFor.component';\nimport {LayoutEditorMetadataDescriptor} from '../../decorators';\nimport {LAYOUT_HISTORY_MANAGER} from '../../misc/tokens';\nimport {DndCoreDesignerDirective, LayoutDndCoreModule} from '../../modules';\nimport {LayoutComponentDragData} from '../../interfaces';\n\n/*\n Component used as designer component wrapper for layout component\n /\n@Component(\n{\n selector: 'layout-designer-component',\n templateUrl: 'layoutDesigner.component.html',\n styleUrls: ['layoutDesigner.component.css'],\n standalone: true,\n imports:\n [\n //TODO: cleanup\n CommonModule,\n PositionModule,\n LayoutEditorDragPreviewSAComponent,\n LayoutDesignerOverlayForSAComponent,\n DesignerMinDimensionSADirective,\n CopyDesignerStylesSADirective,\n LayoutComponentRendererSADirective,\n DesignerDropzoneSADirective,\n BodyRenderSADirective,\n DndModule,\n LayoutDndCoreModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LayoutDesignerSAComponent extends LayoutComponentBase<LayoutDesignerComponentOptions> implements LayoutComponent<LayoutDesignerComponentOptions>, OnDestroy\n{\n //######################### protected properties #########################\n\n /\n Subscriptions created during initialization\n /\n protected initSubscriptions: Subscription = new Subscription();\n\n //######################### protected properties - template bindings #########################\n\n /\n Indication whether is component selected\n /\n protected get selected(): boolean\n {\n return this.layoutEditorMetadataManager.selectedComponent === this.options?.typeMetadata.id;\n }\n\n /\n Indication whether is component highlighted\n /\n protected get highlighted(): boolean\n {\n return this.layoutEditorMetadataManager.highlightedComponent === this.options?.typeMetadata.id;\n }\n\n /\n Metadata for rendered type\n /\n protected renderedType: LayoutComponentMetadata\|undefined\|null;\n\n //######################### protected properties - overrides #########################\n\n /\n @inheritdoc\n /\n protected override get element(): ElementRef<HTMLElement>\n {\n return this.designerElement;\n }\n\n /\n @inheritdoc\n /\n protected override get extensionsOptions(): any\|undefined\|null\n {\n return this.options?.typeMetadata.options;\n }\n\n //######################### protected properties - children #########################\n\n /\n Instance of designer div element\n /\n @ViewChild('layoutDesigner', {static: true})\n protected designerElement!: ElementRef<HTMLElement>;\n\n //######################### public properties - children #########################\n\n /\n Instance of designer dnd core directive\n /\n @ViewChild('dndCoreDesigner', {static: true})\n public dndCoreDesigner!: DndCoreDesignerDirective;\n\n //######################### public properties #########################\n\n /\n Indication whether drag is disabled for component\n /\n public get dragDisabled(): boolean\n {\n return !this.parent \|\| !!this.editorMetadata?.metaInfo?.dragDisabled;\n }\n\n /\n Gets predicate that returns indication whether item can be dropped into this list\n * //TODO: remove\n /\n public canDropFn: Func<boolean> = () => this.canDrop;\n\n /\n Indication whether item can be dropped here\n /\n public canDrop: boolean = false;\n\n /\n Indication whether drop list is horizontally oriented\n /\n public horizontal: boolean = false;\n\n /\n Component identifier\n /\n public get id(): string\n {\n return this.options?.typeMetadata?.id ?? '';\n }\n\n /\n Index of current layout designer in its parent\n /\n public index: number = 0;\n\n /\n Layout editor metadata\n /\n public editorMetadata: LayoutEditorMetadataDescriptor\|null = null;\n\n //######################### constructor #########################\n constructor(changeDetector: ChangeDetectorRef,\n element: ElementRef<HTMLElement>,\n injector: Injector,\n protected metadataExtractor: LayoutEditorMetadataExtractor,\n protected layoutEditorMetadataManager: LayoutEditorMetadataManager,\n protected iteratorSvc: LayoutComponentsIteratorService,\n @Inject(LAYOUT_HISTORY_MANAGER) protected history: MetadataHistoryManager<LayoutComponentMetadata>,\n @Optional() @Inject(SCOPE_ID) protected scopeId?: string,\n @Inject(LOGGER) @Optional() logger?: Logger,\n @SkipSelf() @Optional() protected parent?: LayoutDesignerSAComponent,)\n {\n super(changeDetector, element, injector, logger);\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /\n Called when component is destroyed\n /\n public override ngOnDestroy(): void\n {\n this.logger?.debug('LayoutDesignerSAComponent: Destroying component {@data}', {id: this.options?.typeMetadata.id});\n\n this.initSubscriptions.unsubscribe();\n\n super.ngOnDestroy();\n\n if(this.options)\n {\n this.layoutEditorMetadataManager.unregisterLayoutDesignerComponent(this.options.typeMetadata.id);\n }\n }\n\n //######################### public methods #########################\n\n /\n Adds descentant component metadata to this component metadata\n * @param dragData - Data from drag n drop event\n /\n // public addDescendant(dragData: CdkDragDrop<LayoutComponentDragData, LayoutComponentDragData, LayoutComponentDragData>): void\n public addDescendant(dragData: LayoutComponentDragData): void\n {\n if(!this.options)\n {\n return;\n }\n\n const parentId = dragData.parentId;\n this.logger?.debug('LayoutDesignerSAComponent: Adding descendant {@data}', {id: dragData.metadata?.id, parent: this.options.typeMetadata.id});\n\n if(!dragData.metadata)\n {\n this.logger?.warn('LayoutDesignerSAComponent: Missing metadata while adding descendant');\n\n return;\n }\n\n //already added to tree, removing old reference\n if(parentId)\n {\n this.history.disable();\n this.layoutEditorMetadataManager.getComponent(parentId)?.removeDescendant(dragData.metadata?.id);\n this.history.enable();\n }\n\n this.editorMetadata?.addDescendant?.(dragData?.metadata, this.options.typeMetadata.options, dragData.index ?? 0);\n this.canDrop = this.editorMetadata?.canDropMetadata?.(this.options.typeMetadata.options) ?? false;\n\n this.renderedType = {...this.options.typeMetadata};\n this.changeDetector.markForCheck();\n this.history.getNewState();\n }\n\n //######################### protected methods #########################\n\n /\n Removes descendant metadata from this component metadata\n * @param id - Id of descendant to be removed\n /\n protected removeDescendant(id: string): void\n {\n if(!this.options)\n {\n return;\n }\n\n this.logger?.debug('LayoutDesignerSAComponent: Removing descendant {@data}', {id: this.options.typeMetadata.id, child: id});\n\n this.editorMetadata?.removeDescendant?.(id, this.options.typeMetadata.options);\n this.canDrop = this.editorMetadata?.canDropMetadata?.(this.options.typeMetadata.options) ?? false;\n this.renderedType = {...this.options.typeMetadata};\n this.changeDetector.markForCheck();\n this.history.getNewState();\n }\n\n //######################### protected methods - template bindings #########################\n\n /\n Shows designer overlay\n * @param event - Mouse event that occured\n /\n protected showOverlay(event: Event): void\n {\n this.logger?.verbose('LayoutDesignerComponent: Showing overlay for {@type}', {name: this.options?.typeMetadata.name, id: this.options?.typeMetadata.id});\n\n event.preventDefault();\n event.stopPropagation();\n\n this.layoutEditorMetadataManager.highlightComponent(this.options?.typeMetadata.id);\n }\n\n /\n Hides designer overlay\n * @param event - Mouse event that occured\n /\n protected hideOverlay(event: Event): void\n {\n if(isPresent(this.parent))\n {\n return;\n }\n\n this.logger?.verbose('LayoutDesignerComponent: Hiding overlay for {@type}', {name: this.options?.typeMetadata.name, id: this.options?.typeMetadata.id});\n\n event.preventDefault();\n event.stopPropagation();\n\n this.layoutEditorMetadataManager.cancelHighlightedComponent();\n }\n\n /\n Marks component as selected\n * @param event - Event that occured\n /\n protected selectComponent(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n if(this.options)\n {\n this.layoutEditorMetadataManager.selectComponent(this.options.typeMetadata.id);\n }\n }\n\n /\n Unselects selected component\n * @param event - Event that occured\n /\n protected unselectComponent(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this.layoutEditorMetadataManager.unselectComponent();\n }\n\n /\n Removes itself from tree\n /\n protected remove(): void\n {\n if(!this.parent \|\| !this.options)\n {\n return;\n }\n\n this.parent.removeDescendant(this.options.typeMetadata.id);\n }\n\n //######################### protected methods - overrides #########################\n\n /\n @inheritdoc\n /\n protected override async onInit(): Promise<void>\n {\n await super.onInit();\n\n if(!this.options)\n {\n return;\n }\n\n this.options.typeMetadata.scope = this.scopeId;\n\n if(this.parent?.options)\n {\n for await(const child of this.iteratorSvc.getChildrenIteratorFor(this.parent.options?.typeMetadata))\n {\n if(this.options.typeMetadata.id === child.metadata.id)\n {\n this.index = child.index;\n\n break;\n }\n }\n }\n\n //TODO: optimize\n this.initSubscriptions.add(this.layoutEditorMetadataManager.selectedChange.subscribe(() => this.changeDetector.detectChanges()));\n this.initSubscriptions.add(this.layoutEditorMetadataManager.highlightedChange.subscribe(() => this.changeDetector.detectChanges()));\n\n this.editorMetadata = await this.metadataExtractor.extractMetadata(this.options.typeMetadata);\n this.canDrop = this.editorMetadata?.canDropMetadata?.(this.options.typeMetadata.options) ?? false;\n this.layoutEditorMetadataManager.registerLayoutDesignerComponent(this, this.options.typeMetadata.id, this.parent?.options?.typeMetadata.id);\n }\n\n /\n @inheritdoc\n /\n protected override onOptionsSet(): void\n {\n if(!this.options)\n {\n return;\n }\n\n this.renderedType = {...this.options.typeMetadata};\n this.horizontal = this.editorMetadata?.isHorizontalDrop?.(this.options.typeMetadata.options) ?? false;\n }\n}","<div class=\"designer-overlay\" \n #layoutDesigner\n #dndCore=\"dndCoreDesigner\"\n [dndCoreDesigner]=\"{metadata: renderedType, parentId: parent?.renderedType?.id, index: index}\"\n [dropzoneElement]=\"layoutDropzone\"\n [dragDisabled]=\"dragDisabled\"\n [dragSource]=\"dndCore.drag\"\n (dropMetadata)=\"addDescendant($event)\"\n [copyDesignerStyles]=\"renderedType\"\n (mouseleave)=\"hideOverlay($event)\"\n (mouseover)=\"showOverlay($event)\"\n (click)=\"selectComponent($event)\"\n (dblclick)=\"unselectComponent($event)\">\n <div class=\"designer-dropzone\"\n #layoutDropzone\n designerMinWidth\n [canDrop]=\"canDrop\"\n [editorMetadata]=\"editorMetadata\"\n [horizontal]=\"parent?.horizontal ?? false\"\n [dropTarget]=\"dndCore.dropzone\"\n [isDropZone]=\"canDrop\">\n <layout-editor-drag-preview class=\"mat-elevation-z4\" dndCorePreview [editorMetadata]=\"editorMetadata\" [layoutMetadata]=\"renderedType\"></layout-editor-drag-preview>\n <ng-template #renderer=\"layoutComponentRenderer\" [layoutComponentRenderer]=\"renderedType\" [layoutComponentRendererDisableTransformer]=\"true\"></ng-template>\n\n <ng-container ngIf=\"highlighted \|\| selected\">\n <div class=\"designer-overlay-border\"></div>\n <div class=\"designer-overlay-layout\" [layoutDesignerOverlayFor]=\"renderer\"></div>\n\n <div class=\"designer-overlay-title\"\n bodyRender\n [positionTo]=\"layoutDesigner\"\n placement=\"TopStart\">{{editorMetadata?.metaInfo?.name ?? renderedType?.name}}</div>\n\n <ng-container ngIf=\"!!parent && parent.editorMetadata?.removeDescendant\">\n <div bodyRender\n class=\"designer-overlay-remove\"\n [positionTo]=\"layoutDesigner\"\n placement=\"TopEnd\"\n (click)=\"remove()\">\n <span class=\"fas fa-times\"></span>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</div>\n"]}
1	+ {"version":3,"file":"layoutDesigner.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/layoutDesigner/layoutDesigner.component.ts","../../../../../layout-editor/src/components/layoutDesigner/layoutDesigner.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, SkipSelf, Optional, Inject, OnDestroy, Injector, ViewChild} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {Logger, LOGGER, PositionModule} from '@anglr/common';\nimport {LayoutComponent, LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {LayoutComponentBase, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {MetadataHistoryManager, SCOPE_ID} from '@anglr/dynamic';\nimport {Func, isPresent} from '@jscrpt/common';\nimport {DndModule} from '@ng-dnd/core';\nimport {Subscription} from 'rxjs';\n\nimport {LayoutDesignerComponentOptions} from './layoutDesigner.options';\nimport {BodyRenderSADirective, CopyDesignerStylesSADirective, DesignerDropzoneSADirective, DesignerMinDimensionSADirective} from '../../directives';\nimport {LayoutComponentsIteratorService, LayoutEditorMetadataExtractor, LayoutEditorMetadataManager} from '../../services';\nimport {LayoutEditorDragPreviewSAComponent} from '../layoutEditorDragPreview/layoutEditorDragPreview.component';\nimport {LayoutDesignerOverlayForSAComponent} from '../layoutDesignerOverlayFor/layoutDesignerOverlayFor.component';\nimport {LayoutEditorMetadataDescriptor} from '../../decorators';\nimport {LAYOUT_HISTORY_MANAGER} from '../../misc/tokens';\nimport {DndCoreDesignerDirective, LayoutDndCoreModule} from '../../modules';\nimport {LayoutComponentDragData} from '../../interfaces';\n\n/*\n Component used as designer component wrapper for layout component\n /\n@Component(\n{\n selector: 'layout-designer-component',\n templateUrl: 'layoutDesigner.component.html',\n styleUrls: ['layoutDesigner.component.css'],\n standalone: true,\n imports:\n [\n //TODO: cleanup\n CommonModule,\n PositionModule,\n LayoutEditorDragPreviewSAComponent,\n LayoutDesignerOverlayForSAComponent,\n DesignerMinDimensionSADirective,\n CopyDesignerStylesSADirective,\n LayoutComponentRendererSADirective,\n DesignerDropzoneSADirective,\n BodyRenderSADirective,\n DndModule,\n LayoutDndCoreModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LayoutDesignerSAComponent extends LayoutComponentBase<LayoutDesignerComponentOptions> implements LayoutComponent<LayoutDesignerComponentOptions>, OnDestroy\n{\n //######################### protected properties #########################\n\n /\n Subscriptions created during initialization\n /\n protected initSubscriptions: Subscription = new Subscription();\n\n //######################### protected properties - template bindings #########################\n\n /\n Indication whether is component selected\n /\n protected get selected(): boolean\n {\n return this.layoutEditorMetadataManager.selectedComponent === this.options?.typeMetadata.id;\n }\n\n /\n Indication whether is component highlighted\n /\n protected get highlighted(): boolean\n {\n return this.layoutEditorMetadataManager.highlightedComponent === this.options?.typeMetadata.id;\n }\n\n /\n Metadata for rendered type\n /\n protected renderedType: LayoutComponentMetadata\|undefined\|null;\n\n //######################### protected properties - overrides #########################\n\n /\n @inheritdoc\n /\n protected override get element(): ElementRef<HTMLElement>\n {\n return this.designerElement;\n }\n\n /\n @inheritdoc\n /\n protected override get extensionsOptions(): any\|undefined\|null\n {\n return this.options?.typeMetadata.options;\n }\n\n //######################### protected properties - children #########################\n\n /\n Instance of designer div element\n /\n @ViewChild('layoutDesigner', {static: true})\n protected designerElement!: ElementRef<HTMLElement>;\n\n //######################### public properties - children #########################\n\n /\n Instance of designer dnd core directive\n /\n @ViewChild('dndCoreDesigner', {static: true})\n public dndCoreDesigner!: DndCoreDesignerDirective;\n\n //######################### public properties #########################\n\n /\n Indication whether drag is disabled for component\n /\n public get dragDisabled(): boolean\n {\n return !this.parent \|\| !!this.editorMetadata?.metaInfo?.dragDisabled;\n }\n\n /\n Gets predicate that returns indication whether item can be dropped into this list\n * //TODO: remove\n /\n public canDropFn: Func<boolean> = () => this.canDrop;\n\n /\n Indication whether item can be dropped here\n /\n public canDrop: boolean = false;\n\n /\n Indication whether drop list is horizontally oriented\n /\n public horizontal: boolean = false;\n\n /\n Component identifier\n /\n public get id(): string\n {\n return this.options?.typeMetadata?.id ?? '';\n }\n\n /\n Index of current layout designer in its parent\n /\n public index: number = 0;\n\n /\n Layout editor metadata\n /\n public editorMetadata: LayoutEditorMetadataDescriptor\|null = null;\n\n //######################### constructor #########################\n constructor(changeDetector: ChangeDetectorRef,\n element: ElementRef<HTMLElement>,\n injector: Injector,\n protected metadataExtractor: LayoutEditorMetadataExtractor,\n protected layoutEditorMetadataManager: LayoutEditorMetadataManager,\n protected iteratorSvc: LayoutComponentsIteratorService,\n @Inject(LAYOUT_HISTORY_MANAGER) protected history: MetadataHistoryManager<LayoutComponentMetadata>,\n @Optional() @Inject(SCOPE_ID) protected scopeId?: string,\n @Inject(LOGGER) @Optional() logger?: Logger,\n @SkipSelf() @Optional() protected parent?: LayoutDesignerSAComponent,)\n {\n super(changeDetector, element, injector, logger);\n }\n\n //######################### public methods - implementation of OnDestroy #########################\n \n /\n Called when component is destroyed\n /\n public override ngOnDestroy(): void\n {\n this.logger?.debug('LayoutDesignerSAComponent: Destroying component {@data}', {id: this.options?.typeMetadata.id});\n\n this.initSubscriptions.unsubscribe();\n\n super.ngOnDestroy();\n\n if(this.options)\n {\n this.layoutEditorMetadataManager.unregisterLayoutDesignerComponent(this.options.typeMetadata.id);\n }\n }\n\n //######################### public methods #########################\n\n /\n Adds descentant component metadata to this component metadata\n * @param dragData - Data from drag n drop event\n /\n // public addDescendant(dragData: CdkDragDrop<LayoutComponentDragData, LayoutComponentDragData, LayoutComponentDragData>): void\n public addDescendant(dragData: LayoutComponentDragData): void\n {\n if(!this.options)\n {\n return;\n }\n\n const parentId = dragData.parentId;\n this.logger?.debug('LayoutDesignerSAComponent: Adding descendant {@data}', {id: dragData.metadata?.id, parent: this.options.typeMetadata.id});\n\n if(!dragData.metadata)\n {\n this.logger?.warn('LayoutDesignerSAComponent: Missing metadata while adding descendant');\n\n return;\n }\n\n //already added to tree, removing old reference\n if(parentId)\n {\n this.history.disable();\n this.layoutEditorMetadataManager.getComponent(parentId)?.removeDescendant(dragData.metadata?.id);\n this.history.enable();\n }\n\n this.editorMetadata?.addDescendant?.(dragData?.metadata, this.options.typeMetadata.options, dragData.index ?? 0);\n this.canDrop = this.editorMetadata?.canDropMetadata?.(this.options.typeMetadata.options) ?? false;\n\n this.renderedType = {...this.options.typeMetadata};\n this.changeDetector.markForCheck();\n this.history.getNewState();\n }\n\n //######################### protected methods #########################\n\n /\n Removes descendant metadata from this component metadata\n * @param id - Id of descendant to be removed\n /\n protected removeDescendant(id: string): void\n {\n if(!this.options)\n {\n return;\n }\n\n this.logger?.debug('LayoutDesignerSAComponent: Removing descendant {@data}', {id: this.options.typeMetadata.id, child: id});\n\n this.editorMetadata?.removeDescendant?.(id, this.options.typeMetadata.options);\n this.canDrop = this.editorMetadata?.canDropMetadata?.(this.options.typeMetadata.options) ?? false;\n this.renderedType = {...this.options.typeMetadata};\n this.changeDetector.markForCheck();\n this.history.getNewState();\n }\n\n //######################### protected methods - template bindings #########################\n\n /\n Shows designer overlay\n * @param event - Mouse event that occured\n /\n protected showOverlay(event: Event): void\n {\n this.logger?.verbose('LayoutDesignerComponent: Showing overlay for {@type}', {name: this.options?.typeMetadata.name, id: this.options?.typeMetadata.id});\n\n event.preventDefault();\n event.stopPropagation();\n\n this.layoutEditorMetadataManager.highlightComponent(this.options?.typeMetadata.id);\n }\n\n /\n Hides designer overlay\n * @param event - Mouse event that occured\n /\n protected hideOverlay(event: Event): void\n {\n if(isPresent(this.parent))\n {\n return;\n }\n\n this.logger?.verbose('LayoutDesignerComponent: Hiding overlay for {@type}', {name: this.options?.typeMetadata.name, id: this.options?.typeMetadata.id});\n\n event.preventDefault();\n event.stopPropagation();\n\n this.layoutEditorMetadataManager.cancelHighlightedComponent();\n }\n\n /\n Marks component as selected\n * @param event - Event that occured\n /\n protected selectComponent(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n if(this.options)\n {\n this.layoutEditorMetadataManager.selectComponent(this.options.typeMetadata.id);\n }\n }\n\n /\n Unselects selected component\n * @param event - Event that occured\n /\n protected unselectComponent(event: MouseEvent): void\n {\n event.preventDefault();\n event.stopPropagation();\n\n this.layoutEditorMetadataManager.unselectComponent();\n }\n\n /\n Removes itself from tree\n /\n protected remove(): void\n {\n if(!this.parent \|\| !this.options)\n {\n return;\n }\n\n this.parent.removeDescendant(this.options.typeMetadata.id);\n }\n\n //######################### protected methods - overrides #########################\n\n /\n @inheritdoc\n /\n protected override async onInit(): Promise<void>\n {\n await super.onInit();\n\n if(!this.options)\n {\n return;\n }\n\n this.options.typeMetadata.scope = this.scopeId;\n\n if(this.parent?.options)\n {\n for await(const child of this.iteratorSvc.getChildrenIteratorFor(this.parent.options?.typeMetadata))\n {\n if(this.options.typeMetadata.id === child.metadata.id)\n {\n this.index = child.index;\n\n break;\n }\n }\n }\n\n //TODO: optimize\n this.initSubscriptions.add(this.layoutEditorMetadataManager.selectedChange.subscribe(() => this.changeDetector.detectChanges()));\n this.initSubscriptions.add(this.layoutEditorMetadataManager.highlightedChange.subscribe(() => this.changeDetector.detectChanges()));\n\n this.editorMetadata = await this.metadataExtractor.extractMetadata(this.options.typeMetadata);\n this.canDrop = this.editorMetadata?.canDropMetadata?.(this.options.typeMetadata.options) ?? false;\n this.layoutEditorMetadataManager.registerLayoutDesignerComponent(this, this.options.typeMetadata.id, this.parent?.options?.typeMetadata.id);\n }\n\n /\n @inheritdoc\n /\n protected override onOptionsSet(): void\n {\n if(!this.options)\n {\n return;\n }\n\n this.renderedType = {...this.options.typeMetadata};\n this.horizontal = this.editorMetadata?.isHorizontalDrop?.(this.options.typeMetadata.options) ?? false;\n }\n}","<div class=\"designer-overlay\" \n #layoutDesigner\n #dndCore=\"dndCoreDesigner\"\n [dndCoreDesigner]=\"{metadata: renderedType, parentId: parent?.renderedType?.id, index: index}\"\n [dropzoneElement]=\"layoutDropzone\"\n [dragDisabled]=\"dragDisabled\"\n [dragSource]=\"dndCore.drag\"\n [noHTML5Preview]=\"true\"\n (dropMetadata)=\"addDescendant($event)\"\n [copyDesignerStyles]=\"renderedType\"\n (mouseleave)=\"hideOverlay($event)\"\n (mouseover)=\"showOverlay($event)\"\n (click)=\"selectComponent($event)\"\n (dblclick)=\"unselectComponent($event)\">\n <div class=\"designer-dropzone\"\n #layoutDropzone\n designerMinWidth\n [canDrop]=\"canDrop\"\n [editorMetadata]=\"editorMetadata\"\n [horizontal]=\"parent?.horizontal ?? false\"\n [dropTarget]=\"dndCore.dropzone\"\n [isDropZone]=\"canDrop\">\n <ng-template #renderer=\"layoutComponentRenderer\" [layoutComponentRenderer]=\"renderedType\" [layoutComponentRendererDisableTransformer]=\"true\"></ng-template>\n\n <ng-container ngIf=\"highlighted \|\| selected\">\n <div class=\"designer-overlay-border\"></div>\n <div class=\"designer-overlay-layout\" [layoutDesignerOverlayFor]=\"renderer\"></div>\n\n <div class=\"designer-overlay-title\"\n bodyRender\n [positionTo]=\"layoutDesigner\"\n placement=\"TopStart\">{{editorMetadata?.metaInfo?.name ?? renderedType?.name}}</div>\n\n <ng-container ngIf=\"!!parent && parent.editorMetadata?.removeDescendant\">\n <div *bodyRender\n class=\"designer-overlay-remove\"\n [positionTo]=\"layoutDesigner\"\n placement=\"TopEnd\"\n (click)=\"remove()\">\n <span class=\"fas fa-times\"></span>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</div>\n"]}

package/es2015/layout-editor/src/components/layoutEditor/layoutEditor.component.js CHANGED Viewed

@@ -10,11 +10,14 @@ import { ComponentsTreeSAComponent } from '../componentsTree/componentsTree.comp
 import { PropertiesEditorSAComponent } from '../propertiesEditor/propertiesEditor.component';
 import { LAYOUT_DESIGNER_COMPONENT_TRANSFORM } from '../../misc/providers';
 import { LAYOUT_HISTORY_MANAGER } from '../../misc/tokens';
-import { DndBusService } from '../../modules';
+import { DndBusService, LayoutDndCoreModule } from '../../modules';
+import { LayoutEditorDragPreviewSAComponent } from '../layoutEditorDragPreview/layoutEditorDragPreview.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@anglr/dynamic";
-import * as i2 from "../../../../src/modules/packageManager/components/packageManager/packageManager.component";
-import * as i3 from "@angular/material/tabs";
+import * as i2 from "../../modules/layoutDndCore/components/dndCorePreview/dndCorePreview.component";
+import * as i3 from "../../modules/layoutDndCore/directives/dndCorePreviewTemplate/dndCorePreviewTemplate.directive";
+import * as i4 from "../../../../src/modules/packageManager/components/packageManager/packageManager.component";
+import * as i5 from "@angular/material/tabs";
 /**
  * Component that represents layout editor with palette, tree and properties
  */
@@ -76,7 +79,7 @@ LayoutEditorSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 LayoutEditorSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: LayoutEditorSAComponent, isStandalone: true, selector: "layout-editor", inputs: { metadata: "metadata" }, providers: [
         LAYOUT_DESIGNER_COMPONENT_TRANSFORM,
         DndBusService,
-    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-flex-row margin-top-big dynamic-flex-1\">\n    <mat-tab-group>\n        <mat-tab label=\"Hierarchy\">\n            <components-tree></components-tree>\n        </mat-tab>\n\n        <mat-tab label=\"Palette\">\n            <package-manager></package-manager>\n            <components-palette></components-palette>\n        </mat-tab>\n    </mat-tab-group>\n\n    <div class=\"dynamic-flex-1 layout-content thin-scrollbar\">\n        <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n    </div>\n\n    <properties-editor></properties-editor>\n</div>", styles: [".layout-content\n{\n    overflow-y: scroll;\n    overflow-x: hidden;\n}", ":host{display: flex;}"], dependencies: [{ kind: "component", type: ComponentsTreeSAComponent, selector: "components-tree" }, { kind: "component", type: ComponentsPaletteSAComponent, selector: "components-palette" }, { kind: "component", type: PropertiesEditorSAComponent, selector: "properties-editor" }, { kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererInjector", "layoutComponentRendererDisableTransformer"], outputs: ["layoutComponentRendererComponentChange", "componentElementChange"], exportAs: ["layoutComponentRenderer"] }, { kind: "ngmodule", type: PackageManagerModule }, { kind: "component", type: i2.PackageManagerComponent, selector: "package-manager" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-flex-row margin-top-big dynamic-flex-1\">\n    <mat-tab-group>\n        <mat-tab label=\"Hierarchy\">\n            <components-tree></components-tree>\n        </mat-tab>\n\n        <mat-tab label=\"Palette\">\n            <package-manager></package-manager>\n            <components-palette></components-palette>\n        </mat-tab>\n    </mat-tab-group>\n\n    <div class=\"dynamic-flex-1 layout-content dynamic-thin-scrollbar\">\n        <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n    </div>\n\n    <properties-editor></properties-editor>\n</div>\n\n<dnd-core-drag-preview>\n    <layout-editor-drag-preview class=\"mat-elevation-z4\" *dndCorePreviewTemplate=\"let data\" [layoutMetadata]=\"data.dragData.metadata\"></layout-editor-drag-preview>\n</dnd-core-drag-preview>", styles: [".layout-content\n{\n    overflow-y: scroll;\n    overflow-x: hidden;\n}", ":host{display: flex;}"], dependencies: [{ kind: "component", type: ComponentsTreeSAComponent, selector: "components-tree" }, { kind: "component", type: ComponentsPaletteSAComponent, selector: "components-palette" }, { kind: "component", type: PropertiesEditorSAComponent, selector: "properties-editor" }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "component", type: i2.DndCorePreviewComponent, selector: "dnd-core-drag-preview" }, { kind: "directive", type: i3.DndCorePreviewTemplateDirective, selector: "[dndCorePreviewTemplate]", inputs: ["dndCorePreviewTemplateType"] }, { kind: "component", type: LayoutEditorDragPreviewSAComponent, selector: "layout-editor-drag-preview", inputs: ["layoutMetadata"] }, { kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererInjector", "layoutComponentRendererDisableTransformer"], outputs: ["layoutComponentRendererComponentChange", "componentElementChange"], exportAs: ["layoutComponentRenderer"] }, { kind: "ngmodule", type: PackageManagerModule }, { kind: "component", type: i4.PackageManagerComponent, selector: "package-manager" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: LayoutEditorSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'layout-editor', providers: [
@@ -86,10 +89,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                         ComponentsTreeSAComponent,
                         ComponentsPaletteSAComponent,
                         PropertiesEditorSAComponent,
+                        LayoutDndCoreModule,
+                        LayoutEditorDragPreviewSAComponent,
                         LayoutComponentRendererSADirective,
                         PackageManagerModule,
                         MatTabsModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-flex-row margin-top-big dynamic-flex-1\">\n    <mat-tab-group>\n        <mat-tab label=\"Hierarchy\">\n            <components-tree></components-tree>\n        </mat-tab>\n\n        <mat-tab label=\"Palette\">\n            <package-manager></package-manager>\n            <components-palette></components-palette>\n        </mat-tab>\n    </mat-tab-group>\n\n    <div class=\"dynamic-flex-1 layout-content thin-scrollbar\">\n        <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n    </div>\n\n    <properties-editor></properties-editor>\n</div>", styles: [".layout-content\n{\n    overflow-y: scroll;\n    overflow-x: hidden;\n}", ":host{display: flex;}"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-flex-row margin-top-big dynamic-flex-1\">\n    <mat-tab-group>\n        <mat-tab label=\"Hierarchy\">\n            <components-tree></components-tree>\n        </mat-tab>\n\n        <mat-tab label=\"Palette\">\n            <package-manager></package-manager>\n            <components-palette></components-palette>\n        </mat-tab>\n    </mat-tab-group>\n\n    <div class=\"dynamic-flex-1 layout-content dynamic-thin-scrollbar\">\n        <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n    </div>\n\n    <properties-editor></properties-editor>\n</div>\n\n<dnd-core-drag-preview>\n    <layout-editor-drag-preview class=\"mat-elevation-z4\" *dndCorePreviewTemplate=\"let data\" [layoutMetadata]=\"data.dragData.metadata\"></layout-editor-drag-preview>\n</dnd-core-drag-preview>", styles: [".layout-content\n{\n    overflow-y: scroll;\n    overflow-x: hidden;\n}", ":host{display: flex;}"] }]
         }], ctorParameters: function () { return [{ type: i1.MetadataHistoryManager, decorators: [{
                     type: Inject,
                     args: [LAYOUT_HISTORY_MANAGER]

package/es2015/layout-editor/src/components/layoutEditor/layoutEditor.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"layoutEditor.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/layoutEditor/layoutEditor.component.ts","../../../../../layout-editor/src/components/layoutEditor/layoutEditor.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAuC,MAAM,EAAU,iBAAiB,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC1J,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAA0B,kCAAkC,EAAC,MAAM,uBAAuB,CAAC;AAClG,OAAO,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAE,oBAAoB,EAAC,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,4BAA4B,EAAC,MAAM,kDAAkD,CAAC;AAC9F,OAAO,EAAC,yBAAyB,EAAC,MAAM,4CAA4C,CAAC;AACrF,OAAO,EAAC,2BAA2B,EAAC,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAC,mCAAmC,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC~~;;;;;AAE5C~~;;GAEG;~~AAwBH~~,MAAM,OAAO,uBAAuB;IAiBhC,iEAAiE;IACjE,YAAsD,OAAwD,EACxF,cAAiC,EACrB,OAAuB;QAFH,YAAO,GAAP,OAAO,CAAiD;QACxF,mBAAc,GAAd,cAAc,CAAmB;QACrB,YAAO,GAAP,OAAO,CAAgB;QAlBzD,0EAA0E;QAE1E;;WAEG;QACO,sBAAiB,GAAiB,IAAI,YAAY,EAAE,CAAC;QAE/D,gFAAgF;QAEhF;;WAEG;QAEI,aAAQ,GAA2C,IAAI,CAAC;QAO3D,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,+FAA+F;IAE/F;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE;YAE7D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC,CAAC;QAEJ,IAAG,IAAI,CAAC,OAAO,EACf;YACI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YACnF,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SACtF;IACL,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW,CAAC,OAAsB;QAErC,IAAG,MAAM,CAA0B,UAAU,CAAC,IAAI,OAAO,EACzD;YACI,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAErB,IAAG,IAAI,CAAC,QAAQ,EAChB;gBACI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC/C;SACJ;IACL,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;;QAEd,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,CAAC;QACrC,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,EAAE,CAAC;IAC5B,CAAC;;oHAxEQ,uBAAuB,kBAkBZ,sBAAsB;wGAlBjC,uBAAuB,~~8FAhBhC~~;QACI,mCAAmC;QACnC,aAAa;KAChB,+~~CC5BL,+kBAiBM~~,~~0JDeE~~,yBAAyB,4DACzB,4BAA4B,+DAC5B,2BAA2B,~~8DAC3B~~,kCAAkC,gTAClC,oBAAoB,oHACpB,aAAa;2FAIR,uBAAuB;~~kBAvBnC~~,SAAS;+BAEI,eAAe,aAKzB;wBACI,mCAAmC;wBACnC,aAAa;qBAChB,cACW,IAAI,WAEhB;wBACI,yBAAyB;wBACzB,4BAA4B;wBAC5B,2BAA2B;wBAC3B,kCAAkC;wBAClC,oBAAoB;wBACpB,aAAa;qBAChB,mBACgB,uBAAuB,CAAC,MAAM;;0BAoBlC,MAAM;2BAAC,sBAAsB;;0BAE7B,QAAQ;4CALd,QAAQ;sBADd,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, OnDestroy, OnChanges, SimpleChanges, Inject, OnInit, ChangeDetectorRef, Optional} from '@angular/core';\nimport {MatTabsModule} from '@angular/material/tabs';\nimport {LayoutComponentMetadata, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {HostDisplayFlexStyle} from '@anglr/common';\nimport {EditorHotkeys, MetadataHistoryManager, PackageManagerModule} from '@anglr/dynamic';\nimport {nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {ComponentsPaletteSAComponent} from '../componentsPalette/componentsPalette.component';\nimport {ComponentsTreeSAComponent} from '../componentsTree/componentsTree.component';\nimport {PropertiesEditorSAComponent} from '../propertiesEditor/propertiesEditor.component';\nimport {LAYOUT_DESIGNER_COMPONENT_TRANSFORM} from '../../misc/providers';\nimport {LAYOUT_HISTORY_MANAGER} from '../../misc/tokens';\nimport {DndBusService} from '../../modules';\n\n/*\n Component that represents layout editor with palette, tree and properties\n /\n@Component(\n{\n selector: 'layout-editor',\n templateUrl: 'layoutEditor.component.html',\n styleUrls: ['layoutEditor.component.css'],\n styles: [HostDisplayFlexStyle],\n providers:\n [\n LAYOUT_DESIGNER_COMPONENT_TRANSFORM,\n DndBusService,\n ],\n standalone: true,\n imports:\n [\n ComponentsTreeSAComponent,\n ComponentsPaletteSAComponent,\n PropertiesEditorSAComponent,\n LayoutComponentRendererSADirective,\n PackageManagerModule,\n MatTabsModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LayoutEditorSAComponent implements OnDestroy, OnChanges, OnInit\n{\n //######################### protected properties #########################\n\n /\n Subscriptions created during initialization\n /\n protected initSubscriptions: Subscription = new Subscription();\n\n //######################### public properties - inputs #########################\n\n /\n Metadata that are used for rendering\n /\n @Input()\n public metadata: LayoutComponentMetadata\|undefined\|null = null;\n\n //######################### constructor #########################\n constructor(@Inject(LAYOUT_HISTORY_MANAGER) protected history: MetadataHistoryManager<LayoutComponentMetadata>,\n protected changeDetector: ChangeDetectorRef,\n @Optional() protected hotkeys?: EditorHotkeys,)\n {\n hotkeys?.init();\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /\n Initialize component\n /\n public ngOnInit(): void\n {\n this.initSubscriptions.add(this.history.pop.subscribe(metadata =>\n {\n this.metadata = metadata;\n this.changeDetector.detectChanges();\n }));\n\n if(this.hotkeys)\n {\n this.initSubscriptions.add(this.hotkeys.undo.subscribe(() => this.history.undo()));\n this.initSubscriptions.add(this.hotkeys.redo.subscribe(() => this.history.redo()));\n }\n }\n\n //######################### public methods - implementation of OnChanges #########################\n \n /\n Called when input value changes\n /\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(nameof<LayoutEditorSAComponent>('metadata') in changes)\n {\n this.history.clean();\n \n if(this.metadata)\n {\n this.history.setInitialState(this.metadata);\n }\n }\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 this.hotkeys?.destroy();\n }\n}","<div class=\"dynamic-flex-row margin-top-big dynamic-flex-1\">\n <mat-tab-group>\n <mat-tab label=\"Hierarchy\">\n <components-tree></components-tree>\n </mat-tab>\n\n <mat-tab label=\"Palette\">\n <package-manager></package-manager>\n <components-palette></components-palette>\n </mat-tab>\n </mat-tab-group>\n\n <div class=\"dynamic-flex-1 layout-content thin-scrollbar\">\n <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n </div>\n\n <properties-editor></properties-editor>\n</div>"]}
1	+ {"version":3,"file":"layoutEditor.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/layoutEditor/layoutEditor.component.ts","../../../../../layout-editor/src/components/layoutEditor/layoutEditor.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, OnDestroy, OnChanges, SimpleChanges, Inject, OnInit, ChangeDetectorRef, Optional} from '@angular/core';\nimport {MatTabsModule} from '@angular/material/tabs';\nimport {LayoutComponentMetadata, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {HostDisplayFlexStyle} from '@anglr/common';\nimport {EditorHotkeys, MetadataHistoryManager, PackageManagerModule} from '@anglr/dynamic';\nimport {nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {ComponentsPaletteSAComponent} from '../componentsPalette/componentsPalette.component';\nimport {ComponentsTreeSAComponent} from '../componentsTree/componentsTree.component';\nimport {PropertiesEditorSAComponent} from '../propertiesEditor/propertiesEditor.component';\nimport {LAYOUT_DESIGNER_COMPONENT_TRANSFORM} from '../../misc/providers';\nimport {LAYOUT_HISTORY_MANAGER} from '../../misc/tokens';\nimport {DndBusService, LayoutDndCoreModule} from '../../modules';\nimport {LayoutEditorDragPreviewSAComponent} from '../layoutEditorDragPreview/layoutEditorDragPreview.component';\n\n/*\n Component that represents layout editor with palette, tree and properties\n /\n@Component(\n{\n selector: 'layout-editor',\n templateUrl: 'layoutEditor.component.html',\n styleUrls: ['layoutEditor.component.css'],\n styles: [HostDisplayFlexStyle],\n providers:\n [\n LAYOUT_DESIGNER_COMPONENT_TRANSFORM,\n DndBusService,\n ],\n standalone: true,\n imports:\n [\n ComponentsTreeSAComponent,\n ComponentsPaletteSAComponent,\n PropertiesEditorSAComponent,\n LayoutDndCoreModule,\n LayoutEditorDragPreviewSAComponent,\n LayoutComponentRendererSADirective,\n PackageManagerModule,\n MatTabsModule,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LayoutEditorSAComponent implements OnDestroy, OnChanges, OnInit\n{\n //######################### protected properties #########################\n\n /\n Subscriptions created during initialization\n /\n protected initSubscriptions: Subscription = new Subscription();\n\n //######################### public properties - inputs #########################\n\n /\n Metadata that are used for rendering\n /\n @Input()\n public metadata: LayoutComponentMetadata\|undefined\|null = null;\n\n //######################### constructor #########################\n constructor(@Inject(LAYOUT_HISTORY_MANAGER) protected history: MetadataHistoryManager<LayoutComponentMetadata>,\n protected changeDetector: ChangeDetectorRef,\n @Optional() protected hotkeys?: EditorHotkeys,)\n {\n hotkeys?.init();\n }\n\n //######################### public methods - implementation of OnInit #########################\n \n /\n Initialize component\n /\n public ngOnInit(): void\n {\n this.initSubscriptions.add(this.history.pop.subscribe(metadata =>\n {\n this.metadata = metadata;\n this.changeDetector.detectChanges();\n }));\n\n if(this.hotkeys)\n {\n this.initSubscriptions.add(this.hotkeys.undo.subscribe(() => this.history.undo()));\n this.initSubscriptions.add(this.hotkeys.redo.subscribe(() => this.history.redo()));\n }\n }\n\n //######################### public methods - implementation of OnChanges #########################\n \n /\n Called when input value changes\n /\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(nameof<LayoutEditorSAComponent>('metadata') in changes)\n {\n this.history.clean();\n \n if(this.metadata)\n {\n this.history.setInitialState(this.metadata);\n }\n }\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 this.hotkeys?.destroy();\n }\n}","<div class=\"dynamic-flex-row margin-top-big dynamic-flex-1\">\n <mat-tab-group>\n <mat-tab label=\"Hierarchy\">\n <components-tree></components-tree>\n </mat-tab>\n\n <mat-tab label=\"Palette\">\n <package-manager></package-manager>\n <components-palette></components-palette>\n </mat-tab>\n </mat-tab-group>\n\n <div class=\"dynamic-flex-1 layout-content dynamic-thin-scrollbar\">\n <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n </div>\n\n <properties-editor></properties-editor>\n</div>\n\n<dnd-core-drag-preview>\n <layout-editor-drag-preview class=\"mat-elevation-z4\" dndCorePreviewTemplate=\"let data\" [layoutMetadata]=\"data.dragData.metadata\"></layout-editor-drag-preview>\n</dnd-core-drag-preview>"]}

package/es2015/layout-editor/src/components/layoutEditorDragPreview/layoutEditorDragPreview.component.js CHANGED Viewed

@@ -6,13 +6,11 @@ import * as i0 from "@angular/core";
 export class LayoutEditorDragPreviewSAComponent {
 }
 LayoutEditorDragPreviewSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: LayoutEditorDragPreviewSAComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LayoutEditorDragPreviewSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: LayoutEditorDragPreviewSAComponent, isStandalone: true, selector: "layout-editor-drag-preview", inputs: { editorMetadata: "editorMetadata", layoutMetadata: "layoutMetadata" }, ngImport: i0, template: "<span class=\"semi-bold\">{{editorMetadata?.metaInfo?.name ?? layoutMetadata?.name}}</span><span class=\"margin-left-extra-small small-text\">#{{layoutMetadata?.displayName || layoutMetadata?.id}}</span>", styles: [":host\n{\n    display: block;\n    background-color: #eee;\n    border-radius: 6px;\n    padding: 3px 8px;\n}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LayoutEditorDragPreviewSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: LayoutEditorDragPreviewSAComponent, isStandalone: true, selector: "layout-editor-drag-preview", inputs: { layoutMetadata: "layoutMetadata" }, ngImport: i0, template: "<span class=\"dynamic-semi-bold\">{{layoutMetadata?.name}}</span><span class=\"margin-left-extra-small small-text\">#{{layoutMetadata?.displayName || layoutMetadata?.id}}</span>", styles: [":host\n{\n    display: block;\n    background-color: #eee;\n    border-radius: 6px;\n    padding: 3px 8px;\n}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: LayoutEditorDragPreviewSAComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'layout-editor-drag-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"semi-bold\">{{editorMetadata?.metaInfo?.name ?? layoutMetadata?.name}}</span><span class=\"margin-left-extra-small small-text\">#{{layoutMetadata?.displayName || layoutMetadata?.id}}</span>", styles: [":host\n{\n    display: block;\n    background-color: #eee;\n    border-radius: 6px;\n    padding: 3px 8px;\n}"] }]
-        }], propDecorators: { editorMetadata: [{
-                type: Input
-            }], layoutMetadata: [{
+            args: [{ selector: 'layout-editor-drag-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"dynamic-semi-bold\">{{layoutMetadata?.name}}</span><span class=\"margin-left-extra-small small-text\">#{{layoutMetadata?.displayName || layoutMetadata?.id}}</span>", styles: [":host\n{\n    display: block;\n    background-color: #eee;\n    border-radius: 6px;\n    padding: 3px 8px;\n}"] }]
+        }], propDecorators: { layoutMetadata: [{
                 type: Input
             }] } });
 //# sourceMappingURL=layoutEditorDragPreview.component.js.map

package/es2015/layout-editor/src/components/layoutEditorDragPreview/layoutEditorDragPreview.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"layoutEditorDragPreview.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/layoutEditorDragPreview/layoutEditorDragPreview.component.ts","../../../../../layout-editor/src/components/layoutEditorDragPreview/layoutEditorDragPreview.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;;~~AAKxE~~;;GAEG;AASH,MAAM,OAAO,kCAAkC;;+HAAlC,kCAAkC;mHAAlC,kCAAkC,~~sKChB~~/C,~~6MAAuM~~;~~2FDgB1L~~,kCAAkC;kBAR9C,SAAS;+BAEI,4BAA4B,cAG1B,IAAI,mBACC,uBAAuB,CAAC,MAAM;8BAUxC,cAAc;sBADpB,KAAK~~;gBAOC,cAAc;sBADpB,KAAK~~","sourcesContent":["import {Component, ChangeDetectionStrategy, Input} from '@angular/core';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\n\~~nimport {LayoutEditorMetadataDescriptor} from '../../decorators';\~~n\n/*\n Component used for displaying layout editor drag preview\n /\n@Component(\n{\n selector: 'layout-editor-drag-preview',\n templateUrl: 'layoutEditorDragPreview.component.html',\n styleUrls: ['layoutEditorDragPreview.component.css'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LayoutEditorDragPreviewSAComponent\n{\n //######################### public properties - inputs #########################\n\n /\n Layout ~~editor~~ metadata for dragged component\n /\n @Input()\n public ~~editorMetadata?: LayoutEditorMetadataDescriptor\|null;\n\n /\n Layout metadata for dragged component\n */\n @Input()\n public~~ layoutMetadata?: LayoutComponentMetadata\|null;\n}","<span class=\"semi-bold\">{{~~editorMetadata?.metaInfo?.name ??~~ layoutMetadata?.name}}</span><span class=\"margin-left-extra-small small-text\">#{{layoutMetadata?.displayName \|\| layoutMetadata?.id}}</span>"]}
1	+ {"version":3,"file":"layoutEditorDragPreview.component.js","sourceRoot":"","sources":["../../../../../layout-editor/src/components/layoutEditorDragPreview/layoutEditorDragPreview.component.ts","../../../../../layout-editor/src/components/layoutEditorDragPreview/layoutEditorDragPreview.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;;AAGxE;;GAEG;AASH,MAAM,OAAO,kCAAkC;;+HAAlC,kCAAkC;mHAAlC,kCAAkC,oICd/C,mLAA6K;2FDchK,kCAAkC;kBAR9C,SAAS;+BAEI,4BAA4B,cAG1B,IAAI,mBACC,uBAAuB,CAAC,MAAM;8BAUxC,cAAc;sBADpB,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input} from '@angular/core';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\n\n/*\n Component used for displaying layout editor drag preview\n /\n@Component(\n{\n selector: 'layout-editor-drag-preview',\n templateUrl: 'layoutEditorDragPreview.component.html',\n styleUrls: ['layoutEditorDragPreview.component.css'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LayoutEditorDragPreviewSAComponent\n{\n //######################### public properties - inputs #########################\n\n /\n Layout metadata for dragged component\n */\n @Input()\n public layoutMetadata?: LayoutComponentMetadata\|null;\n}","<span class=\"dynamic-semi-bold\">{{layoutMetadata?.name}}</span><span class=\"margin-left-extra-small small-text\">#{{layoutMetadata?.displayName \|\| layoutMetadata?.id}}</span>"]}