rete-angular-plugin 2.1.1 → 2.1.2

package/13/esm2020/presets/classic/components/node/node.component.mjs

@@ -1,5 +1,4 @@
 import { Component, Input, HostBinding, ChangeDetectorRef } from '@angular/core';
-import { ClassicPreset as Classic } from 'rete';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "../../../../ref";
@@ -62,6 +61,12 @@ export class NodeComponent {
         this.seed = 0;
         this.cdr.detach();
     }
+    get width() {
+        return this.data.width;
+    }
+    get height() {
+        return this.data.height;
+    }
     get selected() {
         return this.data.selected;
     }
@@ -77,7 +82,8 @@ export class NodeComponent {
     }
 }
 NodeComponent.ɵfac = function NodeComponent_Factory(t) { return new (t || NodeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-NodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NodeComponent, selectors: [["ng-component"]], hostAttrs: ["data-testid", "node"], hostVars: 2, hostBindings: function NodeComponent_HostBindings(rf, ctx) { if (rf & 2) {
+NodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NodeComponent, selectors: [["ng-component"]], hostAttrs: ["data-testid", "node"], hostVars: 6, hostBindings: function NodeComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        i0.ɵɵstyleProp("width", ctx.width, "px")("height", ctx.height, "px");
         i0.ɵɵclassProp("selected", ctx.selected);
     } }, inputs: { data: "data", emit: "emit", rendered: "rendered" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 13, consts: [["data-testid", "title", 1, "title"], ["class", "output", 4, "ngFor", "ngForOf"], ["class", "control", "refComponent", "", 3, "data", "emit", 4, "ngFor", "ngForOf"], ["class", "input", 4, "ngFor", "ngForOf"], [1, "output"], ["data-testid", "output-title", 1, "output-title"], ["refComponent", "", "data-testid", "output-socket", 1, "output-socket", 3, "data", "emit"], ["refComponent", "", 1, "control", 3, "data", "emit"], [1, "input"], ["refComponent", "", "data-testid", "input-socket", 1, "input-socket", 3, "data", "emit"], ["class", "input-title", "data-testid", "input-title", 4, "ngIf"], ["refComponent", "", "data-testid", "input-control", 1, "input-control", 3, "data", "emit"], ["data-testid", "input-title", 1, "input-title"]], template: function NodeComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
@@ -98,20 +104,26 @@ NodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NodeComponent
         i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(5, 7, ctx.data.controls, ctx.sortByIndex));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(7, 10, ctx.data.inputs, ctx.sortByIndex));
-    } }, directives: [i1.NgForOf, i2.RefDirective, i1.NgIf], pipes: [i1.KeyValuePipe], styles: ["[_nghost-%COMP%]{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;min-width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}[_nghost-%COMP%]:hover{background:rgba(130,153,255,.8)}.selected[_nghost-%COMP%]{background:#ffd92c;border-color:#e3c000}[_nghost-%COMP%]   .title[_ngcontent-%COMP%]{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}[_nghost-%COMP%]   .output[_ngcontent-%COMP%]{text-align:right}[_nghost-%COMP%]   .input[_ngcontent-%COMP%]{text-align:left}[_nghost-%COMP%]   .input-title[_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[_ngcontent-%COMP%]{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}[_nghost-%COMP%]   .input-title[hidden][_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[hidden][_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .output-socket[_ngcontent-%COMP%]{text-align:right;margin-right:-18px;display:inline-block}[_nghost-%COMP%]   .input-socket[_ngcontent-%COMP%]{text-align:left;margin-left:-18px;display:inline-block}[_nghost-%COMP%]   .input-control[_ngcontent-%COMP%]{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}[_nghost-%COMP%]   .control[_ngcontent-%COMP%]{padding:6px 18px}"] });
+    } }, directives: [i1.NgForOf, i2.RefDirective, i1.NgIf], pipes: [i1.KeyValuePipe], styles: ["[_nghost-%COMP%]{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}[_nghost-%COMP%]:hover{background:rgba(130,153,255,.8)}.selected[_nghost-%COMP%]{background:#ffd92c;border-color:#e3c000}[_nghost-%COMP%]   .title[_ngcontent-%COMP%]{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}[_nghost-%COMP%]   .output[_ngcontent-%COMP%]{text-align:right}[_nghost-%COMP%]   .input[_ngcontent-%COMP%]{text-align:left}[_nghost-%COMP%]   .input-title[_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[_ngcontent-%COMP%]{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}[_nghost-%COMP%]   .input-title[hidden][_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[hidden][_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .output-socket[_ngcontent-%COMP%]{text-align:right;margin-right:-18px;display:inline-block}[_nghost-%COMP%]   .input-socket[_ngcontent-%COMP%]{text-align:left;margin-left:-18px;display:inline-block}[_nghost-%COMP%]   .input-control[_ngcontent-%COMP%]{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}[_nghost-%COMP%]   .control[_ngcontent-%COMP%]{padding:6px 18px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NodeComponent, [{
         type: Component,
         args: [{ host: {
                     'data-testid': 'node'
-                }, template: "<div class=\"title\" data-testid=\"title\">{{data.label}}</div>\n<div class=\"output\" *ngFor=\"let output of data.outputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'output-'+output.key\">\n    <div class=\"output-title\" data-testid=\"output-title\">{{output.value?.label}}</div>\n    <div\n        class=\"output-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'output', key: output.key, nodeId: data.id, payload: output.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"output-socket\"\n    ></div>\n</div>\n<div\n    class=\"control\"\n    *ngFor=\"let control of data.controls | keyvalue: sortByIndex\"\n    refComponent\n    [data]=\"{type: 'control', payload: control.value }\"\n    [emit]=\"emit\"\n    [attr.data-testid]=\"'control-'+control.key\"\n></div>\n<div class=\"input\" *ngFor=\"let input of data.inputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'input-'+input.key\">\n    <div\n        class=\"input-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'input', key: input.key, nodeId: data.id, payload: input.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"input-socket\"\n    ></div>\n    <div class=\"input-title\" data-testid=\"input-title\" *ngIf=\"!input.value?.control || !input.value?.showControl\">{{input.value?.label}}</div>\n    <div\n        class=\"input-control\"\n        [style.display]=\"input.value?.control && input.value?.showControl ? '' : 'none'\"\n        refComponent\n        [data]=\"{type: 'control', payload: input.value?.control }\"\n        [emit]=\"emit\"\n        data-testid=\"input-control\"\n    ></div>\n</div>\n", styles: [":host{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;min-width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}:host:hover{background:rgba(130,153,255,.8)}:host.selected{background:#ffd92c;border-color:#e3c000}:host .title{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}:host .output{text-align:right}:host .input{text-align:left}:host .input-title,:host .output-title{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}:host .input-title[hidden],:host .output-title[hidden]{display:none}:host .output-socket{text-align:right;margin-right:-18px;display:inline-block}:host .input-socket{text-align:left;margin-left:-18px;display:inline-block}:host .input-control{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}:host .control{padding:6px 18px}\n"] }]
+                }, template: "<div class=\"title\" data-testid=\"title\">{{data.label}}</div>\n<div class=\"output\" *ngFor=\"let output of data.outputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'output-'+output.key\">\n    <div class=\"output-title\" data-testid=\"output-title\">{{output.value?.label}}</div>\n    <div\n        class=\"output-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'output', key: output.key, nodeId: data.id, payload: output.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"output-socket\"\n    ></div>\n</div>\n<div\n    class=\"control\"\n    *ngFor=\"let control of data.controls | keyvalue: sortByIndex\"\n    refComponent\n    [data]=\"{type: 'control', payload: control.value }\"\n    [emit]=\"emit\"\n    [attr.data-testid]=\"'control-'+control.key\"\n></div>\n<div class=\"input\" *ngFor=\"let input of data.inputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'input-'+input.key\">\n    <div\n        class=\"input-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'input', key: input.key, nodeId: data.id, payload: input.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"input-socket\"\n    ></div>\n    <div class=\"input-title\" data-testid=\"input-title\" *ngIf=\"!input.value?.control || !input.value?.showControl\">{{input.value?.label}}</div>\n    <div\n        class=\"input-control\"\n        [style.display]=\"input.value?.control && input.value?.showControl ? '' : 'none'\"\n        refComponent\n        [data]=\"{type: 'control', payload: input.value?.control }\"\n        [emit]=\"emit\"\n        data-testid=\"input-control\"\n    ></div>\n</div>\n", styles: [":host{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}:host:hover{background:rgba(130,153,255,.8)}:host.selected{background:#ffd92c;border-color:#e3c000}:host .title{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}:host .output{text-align:right}:host .input{text-align:left}:host .input-title,:host .output-title{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}:host .input-title[hidden],:host .output-title[hidden]{display:none}:host .output-socket{text-align:right;margin-right:-18px;display:inline-block}:host .input-socket{text-align:left;margin-left:-18px;display:inline-block}:host .input-control{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}:host .control{padding:6px 18px}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { data: [{
             type: Input
         }], emit: [{
             type: Input
         }], rendered: [{
             type: Input
+        }], width: [{
+            type: HostBinding,
+            args: ['style.width.px']
+        }], height: [{
+            type: HostBinding,
+            args: ['style.height.px']
         }], selected: [{
             type: HostBinding,
             args: ['class.selected']
         }] }); })();
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9uZzEzL3NyYy9wcmVzZXRzL2NsYXNzaWMvY29tcG9uZW50cy9ub2RlL25vZGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbmcxMy9zcmMvcHJlc2V0cy9jbGFzc2ljL2NvbXBvbmVudHMvbm9kZS9ub2RlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUM1RixPQUFPLEVBQUUsYUFBYSxJQUFJLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7Ozs7O0lDQWhELDhCQUEwSCxhQUFBO0lBQ2pFLFlBQXVCO0lBQUEsaUJBQU07SUFDbEYseUJBTU87SUFDWCxpQkFBTTs7OztJQVQwRSx3REFBeUM7SUFDaEUsZUFBdUI7SUFBdkIsNEVBQXVCO0lBSXhFLGVBQXVIO0lBQXZILHNKQUF1SCxxQkFBQTs7OztJQUsvSCx5QkFPTzs7OztJQUhILG1FQUFtRCxxQkFBQTtJQUVuRCwwREFBMkM7OztJQVUzQywrQkFBOEc7SUFBQSxZQUFzQjtJQUFBLGlCQUFNOzs7SUFBNUIsZUFBc0I7SUFBdEIsMEVBQXNCOzs7O0lBUnhJLDhCQUFxSDtJQUNqSCx5QkFNTztJQUNQLHFFQUEwSTtJQUMxSSwwQkFPTztJQUNYLGlCQUFNOzs7O0lBakJ1RSxzREFBdUM7SUFJNUcsZUFBb0g7SUFBcEgsbUpBQW9ILHFCQUFBO0lBSXBFLGVBQXdEO0lBQXhELGlKQUF3RDtJQUd4RyxlQUFnRjtJQUFoRixpS0FBZ0Y7SUFFaEYsMEdBQTBELHFCQUFBOztBRG5CbEUsTUFBTSxPQUFPLGFBQWE7SUFXeEIsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFOMUMsU0FBSSxHQUFHLENBQUMsQ0FBQTtRQU9OLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLENBQUE7SUFDbkIsQ0FBQztJQU5ELElBQW1DLFFBQVE7UUFDekMsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQTtJQUMzQixDQUFDO0lBTUQsV0FBVztRQUNULElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUE7UUFDeEIscUJBQXFCLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUE7UUFDNUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFBLENBQUMsdUJBQXVCO0lBQ3JDLENBQUM7SUFFRCxXQUFXLENBQW1FLENBQUksRUFBRSxDQUFJO1FBQ3RGLE1BQU0sRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsS0FBSyxJQUFJLENBQUMsQ0FBQTtRQUM5QixNQUFNLEVBQUUsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEtBQUssSUFBSSxDQUFDLENBQUE7UUFFOUIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBO0lBQ2hCLENBQUM7OzBFQTFCVSxhQUFhO2dFQUFiLGFBQWE7OztRQ2IxQiw4QkFBdUM7UUFBQSxZQUFjO1FBQUEsaUJBQU07UUFDM0QsOERBU007O1FBQ04sOERBT087O1FBQ1AsK0RBaUJNOzs7UUFwQ2lDLGVBQWM7UUFBZCxvQ0FBYztRQUNkLGVBQXVDO1FBQXZDLGlGQUF1QztRQVl0RCxlQUF3QztRQUF4QyxrRkFBd0M7UUFNM0IsZUFBc0M7UUFBdEMsaUZBQXNDOzt1RkROOUQsYUFBYTtjQVB6QixTQUFTO3VCQUdGO29CQUNKLGFBQWEsRUFBRSxNQUFNO2lCQUN0QjtvRUFHUSxJQUFJO2tCQUFaLEtBQUs7WUFDRyxJQUFJO2tCQUFaLEtBQUs7WUFDRyxRQUFRO2tCQUFoQixLQUFLO1lBSTZCLFFBQVE7a0JBQTFDLFdBQVc7bUJBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgSG9zdEJpbmRpbmcsIENoYW5nZURldGVjdG9yUmVmLCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENsYXNzaWNQcmVzZXQgYXMgQ2xhc3NpYyB9IGZyb20gJ3JldGUnO1xuaW1wb3J0IHsgS2V5VmFsdWUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG50eXBlIFNvcnRWYWx1ZTxOIGV4dGVuZHMgQ2xhc3NpYy5Ob2RlPiA9IChOWydjb250cm9scyddIHwgTlsnaW5wdXRzJ10gfCBOWydvdXRwdXRzJ10pW3N0cmluZ11cblxuQENvbXBvbmVudCh7XG4gIHRlbXBsYXRlVXJsOiAnLi9ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbm9kZS5jb21wb25lbnQuc2FzcyddLFxuICBob3N0OiB7XG4gICAgJ2RhdGEtdGVzdGlkJzogJ25vZGUnXG4gIH1cbn0pXG5leHBvcnQgY2xhc3MgTm9kZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGRhdGEhOiBDbGFzc2ljLk5vZGU7XG4gIEBJbnB1dCgpIGVtaXQhOiAoZGF0YTogYW55KSA9PiB2b2lkXG4gIEBJbnB1dCgpIHJlbmRlcmVkITogKCkgPT4gdm9pZFxuXG4gIHNlZWQgPSAwXG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5zZWxlY3RlZCcpIGdldCBzZWxlY3RlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5kYXRhLnNlbGVjdGVkXG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgICB0aGlzLmNkci5kZXRhY2goKVxuICB9XG5cbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpXG4gICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHRoaXMucmVuZGVyZWQoKSlcbiAgICB0aGlzLnNlZWQrKyAvLyBmb3JjZSByZW5kZXIgc29ja2V0c1xuICB9XG5cbiAgc29ydEJ5SW5kZXg8TiBleHRlbmRzIENsYXNzaWMuTm9kZSwgSSBleHRlbmRzIEtleVZhbHVlPHN0cmluZywgU29ydFZhbHVlPE4+Pj4oYTogSSwgYjogSSkge1xuICAgIGNvbnN0IGFpID0gYS52YWx1ZT8uaW5kZXggfHwgMFxuICAgIGNvbnN0IGJpID0gYi52YWx1ZT8uaW5kZXggfHwgMFxuXG4gICAgcmV0dXJuIGFpIC0gYmlcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInRpdGxlXCIgZGF0YS10ZXN0aWQ9XCJ0aXRsZVwiPnt7ZGF0YS5sYWJlbH19PC9kaXY+XG48ZGl2IGNsYXNzPVwib3V0cHV0XCIgKm5nRm9yPVwibGV0IG91dHB1dCBvZiBkYXRhLm91dHB1dHMgfCBrZXl2YWx1ZTogc29ydEJ5SW5kZXhcIiBbYXR0ci5kYXRhLXRlc3RpZF09XCInb3V0cHV0LScrb3V0cHV0LmtleVwiPlxuICAgIDxkaXYgY2xhc3M9XCJvdXRwdXQtdGl0bGVcIiBkYXRhLXRlc3RpZD1cIm91dHB1dC10aXRsZVwiPnt7b3V0cHV0LnZhbHVlPy5sYWJlbH19PC9kaXY+XG4gICAgPGRpdlxuICAgICAgICBjbGFzcz1cIm91dHB1dC1zb2NrZXRcIlxuICAgICAgICByZWZDb21wb25lbnRcbiAgICAgICAgW2RhdGFdPVwie3R5cGU6ICdzb2NrZXQnLCBzaWRlOiAnb3V0cHV0Jywga2V5OiBvdXRwdXQua2V5LCBub2RlSWQ6IGRhdGEuaWQsIHBheWxvYWQ6IG91dHB1dC52YWx1ZT8uc29ja2V0LCBzZWVkOiBzZWVkIH1cIlxuICAgICAgICBbZW1pdF09XCJlbWl0XCJcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJvdXRwdXQtc29ja2V0XCJcbiAgICA+PC9kaXY+XG48L2Rpdj5cbjxkaXZcbiAgICBjbGFzcz1cImNvbnRyb2xcIlxuICAgICpuZ0Zvcj1cImxldCBjb250cm9sIG9mIGRhdGEuY29udHJvbHMgfCBrZXl2YWx1ZTogc29ydEJ5SW5kZXhcIlxuICAgIHJlZkNvbXBvbmVudFxuICAgIFtkYXRhXT1cInt0eXBlOiAnY29udHJvbCcsIHBheWxvYWQ6IGNvbnRyb2wudmFsdWUgfVwiXG4gICAgW2VtaXRdPVwiZW1pdFwiXG4gICAgW2F0dHIuZGF0YS10ZXN0aWRdPVwiJ2NvbnRyb2wtJytjb250cm9sLmtleVwiXG4+PC9kaXY+XG48ZGl2IGNsYXNzPVwiaW5wdXRcIiAqbmdGb3I9XCJsZXQgaW5wdXQgb2YgZGF0YS5pbnB1dHMgfCBrZXl2YWx1ZTogc29ydEJ5SW5kZXhcIiBbYXR0ci5kYXRhLXRlc3RpZF09XCInaW5wdXQtJytpbnB1dC5rZXlcIj5cbiAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiaW5wdXQtc29ja2V0XCJcbiAgICAgICAgcmVmQ29tcG9uZW50XG4gICAgICAgIFtkYXRhXT1cInt0eXBlOiAnc29ja2V0Jywgc2lkZTogJ2lucHV0Jywga2V5OiBpbnB1dC5rZXksIG5vZGVJZDogZGF0YS5pZCwgcGF5bG9hZDogaW5wdXQudmFsdWU/LnNvY2tldCwgc2VlZDogc2VlZCB9XCJcbiAgICAgICAgW2VtaXRdPVwiZW1pdFwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwiaW5wdXQtc29ja2V0XCJcbiAgICA+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImlucHV0LXRpdGxlXCIgZGF0YS10ZXN0aWQ9XCJpbnB1dC10aXRsZVwiICpuZ0lmPVwiIWlucHV0LnZhbHVlPy5jb250cm9sIHx8ICFpbnB1dC52YWx1ZT8uc2hvd0NvbnRyb2xcIj57e2lucHV0LnZhbHVlPy5sYWJlbH19PC9kaXY+XG4gICAgPGRpdlxuICAgICAgICBjbGFzcz1cImlucHV0LWNvbnRyb2xcIlxuICAgICAgICBbc3R5bGUuZGlzcGxheV09XCJpbnB1dC52YWx1ZT8uY29udHJvbCAmJiBpbnB1dC52YWx1ZT8uc2hvd0NvbnRyb2wgPyAnJyA6ICdub25lJ1wiXG4gICAgICAgIHJlZkNvbXBvbmVudFxuICAgICAgICBbZGF0YV09XCJ7dHlwZTogJ2NvbnRyb2wnLCBwYXlsb2FkOiBpbnB1dC52YWx1ZT8uY29udHJvbCB9XCJcbiAgICAgICAgW2VtaXRdPVwiZW1pdFwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwiaW5wdXQtY29udHJvbFwiXG4gICAgPjwvZGl2PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9kZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9uZzEzL3NyYy9wcmVzZXRzL2NsYXNzaWMvY29tcG9uZW50cy9ub2RlL25vZGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbmcxMy9zcmMvcHJlc2V0cy9jbGFzc2ljL2NvbXBvbmVudHMvbm9kZS9ub2RlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBYSxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0lDQzVGLDhCQUEwSCxhQUFBO0lBQ2pFLFlBQXVCO0lBQUEsaUJBQU07SUFDbEYseUJBTU87SUFDWCxpQkFBTTs7OztJQVQwRSx3REFBeUM7SUFDaEUsZUFBdUI7SUFBdkIsNEVBQXVCO0lBSXhFLGVBQXVIO0lBQXZILHNKQUF1SCxxQkFBQTs7OztJQUsvSCx5QkFPTzs7OztJQUhILG1FQUFtRCxxQkFBQTtJQUVuRCwwREFBMkM7OztJQVUzQywrQkFBOEc7SUFBQSxZQUFzQjtJQUFBLGlCQUFNOzs7SUFBNUIsZUFBc0I7SUFBdEIsMEVBQXNCOzs7O0lBUnhJLDhCQUFxSDtJQUNqSCx5QkFNTztJQUNQLHFFQUEwSTtJQUMxSSwwQkFPTztJQUNYLGlCQUFNOzs7O0lBakJ1RSxzREFBdUM7SUFJNUcsZUFBb0g7SUFBcEgsbUpBQW9ILHFCQUFBO0lBSXBFLGVBQXdEO0lBQXhELGlKQUF3RDtJQUd4RyxlQUFnRjtJQUFoRixpS0FBZ0Y7SUFFaEYsMEdBQTBELHFCQUFBOztBRGxCbEUsTUFBTSxPQUFPLGFBQWE7SUFtQnhCLFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBZDFDLFNBQUksR0FBRyxDQUFDLENBQUE7UUFlTixJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxDQUFBO0lBQ25CLENBQUM7SUFkRCxJQUFtQyxLQUFLO1FBQ3RDLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUE7SUFDeEIsQ0FBQztJQUVELElBQW9DLE1BQU07UUFDeEMsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQTtJQUN6QixDQUFDO0lBRUQsSUFBbUMsUUFBUTtRQUN6QyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFBO0lBQzNCLENBQUM7SUFNRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQTtRQUN4QixxQkFBcUIsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQTtRQUM1QyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUEsQ0FBQyx1QkFBdUI7SUFDckMsQ0FBQztJQUVELFdBQVcsQ0FBbUUsQ0FBSSxFQUFFLENBQUk7UUFDdEYsTUFBTSxFQUFFLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxLQUFLLElBQUksQ0FBQyxDQUFBO1FBQzlCLE1BQU0sRUFBRSxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsS0FBSyxJQUFJLENBQUMsQ0FBQTtRQUU5QixPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUE7SUFDaEIsQ0FBQzs7MEVBbENVLGFBQWE7Z0VBQWIsYUFBYTs7OztRQ2QxQiw4QkFBdUM7UUFBQSxZQUFjO1FBQUEsaUJBQU07UUFDM0QsOERBU007O1FBQ04sOERBT087O1FBQ1AsK0RBaUJNOzs7UUFwQ2lDLGVBQWM7UUFBZCxvQ0FBYztRQUNkLGVBQXVDO1FBQXZDLGlGQUF1QztRQVl0RCxlQUF3QztRQUF4QyxrRkFBd0M7UUFNM0IsZUFBc0M7UUFBdEMsaUZBQXNDOzt1RkRMOUQsYUFBYTtjQVB6QixTQUFTO3VCQUdGO29CQUNKLGFBQWEsRUFBRSxNQUFNO2lCQUN0QjtvRUFHUSxJQUFJO2tCQUFaLEtBQUs7WUFDRyxJQUFJO2tCQUFaLEtBQUs7WUFDRyxRQUFRO2tCQUFoQixLQUFLO1lBSTZCLEtBQUs7a0JBQXZDLFdBQVc7bUJBQUMsZ0JBQWdCO1lBSU8sTUFBTTtrQkFBekMsV0FBVzttQkFBQyxpQkFBaUI7WUFJSyxRQUFRO2tCQUExQyxXQUFXO21CQUFDLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIEhvc3RCaW5kaW5nLCBDaGFuZ2VEZXRlY3RvclJlZiwgT25DaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDbGFzc2ljUHJlc2V0IGFzIENsYXNzaWMgfSBmcm9tICdyZXRlJztcbmltcG9ydCB7IEtleVZhbHVlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxudHlwZSBOb2RlRXh0cmFEYXRhID0geyB3aWR0aD86IG51bWJlciwgaGVpZ2h0PzogbnVtYmVyIH1cbnR5cGUgU29ydFZhbHVlPE4gZXh0ZW5kcyBDbGFzc2ljLk5vZGU+ID0gKE5bJ2NvbnRyb2xzJ10gfCBOWydpbnB1dHMnXSB8IE5bJ291dHB1dHMnXSlbc3RyaW5nXVxuXG5AQ29tcG9uZW50KHtcbiAgdGVtcGxhdGVVcmw6ICcuL25vZGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ub2RlLmNvbXBvbmVudC5zYXNzJ10sXG4gIGhvc3Q6IHtcbiAgICAnZGF0YS10ZXN0aWQnOiAnbm9kZSdcbiAgfVxufSlcbmV4cG9ydCBjbGFzcyBOb2RlQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgZGF0YSE6IENsYXNzaWMuTm9kZSAmIE5vZGVFeHRyYURhdGE7XG4gIEBJbnB1dCgpIGVtaXQhOiAoZGF0YTogYW55KSA9PiB2b2lkXG4gIEBJbnB1dCgpIHJlbmRlcmVkITogKCkgPT4gdm9pZFxuXG4gIHNlZWQgPSAwXG5cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS53aWR0aC5weCcpIGdldCB3aWR0aCgpIHtcbiAgICByZXR1cm4gdGhpcy5kYXRhLndpZHRoXG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmhlaWdodC5weCcpIGdldCBoZWlnaHQoKSB7XG4gICAgcmV0dXJuIHRoaXMuZGF0YS5oZWlnaHRcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3Muc2VsZWN0ZWQnKSBnZXQgc2VsZWN0ZWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuZGF0YS5zZWxlY3RlZFxuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7XG4gICAgdGhpcy5jZHIuZGV0YWNoKClcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKVxuICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLnJlbmRlcmVkKCkpXG4gICAgdGhpcy5zZWVkKysgLy8gZm9yY2UgcmVuZGVyIHNvY2tldHNcbiAgfVxuXG4gIHNvcnRCeUluZGV4PE4gZXh0ZW5kcyBDbGFzc2ljLk5vZGUsIEkgZXh0ZW5kcyBLZXlWYWx1ZTxzdHJpbmcsIFNvcnRWYWx1ZTxOPj4+KGE6IEksIGI6IEkpIHtcbiAgICBjb25zdCBhaSA9IGEudmFsdWU/LmluZGV4IHx8IDBcbiAgICBjb25zdCBiaSA9IGIudmFsdWU/LmluZGV4IHx8IDBcblxuICAgIHJldHVybiBhaSAtIGJpXG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0aXRsZVwiIGRhdGEtdGVzdGlkPVwidGl0bGVcIj57e2RhdGEubGFiZWx9fTwvZGl2PlxuPGRpdiBjbGFzcz1cIm91dHB1dFwiICpuZ0Zvcj1cImxldCBvdXRwdXQgb2YgZGF0YS5vdXRwdXRzIHwga2V5dmFsdWU6IHNvcnRCeUluZGV4XCIgW2F0dHIuZGF0YS10ZXN0aWRdPVwiJ291dHB1dC0nK291dHB1dC5rZXlcIj5cbiAgICA8ZGl2IGNsYXNzPVwib3V0cHV0LXRpdGxlXCIgZGF0YS10ZXN0aWQ9XCJvdXRwdXQtdGl0bGVcIj57e291dHB1dC52YWx1ZT8ubGFiZWx9fTwvZGl2PlxuICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJvdXRwdXQtc29ja2V0XCJcbiAgICAgICAgcmVmQ29tcG9uZW50XG4gICAgICAgIFtkYXRhXT1cInt0eXBlOiAnc29ja2V0Jywgc2lkZTogJ291dHB1dCcsIGtleTogb3V0cHV0LmtleSwgbm9kZUlkOiBkYXRhLmlkLCBwYXlsb2FkOiBvdXRwdXQudmFsdWU/LnNvY2tldCwgc2VlZDogc2VlZCB9XCJcbiAgICAgICAgW2VtaXRdPVwiZW1pdFwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwib3V0cHV0LXNvY2tldFwiXG4gICAgPjwvZGl2PlxuPC9kaXY+XG48ZGl2XG4gICAgY2xhc3M9XCJjb250cm9sXCJcbiAgICAqbmdGb3I9XCJsZXQgY29udHJvbCBvZiBkYXRhLmNvbnRyb2xzIHwga2V5dmFsdWU6IHNvcnRCeUluZGV4XCJcbiAgICByZWZDb21wb25lbnRcbiAgICBbZGF0YV09XCJ7dHlwZTogJ2NvbnRyb2wnLCBwYXlsb2FkOiBjb250cm9sLnZhbHVlIH1cIlxuICAgIFtlbWl0XT1cImVtaXRcIlxuICAgIFthdHRyLmRhdGEtdGVzdGlkXT1cIidjb250cm9sLScrY29udHJvbC5rZXlcIlxuPjwvZGl2PlxuPGRpdiBjbGFzcz1cImlucHV0XCIgKm5nRm9yPVwibGV0IGlucHV0IG9mIGRhdGEuaW5wdXRzIHwga2V5dmFsdWU6IHNvcnRCeUluZGV4XCIgW2F0dHIuZGF0YS10ZXN0aWRdPVwiJ2lucHV0LScraW5wdXQua2V5XCI+XG4gICAgPGRpdlxuICAgICAgICBjbGFzcz1cImlucHV0LXNvY2tldFwiXG4gICAgICAgIHJlZkNvbXBvbmVudFxuICAgICAgICBbZGF0YV09XCJ7dHlwZTogJ3NvY2tldCcsIHNpZGU6ICdpbnB1dCcsIGtleTogaW5wdXQua2V5LCBub2RlSWQ6IGRhdGEuaWQsIHBheWxvYWQ6IGlucHV0LnZhbHVlPy5zb2NrZXQsIHNlZWQ6IHNlZWQgfVwiXG4gICAgICAgIFtlbWl0XT1cImVtaXRcIlxuICAgICAgICBkYXRhLXRlc3RpZD1cImlucHV0LXNvY2tldFwiXG4gICAgPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJpbnB1dC10aXRsZVwiIGRhdGEtdGVzdGlkPVwiaW5wdXQtdGl0bGVcIiAqbmdJZj1cIiFpbnB1dC52YWx1ZT8uY29udHJvbCB8fCAhaW5wdXQudmFsdWU/LnNob3dDb250cm9sXCI+e3tpbnB1dC52YWx1ZT8ubGFiZWx9fTwvZGl2PlxuICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJpbnB1dC1jb250cm9sXCJcbiAgICAgICAgW3N0eWxlLmRpc3BsYXldPVwiaW5wdXQudmFsdWU/LmNvbnRyb2wgJiYgaW5wdXQudmFsdWU/LnNob3dDb250cm9sID8gJycgOiAnbm9uZSdcIlxuICAgICAgICByZWZDb21wb25lbnRcbiAgICAgICAgW2RhdGFdPVwie3R5cGU6ICdjb250cm9sJywgcGF5bG9hZDogaW5wdXQudmFsdWU/LmNvbnRyb2wgfVwiXG4gICAgICAgIFtlbWl0XT1cImVtaXRcIlxuICAgICAgICBkYXRhLXRlc3RpZD1cImlucHV0LWNvbnRyb2xcIlxuICAgID48L2Rpdj5cbjwvZGl2PlxuIl19

package/13/fesm2015/rete-angular-plugin-ng13.mjs

@@ -105,6 +105,12 @@ class NodeComponent {
         this.seed = 0;
         this.cdr.detach();
     }
+    get width() {
+        return this.data.width;
+    }
+    get height() {
+        return this.data.height;
+    }
     get selected() {
         return this.data.selected;
     }
@@ -121,8 +127,9 @@ class NodeComponent {
     }
 }
 NodeComponent.ɵfac = function NodeComponent_Factory(t) { return new (t || NodeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-NodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NodeComponent, selectors: [["ng-component"]], hostAttrs: ["data-testid", "node"], hostVars: 2, hostBindings: function NodeComponent_HostBindings(rf, ctx) {
+NodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NodeComponent, selectors: [["ng-component"]], hostAttrs: ["data-testid", "node"], hostVars: 6, hostBindings: function NodeComponent_HostBindings(rf, ctx) {
         if (rf & 2) {
+            i0.ɵɵstyleProp("width", ctx.width, "px")("height", ctx.height, "px");
             i0.ɵɵclassProp("selected", ctx.selected);
         }
     }, inputs: { data: "data", emit: "emit", rendered: "rendered" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 13, consts: [["data-testid", "title", 1, "title"], ["class", "output", 4, "ngFor", "ngForOf"], ["class", "control", "refComponent", "", 3, "data", "emit", 4, "ngFor", "ngForOf"], ["class", "input", 4, "ngFor", "ngForOf"], [1, "output"], ["data-testid", "output-title", 1, "output-title"], ["refComponent", "", "data-testid", "output-socket", 1, "output-socket", 3, "data", "emit"], ["refComponent", "", 1, "control", 3, "data", "emit"], [1, "input"], ["refComponent", "", "data-testid", "input-socket", 1, "input-socket", 3, "data", "emit"], ["class", "input-title", "data-testid", "input-title", 4, "ngIf"], ["refComponent", "", "data-testid", "input-control", 1, "input-control", 3, "data", "emit"], ["data-testid", "input-title", 1, "input-title"]], template: function NodeComponent_Template(rf, ctx) {
@@ -147,19 +154,25 @@ NodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NodeComponent
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(7, 10, ctx.data.inputs, ctx.sortByIndex));
         }
-    }, directives: [i1.NgForOf, RefDirective, i1.NgIf], pipes: [i1.KeyValuePipe], styles: ["[_nghost-%COMP%]{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;min-width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}[_nghost-%COMP%]:hover{background:rgba(130,153,255,.8)}.selected[_nghost-%COMP%]{background:#ffd92c;border-color:#e3c000}[_nghost-%COMP%]   .title[_ngcontent-%COMP%]{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}[_nghost-%COMP%]   .output[_ngcontent-%COMP%]{text-align:right}[_nghost-%COMP%]   .input[_ngcontent-%COMP%]{text-align:left}[_nghost-%COMP%]   .input-title[_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[_ngcontent-%COMP%]{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}[_nghost-%COMP%]   .input-title[hidden][_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[hidden][_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .output-socket[_ngcontent-%COMP%]{text-align:right;margin-right:-18px;display:inline-block}[_nghost-%COMP%]   .input-socket[_ngcontent-%COMP%]{text-align:left;margin-left:-18px;display:inline-block}[_nghost-%COMP%]   .input-control[_ngcontent-%COMP%]{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}[_nghost-%COMP%]   .control[_ngcontent-%COMP%]{padding:6px 18px}"] });
+    }, directives: [i1.NgForOf, RefDirective, i1.NgIf], pipes: [i1.KeyValuePipe], styles: ["[_nghost-%COMP%]{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}[_nghost-%COMP%]:hover{background:rgba(130,153,255,.8)}.selected[_nghost-%COMP%]{background:#ffd92c;border-color:#e3c000}[_nghost-%COMP%]   .title[_ngcontent-%COMP%]{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}[_nghost-%COMP%]   .output[_ngcontent-%COMP%]{text-align:right}[_nghost-%COMP%]   .input[_ngcontent-%COMP%]{text-align:left}[_nghost-%COMP%]   .input-title[_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[_ngcontent-%COMP%]{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}[_nghost-%COMP%]   .input-title[hidden][_ngcontent-%COMP%], [_nghost-%COMP%]   .output-title[hidden][_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .output-socket[_ngcontent-%COMP%]{text-align:right;margin-right:-18px;display:inline-block}[_nghost-%COMP%]   .input-socket[_ngcontent-%COMP%]{text-align:left;margin-left:-18px;display:inline-block}[_nghost-%COMP%]   .input-control[_ngcontent-%COMP%]{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}[_nghost-%COMP%]   .control[_ngcontent-%COMP%]{padding:6px 18px}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NodeComponent, [{
             type: Component,
             args: [{ host: {
                         'data-testid': 'node'
-                    }, template: "<div class=\"title\" data-testid=\"title\">{{data.label}}</div>\n<div class=\"output\" *ngFor=\"let output of data.outputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'output-'+output.key\">\n    <div class=\"output-title\" data-testid=\"output-title\">{{output.value?.label}}</div>\n    <div\n        class=\"output-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'output', key: output.key, nodeId: data.id, payload: output.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"output-socket\"\n    ></div>\n</div>\n<div\n    class=\"control\"\n    *ngFor=\"let control of data.controls | keyvalue: sortByIndex\"\n    refComponent\n    [data]=\"{type: 'control', payload: control.value }\"\n    [emit]=\"emit\"\n    [attr.data-testid]=\"'control-'+control.key\"\n></div>\n<div class=\"input\" *ngFor=\"let input of data.inputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'input-'+input.key\">\n    <div\n        class=\"input-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'input', key: input.key, nodeId: data.id, payload: input.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"input-socket\"\n    ></div>\n    <div class=\"input-title\" data-testid=\"input-title\" *ngIf=\"!input.value?.control || !input.value?.showControl\">{{input.value?.label}}</div>\n    <div\n        class=\"input-control\"\n        [style.display]=\"input.value?.control && input.value?.showControl ? '' : 'none'\"\n        refComponent\n        [data]=\"{type: 'control', payload: input.value?.control }\"\n        [emit]=\"emit\"\n        data-testid=\"input-control\"\n    ></div>\n</div>\n", styles: [":host{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;min-width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}:host:hover{background:rgba(130,153,255,.8)}:host.selected{background:#ffd92c;border-color:#e3c000}:host .title{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}:host .output{text-align:right}:host .input{text-align:left}:host .input-title,:host .output-title{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}:host .input-title[hidden],:host .output-title[hidden]{display:none}:host .output-socket{text-align:right;margin-right:-18px;display:inline-block}:host .input-socket{text-align:left;margin-left:-18px;display:inline-block}:host .input-control{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}:host .control{padding:6px 18px}\n"] }]
+                    }, template: "<div class=\"title\" data-testid=\"title\">{{data.label}}</div>\n<div class=\"output\" *ngFor=\"let output of data.outputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'output-'+output.key\">\n    <div class=\"output-title\" data-testid=\"output-title\">{{output.value?.label}}</div>\n    <div\n        class=\"output-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'output', key: output.key, nodeId: data.id, payload: output.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"output-socket\"\n    ></div>\n</div>\n<div\n    class=\"control\"\n    *ngFor=\"let control of data.controls | keyvalue: sortByIndex\"\n    refComponent\n    [data]=\"{type: 'control', payload: control.value }\"\n    [emit]=\"emit\"\n    [attr.data-testid]=\"'control-'+control.key\"\n></div>\n<div class=\"input\" *ngFor=\"let input of data.inputs | keyvalue: sortByIndex\" [attr.data-testid]=\"'input-'+input.key\">\n    <div\n        class=\"input-socket\"\n        refComponent\n        [data]=\"{type: 'socket', side: 'input', key: input.key, nodeId: data.id, payload: input.value?.socket, seed: seed }\"\n        [emit]=\"emit\"\n        data-testid=\"input-socket\"\n    ></div>\n    <div class=\"input-title\" data-testid=\"input-title\" *ngIf=\"!input.value?.control || !input.value?.showControl\">{{input.value?.label}}</div>\n    <div\n        class=\"input-control\"\n        [style.display]=\"input.value?.control && input.value?.showControl ? '' : 'none'\"\n        refComponent\n        [data]=\"{type: 'control', payload: input.value?.control }\"\n        [emit]=\"emit\"\n        data-testid=\"input-control\"\n    ></div>\n</div>\n", styles: [":host{display:block;background:rgba(110,136,255,.8);border:2px solid #4e58bf;border-radius:10px;cursor:pointer;box-sizing:border-box;width:180px;height:auto;padding-bottom:6px;position:relative;-webkit-user-select:none;user-select:none;line-height:initial;font-family:Arial}:host:hover{background:rgba(130,153,255,.8)}:host.selected{background:#ffd92c;border-color:#e3c000}:host .title{color:#fff;font-family:sans-serif;font-size:18px;padding:8px}:host .output{text-align:right}:host .input{text-align:left}:host .input-title,:host .output-title{vertical-align:middle;color:#fff;display:inline-block;font-family:sans-serif;font-size:14px;margin:6px;line-height:24px}:host .input-title[hidden],:host .output-title[hidden]{display:none}:host .output-socket{text-align:right;margin-right:-18px;display:inline-block}:host .input-socket{text-align:left;margin-left:-18px;display:inline-block}:host .input-control{z-index:1;width:calc(100% - 36px);vertical-align:middle;display:inline-block}:host .control{padding:6px 18px}\n"] }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { data: [{
                 type: Input
             }], emit: [{
                 type: Input
             }], rendered: [{
                 type: Input
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height.px']
             }], selected: [{
                 type: HostBinding,
                 args: ['class.selected']
@@ -239,11 +252,11 @@ ControlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ControlCom
         if (rf & 2) {
             i0.ɵɵproperty("value", ctx.data.value)("readonly", ctx.data.readonly)("type", ctx.data.type);
         }
-    }, styles: ["input[_ngcontent-%COMP%]{width:130px;border-radius:30px;background-color:#fff;padding:2px 6px;border:1px solid #999;font-size:110%}"] });
+    }, styles: ["input[_ngcontent-%COMP%]{width:100%;border-radius:30px;background-color:#fff;padding:2px 6px;border:1px solid #999;font-size:110%;box-sizing:border-box}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ControlComponent, [{
             type: Component,
-            args: [{ template: "<input\n  [value]=\"data.value\"\n  [readonly]=\"data.readonly\"\n  [type]=\"data.type\"\n  (input)=\"onChange($event)\"\n/>\n", styles: ["input{width:130px;border-radius:30px;background-color:#fff;padding:2px 6px;border:1px solid #999;font-size:110%}\n"] }]
+            args: [{ template: "<input\n  [value]=\"data.value\"\n  [readonly]=\"data.readonly\"\n  [type]=\"data.type\"\n  (input)=\"onChange($event)\"\n/>\n", styles: ["input{width:100%;border-radius:30px;background-color:#fff;padding:2px 6px;border:1px solid #999;font-size:110%;box-sizing:border-box}\n"] }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { data: [{
                 type: Input
             }], rendered: [{