ngx-emfular-integration 0.1.0 → 0.2.0

package/details-overlay.css

@@ -0,0 +1,30 @@
+/* Backdrop: slightly darkened */
+.cdk-overlay-dark-backdrop {
+    background: rgba(0, 0, 0, 0.35);
+}
+
+/* Outer container of the details panel */
+.basic-details-panel {
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 24px;
+    box-sizing: border-box;
+    max-width: 700px;
+    max-height: 90vh;
+    overflow: hidden;
+    box-shadow:
+            0 4px 12px rgba(0, 0, 0, 0.15),
+            0 2px 4px rgba(0, 0, 0, 0.1);
+    animation: detailsFadeIn 120ms ease-out;
+}
+
+@keyframes detailsFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

package/fesm2022/ngx-emfular-integration.mjs

@@ -1,10 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, Input, Component, ViewChild } from '@angular/core';
-import { Deserializer } from 'emfular';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, Input, Component, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Deserializer, getAllAttributes } from 'emfular';
 import * as i1 from 'ngx-emfular-helper';
 import { HistoryService, InputHandler } from 'ngx-emfular-helper';
 import { NgForOf, NgIf, CommonModule } from '@angular/common';
 import { PositionHelper, RectangleWithTextComponent, ArrowBetweenElemsComponent } from 'ngx-svg-graphics';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject } from 'rxjs';
+import * as i1$2 from '@angular/cdk/overlay';
 import * as i2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i3 from '@angular/material/icon';
@@ -174,58 +179,276 @@ class GraphicalHelper {
     }
 }
 
+class IdHelper {
+    static getLabel(ref) {
+        // 1. If the model has a "name" attribute → use it
+        if (ref.name) {
+            return `${ref.name}`;
+        }
+        // 2. Otherwise: first primitive attribute
+        const attrs = getAllAttributes(ref.constructor);
+        for (const [key] of attrs) {
+            const value = ref[key];
+            if (typeof value === "string" || typeof value === "number") {
+                return `${value}`;
+            }
+        }
+        /*
+        // 3. Otherwise: use ID (EMFular always has stable IDs)
+        if ((ref as any).id) {
+            return `(id=${(ref as any).id})`;
+        }*/
+        // 4. Otherwise: fallback
+        return "(unnamed)";
+    }
+}
+
 class ReferencableBoxComponent {
     referencable;
     position;
     color = "#efad78";
+    chooseElement = new EventEmitter();
+    isExpandedArray = [];
+    toggleExpand(i) {
+        this.isExpandedArray[i] = !this.isExpandedArray[i];
+    }
+    choose(element) {
+        this.chooseElement.emit(element);
+    }
     constructor() { }
     GraphicalHelper = GraphicalHelper;
     PositionHelper = PositionHelper;
+    IdHelper = IdHelper;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ReferencableBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ReferencableBoxComponent, isStandalone: true, selector: "[referencable-box]", inputs: { referencable: "referencable", position: "position", color: "color" }, ngImport: i0, template: "<svg:g [attr.id]=\"referencable.$gId\">\n\n    <g rectangle-with-text\n       [id]=\"referencable.$gId + '_main'\"\n       [text]=\"referencable.getEClass()\"\n       [position]=\"position\"\n       [color]=\"color\"\n    >\n    </g>\n\n    <!-- containers -->\n    @for (container of referencable.$treeChildren;\n        track referencable.$gId + '_' + container.referenceName\n            ; let i = $index) {\n\n        @let containerKey = referencable.$gId + '_' + container.referenceName;\n        @let containerAnchorBox = PositionHelper.computeChildBBox(\n            i,\n            referencable.$treeChildren.length,\n            position\n        );\n\n        <!-- reference box -->\n        <g rectangle-with-text\n           [id]=\"containerKey + '_ref'\"\n           [text]=\"container.referenceName\"\n           [position]=\"containerAnchorBox\"\n           color=\"#ede679\"\n        >\n        </g>\n\n        <!-- arrow from main box to reference -->\n        <g arrowElems\n           [startGID]=\"referencable.$gId\"\n           startSuffix=\"_main\"\n           [endGID]=\"containerKey\"\n           endSuffix=\"_ref\">\n        </g>\n\n        <!-- real children inside this reference -->\n        @let realChildren = GraphicalHelper.getAsList(container);\n\n        @for (elem of realChildren; track elem.$gId; let j = $index) {\n\n            @let elemBox = PositionHelper.computeChildBBox(\n                j,\n                realChildren.length,\n                containerAnchorBox\n            );\n            <g referencable-box\n               [referencable]=\"elem\"\n               [position]=\"elemBox\"\n            >\n            </g>\n            <!-- arrow from reference to child box -->\n            <g arrowElems\n               [startGID]=\"containerKey\"\n               startSuffix=\"_ref\"\n               [endGID]=\"elem.$gId\"\n               endSuffix=\"_main\">\n            </g>\n        }\n    }\n</svg:g>\n", styles: [""], dependencies: [{ kind: "component", type: ReferencableBoxComponent, selector: "[referencable-box]", inputs: ["referencable", "position", "color"] }, { kind: "component", type: RectangleWithTextComponent, selector: "[rectangle-with-text]", inputs: ["id", "text", "position", "color"], outputs: ["textChange"] }, { kind: "component", type: ArrowBetweenElemsComponent, selector: "[arrowElems]", inputs: ["startGID", "startSuffix", "endGID", "endSuffix", "arrowType", "breaks", "text", "style"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ReferencableBoxComponent, isStandalone: true, selector: "[referencable-box]", inputs: { referencable: "referencable", position: "position", color: "color" }, outputs: { chooseElement: "chooseElement" }, ngImport: i0, template: "<svg:g [attr.id]=\"referencable.$gId\">\n\n    <g rectangle-with-text\n       (click)=\"choose(referencable)\"\n       [id]=\"referencable.$gId + '_main'\"\n       [text]=\"IdHelper.getLabel(referencable)\"\n       [position]=\"position\"\n       [color]=\"color\"\n    >\n    </g>\n\n    <!-- containers -->\n    @for (container of referencable.$treeChildren;\n        track referencable.$gId + '_' + container.referenceName\n            ; let i = $index) {\n\n        @let containerKey = referencable.$gId + '_' + container.referenceName;\n        @let containerAnchorBox = PositionHelper.computeChildBBox(\n            i,\n            referencable.$treeChildren.length,\n            position\n        );\n\n        <!-- reference box -->\n        <g rectangle-with-text\n           (click)=\"toggleExpand(i)\"\n           [id]=\"containerKey + '_ref'\"\n           [text]=\"container.referenceName\"\n           [position]=\"containerAnchorBox\"\n           color=\"#ede679\"\n        >\n        </g>\n\n        <!-- arrow from main box to reference -->\n        <g arrowElems\n           [startGID]=\"referencable.$gId\"\n           startSuffix=\"_main\"\n           [endGID]=\"containerKey\"\n           endSuffix=\"_ref\">\n        </g>\n\n        @if (isExpandedArray[i]) {\n            <!-- real children inside this reference -->\n            @let realChildren = GraphicalHelper.getAsList(container);\n\n            @for (elem of realChildren; track elem.$gId; let j = $index) {\n\n                @let elemBox = PositionHelper.computeChildBBox(\n                    j,\n                    realChildren.length,\n                    containerAnchorBox\n                );\n                <g referencable-box\n                   (chooseElement)=\"choose($event)\"\n                   [referencable]=\"elem\"\n                   [position]=\"elemBox\"\n                >\n                </g>\n                <!-- arrow from reference to child box -->\n                <g arrowElems\n                   [startGID]=\"containerKey\"\n                   startSuffix=\"_ref\"\n                   [endGID]=\"elem.$gId\"\n                   endSuffix=\"_main\">\n                </g>\n            }\n\n        }\n    }\n</svg:g>\n", styles: [""], dependencies: [{ kind: "component", type: ReferencableBoxComponent, selector: "[referencable-box]", inputs: ["referencable", "position", "color"], outputs: ["chooseElement"] }, { kind: "component", type: RectangleWithTextComponent, selector: "[rectangle-with-text]", inputs: ["id", "text", "position", "color"], outputs: ["textChange"] }, { kind: "component", type: ArrowBetweenElemsComponent, selector: "[arrowElems]", inputs: ["startGID", "startSuffix", "endGID", "endSuffix", "arrowType", "breaks", "text", "style"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ReferencableBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[referencable-box]', imports: [RectangleWithTextComponent, ArrowBetweenElemsComponent], template: "<svg:g [attr.id]=\"referencable.$gId\">\n\n    <g rectangle-with-text\n       [id]=\"referencable.$gId + '_main'\"\n       [text]=\"referencable.getEClass()\"\n       [position]=\"position\"\n       [color]=\"color\"\n    >\n    </g>\n\n    <!-- containers -->\n    @for (container of referencable.$treeChildren;\n        track referencable.$gId + '_' + container.referenceName\n            ; let i = $index) {\n\n        @let containerKey = referencable.$gId + '_' + container.referenceName;\n        @let containerAnchorBox = PositionHelper.computeChildBBox(\n            i,\n            referencable.$treeChildren.length,\n            position\n        );\n\n        <!-- reference box -->\n        <g rectangle-with-text\n           [id]=\"containerKey + '_ref'\"\n           [text]=\"container.referenceName\"\n           [position]=\"containerAnchorBox\"\n           color=\"#ede679\"\n        >\n        </g>\n\n        <!-- arrow from main box to reference -->\n        <g arrowElems\n           [startGID]=\"referencable.$gId\"\n           startSuffix=\"_main\"\n           [endGID]=\"containerKey\"\n           endSuffix=\"_ref\">\n        </g>\n\n        <!-- real children inside this reference -->\n        @let realChildren = GraphicalHelper.getAsList(container);\n\n        @for (elem of realChildren; track elem.$gId; let j = $index) {\n\n            @let elemBox = PositionHelper.computeChildBBox(\n                j,\n                realChildren.length,\n                containerAnchorBox\n            );\n            <g referencable-box\n               [referencable]=\"elem\"\n               [position]=\"elemBox\"\n            >\n            </g>\n            <!-- arrow from reference to child box -->\n            <g arrowElems\n               [startGID]=\"containerKey\"\n               startSuffix=\"_ref\"\n               [endGID]=\"elem.$gId\"\n               endSuffix=\"_main\">\n            </g>\n        }\n    }\n</svg:g>\n" }]
+            args: [{ selector: '[referencable-box]', imports: [RectangleWithTextComponent, ArrowBetweenElemsComponent], template: "<svg:g [attr.id]=\"referencable.$gId\">\n\n    <g rectangle-with-text\n       (click)=\"choose(referencable)\"\n       [id]=\"referencable.$gId + '_main'\"\n       [text]=\"IdHelper.getLabel(referencable)\"\n       [position]=\"position\"\n       [color]=\"color\"\n    >\n    </g>\n\n    <!-- containers -->\n    @for (container of referencable.$treeChildren;\n        track referencable.$gId + '_' + container.referenceName\n            ; let i = $index) {\n\n        @let containerKey = referencable.$gId + '_' + container.referenceName;\n        @let containerAnchorBox = PositionHelper.computeChildBBox(\n            i,\n            referencable.$treeChildren.length,\n            position\n        );\n\n        <!-- reference box -->\n        <g rectangle-with-text\n           (click)=\"toggleExpand(i)\"\n           [id]=\"containerKey + '_ref'\"\n           [text]=\"container.referenceName\"\n           [position]=\"containerAnchorBox\"\n           color=\"#ede679\"\n        >\n        </g>\n\n        <!-- arrow from main box to reference -->\n        <g arrowElems\n           [startGID]=\"referencable.$gId\"\n           startSuffix=\"_main\"\n           [endGID]=\"containerKey\"\n           endSuffix=\"_ref\">\n        </g>\n\n        @if (isExpandedArray[i]) {\n            <!-- real children inside this reference -->\n            @let realChildren = GraphicalHelper.getAsList(container);\n\n            @for (elem of realChildren; track elem.$gId; let j = $index) {\n\n                @let elemBox = PositionHelper.computeChildBBox(\n                    j,\n                    realChildren.length,\n                    containerAnchorBox\n                );\n                <g referencable-box\n                   (chooseElement)=\"choose($event)\"\n                   [referencable]=\"elem\"\n                   [position]=\"elemBox\"\n                >\n                </g>\n                <!-- arrow from reference to child box -->\n                <g arrowElems\n                   [startGID]=\"containerKey\"\n                   startSuffix=\"_ref\"\n                   [endGID]=\"elem.$gId\"\n                   endSuffix=\"_main\">\n                </g>\n            }\n\n        }\n    }\n</svg:g>\n" }]
         }], ctorParameters: () => [], propDecorators: { referencable: [{
                 type: Input
             }], position: [{
                 type: Input
             }], color: [{
                 type: Input
+            }], chooseElement: [{
+                type: Output
             }] } });
 
-class TreeEditorComponent {
+class ModelCanvasComponent {
     svgwidth = 1500;
     svgheigth = 1000;
+    initialBBox = { x: this.svgwidth / 2, y: 20, w: 200, h: 25 };
+    modelService;
+    chooseElement = new EventEmitter();
+    svgReady = new EventEmitter();
     svg;
-    get svgEl() {
-        return this.svg.nativeElement;
+    ngOnInit() {
+        // Safe because static: true
+        this.svgReady.emit(this.svg.nativeElement);
+    }
+    choose(element) {
+        this.chooseElement.emit(element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ModelCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ModelCanvasComponent, isStandalone: true, selector: "model-canvas", inputs: { modelService: "modelService" }, outputs: { chooseElement: "chooseElement", svgReady: "svgReady" }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modeling-container\">\n    <svg #svg id=\"svg\" class=\"canvas-svg\" [attr.width]=\"svgwidth\" [attr.height]=\"svgheigth\">\n        <g referencable-box\n           [referencable]=\"modelService.model\"\n           [position]=\"initialBBox\"\n           (chooseElement)=\"choose($event)\"\n        >\n        </g>\n    </svg>\n</div>\n", styles: [".modeling-container{flex:1 1 auto;overflow:auto;background:#fff}.canvas-svg{display:block}\n"], dependencies: [{ kind: "component", type: ReferencableBoxComponent, selector: "[referencable-box]", inputs: ["referencable", "position", "color"], outputs: ["chooseElement"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ModelCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'model-canvas', imports: [
+                        ReferencableBoxComponent
+                    ], template: "<div class=\"modeling-container\">\n    <svg #svg id=\"svg\" class=\"canvas-svg\" [attr.width]=\"svgwidth\" [attr.height]=\"svgheigth\">\n        <g referencable-box\n           [referencable]=\"modelService.model\"\n           [position]=\"initialBBox\"\n           (chooseElement)=\"choose($event)\"\n        >\n        </g>\n    </svg>\n</div>\n", styles: [".modeling-container{flex:1 1 auto;overflow:auto;background:#fff}.canvas-svg{display:block}\n"] }]
+        }], propDecorators: { modelService: [{
+                type: Input
+            }], chooseElement: [{
+                type: Output
+            }], svgReady: [{
+                type: Output
+            }], svg: [{
+                type: ViewChild,
+                args: ['svg', { static: true }]
+            }] } });
+
+class ContainerDetailsComponent {
+    container;
+    isTree;
+    modelService;
+    detailsService; //todo just enforce interface?
+    open(ref) {
+        this.detailsService.openDetails(ref, this.modelService);
+    }
+    remove(ref) {
+        //todo service should do this... in order for single source of truth
+        if (this.container.remove(ref))
+            this.modelService.saveCurrentState();
+    }
+    add() {
+        //create on tree and open choice by graphical model on other links
+        if (this.isTree) {
+            console.log("Creation for several possible sub types is not solved in a meta-agnostic scenario");
+        }
+        else {
+            this.detailsService
+                .openModelChoice(this.modelService)
+                .subscribe(chosen => {
+                if (!chosen)
+                    return; // user cancelled
+                // todo what about type mismatches?
+                if (this.container.add(chosen)) {
+                    this.modelService.saveCurrentState();
+                }
+            });
+        }
+    }
+    GraphicalHelper = GraphicalHelper;
+    IdHelper = IdHelper;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ContainerDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ContainerDetailsComponent, isStandalone: true, selector: "container-details", inputs: { container: "container", isTree: "isTree", modelService: "modelService", detailsService: "detailsService" }, ngImport: i0, template: "<h4>{{container.referenceName+\":\"}}</h4>\n\n<button *ngIf=\"!isTree\" class=\"add-ref\" (click)=\"add()\">Add</button>\n\n<div class=\"container-row\"\n     *ngFor=\"let elem of GraphicalHelper.getAsList(container)\">\n    <div class=\"ref-info\">\n        <span class=\"ref-icon\">\uD83D\uDD17</span>\n        <span class=\"ref-type\">{{ elem.getEClass() }}</span>\n        <span class=\"ref-label\">{{ IdHelper.getLabel(elem) }}</span>\n    </div>\n\n    <div class=\"ref-actions\">\n        <button (click)=\"open(elem)\">Open</button>\n        <button (click)=\"remove(elem)\">Remove</button>\n    </div>\n</div>\n\n", styles: ["h4{margin-top:0;margin-bottom:4px}.add-ref{margin-top:0;margin-bottom:8px;padding:6px 12px;border-radius:6px;border:1px solid #b5b5b5;background:#fff;cursor:pointer;font-size:13px;transition:background .12s ease,border-color .12s ease}.add-ref:hover{background:#f2f2f2;border-color:#999}.add-ref:active{background:#e6e6e6}.reference-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}.reference-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border:1px solid #d0d0d0;border-radius:6px;background:#fafafa;transition:background .12s ease}.reference-row:hover{background:#f2f2f2}.ref-info{display:flex;align-items:center;gap:8px;min-width:0}.ref-icon{opacity:.7;font-size:14px}.ref-type{font-weight:600;font-size:13px;color:#333;white-space:nowrap}.ref-label{font-size:13px;color:#555;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ref-actions{display:flex;gap:6px}.ref-actions button{border:1px solid #b5b5b5;background:#fff;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:12px;color:#333;min-width:32px;text-align:center;transition:background .12s ease,border-color .12s ease}.ref-actions button:hover{background:#e6e6e6;border-color:#999}.ref-actions button:active{background:#dcdcdc}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ContainerDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'container-details', imports: [
+                        NgForOf,
+                        NgIf,
+                    ], template: "<h4>{{container.referenceName+\":\"}}</h4>\n\n<button *ngIf=\"!isTree\" class=\"add-ref\" (click)=\"add()\">Add</button>\n\n<div class=\"container-row\"\n     *ngFor=\"let elem of GraphicalHelper.getAsList(container)\">\n    <div class=\"ref-info\">\n        <span class=\"ref-icon\">\uD83D\uDD17</span>\n        <span class=\"ref-type\">{{ elem.getEClass() }}</span>\n        <span class=\"ref-label\">{{ IdHelper.getLabel(elem) }}</span>\n    </div>\n\n    <div class=\"ref-actions\">\n        <button (click)=\"open(elem)\">Open</button>\n        <button (click)=\"remove(elem)\">Remove</button>\n    </div>\n</div>\n\n", styles: ["h4{margin-top:0;margin-bottom:4px}.add-ref{margin-top:0;margin-bottom:8px;padding:6px 12px;border-radius:6px;border:1px solid #b5b5b5;background:#fff;cursor:pointer;font-size:13px;transition:background .12s ease,border-color .12s ease}.add-ref:hover{background:#f2f2f2;border-color:#999}.add-ref:active{background:#e6e6e6}.reference-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}.reference-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border:1px solid #d0d0d0;border-radius:6px;background:#fafafa;transition:background .12s ease}.reference-row:hover{background:#f2f2f2}.ref-info{display:flex;align-items:center;gap:8px;min-width:0}.ref-icon{opacity:.7;font-size:14px}.ref-type{font-weight:600;font-size:13px;color:#333;white-space:nowrap}.ref-label{font-size:13px;color:#555;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ref-actions{display:flex;gap:6px}.ref-actions button{border:1px solid #b5b5b5;background:#fff;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:12px;color:#333;min-width:32px;text-align:center;transition:background .12s ease,border-color .12s ease}.ref-actions button:hover{background:#e6e6e6;border-color:#999}.ref-actions button:active{background:#dcdcdc}\n"] }]
+        }], propDecorators: { container: [{
+                type: Input
+            }], isTree: [{
+                type: Input
+            }], modelService: [{
+                type: Input
+            }], detailsService: [{
+                type: Input
+            }] } });
+
+class ModelDetailsComponent {
+    model;
+    modelService;
+    detailsService;
+    attributes = [];
+    ngOnInit() {
+        const map = getAllAttributes(this.model.constructor);
+        this.attributes = Array.from(map.entries()).map(([key, options]) => ({
+            key,
+            options
+        }));
+    }
+    getLinks() {
+        return this.model.$otherReferences;
+    }
+    getChildren() {
+        return this.model.$treeChildren;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ModelDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ModelDetailsComponent, isStandalone: true, selector: "lib-model-details", inputs: { model: "model", modelService: "modelService", detailsService: "detailsService" }, ngImport: i0, template: "<h1>Detail-Editor</h1>\n<h2>{{model.getEClass()}}</h2>\n<div class=\"attribute-list\">\n    <div class=\"attribute-row\" *ngFor=\"let attr of attributes\">\n        <label>{{ attr.key }}</label>\n        <input\n                type=\"text\"\n                [(ngModel)]=\"$any(model)[attr.key]\"\n        />\n    </div>\n</div>\n<h3>References</h3>\n<div class=\"reference-list\">\n    <container-details\n            *ngFor=\"let container of getChildren()\"\n            [container]=\"container\"\n            [isTree]=\"true\"\n            [modelService]=\"modelService\"\n            [detailsService]=\"detailsService\"\n    >\n    </container-details>\n    <container-details\n        *ngFor=\"let container of getLinks()\"\n        [container]=\"container\"\n        [isTree]=\"false\"\n        [modelService]=\"modelService\"\n        [detailsService]=\"detailsService\"\n    >\n    </container-details>\n</div>\n\n", styles: [".attribute-list{display:flex;flex-direction:column;gap:16px}.attribute-row{display:flex;flex-direction:column}.attribute-row label{font-weight:600;margin-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ContainerDetailsComponent, selector: "container-details", inputs: ["container", "isTree", "modelService", "detailsService"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ModelDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-model-details', imports: [
+                        FormsModule,
+                        NgForOf,
+                        ContainerDetailsComponent
+                    ], template: "<h1>Detail-Editor</h1>\n<h2>{{model.getEClass()}}</h2>\n<div class=\"attribute-list\">\n    <div class=\"attribute-row\" *ngFor=\"let attr of attributes\">\n        <label>{{ attr.key }}</label>\n        <input\n                type=\"text\"\n                [(ngModel)]=\"$any(model)[attr.key]\"\n        />\n    </div>\n</div>\n<h3>References</h3>\n<div class=\"reference-list\">\n    <container-details\n            *ngFor=\"let container of getChildren()\"\n            [container]=\"container\"\n            [isTree]=\"true\"\n            [modelService]=\"modelService\"\n            [detailsService]=\"detailsService\"\n    >\n    </container-details>\n    <container-details\n        *ngFor=\"let container of getLinks()\"\n        [container]=\"container\"\n        [isTree]=\"false\"\n        [modelService]=\"modelService\"\n        [detailsService]=\"detailsService\"\n    >\n    </container-details>\n</div>\n\n", styles: [".attribute-list{display:flex;flex-direction:column;gap:16px}.attribute-row{display:flex;flex-direction:column}.attribute-row label{font-weight:600;margin-bottom:4px}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], modelService: [{
+                type: Input
+            }], detailsService: [{
+                type: Input
+            }] } });
+
+class BasicModelDetailsService {
+    overlay;
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    //actually T must be somewhere on M
+    openDetails(elem, modelService) {
+        // instead of opening the generic ModeldetailsCompoennt you might like to consider opening a specific one
+        //by determining the eClass and switching based on elem.getEClass()
+        const overlayRef = this.overlay.create({ hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            panelClass: 'basic-details-panel',
+            positionStrategy: this.overlay.position()
+                .global().centerHorizontally().centerVertically()
+        });
+        const portal = new ComponentPortal((ModelDetailsComponent));
+        const ref = overlayRef.attach(portal);
+        ref.instance.model = elem;
+        ref.instance.modelService = modelService;
+        ref.instance.detailsService = this;
+        overlayRef.backdropClick().subscribe(() => overlayRef.dispose());
+    }
+    openModelChoice(modelService) {
+        const subject = new Subject();
+        const overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            panelClass: 'basic-details-panel',
+            positionStrategy: this.overlay.position()
+                .global().centerHorizontally().centerVertically()
+        });
+        const portal = new ComponentPortal((ModelCanvasComponent));
+        const ref = overlayRef.attach(portal);
+        ref.instance.modelService = modelService;
+        ref.instance.chooseElement.subscribe(next => {
+            subject.next(next);
+            subject.complete();
+            overlayRef.dispose();
+        });
+        overlayRef.backdropClick().subscribe(() => {
+            subject.complete();
+            overlayRef.dispose();
+        });
+        return subject.asObservable();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: BasicModelDetailsService, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: BasicModelDetailsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: BasicModelDetailsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }] });
+
+class TreeEditorComponent {
+    basicDetailsService;
+    svgElement;
     modelService;
+    detailsService;
     customButtons = null;
-    initialBBox = { x: this.svgwidth / 2, y: 20, w: 400, h: 25 };
-    constructor() { }
+    constructor(basicDetailsService) {
+        this.basicDetailsService = basicDetailsService;
+    }
     get sidebarButtons() {
         if (this.customButtons)
             return this.customButtons;
         else //todo replace by default create buttons
             return [{ label: "test", action: () => { console.log("Button on model edition works"); } }];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TreeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: TreeEditorComponent, isStandalone: true, selector: "emfular-tree-editor", inputs: { modelService: "modelService", customButtons: "customButtons" }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"tree-editor\" id=\"tree-editor\">\n    <emfular-file-level-bar\n            [svg]=\"svgEl\"\n            [modelService]=\"modelService\">\n    </emfular-file-level-bar>\n    <div class=\"editor-main\">\n        <!-- vertical model bar -->\n        <emfular-model-editing-bar\n                class=\"model-bar\"\n                [buttons]=\"sidebarButtons\">\n        </emfular-model-editing-bar>\n\n\n            <!-- scrollable modeling canvas -->\n        <div class=\"modeling-container\">\n            <svg #svg id=\"svg\" class=\"canvas-svg\" [attr.width]=\"svgwidth\" [attr.height]=\"svgheigth\">\n                <g referencable-box\n                   [referencable]=\"modelService.model\"\n                   [position]=\"initialBBox\"\n                >\n                </g>\n            </svg>\n        </div>\n\n    </div>\n\n</div>\n\n", styles: [".tree-editor{display:flex;flex-direction:column;width:100%;height:100%}emfular-file-level-bar{flex:0 0 auto}.editor-main{flex:1 1 auto;display:flex;overflow:hidden}.model-bar{flex:0 0 60px;background:#f5f5f5;border-right:1px solid #ccc;display:flex;flex-direction:column}.modeling-container{flex:1 1 auto;overflow:auto;background:#fff}.canvas-svg{display:block}\n"], dependencies: [{ kind: "component", type: FileLevelBarComponent, selector: "emfular-file-level-bar", inputs: ["svg", "modelService"] }, { kind: "component", type: ModelEditingBarComponent, selector: "emfular-model-editing-bar", inputs: ["buttons"] }, { kind: "component", type: ReferencableBoxComponent, selector: "[referencable-box]", inputs: ["referencable", "position", "color"] }] });
+    get effectiveDetailsService() {
+        return this.detailsService ?? this.basicDetailsService;
+    }
+    onSvgReady(svg) {
+        this.svgElement = svg;
+    }
+    choose(element) {
+        this.effectiveDetailsService.openDetails(element, this.modelService);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TreeEditorComponent, deps: [{ token: BasicModelDetailsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: TreeEditorComponent, isStandalone: true, selector: "emfular-tree-editor", inputs: { modelService: "modelService", detailsService: "detailsService", customButtons: "customButtons" }, ngImport: i0, template: "<div class=\"tree-editor\" id=\"tree-editor\">\n    <emfular-file-level-bar\n            [svg]=\"svgElement\"\n            [modelService]=\"modelService\">\n    </emfular-file-level-bar>\n    <div class=\"editor-main\">\n        <!-- vertical model bar -->\n        <emfular-model-editing-bar\n                class=\"model-bar\"\n                [buttons]=\"sidebarButtons\">\n        </emfular-model-editing-bar>\n\n\n        <model-canvas\n                [modelService]=\"modelService\"\n                (svgReady)=\"onSvgReady($event)\"\n                (chooseElement)=\"choose($event)\"\n        >\n        </model-canvas>\n    </div>\n</div>\n\n", styles: [".tree-editor{display:flex;flex-direction:column;width:100%;height:100%}emfular-file-level-bar{flex:0 0 auto}.editor-main{flex:1 1 auto;display:flex;overflow:hidden}.model-bar{flex:0 0 60px;background:#f5f5f5;border-right:1px solid #ccc;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: FileLevelBarComponent, selector: "emfular-file-level-bar", inputs: ["svg", "modelService"] }, { kind: "component", type: ModelEditingBarComponent, selector: "emfular-model-editing-bar", inputs: ["buttons"] }, { kind: "component", type: ModelCanvasComponent, selector: "model-canvas", inputs: ["modelService"], outputs: ["chooseElement", "svgReady"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TreeEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emfular-tree-editor', imports: [
                         FileLevelBarComponent,
                         ModelEditingBarComponent,
-                        ReferencableBoxComponent
-                    ], template: "<div class=\"tree-editor\" id=\"tree-editor\">\n    <emfular-file-level-bar\n            [svg]=\"svgEl\"\n            [modelService]=\"modelService\">\n    </emfular-file-level-bar>\n    <div class=\"editor-main\">\n        <!-- vertical model bar -->\n        <emfular-model-editing-bar\n                class=\"model-bar\"\n                [buttons]=\"sidebarButtons\">\n        </emfular-model-editing-bar>\n\n\n            <!-- scrollable modeling canvas -->\n        <div class=\"modeling-container\">\n            <svg #svg id=\"svg\" class=\"canvas-svg\" [attr.width]=\"svgwidth\" [attr.height]=\"svgheigth\">\n                <g referencable-box\n                   [referencable]=\"modelService.model\"\n                   [position]=\"initialBBox\"\n                >\n                </g>\n            </svg>\n        </div>\n\n    </div>\n\n</div>\n\n", styles: [".tree-editor{display:flex;flex-direction:column;width:100%;height:100%}emfular-file-level-bar{flex:0 0 auto}.editor-main{flex:1 1 auto;display:flex;overflow:hidden}.model-bar{flex:0 0 60px;background:#f5f5f5;border-right:1px solid #ccc;display:flex;flex-direction:column}.modeling-container{flex:1 1 auto;overflow:auto;background:#fff}.canvas-svg{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { svg: [{
-                type: ViewChild,
-                args: ['svg', { static: true }]
-            }], modelService: [{
+                        ModelCanvasComponent
+                    ], template: "<div class=\"tree-editor\" id=\"tree-editor\">\n    <emfular-file-level-bar\n            [svg]=\"svgElement\"\n            [modelService]=\"modelService\">\n    </emfular-file-level-bar>\n    <div class=\"editor-main\">\n        <!-- vertical model bar -->\n        <emfular-model-editing-bar\n                class=\"model-bar\"\n                [buttons]=\"sidebarButtons\">\n        </emfular-model-editing-bar>\n\n\n        <model-canvas\n                [modelService]=\"modelService\"\n                (svgReady)=\"onSvgReady($event)\"\n                (chooseElement)=\"choose($event)\"\n        >\n        </model-canvas>\n    </div>\n</div>\n\n", styles: [".tree-editor{display:flex;flex-direction:column;width:100%;height:100%}emfular-file-level-bar{flex:0 0 auto}.editor-main{flex:1 1 auto;display:flex;overflow:hidden}.model-bar{flex:0 0 60px;background:#f5f5f5;border-right:1px solid #ccc;display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [{ type: BasicModelDetailsService }], propDecorators: { modelService: [{
+                type: Input
+            }], detailsService: [{
                 type: Input
             }], customButtons: [{
                 type: Input
@@ -280,5 +503,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FileLevelBarComponent, FileLevelBarMaterialComponent, HISTORY_SERVICE, ModelEditingBarComponent, ModelService, ReferencableBoxComponent, TreeEditorComponent, provideHistoryForModel };
+export { BasicModelDetailsService, ContainerDetailsComponent, FileLevelBarComponent, FileLevelBarMaterialComponent, HISTORY_SERVICE, IdHelper, ModelCanvasComponent, ModelDetailsComponent, ModelEditingBarComponent, ModelService, ReferencableBoxComponent, TreeEditorComponent, provideHistoryForModel };
 //# sourceMappingURL=ngx-emfular-integration.mjs.map

package/fesm2022/ngx-emfular-integration.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-emfular-integration.mjs","sources":["../../../projects/ngx-emfular-integration/src/lib/model.service.ts","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar/file-level-bar.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar/file-level-bar.component.html","../../../projects/ngx-emfular-integration/src/lib/editor/model-editing-bar/model-editing-bar.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/model-editing-bar/model-editing-bar.component.html","../../../projects/ngx-emfular-integration/src/lib/graphical/graphical-helper.ts","../../../projects/ngx-emfular-integration/src/lib/graphical/referencable-box/referencable-box.component.ts","../../../projects/ngx-emfular-integration/src/lib/graphical/referencable-box/referencable-box.component.svg","../../../projects/ngx-emfular-integration/src/lib/editor/tree-editor/tree-editor.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/tree-editor/tree-editor.component.html","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar-material/file-level-bar-material.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar-material/file-level-bar-material.component.html","../../../projects/ngx-emfular-integration/src/public-api.ts","../../../projects/ngx-emfular-integration/src/ngx-emfular-integration.ts"],"sourcesContent":["import {Inject, Injectable, InjectionToken, PLATFORM_ID} from '@angular/core';\nimport {Deserializer, JsonDeserializable, JsonOf, Referencable} from \"emfular\";\nimport {HistoryService, IoService} from \"ngx-emfular-helper\";\n\nexport const HISTORY_SERVICE = new InjectionToken<HistoryService<any>>(\n    'HistoryService'\n);\nexport function provideHistoryForModel<M>(\n    prefix: string = 'history_',\n    bufferSize: number = 50\n) {\n  return {\n    provide: HISTORY_SERVICE,\n    useFactory: (platformId: Object) => new HistoryService<JsonOf<M>>(prefix, bufferSize, platformId),\n    deps: [PLATFORM_ID]\n  };\n}\n\n\n@Injectable({\n  providedIn: 'root'\n})\nexport abstract class ModelService<M extends Referencable<any>> {\n\n  private _model!: M\n  get model(): M {\n    return this._model;\n  }\n  protected set model(model: M) {\n    this._model = this.adjustModel(model);\n    this.adaptToModel()\n  }\n\n  protected constructor(\n      @Inject(HISTORY_SERVICE) readonly historyService: HistoryService<JsonOf<M>>,\n      readonly ioService: IoService,\n      protected readonly modelClass: JsonDeserializable<M>,\n  ) {\n    this._model = new modelClass()     //default initialization without calling set, since adjustments might need not yet initialized properties\n    queueMicrotask(() => { //necessary to avoid timing issues if adjust model or adapt to model call services or other not initialized properties of the inheriting class\n      this.historyService.state$.subscribe(state => {\n        if (state) {\n          this.applyJson(state);\n        }\n      });\n    })\n  }\n\n  //default implementation to override if you need any normalization on a model before setting it\n  adjustModel(model: M): M {\n    return model;\n  }\n\n  //default implementation to override if you need adaptation of surroundings,\n  // e.g. other attributes, notifications, signals etc\n  adaptToModel() {}\n\n  // override by either a fixed string or sth from the current model itself\n  public fileTitle(): string {\n    return \"model\"\n  }\n\n  newModel() {\n    this.model = new this.modelClass()\n    this.saveCurrentState()\n  }\n\n  serialize(): JsonOf<M> {\n    return this.model.toJson()\n  }\n\n  deserialize(modelJson: JsonOf<M>): M {\n    let modelEClass = new this.modelClass().getEClass();\n    return Deserializer.fromJSON<M>(modelJson, modelEClass);\n  }\n\n  saveCurrentState() {\n    this.historyService.save(this.serialize())\n  }\n\n  protected applyJson(modelJson: JsonOf<M>): M {\n    this.model = this.deserialize(modelJson);\n    return this.model;\n  }\n\n  loadFromJson(modelJson: JsonOf<M>): void {\n    this.applyJson(modelJson);\n    this.saveCurrentState()\n  }\n\n  loadFromFile(event: Event) {\n    this.ioService.loadStringFromFile(event).then(txt => {\n      //todo insert detection code for wrong files (no json, not appropriately structured\n      this.loadFromJson(JSON.parse(txt));\n    });\n  }\n\n  save() {\n    const jsonString = JSON.stringify(this.serialize());\n    this.ioService.saveJson(jsonString, this.fileTitle())\n  }\n\n}\n","import {Component, Input} from '@angular/core';\nimport {InputHandler, IoService} from \"ngx-emfular-helper\";\nimport {Referencable} from \"emfular\";\nimport {ModelService} from \"../../model.service\";\n\n@Component({\n  selector: 'emfular-file-level-bar',\n  imports: [],\n  templateUrl: './file-level-bar.component.html',\n  styleUrl: './file-level-bar.component.css'\n})\nexport class FileLevelBarComponent<M extends Referencable<any>> {\n  @Input() svg!: SVGElement\n  @Input() modelService!: ModelService<M>\n  protected readonly InputHandler = InputHandler;\n\n  constructor(public ioService: IoService) {\n  }\n\n  openModel() {\n    document.getElementById('openModel')?.click();\n  }\n\n\n  saveSVG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSVG(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasPNG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsPng(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasJPEG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsJpeg(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n\n}\n","<input id=\"openModel\" type=\"file\" class=\"file-upload\" style=\"display:none\"\n       (change)=\"modelService.loadFromFile($event)\"\n       (click)=\"InputHandler.clearElem($event)\">\n\n<div class=\"file-level-bar\">\n    <button (click)=\"modelService.newModel()\">New</button>\n    <button (click)=\"openModel()\">Open</button>\n    <span class=\"separator\"></span>\n    <button (click)=\"modelService.historyService.undo()\" [disabled]=\"modelService.historyService.isUndoNotPossible()\">Undo</button>\n    <button (click)=\"modelService.historyService.redo()\" [disabled]=\"modelService.historyService.isRedoNotPossible()\">Redo</button>\n    <span class=\"separator\"></span>\n    <button (click)=\"modelService.save()\">Save</button>\n    <button (click)=\"saveSVG()\">Save SVG</button>\n    <button (click)=\"saveSVGasPNG()\">Save PNG</button>\n    <button (click)=\"saveSVGasJPEG()\">Save JPEG</button>\n</div>\n","import {Component, Input} from '@angular/core';\nimport {NgForOf, NgIf} from \"@angular/common\";\n\n@Component({\n  selector: 'emfular-model-editing-bar',\n  imports: [\n    NgForOf,\n    NgIf\n  ],\n  templateUrl: './model-editing-bar.component.html',\n  styleUrl: './model-editing-bar.component.css'\n})\nexport class ModelEditingBarComponent {\n  @Input() buttons: Array<{\n    label: string;\n    icon?: string;\n    action: () => void;\n  }> | null = null;\n\n\n}\n","<div class=\"model-editing-bar\">\n    <button *ngFor=\"let b of buttons\" (click)=\"b.action()\">\n        <span *ngIf=\"b.icon\" class=\"icon\">{{ b.icon }}</span>\n        {{ b.label }}\n    </button>\n</div>\n","import {ReContainer, Referencable } from \"emfular\";\n\nexport class GraphicalHelper {\n\n    //todo, refactor into emfular\n    static getAsList<T extends Referencable<any>>(refs: ReContainer<T, any>): T[] {\n        const items: T[]|T|undefined = refs.get()\n        if(items) {\n            if(Array.isArray(items)) {\n                return items\n            }\n            const result: T[] = [];\n            result.push(items)\n            return result\n        } else {\n            return [];\n        }\n    }\n\n}\n","import {Component, Input} from '@angular/core';\nimport {Referencable} from 'emfular';\nimport {ArrowBetweenElemsComponent, BoundingBox, RectangleWithTextComponent, PositionHelper} from 'ngx-svg-graphics';\nimport {GraphicalHelper} from \"../graphical-helper\";\n\n@Component({\n  selector: '[referencable-box]',\n  imports: [RectangleWithTextComponent, ArrowBetweenElemsComponent],\n  templateUrl: './referencable-box.component.svg',\n  styleUrl: './referencable-box.component.css'\n})\nexport class ReferencableBoxComponent {\n  @Input() referencable!: Referencable<any>;\n  @Input() position!: BoundingBox\n  @Input() color?: string = \"#efad78\"\n\n  constructor() {}\n\n  protected readonly GraphicalHelper = GraphicalHelper;\n  protected readonly PositionHelper = PositionHelper\n}\n","<svg:g [attr.id]=\"referencable.$gId\">\n\n    <g rectangle-with-text\n       [id]=\"referencable.$gId + '_main'\"\n       [text]=\"referencable.getEClass()\"\n       [position]=\"position\"\n       [color]=\"color\"\n    >\n    </g>\n\n    <!-- containers -->\n    @for (container of referencable.$treeChildren;\n        track referencable.$gId + '_' + container.referenceName\n            ; let i = $index) {\n\n        @let containerKey = referencable.$gId + '_' + container.referenceName;\n        @let containerAnchorBox = PositionHelper.computeChildBBox(\n            i,\n            referencable.$treeChildren.length,\n            position\n        );\n\n        <!-- reference box -->\n        <g rectangle-with-text\n           [id]=\"containerKey + '_ref'\"\n           [text]=\"container.referenceName\"\n           [position]=\"containerAnchorBox\"\n           color=\"#ede679\"\n        >\n        </g>\n\n        <!-- arrow from main box to reference -->\n        <g arrowElems\n           [startGID]=\"referencable.$gId\"\n           startSuffix=\"_main\"\n           [endGID]=\"containerKey\"\n           endSuffix=\"_ref\">\n        </g>\n\n        <!-- real children inside this reference -->\n        @let realChildren = GraphicalHelper.getAsList(container);\n\n        @for (elem of realChildren; track elem.$gId; let j = $index) {\n\n            @let elemBox = PositionHelper.computeChildBBox(\n                j,\n                realChildren.length,\n                containerAnchorBox\n            );\n            <g referencable-box\n               [referencable]=\"elem\"\n               [position]=\"elemBox\"\n            >\n            </g>\n            <!-- arrow from reference to child box -->\n            <g arrowElems\n               [startGID]=\"containerKey\"\n               startSuffix=\"_ref\"\n               [endGID]=\"elem.$gId\"\n               endSuffix=\"_main\">\n            </g>\n        }\n    }\n</svg:g>\n","import {Component, ElementRef, Input, ViewChild} from '@angular/core';\nimport { Referencable} from \"emfular\";\nimport {FileLevelBarComponent} from \"../file-level-bar/file-level-bar.component\";\nimport {ModelEditingBarComponent} from \"../model-editing-bar/model-editing-bar.component\";\nimport {ReferencableBoxComponent} from \"../../graphical/referencable-box/referencable-box.component\";\nimport {BoundingBox} from \"ngx-svg-graphics\";\nimport {ModelService} from \"../../model.service\";\n\n@Component({\n  selector: 'emfular-tree-editor',\n    imports: [\n        FileLevelBarComponent,\n        ModelEditingBarComponent,\n        ReferencableBoxComponent\n    ],\n  templateUrl: './tree-editor.component.html',\n  styleUrl: './tree-editor.component.css'\n})\nexport class TreeEditorComponent<M extends Referencable<any>> {\n\n    svgwidth = 1500;\n    svgheigth = 1000;\n\n  @ViewChild('svg', { static: true }) svg!: ElementRef<SVGElement>;\n    get svgEl(): SVGElement {\n        return this.svg.nativeElement;\n    }\n\n    @Input() modelService!: ModelService<M>\n\n    @Input() customButtons: Array<{\n      label: string;\n      icon?: string;\n      action: () => void;\n  }> | null = null;\n  initialBBox : BoundingBox = {x: this.svgwidth/2, y: 20, w: 400, h: 25}\n\n  constructor() {}\n\n  get sidebarButtons() {\n      if (this.customButtons) return this.customButtons;\n      else       //todo replace by default create buttons\n          return[{label: \"test\", action: () => {console.log(\"Button on model edition works\")}}];\n  }\n}\n","<div class=\"tree-editor\" id=\"tree-editor\">\n    <emfular-file-level-bar\n            [svg]=\"svgEl\"\n            [modelService]=\"modelService\">\n    </emfular-file-level-bar>\n    <div class=\"editor-main\">\n        <!-- vertical model bar -->\n        <emfular-model-editing-bar\n                class=\"model-bar\"\n                [buttons]=\"sidebarButtons\">\n        </emfular-model-editing-bar>\n\n\n            <!-- scrollable modeling canvas -->\n        <div class=\"modeling-container\">\n            <svg #svg id=\"svg\" class=\"canvas-svg\" [attr.width]=\"svgwidth\" [attr.height]=\"svgheigth\">\n                <g referencable-box\n                   [referencable]=\"modelService.model\"\n                   [position]=\"initialBBox\"\n                >\n                </g>\n            </svg>\n        </div>\n\n    </div>\n\n</div>\n\n","import {Component, Input} from '@angular/core';\nimport {InputHandler, IoService} from \"ngx-emfular-helper\";\nimport {Referencable} from \"emfular\";\nimport { CommonModule } from '@angular/common';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport {ModelService} from \"../../model.service\";\n\n@Component({\n  selector: 'emfular-file-level-bar-material',\n  imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule],\n  templateUrl: './file-level-bar-material.component.html',\n  styleUrl: './file-level-bar-material.component.css'\n})\nexport class FileLevelBarMaterialComponent<M extends Referencable<any>> {\n  @Input() svg!: SVGElement\n  @Input() modelService!: ModelService<M>\n  protected readonly InputHandler = InputHandler;\n\n  constructor(public ioService: IoService) {\n  }\n\n  openModel() {\n    document.getElementById('openModel')?.click();\n  }\n\n\n  saveSVG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSVG(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasPNG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsPng(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasJPEG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsJpeg(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n\n}\n","<input id=\"openModel\" type=\"file\" class=\"file-upload\" style=\"display: none\" (change)=\"modelService.loadFromFile($event)\" (click)=\"InputHandler.clearElem($event)\">\n<mat-toolbar class=\"file-level-bar\">\n    <button (click)=\"modelService.newModel()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"insert_drive_file\" ></mat-icon>\n        New\n    </button>\n    <button (click)=\"openModel()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"file_upload\" ></mat-icon>\n        Open\n    </button>\n    <hr/>\n    <button (click)=\"modelService.historyService.undo()\" [disabled]=\"modelService.historyService.isUndoNotPossible()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"undo\" ></mat-icon>\n        Undo</button>\n    <button (click)=\"modelService.historyService.redo()\" [disabled]=\"modelService.historyService.isRedoNotPossible()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"redo\" ></mat-icon>\n        Redo</button>\n    <hr />\n    <button (click)=\"modelService.save()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"file_download\" ></mat-icon>\n        Save\n    </button>\n    <button (click)=\"saveSVG()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"photo_library\" ></mat-icon>\n        Save SVG\n    </button>\n    <button (click)=\"saveSVGasPNG()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"photo_library\" ></mat-icon>\n        Save PNG\n    </button>\n    <button (click)=\"saveSVGasJPEG()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"photo_library\" ></mat-icon>\n        Save JPEG\n    </button>\n</mat-toolbar>\n","/*\n * Public API Surface of ngx-emfular-integration\n */\n\nexport * from './lib/model.service';\nexport * from './lib/editor/tree-editor/tree-editor.component'\nexport * from './lib/editor/file-level-bar/file-level-bar.component';\nexport * from './lib/editor/file-level-bar-material/file-level-bar-material.component';\nexport * from './lib/editor/model-editing-bar/model-editing-bar.component';\nexport * from './lib/graphical/referencable-box/referencable-box.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-emfular-integration.mjs","sources":["../../../projects/ngx-emfular-integration/src/lib/model.service.ts","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar/file-level-bar.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar/file-level-bar.component.html","../../../projects/ngx-emfular-integration/src/lib/editor/model-editing-bar/model-editing-bar.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/model-editing-bar/model-editing-bar.component.html","../../../projects/ngx-emfular-integration/src/lib/utils/graphical-helper.ts","../../../projects/ngx-emfular-integration/src/lib/utils/id-helper.ts","../../../projects/ngx-emfular-integration/src/lib/graphical/referencable-box/referencable-box.component.ts","../../../projects/ngx-emfular-integration/src/lib/graphical/referencable-box/referencable-box.component.svg","../../../projects/ngx-emfular-integration/src/lib/editor/model-canvas/model-canvas.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/model-canvas/model-canvas.component.html","../../../projects/ngx-emfular-integration/src/lib/details/container-details/container-details.component.ts","../../../projects/ngx-emfular-integration/src/lib/details/container-details/container-details.component.html","../../../projects/ngx-emfular-integration/src/lib/details/model-details/model-details.component.ts","../../../projects/ngx-emfular-integration/src/lib/details/model-details/model-details.component.html","../../../projects/ngx-emfular-integration/src/lib/details/basic-model-details.service.ts","../../../projects/ngx-emfular-integration/src/lib/editor/tree-editor/tree-editor.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/tree-editor/tree-editor.component.html","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar-material/file-level-bar-material.component.ts","../../../projects/ngx-emfular-integration/src/lib/editor/file-level-bar-material/file-level-bar-material.component.html","../../../projects/ngx-emfular-integration/src/public-api.ts","../../../projects/ngx-emfular-integration/src/ngx-emfular-integration.ts"],"sourcesContent":["import {Inject, Injectable, InjectionToken, PLATFORM_ID} from '@angular/core';\nimport {Deserializer, JsonDeserializable, JsonOf, Referencable} from \"emfular\";\nimport {HistoryService, IoService} from \"ngx-emfular-helper\";\n\nexport const HISTORY_SERVICE = new InjectionToken<HistoryService<any>>(\n    'HistoryService'\n);\nexport function provideHistoryForModel<M>(\n    prefix: string = 'history_',\n    bufferSize: number = 50\n) {\n  return {\n    provide: HISTORY_SERVICE,\n    useFactory: (platformId: Object) => new HistoryService<JsonOf<M>>(prefix, bufferSize, platformId),\n    deps: [PLATFORM_ID]\n  };\n}\n\n\n@Injectable({\n  providedIn: 'root'\n})\nexport abstract class ModelService<M extends Referencable<any>> {\n\n  private _model!: M\n  get model(): M {\n    return this._model;\n  }\n  protected set model(model: M) {\n    this._model = this.adjustModel(model);\n    this.adaptToModel()\n  }\n\n  protected constructor(\n      @Inject(HISTORY_SERVICE) readonly historyService: HistoryService<JsonOf<M>>,\n      readonly ioService: IoService,\n      protected readonly modelClass: JsonDeserializable<M>,\n  ) {\n    this._model = new modelClass()     //default initialization without calling set, since adjustments might need not yet initialized properties\n    queueMicrotask(() => { //necessary to avoid timing issues if adjust model or adapt to model call services or other not initialized properties of the inheriting class\n      this.historyService.state$.subscribe(state => {\n        if (state) {\n          this.applyJson(state);\n        }\n      });\n    })\n  }\n\n  //default implementation to override if you need any normalization on a model before setting it\n  adjustModel(model: M): M {\n    return model;\n  }\n\n  //default implementation to override if you need adaptation of surroundings,\n  // e.g. other attributes, notifications, signals etc\n  adaptToModel() {}\n\n  // override by either a fixed string or sth from the current model itself\n  public fileTitle(): string {\n    return \"model\"\n  }\n\n  newModel() {\n    this.model = new this.modelClass()\n    this.saveCurrentState()\n  }\n\n  serialize(): JsonOf<M> {\n    return this.model.toJson()\n  }\n\n  deserialize(modelJson: JsonOf<M>): M {\n    let modelEClass = new this.modelClass().getEClass();\n    return Deserializer.fromJSON<M>(modelJson, modelEClass);\n  }\n\n  saveCurrentState() {\n    this.historyService.save(this.serialize())\n  }\n\n  protected applyJson(modelJson: JsonOf<M>): M {\n    this.model = this.deserialize(modelJson);\n    return this.model;\n  }\n\n  loadFromJson(modelJson: JsonOf<M>): void {\n    this.applyJson(modelJson);\n    this.saveCurrentState()\n  }\n\n  loadFromFile(event: Event) {\n    this.ioService.loadStringFromFile(event).then(txt => {\n      //todo insert detection code for wrong files (no json, not appropriately structured\n      this.loadFromJson(JSON.parse(txt));\n    });\n  }\n\n  save() {\n    const jsonString = JSON.stringify(this.serialize());\n    this.ioService.saveJson(jsonString, this.fileTitle())\n  }\n\n}\n","import {Component, Input} from '@angular/core';\nimport {InputHandler, IoService} from \"ngx-emfular-helper\";\nimport {Referencable} from \"emfular\";\nimport {ModelService} from \"../../model.service\";\n\n@Component({\n  selector: 'emfular-file-level-bar',\n  imports: [],\n  templateUrl: './file-level-bar.component.html',\n  styleUrl: './file-level-bar.component.css'\n})\nexport class FileLevelBarComponent<M extends Referencable<any>> {\n  @Input() svg!: SVGElement\n  @Input() modelService!: ModelService<M>\n  protected readonly InputHandler = InputHandler;\n\n  constructor(public ioService: IoService) {\n  }\n\n  openModel() {\n    document.getElementById('openModel')?.click();\n  }\n\n\n  saveSVG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSVG(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasPNG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsPng(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasJPEG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsJpeg(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n\n}\n","<input id=\"openModel\" type=\"file\" class=\"file-upload\" style=\"display:none\"\n       (change)=\"modelService.loadFromFile($event)\"\n       (click)=\"InputHandler.clearElem($event)\">\n\n<div class=\"file-level-bar\">\n    <button (click)=\"modelService.newModel()\">New</button>\n    <button (click)=\"openModel()\">Open</button>\n    <span class=\"separator\"></span>\n    <button (click)=\"modelService.historyService.undo()\" [disabled]=\"modelService.historyService.isUndoNotPossible()\">Undo</button>\n    <button (click)=\"modelService.historyService.redo()\" [disabled]=\"modelService.historyService.isRedoNotPossible()\">Redo</button>\n    <span class=\"separator\"></span>\n    <button (click)=\"modelService.save()\">Save</button>\n    <button (click)=\"saveSVG()\">Save SVG</button>\n    <button (click)=\"saveSVGasPNG()\">Save PNG</button>\n    <button (click)=\"saveSVGasJPEG()\">Save JPEG</button>\n</div>\n","import {Component, Input} from '@angular/core';\nimport {NgForOf, NgIf} from \"@angular/common\";\n\n@Component({\n  selector: 'emfular-model-editing-bar',\n  imports: [\n    NgForOf,\n    NgIf\n  ],\n  templateUrl: './model-editing-bar.component.html',\n  styleUrl: './model-editing-bar.component.css'\n})\nexport class ModelEditingBarComponent {\n  @Input() buttons: Array<{\n    label: string;\n    icon?: string;\n    action: () => void;\n  }> | null = null;\n\n\n}\n","<div class=\"model-editing-bar\">\n    <button *ngFor=\"let b of buttons\" (click)=\"b.action()\">\n        <span *ngIf=\"b.icon\" class=\"icon\">{{ b.icon }}</span>\n        {{ b.label }}\n    </button>\n</div>\n","import {ReContainer, Referencable } from \"emfular\";\n\nexport class GraphicalHelper {\n\n    //todo, refactor into emfular\n    static getAsList<T extends Referencable<any>>(refs: ReContainer<T, any>): T[] {\n        const items: T[]|T|undefined = refs.get()\n        if(items) {\n            if(Array.isArray(items)) {\n                return items\n            }\n            const result: T[] = [];\n            result.push(items)\n            return result\n        } else {\n            return [];\n        }\n    }\n\n}\n","import {getAllAttributes, Referencable } from \"emfular\";\n\nexport class IdHelper {\n\n    static getLabel(ref: Referencable<any>): string {\n        // 1. If the model has a \"name\" attribute → use it\n        if ((ref as any).name) {\n            return `${(ref as any).name}`;\n        }\n\n        // 2. Otherwise: first primitive attribute\n        const attrs = getAllAttributes(ref.constructor);\n        for (const [key] of attrs) {\n            const value = (ref as any)[key];\n            if (typeof value === \"string\" || typeof value === \"number\") {\n                return `${value}`;\n            }\n        }\n\n        /*\n        // 3. Otherwise: use ID (EMFular always has stable IDs)\n        if ((ref as any).id) {\n            return `(id=${(ref as any).id})`;\n        }*/\n\n        // 4. Otherwise: fallback\n        return \"(unnamed)\";\n    }\n\n}\n","import {Component, EventEmitter, Input, Output} from '@angular/core';\nimport {Referencable} from 'emfular';\nimport {ArrowBetweenElemsComponent, BoundingBox, RectangleWithTextComponent, PositionHelper} from 'ngx-svg-graphics';\nimport {GraphicalHelper} from \"../../utils/graphical-helper\";\nimport {IdHelper} from \"../../utils/id-helper\";\n\n@Component({\n  selector: '[referencable-box]',\n  imports: [RectangleWithTextComponent, ArrowBetweenElemsComponent],\n  templateUrl: './referencable-box.component.svg',\n  styleUrl: './referencable-box.component.css'\n})\nexport class ReferencableBoxComponent {\n  @Input() referencable!: Referencable<any>;\n  @Input() position!: BoundingBox\n  @Input() color?: string = \"#efad78\"\n  @Output() chooseElement: EventEmitter<Referencable<any>> = new EventEmitter();\n\n\n  isExpandedArray: boolean[] = []\n\n  toggleExpand(i: number) {\n    this.isExpandedArray[i]= !this.isExpandedArray[i];\n  }\n\n  choose(element: Referencable<any>) {\n    this.chooseElement.emit(element);\n  }\n\n  constructor() {}\n\n  protected readonly GraphicalHelper = GraphicalHelper;\n  protected readonly PositionHelper = PositionHelper\n  protected readonly IdHelper = IdHelper;\n}\n","<svg:g [attr.id]=\"referencable.$gId\">\n\n    <g rectangle-with-text\n       (click)=\"choose(referencable)\"\n       [id]=\"referencable.$gId + '_main'\"\n       [text]=\"IdHelper.getLabel(referencable)\"\n       [position]=\"position\"\n       [color]=\"color\"\n    >\n    </g>\n\n    <!-- containers -->\n    @for (container of referencable.$treeChildren;\n        track referencable.$gId + '_' + container.referenceName\n            ; let i = $index) {\n\n        @let containerKey = referencable.$gId + '_' + container.referenceName;\n        @let containerAnchorBox = PositionHelper.computeChildBBox(\n            i,\n            referencable.$treeChildren.length,\n            position\n        );\n\n        <!-- reference box -->\n        <g rectangle-with-text\n           (click)=\"toggleExpand(i)\"\n           [id]=\"containerKey + '_ref'\"\n           [text]=\"container.referenceName\"\n           [position]=\"containerAnchorBox\"\n           color=\"#ede679\"\n        >\n        </g>\n\n        <!-- arrow from main box to reference -->\n        <g arrowElems\n           [startGID]=\"referencable.$gId\"\n           startSuffix=\"_main\"\n           [endGID]=\"containerKey\"\n           endSuffix=\"_ref\">\n        </g>\n\n        @if (isExpandedArray[i]) {\n            <!-- real children inside this reference -->\n            @let realChildren = GraphicalHelper.getAsList(container);\n\n            @for (elem of realChildren; track elem.$gId; let j = $index) {\n\n                @let elemBox = PositionHelper.computeChildBBox(\n                    j,\n                    realChildren.length,\n                    containerAnchorBox\n                );\n                <g referencable-box\n                   (chooseElement)=\"choose($event)\"\n                   [referencable]=\"elem\"\n                   [position]=\"elemBox\"\n                >\n                </g>\n                <!-- arrow from reference to child box -->\n                <g arrowElems\n                   [startGID]=\"containerKey\"\n                   startSuffix=\"_ref\"\n                   [endGID]=\"elem.$gId\"\n                   endSuffix=\"_main\">\n                </g>\n            }\n\n        }\n    }\n</svg:g>\n","import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';\nimport {ReferencableBoxComponent} from \"../../graphical/referencable-box/referencable-box.component\";\nimport {ModelService} from \"../../model.service\";\nimport { Referencable } from 'emfular';\nimport { BoundingBox } from 'ngx-svg-graphics';\n\n@Component({\n  selector: 'model-canvas',\n    imports: [\n        ReferencableBoxComponent\n    ],\n  templateUrl: './model-canvas.component.html',\n  styleUrl: './model-canvas.component.css'\n})\nexport class ModelCanvasComponent<M extends Referencable<any>> implements OnInit {\n  svgwidth = 1500;\n  svgheigth = 1000;\n  initialBBox : BoundingBox = {x: this.svgwidth/2, y: 20, w: 200, h: 25}\n\n  @Input() modelService!: ModelService<M>\n  @Output() chooseElement: EventEmitter<Referencable<any>> = new EventEmitter();\n  @Output() svgReady: EventEmitter<SVGSVGElement> = new EventEmitter<SVGSVGElement>();\n  @ViewChild('svg', { static: true })\n  svg!: ElementRef<SVGSVGElement>;\n\n  ngOnInit() {\n    // Safe because static: true\n    this.svgReady.emit(this.svg.nativeElement);\n  }\n\n  choose(element: Referencable<any>): void {\n    this.chooseElement.emit(element);\n  }\n\n}\n","<div class=\"modeling-container\">\n    <svg #svg id=\"svg\" class=\"canvas-svg\" [attr.width]=\"svgwidth\" [attr.height]=\"svgheigth\">\n        <g referencable-box\n           [referencable]=\"modelService.model\"\n           [position]=\"initialBBox\"\n           (chooseElement)=\"choose($event)\"\n        >\n        </g>\n    </svg>\n</div>\n","import {Component, Input} from '@angular/core';\nimport {ReContainer, Referencable } from 'emfular';\nimport {GraphicalHelper} from \"../../utils/graphical-helper\";\nimport {NgForOf, NgIf} from \"@angular/common\";\nimport {IdHelper} from \"../../utils/id-helper\";\nimport {ModelService} from \"../../model.service\";\nimport {ModelDetailsService} from \"../model-details-service\";\n\n@Component({\n  selector: 'container-details',\n  imports: [\n    NgForOf,\n    NgIf,\n  ],\n  templateUrl: './container-details.component.html',\n  styleUrl: './container-details.component.css'\n})\nexport class ContainerDetailsComponent<M extends Referencable<any>> {\n  @Input() container!: ReContainer<any, any>\n  @Input() isTree!: boolean\n  @Input() modelService!: ModelService<M>\n  @Input() detailsService!: ModelDetailsService<M>  //todo just enforce interface?\n\n  open(ref: Referencable<any>) {\n    this.detailsService.openDetails(ref, this.modelService)\n  }\n\n  remove(ref: Referencable<any>) {\n    //todo service should do this... in order for single source of truth\n    if(this.container.remove(ref))\n      this.modelService.saveCurrentState()\n  }\n\n  add() {\n    //create on tree and open choice by graphical model on other links\n    if(this.isTree) {\n      console.log(\"Creation for several possible sub types is not solved in a meta-agnostic scenario\")\n    } else {\n      this.detailsService\n          .openModelChoice(this.modelService)\n          .subscribe(chosen => {\n            if (!chosen) return; // user cancelled\n            // todo what about type mismatches?\n            if (this.container.add(chosen)) {\n              this.modelService.saveCurrentState();\n            }\n          });\n    }\n  }\n\n  protected readonly GraphicalHelper = GraphicalHelper;\n  protected readonly IdHelper = IdHelper;\n}\n","<h4>{{container.referenceName+\":\"}}</h4>\n\n<button *ngIf=\"!isTree\" class=\"add-ref\" (click)=\"add()\">Add</button>\n\n<div class=\"container-row\"\n     *ngFor=\"let elem of GraphicalHelper.getAsList(container)\">\n    <div class=\"ref-info\">\n        <span class=\"ref-icon\">🔗</span>\n        <span class=\"ref-type\">{{ elem.getEClass() }}</span>\n        <span class=\"ref-label\">{{ IdHelper.getLabel(elem) }}</span>\n    </div>\n\n    <div class=\"ref-actions\">\n        <button (click)=\"open(elem)\">Open</button>\n        <button (click)=\"remove(elem)\">Remove</button>\n    </div>\n</div>\n\n","import {Component, Input, OnInit} from '@angular/core';\nimport {AttributeOptions, Referencable, ReLinkContainer, ReTreeChildrenContainer } from 'emfular';\nimport {ModelService} from \"../../model.service\";\nimport { getAllAttributes } from \"emfular\";\nimport {FormsModule} from \"@angular/forms\";\nimport {NgForOf} from \"@angular/common\";\nimport {\n  ContainerDetailsComponent\n} from \"../container-details/container-details.component\";\nimport {ModelDetailsService} from \"../model-details-service\";\n\n@Component({\n  selector: 'lib-model-details',\n  imports: [\n    FormsModule,\n    NgForOf,\n    ContainerDetailsComponent\n  ],\n  templateUrl: './model-details.component.html',\n  styleUrl: './model-details.component.css'\n})\nexport class ModelDetailsComponent<T extends Referencable<any>, M extends Referencable<any>> implements OnInit {\n  @Input() model!: T\n  @Input() modelService!: ModelService<M>\n  @Input() detailsService!: ModelDetailsService<M>\n\n  attributes: Array<{ key: string; options: AttributeOptions }> = [];\n\n  ngOnInit() {\n    const map = getAllAttributes(this.model.constructor);\n    this.attributes = Array.from(map.entries()).map(([key, options]) => ({\n      key,\n      options\n    }));\n  }\n  \n  getLinks(): ReLinkContainer<any, any>[] {\n    return this.model.$otherReferences\n  }\n\n  getChildren(): ReTreeChildrenContainer<any>[] {\n    return this.model.$treeChildren\n  }\n\n}\n","<h1>Detail-Editor</h1>\n<h2>{{model.getEClass()}}</h2>\n<div class=\"attribute-list\">\n    <div class=\"attribute-row\" *ngFor=\"let attr of attributes\">\n        <label>{{ attr.key }}</label>\n        <input\n                type=\"text\"\n                [(ngModel)]=\"$any(model)[attr.key]\"\n        />\n    </div>\n</div>\n<h3>References</h3>\n<div class=\"reference-list\">\n    <container-details\n            *ngFor=\"let container of getChildren()\"\n            [container]=\"container\"\n            [isTree]=\"true\"\n            [modelService]=\"modelService\"\n            [detailsService]=\"detailsService\"\n    >\n    </container-details>\n    <container-details\n        *ngFor=\"let container of getLinks()\"\n        [container]=\"container\"\n        [isTree]=\"false\"\n        [modelService]=\"modelService\"\n        [detailsService]=\"detailsService\"\n    >\n    </container-details>\n</div>\n\n","import { Injectable } from '@angular/core';\nimport { Referencable } from 'emfular';\nimport {ModelService} from \"../model.service\";\nimport {ModelDetailsComponent} from \"./model-details/model-details.component\";\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {ModelCanvasComponent} from \"../editor/model-canvas/model-canvas.component\";\nimport {Observable, Subject} from \"rxjs\";\nimport {ModelDetailsService} from \"./model-details-service\";\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class BasicModelDetailsService<M extends Referencable<any>> implements ModelDetailsService<M> {\n\n  constructor( private overlay: Overlay) { }\n\n  //actually T must be somewhere on M\n  openDetails<\n      T extends Referencable<any>\n  >(elem: T, modelService: ModelService<M>) {\n    // instead of opening the generic ModeldetailsCompoennt you might like to consider opening a specific one\n    //by determining the eClass and switching based on elem.getEClass()\n\n    const overlayRef = this.overlay.create(\n        { hasBackdrop: true,\n          backdropClass: 'cdk-overlay-dark-backdrop',\n          panelClass: 'basic-details-panel',\n          positionStrategy: this.overlay.position()\n              .global() .centerHorizontally() .centerVertically()\n        });\n    const portal = new ComponentPortal(ModelDetailsComponent<T,M>);\n    const ref = overlayRef.attach(portal);\n    ref.instance.model = elem;\n    ref.instance.modelService = modelService;\n    ref.instance.detailsService = this\n    overlayRef.backdropClick().subscribe(\n        () => overlayRef.dispose()\n    );\n  }\n\n    openModelChoice(\n        modelService: ModelService<M>\n    ): Observable<Referencable<any>> {\n\n        const subject = new Subject<Referencable<any>>();\n\n        const overlayRef = this.overlay.create({\n            hasBackdrop: true,\n            backdropClass: 'cdk-overlay-dark-backdrop',\n            panelClass: 'basic-details-panel',\n            positionStrategy: this.overlay.position()\n                .global().centerHorizontally().centerVertically()\n        });\n\n        const portal = new ComponentPortal(ModelCanvasComponent<M>);\n        const ref = overlayRef.attach(portal);\n\n        ref.instance.modelService = modelService;\n        ref.instance.chooseElement.subscribe(next => {\n            subject.next(next);\n            subject.complete();\n            overlayRef.dispose();\n        });\n\n        overlayRef.backdropClick().subscribe(() => {\n            subject.complete();\n            overlayRef.dispose();\n        });\n\n        return subject.asObservable();\n    }\n\n}\n","import {Component, Input} from '@angular/core';\nimport { Referencable} from \"emfular\";\nimport {FileLevelBarComponent} from \"../file-level-bar/file-level-bar.component\";\nimport {ModelEditingBarComponent} from \"../model-editing-bar/model-editing-bar.component\";\nimport {ModelService} from \"../../model.service\";\nimport {ModelCanvasComponent} from \"../model-canvas/model-canvas.component\";\nimport {ModelDetailsService} from \"../../details/model-details-service\";\nimport {BasicModelDetailsService} from \"../../details/basic-model-details.service\";\n\n@Component({\n  selector: 'emfular-tree-editor',\n    imports: [\n        FileLevelBarComponent,\n        ModelEditingBarComponent,\n        ModelCanvasComponent\n    ],\n  templateUrl: './tree-editor.component.html',\n  styleUrl: './tree-editor.component.css'\n})\nexport class TreeEditorComponent<M extends Referencable<any>> {\n    svgElement!: SVGSVGElement;\n    @Input() modelService!: ModelService<M>\n    @Input() detailsService?: ModelDetailsService<M>\n    @Input() customButtons: Array<{\n      label: string;\n      icon?: string;\n      action: () => void;\n    }> | null = null;\n\n    constructor(private basicDetailsService: BasicModelDetailsService<M>) {}\n\n    get sidebarButtons() {\n      if (this.customButtons) return this.customButtons;\n      else       //todo replace by default create buttons\n          return[{label: \"test\", action: () => {console.log(\"Button on model edition works\")}}];\n    }\n\n    get effectiveDetailsService(): ModelDetailsService<M> {\n        return this.detailsService ?? this.basicDetailsService;\n    }\n\n    onSvgReady(svg: SVGSVGElement) {\n        this.svgElement = svg;\n    }\n\n    choose(element: Referencable<any>) {\n      this.effectiveDetailsService.openDetails(element, this.modelService)\n    }\n}\n","<div class=\"tree-editor\" id=\"tree-editor\">\n    <emfular-file-level-bar\n            [svg]=\"svgElement\"\n            [modelService]=\"modelService\">\n    </emfular-file-level-bar>\n    <div class=\"editor-main\">\n        <!-- vertical model bar -->\n        <emfular-model-editing-bar\n                class=\"model-bar\"\n                [buttons]=\"sidebarButtons\">\n        </emfular-model-editing-bar>\n\n\n        <model-canvas\n                [modelService]=\"modelService\"\n                (svgReady)=\"onSvgReady($event)\"\n                (chooseElement)=\"choose($event)\"\n        >\n        </model-canvas>\n    </div>\n</div>\n\n","import {Component, Input} from '@angular/core';\nimport {InputHandler, IoService} from \"ngx-emfular-helper\";\nimport {Referencable} from \"emfular\";\nimport { CommonModule } from '@angular/common';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport {ModelService} from \"../../model.service\";\n\n@Component({\n  selector: 'emfular-file-level-bar-material',\n  imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule],\n  templateUrl: './file-level-bar-material.component.html',\n  styleUrl: './file-level-bar-material.component.css'\n})\nexport class FileLevelBarMaterialComponent<M extends Referencable<any>> {\n  @Input() svg!: SVGElement\n  @Input() modelService!: ModelService<M>\n  protected readonly InputHandler = InputHandler;\n\n  constructor(public ioService: IoService) {\n  }\n\n  openModel() {\n    document.getElementById('openModel')?.click();\n  }\n\n\n  saveSVG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSVG(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasPNG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsPng(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n  saveSVGasJPEG() {\n    const svgContent = this.svg;\n    if(svgContent) {\n      this.ioService.saveSvgAsJpeg(svgContent, this.modelService.fileTitle())\n    }\n  }\n\n\n}\n","<input id=\"openModel\" type=\"file\" class=\"file-upload\" style=\"display: none\" (change)=\"modelService.loadFromFile($event)\" (click)=\"InputHandler.clearElem($event)\">\n<mat-toolbar class=\"file-level-bar\">\n    <button (click)=\"modelService.newModel()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"insert_drive_file\" ></mat-icon>\n        New\n    </button>\n    <button (click)=\"openModel()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"file_upload\" ></mat-icon>\n        Open\n    </button>\n    <hr/>\n    <button (click)=\"modelService.historyService.undo()\" [disabled]=\"modelService.historyService.isUndoNotPossible()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"undo\" ></mat-icon>\n        Undo</button>\n    <button (click)=\"modelService.historyService.redo()\" [disabled]=\"modelService.historyService.isRedoNotPossible()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"redo\" ></mat-icon>\n        Redo</button>\n    <hr />\n    <button (click)=\"modelService.save()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"file_download\" ></mat-icon>\n        Save\n    </button>\n    <button (click)=\"saveSVG()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"photo_library\" ></mat-icon>\n        Save SVG\n    </button>\n    <button (click)=\"saveSVGasPNG()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"photo_library\" ></mat-icon>\n        Save PNG\n    </button>\n    <button (click)=\"saveSVGasJPEG()\">\n        <mat-icon aria-hidden=\"false\" fontIcon=\"photo_library\" ></mat-icon>\n        Save JPEG\n    </button>\n</mat-toolbar>\n","/*\n * Public API Surface of ngx-emfular-integration\n */\n\nexport * from './lib/model.service';\n\nexport * from './lib/editor/tree-editor/tree-editor.component'\nexport * from './lib/editor/file-level-bar/file-level-bar.component';\nexport * from './lib/editor/file-level-bar-material/file-level-bar-material.component';\nexport * from './lib/editor/model-editing-bar/model-editing-bar.component';\nexport * from './lib/editor/model-canvas/model-canvas.component';\n\nexport * from './lib/graphical/referencable-box/referencable-box.component';\n\nexport * from './lib/details/model-details-service'\nexport * from './lib/details/basic-model-details.service'\nexport * from './lib/details/model-details/model-details.component';\nexport * from './lib/details/container-details/container-details.component'\n\nexport * from './lib/utils/id-helper'","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1","i1.BasicModelDetailsService"],"mappings":"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"}

package/lib/details/basic-model-details.service.d.ts

@@ -0,0 +1,14 @@
+import { Referencable } from 'emfular';
+import { ModelService } from "../model.service";
+import { Overlay } from '@angular/cdk/overlay';
+import { Observable } from "rxjs";
+import { ModelDetailsService } from "./model-details-service";
+import * as i0 from "@angular/core";
+export declare class BasicModelDetailsService<M extends Referencable<any>> implements ModelDetailsService<M> {
+    private overlay;
+    constructor(overlay: Overlay);
+    openDetails<T extends Referencable<any>>(elem: T, modelService: ModelService<M>): void;
+    openModelChoice(modelService: ModelService<M>): Observable<Referencable<any>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicModelDetailsService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BasicModelDetailsService<any>>;
+}

package/lib/details/container-details/container-details.component.d.ts

@@ -0,0 +1,19 @@
+import { ReContainer, Referencable } from 'emfular';
+import { GraphicalHelper } from "../../utils/graphical-helper";
+import { IdHelper } from "../../utils/id-helper";
+import { ModelService } from "../../model.service";
+import { ModelDetailsService } from "../model-details-service";
+import * as i0 from "@angular/core";
+export declare class ContainerDetailsComponent<M extends Referencable<any>> {
+    container: ReContainer<any, any>;
+    isTree: boolean;
+    modelService: ModelService<M>;
+    detailsService: ModelDetailsService<M>;
+    open(ref: Referencable<any>): void;
+    remove(ref: Referencable<any>): void;
+    add(): void;
+    protected readonly GraphicalHelper: typeof GraphicalHelper;
+    protected readonly IdHelper: typeof IdHelper;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContainerDetailsComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContainerDetailsComponent<any>, "container-details", never, { "container": { "alias": "container"; "required": false; }; "isTree": { "alias": "isTree"; "required": false; }; "modelService": { "alias": "modelService"; "required": false; }; "detailsService": { "alias": "detailsService"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/details/model-details/model-details.component.d.ts

@@ -0,0 +1,19 @@
+import { OnInit } from '@angular/core';
+import { AttributeOptions, Referencable, ReLinkContainer, ReTreeChildrenContainer } from 'emfular';
+import { ModelService } from "../../model.service";
+import { ModelDetailsService } from "../model-details-service";
+import * as i0 from "@angular/core";
+export declare class ModelDetailsComponent<T extends Referencable<any>, M extends Referencable<any>> implements OnInit {
+    model: T;
+    modelService: ModelService<M>;
+    detailsService: ModelDetailsService<M>;
+    attributes: Array<{
+        key: string;
+        options: AttributeOptions;
+    }>;
+    ngOnInit(): void;
+    getLinks(): ReLinkContainer<any, any>[];
+    getChildren(): ReTreeChildrenContainer<any>[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModelDetailsComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModelDetailsComponent<any, any>, "lib-model-details", never, { "model": { "alias": "model"; "required": false; }; "modelService": { "alias": "modelService"; "required": false; }; "detailsService": { "alias": "detailsService"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/details/model-details-service.d.ts

@@ -0,0 +1,7 @@
+import { Referencable } from "emfular";
+import { ModelService } from "../model.service";
+import { Observable } from "rxjs";
+export interface ModelDetailsService<M extends Referencable<any>> {
+    openDetails<T extends Referencable<any>>(elem: T, modelService: ModelService<M>): void;
+    openModelChoice(modelService: ModelService<M>): Observable<Referencable<any>>;
+}

package/lib/editor/model-canvas/model-canvas.component.d.ts

@@ -0,0 +1,18 @@
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { ModelService } from "../../model.service";
+import { Referencable } from 'emfular';
+import { BoundingBox } from 'ngx-svg-graphics';
+import * as i0 from "@angular/core";
+export declare class ModelCanvasComponent<M extends Referencable<any>> implements OnInit {
+    svgwidth: number;
+    svgheigth: number;
+    initialBBox: BoundingBox;
+    modelService: ModelService<M>;
+    chooseElement: EventEmitter<Referencable<any>>;
+    svgReady: EventEmitter<SVGSVGElement>;
+    svg: ElementRef<SVGSVGElement>;
+    ngOnInit(): void;
+    choose(element: Referencable<any>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModelCanvasComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModelCanvasComponent<any>, "model-canvas", never, { "modelService": { "alias": "modelService"; "required": false; }; }, { "chooseElement": "chooseElement"; "svgReady": "svgReady"; }, never, never, true, never>;
+}

package/lib/editor/tree-editor/tree-editor.component.d.ts

@@ -1,26 +1,27 @@
-import { ElementRef } from '@angular/core';
 import { Referencable } from "emfular";
-import { BoundingBox } from "ngx-svg-graphics";
 import { ModelService } from "../../model.service";
+import { ModelDetailsService } from "../../details/model-details-service";
+import { BasicModelDetailsService } from "../../details/basic-model-details.service";
 import * as i0 from "@angular/core";
 export declare class TreeEditorComponent<M extends Referencable<any>> {
-    svgwidth: number;
-    svgheigth: number;
-    svg: ElementRef<SVGElement>;
-    get svgEl(): SVGElement;
+    private basicDetailsService;
+    svgElement: SVGSVGElement;
     modelService: ModelService<M>;
+    detailsService?: ModelDetailsService<M>;
     customButtons: Array<{
         label: string;
         icon?: string;
         action: () => void;
     }> | null;
-    initialBBox: BoundingBox;
-    constructor();
+    constructor(basicDetailsService: BasicModelDetailsService<M>);
     get sidebarButtons(): {
         label: string;
         icon?: string;
         action: () => void;
     }[];
+    get effectiveDetailsService(): ModelDetailsService<M>;
+    onSvgReady(svg: SVGSVGElement): void;
+    choose(element: Referencable<any>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeEditorComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TreeEditorComponent<any>, "emfular-tree-editor", never, { "modelService": { "alias": "modelService"; "required": false; }; "customButtons": { "alias": "customButtons"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeEditorComponent<any>, "emfular-tree-editor", never, { "modelService": { "alias": "modelService"; "required": false; }; "detailsService": { "alias": "detailsService"; "required": false; }; "customButtons": { "alias": "customButtons"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/graphical/referencable-box/referencable-box.component.d.ts

@@ -1,14 +1,21 @@
+import { EventEmitter } from '@angular/core';
 import { Referencable } from 'emfular';
 import { BoundingBox, PositionHelper } from 'ngx-svg-graphics';
-import { GraphicalHelper } from "../graphical-helper";
+import { GraphicalHelper } from "../../utils/graphical-helper";
+import { IdHelper } from "../../utils/id-helper";
 import * as i0 from "@angular/core";
 export declare class ReferencableBoxComponent {
     referencable: Referencable<any>;
     position: BoundingBox;
     color?: string;
+    chooseElement: EventEmitter<Referencable<any>>;
+    isExpandedArray: boolean[];
+    toggleExpand(i: number): void;
+    choose(element: Referencable<any>): void;
     constructor();
     protected readonly GraphicalHelper: typeof GraphicalHelper;
     protected readonly PositionHelper: typeof PositionHelper;
+    protected readonly IdHelper: typeof IdHelper;
     static ɵfac: i0.ɵɵFactoryDeclaration<ReferencableBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ReferencableBoxComponent, "[referencable-box]", never, { "referencable": { "alias": "referencable"; "required": false; }; "position": { "alias": "position"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ReferencableBoxComponent, "[referencable-box]", never, { "referencable": { "alias": "referencable"; "required": false; }; "position": { "alias": "position"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "chooseElement": "chooseElement"; }, never, never, true, never>;
 }

package/lib/utils/id-helper.d.ts

@@ -0,0 +1,4 @@
+import { Referencable } from "emfular";
+export declare class IdHelper {
+    static getLabel(ref: Referencable<any>): string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-emfular-integration",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Integrates emfular with its ngx-helper to provide modeling services",
   "keywords": [
     "EMFular",
@@ -15,6 +15,24 @@
     "type": "git",
     "url": "https://github.com/softlang/EMFular/tree/main/projects/ngx-emfular-integration"
   },
+  "exports": {
+    "./*": {
+      "default": "./*"
+    },
+    "./public-api": {
+      "default": "./public-api.js"
+    },
+    "./details-overlay.css": {
+      "default": "./details-overlay.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ngx-emfular-integration.mjs"
+    }
+  },
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",
@@ -29,14 +47,5 @@
   },
   "sideEffects": false,
   "module": "fesm2022/ngx-emfular-integration.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ngx-emfular-integration.mjs"
-    }
-  }
+  "typings": "index.d.ts"
 }

package/public-api.d.ts

@@ -3,4 +3,10 @@ export * from './lib/editor/tree-editor/tree-editor.component';
 export * from './lib/editor/file-level-bar/file-level-bar.component';
 export * from './lib/editor/file-level-bar-material/file-level-bar-material.component';
 export * from './lib/editor/model-editing-bar/model-editing-bar.component';
+export * from './lib/editor/model-canvas/model-canvas.component';
 export * from './lib/graphical/referencable-box/referencable-box.component';
+export * from './lib/details/model-details-service';
+export * from './lib/details/basic-model-details.service';
+export * from './lib/details/model-details/model-details.component';
+export * from './lib/details/container-details/container-details.component';
+export * from './lib/utils/id-helper';