@masterteam/structure-builder 0.0.26 → 0.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -55,10 +55,10 @@ class NodeFormDialogComponent {
|
|
|
55
55
|
onCancel() {
|
|
56
56
|
this.ref.close();
|
|
57
57
|
}
|
|
58
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
59
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
58
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NodeFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
59
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: NodeFormDialogComponent, isStandalone: true, selector: "mt-node-form-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"[modalService.contentClass, 'p-4']\">\n @if (this.data()?.template) {\n <ng-container\n *ngTemplateOutlet=\"data().template; context: templateContext\"\n ></ng-container>\n } @else {\n @if (nodeData) {\n <mt-dynamic-form\n [formConfig]=\"formSchema\"\n [formControl]=\"dynamicFormControl\"\n ></mt-dynamic-form>\n }\n }\n</div>\n<div [class]=\"modalService.footerClass\">\n <mt-button\n [label]=\"'structureBuilder.cancel' | transloco\"\n severity=\"secondary\"\n (onClick)=\"onCancel()\"\n >\n </mt-button>\n <mt-button\n [disabled]=\"!dynamicFormControl.valid\"\n [label]=\"'structureBuilder.saveChanges' | transloco\"\n severity=\"primary\"\n (onClick)=\"onSave()\"\n >\n </mt-button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }] });
|
|
60
60
|
}
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NodeFormDialogComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{ selector: 'mt-node-form-dialog', standalone: true, imports: [
|
|
64
64
|
CommonModule,
|
|
@@ -94,10 +94,10 @@ class ConnectionFormDialogComponent {
|
|
|
94
94
|
onCancel() {
|
|
95
95
|
this.ref.close();
|
|
96
96
|
}
|
|
97
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
98
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
97
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ConnectionFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
98
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ConnectionFormDialogComponent, isStandalone: true, selector: "mt-connection-form-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"[modalService.contentClass, 'p-4']\">\n @if (connectionData && formSchema?.sections.length > 0) {\n <mt-dynamic-form\n [formConfig]=\"formSchema\"\n [formControl]=\"dynamicFormControl\"\n ></mt-dynamic-form>\n }\n</div>\n\n<div [class]=\"modalService.footerClass\">\n <mt-button\n [label]=\"'structureBuilder.cancel' | transloco\"\n severity=\"secondary\"\n (onClick)=\"onCancel()\"\n >\n </mt-button>\n <mt-button\n [disabled]=\"!dynamicFormControl.valid\"\n [label]=\"'structureBuilder.saveChanges' | transloco\"\n severity=\"primary\"\n (onClick)=\"onSave()\"\n >\n </mt-button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }] });
|
|
99
99
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ConnectionFormDialogComponent, decorators: [{
|
|
101
101
|
type: Component,
|
|
102
102
|
args: [{ selector: 'mt-connection-form-dialog', standalone: true, imports: [
|
|
103
103
|
CommonModule,
|
|
@@ -128,10 +128,10 @@ class Toolbar {
|
|
|
128
128
|
autoLayout() {
|
|
129
129
|
this.builderComponent.maybeAutoLayout();
|
|
130
130
|
}
|
|
131
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
132
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
131
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", type: Toolbar, isStandalone: true, selector: "mt-toolbar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-button\n (onClick)=\"autoLayout()\"\n class=\"bg-content rounded-(--p-button-border-radius)\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"arrow.refresh-cw-05\"\n></mt-button>\n\n<mt-buttongroup class=\"bg-content rounded-(--p-button-border-radius)\">\n <mt-button\n (onClick)=\"onZoomOut()\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"general.minus\"\n ></mt-button>\n <mt-button\n (onClick)=\"onZoomIn()\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"general.plus\"\n ></mt-button>\n <mt-button\n (onClick)=\"onFitToScreen()\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"layout.grid-02\"\n ></mt-button>\n</mt-buttongroup>\n", styles: [":host{display:flex;justify-content:flex-end;align-items:center;position:absolute;gap:calc(var(--spacing) * 2);inset-inline-end:calc(var(--spacing) * 4);bottom:calc(var(--spacing) * 4)}\n"], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ButtonGroup, selector: "mt-buttonGroup, mt-buttongroup, mt-button-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
133
133
|
}
|
|
134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Toolbar, decorators: [{
|
|
135
135
|
type: Component,
|
|
136
136
|
args: [{ selector: 'mt-toolbar', imports: [Button, ButtonGroup], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mt-button\n (onClick)=\"autoLayout()\"\n class=\"bg-content rounded-(--p-button-border-radius)\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"arrow.refresh-cw-05\"\n></mt-button>\n\n<mt-buttongroup class=\"bg-content rounded-(--p-button-border-radius)\">\n <mt-button\n (onClick)=\"onZoomOut()\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"general.minus\"\n ></mt-button>\n <mt-button\n (onClick)=\"onZoomIn()\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"general.plus\"\n ></mt-button>\n <mt-button\n (onClick)=\"onFitToScreen()\"\n size=\"size()\"\n variant=\"outlined\"\n severity=\"secondary\"\n icon=\"layout.grid-02\"\n ></mt-button>\n</mt-buttongroup>\n", styles: [":host{display:flex;justify-content:flex-end;align-items:center;position:absolute;gap:calc(var(--spacing) * 2);inset-inline-end:calc(var(--spacing) * 4);bottom:calc(var(--spacing) * 4)}\n"] }]
|
|
137
137
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -150,10 +150,10 @@ class FilterActionsPipe {
|
|
|
150
150
|
return action.condition(node);
|
|
151
151
|
});
|
|
152
152
|
}
|
|
153
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
154
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
154
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: FilterActionsPipe, isStandalone: true, name: "filterActions" });
|
|
155
155
|
}
|
|
156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterActionsPipe, decorators: [{
|
|
157
157
|
type: Pipe,
|
|
158
158
|
args: [{
|
|
159
159
|
name: 'filterActions',
|
|
@@ -474,10 +474,10 @@ class StructureBuilder {
|
|
|
474
474
|
extractNodeId(connectionEndId) {
|
|
475
475
|
return (connectionEndId || '').replace(/-(in|out)$/, '');
|
|
476
476
|
}
|
|
477
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
478
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: StructureBuilder, isStandalone: true, selector: "mt-structure-builder", inputs: { availableNodes: { classPropertyName: "availableNodes", publicName: "availableNodes", isSignal: true, isRequired: false, transformFunction: null }, nodeForm: { classPropertyName: "nodeForm", publicName: "nodeForm", isSignal: true, isRequired: false, transformFunction: null }, connectionForm: { classPropertyName: "connectionForm", publicName: "connectionForm", isSignal: true, isRequired: false, transformFunction: null }, nodeActions: { classPropertyName: "nodeActions", publicName: "nodeActions", isSignal: true, isRequired: false, transformFunction: null }, nodeFields: { classPropertyName: "nodeFields", publicName: "nodeFields", isSignal: true, isRequired: false, transformFunction: null }, isAutoLayout: { classPropertyName: "isAutoLayout", publicName: "isAutoLayout", isSignal: true, isRequired: false, transformFunction: null }, addModalType: { classPropertyName: "addModalType", publicName: "addModalType", isSignal: true, isRequired: false, transformFunction: null }, updateModalType: { classPropertyName: "updateModalType", publicName: "updateModalType", isSignal: true, isRequired: false, transformFunction: null }, addModalStyleClass: { classPropertyName: "addModalStyleClass", publicName: "addModalStyleClass", isSignal: true, isRequired: false, transformFunction: null }, updateModalStyleClass: { classPropertyName: "updateModalStyleClass", publicName: "updateModalStyleClass", isSignal: true, isRequired: false, transformFunction: null }, addModalHeader: { classPropertyName: "addModalHeader", publicName: "addModalHeader", isSignal: true, isRequired: false, transformFunction: null }, updateModalHeader: { classPropertyName: "updateModalHeader", publicName: "updateModalHeader", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, connections: { classPropertyName: "connections", publicName: "connections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeActionsEvent: "nodeActionsEvent", action: "action", nodes: "nodesChange", connections: "connectionsChange" }, host: { classAttribute: "flex h-full bg-surface-200 dark:bg-surface-700 relative rounded-2xl overflow-hidden" }, providers: [DialogService], queries: [{ propertyName: "nodeDialogTemplate", first: true, predicate: ["nodeDialog"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fCanvas", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }, { propertyName: "fFlowComponent", first: true, predicate: FFlowComponent, descendants: true, isSignal: true }, { propertyName: "fCanvasComponent", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }, { propertyName: "fZoomDirective", first: true, predicate: FZoomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- structure-builder.html -->\n@if (availableTabs().length > 0) {\n <mt-card\n class=\"absolute ms-4 mt-4 z-1 h-[calc(100%---spacing(8))] w-1/5 min-w-xs\"\n >\n <ng-template #headless>\n <!-- Header -->\n <div class=\"flex items-center justify-between px-4 pt-5\">\n <h3 class=\"text-xl font-semibold\">\n {{ \"structureBuilder.levelTemplates\" | transloco }}\n </h3>\n </div>\n\n <!-- Tabs using PrimeNG -->\n <p-tabs\n [(value)]=\"activeTab\"\n styleClass=\"structure-tabs \"\n class=\"h-full overflow-hidden\"\n >\n <p-tablist>\n @for (tab of availableTabs(); track tab; let i = $index) {\n <p-tab [value]=\"i.toString()\">{{ tab | titlecase }}</p-tab>\n }\n </p-tablist>\n <p-tabpanels class=\"bg-transparent! p-0! overflow-auto\">\n @for (tab of availableTabs(); track tab; let i = $index) {\n <p-tabpanel [value]=\"i.toString()\">\n <p class=\"text-xs text-muted py-3 px-4\">\n {{ \"structureBuilder.dragToAdd\" | transloco }}\n </p>\n\n <!-- Node List -->\n <div class=\"space-y-1 px-4\">\n @for (node of currentTabNodes(); track node.id) {\n <div\n fExternalItem\n [fData]=\"node\"\n class=\"group select-none relative flex items-center gap-3 py-3 px-4 hover:bg-emphasis hover:border-solid transition-colors rounded-lg border-1 border-dashed border-color border-surface-300 dark:border-surface-500 cursor-move transition-colors\"\n >\n <!-- Node Icon with color -->\n <div class=\"text-primary text-lg\">\n <mt-icon [icon]=\"node.icon || 'general.box'\"></mt-icon>\n </div>\n\n <!-- Node Name -->\n <span class=\"text-base font-medium flex-1\">{{\n node.label\n }}</span>\n </div>\n }\n\n @if (currentTabNodes().length === 0) {\n <div class=\"text-center py-8 text-gray-400\">\n <p class=\"text-sm\">\n {{\n \"structureBuilder.allItemsInUse\"\n | transloco: { tab: tab }\n }}\n </p>\n </div>\n }\n </div>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n </ng-template>\n </mt-card>\n} @else if (availableNodes().length > 0) {\n <mt-card\n [title]=\"'structureBuilder.steps' | transloco\"\n class=\"absolute top-4 start-4 z-1 w-64\"\n >\n <div class=\"flex flex-col gap-2\">\n @for (node of availableNodes(); track node.id) {\n <div\n fExternalItem\n [fData]=\"node\"\n class=\"group select-none relative flex items-center gap-3 py-3 px-4 hover:bg-emphasis hover:border-solid transition-colors rounded-lg border-1 border-dashed border-color border-surface-300 dark:border-surface-500 cursor-move bg-content\"\n >\n <!-- Node Icon with color -->\n <div class=\"text-primary text-lg\">\n <mt-icon [icon]=\"node.icon || 'general.box'\"></mt-icon>\n </div>\n\n <!-- Node Name -->\n <span class=\"text-base font-medium flex-1\">{{ node.label }}</span>\n </div>\n }\n </div>\n </mt-card>\n}\n<!-- Left Sidebar -->\n\n<!-- Main Canvas Area -->\n<div class=\"flex-1 z-0 relative\">\n <ng-content select=\"[flowContent]\"></ng-content>\n\n <f-flow\n fDraggable\n (fLoaded)=\"onLoaded()\"\n (fCreateNode)=\"onCreateNode($event)\"\n (fCreateConnection)=\"onCreateConnection($event)\"\n class=\"size-full\"\n >\n <f-background>\n <f-circle-pattern color=\"#b5b5b5\"></f-circle-pattern>\n </f-background>\n <f-canvas fZoom [fZoomMinimum]=\"0.1\" [fZoomMaximum]=\"2\">\n <f-connection-for-create fBehavior=\"floating\" fType=\"straight\">\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n </f-connection-for-create>\n <f-snap-connection\n fBehavior=\"fixed\"\n fType=\"segment\"\n class=\"z-1\"\n [fSnapThreshold]=\"100\"\n >\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n </f-snap-connection>\n\n <f-connection-for-create></f-connection-for-create>\n\n <!-- Enhanced Connections with Edit Button -->\n @for (connection of connectionsComputed(); track connection.id) {\n <f-connection\n [fReassignDisabled]=\"true\"\n [fOutputId]=\"connection.from\"\n [fInputId]=\"connection.to\"\n fBehavior=\"fixed\"\n fType=\"segment\"\n [ngClass]=\"{ 'connection-loading': connection.loading, 'z-1': true }\"\n >\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.SELECTED_START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.SELECTED_END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <div\n fConnectionCenter\n class=\"flex items-center gap-1 bg-content rounded-md p-1 shadow-sm\"\n >\n @if (!connection.loading) {\n <mt-button\n size=\"small\"\n variant=\"text\"\n [icon]=\"'general.edit-05'\"\n (click)=\"openConnectionDialog(connection)\"\n >\n </mt-button>\n <mt-button\n size=\"small\"\n variant=\"text\"\n severity=\"danger\"\n [icon]=\"'general.trash-01'\"\n (click)=\"removeConnection(connection)\"\n >\n </mt-button>\n } @else {\n <mt-button\n size=\"small\"\n variant=\"text\"\n [icon]=\"'general.loading-01'\"\n >\n </mt-button>\n }\n </div>\n </f-connection>\n }\n\n <!-- Enhanced Nodes with Edit Button -->\n @for (node of nodesWithComputedProps(); track node._computedId) {\n <mt-card\n fNode\n fDragHandle\n [fNodePosition]=\"{\n x: node.configuration?.x || 200,\n y: node.configuration?.y || 100,\n }\"\n (fNodePositionChange)=\"onNodePositionChange($event, node._computedId)\"\n [style.--node-data-border-color]=\"node._computedColor\"\n >\n <ng-template #headless>\n @if (!node.loading) {\n <div\n class=\"flex flex-col items-center min-w-3xs gap-2 px-3 py-4 rounded-t-2xl bg-white dark:bg-surface-800 border-(--p-content-border-color)\"\n >\n @if (node._computedIcon) {\n <mt-icon\n class=\"text-2xl text-primary\"\n [icon]=\"node._computedIcon\"\n />\n }\n <div>{{ node._computedName }}</div>\n </div>\n <div\n class=\"flex justify-center pt-3 mb-4 gap-2 bg-surface-50 dark:bg-surface-900\"\n >\n @for (\n action of nodeActions() | filterActions: node;\n track action.key\n ) {\n <mt-button\n [size]=\"action?.size || 'small'\"\n [variant]=\"action?.variant\"\n [icon]=\"action?.icon\"\n [tooltip]=\"action?.tooltip\"\n [severity]=\"action?.severity\"\n (onClick)=\"buttonAction(action, node)\"\n >\n </mt-button>\n }\n </div>\n <div\n fNodeInput\n [fInputId]=\"node._computedId\"\n fInputConnectableSide=\"top\"\n [fInputMultiple]=\"true\"\n class=\"top\"\n ></div>\n\n <div\n fNodeOutput\n [fOutputId]=\"node._computedId\"\n fOutputConnectableSide=\"bottom\"\n [isSelfConnectable]=\"false\"\n [fOutputMultiple]=\"true\"\n class=\"bottom bg-surface-50 dark:bg-surface-900\"\n ></div>\n } @else {\n <p-skeleton height=\"10rem\" width=\"15rem\" />\n }\n\n <!-- Node Header with Edit Button -->\n </ng-template>\n </mt-card>\n }\n </f-canvas>\n </f-flow>\n</div>\n<mt-toolbar />\n", styles: ["::ng-deep :root{--background-element-color: rgba(0, 0, 0, .1);--selection-area-color: rgba(100, 108, 255, .14);--disabled-color: #e2e2e2;--node-background-color: #ffffff;--node-background-color-inverse: #000000;--node-border-radius: 2px;--node-border-color: rgba(60, 60, 67, .36);--node-selected-border-color: #3451b2;--node-color: rgba(60, 60, 67, .78);--node-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--connection-color: var(--p-text-color);--snap-connection-color: var(--p-text-muted-color);--connection-gradient-1: #b8272c;--connection-gradient-2: #30a46c;--outlet-color: #3451b2;--input-output-color: rgba(60, 60, 67, .78);--minimap-background-color: #ffffff;--minimap-node-color: rgba(60, 60, 67);--minimap-node-selected-color: var(--p-primary-color);--minimap-view-color: rgba(100, 108, 255, .14)}::ng-deep :root.dark{--background-element-color: rgba(255, 255, 255, .1);--selection-area-color: rgba(100, 108, 255, .16);--disabled-color: #2c2c2e;--node-background-color: #000000;--node-background-color-inverse: #ffffff;--node-border-radius: 2px;--node-border-color: rgba(235, 235, 245, .38);--node-selected-border-color: #a8b1ff;--node-color: rgba(235, 235, 245, .6);--node-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--connection-color: rgba(235, 235, 245, 1);--snap-connection-color: rgba(235, 235, 245, .2);--connection-gradient-1: #f66f81;--connection-gradient-2: #298459;--outlet-color: #a8b1ff;--input-output-color: rgba(235, 235, 245, .6);--minimap-background-color: #1b1b1f;--minimap-node-color: rgba(255, 255, 245, .86);--minimap-node-selected-color: #a8b1ff;--minimap-view-color: rgba(100, 108, 255, .16)}::ng-deep :root{--form-field-text-color: var(--node-color);--form-field-background: var(--minimap-view-color);--form-field-panel-shadow: var(--shadow-4);--form-field-panel-background: var(--node-background-color);--form-field-active-color: var(--minimap-node-selected-color)}::ng-deep f-flow .f-connection{cursor:pointer}::ng-deep f-flow .f-connection .f-connection-drag-handle{fill:transparent}::ng-deep f-flow .f-connection .f-connection-selection{fill:none}::ng-deep f-flow .f-connection .f-connection-path{fill:none;stroke:var(--connection-color);stroke-width:2}::ng-deep f-flow .f-connection .f-connection-marker{fill:var(--connection-color)}::ng-deep f-flow .f-connection .f-marker path,::ng-deep f-flow .f-connection .f-marker circle{fill:var(--connection-color)}::ng-deep f-flow .f-connection .f-connection-text,::ng-deep f-flow .f-connection .f-connection-center{fill:var(--connection-color);color:var(--connection-color)}::ng-deep f-flow .f-connection.f-snap-connection .f-connection-path{stroke:var(--snap-connection-color)}::ng-deep f-flow .f-connection .f-connection-center{display:none}::ng-deep f-flow .f-connection.connection-loading .f-connection-center{display:block}::ng-deep f-flow .f-connection.f-selected .f-connection-center{display:block}::ng-deep f-flow .f-connection.f-selected .f-connection-path{stroke:var(--minimap-node-selected-color)}::ng-deep f-flow .f-connection.f-selected .f-marker path,::ng-deep f-flow .f-connection.f-selected .f-marker circle{fill:var(--p-primary-color);stroke:var(--minimap-node-selected-color)}::ng-deep f-flow .f-connection .f-connection-selection{fill:none;stroke:transparent;stroke-width:20;cursor:pointer}::ng-deep f-flow .f-connection:hover .f-connection-selection{stroke:var(--p-primary-color);opacity:.1}::ng-deep f-flow .f-connection.f-snap-connection .f-connection-path{stroke:var(--snap-connection-color);stroke-width:2px}::ng-deep f-flow .f-connection.f-snap-connection .f-marker path,::ng-deep f-flow .f-connection.f-snap-connection .f-marker circle{fill:var(--snap-connection-color)}::ng-deep f-flow .f-connection.f-snap-connection .f-connection-selection{fill:transparent!important;stroke:transparent!important}::ng-deep f-flow .f-connection.f-connection-for-create .f-connection-selection{fill:transparent!important;stroke:transparent!important}::ng-deep f-flow .f-connection-for-create{pointer-events:none}::ng-deep f-flow .f-connection-for-create .f-connection .f-connection-path{stroke:var(--snap-connection-color);stroke-width:3px;stroke-dasharray:8,4;animation:connection-dash 1s linear infinite}::ng-deep f-flow .f-connection-for-create .f-connection .f-marker path,::ng-deep f-flow .f-connection-for-create .f-connection .f-marker circle{fill:var(--snap-connection-color)}@keyframes connection-dash{to{stroke-dashoffset:-12}}.f-node-input:not(.f-node),.f-node-output:not(.f-node){position:absolute;width:100%;height:16px;border-radius:0 0 1rem 1rem}.f-node-input:not(.f-node):hover,.f-node-output:not(.f-node):hover{border:.5px dashed var(--p-primary-color)}.f-node-input:not(.f-node).top,.f-node-output:not(.f-node).top{top:0}.f-node-input:not(.f-node).bottom,.f-node-output:not(.f-node).bottom{bottom:0}.f-node-input:not(.f-node).f-node-output-not-connectable,.f-node-input:not(.f-node).f-node-input-not-connectable,.f-node-output:not(.f-node).f-node-output-not-connectable,.f-node-output:not(.f-node).f-node-input-not-connectable{background-color:var(--disabled-color)}.f-node-input:not(.f-node){border-radius:4px}.f-node-input,.f-node-output{z-index:10;pointer-events:all}.examples-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;position:absolute;right:16px;top:16px}.examples-toolbar button{font-weight:500;border:none;border-radius:2px;padding:4px 8px;line-height:normal}.f-node:before{content:\"\";position:absolute;width:100%;height:4rem;border-radius:var(--radius-2xl);z-index:-1;top:-.25rem;background-color:var(--node-data-border-color)}.connection-center{display:flex;gap:8px;background:var(--node-background-color);border:1px solid var(--node-border-color);border-radius:4px;padding:4px;box-shadow:var(--node-shadow)}.connection-center .connection-edit-btn,.connection-center .connection-delete-btn{background:none;border:none;width:24px;height:24px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.connection-center .connection-edit-btn:hover,.connection-center .connection-delete-btn:hover{background-color:var(--minimap-view-color)}.connection-center .connection-edit-btn{color:var(--minimap-node-selected-color)}.connection-center .connection-delete-btn{color:#ef4444}.node-edit-btn,.node-delete-btn{background:none;border:none;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.node-edit-btn:hover,.node-delete-btn:hover{background-color:var(--minimap-view-color)}.node-edit-btn{color:var(--minimap-node-selected-color)}.node-delete-btn{color:#ef4444}.node-properties{max-height:200px;overflow-y:auto}.node-properties .property-item{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--node-border-color);font-size:12px}.node-properties .property-item .property-key{font-weight:600;color:var(--node-color);margin-right:8px}.node-properties .property-item .property-value{color:var(--minimap-node-selected-color);word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i2$1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId"], outputs: ["fLoaded"] }, { kind: "component", type: i2$1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime"], outputs: ["fCanvasChange"] }, { kind: "component", type: i2$1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i2$1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i2$1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fZoomDblClickStep"], exportAs: ["fComponent"] }, { kind: "directive", type: i2$1.FExternalItemDirective, selector: "[fExternalItem]", inputs: ["fExternalItemId", "fData", "fDisabled", "fPreview", "fPreviewMatchSize", "fPlaceholder"] }, { kind: "component", type: i2$1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fText", "fTextStartOffset", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "directive", type: i2$1.FConnectionCenterDirective, selector: "[fConnectionCenter]", inputs: ["fConnectionCenter"] }, { kind: "component", type: i2$1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i2$1.FMarkerDirective, selector: "svg[fMarker]", inputs: ["width", "height", "refX", "refY", "type", "orient", "markerUnits"] }, { kind: "component", type: i2$1.FSnapConnectionComponent, selector: "f-snap-connection", inputs: ["fSnapThreshold", "fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i2$1.FNodeInputDirective, selector: "[fNodeInput]", inputs: ["fInputId", "fInputCategory", "fInputMultiple", "fInputDisabled", "fInputConnectableSide"], exportAs: ["fNodeInput"] }, { kind: "directive", type: i2$1.FNodeOutputDirective, selector: "[fNodeOutput]", inputs: ["fOutputId", "fOutputMultiple", "fOutputDisabled", "fOutputConnectableSide", "isSelfConnectable", "fCanBeConnectedInputs"], exportAs: ["fNodeOutput"] }, { kind: "directive", type: i2$1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i2$1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i2$1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fNodeIntersectedWithConnections", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i3$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.TabList, selector: "p-tablist" }, { kind: "component", type: i3$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Toolbar, selector: "mt-toolbar", inputs: ["size"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: FilterActionsPipe, name: "filterActions" }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }] });
|
|
477
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StructureBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
478
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: StructureBuilder, isStandalone: true, selector: "mt-structure-builder", inputs: { availableNodes: { classPropertyName: "availableNodes", publicName: "availableNodes", isSignal: true, isRequired: false, transformFunction: null }, nodeForm: { classPropertyName: "nodeForm", publicName: "nodeForm", isSignal: true, isRequired: false, transformFunction: null }, connectionForm: { classPropertyName: "connectionForm", publicName: "connectionForm", isSignal: true, isRequired: false, transformFunction: null }, nodeActions: { classPropertyName: "nodeActions", publicName: "nodeActions", isSignal: true, isRequired: false, transformFunction: null }, nodeFields: { classPropertyName: "nodeFields", publicName: "nodeFields", isSignal: true, isRequired: false, transformFunction: null }, isAutoLayout: { classPropertyName: "isAutoLayout", publicName: "isAutoLayout", isSignal: true, isRequired: false, transformFunction: null }, addModalType: { classPropertyName: "addModalType", publicName: "addModalType", isSignal: true, isRequired: false, transformFunction: null }, updateModalType: { classPropertyName: "updateModalType", publicName: "updateModalType", isSignal: true, isRequired: false, transformFunction: null }, addModalStyleClass: { classPropertyName: "addModalStyleClass", publicName: "addModalStyleClass", isSignal: true, isRequired: false, transformFunction: null }, updateModalStyleClass: { classPropertyName: "updateModalStyleClass", publicName: "updateModalStyleClass", isSignal: true, isRequired: false, transformFunction: null }, addModalHeader: { classPropertyName: "addModalHeader", publicName: "addModalHeader", isSignal: true, isRequired: false, transformFunction: null }, updateModalHeader: { classPropertyName: "updateModalHeader", publicName: "updateModalHeader", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, connections: { classPropertyName: "connections", publicName: "connections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeActionsEvent: "nodeActionsEvent", action: "action", nodes: "nodesChange", connections: "connectionsChange" }, host: { classAttribute: "flex h-full bg-surface-200 dark:bg-surface-700 relative rounded-2xl overflow-hidden" }, providers: [DialogService], queries: [{ propertyName: "nodeDialogTemplate", first: true, predicate: ["nodeDialog"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fCanvas", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }, { propertyName: "fFlowComponent", first: true, predicate: FFlowComponent, descendants: true, isSignal: true }, { propertyName: "fCanvasComponent", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }, { propertyName: "fZoomDirective", first: true, predicate: FZoomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- structure-builder.html -->\n@if (availableTabs().length > 0) {\n <mt-card\n class=\"absolute ms-4 mt-4 z-1 h-[calc(100%---spacing(8))] w-1/5 min-w-xs\"\n >\n <ng-template #headless>\n <!-- Header -->\n <div class=\"flex items-center justify-between px-4 pt-5\">\n <h3 class=\"text-xl font-semibold\">\n {{ \"structureBuilder.levelTemplates\" | transloco }}\n </h3>\n </div>\n\n <!-- Tabs using PrimeNG -->\n <p-tabs\n [(value)]=\"activeTab\"\n styleClass=\"structure-tabs \"\n class=\"h-full overflow-hidden\"\n >\n <p-tablist>\n @for (tab of availableTabs(); track tab; let i = $index) {\n <p-tab [value]=\"i.toString()\">{{ tab | titlecase }}</p-tab>\n }\n </p-tablist>\n <p-tabpanels class=\"bg-transparent! p-0! overflow-auto\">\n @for (tab of availableTabs(); track tab; let i = $index) {\n <p-tabpanel [value]=\"i.toString()\">\n <p class=\"text-xs text-muted py-3 px-4\">\n {{ \"structureBuilder.dragToAdd\" | transloco }}\n </p>\n\n <!-- Node List -->\n <div class=\"space-y-1 px-4\">\n @for (node of currentTabNodes(); track node.id) {\n <div\n fExternalItem\n [fData]=\"node\"\n class=\"group select-none relative flex items-center gap-3 py-3 px-4 hover:bg-emphasis hover:border-solid transition-colors rounded-lg border-1 border-dashed border-color border-surface-300 dark:border-surface-500 cursor-move transition-colors\"\n >\n <!-- Node Icon with color -->\n <div class=\"text-primary text-lg\">\n <mt-icon [icon]=\"node.icon || 'general.box'\"></mt-icon>\n </div>\n\n <!-- Node Name -->\n <span class=\"text-base font-medium flex-1\">{{\n node.label\n }}</span>\n </div>\n }\n\n @if (currentTabNodes().length === 0) {\n <div class=\"text-center py-8 text-gray-400\">\n <p class=\"text-sm\">\n {{\n \"structureBuilder.allItemsInUse\"\n | transloco: { tab: tab }\n }}\n </p>\n </div>\n }\n </div>\n </p-tabpanel>\n }\n </p-tabpanels>\n </p-tabs>\n </ng-template>\n </mt-card>\n} @else if (availableNodes().length > 0) {\n <mt-card\n [title]=\"'structureBuilder.steps' | transloco\"\n class=\"absolute top-4 start-4 z-1 w-64\"\n >\n <div class=\"flex flex-col gap-2\">\n @for (node of availableNodes(); track node.id) {\n <div\n fExternalItem\n [fData]=\"node\"\n class=\"group select-none relative flex items-center gap-3 py-3 px-4 hover:bg-emphasis hover:border-solid transition-colors rounded-lg border-1 border-dashed border-color border-surface-300 dark:border-surface-500 cursor-move bg-content\"\n >\n <!-- Node Icon with color -->\n <div class=\"text-primary text-lg\">\n <mt-icon [icon]=\"node.icon || 'general.box'\"></mt-icon>\n </div>\n\n <!-- Node Name -->\n <span class=\"text-base font-medium flex-1\">{{ node.label }}</span>\n </div>\n }\n </div>\n </mt-card>\n}\n<!-- Left Sidebar -->\n\n<!-- Main Canvas Area -->\n<div class=\"flex-1 z-0 relative\">\n <ng-content select=\"[flowContent]\"></ng-content>\n\n <f-flow\n fDraggable\n (fLoaded)=\"onLoaded()\"\n (fCreateNode)=\"onCreateNode($event)\"\n (fCreateConnection)=\"onCreateConnection($event)\"\n class=\"size-full\"\n >\n <f-background>\n <f-circle-pattern color=\"#b5b5b5\"></f-circle-pattern>\n </f-background>\n <f-canvas fZoom [fZoomMinimum]=\"0.1\" [fZoomMaximum]=\"2\">\n <f-connection-for-create fBehavior=\"floating\" fType=\"straight\">\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n </f-connection-for-create>\n <f-snap-connection\n fBehavior=\"fixed\"\n fType=\"segment\"\n class=\"z-1\"\n [fSnapThreshold]=\"100\"\n >\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n </f-snap-connection>\n\n <f-connection-for-create></f-connection-for-create>\n\n <!-- Enhanced Connections with Edit Button -->\n @for (connection of connectionsComputed(); track connection.id) {\n <f-connection\n [fReassignDisabled]=\"true\"\n [fOutputId]=\"connection.from\"\n [fInputId]=\"connection.to\"\n fBehavior=\"fixed\"\n fType=\"segment\"\n [ngClass]=\"{ 'connection-loading': connection.loading, 'z-1': true }\"\n >\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.SELECTED_START\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <svg\n viewBox=\"0 0 12 12\"\n fMarker\n [type]=\"eMarkerType.SELECTED_END\"\n [height]=\"12\"\n [width]=\"12\"\n [refX]=\"6\"\n [refY]=\"6\"\n >\n <circle\n cx=\"6\"\n cy=\"6\"\n r=\"3\"\n stroke=\"none\"\n fill=\"currentColor\"\n ></circle>\n </svg>\n <div\n fConnectionCenter\n class=\"flex items-center gap-1 bg-content rounded-md p-1 shadow-sm\"\n >\n @if (!connection.loading) {\n <mt-button\n size=\"small\"\n variant=\"text\"\n [icon]=\"'general.edit-05'\"\n (click)=\"openConnectionDialog(connection)\"\n >\n </mt-button>\n <mt-button\n size=\"small\"\n variant=\"text\"\n severity=\"danger\"\n [icon]=\"'general.trash-01'\"\n (click)=\"removeConnection(connection)\"\n >\n </mt-button>\n } @else {\n <mt-button\n size=\"small\"\n variant=\"text\"\n [icon]=\"'general.loading-01'\"\n >\n </mt-button>\n }\n </div>\n </f-connection>\n }\n\n <!-- Enhanced Nodes with Edit Button -->\n @for (node of nodesWithComputedProps(); track node._computedId) {\n <mt-card\n fNode\n fDragHandle\n [fNodePosition]=\"{\n x: node.configuration?.x || 200,\n y: node.configuration?.y || 100,\n }\"\n (fNodePositionChange)=\"onNodePositionChange($event, node._computedId)\"\n [style.--node-data-border-color]=\"node._computedColor\"\n >\n <ng-template #headless>\n @if (!node.loading) {\n <div\n class=\"flex flex-col items-center min-w-3xs gap-2 px-3 py-4 rounded-t-2xl bg-white dark:bg-surface-800 border-(--p-content-border-color)\"\n >\n @if (node._computedIcon) {\n <mt-icon\n class=\"text-2xl text-primary\"\n [icon]=\"node._computedIcon\"\n />\n }\n <div>{{ node._computedName }}</div>\n </div>\n <div\n class=\"flex justify-center pt-3 mb-4 gap-2 bg-surface-50 dark:bg-surface-900\"\n >\n @for (\n action of nodeActions() | filterActions: node;\n track action.key\n ) {\n <mt-button\n [size]=\"action?.size || 'small'\"\n [variant]=\"action?.variant\"\n [icon]=\"action?.icon\"\n [tooltip]=\"action?.tooltip\"\n [severity]=\"action?.severity\"\n (onClick)=\"buttonAction(action, node)\"\n >\n </mt-button>\n }\n </div>\n <div\n fNodeInput\n [fInputId]=\"node._computedId\"\n fInputConnectableSide=\"top\"\n [fInputMultiple]=\"true\"\n class=\"top\"\n ></div>\n\n <div\n fNodeOutput\n [fOutputId]=\"node._computedId\"\n fOutputConnectableSide=\"bottom\"\n [isSelfConnectable]=\"false\"\n [fOutputMultiple]=\"true\"\n class=\"bottom bg-surface-50 dark:bg-surface-900\"\n ></div>\n } @else {\n <p-skeleton height=\"10rem\" width=\"15rem\" />\n }\n\n <!-- Node Header with Edit Button -->\n </ng-template>\n </mt-card>\n }\n </f-canvas>\n </f-flow>\n</div>\n<mt-toolbar />\n", styles: ["::ng-deep :root{--background-element-color: rgba(0, 0, 0, .1);--selection-area-color: rgba(100, 108, 255, .14);--disabled-color: #e2e2e2;--node-background-color: #ffffff;--node-background-color-inverse: #000000;--node-border-radius: 2px;--node-border-color: rgba(60, 60, 67, .36);--node-selected-border-color: #3451b2;--node-color: rgba(60, 60, 67, .78);--node-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--connection-color: var(--p-text-color);--snap-connection-color: var(--p-text-muted-color);--connection-gradient-1: #b8272c;--connection-gradient-2: #30a46c;--outlet-color: #3451b2;--input-output-color: rgba(60, 60, 67, .78);--minimap-background-color: #ffffff;--minimap-node-color: rgba(60, 60, 67);--minimap-node-selected-color: var(--p-primary-color);--minimap-view-color: rgba(100, 108, 255, .14)}::ng-deep :root.dark{--background-element-color: rgba(255, 255, 255, .1);--selection-area-color: rgba(100, 108, 255, .16);--disabled-color: #2c2c2e;--node-background-color: #000000;--node-background-color-inverse: #ffffff;--node-border-radius: 2px;--node-border-color: rgba(235, 235, 245, .38);--node-selected-border-color: #a8b1ff;--node-color: rgba(235, 235, 245, .6);--node-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--connection-color: rgba(235, 235, 245, 1);--snap-connection-color: rgba(235, 235, 245, .2);--connection-gradient-1: #f66f81;--connection-gradient-2: #298459;--outlet-color: #a8b1ff;--input-output-color: rgba(235, 235, 245, .6);--minimap-background-color: #1b1b1f;--minimap-node-color: rgba(255, 255, 245, .86);--minimap-node-selected-color: #a8b1ff;--minimap-view-color: rgba(100, 108, 255, .16)}::ng-deep :root{--form-field-text-color: var(--node-color);--form-field-background: var(--minimap-view-color);--form-field-panel-shadow: var(--shadow-4);--form-field-panel-background: var(--node-background-color);--form-field-active-color: var(--minimap-node-selected-color)}::ng-deep f-flow .f-connection{cursor:pointer}::ng-deep f-flow .f-connection .f-connection-drag-handle{fill:transparent}::ng-deep f-flow .f-connection .f-connection-selection{fill:none}::ng-deep f-flow .f-connection .f-connection-path{fill:none;stroke:var(--connection-color);stroke-width:2}::ng-deep f-flow .f-connection .f-connection-marker{fill:var(--connection-color)}::ng-deep f-flow .f-connection .f-marker path,::ng-deep f-flow .f-connection .f-marker circle{fill:var(--connection-color)}::ng-deep f-flow .f-connection .f-connection-text,::ng-deep f-flow .f-connection .f-connection-center{fill:var(--connection-color);color:var(--connection-color)}::ng-deep f-flow .f-connection.f-snap-connection .f-connection-path{stroke:var(--snap-connection-color)}::ng-deep f-flow .f-connection .f-connection-center{display:none}::ng-deep f-flow .f-connection.connection-loading .f-connection-center{display:block}::ng-deep f-flow .f-connection.f-selected .f-connection-center{display:block}::ng-deep f-flow .f-connection.f-selected .f-connection-path{stroke:var(--minimap-node-selected-color)}::ng-deep f-flow .f-connection.f-selected .f-marker path,::ng-deep f-flow .f-connection.f-selected .f-marker circle{fill:var(--p-primary-color);stroke:var(--minimap-node-selected-color)}::ng-deep f-flow .f-connection .f-connection-selection{fill:none;stroke:transparent;stroke-width:20;cursor:pointer}::ng-deep f-flow .f-connection:hover .f-connection-selection{stroke:var(--p-primary-color);opacity:.1}::ng-deep f-flow .f-connection.f-snap-connection .f-connection-path{stroke:var(--snap-connection-color);stroke-width:2px}::ng-deep f-flow .f-connection.f-snap-connection .f-marker path,::ng-deep f-flow .f-connection.f-snap-connection .f-marker circle{fill:var(--snap-connection-color)}::ng-deep f-flow .f-connection.f-snap-connection .f-connection-selection{fill:transparent!important;stroke:transparent!important}::ng-deep f-flow .f-connection.f-connection-for-create .f-connection-selection{fill:transparent!important;stroke:transparent!important}::ng-deep f-flow .f-connection-for-create{pointer-events:none}::ng-deep f-flow .f-connection-for-create .f-connection .f-connection-path{stroke:var(--snap-connection-color);stroke-width:3px;stroke-dasharray:8,4;animation:connection-dash 1s linear infinite}::ng-deep f-flow .f-connection-for-create .f-connection .f-marker path,::ng-deep f-flow .f-connection-for-create .f-connection .f-marker circle{fill:var(--snap-connection-color)}@keyframes connection-dash{to{stroke-dashoffset:-12}}.f-node-input:not(.f-node),.f-node-output:not(.f-node){position:absolute;width:100%;height:16px;border-radius:0 0 1rem 1rem}.f-node-input:not(.f-node):hover,.f-node-output:not(.f-node):hover{border:.5px dashed var(--p-primary-color)}.f-node-input:not(.f-node).top,.f-node-output:not(.f-node).top{top:0}.f-node-input:not(.f-node).bottom,.f-node-output:not(.f-node).bottom{bottom:0}.f-node-input:not(.f-node).f-node-output-not-connectable,.f-node-input:not(.f-node).f-node-input-not-connectable,.f-node-output:not(.f-node).f-node-output-not-connectable,.f-node-output:not(.f-node).f-node-input-not-connectable{background-color:var(--disabled-color)}.f-node-input:not(.f-node){border-radius:4px}.f-node-input,.f-node-output{z-index:10;pointer-events:all}.examples-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;position:absolute;right:16px;top:16px}.examples-toolbar button{font-weight:500;border:none;border-radius:2px;padding:4px 8px;line-height:normal}.f-node:before{content:\"\";position:absolute;width:100%;height:4rem;border-radius:var(--radius-2xl);z-index:-1;top:-.25rem;background-color:var(--node-data-border-color)}.connection-center{display:flex;gap:8px;background:var(--node-background-color);border:1px solid var(--node-border-color);border-radius:4px;padding:4px;box-shadow:var(--node-shadow)}.connection-center .connection-edit-btn,.connection-center .connection-delete-btn{background:none;border:none;width:24px;height:24px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.connection-center .connection-edit-btn:hover,.connection-center .connection-delete-btn:hover{background-color:var(--minimap-view-color)}.connection-center .connection-edit-btn{color:var(--minimap-node-selected-color)}.connection-center .connection-delete-btn{color:#ef4444}.node-edit-btn,.node-delete-btn{background:none;border:none;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.node-edit-btn:hover,.node-delete-btn:hover{background-color:var(--minimap-view-color)}.node-edit-btn{color:var(--minimap-node-selected-color)}.node-delete-btn{color:#ef4444}.node-properties{max-height:200px;overflow-y:auto}.node-properties .property-item{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--node-border-color);font-size:12px}.node-properties .property-item .property-key{font-weight:600;color:var(--node-color);margin-right:8px}.node-properties .property-item .property-value{color:var(--minimap-node-selected-color);word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i2$1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId"], outputs: ["fLoaded"] }, { kind: "component", type: i2$1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime"], outputs: ["fCanvasChange"] }, { kind: "component", type: i2$1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i2$1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i2$1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fZoomDblClickStep"], exportAs: ["fComponent"] }, { kind: "directive", type: i2$1.FExternalItemDirective, selector: "[fExternalItem]", inputs: ["fExternalItemId", "fData", "fDisabled", "fPreview", "fPreviewMatchSize", "fPlaceholder"] }, { kind: "component", type: i2$1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fText", "fTextStartOffset", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "directive", type: i2$1.FConnectionCenterDirective, selector: "[fConnectionCenter]", inputs: ["fConnectionCenter"] }, { kind: "component", type: i2$1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i2$1.FMarkerDirective, selector: "svg[fMarker]", inputs: ["width", "height", "refX", "refY", "type", "orient", "markerUnits"] }, { kind: "component", type: i2$1.FSnapConnectionComponent, selector: "f-snap-connection", inputs: ["fSnapThreshold", "fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i2$1.FNodeInputDirective, selector: "[fNodeInput]", inputs: ["fInputId", "fInputCategory", "fInputMultiple", "fInputDisabled", "fInputConnectableSide"], exportAs: ["fNodeInput"] }, { kind: "directive", type: i2$1.FNodeOutputDirective, selector: "[fNodeOutput]", inputs: ["fOutputId", "fOutputMultiple", "fOutputDisabled", "fOutputConnectableSide", "isSelfConnectable", "fCanBeConnectedInputs"], exportAs: ["fNodeOutput"] }, { kind: "directive", type: i2$1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i2$1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i2$1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fNodeIntersectedWithConnections", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i3$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.TabList, selector: "p-tablist" }, { kind: "component", type: i3$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Toolbar, selector: "mt-toolbar", inputs: ["size"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: FilterActionsPipe, name: "filterActions" }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }] });
|
|
479
479
|
}
|
|
480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StructureBuilder, decorators: [{
|
|
481
481
|
type: Component,
|
|
482
482
|
args: [{ selector: 'mt-structure-builder', standalone: true, imports: [
|
|
483
483
|
CommonModule,
|
package/package.json
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@masterteam/structure-builder",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.27",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"directory": "../../../dist/masterteam/structure-builder",
|
|
6
6
|
"linkDirectory": false,
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"peerDependencies": {
|
|
10
|
-
"@angular/common": "^21.0.
|
|
11
|
-
"@angular/core": "^21.0.
|
|
12
|
-
"@angular/forms": "^21.0.
|
|
10
|
+
"@angular/common": "^21.0.2",
|
|
11
|
+
"@angular/core": "^21.0.2",
|
|
12
|
+
"@angular/forms": "^21.0.2",
|
|
13
13
|
"@foblex/flow": "^17.9.8",
|
|
14
14
|
"@primeuix/themes": "^2.0.1",
|
|
15
15
|
"@tailwindcss/postcss": "^4.1.17",
|
|
16
|
+
"@jsverse/transloco": "^8.0.2",
|
|
16
17
|
"postcss": "^8.5.6",
|
|
17
18
|
"primeng": "21.0.0-beta.1",
|
|
18
19
|
"rxjs": "^7.8.2",
|
|
@@ -22,9 +23,9 @@
|
|
|
22
23
|
},
|
|
23
24
|
"dependencies": {
|
|
24
25
|
"tslib": "^2.3.0",
|
|
25
|
-
"@masterteam/
|
|
26
|
-
"@masterteam/
|
|
27
|
-
"@masterteam/icons": "^0.0.
|
|
26
|
+
"@masterteam/components": "^0.0.64",
|
|
27
|
+
"@masterteam/forms": "^0.0.29",
|
|
28
|
+
"@masterteam/icons": "^0.0.10"
|
|
28
29
|
},
|
|
29
30
|
"sideEffects": false,
|
|
30
31
|
"exports": {
|