@acorex-platform/module-workflow-management-client 0.0.21

package/fesm2022/acorex-platform-module-workflow-management-client-index-DKZTLui4.mjs

@@ -0,0 +1,1329 @@
+import * as i0 from '@angular/core';
+import { Injectable, input, inject, NgZone, DestroyRef, viewChild, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as contracts from '@acorex-platform/module-workflow-management-client/contracts';
+import { WORKFLOW_DEFINITION_ACTIVITIES_PAGE_COMPONENT_KEY, RootConfig } from '@acorex-platform/module-workflow-management-client/contracts';
+export * from '@acorex-platform/module-workflow-management-client/contracts';
+import { AXPDataGenerator } from '@acorex-platform/framework-client/core';
+import * as i1 from '@acorex/cdk/accordion';
+import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
+import * as i2 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXFormModule } from '@acorex/components/form';
+import * as i3 from '@acorex/components/menu';
+import { AXContextMenuComponent, AXMenuModule } from '@acorex/components/menu';
+import * as i5 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
+import * as i7 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPWorkflowDesignerComponent, arrangeWorkflowDiagram, AXPWorkflowPaletteItemDragDirective } from '@acorex-platform/module-platform-management-client';
+import { AXPPropertyViewerComponent, buildPropertyViewerTabsFromProperties, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPEntityService } from '@acorex-platform/framework-client/layout/entity';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import { mapAXPPropertyToWidgetProperty } from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPCommandService } from '@acorex-platform/framework-client/runtime';
+import { AXPActivityDefinitionService } from '@acorex-platform/framework-client/workflow';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { cloneDeep, isEqual } from 'lodash';
+import { WORKFLOW_DEFINITION_ACTIVITIES_SAVE_COMMAND } from './acorex-platform-module-workflow-management-client-save-workflow-definition-activities.command-spFF77AO.mjs';
+
+//#region ---- Workflow Definition Activities Page Provider ----
+class AXMWorkflowDefinitionActivitiesPageComponentProvider {
+    async components() {
+        return [
+            {
+                key: WORKFLOW_DEFINITION_ACTIVITIES_PAGE_COMPONENT_KEY,
+                loader: () => Promise.resolve().then(function () { return workflowDefinitionActivitiesPage_component; }).then((m) => m.AXMWorkflowDefinitionActivitiesPageComponent),
+            },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMWorkflowDefinitionActivitiesPageComponentProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMWorkflowDefinitionActivitiesPageComponentProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMWorkflowDefinitionActivitiesPageComponentProvider, decorators: [{
+            type: Injectable
+        }] });
+
+//#region ---- Types ----
+//#endregion
+//#region ---- Designer layout helpers ----
+function isDesignerLayoutArranged(graph) {
+    return graph?.designer?.layoutArranged === true;
+}
+/** True when every activity has persisted designer node coordinates. */
+function graphHasPersistedDesignerLayout(graph) {
+    const activities = graph?.activities ?? [];
+    if (activities.length === 0) {
+        return false;
+    }
+    const nodes = graph?.designer?.nodes;
+    if (nodes == null || Object.keys(nodes).length === 0) {
+        return false;
+    }
+    return activities.every((a) => {
+        const n = nodes[a.id];
+        return n != null && typeof n.x === 'number' && typeof n.y === 'number';
+    });
+}
+//#endregion
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Constants ----
+const DEFAULT_NODE_W = 240;
+const DEFAULT_NODE_H = 96;
+const DESIGNER_GRID_SIZE = 20;
+/** Debounce window before persisting designer edits (drag emits many modelChange events). */
+const AUTO_SAVE_DEBOUNCE_MS = 500;
+const DISCARD_COMMAND = 'WorkflowManagement.WorkflowDefinition:Activities:Discard';
+const ADD_STEP_COMMAND = 'WorkflowManagement.WorkflowDefinition:Activities:AddStep';
+const ARRANGE_LAYOUT_COMMAND = 'WorkflowManagement.WorkflowDefinition:Activities:ArrangeLayout';
+const TOGGLE_DETAIL_PANEL_ACTION_ID = 'workflow-management.activities.toggle-detail-panel';
+const ADD_ACTIVITY_ACTION_ID = 'workflow-management.activities.add-activity';
+const TOGGLE_DETAIL_PANEL_ACTION_TITLE_KEY = '@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.node-actions.toggle-detail-panel';
+const ADD_ACTIVITY_ACTION_TITLE_KEY = '@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.node-actions.add-activity';
+const ARRANGE_LAYOUT_ACTION_TITLE_KEY = '@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.node-actions.arrange-layout';
+//#endregion
+//#region ---- Helpers ----
+function normalizeActivityDefinitionInputs(raw) {
+    if (Array.isArray(raw)) {
+        return raw;
+    }
+    if (typeof raw === 'string' && raw.trim().length > 0) {
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    return [];
+}
+function portKey(port) {
+    return port == null || port === '' ? 'Done' : port;
+}
+function rowFromInstance(a) {
+    const inputs = a.inputs != null && typeof a.inputs === 'object' && !Array.isArray(a.inputs)
+        ? { ...a.inputs }
+        : {};
+    const extRaw = a.extensions;
+    const extensions = extRaw != null && typeof extRaw === 'object' && !Array.isArray(extRaw)
+        ? { ...extRaw }
+        : undefined;
+    return {
+        id: a.id,
+        name: typeof a.name === 'string' ? a.name : '',
+        inputs,
+        ...(extensions != null && Object.keys(extensions).length > 0 ? { extensions } : {}),
+    };
+}
+function instanceFromRow(r) {
+    const out = { id: r.id, name: r.name, inputs: { ...r.inputs } };
+    if (r.extensions != null && Object.keys(r.extensions).length > 0) {
+        out.extensions = { ...r.extensions };
+    }
+    return out;
+}
+function emptyGraph() {
+    return { startActivityId: '', activities: [], connections: [] };
+}
+function graphFingerprint(g) {
+    if (g == null) {
+        return null;
+    }
+    return {
+        startActivityId: g.startActivityId,
+        activities: g.activities,
+        connections: g.connections,
+        designer: g.designer,
+    };
+}
+//#endregion
+//#region ---- Component ----
+class AXMWorkflowDefinitionActivitiesPageComponent extends AXPPageLayoutBaseComponent {
+    //#endregion
+    //#region ---- Lifecycle ----
+    constructor() {
+        super();
+        //#region ---- Inputs ----
+        this.rootContext = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.pageConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "pageConfig" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Services ----
+        this.commandService = inject(AXPCommandService);
+        this.entityService = inject(AXPEntityService);
+        this.activityDefService = inject(AXPActivityDefinitionService);
+        this.mlResolver = inject(AXTranslationService);
+        this.hostPageLayout = inject(AXPPageLayoutBase, { optional: true, skipSelf: true });
+        this.ngZone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        //#endregion
+        //#region ---- Auto-save ----
+        this.autoSaveTimer = null;
+        this.autoSaveInFlight = false;
+        this.autoSavePending = false;
+        this.suppressAutoSave = false;
+        //#region ---- View refs ----
+        this.propertyViewerRef = viewChild(AXPPropertyViewerComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "propertyViewerRef" }] : /* istanbul ignore next */ []));
+        this.workflowDesignerRef = viewChild(AXPWorkflowDesignerComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "workflowDesignerRef" }] : /* istanbul ignore next */ []));
+        this.contextMenu = viewChild(AXContextMenuComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- State ----
+        this.baselineGraph = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baselineGraph" }] : /* istanbul ignore next */ []));
+        /** Persisted on `graph.designer.layoutArranged` after the first auto-arrange (or layout migration). */
+        this.layoutArrangedFlag = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layoutArrangedFlag" }] : /* istanbul ignore next */ []));
+        this.initialLayoutArrangeInFlight = false;
+        this.activityCatalogLoaded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activityCatalogLoaded" }] : /* istanbul ignore next */ []));
+        this.activityDefCache = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activityDefCache" }] : /* istanbul ignore next */ []));
+        this.activitySelectItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activitySelectItems" }] : /* istanbul ignore next */ []));
+        this.activities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activities" }] : /* istanbul ignore next */ []));
+        this.connections = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "connections" }] : /* istanbul ignore next */ []));
+        this.startActivityId = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startActivityId" }] : /* istanbul ignore next */ []));
+        this.selectedRowId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedRowId" }] : /* istanbul ignore next */ []));
+        this.viewerTabs = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewerTabs" }] : /* istanbul ignore next */ []));
+        this.selectedActivityOutcomeRows = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedActivityOutcomeRows" }] : /* istanbul ignore next */ []));
+        this.isDirty = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
+        this.backgroundPattern = signal('dots', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backgroundPattern" }] : /* istanbul ignore next */ []));
+        this.zoomLevel = signal(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
+        this.isFullscreen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+        this.isInfoPanelOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInfoPanelOpen" }] : /* istanbul ignore next */ []));
+        this.isPaletteOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPaletteOpen" }] : /* istanbul ignore next */ []));
+        this.paletteSearchTerm = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paletteSearchTerm" }] : /* istanbul ignore next */ []));
+        /** Canvas layout keyed by activity instance id; kept in sync with designer `modelChange` and saved on `graph.designer`. */
+        this.designerLayout = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "designerLayout" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Computed ----
+        this.context = computed(() => this.rootContext() ?? {}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+        this.selectedRow = computed(() => this.activities().find((x) => x.id === this.selectedRowId()) ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedRow" }] : /* istanbul ignore next */ []));
+        this.startActivityItems = computed(() => this.activities().map((r) => ({ value: r.id, text: this.formatActivityStepLabel(r) })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startActivityItems" }] : /* istanbul ignore next */ []));
+        this.activitySelectOptions = computed(() => {
+            const graphTitleByName = new Map();
+            for (const r of this.activities()) {
+                const n = r.name?.trim();
+                if (!n) {
+                    continue;
+                }
+                const ext = r.extensions;
+                const dt = ext && typeof ext['displayTitle'] === 'string' ? ext['displayTitle'].trim() : '';
+                if (dt) {
+                    graphTitleByName.set(n, dt);
+                }
+            }
+            const byValue = new Map();
+            for (const x of this.activitySelectItems()) {
+                byValue.set(x.value, {
+                    value: x.value,
+                    description: x.description,
+                    icon: x.icon,
+                    text: graphTitleByName.get(x.value) ?? x.text,
+                    categoryId: x.categoryId,
+                    categoryTitle: x.categoryTitle,
+                });
+            }
+            for (const r of this.activities()) {
+                const n = r.name?.trim();
+                if (!n || byValue.has(n)) {
+                    continue;
+                }
+                byValue.set(n, {
+                    value: n,
+                    description: '',
+                    icon: '',
+                    text: graphTitleByName.get(n) ?? n,
+                    categoryId: 'uncategorized',
+                    categoryTitle: 'Uncategorized',
+                });
+            }
+            return [...byValue.values()].sort((a, b) => a.text.localeCompare(b.text));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activitySelectOptions" }] : /* istanbul ignore next */ []));
+        this.paletteItems = computed(() => this.activitySelectOptions().map((x) => ({
+            type: x.value,
+            title: x.text,
+            shape: 'rounded-rectangle',
+            size: { width: 230, height: 90 },
+            inboundPorts: [{ side: 'left', ratio: 0.5, key: 'in', label: 'in' }],
+            outboundPorts: [{ side: 'right', ratio: 0.5, key: 'Done', label: 'Done' }],
+            data: { category: 'activity-definition' },
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paletteItems" }] : /* istanbul ignore next */ []));
+        this.paletteGroups = computed(() => {
+            const groupsById = new Map();
+            for (const item of this.activitySelectOptions()) {
+                const groupId = item.categoryId.trim() || 'uncategorized';
+                const groupTitle = item.categoryTitle.trim() || 'Uncategorized';
+                const existing = groupsById.get(groupId);
+                const paletteItem = {
+                    type: item.value,
+                    title: item.text,
+                    description: item.description,
+                    icon: item.icon,
+                    shape: 'rounded-rectangle',
+                    size: { width: 230, height: 90 },
+                    inboundPorts: [{ side: 'left', ratio: 0.5, key: 'in', label: 'in' }],
+                    outboundPorts: [{ side: 'right', ratio: 0.5, key: 'Done', label: 'Done' }],
+                    data: { category: 'activity-definition' },
+                };
+                if (existing) {
+                    existing.items.push(paletteItem);
+                    continue;
+                }
+                groupsById.set(groupId, { id: groupId, title: groupTitle, items: [paletteItem] });
+            }
+            return [...groupsById.values()]
+                .map((group) => ({
+                ...group,
+                items: [...group.items].sort((a, b) => a.title.localeCompare(b.title)),
+            }))
+                .sort((a, b) => a.title.localeCompare(b.title));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paletteGroups" }] : /* istanbul ignore next */ []));
+        this.filteredPaletteGroups = computed(() => {
+            const searchTerm = this.paletteSearchTerm().trim().toLowerCase();
+            const groups = this.paletteGroups();
+            if (!searchTerm) {
+                return groups;
+            }
+            return groups
+                .map((group) => {
+                const items = group.items.filter((item) => {
+                    const title = item.title?.toLowerCase() ?? '';
+                    const description = item.description?.toLowerCase() ?? '';
+                    return title.includes(searchTerm) || description.includes(searchTerm);
+                });
+                return { ...group, items };
+            })
+                .filter((group) => group.items.length > 0);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredPaletteGroups" }] : /* istanbul ignore next */ []));
+        this.designerModel = computed(() => {
+            const rows = this.activities();
+            const conns = this.connections();
+            const cache = this.activityDefCache();
+            const layout = this.designerLayout();
+            const nodes = rows.map((r, i) => {
+                const def = r.name ? cache[r.name] : undefined;
+                const outcomes = this.buildOutcomeRows(r.id, r, def);
+                const L = layout[r.id];
+                const pos = L ? { x: L.x, y: L.y } : this.gridFallbackPosition(i);
+                const size = L ? { width: L.width, height: L.height } : { width: DEFAULT_NODE_W, height: DEFAULT_NODE_H };
+                return {
+                    id: r.id,
+                    type: r.name,
+                    title: this.resolveNodeTitle(r),
+                    shape: 'rounded-rectangle',
+                    size,
+                    position: pos,
+                    color: this.startActivityId() === r.id ? 'success' : 'secondary',
+                    inboundPorts: [
+                        { id: `${r.id}:in`, kind: 'inbound', side: 'left', ratio: 0.5, key: 'in', label: 'in' },
+                    ],
+                    outboundPorts: outcomes.map((o, oi, arr) => ({
+                        id: `${r.id}:out:${o.port}`,
+                        kind: 'outbound',
+                        side: 'right',
+                        ratio: arr.length === 1 ? 0.5 : (oi + 1) / (arr.length + 1),
+                        key: o.port,
+                        label: o.label,
+                    })),
+                };
+            });
+            const outPortByKey = new Map();
+            for (const n of nodes) {
+                for (const p of n.outboundPorts) {
+                    outPortByKey.set(`${n.id}:${portKey(p.key)}`, p.id);
+                }
+            }
+            const connectors = conns
+                .map((c, i) => {
+                const sourcePortKey = portKey(c.source.port);
+                const sourcePortId = outPortByKey.get(`${c.source.activtyName}:${sourcePortKey}`);
+                if (!sourcePortId) {
+                    return null;
+                }
+                return {
+                    id: `c-${i}-${c.source.activtyName}-${c.target.activtyName}-${sourcePortKey}`,
+                    sourceNodeId: c.source.activtyName,
+                    sourcePortId,
+                    targetNodeId: c.target.activtyName,
+                    targetPortId: `${c.target.activtyName}:in`,
+                };
+            })
+                .filter((x) => x != null);
+            return { nodes, connectors };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "designerModel" }] : /* istanbul ignore next */ []));
+        this.selectedNodeInfoRows = computed(() => {
+            const selected = this.selectedRow();
+            if (!selected) {
+                return [];
+            }
+            const selectOption = this.activitySelectOptions().find((x) => x.value === selected.name);
+            return [
+                { title: 'Title', content: this.resolveNodeTitle(selected) || '---' },
+                { title: 'Type', content: selected.name || '---' },
+                { title: 'Id', content: selected.id || '---' },
+                { title: 'Category', content: selectOption?.categoryTitle || '---' },
+                { title: 'Inputs', content: `${Object.keys(selected.inputs ?? {}).length}` },
+                { title: 'Outcomes', content: `${this.selectedActivityOutcomeRows().length}` },
+            ];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedNodeInfoRows" }] : /* istanbul ignore next */ []));
+        this.workflowDetailPanelCopy = signal({
+            panelTitle: 'Activity details',
+            emptyMessage: 'Select a node to see details.',
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "workflowDetailPanelCopy" }] : /* istanbul ignore next */ []));
+        this.workflowDetailPanelHeader = computed(() => {
+            const selected = this.selectedRow();
+            if (selected == null) {
+                return null;
+            }
+            const selectOption = this.activitySelectOptions().find((x) => x.value === selected.name);
+            const iconGlyph = selectOption?.icon?.trim();
+            return {
+                primaryTitle: this.resolveNodeTitle(selected) || '---',
+                icon: iconGlyph ? { iconClass: `fa-light fa-lg fa-fw ${iconGlyph}` } : undefined,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "workflowDetailPanelHeader" }] : /* istanbul ignore next */ []));
+        this.workflowDetailPanelRows = computed(() => {
+            if (this.selectedRow() == null) {
+                return [];
+            }
+            return this.selectedNodeInfoRows().map((row) => ({
+                label: row.title,
+                value: row.content,
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "workflowDetailPanelRows" }] : /* istanbul ignore next */ []));
+        this.workflowDetailPanelEmptyState = computed(() => {
+            if (this.selectedRow() != null) {
+                return null;
+            }
+            const copy = this.workflowDetailPanelCopy();
+            return {
+                primaryTitle: copy.panelTitle,
+                message: copy.emptyMessage,
+                icon: { iconClass: 'fa-solid fa-lg fa-fw fa-diagram-project' },
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "workflowDetailPanelEmptyState" }] : /* istanbul ignore next */ []));
+        let previousRootId = undefined;
+        effect(() => {
+            const ctx = this.rootContext();
+            const currentId = ctx != null && typeof ctx === 'object' ? ctx['id'] : undefined;
+            if (currentId !== previousRootId) {
+                previousRootId = currentId;
+                untracked(() => this.hydrateFromServerContext(ctx));
+            }
+        });
+        effect(() => {
+            const ctx = this.context();
+            const id = typeof ctx['id'] === 'string' ? ctx['id'] : undefined;
+            const arranged = this.layoutArrangedFlag();
+            const activityCount = this.activities().length;
+            if (!id || arranged || activityCount === 0) {
+                return;
+            }
+            untracked(() => void this.maybeApplyInitialArrangedLayout());
+        });
+        this.destroyRef.onDestroy(() => this.clearAutoSaveTimer());
+    }
+    //#endregion
+    //#region ---- Page chrome / commands ----
+    hasUnsavedChanges() {
+        return this.isDirty();
+    }
+    // override async getPrimaryMenuItems(): Promise<AXPActionMenuItem[]> {
+    //   const addTitle =
+    //     (await this.translateService.translateAsync(
+    //       '@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.add-step',
+    //     )) || 'Add step';
+    //   const discardTitle = (await this.translateService.translateAsync('@general:actions.discard.title')) || 'Discard';
+    //   const saveTitle = (await this.translateService.translateAsync('@general:actions.save.title')) || 'Save';
+    //   const addAction: AXPLayoutDetailsViewAction = {
+    //     title: addTitle,
+    //     icon: 'fa-light fa-plus',
+    //     zone: 'header',
+    //     priority: 'primary',
+    //     color: 'primary',
+    //     command: { name: ADD_STEP_COMMAND, options: {} },
+    //   };
+    //   const discardAction: AXPLayoutDetailsViewAction = {
+    //     title: discardTitle,
+    //     icon: 'fa-light fa-rotate-left',
+    //     zone: 'footer',
+    //     priority: 'secondary',
+    //     color: 'default',
+    //     visible: this.isDirty(),
+    //     command: { name: DISCARD_COMMAND, options: {} },
+    //   };
+    //   const saveAction: AXPLayoutDetailsViewAction = {
+    //     title: saveTitle,
+    //     icon: 'fa-light fa-floppy-disk',
+    //     zone: 'footer',
+    //     priority: 'primary',
+    //     color: 'primary',
+    //     visible: this.isDirty(),
+    //     command: { name: WORKFLOW_DEFINITION_ACTIVITIES_SAVE_COMMAND, options: {} },
+    //   };
+    //   return [addAction, discardAction, saveAction];
+    // }
+    async getSecondaryMenuItems() {
+        const title = await this.mlResolver.translateAsync(ARRANGE_LAYOUT_ACTION_TITLE_KEY);
+        return [
+            {
+                title,
+                icon: 'fa-light fa-sitemap',
+                command: { name: ARRANGE_LAYOUT_COMMAND, options: {} },
+                disabled: this.activities().length === 0,
+            },
+        ];
+    }
+    execute(command) {
+        if (command.name === DISCARD_COMMAND) {
+            this.applyBaselineGraph();
+            return;
+        }
+        if (command.name === ADD_STEP_COMMAND) {
+            this.addStep();
+            return;
+        }
+        if (command.name === ARRANGE_LAYOUT_COMMAND) {
+            this.applyArrangedLayout();
+            return;
+        }
+        if (command.name === WORKFLOW_DEFINITION_ACTIVITIES_SAVE_COMMAND) {
+            return this.handleSaveExecute();
+        }
+    }
+    //#endregion
+    //#region ---- Designer handlers ----
+    onDesignerModelChange(model) {
+        const previousNodeCount = this.activities().length;
+        const oldById = new Map(this.activities().map((x) => [x.id, x]));
+        const nextRows = model.nodes.map((n) => {
+            const prev = oldById.get(n.id);
+            const title = n.title?.trim();
+            const extensions = { ...(prev?.extensions ?? {}) };
+            if (title) {
+                extensions['displayTitle'] = title;
+            }
+            else {
+                delete extensions['displayTitle'];
+            }
+            return {
+                id: n.id,
+                name: n.type?.trim() ? n.type : (prev?.name ?? ''),
+                inputs: { ...(prev?.inputs ?? {}) },
+                ...(Object.keys(extensions).length > 0 ? { extensions } : {}),
+            };
+        });
+        const outgoingByPortId = new Map();
+        for (const n of model.nodes) {
+            for (const p of n.outboundPorts) {
+                outgoingByPortId.set(p.id, portKey(p.key));
+            }
+        }
+        const nextConnections = [];
+        for (const c of model.connectors) {
+            const pk = outgoingByPortId.get(c.sourcePortId);
+            if (!pk) {
+                continue;
+            }
+            nextConnections.push({
+                source: { activtyName: c.sourceNodeId, port: pk === 'Done' ? null : pk },
+                target: { activtyName: c.targetNodeId, port: null },
+            });
+        }
+        this.activities.set(nextRows);
+        this.connections.set(nextConnections);
+        if (!nextRows.some((x) => x.id === this.startActivityId())) {
+            this.startActivityId.set(nextRows[0]?.id ?? '');
+        }
+        if (!nextRows.some((x) => x.id === this.selectedRowId())) {
+            this.selectedRowId.set(nextRows[0]?.id ?? null);
+        }
+        for (const r of nextRows) {
+            void this.ensureDefinition(r.name);
+        }
+        this.syncDesignerLayoutFromModel(model);
+        void this.refreshPropertyViewer();
+        this.recomputeDirty();
+        if (nextRows.length > previousNodeCount) {
+            this.closePalette();
+        }
+    }
+    onDesignerActivationChange(a) {
+        if (a?.kind !== 'node') {
+            return;
+        }
+        this.selectedRowId.set(a.id);
+        void this.refreshPropertyViewer();
+    }
+    //#region ---- Context Menu ----
+    onDesignerNodeContextMenu(payload) {
+        const anchor = payload.event.currentTarget instanceof HTMLElement
+            ? payload.event.currentTarget
+            : payload.event.target instanceof HTMLElement
+                ? payload.event.target.closest('.axp-workflow-designer__node')
+                : null;
+        if (!(anchor instanceof HTMLElement)) {
+            return;
+        }
+        void this.openWorkflowContextMenuAt(payload.event.clientX, payload.event.clientY, anchor, [
+            ADD_ACTIVITY_ACTION_ID,
+            TOGGLE_DETAIL_PANEL_ACTION_ID,
+        ]);
+    }
+    onDesignerSurfaceContextMenu(event) {
+        if (event.target instanceof HTMLElement && event.target.closest('.axp-workflow-designer__node')) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const anchor = event.target instanceof HTMLElement
+            ? (event.target.closest('.axp-workflow-designer__surface') ?? event.target)
+            : null;
+        if (!(anchor instanceof HTMLElement)) {
+            return;
+        }
+        void this.openWorkflowContextMenuAt(event.clientX, event.clientY, anchor, [ADD_ACTIVITY_ACTION_ID]);
+    }
+    handleWorkflowContextMenuItemClick(e) {
+        if (e.item.name === TOGGLE_DETAIL_PANEL_ACTION_ID) {
+            this.toggleInfoPanel();
+            return;
+        }
+        if (e.item.name === ADD_ACTIVITY_ACTION_ID) {
+            this.openPalette();
+        }
+    }
+    openPalette() {
+        this.isPaletteOpen.set(true);
+        this.paletteSearchTerm.set('');
+    }
+    closePalette() {
+        this.isPaletteOpen.set(false);
+    }
+    async openWorkflowContextMenuAt(clientX, clientY, targetElement, actionIds) {
+        const items = [];
+        for (const actionId of actionIds) {
+            const item = await this.buildWorkflowContextMenuItem(actionId);
+            if (item != null) {
+                items.push(item);
+            }
+        }
+        if (items.length === 0) {
+            return;
+        }
+        const menu = this.contextMenu();
+        if (menu == null) {
+            return;
+        }
+        this.ngZone.run(() => {
+            const openingEvent = {
+                sender: menu,
+                canceled: false,
+                targetElement,
+                items,
+            };
+            menu.showAt({ x: clientX, y: clientY }, targetElement, openingEvent);
+        });
+    }
+    async buildWorkflowContextMenuItem(actionId) {
+        if (actionId === ADD_ACTIVITY_ACTION_ID) {
+            return {
+                name: ADD_ACTIVITY_ACTION_ID,
+                text: (await this.translateService.translateAsync(ADD_ACTIVITY_ACTION_TITLE_KEY)) ?? 'Add Activity',
+                icon: 'fa-light fa-plus',
+            };
+        }
+        if (actionId === TOGGLE_DETAIL_PANEL_ACTION_ID) {
+            return {
+                name: TOGGLE_DETAIL_PANEL_ACTION_ID,
+                text: (await this.translateService.translateAsync(TOGGLE_DETAIL_PANEL_ACTION_TITLE_KEY)) ?? 'Toggle Details Panel',
+                icon: 'fa-light fa-sidebar',
+            };
+        }
+        return null;
+    }
+    //#endregion
+    onBackgroundPatternChange(event) {
+        const value = event.target.value;
+        if (value === 'line' || value === 'dots') {
+            this.backgroundPattern.set(value);
+        }
+    }
+    onDesignerZoomChange(value) {
+        this.zoomLevel.set(this.clampZoomLevel(value));
+    }
+    onPaletteSearchChange(event) {
+        this.paletteSearchTerm.set(event?.value ?? '');
+    }
+    zoomIn() {
+        this.workflowDesignerRef()?.zoomIn();
+        this.zoomLevel.set(this.clampZoomLevel(this.workflowDesignerRef()?.getZoomLevel() ?? this.zoomLevel()));
+    }
+    zoomOut() {
+        this.workflowDesignerRef()?.zoomOut();
+        this.zoomLevel.set(this.clampZoomLevel(this.workflowDesignerRef()?.getZoomLevel() ?? this.zoomLevel()));
+    }
+    zoomReset() {
+        this.workflowDesignerRef()?.zoomReset();
+        this.zoomLevel.set(this.clampZoomLevel(this.workflowDesignerRef()?.getZoomLevel() ?? 100));
+    }
+    toggleFullscreen() {
+        const next = !this.isFullscreen();
+        this.isFullscreen.set(next);
+        const doc = globalThis.document;
+        if (!doc) {
+            return;
+        }
+        if (next) {
+            void doc.documentElement.requestFullscreen?.();
+            return;
+        }
+        void doc.exitFullscreen?.();
+    }
+    toggleInfoPanel() {
+        this.isInfoPanelOpen.update((open) => !open);
+    }
+    onStartActivityChange(event) {
+        this.startActivityId.set(event.value != null ? String(event.value) : '');
+        this.recomputeDirty();
+    }
+    onSelectedActivityTypeChange(event) {
+        const row = this.selectedRow();
+        if (!row) {
+            return;
+        }
+        const name = event.value != null ? String(event.value) : '';
+        const rowId = row.id;
+        this.activities.update((rows) => rows.map((r) => (r.id !== rowId ? r : { ...r, name, inputs: {}, extensions: undefined })));
+        void this.ensureDefinition(name);
+        void this.activityDefService.getActivityByName(name).then((def) => {
+            const rowNow = this.activities().find((r) => r.id === rowId) ?? null;
+            const allowed = new Set(this.buildOutcomeRows(rowId, rowNow, def).map((o) => o.port));
+            this.pruneOutgoingConnections(rowId, allowed);
+            void this.refreshPropertyViewer();
+            this.recomputeDirty();
+        });
+        void this.refreshPropertyViewer();
+        this.recomputeDirty();
+    }
+    onViewerChanged(ev) {
+        if (ev.mode === 'init') {
+            return;
+        }
+        const id = this.selectedRowId();
+        if (id == null || ev.values == null) {
+            return;
+        }
+        const inputs = ev.values.inputs ?? {};
+        this.activities.update((rows) => rows.map((r) => (r.id === id ? { ...r, inputs: { ...inputs } } : r)));
+        const sel = this.activities().find((r) => r.id === id);
+        if (sel?.name?.trim()) {
+            void this.activityDefService.getActivityByName(sel.name).then((def) => {
+                this.selectedActivityOutcomeRows.set(this.buildOutcomeRows(sel.id, sel, def));
+            });
+        }
+        this.recomputeDirty();
+    }
+    //#endregion
+    //#region ---- Graph persistence ----
+    gridFallbackPosition(index) {
+        return { x: 80 + (index % 4) * 320, y: 80 + Math.floor(index / 4) * 190 };
+    }
+    clampZoomLevel(value) {
+        if (Number.isNaN(value)) {
+            return 100;
+        }
+        return Math.max(20, Math.min(300, Math.round(value)));
+    }
+    initDesignerLayoutFromGraph(graph) {
+        const activities = graph?.activities ?? [];
+        const raw = graph?.designer?.nodes;
+        const next = {};
+        if (raw != null) {
+            for (const [id, v] of Object.entries(raw)) {
+                if (v != null && typeof v.x === 'number' && typeof v.y === 'number') {
+                    next[id] = {
+                        x: v.x,
+                        y: v.y,
+                        width: typeof v.width === 'number' && v.width > 0 ? v.width : DEFAULT_NODE_W,
+                        height: typeof v.height === 'number' && v.height > 0 ? v.height : DEFAULT_NODE_H,
+                    };
+                }
+            }
+        }
+        activities.forEach((a, i) => {
+            if (!next[a.id]) {
+                const p = this.gridFallbackPosition(i);
+                next[a.id] = { x: p.x, y: p.y, width: DEFAULT_NODE_W, height: DEFAULT_NODE_H };
+            }
+        });
+        this.designerLayout.set(next);
+    }
+    syncDesignerLayoutFromModel(model) {
+        const next = {};
+        for (const n of model.nodes) {
+            next[n.id] = {
+                x: n.position.x,
+                y: n.position.y,
+                width: n.size.width > 0 ? n.size.width : DEFAULT_NODE_W,
+                height: n.size.height > 0 ? n.size.height : DEFAULT_NODE_H,
+            };
+        }
+        this.designerLayout.set(next);
+    }
+    /** Updates persisted node coordinates only (no activity/connection graph rewrite). */
+    applyArrangedLayout() {
+        if (this.activities().length === 0) {
+            return;
+        }
+        const startId = this.startActivityId().trim();
+        const arranged = arrangeWorkflowDiagram(this.designerModel(), {
+            startNodeId: startId.length > 0 ? startId : undefined,
+            gridSize: DESIGNER_GRID_SIZE,
+        });
+        this.syncDesignerLayoutFromModel(arranged);
+        this.layoutArrangedFlag.set(true);
+        this.recomputeDirty();
+    }
+    buildDesignerNodesForSave() {
+        const layout = this.designerLayout();
+        const out = {};
+        for (const [id, L] of Object.entries(layout)) {
+            out[id] = {
+                x: L.x,
+                y: L.y,
+                nodeId: id,
+                width: L.width,
+                height: L.height,
+            };
+        }
+        return out;
+    }
+    buildCurrentGraph() {
+        const base = this.baselineGraph();
+        const layoutArranged = this.layoutArrangedFlag() || isDesignerLayoutArranged(base ?? undefined);
+        return {
+            startActivityId: this.startActivityId(),
+            activities: this.activities().map((r) => instanceFromRow(r)),
+            connections: cloneDeep(this.connections()),
+            designer: {
+                ...base?.designer,
+                layoutArranged: layoutArranged ? true : undefined,
+                nodes: this.buildDesignerNodesForSave(),
+            },
+        };
+    }
+    recomputeDirty() {
+        this.isDirty.set(!isEqual(graphFingerprint(this.buildCurrentGraph()), graphFingerprint(this.baselineGraph())));
+        this.recompute();
+        this.scheduleAutoSave();
+    }
+    clearAutoSaveTimer() {
+        if (this.autoSaveTimer != null) {
+            clearTimeout(this.autoSaveTimer);
+            this.autoSaveTimer = null;
+        }
+    }
+    /** Debounced persist for designer moves, connections, arrange, and property edits. */
+    scheduleAutoSave() {
+        if (this.suppressAutoSave || !this.isDirty()) {
+            return;
+        }
+        const ctx = this.context();
+        const id = typeof ctx['id'] === 'string' ? ctx['id'] : undefined;
+        if (!id) {
+            return;
+        }
+        this.clearAutoSaveTimer();
+        this.autoSaveTimer = setTimeout(() => {
+            this.autoSaveTimer = null;
+            void this.runAutoSave();
+        }, AUTO_SAVE_DEBOUNCE_MS);
+    }
+    async runAutoSave() {
+        if (this.suppressAutoSave || !this.isDirty()) {
+            return;
+        }
+        if (this.autoSaveInFlight) {
+            this.autoSavePending = true;
+            return;
+        }
+        this.autoSaveInFlight = true;
+        try {
+            await this.handleSaveExecute({ silent: true });
+        }
+        finally {
+            this.autoSaveInFlight = false;
+            if (this.autoSavePending) {
+                this.autoSavePending = false;
+                if (this.isDirty()) {
+                    this.scheduleAutoSave();
+                }
+            }
+        }
+    }
+    async handleSaveExecute(options) {
+        this.clearAutoSaveTimer();
+        const ctx = this.context();
+        const id = typeof ctx['id'] === 'string' ? ctx['id'] : undefined;
+        if (!id) {
+            return {
+                success: false,
+                message: { text: await this.translateService.translateAsync('@general:messages.entity.invalid-data') },
+            };
+        }
+        const graph = this.buildCurrentGraph();
+        const result = await this.commandService.execute(WORKFLOW_DEFINITION_ACTIVITIES_SAVE_COMMAND, { id, graph, silent: options?.silent });
+        const execResult = (result ?? { success: false });
+        if (execResult.success) {
+            this.baselineGraph.set(cloneDeep(graph));
+            this.isDirty.set(false);
+            if (!options?.silent) {
+                this.recompute();
+            }
+        }
+        return execResult;
+    }
+    hydrateFromServerContext(ctx) {
+        this.clearAutoSaveTimer();
+        this.suppressAutoSave = true;
+        try {
+            const graph = ctx?.['graph'] ?? emptyGraph();
+            this.baselineGraph.set(cloneDeep(graph));
+            this.layoutArrangedFlag.set(isDesignerLayoutArranged(graph));
+            this.initDesignerLayoutFromGraph(graph);
+            this.activities.set((graph.activities ?? []).map((a) => rowFromInstance(a)));
+            this.connections.set(cloneDeep(graph.connections ?? []));
+            let start = graph.startActivityId ?? '';
+            const rows = this.activities();
+            if (!start && rows.length > 0) {
+                start = rows[0].id;
+            }
+            this.startActivityId.set(start);
+            this.selectedRowId.set(rows[0]?.id ?? null);
+            this.isDirty.set(false);
+            void this.ensureActivityCatalogLoaded();
+            for (const r of rows) {
+                void this.ensureDefinition(r.name);
+            }
+            void this.refreshPropertyViewer();
+        }
+        finally {
+            this.suppressAutoSave = false;
+        }
+    }
+    /**
+     * Runs auto-arrange once per workflow definition, then persists `graph.designer.layoutArranged`.
+     * Definitions that already have saved node positions are marked arranged without moving nodes.
+     */
+    async maybeApplyInitialArrangedLayout() {
+        if (this.layoutArrangedFlag() || this.initialLayoutArrangeInFlight) {
+            return;
+        }
+        const ctx = this.context();
+        const id = typeof ctx['id'] === 'string' ? ctx['id'] : undefined;
+        if (!id) {
+            return;
+        }
+        if (this.activities().length === 0) {
+            return;
+        }
+        this.initialLayoutArrangeInFlight = true;
+        this.suppressAutoSave = true;
+        try {
+            const base = this.baselineGraph();
+            if (graphHasPersistedDesignerLayout(base ?? undefined)) {
+                this.layoutArrangedFlag.set(true);
+                this.recomputeDirty();
+                if (this.isDirty()) {
+                    await this.handleSaveExecute({ silent: true });
+                }
+                return;
+            }
+            this.applyArrangedLayout();
+            if (this.isDirty()) {
+                await this.handleSaveExecute({ silent: true });
+            }
+        }
+        finally {
+            this.suppressAutoSave = false;
+            this.initialLayoutArrangeInFlight = false;
+        }
+    }
+    applyBaselineGraph() {
+        this.clearAutoSaveTimer();
+        this.suppressAutoSave = true;
+        try {
+            const base = this.baselineGraph();
+            this.layoutArrangedFlag.set(isDesignerLayoutArranged(base ?? undefined));
+            this.initDesignerLayoutFromGraph(base ?? undefined);
+            const rows = (base?.activities ?? []).map((a) => rowFromInstance(a));
+            this.activities.set(rows);
+            this.connections.set(cloneDeep(base?.connections ?? []));
+            let start = base?.startActivityId ?? '';
+            if (!start && rows.length > 0) {
+                start = rows[0].id;
+            }
+            this.startActivityId.set(start);
+            this.selectedRowId.set(rows[0]?.id ?? null);
+            this.isDirty.set(false);
+            for (const r of rows) {
+                void this.ensureDefinition(r.name);
+            }
+            void this.refreshPropertyViewer();
+            this.recompute();
+        }
+        finally {
+            this.suppressAutoSave = false;
+        }
+    }
+    addStep() {
+        const catalog = this.activitySelectOptions();
+        const defaultName = catalog[0]?.value ?? '';
+        const row = { id: AXPDataGenerator.uuid(), name: defaultName, inputs: {} };
+        this.activities.update((list) => [...list, row]);
+        const idx = this.activities().length - 1;
+        const p = this.gridFallbackPosition(idx);
+        this.designerLayout.update((L) => ({
+            ...L,
+            [row.id]: { x: p.x, y: p.y, width: DEFAULT_NODE_W, height: DEFAULT_NODE_H },
+        }));
+        this.selectedRowId.set(row.id);
+        if (!this.startActivityId() && row.id) {
+            this.startActivityId.set(row.id);
+        }
+        void this.ensureDefinition(row.name);
+        void this.refreshPropertyViewer();
+        this.recomputeDirty();
+    }
+    //#endregion
+    //#region ---- Outcomes & labels ----
+    formatActivityStepLabel(r) {
+        const shortId = r.id.length >= 8 ? r.id.slice(0, 8) : r.id;
+        const typePart = r.name?.trim() ? r.name : '…';
+        return `${typePart} (${shortId})`;
+    }
+    resolveNodeTitle(r) {
+        const ext = r.extensions;
+        const display = ext && typeof ext['displayTitle'] === 'string' ? ext['displayTitle'].trim() : '';
+        if (display) {
+            return display;
+        }
+        return this.activitySelectOptions().find((x) => x.value === r.name)?.text ?? r.name;
+    }
+    outcomeRowsFromRawDefinition(raw) {
+        if (raw == null) {
+            return [];
+        }
+        let items = [];
+        if (Array.isArray(raw)) {
+            items = raw;
+        }
+        else if (typeof raw === 'string' && raw.trim().length > 0) {
+            try {
+                const parsed = JSON.parse(raw);
+                items = Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        else {
+            return [];
+        }
+        const rows = [];
+        for (const item of items) {
+            if (typeof item === 'string' && item.trim()) {
+                rows.push({ port: item, label: item });
+                continue;
+            }
+            if (item != null && typeof item === 'object' && !Array.isArray(item)) {
+                const o = item;
+                const portVal = o['name'] ?? o['value'] ?? o['outcome'] ?? o['port'];
+                if (typeof portVal !== 'string' || !portVal.trim()) {
+                    continue;
+                }
+                const titleRaw = o['title'];
+                let label = portVal;
+                if (typeof titleRaw === 'string' && titleRaw.trim()) {
+                    label = titleRaw;
+                }
+                else if (titleRaw != null && typeof titleRaw === 'object') {
+                    label = this.mlResolver.resolve(titleRaw) ?? portVal;
+                }
+                rows.push({ port: portVal, label });
+            }
+        }
+        return rows;
+    }
+    outcomePortsFromConnections(activityId) {
+        const ports = new Set();
+        for (const c of this.connections()) {
+            if (c.source.activtyName === activityId) {
+                ports.add(portKey(c.source.port));
+            }
+        }
+        return [...ports];
+    }
+    outcomePortsFromTaskActions(inputs) {
+        const actions = inputs['actions'];
+        if (actions == null) {
+            return [];
+        }
+        let root = actions;
+        if (typeof actions === 'string' && actions.trim().length > 0) {
+            try {
+                root = JSON.parse(actions);
+            }
+            catch {
+                return [];
+            }
+        }
+        if (typeof root !== 'object' || root === null) {
+            return [];
+        }
+        const names = [];
+        const obj = root;
+        for (const key of ['suffix', 'prefix']) {
+            const list = obj[key];
+            if (!Array.isArray(list)) {
+                continue;
+            }
+            for (const entry of list) {
+                if (!entry || typeof entry !== 'object') {
+                    continue;
+                }
+                const cmd = entry['command'];
+                if (cmd && typeof cmd === 'object') {
+                    const n = cmd['name'];
+                    if (typeof n === 'string' && n.trim()) {
+                        names.push(n);
+                    }
+                }
+            }
+        }
+        return names;
+    }
+    buildOutcomeRows(activityId, row, def) {
+        const map = new Map();
+        for (const o of this.outcomeRowsFromRawDefinition(def?.outcomes)) {
+            map.set(o.port, o);
+        }
+        for (const p of this.outcomePortsFromConnections(activityId)) {
+            if (!map.has(p)) {
+                map.set(p, { port: p, label: p });
+            }
+        }
+        if (row) {
+            for (const p of this.outcomePortsFromTaskActions(row.inputs)) {
+                if (!map.has(p)) {
+                    map.set(p, { port: p, label: p });
+                }
+            }
+        }
+        if (map.size === 0) {
+            map.set('Done', { port: 'Done', label: 'Done' });
+        }
+        return [...map.values()].sort((a, b) => a.port.localeCompare(b.port));
+    }
+    pruneOutgoingConnections(sourceActivityId, allowedPorts) {
+        this.connections.update((list) => list.filter((c) => {
+            if (c.source.activtyName !== sourceActivityId) {
+                return true;
+            }
+            return allowedPorts.has(portKey(c.source.port));
+        }));
+    }
+    //#endregion
+    //#region ---- Catalog & property viewer ----
+    async ensureActivityCatalogLoaded() {
+        if (this.activityCatalogLoaded()) {
+            return;
+        }
+        try {
+            const data = this.entityService
+                .withEntity(RootConfig.module.name, RootConfig.entities.activityDefinition.name)
+                .data();
+            const res = (await data.query({ skip: 0, take: 1000 }));
+            const items = (res.items ?? [])
+                .map((row) => {
+                const n = row.name;
+                const typeFallback = row.type;
+                const valueKey = typeof n === 'string' && n.trim()
+                    ? n.trim()
+                    : typeof n === 'number'
+                        ? String(n)
+                        : typeof typeFallback === 'string' && typeFallback.trim()
+                            ? typeFallback.trim()
+                            : typeof typeFallback === 'number'
+                                ? String(typeFallback)
+                                : '';
+                if (!valueKey) {
+                    return null;
+                }
+                const titleRaw = row.title;
+                let text = valueKey;
+                if (typeof titleRaw === 'string' && titleRaw.trim()) {
+                    text = titleRaw.trim();
+                }
+                else if (titleRaw != null && typeof titleRaw === 'object') {
+                    text = this.mlResolver.resolve(titleRaw) ?? valueKey;
+                }
+                const descriptionRaw = row.description;
+                let description = descriptionRaw;
+                if (typeof descriptionRaw === 'string' && descriptionRaw.trim()) {
+                    description = descriptionRaw.trim();
+                }
+                else if (descriptionRaw != null && typeof descriptionRaw === 'object') {
+                    description = this.mlResolver.resolve(descriptionRaw) ?? descriptionRaw;
+                }
+                const categoryRaw = row.category;
+                const categoryTitleResolved = categoryRaw?.title != null
+                    ? (this.mlResolver.resolve(categoryRaw.title) ?? categoryRaw.name)
+                    : 'Uncategorized';
+                const icon = row.icon;
+                return {
+                    value: valueKey,
+                    text: String(text).trim() || valueKey,
+                    description: description,
+                    categoryId: categoryRaw?.id ?? 'uncategorized',
+                    categoryTitle: categoryTitleResolved,
+                    icon: icon,
+                };
+            })
+                .filter((x) => x != null);
+            items.sort((a, b) => a.text.localeCompare(b.text));
+            this.activitySelectItems.set(items);
+        }
+        catch {
+            this.activitySelectItems.set([]);
+        }
+        finally {
+            this.activityCatalogLoaded.set(true);
+        }
+    }
+    async ensureDefinition(name) {
+        if (!name?.trim()) {
+            return;
+        }
+        if (this.activityDefCache()[name]) {
+            return;
+        }
+        const def = await this.activityDefService.getActivityByName(name);
+        if (def) {
+            this.activityDefCache.update((c) => ({ ...c, [name]: def }));
+        }
+    }
+    async refreshPropertyViewer() {
+        const row = this.selectedRow();
+        if (row == null || row.name.trim() === '') {
+            this.viewerTabs.set([]);
+            this.selectedActivityOutcomeRows.set([]);
+            setTimeout(() => this.propertyViewerRef()?.initializeContext({ inputs: {} }), 0);
+            return;
+        }
+        const def = await this.activityDefService.getActivityByName(row.name);
+        if (def) {
+            this.activityDefCache.update((c) => ({ ...c, [row.name]: def }));
+        }
+        const rowLatest = this.activities().find((r) => r.id === row.id) ?? row;
+        this.selectedActivityOutcomeRows.set(this.buildOutcomeRows(row.id, rowLatest, def));
+        const inputProps = normalizeActivityDefinitionInputs(def?.inputs);
+        const group = { name: 'activity-inputs', title: 'Inputs', order: 0 };
+        const widgetProps = inputProps.map((p, index) => mapAXPPropertyToWidgetProperty(p, {
+            group,
+            order: index,
+            valuePathPrefix: 'inputs',
+            resolveTitle: (prop) => typeof prop.title === 'string' ? prop.title : (this.mlResolver.resolve(prop.title) ?? prop.name),
+            resolveDescription: (prop) => prop.description === undefined
+                ? undefined
+                : typeof prop.description === 'string'
+                    ? prop.description
+                    : this.mlResolver.resolve(prop.description),
+        }));
+        this.viewerTabs.set(buildPropertyViewerTabsFromProperties(widgetProps));
+        setTimeout(() => {
+            const current = this.activities().find((r) => r.id === row.id);
+            this.propertyViewerRef()?.initializeContext({ inputs: cloneDeep(current?.inputs ?? {}) });
+        }, 0);
+    }
+    //#endregion
+    //#region ---- Utilities ----
+    recompute() {
+        super.recompute();
+        const maybeLayout = this.hostPageLayout;
+        maybeLayout?.recompute?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMWorkflowDefinitionActivitiesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMWorkflowDefinitionActivitiesPageComponent, isStandalone: true, selector: "axm-workflow-definition-activities-page", inputs: { rootContext: { classPropertyName: "rootContext", publicName: "rootContext", isSignal: true, isRequired: false, transformFunction: null }, pageConfig: { classPropertyName: "pageConfig", publicName: "pageConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block; width: 100%; height: 100%;" }, providers: [{ provide: AXPPageLayoutBase, useExisting: AXMWorkflowDefinitionActivitiesPageComponent }], viewQueries: [{ propertyName: "propertyViewerRef", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }, { propertyName: "workflowDesignerRef", first: true, predicate: AXPWorkflowDesignerComponent, descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: AXContextMenuComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- <axp-page-toolbar>\n    <axp-layout-suffix>\n      <div class=\"axm-workflow-definition-activities__toolbar-group\">\n        <ax-button>\n          <ax-icon icon=\"fa-light fa-sliders\"></ax-icon>\n          <ax-dropdown-panel>\n            <div class=\"axm-workflow-definition-activities__appearance-panel\">\n              <label class=\"axm-workflow-definition-activities__pattern-label\" for=\"background-pattern-select\"\n                >Background Pattern</label\n              >\n              <select\n                id=\"background-pattern-select\"\n                class=\"axm-workflow-definition-activities__pattern-select\"\n                [value]=\"backgroundPattern()\"\n                (change)=\"onBackgroundPatternChange($event)\"\n              >\n                <option value=\"dots\">Dots</option>\n                <option value=\"line\">Lines</option>\n              </select>\n            </div>\n          </ax-dropdown-panel>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen() ? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleInfoPanel()\">\n          <ax-icon [icon]=\"isInfoPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info'\"></ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-page-toolbar> -->\n\n<div\n  class=\"axm-workflow-definition-activities\"\n  [class.axm-workflow-definition-activities--with-palette]=\"isPaletteOpen()\"\n  [class.axm-workflow-definition-activities--with-info]=\"isInfoPanelOpen()\"\n>\n  @if (isPaletteOpen()) {\n    <aside class=\"axm-workflow-definition-activities__palette\">\n      <div class=\"axm-workflow-definition-activities__palette-head\">\n        <div class=\"axm-workflow-definition-activities__palette-head-row\">\n          <h3 class=\"axm-workflow-definition-activities__title\">\n            {{\n              ('@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.add-step'\n                | translate\n                | async) ?? 'Activities'\n            }}\n          </h3>\n          <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"closePalette()\">\n            <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n          </ax-button>\n        </div>\n        <p class=\"axm-workflow-definition-activities__palette-sub\">\n          {{\n            ('@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.connections.hint'\n              | translate\n              | async) ?? ''\n          }}\n        </p>\n        <ax-search-box\n          class=\"axm-workflow-definition-activities__palette-search ax-sm\"\n          [value]=\"paletteSearchTerm()\"\n          (onValueChanged)=\"onPaletteSearchChange($event)\"\n          [placeholder]=\"'@general:search.title' | translate | async\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      <div class=\"axm-workflow-definition-activities__palette-list\">\n        <div class=\"axm-workflow-definition-activities__accordion-group\" axAccordionGroup [accordion]=\"false\">\n          @for (group of filteredPaletteGroups(); track group.id) {\n            @if (group.items.length > 0) {\n              <section\n                class=\"axm-workflow-definition-activities__accordion-item\"\n                axAccordionItem\n                [isCollapsed]=\"false\"\n                #acc=\"axAccordionItem\"\n              >\n                <header\n                  class=\"axm-workflow-definition-activities__accordion-header\"\n                  axAccordionItemHeader\n                  role=\"button\"\n                >\n                  <div class=\"axm-workflow-definition-activities__accordion-header-main\">\n                    <span class=\"axm-workflow-definition-activities__accordion-title\">{{ group.title }}</span>\n                  </div>\n                  <span class=\"axm-workflow-definition-activities__accordion-chevron\">\n                    <i [class]=\"acc.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"></i>\n                  </span>\n                </header>\n                <div class=\"axm-workflow-definition-activities__accordion-content\" axAccordionItemContent>\n                  @for (item of group.items; track item.type) {\n                    <button\n                      type=\"button\"\n                      class=\"axm-workflow-definition-activities__palette-item\"\n                      [axpWorkflowPaletteItem]=\"item\"\n                    >\n                      <span class=\"axm-workflow-definition-activities__palette-item-icon\" aria-hidden=\"true\">\n                        <i [class]=\"'fa-light ' + item.icon\"></i>\n                      </span>\n                      <span class=\"axm-workflow-definition-activities__palette-item-body\">\n                        <span class=\"axm-workflow-definition-activities__palette-item-title\">{{ item.title }}</span>\n                        <span class=\"axm-workflow-definition-activities__palette-item-meta\">{{\n                          item.description\n                        }}</span>\n                      </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          }\n        </div>\n      </div>\n    </aside>\n  }\n\n  <div class=\"axm-workflow-definition-activities__main\">\n    <section class=\"axm-workflow-definition-activities__canvas\" (contextmenu)=\"onDesignerSurfaceContextMenu($event)\">\n      <axp-workflow-designer\n        [model]=\"designerModel()\"\n        [backgroundPattern]=\"backgroundPattern()\"\n        (zoomChange)=\"onDesignerZoomChange($event)\"\n        (modelChange)=\"onDesignerModelChange($event)\"\n        (activationChange)=\"onDesignerActivationChange($event)\"\n        (nodeContextMenu)=\"onDesignerNodeContextMenu($event)\"\n      ></axp-workflow-designer>\n      <ax-context-menu\n        [orientation]=\"'vertical'\"\n        [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleWorkflowContextMenuItemClick($event)\"\n      />\n      <axp-layout-floating-zoom-bar\n        [zoomLevel]=\"zoomLevel()\"\n        (zoomIn)=\"zoomIn()\"\n        (zoomOut)=\"zoomOut()\"\n        (zoomReset)=\"zoomReset()\"\n      />\n    </section>\n  </div>\n  @if (isInfoPanelOpen()) {\n    <axp-layout-side-detail-panel\n      class=\"axm-workflow-definition-activities__info sticky top-0 z-10 max-h-full flex-none\"\n      [header]=\"workflowDetailPanelHeader()\"\n      [rows]=\"workflowDetailPanelRows()\"\n      [emptyState]=\"workflowDetailPanelEmptyState()\"\n      (panelClose)=\"toggleInfoPanel()\"\n    />\n  }\n</div>\n", styles: ["@layer properties;.axm-workflow-definition-activities{display:grid;height:100%;align-items:stretch;grid-template-columns:minmax(0,1fr);gap:.75rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette{display:flex;min-height:0px;flex-direction:column;gap:.75rem;padding:.5rem;border-radius:16px}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-head{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-head-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-sub{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));line-height:1.35;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-search{width:100%}.axm-workflow-definition-activities .axm-workflow-definition-activities__main{display:flex;min-height:0px;min-width:0px;flex-direction:column;gap:.75rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__toolbar{display:flex;justify-content:flex-end}.axm-workflow-definition-activities .axm-workflow-definition-activities__toolbar-group{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axm-workflow-definition-activities .axm-workflow-definition-activities__appearance-panel{display:flex;flex-direction:column;gap:.75rem;min-width:220px;padding:.35rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__zoom-actions{display:flex;align-items:center;gap:.4rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__pattern-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__pattern-select{min-height:34px;border-radius:8px;border:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface));color:var(--ax-sys-color-on-surface);padding:0 .5rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__canvas{position:relative;min-height:0px;flex:auto;overflow:hidden;min-height:min(70vh,720px);border-radius:16px;background:var(--ax-sys-color-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__canvas axp-axm-workflow-designer{display:block;height:100%;width:100%;min-height:inherit}.axm-workflow-definition-activities .axm-workflow-definition-activities__title{margin:0;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);font-size:.9375rem;letter-spacing:-.01em;color:var(--ax-sys-color-on-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-list{display:flex;flex-direction:column;overflow:auto;gap:.45rem;padding-inline-end:2px;margin-inline-end:-2px}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-group{display:flex;flex-direction:column;gap:.45rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-item{overflow:hidden;border-radius:var(--radius-xl, .75rem);transition:border-color .15s ease}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-header{display:flex;cursor:pointer;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none;gap:.5rem;padding:.62rem .7rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-header-main{display:inline-flex;min-width:0px;align-items:center;gap:.45rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);line-height:1.25;color:var(--ax-sys-color-on-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-content{display:flex;flex-direction:column;gap:.4rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-chevron{font-size:.8rem;--tw-leading: 1;line-height:1;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item{position:relative;display:flex;width:100%;cursor:grab;align-items:center;text-align:left;gap:.65rem;padding:.4rem .55rem;border-radius:12px;color:var(--ax-sys-color-on-surface);font:inherit;transition:border-color .15s ease}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item:hover{background-color:rgb(var(--ax-sys-color-primary-50))}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item:active{cursor:grabbing;background-color:rgb(var(--ax-sys-color-primary-100))}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));width:2.25rem;height:2.25rem;border-radius:10px;color:rgb(var(--ax-sys-color-primary-600))}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:.1rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);line-height:1.25}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:.6875rem;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-grip{flex-shrink:0;font-size:.85rem;opacity:35%;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__info{min-height:0px}@media(max-width:1100px){.axm-workflow-definition-activities{grid-template-columns:1fr;min-height:auto}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette{max-height:280px}.axm-workflow-definition-activities .axm-workflow-definition-activities__canvas{min-height:480px}.axm-workflow-definition-activities .axm-workflow-definition-activities__info{max-height:280px}}.axm-workflow-definition-activities--with-palette{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}.axm-workflow-definition-activities--with-info:not(.axm-workflow-definition-activities--with-palette){grid-template-columns:minmax(0,1fr) minmax(260px,320px)}.axm-workflow-definition-activities--with-palette.axm-axm-workflow-definition-activities--with-info{grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(260px,320px)}.axm-workflow-definition-activities--fullscreen{position:fixed;z-index:400;box-sizing:border-box;inset:0;height:100vh;background:rgb(var(--ax-sys-color-lightest-surface));padding:.75rem}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "directive", type: i1.AXAccordionGroupDirective, selector: "[axAccordionGroup]", inputs: ["accordion", "activeIndex", "collapsedOnItemClick"], exportAs: ["axAccordionGroup"] }, { kind: "directive", type: i1.AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }, { kind: "directive", type: i1.AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: i1.AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed"], outputs: ["isCollapsedChange", "onClick"], exportAs: ["axAccordionItem"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i3.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutFloatingZoomBarComponent, selector: "axp-layout-floating-zoom-bar", inputs: ["zoomLevel"], outputs: ["zoomIn", "zoomOut", "zoomReset"] }, { kind: "component", type: AXPLayoutSideDetailPanelComponent, selector: "axp-layout-side-detail-panel", inputs: ["multiSelectLabel", "header", "sections", "rows", "rowsSectionTitle", "noRowsMessage", "emptyState"], outputs: ["panelClose"] }, { kind: "component", type: AXPWorkflowDesignerComponent, selector: "axp-workflow-designer", inputs: ["model", "readonly", "highlightedNodeIds", "gridSize", "snapToGrid", "connectionPreviewStyle", "backgroundPattern", "canConnect", "paletteItems", "showPortLabels", "nodeBodyTemplate"], outputs: ["modelChange", "zoomChange", "designerPointerDown", "designerClick", "designerDoubleClick", "nodePointerDown", "nodeClick", "nodeDoubleClick", "nodeContextMenu", "nodeDragStart", "nodeDragEnd", "portPointerDown", "linkDragStart", "linkDragMove", "linkDragEnd", "connectorClick", "connectorDoubleClick", "connectionCreated", "connectionRejected", "activationChange"] }, { kind: "directive", type: AXPWorkflowPaletteItemDragDirective, selector: "[axpWorkflowPaletteItem]", inputs: ["axpWorkflowPaletteItem", "axpWorkflowPaletteDragDisabled"], outputs: ["axpWorkflowPaletteDragStart", "axpWorkflowPaletteDragEnd"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMWorkflowDefinitionActivitiesPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-workflow-definition-activities-page', imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXAccordionCdkModule,
+                        AXButtonModule,
+                        AXMenuModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AXFormModule,
+                        AXSearchBoxModule,
+                        AXSelectBoxModule,
+                        AXTranslationModule,
+                        AXPLayoutFloatingZoomBarComponent,
+                        AXPLayoutSideDetailPanelComponent,
+                        AXPWorkflowDesignerComponent,
+                        AXPWorkflowPaletteItemDragDirective,
+                    ], host: {
+                        style: 'display: block; width: 100%; height: 100%;',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPPageLayoutBase, useExisting: AXMWorkflowDefinitionActivitiesPageComponent }], template: "<!-- <axp-page-toolbar>\n    <axp-layout-suffix>\n      <div class=\"axm-workflow-definition-activities__toolbar-group\">\n        <ax-button>\n          <ax-icon icon=\"fa-light fa-sliders\"></ax-icon>\n          <ax-dropdown-panel>\n            <div class=\"axm-workflow-definition-activities__appearance-panel\">\n              <label class=\"axm-workflow-definition-activities__pattern-label\" for=\"background-pattern-select\"\n                >Background Pattern</label\n              >\n              <select\n                id=\"background-pattern-select\"\n                class=\"axm-workflow-definition-activities__pattern-select\"\n                [value]=\"backgroundPattern()\"\n                (change)=\"onBackgroundPatternChange($event)\"\n              >\n                <option value=\"dots\">Dots</option>\n                <option value=\"line\">Lines</option>\n              </select>\n            </div>\n          </ax-dropdown-panel>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen() ? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleInfoPanel()\">\n          <ax-icon [icon]=\"isInfoPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info'\"></ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-page-toolbar> -->\n\n<div\n  class=\"axm-workflow-definition-activities\"\n  [class.axm-workflow-definition-activities--with-palette]=\"isPaletteOpen()\"\n  [class.axm-workflow-definition-activities--with-info]=\"isInfoPanelOpen()\"\n>\n  @if (isPaletteOpen()) {\n    <aside class=\"axm-workflow-definition-activities__palette\">\n      <div class=\"axm-workflow-definition-activities__palette-head\">\n        <div class=\"axm-workflow-definition-activities__palette-head-row\">\n          <h3 class=\"axm-workflow-definition-activities__title\">\n            {{\n              ('@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.add-step'\n                | translate\n                | async) ?? 'Activities'\n            }}\n          </h3>\n          <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"closePalette()\">\n            <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n          </ax-button>\n        </div>\n        <p class=\"axm-workflow-definition-activities__palette-sub\">\n          {{\n            ('@workflow-management:workflow-definitions.entities.workflow-definition.pages.activities.connections.hint'\n              | translate\n              | async) ?? ''\n          }}\n        </p>\n        <ax-search-box\n          class=\"axm-workflow-definition-activities__palette-search ax-sm\"\n          [value]=\"paletteSearchTerm()\"\n          (onValueChanged)=\"onPaletteSearchChange($event)\"\n          [placeholder]=\"'@general:search.title' | translate | async\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      <div class=\"axm-workflow-definition-activities__palette-list\">\n        <div class=\"axm-workflow-definition-activities__accordion-group\" axAccordionGroup [accordion]=\"false\">\n          @for (group of filteredPaletteGroups(); track group.id) {\n            @if (group.items.length > 0) {\n              <section\n                class=\"axm-workflow-definition-activities__accordion-item\"\n                axAccordionItem\n                [isCollapsed]=\"false\"\n                #acc=\"axAccordionItem\"\n              >\n                <header\n                  class=\"axm-workflow-definition-activities__accordion-header\"\n                  axAccordionItemHeader\n                  role=\"button\"\n                >\n                  <div class=\"axm-workflow-definition-activities__accordion-header-main\">\n                    <span class=\"axm-workflow-definition-activities__accordion-title\">{{ group.title }}</span>\n                  </div>\n                  <span class=\"axm-workflow-definition-activities__accordion-chevron\">\n                    <i [class]=\"acc.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"></i>\n                  </span>\n                </header>\n                <div class=\"axm-workflow-definition-activities__accordion-content\" axAccordionItemContent>\n                  @for (item of group.items; track item.type) {\n                    <button\n                      type=\"button\"\n                      class=\"axm-workflow-definition-activities__palette-item\"\n                      [axpWorkflowPaletteItem]=\"item\"\n                    >\n                      <span class=\"axm-workflow-definition-activities__palette-item-icon\" aria-hidden=\"true\">\n                        <i [class]=\"'fa-light ' + item.icon\"></i>\n                      </span>\n                      <span class=\"axm-workflow-definition-activities__palette-item-body\">\n                        <span class=\"axm-workflow-definition-activities__palette-item-title\">{{ item.title }}</span>\n                        <span class=\"axm-workflow-definition-activities__palette-item-meta\">{{\n                          item.description\n                        }}</span>\n                      </span>\n                    </button>\n                  }\n                </div>\n              </section>\n            }\n          }\n        </div>\n      </div>\n    </aside>\n  }\n\n  <div class=\"axm-workflow-definition-activities__main\">\n    <section class=\"axm-workflow-definition-activities__canvas\" (contextmenu)=\"onDesignerSurfaceContextMenu($event)\">\n      <axp-workflow-designer\n        [model]=\"designerModel()\"\n        [backgroundPattern]=\"backgroundPattern()\"\n        (zoomChange)=\"onDesignerZoomChange($event)\"\n        (modelChange)=\"onDesignerModelChange($event)\"\n        (activationChange)=\"onDesignerActivationChange($event)\"\n        (nodeContextMenu)=\"onDesignerNodeContextMenu($event)\"\n      ></axp-workflow-designer>\n      <ax-context-menu\n        [orientation]=\"'vertical'\"\n        [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleWorkflowContextMenuItemClick($event)\"\n      />\n      <axp-layout-floating-zoom-bar\n        [zoomLevel]=\"zoomLevel()\"\n        (zoomIn)=\"zoomIn()\"\n        (zoomOut)=\"zoomOut()\"\n        (zoomReset)=\"zoomReset()\"\n      />\n    </section>\n  </div>\n  @if (isInfoPanelOpen()) {\n    <axp-layout-side-detail-panel\n      class=\"axm-workflow-definition-activities__info sticky top-0 z-10 max-h-full flex-none\"\n      [header]=\"workflowDetailPanelHeader()\"\n      [rows]=\"workflowDetailPanelRows()\"\n      [emptyState]=\"workflowDetailPanelEmptyState()\"\n      (panelClose)=\"toggleInfoPanel()\"\n    />\n  }\n</div>\n", styles: ["@layer properties;.axm-workflow-definition-activities{display:grid;height:100%;align-items:stretch;grid-template-columns:minmax(0,1fr);gap:.75rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette{display:flex;min-height:0px;flex-direction:column;gap:.75rem;padding:.5rem;border-radius:16px}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-head{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-head-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-sub{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));line-height:1.35;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-search{width:100%}.axm-workflow-definition-activities .axm-workflow-definition-activities__main{display:flex;min-height:0px;min-width:0px;flex-direction:column;gap:.75rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__toolbar{display:flex;justify-content:flex-end}.axm-workflow-definition-activities .axm-workflow-definition-activities__toolbar-group{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axm-workflow-definition-activities .axm-workflow-definition-activities__appearance-panel{display:flex;flex-direction:column;gap:.75rem;min-width:220px;padding:.35rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__zoom-actions{display:flex;align-items:center;gap:.4rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__pattern-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__pattern-select{min-height:34px;border-radius:8px;border:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface));color:var(--ax-sys-color-on-surface);padding:0 .5rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__canvas{position:relative;min-height:0px;flex:auto;overflow:hidden;min-height:min(70vh,720px);border-radius:16px;background:var(--ax-sys-color-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__canvas axp-axm-workflow-designer{display:block;height:100%;width:100%;min-height:inherit}.axm-workflow-definition-activities .axm-workflow-definition-activities__title{margin:0;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);font-size:.9375rem;letter-spacing:-.01em;color:var(--ax-sys-color-on-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-list{display:flex;flex-direction:column;overflow:auto;gap:.45rem;padding-inline-end:2px;margin-inline-end:-2px}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-group{display:flex;flex-direction:column;gap:.45rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-item{overflow:hidden;border-radius:var(--radius-xl, .75rem);transition:border-color .15s ease}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-header{display:flex;cursor:pointer;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none;gap:.5rem;padding:.62rem .7rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-header-main{display:inline-flex;min-width:0px;align-items:center;gap:.45rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);line-height:1.25;color:var(--ax-sys-color-on-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-content{display:flex;flex-direction:column;gap:.4rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__accordion-chevron{font-size:.8rem;--tw-leading: 1;line-height:1;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item{position:relative;display:flex;width:100%;cursor:grab;align-items:center;text-align:left;gap:.65rem;padding:.4rem .55rem;border-radius:12px;color:var(--ax-sys-color-on-surface);font:inherit;transition:border-color .15s ease}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item:hover{background-color:rgb(var(--ax-sys-color-primary-50))}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item:active{cursor:grabbing;background-color:rgb(var(--ax-sys-color-primary-100))}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));width:2.25rem;height:2.25rem;border-radius:10px;color:rgb(var(--ax-sys-color-primary-600))}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:.1rem}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);line-height:1.25}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:.6875rem;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette-item-grip{flex-shrink:0;font-size:.85rem;opacity:35%;color:var(--ax-sys-color-on-light-surface)}.axm-workflow-definition-activities .axm-workflow-definition-activities__info{min-height:0px}@media(max-width:1100px){.axm-workflow-definition-activities{grid-template-columns:1fr;min-height:auto}.axm-workflow-definition-activities .axm-workflow-definition-activities__palette{max-height:280px}.axm-workflow-definition-activities .axm-workflow-definition-activities__canvas{min-height:480px}.axm-workflow-definition-activities .axm-workflow-definition-activities__info{max-height:280px}}.axm-workflow-definition-activities--with-palette{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}.axm-workflow-definition-activities--with-info:not(.axm-workflow-definition-activities--with-palette){grid-template-columns:minmax(0,1fr) minmax(260px,320px)}.axm-workflow-definition-activities--with-palette.axm-axm-workflow-definition-activities--with-info{grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(260px,320px)}.axm-workflow-definition-activities--fullscreen{position:fixed;z-index:400;box-sizing:border-box;inset:0;height:100vh;background:rgb(var(--ax-sys-color-lightest-surface));padding:.75rem}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { rootContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootContext", required: false }] }], pageConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageConfig", required: false }] }], propertyViewerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPPropertyViewerComponent), { isSignal: true }] }], workflowDesignerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPWorkflowDesignerComponent), { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXContextMenuComponent), { isSignal: true }] }] } });
+
+var workflowDefinitionActivitiesPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXMWorkflowDefinitionActivitiesPageComponent: AXMWorkflowDefinitionActivitiesPageComponent
+});
+
+export { AXMWorkflowDefinitionActivitiesPageComponent, AXMWorkflowDefinitionActivitiesPageComponentProvider, graphHasPersistedDesignerLayout, isDesignerLayoutArranged };
+//# sourceMappingURL=acorex-platform-module-workflow-management-client-index-DKZTLui4.mjs.map