@masterteam/workflow 0.0.30 → 0.0.32

package/fesm2022/masterteam-workflow.mjs

@@ -1,25 +1,28 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, Component, signal, linkedSignal, effect } from '@angular/core';
-import { Card } from '@masterteam/components/card';
-import { StructureBuilder } from '@masterteam/structure-builder';
-import { Action, Selector, State, Store, select } from '@ngxs/store';
-import { HttpClient, HttpContextToken } from '@angular/common/http';
-import { of } from 'rxjs';
-import { tap, catchError, finalize } from 'rxjs/operators';
-import { Tabs } from '@masterteam/components/tabs';
+import { inject, Injectable, computed, Component, signal, effect } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { DynamicForm } from '@masterteam/forms/dynamic-form';
-import { Skeleton } from 'primeng/skeleton';
-import { ToggleField } from '@masterteam/components/toggle-field';
-import { Button } from '@masterteam/components/button';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2 from '@jsverse/transloco';
 import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
+import { Button } from '@masterteam/components/button';
+import { Card } from '@masterteam/components/card';
 import { ConfirmationService } from '@masterteam/components/confirmation';
-import { NotificationTemplate, NotificationFacade } from '@masterteam/notification';
 import { ModalService } from '@masterteam/components/modal';
+import { NumberField } from '@masterteam/components/number-field';
 import { SelectField } from '@masterteam/components/select-field';
+import { TextField } from '@masterteam/components/text-field';
+import { TextareaField } from '@masterteam/components/textarea-field';
+import { ToggleField } from '@masterteam/components/toggle-field';
 import { FormBuilder, FormBuilderFacade } from '@masterteam/form-builder';
+import { NotificationTemplate, NotificationFacade } from '@masterteam/notification';
+import { StructureBuilder } from '@masterteam/structure-builder';
+import { Tabs } from '@masterteam/components/tabs';
+import { Skeleton } from 'primeng/skeleton';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { HttpClient, HttpContextToken } from '@angular/common/http';
+import { of } from 'rxjs';
+import { tap, catchError, finalize } from 'rxjs/operators';
 
 class SetModuleInfo {
     moduleType;
@@ -55,6 +58,16 @@ class GetGroups {
 class GetRolesForModule {
     static type = '[Workflow] Get Roles For Module';
 }
+class GetAppActions {
+    static type = '[Workflow] Get App Actions';
+}
+class GetAppActionDetail {
+    actionKey;
+    static type = '[Workflow] Get App Action Detail';
+    constructor(actionKey) {
+        this.actionKey = actionKey;
+    }
+}
 class GetStep {
     stepId;
     static type = '[Workflow] Get Step';
@@ -161,6 +174,8 @@ const DEFAULT_STATE = {
     formulaProperties: [],
     groups: [],
     roles: [],
+    appActionDescriptors: [],
+    selectedAppActionDescriptor: null,
     selectedStep: null,
     isFlowValid: null,
     loadingActive: [],
@@ -171,6 +186,7 @@ let WorkflowState = class WorkflowState {
     baseUrl = 'ProcessBuilder';
     groupsUrl = 'identity/Groups';
     rolesUrl = 'identity/roles/scopes';
+    workflowAppActionsUrl = 'workflow-app-actions';
     static workflowId(state) {
         return state.workflowId;
     }
@@ -195,6 +211,12 @@ let WorkflowState = class WorkflowState {
     static roles(state) {
         return state.roles;
     }
+    static appActionDescriptors(state) {
+        return state.appActionDescriptors;
+    }
+    static selectedAppActionDescriptor(state) {
+        return state.selectedAppActionDescriptor;
+    }
     static selectedStep(state) {
         return state.selectedStep;
     }
@@ -276,7 +298,9 @@ let WorkflowState = class WorkflowState {
             params: { Mode: 'edit' },
         })
             .pipe(tap((response) => {
-            const workflow = response?.data ?? null;
+            const workflow = response?.data
+                ? normalizeWorkflowSchema(response.data)
+                : null;
             ctx.patchState({
                 workflow,
                 isFlowValid: workflow?.isValid ?? null,
@@ -353,6 +377,56 @@ let WorkflowState = class WorkflowState {
             return of([]);
         }), finalize(() => endLoading(ctx, 'getRolesForModule')));
     }
+    getAppActions(ctx, _action) {
+        const state = ctx.getState();
+        if (state.appActionDescriptors.length) {
+            return of(state.appActionDescriptors);
+        }
+        startLoading(ctx, 'getAppActions');
+        return this.http
+            .get(`${this.workflowAppActionsUrl}/actions`)
+            .pipe(tap((response) => {
+            const descriptors = normalizeWorkflowAppActionDescriptors(response?.data);
+            ctx.patchState({
+                appActionDescriptors: descriptors,
+            });
+        }), catchError((error) => {
+            const message = error?.error?.message ??
+                error?.message ??
+                'Failed to load app actions';
+            setLoadingError(ctx, 'getAppActions', message);
+            return of([]);
+        }), finalize(() => endLoading(ctx, 'getAppActions')));
+    }
+    getAppActionDetail(ctx, action) {
+        const state = ctx.getState();
+        const cachedDescriptor = state.appActionDescriptors.find((descriptor) => descriptor.actionKey === action.actionKey &&
+            !!descriptor.configSchemaJson);
+        if (cachedDescriptor) {
+            ctx.patchState({
+                selectedAppActionDescriptor: cachedDescriptor,
+            });
+            return of(cachedDescriptor);
+        }
+        startLoading(ctx, 'getAppActionDetail');
+        return this.http
+            .get(`${this.workflowAppActionsUrl}/actions/${encodeURIComponent(action.actionKey)}`)
+            .pipe(tap((response) => {
+            const descriptor = normalizeWorkflowAppActionDescriptor(response?.data);
+            const currentState = ctx.getState();
+            const descriptors = upsertWorkflowAppActionDescriptor(currentState.appActionDescriptors, descriptor);
+            ctx.patchState({
+                appActionDescriptors: descriptors,
+                selectedAppActionDescriptor: descriptor,
+            });
+        }), catchError((error) => {
+            const message = error?.error?.message ??
+                error?.message ??
+                'Failed to load app action details';
+            setLoadingError(ctx, 'getAppActionDetail', message);
+            return of(null);
+        }), finalize(() => endLoading(ctx, 'getAppActionDetail')));
+    }
     getStep(ctx, action) {
         startLoading(ctx, 'getStep');
         return this.http
@@ -360,7 +434,9 @@ let WorkflowState = class WorkflowState {
             params: { Mode: 'edit' },
         })
             .pipe(tap((response) => {
-            const selectedStep = response?.data ?? null;
+            const selectedStep = response?.data
+                ? normalizeWorkflowStepDetail(response.data)
+                : null;
             ctx.patchState({ selectedStep });
         }), catchError((error) => {
             const message = error?.error?.message ?? error?.message ?? 'Failed to load step';
@@ -400,11 +476,11 @@ let WorkflowState = class WorkflowState {
             return of(null);
         }
         const tempId = -Date.now();
-        const tempStep = {
+        const tempStep = normalizeWorkflowStepSchema({
             ...action.payload,
             id: tempId,
             loading: true,
-        };
+        });
         if (state.workflow) {
             ctx.patchState({
                 workflow: {
@@ -417,10 +493,16 @@ let WorkflowState = class WorkflowState {
         return this.http
             .post(`${this.baseUrl}/requestSchema/${workflowId}/stepSchema`, action.payload)
             .pipe(tap((response) => {
-            const createdStep = response?.data;
+            const createdStep = response?.data
+                ? normalizeWorkflowStepSchema({
+                    ...tempStep,
+                    ...response.data,
+                    loading: false,
+                })
+                : null;
             const currentState = ctx.getState();
             if (createdStep && currentState.workflow) {
-                const updatedSteps = currentState.workflow.stepsSchema.map((step) => step.id === tempId ? { ...createdStep, loading: false } : step);
+                const updatedSteps = currentState.workflow.stepsSchema.map((step) => (step.id === tempId ? createdStep : step));
                 ctx.patchState({
                     workflow: {
                         ...currentState.workflow,
@@ -468,15 +550,20 @@ let WorkflowState = class WorkflowState {
         return this.http
             .put(`${this.baseUrl}/${endpoint}/${action.stepId}`, action.payload)
             .pipe(tap((response) => {
-            const updatedStep = response?.data;
             const currentState = ctx.getState();
+            const existingStep = currentState.workflow?.stepsSchema.find((step) => step.id === action.stepId) ?? null;
+            const updatedStep = response?.data
+                ? normalizeWorkflowStepSchema({
+                    ...existingStep,
+                    ...response.data,
+                    loading: false,
+                })
+                : null;
             if (updatedStep && currentState.workflow) {
                 ctx.patchState({
                     workflow: {
                         ...currentState.workflow,
-                        stepsSchema: currentState.workflow.stepsSchema.map((step) => step.id === updatedStep.id
-                            ? { ...updatedStep, loading: false }
-                            : step),
+                        stepsSchema: currentState.workflow.stepsSchema.map((step) => step.id === updatedStep.id ? updatedStep : step),
                     },
                 });
             }
@@ -744,8 +831,8 @@ let WorkflowState = class WorkflowState {
             return of(null);
         }), finalize(() => endLoading(ctx, 'deleteConnection')));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowState });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowState });
 };
 __decorate([
     Action(SetModuleInfo)
@@ -765,6 +852,12 @@ __decorate([
 __decorate([
     Action(GetRolesForModule)
 ], WorkflowState.prototype, "getRolesForModule", null);
+__decorate([
+    Action(GetAppActions)
+], WorkflowState.prototype, "getAppActions", null);
+__decorate([
+    Action(GetAppActionDetail)
+], WorkflowState.prototype, "getAppActionDetail", null);
 __decorate([
     Action(GetStep)
 ], WorkflowState.prototype, "getStep", null);
@@ -816,6 +909,12 @@ __decorate([
 __decorate([
     Selector()
 ], WorkflowState, "roles", null);
+__decorate([
+    Selector()
+], WorkflowState, "appActionDescriptors", null);
+__decorate([
+    Selector()
+], WorkflowState, "selectedAppActionDescriptor", null);
 __decorate([
     Selector()
 ], WorkflowState, "selectedStep", null);
@@ -840,9 +939,9 @@ WorkflowState = __decorate([
         defaults: DEFAULT_STATE,
     })
 ], WorkflowState);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowState, decorators: [{
             type: Injectable
-        }], propDecorators: { setModuleInfo: [], getWorkflows: [], getWorkflow: [], getFormulaProperties: [], getGroups: [], getRolesForModule: [], getStep: [], validateFlow: [], createStep: [], updateStep: [], createConnection: [], updateConnection: [], publishWorkflow: [], deleteStep: [], deleteConnection: [] } });
+        }], propDecorators: { setModuleInfo: [], getWorkflows: [], getWorkflow: [], getFormulaProperties: [], getGroups: [], getRolesForModule: [], getAppActions: [], getAppActionDetail: [], getStep: [], validateFlow: [], createStep: [], updateStep: [], createConnection: [], updateConnection: [], publishWorkflow: [], deleteStep: [], deleteConnection: [] } });
 function normalizeWorkflowRoles(data) {
     if (!Array.isArray(data)) {
         return [];
@@ -859,6 +958,175 @@ function normalizeWorkflowRoles(data) {
     }
     return data.map(normalizeWorkflowRole).filter(Boolean);
 }
+function normalizeWorkflowSchema(input) {
+    return {
+        ...input,
+        stepsSchema: Array.isArray(input?.stepsSchema)
+            ? input.stepsSchema.map(normalizeWorkflowStepSchema)
+            : [],
+        connections: Array.isArray(input?.connections) ? input.connections : [],
+        properties: Array.isArray(input?.properties) ? input.properties : [],
+    };
+}
+function normalizeWorkflowStepSchema(input) {
+    const type = normalizeWorkflowStepType$1(input?.type);
+    const appAction = normalizeWorkflowAppAction(input, type);
+    return {
+        ...input,
+        id: Number(input?.id ?? 0),
+        name: normalizeWorkflowStepName(input?.name),
+        sla: Number(input?.sla ?? 0),
+        isInitial: !!input?.isInitial,
+        type,
+        targetType: input?.targetType ?? undefined,
+        targetValue: input?.targetValue === null || input?.targetValue === undefined
+            ? undefined
+            : String(input.targetValue),
+        appAction,
+        loading: !!input?.loading,
+    };
+}
+function normalizeWorkflowStepDetail(input) {
+    const type = normalizeWorkflowStepType$1(input?.type);
+    const appAction = normalizeWorkflowAppAction(input, type);
+    return {
+        ...input,
+        id: Number(input?.id ?? 0),
+        name: normalizeWorkflowRecordName(input?.name),
+        sla: Number(input?.sla ?? 0),
+        isInitial: !!input?.isInitial,
+        type,
+        targetType: input?.targetType ?? undefined,
+        targetValue: input?.targetValue === null || input?.targetValue === undefined
+            ? undefined
+            : String(input.targetValue),
+        properties: Array.isArray(input?.properties) ? input.properties : [],
+        hasNotification: !!input?.hasNotification,
+        hasForm: input?.hasForm === undefined || input?.hasForm === null
+            ? undefined
+            : !!input.hasForm,
+        appAction,
+    };
+}
+function normalizeWorkflowStepType$1(type) {
+    return type === 'AppAction' ? 'AppAction' : 'UserInput';
+}
+function normalizeWorkflowStepName(name) {
+    if (typeof name === 'string') {
+        return name;
+    }
+    if (name && typeof name === 'object') {
+        return name;
+    }
+    return '';
+}
+function normalizeWorkflowRecordName(name) {
+    if (name && typeof name === 'object') {
+        return name;
+    }
+    const label = typeof name === 'string' ? name : '';
+    return {
+        display: label,
+        en: label,
+        ar: label,
+    };
+}
+function normalizeWorkflowAppAction(input, type) {
+    const candidate = isRecord$1(input?.appAction) ? input.appAction : input;
+    const hasAppActionData = !!candidate?.appCode ||
+        !!candidate?.actionKey ||
+        candidate?.configJson !== undefined ||
+        candidate?.failureBehavior !== undefined ||
+        candidate?.timeoutSeconds !== undefined;
+    if (!hasAppActionData && type !== 'AppAction') {
+        return null;
+    }
+    return {
+        appCode: typeof candidate?.appCode === 'string' && candidate.appCode.trim().length
+            ? candidate.appCode
+            : 'pplus',
+        actionKey: typeof candidate?.actionKey === 'string' ? candidate.actionKey : '',
+        configJson: typeof candidate?.configJson === 'string'
+            ? candidate.configJson
+            : safeJsonStringify(candidate?.configJson ?? {}),
+        failureBehavior: typeof candidate?.failureBehavior === 'string'
+            ? candidate.failureBehavior
+            : 'Stop',
+        timeoutSeconds: Number(candidate?.timeoutSeconds ?? 300),
+        displayName: typeof candidate?.displayName === 'string' ? candidate.displayName : null,
+        description: typeof candidate?.description === 'string' ? candidate.description : null,
+        configSchemaJson: typeof candidate?.configSchemaJson === 'string'
+            ? candidate.configSchemaJson
+            : null,
+        requiredContextKeys: Array.isArray(candidate?.requiredContextKeys)
+            ? candidate.requiredContextKeys.map(String)
+            : [],
+        supportedScopes: Array.isArray(candidate?.supportedScopes)
+            ? candidate.supportedScopes.map(String)
+            : [],
+    };
+}
+function normalizeWorkflowAppActionDescriptors(data) {
+    return extractCollection(data, ['actions', 'items'])
+        .map(normalizeWorkflowAppActionDescriptor)
+        .filter(Boolean);
+}
+function normalizeWorkflowAppActionDescriptor(data) {
+    const record = isRecord$1(data) ? data : {};
+    return {
+        appCode: readString(record, 'appCode') ?? 'pplus',
+        actionKey: readString(record, 'actionKey') ?? '',
+        displayName: readString(record, 'displayName') ??
+            readString(record, 'name') ??
+            readString(record, 'actionKey') ??
+            '',
+        description: readString(record, 'description') ?? null,
+        configSchemaJson: readString(record, 'configSchemaJson') ?? null,
+        requiredContextKeys: Array.isArray(record['requiredContextKeys'])
+            ? record['requiredContextKeys'].map(String)
+            : [],
+        supportedScopes: Array.isArray(record['supportedScopes'])
+            ? record['supportedScopes'].map(String)
+            : [],
+    };
+}
+function upsertWorkflowAppActionDescriptor(descriptors, descriptor) {
+    const index = descriptors.findIndex((item) => item.actionKey === descriptor.actionKey);
+    if (index < 0) {
+        return [...descriptors, descriptor];
+    }
+    return descriptors.map((item, currentIndex) => currentIndex === index ? { ...item, ...descriptor } : item);
+}
+function extractCollection(data, nestedKeys) {
+    if (Array.isArray(data)) {
+        return data.filter(isRecord$1);
+    }
+    if (!isRecord$1(data)) {
+        return [];
+    }
+    for (const key of nestedKeys) {
+        const nestedValue = data[key];
+        if (Array.isArray(nestedValue)) {
+            return nestedValue.filter(isRecord$1);
+        }
+    }
+    return [];
+}
+function readString(record, key) {
+    const value = record[key];
+    return typeof value === 'string' && value.trim().length > 0 ? value : null;
+}
+function safeJsonStringify(value) {
+    try {
+        return JSON.stringify(value ?? {});
+    }
+    catch {
+        return '{}';
+    }
+}
+function isRecord$1(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
 function normalizeWorkflowRole(role) {
     const value = role?.value ?? role?.id;
     return {
@@ -906,6 +1174,8 @@ class WorkflowFacade {
     formulaProperties = select(WorkflowState.formulaProperties);
     groups = select(WorkflowState.groups);
     roles = select(WorkflowState.roles);
+    appActionDescriptors = select(WorkflowState.appActionDescriptors);
+    selectedAppActionDescriptor = select(WorkflowState.selectedAppActionDescriptor);
     selectedStep = select(WorkflowState.selectedStep);
     isFlowValid = select(WorkflowState.isFlowValid);
     steps = select(WorkflowState.stepsSchema);
@@ -939,6 +1209,12 @@ class WorkflowFacade {
     loadRolesForModule() {
         return this.store.dispatch(new GetRolesForModule());
     }
+    loadAppActions() {
+        return this.store.dispatch(new GetAppActions());
+    }
+    loadAppActionDetail(actionKey) {
+        return this.store.dispatch(new GetAppActionDetail(actionKey));
+    }
     loadStep(stepId) {
         return this.store.dispatch(new GetStep(stepId));
     }
@@ -966,10 +1242,10 @@ class WorkflowFacade {
     deleteConnection(connectionId) {
         return this.store.dispatch(new DeleteConnection(connectionId));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -978,23 +1254,405 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 // shared/models/api.model.ts
 
-class WorkflowNotificationsDrawer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowNotificationsDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: WorkflowNotificationsDrawer, isStandalone: true, selector: "mt-workflow-notifications-drawer", ngImport: i0, template: "<div class=\"overflow-hidden h-full w-full\">\r\n  <div\r\n    class=\"flex-1 flex justify-center items-start p-4 h-full overflow-y-auto\"\r\n  >\r\n    <div class=\"w-2/3\">\r\n      <mt-card headless>\r\n        <mt-notification-template />\r\n      </mt-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: NotificationTemplate, selector: "mt-notification-template" }] });
+const SUPPORTED_PROPERTY_TYPES = [
+    'string',
+    'number',
+    'boolean',
+    'array',
+    'object',
+];
+function buildWorkflowAppActionConfigEditorDefinition(configSchemaJson) {
+    if (!configSchemaJson?.trim()) {
+        return {
+            mode: 'schema',
+            schema: {
+                type: 'object',
+                properties: [],
+                required: [],
+            },
+            fields: [],
+            errors: [],
+        };
+    }
+    let parsedSchema;
+    try {
+        parsedSchema = JSON.parse(configSchemaJson);
+    }
+    catch {
+        return buildRawDefinition('Invalid config schema JSON.');
+    }
+    if (!isRecord(parsedSchema) || parsedSchema['type'] !== 'object') {
+        return buildRawDefinition('Config schema must use a root object.');
+    }
+    const propertyEntries = Object.entries(parsedSchema['properties'] ?? {});
+    const requiredKeys = Array.isArray(parsedSchema['required'])
+        ? parsedSchema['required'].map(String)
+        : [];
+    const properties = [];
+    for (const [key, rawProperty] of propertyEntries) {
+        if (!isRecord(rawProperty)) {
+            return buildRawDefinition(`Unsupported schema for "${key}".`);
+        }
+        const propertyType = resolvePropertyType(rawProperty);
+        if (!propertyType) {
+            return buildRawDefinition(`Unsupported schema type for "${key}".`);
+        }
+        properties.push({
+            key,
+            title: resolvePropertyTitle(key, rawProperty),
+            description: typeof rawProperty['description'] === 'string'
+                ? rawProperty['description']
+                : null,
+            type: propertyType,
+            required: requiredKeys.includes(key),
+            enumValues: Array.isArray(rawProperty['enum'])
+                ? rawProperty['enum'].filter(isPrimitiveEnumValue)
+                : undefined,
+            rawSchema: rawProperty,
+        });
+    }
+    const schema = {
+        type: 'object',
+        properties,
+        required: requiredKeys,
+    };
+    return {
+        mode: 'schema',
+        schema,
+        fields: properties.map(mapSchemaPropertyToField),
+        errors: [],
+    };
+}
+function mapWorkflowAppActionConfigJsonToEditorValue(configJson, definition) {
+    const rawConfigJson = typeof configJson === 'string' && configJson.trim().length
+        ? configJson
+        : '{}';
+    if (definition.mode === 'raw' || !definition.schema) {
+        const errors = isValidJson(rawConfigJson) ? [] : ['Invalid config JSON.'];
+        return {
+            fields: {},
+            rawConfigJson,
+            errors,
+        };
+    }
+    let parsedValue = {};
+    try {
+        const candidate = JSON.parse(rawConfigJson);
+        if (isRecord(candidate)) {
+            parsedValue = candidate;
+        }
+    }
+    catch {
+        return {
+            fields: {},
+            rawConfigJson,
+            errors: ['Invalid config JSON.'],
+        };
+    }
+    const fields = definition.fields.reduce((result, field) => {
+        const fieldValue = parsedValue[field.key];
+        if (field.kind === 'json') {
+            result[field.key] =
+                fieldValue === undefined ? '' : JSON.stringify(fieldValue, null, 2);
+            return result;
+        }
+        result[field.key] = fieldValue ?? null;
+        return result;
+    }, {});
+    return {
+        fields,
+        rawConfigJson,
+        errors: [],
+    };
+}
+function serializeWorkflowAppActionConfigValue(value, definition, rawConfigJson) {
+    if (definition.mode === 'raw' || !definition.schema) {
+        const normalizedRawConfigJson = typeof rawConfigJson === 'string' && rawConfigJson.trim().length
+            ? rawConfigJson
+            : '{}';
+        if (!isValidJson(normalizedRawConfigJson)) {
+            return {
+                configJson: normalizedRawConfigJson,
+                errors: ['Invalid config JSON.'],
+            };
+        }
+        return {
+            configJson: normalizedRawConfigJson,
+            errors: [],
+        };
+    }
+    const errors = [];
+    const serializedValue = {};
+    definition.fields.forEach((field) => {
+        const rawFieldValue = value[field.key];
+        if (field.kind === 'json') {
+            const stringValue = typeof rawFieldValue === 'string' ? rawFieldValue.trim() : '';
+            if (!stringValue) {
+                if (field.required) {
+                    errors.push(`${field.title} is required.`);
+                }
+                return;
+            }
+            try {
+                const parsedFieldValue = JSON.parse(stringValue);
+                if (field.jsonValueType === 'array' &&
+                    !Array.isArray(parsedFieldValue)) {
+                    errors.push(`${field.title} must be a JSON array.`);
+                    return;
+                }
+                if (field.jsonValueType === 'object' &&
+                    (!isRecord(parsedFieldValue) || Array.isArray(parsedFieldValue))) {
+                    errors.push(`${field.title} must be a JSON object.`);
+                    return;
+                }
+                serializedValue[field.key] = parsedFieldValue;
+            }
+            catch {
+                errors.push(`${field.title} must be valid JSON.`);
+            }
+            return;
+        }
+        if (rawFieldValue === null ||
+            rawFieldValue === undefined ||
+            rawFieldValue === '') {
+            if (field.required) {
+                errors.push(`${field.title} is required.`);
+            }
+            return;
+        }
+        serializedValue[field.key] = rawFieldValue;
+    });
+    return {
+        configJson: JSON.stringify(serializedValue),
+        errors,
+    };
+}
+function buildRawDefinition(error) {
+    return {
+        mode: 'raw',
+        schema: null,
+        fields: [],
+        errors: [error],
+    };
+}
+function mapSchemaPropertyToField(property) {
+    if (property.enumValues?.length) {
+        return {
+            key: property.key,
+            title: property.title,
+            description: property.description,
+            type: property.type,
+            kind: 'select',
+            required: property.required,
+            enumValues: property.enumValues,
+        };
+    }
+    if (property.type === 'array' || property.type === 'object') {
+        return {
+            key: property.key,
+            title: property.title,
+            description: property.description,
+            type: property.type,
+            kind: 'json',
+            required: property.required,
+            jsonValueType: property.type,
+        };
+    }
+    return {
+        key: property.key,
+        title: property.title,
+        description: property.description,
+        type: property.type,
+        kind: property.type === 'boolean'
+            ? 'toggle'
+            : property.type === 'number'
+                ? 'number'
+                : 'text',
+        required: property.required,
+    };
+}
+function resolvePropertyType(property) {
+    const typeValue = property['type'];
+    if (typeof typeValue === 'string') {
+        return normalizePropertyType(typeValue);
+    }
+    if (Array.isArray(typeValue)) {
+        for (const item of typeValue) {
+            if (typeof item !== 'string' || item === 'null') {
+                continue;
+            }
+            const normalizedType = normalizePropertyType(item);
+            if (normalizedType) {
+                return normalizedType;
+            }
+        }
+    }
+    if (Array.isArray(property['enum']) && property['enum'].length > 0) {
+        const firstEnumValue = property['enum'].find((item) => item !== null);
+        if (typeof firstEnumValue === 'boolean') {
+            return 'boolean';
+        }
+        if (typeof firstEnumValue === 'number') {
+            return 'number';
+        }
+        if (typeof firstEnumValue === 'string') {
+            return 'string';
+        }
+    }
+    return null;
+}
+function normalizePropertyType(type) {
+    if (type === 'integer' || type === 'number') {
+        return 'number';
+    }
+    return SUPPORTED_PROPERTY_TYPES.includes(type)
+        ? type
+        : null;
+}
+function resolvePropertyTitle(key, property) {
+    if (typeof property['title'] === 'string' &&
+        property['title'].trim().length) {
+        return property['title'];
+    }
+    return key
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/[_-]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, (character) => character.toUpperCase());
+}
+function isPrimitiveEnumValue(value) {
+    return (typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean');
+}
+function isValidJson(value) {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+const DEFAULT_WORKFLOW_STEP_NAME = {
+    en: '',
+    ar: '',
+};
+const DEFAULT_APP_ACTION_EDITOR_VALUE = {
+    actionKey: null,
+    failureBehavior: 'Stop',
+    timeoutSeconds: 300,
+    configJson: '{}',
+};
+function createDefaultWorkflowStepEditorValue() {
+    return {
+        name: { ...DEFAULT_WORKFLOW_STEP_NAME },
+        type: 'UserInput',
+        targetType: '1',
+        group: null,
+        role: null,
+        sla: 0,
+    };
+}
+function mapWorkflowStepToEditorState(step) {
+    if (!step) {
+        return {
+            stepFormValue: createDefaultWorkflowStepEditorValue(),
+            appActionValue: { ...DEFAULT_APP_ACTION_EDITOR_VALUE },
+        };
+    }
+    const type = normalizeWorkflowStepType(step.type);
+    return {
+        stepFormValue: {
+            name: normalizeStepName(step.name),
+            type,
+            targetType: step.targetType || '1',
+            group: type === 'UserInput' && step.targetType === '1' && step.targetValue
+                ? Number(step.targetValue)
+                : null,
+            role: type === 'UserInput' && step.targetType === '2'
+                ? (step.targetValue ?? null)
+                : null,
+            sla: Number(step.sla ?? 0),
+        },
+        appActionValue: {
+            actionKey: step.appAction?.actionKey ?? null,
+            failureBehavior: step.appAction?.failureBehavior ?? 'Stop',
+            timeoutSeconds: Number(step.appAction?.timeoutSeconds ?? 300),
+            configJson: step.appAction?.configJson ?? '{}',
+        },
+    };
+}
+function buildWorkflowStepPayload({ formValue, properties, hasNotification, appActionValue, }) {
+    const type = normalizeWorkflowStepType(formValue.type);
+    if (type === 'AppAction') {
+        return {
+            type,
+            name: normalizeStepName(formValue.name),
+            sla: Number(formValue.sla ?? 0),
+            properties: [],
+            hasNotification,
+            appCode: 'pplus',
+            actionKey: appActionValue?.actionKey ?? '',
+            configJson: appActionValue?.configJson ?? '{}',
+            failureBehavior: appActionValue?.failureBehavior ?? 'Stop',
+            timeoutSeconds: Number(appActionValue?.timeoutSeconds ?? 300),
+        };
+    }
+    return {
+        type,
+        name: normalizeStepName(formValue.name),
+        targetType: formValue.targetType || '1',
+        targetValue: formValue.targetType === '1'
+            ? (formValue.group ?? undefined)
+            : (formValue.role ?? undefined),
+        sla: Number(formValue.sla ?? 0),
+        properties,
+        hasNotification,
+        hasForm: true,
+    };
+}
+function normalizeWorkflowStepType(type) {
+    return type === 'AppAction' ? 'AppAction' : 'UserInput';
+}
+function normalizeStepName(name) {
+    if (name && typeof name === 'object') {
+        return {
+            en: name['en'] ?? '',
+            ar: name['ar'] ?? '',
+            ...(name['display'] ? { display: name['display'] } : {}),
+        };
+    }
+    const label = typeof name === 'string' ? name : '';
+    return {
+        display: label,
+        en: label,
+        ar: label,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowNotificationsDrawer, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-workflow-notifications-drawer', imports: [Card, NotificationTemplate, Card], template: "<div class=\"overflow-hidden h-full w-full\">\r\n  <div\r\n    class=\"flex-1 flex justify-center items-start p-4 h-full overflow-y-auto\"\r\n  >\r\n    <div class=\"w-2/3\">\r\n      <mt-card headless>\r\n        <mt-notification-template />\r\n      </mt-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }] });
 
 class WorkflowFormDrawer {
     modal = inject(ModalService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowFormDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: WorkflowFormDrawer, isStandalone: true, selector: "mt-workflow-form-drawer", ngImport: i0, template: "<div [class]=\"modal.contentClass + ' p-4'\">\r\n  <mt-form-builder\r\n    class=\"flex-1\"\r\n    canvasStyleClass=\"!w-full\"\r\n    mode=\"manageProperties\"\r\n  />\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: FormBuilder, selector: "mt-form-builder", inputs: ["canvasStyleClass", "mode"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowFormDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: WorkflowFormDrawer, isStandalone: true, selector: "mt-workflow-form-drawer", ngImport: i0, template: "<div [class]=\"modal.contentClass + ' p-4'\">\n  <mt-form-builder\n    class=\"flex-1\"\n    canvasStyleClass=\"!w-full\"\n    mode=\"manageProperties\"\n  />\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FormBuilder, selector: "mt-form-builder", inputs: ["canvasStyleClass", "mode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowFormDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowFormDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-workflow-form-drawer', imports: [FormBuilder], template: "<div [class]=\"modal.contentClass + ' p-4'\">\r\n  <mt-form-builder\r\n    class=\"flex-1\"\r\n    canvasStyleClass=\"!w-full\"\r\n    mode=\"manageProperties\"\r\n  />\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-workflow-form-drawer', imports: [FormBuilder], template: "<div [class]=\"modal.contentClass + ' p-4'\">\n  <mt-form-builder\n    class=\"flex-1\"\n    canvasStyleClass=\"!w-full\"\n    mode=\"manageProperties\"\n  />\n</div>\n" }]
+        }] });
+
+class WorkflowNotificationsDrawer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowNotificationsDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: WorkflowNotificationsDrawer, isStandalone: true, selector: "mt-workflow-notifications-drawer", ngImport: i0, template: "<div class=\"overflow-hidden h-full w-full\">\n  <div\n    class=\"flex-1 flex justify-center items-start p-4 h-full overflow-y-auto\"\n  >\n    <div class=\"w-2/3\">\n      <mt-card headless>\n        <mt-notification-template />\n      </mt-card>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: NotificationTemplate, selector: "mt-notification-template" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowNotificationsDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-workflow-notifications-drawer', imports: [Card, NotificationTemplate, Card], template: "<div class=\"overflow-hidden h-full w-full\">\n  <div\n    class=\"flex-1 flex justify-center items-start p-4 h-full overflow-y-auto\"\n  >\n    <div class=\"w-2/3\">\n      <mt-card headless>\n        <mt-notification-template />\n      </mt-card>\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class WorkflowBuilder {
@@ -1002,10 +1660,85 @@ class WorkflowBuilder {
     notificationFacade = inject(NotificationFacade);
     formBuilderFacade = inject(FormBuilderFacade);
     transloco = inject(TranslocoService);
+    confirmationService = inject(ConfirmationService);
     modal = inject(ModalService);
-    // Main tabs for Workflow and Notification
-    mainTab = signal('workflow', ...(ngDevMode ? [{ debugName: "mainTab" }] : []));
-    mainTabsList = [
+    isPatchingStepForm = false;
+    lastAppActionDescriptorSignature = '';
+    mainTab = signal('workflow', ...(ngDevMode ? [{ debugName: "mainTab" }] : /* istanbul ignore next */ []));
+    selectedTab = signal('tab1', ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+    isPublished = signal(false, ...(ngDevMode ? [{ debugName: "isPublished" }] : /* istanbul ignore next */ []));
+    isEditingInitialNode = signal(false, ...(ngDevMode ? [{ debugName: "isEditingInitialNode" }] : /* istanbul ignore next */ []));
+    isCreatingStep = signal(false, ...(ngDevMode ? [{ debugName: "isCreatingStep" }] : /* istanbul ignore next */ []));
+    currentStepType = signal('UserInput', ...(ngDevMode ? [{ debugName: "currentStepType" }] : /* istanbul ignore next */ []));
+    draftAppActionDescriptor = signal(null, ...(ngDevMode ? [{ debugName: "draftAppActionDescriptor" }] : /* istanbul ignore next */ []));
+    nodeFields = signal({
+        name: 'name.display',
+    }, ...(ngDevMode ? [{ debugName: "nodeFields" }] : /* istanbul ignore next */ []));
+    workflow = this.workflowFacade.workflow;
+    workflows = this.workflowFacade.workflows;
+    selectedStep = this.workflowFacade.selectedStep;
+    groups = this.workflowFacade.groups;
+    roles = this.workflowFacade.roles;
+    appActionDescriptors = this.workflowFacade.appActionDescriptors;
+    selectedAppActionDescriptor = this.workflowFacade.selectedAppActionDescriptor;
+    isFlowValid = this.workflowFacade.isFlowValid;
+    loading = this.workflowFacade.isLoading('getWorkflow');
+    loadingStep = this.workflowFacade.isLoading('getStep');
+    loadingAppActions = this.workflowFacade.isLoading('getAppActions');
+    loadingAppActionDetail = this.workflowFacade.isLoading('getAppActionDetail');
+    appActionListError = this.workflowFacade.error('getAppActions');
+    appActionDetailError = this.workflowFacade.error('getAppActionDetail');
+    selectedWorkflowId = computed(() => this.workflow()?.id, ...(ngDevMode ? [{ debugName: "selectedWorkflowId" }] : /* istanbul ignore next */ []));
+    connectionFormulaSchemaId = computed(() => this.workflow()?.id, ...(ngDevMode ? [{ debugName: "connectionFormulaSchemaId" }] : /* istanbul ignore next */ []));
+    hasMultipleWorkflows = computed(() => this.workflows().length > 1, ...(ngDevMode ? [{ debugName: "hasMultipleWorkflows" }] : /* istanbul ignore next */ []));
+    isPublishDisabled = computed(() => !this.isFlowValid(), ...(ngDevMode ? [{ debugName: "isPublishDisabled" }] : /* istanbul ignore next */ []));
+    hasGroupedRoles = computed(() => this.roles().some((role) => Array.isArray(role?.items)), ...(ngDevMode ? [{ debugName: "hasGroupedRoles" }] : /* istanbul ignore next */ []));
+    stepForm = new FormGroup({
+        nameEn: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        nameAr: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        type: new FormControl('UserInput', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        targetType: new FormControl('1', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        group: new FormControl(null),
+        role: new FormControl(null),
+        sla: new FormControl(0, {
+            nonNullable: true,
+            validators: [Validators.required, Validators.min(0)],
+        }),
+    });
+    appActionSettingsForm = new FormGroup({
+        actionKey: new FormControl(null, Validators.required),
+        failureBehavior: new FormControl('Stop', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        timeoutSeconds: new FormControl(300, {
+            nonNullable: true,
+            validators: [Validators.required, Validators.min(1)],
+        }),
+    });
+    appActionRawConfigControl = new FormControl('{}', {
+        nonNullable: true,
+    });
+    appActionConfigForm = new FormGroup({});
+    showHideControl = new FormControl(false, {
+        nonNullable: true,
+    });
+    appActionConfigDefinition = signal(buildWorkflowAppActionConfigEditorDefinition(null), ...(ngDevMode ? [{ debugName: "appActionConfigDefinition" }] : /* istanbul ignore next */ []));
+    propertiesTableDataState = signal([], ...(ngDevMode ? [{ debugName: "propertiesTableDataState" }] : /* istanbul ignore next */ []));
+    propertiesTableData = computed(() => this.propertiesTableDataState(), ...(ngDevMode ? [{ debugName: "propertiesTableData" }] : /* istanbul ignore next */ []));
+    mainTabsList = computed(() => [
         {
             label: this.transloco.translate('workflow.builder.workflow'),
             value: 'workflow',
@@ -1014,224 +1747,95 @@ class WorkflowBuilder {
             label: this.transloco.translate('workflow.builder.notification'),
             value: 'notification',
         },
-    ];
-    groups = this.workflowFacade.groups;
-    roles = this.workflowFacade.roles;
-    hasGroupedRoles = computed(() => this.roles().some((role) => Array.isArray(role?.items)), ...(ngDevMode ? [{ debugName: "hasGroupedRoles" }] : []));
-    workflows = this.workflowFacade.workflows;
-    workflow = this.workflowFacade.workflow;
-    loading = this.workflowFacade.isLoading('getWorkflow');
-    loadingStep = this.workflowFacade.isLoading('getStep');
-    isFlowValid = this.workflowFacade.isFlowValid;
-    selectedStep = this.workflowFacade.selectedStep;
-    selectedWorkflowId = computed(() => this.workflow()?.id, ...(ngDevMode ? [{ debugName: "selectedWorkflowId" }] : []));
-    connectionFormulaSchemaId = computed(() => this.workflow()?.id, ...(ngDevMode ? [{ debugName: "connectionFormulaSchemaId" }] : []));
-    hasMultipleWorkflows = computed(() => this.workflows().length > 1, ...(ngDevMode ? [{ debugName: "hasMultipleWorkflows" }] : []));
-    confirmationService = inject(ConfirmationService);
-    selectedTab = signal('tab1', ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
-    nodeFields = signal({
-        name: 'name.display',
-    }, ...(ngDevMode ? [{ debugName: "nodeFields" }] : []));
-    nodeFormControl = new FormControl();
-    isPublished = signal(false, ...(ngDevMode ? [{ debugName: "isPublished" }] : []));
-    isPublishDisabled = computed(() => !this.isFlowValid(), ...(ngDevMode ? [{ debugName: "isPublishDisabled" }] : []));
-    isEditingInitialNode = signal(false, ...(ngDevMode ? [{ debugName: "isEditingInitialNode" }] : []));
-    isCreatingStep = signal(false, ...(ngDevMode ? [{ debugName: "isCreatingStep" }] : []));
-    // Properties table data - writable signal that can be updated when loading step details
-    _propertiesTableData = signal([], ...(ngDevMode ? [{ debugName: "_propertiesTableData" }] : []));
-    // Computed that initializes from workflow properties
-    propertiesTableData = computed(() => {
-        const currentData = this._propertiesTableData();
-        if (currentData.length > 0) {
-            return currentData;
-        }
-        const properties = this.workflow()?.properties || [];
-        return properties.map((prop) => ({
-            id: prop.id,
-            name: prop.property.name,
-            isVisible: false,
-            isEditable: false,
-            _original: prop, // Keep original for reference
-        }));
-    }, ...(ngDevMode ? [{ debugName: "propertiesTableData" }] : []));
-    // Table columns configuration
-    propertiesColumns = signal([
-        {
-            key: 'name',
-            label: this.transloco.translate('workflow.builder.columnName'),
-            type: 'text',
-        },
+    ], ...(ngDevMode ? [{ debugName: "mainTabsList" }] : /* istanbul ignore next */ []));
+    failureBehaviorOptions = computed(() => [
         {
-            key: 'isVisible',
-            label: this.transloco.translate('workflow.builder.columnVisible'),
-            type: 'boolean',
+            label: this.transloco.translate('workflow.builder.failureBehaviorStop'),
+            value: 'Stop',
         },
         {
-            key: 'isEditable',
-            label: this.transloco.translate('workflow.builder.columnEditable'),
-            type: 'boolean',
+            label: this.transloco.translate('workflow.builder.failureBehaviorContinue'),
+            value: 'Continue',
         },
-    ], ...(ngDevMode ? [{ debugName: "propertiesColumns" }] : []));
-    // Dynamic tabs list - notification tab only shown for non-initial nodes
+    ], ...(ngDevMode ? [{ debugName: "failureBehaviorOptions" }] : /* istanbul ignore next */ []));
     tabsList = computed(() => {
-        const baseTabs = [
+        const tabs = [
             {
                 label: this.transloco.translate('workflow.builder.tabSettings'),
                 value: 'tab1',
             },
         ];
-        if (this.isCreatingStep()) {
-            return baseTabs;
+        if (!this.isCreatingStep() && this.currentStepType() === 'UserInput') {
+            tabs.push({
+                label: this.transloco.translate('workflow.builder.form'),
+                value: 'tab2',
+            });
         }
-        baseTabs.push({
-            label: this.transloco.translate('workflow.builder.tabProperties'),
-            value: 'tab2',
-        });
-        // Add notification tab only for non-initial nodes
-        if (!this.isEditingInitialNode()) {
-            baseTabs.push({
+        if (!this.isCreatingStep() && !this.isEditingInitialNode()) {
+            tabs.push({
                 label: this.transloco.translate('workflow.builder.notification'),
                 value: 'tab3',
             });
         }
-        return baseTabs;
-    }, ...(ngDevMode ? [{ debugName: "tabsList" }] : []));
-    nodeDialogFooterConfig = {
-        showSaveButton: () => this.selectedTab() === 'tab1',
-        disableSaveButton: () => this.selectedTab() !== 'tab1' || this.nodeFormControl.invalid,
-    };
-    availableNodes = [
+        return tabs;
+    }, ...(ngDevMode ? [{ debugName: "tabsList" }] : /* istanbul ignore next */ []));
+    availableNodes = computed(() => [
         {
             id: 'FormStep',
+            type: 'UserInput',
             label: this.transloco.translate('workflow.builder.newStep'),
+            tab: [this.transloco.translate('workflow.builder.userInputTab')],
             name: {
                 en: 'Form Step',
                 ar: 'خطوة النموذج',
             },
             targetType: '1',
             icon: 'general.plus-circle',
-            color: '#000000',
+            color: '#0369A1',
         },
-    ];
-    // Base form sections - defined once for reusability
-    baseNameFields = {
-        key: 'settings',
-        type: 'none',
-        bodyClass: 'space-y-2',
-        fields: [
-            {
-                key: 'name.en',
-                label: this.transloco.translate('workflow.builder.nameEnglish'),
-                placeholder: this.transloco.translate('workflow.builder.enterNameEnglish'),
-                cssClass: 'w-full',
-                required: true,
-            },
-            {
-                key: 'name.ar',
-                label: this.transloco.translate('workflow.builder.nameArabic'),
-                placeholder: this.transloco.translate('workflow.builder.enterNameArabic'),
-                cssClass: 'w-full',
-                required: true,
-            },
-        ],
-    };
-    // Approver section with dynamic options
-    approverSection = computed(() => ({
-        key: 'approver',
-        type: 'header',
-        label: this.transloco.translate('workflow.builder.approver'),
-        headerClass: 'rounded-t-xl bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-900 border border-slate-200 border-b-0',
-        bodyClass: 'rounded-b-xl border border-slate-200 p-4 space-y-3',
-        cssClass: ' ',
-        fields: [
-            {
-                key: 'targetType',
-                type: 'radio-button',
-                orientation: 'horizontal',
-                defaultValue: '1',
-                options: [
-                    {
-                        label: this.transloco.translate('workflow.builder.group'),
-                        value: '1',
-                    },
-                    {
-                        label: this.transloco.translate('workflow.builder.role'),
-                        value: '2',
-                    },
-                ],
-                optionLabel: 'label',
-                optionValue: 'value',
-                placeholder: this.transloco.translate('workflow.builder.enter-role'),
-                cssClass: 'flex items-center gap-6 text-sm text-slate-700',
-                required: true,
-            },
-            {
-                key: 'group',
-                label: this.transloco.translate('workflow.builder.select'),
-                placeholder: this.transloco.translate('workflow.builder.selectGroup'),
-                cssClass: 'mt-2 pt-3 border-t border-slate-200 w-full',
-                required: true,
-                type: 'select',
-                options: this.groups(),
-                optionLabel: 'name.display',
-                optionValue: 'id',
-                relations: [{ key: 'targetType', value: '1', action: 'show' }],
-            },
-            {
-                key: 'role',
-                label: this.transloco.translate('workflow.builder.select'),
-                placeholder: this.transloco.translate('workflow.builder.enter-target-value'),
-                cssClass: 'mt-2 pt-3 border-t border-slate-200 w-full',
-                required: true,
-                type: 'select',
-                options: this.roles(),
-                group: this.hasGroupedRoles(),
-                optionGroupLabel: 'label',
-                optionGroupChildren: 'items',
-                optionLabel: 'name.display',
-                optionValue: 'value',
-                relations: [{ key: 'targetType', value: '2', action: 'show' }],
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "approverSection" }] : []));
-    slaSection = {
-        key: 'slaSection',
-        type: 'none',
-        bodyClass: 'space-y-1',
-        fields: [
-            {
-                key: 'sla',
-                label: this.transloco.translate('workflow.builder.sla'),
-                placeholder: this.transloco.translate('workflow.builder.enterSla'),
-                cssClass: 'w-full',
-                required: true,
+        ...this.appActionDescriptors().map((descriptor) => ({
+            id: `AppActionStep:${descriptor.actionKey}`,
+            type: 'AppAction',
+            tab: [this.transloco.translate('workflow.builder.appActionsTab')],
+            label: descriptor.displayName,
+            name: {
+                en: descriptor.displayName,
+                ar: descriptor.displayName,
+                display: descriptor.displayName,
             },
-        ],
+            appCode: descriptor.appCode,
+            actionKey: descriptor.actionKey,
+            displayName: descriptor.displayName,
+            description: descriptor.description ?? null,
+            configSchemaJson: descriptor.configSchemaJson ?? null,
+            requiredContextKeys: descriptor.requiredContextKeys ?? [],
+            supportedScopes: descriptor.supportedScopes ?? [],
+            icon: 'dev.dataflow-01',
+            color: '#B45309',
+        })),
+    ], ...(ngDevMode ? [{ debugName: "availableNodes" }] : /* istanbul ignore next */ []));
+    nodeActions = signal([
+        {
+            key: 'edit',
+            icon: 'general.edit-05',
+            variant: 'outlined',
+            size: 'small',
+            tooltip: 'Edit',
+        },
+        {
+            key: 'delete',
+            icon: 'general.trash-01',
+            variant: 'outlined',
+            size: 'small',
+            severity: 'danger',
+            tooltip: 'Delete',
+            condition: (node) => !node.isInitial,
+        },
+    ], ...(ngDevMode ? [{ debugName: "nodeActions" }] : /* istanbul ignore next */ []));
+    nodeDialogFooterConfig = {
+        showSaveButton: () => this.selectedTab() === 'tab1',
+        disableSaveButton: () => this.isNodeDialogSaveDisabled(),
     };
-    // Dynamic form configuration using computed signal
-    // Automatically rebuilds when isEditingInitialNode changes
-    nodeForm = linkedSignal(() => {
-        const sections = [this.baseNameFields];
-        // Conditionally include approver and SLA sections based on isEditingInitialNode
-        // Initial nodes only show name fields
-        if (!this.isEditingInitialNode()) {
-            sections.push(this.approverSection());
-            sections.push(this.slaSection);
-        }
-        return {
-            sections,
-            layout: {},
-        };
-    }, ...(ngDevMode ? [{ debugName: "nodeForm" }] : []));
-    // Computed signal for form state info - useful for debugging or UI indicators
-    formStateInfo = computed(() => ({
-        isInitialNode: this.isEditingInitialNode(),
-        sectionsCount: this.nodeForm().sections.length,
-        hasApproverSection: !this.isEditingInitialNode(),
-        hasSlaSection: !this.isEditingInitialNode(),
-        formMode: this.isEditingInitialNode() ? 'initial-node' : 'standard-node',
-    }), ...(ngDevMode ? [{ debugName: "formStateInfo" }] : []));
-    // Sample connection form configuration
     connectionForm = signal({
         sections: [
             {
@@ -1249,85 +1853,101 @@ class WorkflowBuilder {
                 ],
             },
         ],
-    }, ...(ngDevMode ? [{ debugName: "connectionForm" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "connectionForm" }] : /* istanbul ignore next */ []));
     connectionFormulaConfig = signal({
         codeOnly: true,
         toolbarTabs: ['functions', 'operators'],
         isProcessBuilder: true,
-    }, ...(ngDevMode ? [{ debugName: "connectionFormulaConfig" }] : []));
-    // Nodes currently in the flow (with positions) - linked to store via selectors
-    steps = computed(() => {
-        return this.workflowFacade.steps().map((step) => ({
-            ...step,
-            color: '#000000',
-        }));
-    }, ...(ngDevMode ? [{ debugName: "steps" }] : []));
-    // Connections between nodes (matching your design) - linked to store via selectors
-    connections = computed(() => {
-        return this.workflowFacade.connections().map((connection) => ({
-            ...connection,
-            from: connection.source,
-            to: connection.target,
-        }));
-    }, ...(ngDevMode ? [{ debugName: "connections" }] : []));
-    // Node Actions
-    nodeActions = signal([
-        {
-            key: 'edit',
-            icon: 'general.edit-05',
-            variant: 'outlined',
-            size: 'small',
-            tooltip: 'Edit',
-        },
-        {
-            key: 'delete',
-            icon: 'general.trash-01',
-            variant: 'outlined',
-            size: 'small',
-            severity: 'danger',
-            tooltip: 'Delete',
-            condition: (node) => !node.isInitial,
-        },
-    ], ...(ngDevMode ? [{ debugName: "nodeActions" }] : []));
-    showHideControl = new FormControl(false);
+    }, ...(ngDevMode ? [{ debugName: "connectionFormulaConfig" }] : /* istanbul ignore next */ []));
+    steps = computed(() => this.workflowFacade.steps().map((step) => ({
+        ...step,
+        color: step.type === 'AppAction' ? '#B45309' : '#0369A1',
+    })), ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    connections = computed(() => this.workflowFacade.connections().map((connection) => ({
+        ...connection,
+        from: connection.source,
+        to: connection.target,
+    })), ...(ngDevMode ? [{ debugName: "connections" }] : /* istanbul ignore next */ []));
+    currentAppActionDescriptor = computed(() => {
+        const actionKey = this.appActionSettingsForm.controls.actionKey.value;
+        if (!actionKey) {
+            return null;
+        }
+        const selectedDescriptor = this.selectedAppActionDescriptor();
+        if (selectedDescriptor?.actionKey === actionKey) {
+            return selectedDescriptor;
+        }
+        const cachedDescriptor = this.appActionDescriptors().find((descriptor) => descriptor.actionKey === actionKey);
+        if (cachedDescriptor) {
+            return cachedDescriptor;
+        }
+        const draftDescriptor = this.draftAppActionDescriptor();
+        if (draftDescriptor?.actionKey === actionKey) {
+            return draftDescriptor;
+        }
+        const step = this.selectedStep();
+        if (step?.type === 'AppAction' &&
+            step.appAction?.actionKey === actionKey) {
+            return {
+                appCode: step.appAction.appCode,
+                actionKey,
+                displayName: step.appAction.displayName ?? actionKey,
+                description: step.appAction.description ?? null,
+                configSchemaJson: step.appAction.configSchemaJson ?? null,
+                requiredContextKeys: step.appAction.requiredContextKeys ?? [],
+                supportedScopes: step.appAction.supportedScopes ?? [],
+            };
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "currentAppActionDescriptor" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Effect to initialize isPublished from workflow.isPublished
         effect(() => {
             const workflow = this.workflow();
-            if (workflow && workflow.isPublished !== undefined) {
+            if (workflow?.isPublished !== undefined) {
                 this.isPublished.set(workflow.isPublished);
             }
         });
-        // Effect to watch selectedStep and patch form when it changes
+        effect(() => {
+            if (this.mainTab() === 'workflow') {
+                this.workflowFacade.loadAppActions();
+            }
+        });
         effect(() => {
             const step = this.selectedStep();
             if (step) {
-                // Patch form with complete step data including targetType and targetValue
-                this.nodeFormControl.patchValue({
-                    name: step.name,
-                    targetType: step.targetType || '1',
-                    group: step.targetType === '1' ? parseInt(step.targetValue) : null,
-                    role: step.targetType === '2' ? step.targetValue : null,
-                    sla: step.sla,
-                });
-                // Update properties table with step's property permissions
-                const properties = this.workflow()?.properties || [];
-                const updatedTableData = properties.map((prop) => {
-                    const stepProperty = step.properties?.find((p) => p.propertyId === prop.id);
-                    return {
-                        id: prop.id,
-                        name: prop?.property?.name,
-                        isVisible: stepProperty?.isRead || false,
-                        isEditable: stepProperty?.isWrite || false,
-                        _original: prop,
-                    };
-                });
-                this._propertiesTableData.set(updatedTableData);
-                this.showHideControl.patchValue(step.hasNotification ?? false);
+                this.applyLoadedStep(step);
             }
         });
+        effect(() => {
+            if (this.currentStepType() !== 'AppAction') {
+                this.lastAppActionDescriptorSignature = '';
+                return;
+            }
+            const actionKey = this.appActionSettingsForm.controls.actionKey.value;
+            if (!actionKey) {
+                this.lastAppActionDescriptorSignature = '';
+                return;
+            }
+            const descriptor = this.currentAppActionDescriptor();
+            const signature = this.createAppActionDescriptorSignature(actionKey, descriptor?.configSchemaJson ?? null);
+            if (signature === this.lastAppActionDescriptorSignature) {
+                return;
+            }
+            this.rebuildAppActionConfigEditor(this.getCurrentAppActionConfigJson(), descriptor?.configSchemaJson ?? null);
+            this.lastAppActionDescriptorSignature = signature;
+        });
+        this.stepForm.controls.targetType.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.syncUserInputValidators());
+        this.appActionSettingsForm.controls.actionKey.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe((actionKey) => {
+            if (this.isPatchingStepForm) {
+                return;
+            }
+            this.onAppActionActionChanged(actionKey);
+        });
     }
-    // Handle main tab change (Workflow/Notification)
     onMainTabChange(tab) {
         this.mainTab.set(tab);
         if (tab === 'notification') {
@@ -1338,19 +1958,16 @@ class WorkflowBuilder {
             }
         }
     }
-    // Handle node dialog tab change (Settings/Properties/Notification)
     onNodeDialogTabChange(tab) {
         this.selectedTab.set(tab);
     }
     onPublishToggle(isPublished) {
-        // Prevent publishing if workflow is not valid
         if (isPublished && !this.isFlowValid()) {
             this.isPublished.set(false);
             return;
         }
         this.workflowFacade.publishWorkflow(isPublished).subscribe({
             error: () => {
-                // Revert the toggle on error
                 this.isPublished.set(!isPublished);
             },
         });
@@ -1358,175 +1975,102 @@ class WorkflowBuilder {
     onWorkflowChange(workflowId) {
         this.workflowFacade.selectWorkflow(workflowId);
     }
-    clearForm() {
-        // Reset isEditingInitialNode flag
-        this.isEditingInitialNode.set(false);
-        // Reset form to default values
-        this.nodeFormControl.reset({
-            name: { en: '', ar: '' },
-            targetType: '1',
-            group: null,
-            role: null,
-            sla: 0,
-        });
-        // Reset properties table to default state (all unchecked)
-        const properties = this.workflow()?.properties || [];
-        const resetTableData = properties.map((prop) => ({
-            id: prop.id,
-            name: prop?.property?.name,
-            isVisible: false,
-            isEditable: false,
-            _original: prop,
-        }));
-        this._propertiesTableData.set(resetTableData);
-        // Reset toggle controls
-        this.showHideControl.patchValue(false);
-        // Reset to first tab
-        this.selectedTab.set('tab1');
-    }
-    onPropertyCellChange(event) {
-        if (event.type !== 'boolean')
-            return;
-        switch (event.column) {
-            case 'isEditable':
-                if (event.value)
-                    event.row.isVisible = true;
-                break;
-            case 'isVisible':
-                if (!event.value)
-                    event.row.isEditable = false;
-                break;
-        }
-    }
     onStructureAction(event) {
         switch (event.action) {
-            case 'createNode':
-                if (event.data) {
-                    this.isCreatingStep.set(false);
-                    // Get form values
-                    const formValue = this.nodeFormControl.value;
-                    // Get selected properties with isVisible and isEditable flags
-                    const propertiesPayload = this.propertiesTableData()
-                        .filter((prop) => prop.isVisible || prop.isEditable)
-                        .map((prop) => ({
-                        PropertyId: prop.id,
-                        isRead: prop.isVisible,
-                        isWrite: prop.isEditable,
-                    }));
-                    // Prepare step payload
-                    const stepPayload = {
-                        name: formValue.name,
-                        targetType: formValue.targetType,
-                        targetValue: formValue.targetType === '1' ? formValue.group : formValue.role,
-                        sla: formValue.sla || 0,
-                        properties: propertiesPayload,
-                        hasNotification: this.showHideControl.value,
-                        hasForm: true,
-                    };
-                    // Create step via facade
-                    this.workflowFacade.createStep(stepPayload);
+            case 'startCreating': {
+                const stepType = normalizeWorkflowStepType(event.data?.type);
+                this.clearForm(stepType);
+                this.isCreatingStep.set(true);
+                this.applyCreateNodeDefaults(event.data);
+                return;
+            }
+            case 'startUpdating': {
+                if (!event.data) {
+                    return;
                 }
-                break;
-            case 'startUpdating':
-                if (event.data) {
-                    this.clearForm();
-                    this.isCreatingStep.set(false);
-                    const stepId = event.data.id;
-                    // Set the flag based on whether node is initial
-                    // This will trigger nodeForm to rebuild automatically via linkedSignal
-                    this.isEditingInitialNode.set(!!event.data.isInitial);
-                    // Load step data
-                    this.workflowFacade.loadStep(stepId);
-                    if (stepId) {
-                        this.notificationFacade.setModuleInfo('step', stepId);
-                        this.notificationFacade.loadBaseData();
+                this.clearForm(normalizeWorkflowStepType(event.data.type));
+                this.isCreatingStep.set(false);
+                this.isEditingInitialNode.set(!!event.data.isInitial);
+                this.configureStepTypeControl();
+                this.workflowFacade.loadStep(event.data.id);
+                if (event.data.id) {
+                    this.notificationFacade.setModuleInfo('step', event.data.id);
+                    this.notificationFacade.loadBaseData();
+                    if (event.data.type !== 'AppAction') {
                         const workflowId = this.workflow()?.id;
                         if (workflowId) {
-                            this.formBuilderFacade.setModuleInfo('processstep', stepId, 'processschema', workflowId);
+                            this.formBuilderFacade.setModuleInfo('processstep', event.data.id, 'processschema', workflowId);
                             this.formBuilderFacade.getFormConfiguration();
                         }
                     }
                 }
-                break;
-            case 'startCreating':
-                // Reset form and properties for new step
-                this.clearForm();
-                this.isCreatingStep.set(true);
-                break;
-            case 'updateNode':
-                if (event.data) {
-                    // Get form values
-                    const formValue = this.nodeFormControl.value;
-                    const stepId = event.data.id;
-                    const isInitial = !!event.data.isInitial;
-                    // Get selected properties with isVisible and isEditable flags
-                    const propertiesPayload = this.propertiesTableData()
-                        .filter((prop) => prop.isVisible || prop.isEditable)
-                        .map((prop) => ({
-                        PropertyId: prop.id,
-                        isRead: prop.isVisible,
-                        isWrite: prop.isEditable,
-                    }));
-                    // Prepare step payload
-                    const stepPayload = {
-                        name: formValue.name,
-                        targetType: formValue.targetType,
-                        targetValue: formValue.targetType === '1' ? formValue.group : formValue.role,
-                        sla: formValue.sla || event.data.sla,
-                        properties: propertiesPayload,
-                        hasNotification: this.showHideControl.value,
-                        hasForm: true,
-                    };
-                    // Update step via facade, passing isInitial flag
-                    this.workflowFacade.updateStep(stepId, stepPayload, isInitial);
+                return;
+            }
+            case 'createNode': {
+                this.isCreatingStep.set(false);
+                const stepPayload = this.buildStepPayload();
+                if (!stepPayload) {
+                    return;
+                }
+                this.workflowFacade.createStep(stepPayload);
+                return;
+            }
+            case 'updateNode': {
+                if (!event.data?.id) {
+                    return;
                 }
-                break;
-            case 'deleteNode':
-                if (event.data) {
-                    const nodeIdToDelete = event.data.id;
-                    this.confirmationService.confirmDelete({
-                        type: 'dialog',
-                        accept: () => {
-                            this.workflowFacade.deleteStep(nodeIdToDelete);
-                        },
-                        reject: () => { },
-                    });
+                const stepPayload = this.buildStepPayload();
+                if (!stepPayload) {
+                    return;
                 }
-                break;
-            case 'createConnection':
-                if (event.data) {
-                    // Create connection in store
-                    const connectionPayload = {
-                        sourceStepId: event.data.from,
-                        targetStepId: event.data.to,
-                        priority: event.data.priority ?? 1,
-                        formula: event.data.formula ?? null,
-                    };
-                    this.workflowFacade.createConnection(connectionPayload);
+                this.workflowFacade.updateStep(event.data.id, stepPayload, !!event.data.isInitial);
+                return;
+            }
+            case 'deleteNode': {
+                if (!event.data) {
+                    return;
                 }
-                break;
-            case 'updateConnection':
-                if (event.data) {
-                    // Update connection in store
-                    const connectionId = event.data.id;
-                    const updatePayload = {
-                        sourceStepId: event.data.from,
-                        targetStepId: event.data.to,
-                        priority: event.data.priority ?? 1,
-                        formula: event.data.formula ?? null,
-                    };
-                    this.workflowFacade.updateConnection(connectionId, updatePayload);
+                this.confirmationService.confirmDelete({
+                    type: 'dialog',
+                    accept: () => {
+                        this.workflowFacade.deleteStep(event.data.id);
+                    },
+                    reject: () => { },
+                });
+                return;
+            }
+            case 'createConnection': {
+                if (!event.data) {
+                    return;
+                }
+                this.workflowFacade.createConnection({
+                    sourceStepId: event.data.from,
+                    targetStepId: event.data.to,
+                    priority: event.data.priority ?? 1,
+                    formula: event.data.formula ?? null,
+                });
+                return;
+            }
+            case 'updateConnection': {
+                if (!event.data) {
+                    return;
                 }
-                break;
-            case 'deleteConnection':
-                if (event.data) {
-                    const connectionIdToDelete = event.data.id;
-                    // Delete connection from store
-                    this.workflowFacade.deleteConnection(connectionIdToDelete);
+                this.workflowFacade.updateConnection(event.data.id, {
+                    sourceStepId: event.data.from,
+                    targetStepId: event.data.to,
+                    priority: event.data.priority ?? 1,
+                    formula: event.data.formula ?? null,
+                });
+                return;
+            }
+            case 'deleteConnection': {
+                if (event.data?.id) {
+                    this.workflowFacade.deleteConnection(event.data.id);
                 }
-                break;
+                return;
+            }
             default:
-                break;
+                return;
         }
     }
     openNotificationsModal() {
@@ -1539,10 +2083,7 @@ class WorkflowBuilder {
             appendTo: '#page-content',
             inputValues: {},
         });
-        notificationsDialogRef.onClose.subscribe((result) => {
-            if (result?.saved) {
-            }
-        });
+        notificationsDialogRef.onClose.subscribe(() => { });
     }
     openFormModal() {
         const formDialogRef = this.modal.openModal(WorkflowFormDrawer, 'drawer', {
@@ -1556,10 +2097,394 @@ class WorkflowBuilder {
         });
         formDialogRef.onClose.subscribe(() => { });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkflowBuilder, isStandalone: true, selector: "mt-workflow-builder", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\r\n  <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\r\n    <!-- Main Tabs at top center -->\r\n    <div class=\"flex justify-center w-full py-2\">\r\n      <mt-tabs\r\n        [active]=\"mainTab()\"\r\n        (activeChange)=\"onMainTabChange($event)\"\r\n        [options]=\"mainTabsList\"\r\n        size=\"large\"\r\n      ></mt-tabs>\r\n    </div>\r\n    @switch (mainTab()) {\r\n      @case (\"workflow\") {\r\n        @if (!loading()) {\r\n          <mt-structure-builder\r\n            class=\"flex-1\"\r\n            [availableNodes]=\"availableNodes\"\r\n            [connectionForm]=\"connectionForm()\"\r\n            [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\r\n            [connectionFormulaConfig]=\"connectionFormulaConfig()\"\r\n            [nodeActions]=\"nodeActions()\"\r\n            [nodes]=\"steps()\"\r\n            [connections]=\"connections()\"\r\n            (action)=\"onStructureAction($event)\"\r\n            [addModalType]=\"'drawer'\"\r\n            [addModalStyleClass]=\"'!w-[25rem] !absolute  !shadow-none'\"\r\n            [updateModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\r\n            [addModalHeader]=\"'workflow.builder.addStep' | transloco\"\r\n            [updateModalHeader]=\"'workflow.builder.editStep' | transloco\"\r\n            [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\r\n            [appendTo]=\"'page-content'\"\r\n            [nodeFields]=\"nodeFields()\"\r\n            [availableTabsClass]=\"\r\n              hasMultipleWorkflows() ? 'absolute top-30 start-4 z-1 w-64' : ''\r\n            \"\r\n            [layoutDirection]=\"'LR'\"\r\n          >\r\n            <div flowContent>\r\n              @if (hasMultipleWorkflows()) {\r\n                <div class=\"absolute top-4 start-4 z-10\">\r\n                  <mt-card class=\"w-64\">\r\n                    <!-- <div class=\"flex items-center gap-3\">\r\n                         <label class=\"text-lg font-medium\">{{\r\n                          'workflow.builder.selectWorkflow' | transloco\r\n                        }}</label>\r\n                    </div> -->\r\n                    <mt-select-field\r\n                      [options]=\"workflows()\"\r\n                      optionLabel=\"name.display\"\r\n                      optionValue=\"id\"\r\n                      [ngModel]=\"selectedWorkflowId()\"\r\n                      (ngModelChange)=\"onWorkflowChange($event)\"\r\n                      class=\"mt-2\"\r\n                    />\r\n                  </mt-card>\r\n                </div>\r\n              }\r\n              <div class=\"absolute top-4 end-4 z-10\">\r\n                <div class=\"flex flex-col gap-2 w-80\">\r\n                  <mt-card>\r\n                    <div class=\"flex items-center gap-10\">\r\n                      <div class=\"flex items-center gap-2\">\r\n                        <mt-button\r\n                          [severity]=\"'secondary'\"\r\n                          icon=\"dev.dataflow-01\"\r\n                        />\r\n                        <label>{{\r\n                          \"workflow.builder.enableWorkflow\" | transloco\r\n                        }}</label>\r\n                      </div>\r\n                      <mt-toggle-field\r\n                        [ngModel]=\"isPublished()\"\r\n                        (ngModelChange)=\"onPublishToggle($event)\"\r\n                        [disabled]=\"isPublishDisabled()\"\r\n                      ></mt-toggle-field>\r\n                    </div>\r\n                  </mt-card>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-template\r\n              #nodeDialog\r\n              let-close=\"close\"\r\n              let-save=\"save\"\r\n              let-node=\"node\"\r\n              let-drawerController=\"drawerController\"\r\n            >\r\n              <div class=\"p-4\">\r\n                @if (loadingStep()) {\r\n                  <!-- Loading skeleton -->\r\n                  <div class=\"space-y-4\">\r\n                    <!-- Tabs skeleton -->\r\n                    <div class=\"flex gap-2 mb-4\">\r\n                      <p-skeleton\r\n                        width=\"6rem\"\r\n                        height=\"2.5rem\"\r\n                        borderRadius=\"0.5rem\"\r\n                      ></p-skeleton>\r\n                      <p-skeleton\r\n                        width=\"8rem\"\r\n                        height=\"2.5rem\"\r\n                        borderRadius=\"0.5rem\"\r\n                      ></p-skeleton>\r\n                    </div>\r\n                    <!-- Form fields skeleton -->\r\n                    <div class=\"space-y-4\">\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"8rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"8rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"10rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"3rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"6rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"4rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                } @else {\r\n                  <!-- Actual content -->\r\n                  <mt-tabs\r\n                    [active]=\"selectedTab()\"\r\n                    (activeChange)=\"onNodeDialogTabChange($event)\"\r\n                    [options]=\"tabsList()\"\r\n                    size=\"large\"\r\n                  ></mt-tabs>\r\n                  @switch (selectedTab()) {\r\n                    @case (\"tab1\") {\r\n                      <div class=\"mt-4\">\r\n                        <mt-dynamic-form\r\n                          [formConfig]=\"nodeForm()\"\r\n                          [formControl]=\"nodeFormControl\"\r\n                        ></mt-dynamic-form>\r\n                      </div>\r\n                    }\r\n                    @case (\"tab2\") {\r\n                      <div class=\"mt-4\">\r\n                        <mt-card>\r\n                          <div class=\"flex items-center gap-4\">\r\n                            <div class=\"flex flex-1 items-center gap-3\">\r\n                              <mt-button\r\n                                [severity]=\"'secondary'\"\r\n                                icon=\"file.file-check-02\"\r\n                              />\r\n                              <div class=\"flex flex-col\">\r\n                                <label class=\"font-medium\">{{\r\n                                  t(\"configureForm\")\r\n                                }}</label>\r\n                                <span class=\"text-sm text-muted-color\">{{\r\n                                  t(\"configureForm-description\")\r\n                                }}</span>\r\n                              </div>\r\n                            </div>\r\n                          </div>\r\n                          <div class=\"mt-3\">\r\n                            <mt-button\r\n                              [label]=\"t('configureForm')\"\r\n                              size=\"small\"\r\n                              (onClick)=\"openFormModal()\"\r\n                            ></mt-button>\r\n                          </div>\r\n                        </mt-card>\r\n                      </div>\r\n\r\n                      <!-- Properties table (hidden in manageProperties mode) -->\r\n                      <!-- <div class=\"mt-2\">\r\n                        <mt-table\r\n                          [data]=\"propertiesTableData()\"\r\n                          [columns]=\"propertiesColumns()\"\r\n                          [selectableRows]=\"false\"\r\n                          [showGridlines]=\"true\"\r\n                          [stripedRows]=\"true\"\r\n                          (cellChange)=\"onPropertyCellChange($event)\"\r\n                        ></mt-table>\r\n                      </div> -->\r\n                    }\r\n                    @case (\"tab3\") {\r\n                      <div class=\"mt-4\">\r\n                        <mt-toggle-field\r\n                          toggleShape=\"card\"\r\n                          [label]=\"t('show-hide')\"\r\n                          [descriptionCard]=\"t('show-hide-notifications')\"\r\n                          icon=\"general.eye\"\r\n                          [formControl]=\"showHideControl\"\r\n                        >\r\n                          <ng-template #toggleCardBottom>\r\n                            @if (showHideControl.value) {\r\n                              <div class=\"mt-3\">\r\n                                <mt-button\r\n                                  [label]=\"t('configureNotifications')\"\r\n                                  size=\"small\"\r\n                                  (onClick)=\"openNotificationsModal()\"\r\n                                ></mt-button>\r\n                              </div>\r\n                            }\r\n                          </ng-template>\r\n                        </mt-toggle-field>\r\n                      </div>\r\n                    }\r\n                  }\r\n                }\r\n              </div>\r\n            </ng-template>\r\n          </mt-structure-builder>\r\n        } @else {\r\n          <p-skeleton width=\"100%\" height=\"50rem\" />\r\n        }\r\n      }\r\n      @case (\"notification\") {\r\n        <div class=\"flex-1 flex justify-center items-start p-4\">\r\n          <div class=\"w-1/2 max-[1025px]:w-full\">\r\n            <mt-card [title]=\"t('notifications')\">\r\n              <mt-notification-template />\r\n            </mt-card>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NotificationTemplate, selector: "mt-notification-template" }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    getStepBadgeClass(type) {
+        return type === 'AppAction'
+            ? 'inline-flex rounded-full bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-800'
+            : 'inline-flex rounded-full bg-sky-100 px-2 py-1 text-xs font-semibold text-sky-800';
+    }
+    getStepCardTitle(step) {
+        return this.resolveDisplayName(step.name);
+    }
+    getStepCardSubtitle(step) {
+        if (step.type !== 'AppAction') {
+            return null;
+        }
+        return step.appAction?.displayName || step.appAction?.actionKey || null;
+    }
+    getStepTypeLabel(type) {
+        return this.transloco.translate(type === 'AppAction'
+            ? 'workflow.builder.stepTypeAppAction'
+            : 'workflow.builder.stepTypeUserInput');
+    }
+    getAppActionConfigControl(key) {
+        return this.appActionConfigForm.get(key);
+    }
+    getAppActionEnumOptions(field) {
+        return (field.enumValues ?? []).map((value) => ({
+            label: String(value),
+            value,
+        }));
+    }
+    getAppActionDescription() {
+        return this.currentAppActionDescriptor()?.description ?? null;
+    }
+    getAppActionDisplayName() {
+        return (this.currentAppActionDescriptor()?.displayName ||
+            this.appActionSettingsForm.controls.actionKey.value ||
+            this.transloco.translate('workflow.builder.appActionUnavailable'));
+    }
+    getAppActionKey() {
+        return this.appActionSettingsForm.controls.actionKey.value ?? '';
+    }
+    getAppActionConfigMessages() {
+        const definition = this.appActionConfigDefinition();
+        const serialization = serializeWorkflowAppActionConfigValue(this.appActionConfigForm.getRawValue(), definition, this.appActionRawConfigControl.value);
+        return Array.from(new Set([
+            ...definition.errors,
+            ...(this.appActionDetailError() ? [this.appActionDetailError()] : []),
+            ...serialization.errors,
+        ]));
+    }
+    getAppActionDiscoveryMessage() {
+        if (this.currentStepType() !== 'AppAction') {
+            return null;
+        }
+        if (this.appActionListError()) {
+            return this.appActionListError();
+        }
+        return null;
+    }
+    clearForm(stepType = 'UserInput') {
+        const defaults = createDefaultWorkflowStepEditorValue();
+        this.isPatchingStepForm = true;
+        this.isEditingInitialNode.set(false);
+        this.currentStepType.set(stepType);
+        this.draftAppActionDescriptor.set(null);
+        this.selectedTab.set('tab1');
+        this.stepForm.reset({
+            nameEn: defaults.name['en'],
+            nameAr: defaults.name['ar'],
+            type: stepType,
+            targetType: defaults.targetType,
+            group: defaults.group,
+            role: defaults.role,
+            sla: defaults.sla,
+        }, { emitEvent: false });
+        this.configureStepTypeControl();
+        this.resetPropertiesTable();
+        this.showHideControl.setValue(false, { emitEvent: false });
+        this.resetAppActionState();
+        this.isPatchingStepForm = false;
+        this.syncUserInputValidators();
+        if (stepType === 'AppAction') {
+            this.ensureAppActionDiscoveryLoaded();
+        }
+    }
+    applyLoadedStep(step) {
+        const editorState = mapWorkflowStepToEditorState(step);
+        const stepType = step.isInitial
+            ? 'UserInput'
+            : editorState.stepFormValue.type;
+        const descriptor = this.resolveDescriptorForActionKey(editorState.appActionValue.actionKey, step);
+        this.isPatchingStepForm = true;
+        this.isEditingInitialNode.set(!!step.isInitial);
+        this.currentStepType.set(stepType);
+        this.selectedTab.set('tab1');
+        this.stepForm.reset({
+            nameEn: editorState.stepFormValue.name['en'] ?? '',
+            nameAr: editorState.stepFormValue.name['ar'] ?? '',
+            type: stepType,
+            targetType: editorState.stepFormValue.targetType ?? '1',
+            group: editorState.stepFormValue.group,
+            role: editorState.stepFormValue.role,
+            sla: editorState.stepFormValue.sla,
+        }, { emitEvent: false });
+        this.configureStepTypeControl();
+        this.populatePropertiesTable(step);
+        this.showHideControl.setValue(step.hasNotification ?? false, {
+            emitEvent: false,
+        });
+        this.appActionSettingsForm.reset({
+            actionKey: editorState.appActionValue.actionKey,
+            failureBehavior: editorState.appActionValue.failureBehavior,
+            timeoutSeconds: editorState.appActionValue.timeoutSeconds,
+        }, { emitEvent: false });
+        this.rebuildAppActionConfigEditor(editorState.appActionValue.configJson, descriptor?.configSchemaJson ?? step.appAction?.configSchemaJson ?? null);
+        this.lastAppActionDescriptorSignature =
+            this.createAppActionDescriptorSignature(editorState.appActionValue.actionKey, descriptor?.configSchemaJson ??
+                step.appAction?.configSchemaJson ??
+                null);
+        this.isPatchingStepForm = false;
+        this.syncUserInputValidators();
+        if (stepType === 'AppAction') {
+            this.ensureAppActionDiscoveryLoaded();
+            this.ensureAppActionDetailLoaded(editorState.appActionValue.actionKey);
+        }
+    }
+    onAppActionActionChanged(actionKey) {
+        this.selectedTab.set('tab1');
+        this.lastAppActionDescriptorSignature = '';
+        this.rebuildAppActionConfigEditor(DEFAULT_APP_ACTION_EDITOR_VALUE.configJson, this.resolveDescriptorForActionKey(actionKey)?.configSchemaJson ?? null);
+        if (actionKey) {
+            this.ensureAppActionDetailLoaded(actionKey);
+        }
+    }
+    applyCreateNodeDefaults(nodeData) {
+        if (!nodeData) {
+            return;
+        }
+        const stepType = normalizeWorkflowStepType(nodeData.type);
+        if (stepType !== 'AppAction') {
+            return;
+        }
+        const actionKey = typeof nodeData.actionKey === 'string' ? nodeData.actionKey : null;
+        const displayName = typeof nodeData.displayName === 'string'
+            ? nodeData.displayName
+            : typeof nodeData.label === 'string'
+                ? nodeData.label
+                : '';
+        this.draftAppActionDescriptor.set({
+            appCode: typeof nodeData.appCode === 'string' ? nodeData.appCode : 'pplus',
+            actionKey: actionKey ?? '',
+            displayName,
+            description: typeof nodeData.description === 'string' ? nodeData.description : null,
+            configSchemaJson: typeof nodeData.configSchemaJson === 'string'
+                ? nodeData.configSchemaJson
+                : null,
+            requiredContextKeys: Array.isArray(nodeData.requiredContextKeys)
+                ? nodeData.requiredContextKeys.map(String)
+                : [],
+            supportedScopes: Array.isArray(nodeData.supportedScopes)
+                ? nodeData.supportedScopes.map(String)
+                : [],
+        });
+        this.isPatchingStepForm = true;
+        this.stepForm.patchValue({
+            nameEn: displayName,
+            nameAr: displayName,
+            type: 'AppAction',
+        }, { emitEvent: false });
+        this.appActionSettingsForm.patchValue({
+            actionKey,
+            failureBehavior: DEFAULT_APP_ACTION_EDITOR_VALUE.failureBehavior,
+            timeoutSeconds: DEFAULT_APP_ACTION_EDITOR_VALUE.timeoutSeconds,
+        }, { emitEvent: false });
+        this.isPatchingStepForm = false;
+        this.rebuildAppActionConfigEditor(DEFAULT_APP_ACTION_EDITOR_VALUE.configJson, this.draftAppActionDescriptor()?.configSchemaJson ?? null);
+        this.ensureAppActionDetailLoaded(actionKey);
+    }
+    resetPropertiesTable() {
+        const properties = this.workflow()?.properties ?? [];
+        this.propertiesTableDataState.set(properties.map((property) => ({
+            id: property.id,
+            name: property.property.name,
+            isVisible: false,
+            isEditable: false,
+            _original: property,
+        })));
+    }
+    populatePropertiesTable(step) {
+        const properties = this.workflow()?.properties ?? [];
+        this.propertiesTableDataState.set(properties.map((property) => {
+            const stepProperty = step.properties?.find((item) => item.propertyId === property.id);
+            return {
+                id: property.id,
+                name: property.property.name,
+                isVisible: stepProperty?.isRead || false,
+                isEditable: stepProperty?.isWrite || false,
+                _original: property,
+            };
+        }));
+    }
+    configureStepTypeControl() {
+        if (this.isEditingInitialNode()) {
+            this.stepForm.controls.type.disable({ emitEvent: false });
+            return;
+        }
+        this.stepForm.controls.type.enable({ emitEvent: false });
+    }
+    syncUserInputValidators() {
+        const groupControl = this.stepForm.controls.group;
+        const roleControl = this.stepForm.controls.role;
+        const targetType = this.stepForm.controls.targetType.value;
+        groupControl.clearValidators();
+        roleControl.clearValidators();
+        if (this.currentStepType() === 'UserInput' &&
+            !this.isEditingInitialNode() &&
+            targetType === '1') {
+            groupControl.addValidators(Validators.required);
+        }
+        if (this.currentStepType() === 'UserInput' &&
+            !this.isEditingInitialNode() &&
+            targetType === '2') {
+            roleControl.addValidators(Validators.required);
+        }
+        groupControl.updateValueAndValidity({ emitEvent: false });
+        roleControl.updateValueAndValidity({ emitEvent: false });
+    }
+    resetAppActionState() {
+        this.appActionSettingsForm.reset({
+            actionKey: DEFAULT_APP_ACTION_EDITOR_VALUE.actionKey,
+            failureBehavior: DEFAULT_APP_ACTION_EDITOR_VALUE.failureBehavior,
+            timeoutSeconds: DEFAULT_APP_ACTION_EDITOR_VALUE.timeoutSeconds,
+        }, { emitEvent: false });
+        this.rebuildAppActionConfigEditor(DEFAULT_APP_ACTION_EDITOR_VALUE.configJson, null);
+        this.lastAppActionDescriptorSignature = '';
+    }
+    rebuildAppActionConfigEditor(configJson, configSchemaJson) {
+        const definition = buildWorkflowAppActionConfigEditorDefinition(configSchemaJson);
+        const editorValue = mapWorkflowAppActionConfigJsonToEditorValue(configJson, definition);
+        Object.keys(this.appActionConfigForm.controls).forEach((key) => {
+            this.appActionConfigForm.removeControl(key);
+        });
+        definition.fields.forEach((field) => {
+            this.appActionConfigForm.addControl(field.key, new FormControl(editorValue.fields[field.key] ?? null, {
+                validators: field.required ? [Validators.required] : [],
+            }));
+        });
+        this.appActionRawConfigControl.setValue(editorValue.rawConfigJson, {
+            emitEvent: false,
+        });
+        this.appActionConfigDefinition.set(definition);
+    }
+    ensureAppActionDiscoveryLoaded() {
+        this.workflowFacade.loadAppActions();
+    }
+    ensureAppActionDetailLoaded(actionKey) {
+        if (!actionKey) {
+            return;
+        }
+        const cachedDescriptor = this.resolveDescriptorForActionKey(actionKey);
+        if (cachedDescriptor?.configSchemaJson) {
+            return;
+        }
+        this.workflowFacade.loadAppActionDetail(actionKey);
+    }
+    resolveDescriptorForActionKey(actionKey, step) {
+        if (!actionKey) {
+            return null;
+        }
+        const selectedDescriptor = this.selectedAppActionDescriptor();
+        if (selectedDescriptor?.actionKey === actionKey) {
+            return selectedDescriptor;
+        }
+        const cachedDescriptor = this.appActionDescriptors().find((descriptor) => descriptor.actionKey === actionKey);
+        if (cachedDescriptor) {
+            return cachedDescriptor;
+        }
+        const currentStep = step ?? this.selectedStep();
+        if (currentStep?.type === 'AppAction' &&
+            currentStep.appAction?.actionKey === actionKey) {
+            return {
+                appCode: currentStep.appAction.appCode,
+                actionKey,
+                displayName: currentStep.appAction.displayName ?? actionKey,
+                description: currentStep.appAction.description ?? null,
+                configSchemaJson: currentStep.appAction.configSchemaJson ?? null,
+                requiredContextKeys: currentStep.appAction.requiredContextKeys ?? [],
+                supportedScopes: currentStep.appAction.supportedScopes ?? [],
+            };
+        }
+        return null;
+    }
+    buildStepPayload() {
+        if (this.isNodeDialogSaveDisabled()) {
+            return null;
+        }
+        const formValue = this.stepForm.getRawValue();
+        const appActionConfig = serializeWorkflowAppActionConfigValue(this.appActionConfigForm.getRawValue(), this.appActionConfigDefinition(), this.appActionRawConfigControl.value);
+        return buildWorkflowStepPayload({
+            formValue: {
+                name: {
+                    en: formValue.nameEn,
+                    ar: formValue.nameAr,
+                },
+                type: normalizeWorkflowStepType(formValue.type),
+                targetType: formValue.targetType || '1',
+                group: formValue.group,
+                role: this.normalizeRoleValue(formValue.role),
+                sla: Number(formValue.sla ?? 0),
+            },
+            properties: this.buildPropertiesPayload(),
+            hasNotification: this.showHideControl.value,
+            appActionValue: this.currentStepType() === 'AppAction'
+                ? {
+                    actionKey: this.appActionSettingsForm.controls.actionKey.value,
+                    failureBehavior: this.appActionSettingsForm.controls.failureBehavior.value,
+                    timeoutSeconds: Number(this.appActionSettingsForm.controls.timeoutSeconds.value ?? 300),
+                    configJson: appActionConfig.configJson,
+                }
+                : null,
+        });
+    }
+    buildPropertiesPayload() {
+        return this.propertiesTableData()
+            .filter((property) => property.isVisible || property.isEditable)
+            .map((property) => ({
+            PropertyId: property.id,
+            isRead: property.isVisible,
+            isWrite: property.isEditable,
+        }));
+    }
+    getCurrentAppActionConfigJson() {
+        const definition = this.appActionConfigDefinition();
+        if (definition.mode === 'raw') {
+            return this.appActionRawConfigControl.value;
+        }
+        return serializeWorkflowAppActionConfigValue(this.appActionConfigForm.getRawValue(), definition, this.appActionRawConfigControl.value).configJson;
+    }
+    createAppActionDescriptorSignature(actionKey, configSchemaJson) {
+        return `${actionKey ?? ''}::${configSchemaJson ?? ''}`;
+    }
+    isNodeDialogSaveDisabled() {
+        if (this.selectedTab() !== 'tab1' || this.loadingStep()) {
+            return true;
+        }
+        if (this.stepForm.controls.nameEn.invalid ||
+            this.stepForm.controls.nameAr.invalid) {
+            return true;
+        }
+        if (this.currentStepType() === 'UserInput') {
+            if (!this.isEditingInitialNode() && this.stepForm.controls.sla.invalid) {
+                return true;
+            }
+            if (this.isEditingInitialNode()) {
+                return false;
+            }
+            return this.stepForm.controls.targetType.value === '1'
+                ? this.stepForm.controls.group.invalid
+                : this.stepForm.controls.role.invalid;
+        }
+        if (this.stepForm.controls.sla.invalid) {
+            return true;
+        }
+        if (!!this.getAppActionDiscoveryMessage()) {
+            return true;
+        }
+        if (this.appActionSettingsForm.invalid) {
+            return true;
+        }
+        return this.getAppActionConfigMessages().length > 0;
+    }
+    normalizeRoleValue(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        return String(value);
+    }
+    resolveDisplayName(name) {
+        if (typeof name === 'string') {
+            return name;
+        }
+        if (name && typeof name === 'object') {
+            return name['display'] || name['en'] || name['ar'] || '';
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkflowBuilder, isStandalone: true, selector: "mt-workflow-builder", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\n  <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\n    <div class=\"flex justify-center w-full py-2\">\n      <mt-tabs\n        [active]=\"mainTab()\"\n        (activeChange)=\"onMainTabChange($event)\"\n        [options]=\"mainTabsList()\"\n        size=\"large\"\n      ></mt-tabs>\n    </div>\n    @switch (mainTab()) {\n      @case (\"workflow\") {\n        @if (!loading()) {\n          <mt-structure-builder\n            class=\"flex-1\"\n            [availableNodes]=\"availableNodes()\"\n            [availableNodesLabel]=\"t('stepTemplates')\"\n            [connectionForm]=\"connectionForm()\"\n            [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\n            [connectionFormulaConfig]=\"connectionFormulaConfig()\"\n            [nodeActions]=\"nodeActions()\"\n            [nodes]=\"steps()\"\n            [connections]=\"connections()\"\n            (action)=\"onStructureAction($event)\"\n            [addModalType]=\"'drawer'\"\n            [addModalStyleClass]=\"'!w-[25rem] !absolute  !shadow-none'\"\n            [updateModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\n            [addModalHeader]=\"'workflow.builder.addStep' | transloco\"\n            [updateModalHeader]=\"'workflow.builder.editStep' | transloco\"\n            [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\n            [appendTo]=\"'page-content'\"\n            [nodeFields]=\"nodeFields()\"\n            [availableTabsClass]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\n            [layoutDirection]=\"'LR'\"\n          >\n            <div flowContent class=\"pointer-events-none\">\n              @if (hasMultipleWorkflows()) {\n                <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\n                  <mt-card class=\"w-64\">\n                    <mt-select-field\n                      [options]=\"workflows()\"\n                      optionLabel=\"name.display\"\n                      optionValue=\"id\"\n                      [ngModel]=\"selectedWorkflowId()\"\n                      (ngModelChange)=\"onWorkflowChange($event)\"\n                      class=\"mt-2\"\n                    />\n                  </mt-card>\n                </div>\n              }\n              <div class=\"pointer-events-auto absolute top-4 end-4 z-10\">\n                <div class=\"flex flex-col gap-2 w-80\">\n                  <mt-card>\n                    <div class=\"flex items-center gap-10\">\n                      <div class=\"flex items-center gap-2\">\n                        <mt-button\n                          [severity]=\"'secondary'\"\n                          icon=\"dev.dataflow-01\"\n                        />\n                        <label>{{\n                          \"workflow.builder.enableWorkflow\" | transloco\n                        }}</label>\n                      </div>\n                      <mt-toggle-field\n                        [ngModel]=\"isPublished()\"\n                        (ngModelChange)=\"onPublishToggle($event)\"\n                        [disabled]=\"isPublishDisabled()\"\n                      ></mt-toggle-field>\n                    </div>\n                  </mt-card>\n                </div>\n              </div>\n            </div>\n            <ng-template\n              #nodeTemplate\n              let-node\n              let-actions=\"actions\"\n              let-onAction=\"onAction\"\n            >\n              <div class=\"min-w-[17rem] overflow-hidden rounded-2xl bg-content\">\n                <div class=\"space-y-3 px-4 py-4\">\n                  <span [class]=\"getStepBadgeClass(node.type)\">\n                    {{ getStepTypeLabel(node.type) }}\n                  </span>\n                  <div class=\"space-y-1\">\n                    <div class=\"text-base font-semibold text-surface-900\">\n                      {{ getStepCardTitle(node) }}\n                    </div>\n                    @if (getStepCardSubtitle(node); as subtitle) {\n                      <div class=\"text-sm text-muted-color\">\n                        {{ subtitle }}\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div\n                  class=\"flex min-h-[3rem] items-center justify-end gap-2 border-t border-surface-200 bg-surface-50 px-4 py-3\"\n                >\n                  @for (action of actions; track action.key) {\n                    <mt-button\n                      [size]=\"action?.size || 'small'\"\n                      [variant]=\"action?.variant\"\n                      [icon]=\"action?.icon\"\n                      [tooltip]=\"action?.tooltip\"\n                      [severity]=\"action?.severity\"\n                      (onClick)=\"onAction(action, node)\"\n                    >\n                    </mt-button>\n                  }\n                </div>\n              </div>\n            </ng-template>\n            <ng-template\n              #nodeDialog\n              let-close=\"close\"\n              let-save=\"save\"\n              let-node=\"node\"\n              let-drawerController=\"drawerController\"\n            >\n              <div class=\"p-4\">\n                @if (loadingStep()) {\n                  <div class=\"space-y-4\">\n                    <div class=\"flex gap-2 mb-4\">\n                      <p-skeleton\n                        width=\"6rem\"\n                        height=\"2.5rem\"\n                        borderRadius=\"0.5rem\"\n                      ></p-skeleton>\n                      <p-skeleton\n                        width=\"8rem\"\n                        height=\"2.5rem\"\n                        borderRadius=\"0.5rem\"\n                      ></p-skeleton>\n                    </div>\n                    <!-- Form fields skeleton -->\n                    <div class=\"space-y-4\">\n                      <div>\n                        <p-skeleton\n                          width=\"8rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"8rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"10rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"3rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"6rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"4rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                    </div>\n                  </div>\n                } @else {\n                  <mt-tabs\n                    [active]=\"selectedTab()\"\n                    (activeChange)=\"onNodeDialogTabChange($event)\"\n                    [options]=\"tabsList()\"\n                    size=\"large\"\n                  ></mt-tabs>\n                  @switch (selectedTab()) {\n                    @case (\"tab1\") {\n                      <div class=\"mt-4 space-y-4\">\n                        <div class=\"grid gap-3\">\n                          <mt-text-field\n                            [label]=\"t('nameEnglish')\"\n                            [placeholder]=\"t('enterNameEnglish')\"\n                            [formControl]=\"stepForm.controls.nameEn\"\n                            [required]=\"true\"\n                          ></mt-text-field>\n                          <mt-text-field\n                            [label]=\"t('nameArabic')\"\n                            [placeholder]=\"t('enterNameArabic')\"\n                            [formControl]=\"stepForm.controls.nameAr\"\n                            [required]=\"true\"\n                          ></mt-text-field>\n                        </div>\n\n                        @if (currentStepType() === \"UserInput\") {\n                          @if (!isEditingInitialNode()) {\n                            <mt-card>\n                              <div class=\"space-y-4\">\n                                <div\n                                  class=\"text-sm font-semibold text-surface-900\"\n                                >\n                                  {{ t(\"approver\") }}\n                                </div>\n                                <mt-select-field\n                                  [label]=\"t('approver')\"\n                                  [options]=\"[\n                                    { label: t('group'), value: '1' },\n                                    { label: t('role'), value: '2' },\n                                  ]\"\n                                  optionLabel=\"label\"\n                                  optionValue=\"value\"\n                                  [formControl]=\"stepForm.controls.targetType\"\n                                  [required]=\"true\"\n                                ></mt-select-field>\n\n                                @if (\n                                  stepForm.controls.targetType.value === \"1\"\n                                ) {\n                                  <mt-select-field\n                                    [label]=\"t('group')\"\n                                    [placeholder]=\"t('selectGroup')\"\n                                    [options]=\"groups()\"\n                                    optionLabel=\"name.display\"\n                                    optionValue=\"id\"\n                                    [formControl]=\"stepForm.controls.group\"\n                                    [required]=\"true\"\n                                  ></mt-select-field>\n                                } @else {\n                                  <mt-select-field\n                                    [label]=\"t('role')\"\n                                    [placeholder]=\"t('selectRole')\"\n                                    [options]=\"roles()\"\n                                    [group]=\"hasGroupedRoles()\"\n                                    optionGroupLabel=\"label\"\n                                    optionGroupChildren=\"items\"\n                                    optionLabel=\"name.display\"\n                                    optionValue=\"value\"\n                                    [formControl]=\"stepForm.controls.role\"\n                                    [required]=\"true\"\n                                  ></mt-select-field>\n                                }\n\n                                <mt-number-field\n                                  [label]=\"t('sla')\"\n                                  [placeholder]=\"t('enterSla')\"\n                                  [formControl]=\"stepForm.controls.sla\"\n                                  [required]=\"true\"\n                                  [min]=\"0\"\n                                ></mt-number-field>\n                              </div>\n                            </mt-card>\n                          }\n                        } @else {\n                          <mt-card>\n                            <div class=\"space-y-4\">\n                              <div class=\"grid gap-3\">\n                                <div class=\"grid gap-1\">\n                                  <label\n                                    class=\"text-sm font-medium text-surface-900\"\n                                  >\n                                    {{ t(\"app\") }}\n                                  </label>\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\n                                  >\n                                    {{ t(\"appLabelPplus\") }}\n                                  </div>\n                                </div>\n\n                                <div class=\"grid gap-1\">\n                                  <label\n                                    class=\"text-sm font-medium text-surface-900\"\n                                  >\n                                    {{ t(\"action\") }}\n                                  </label>\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\n                                  >\n                                    {{ getAppActionDisplayName() }}\n                                  </div>\n                                  @if (getAppActionKey()) {\n                                    <div class=\"text-xs text-muted-color\">\n                                      {{ getAppActionKey() }}\n                                    </div>\n                                  }\n                                </div>\n\n                                @if (\n                                  getAppActionDescription();\n                                  as description\n                                ) {\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\n                                  >\n                                    {{ description }}\n                                  </div>\n                                }\n\n                                @if (\n                                  getAppActionDiscoveryMessage();\n                                  as discoveryMessage\n                                ) {\n                                  <div\n                                    class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\n                                  >\n                                    {{ discoveryMessage }}\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          </mt-card>\n\n                          <mt-card>\n                            <div class=\"space-y-4\">\n                              <div>\n                                <div\n                                  class=\"text-sm font-semibold text-surface-900\"\n                                >\n                                  {{ t(\"appActionConfiguration\") }}\n                                </div>\n                                <div class=\"mt-1 text-sm text-muted-color\">\n                                  {{ t(\"appActionConfigurationDescription\") }}\n                                </div>\n                              </div>\n\n                              @if (\n                                loadingAppActionDetail() &&\n                                appActionSettingsForm.controls.actionKey.value\n                              ) {\n                                <div class=\"space-y-3\">\n                                  <p-skeleton\n                                    width=\"100%\"\n                                    height=\"2.5rem\"\n                                  ></p-skeleton>\n                                  <p-skeleton\n                                    width=\"100%\"\n                                    height=\"6rem\"\n                                  ></p-skeleton>\n                                </div>\n                              } @else if (\n                                !appActionSettingsForm.controls.actionKey.value\n                              ) {\n                                <div\n                                  class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\n                                >\n                                  {{ t(\"appActionUnavailable\") }}\n                                </div>\n                              } @else if (\n                                appActionConfigDefinition().mode === \"schema\" &&\n                                appActionConfigDefinition().fields.length === 0\n                              ) {\n                                <div\n                                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\n                                >\n                                  {{ t(\"appActionNoConfigRequired\") }}\n                                </div>\n                              } @else if (\n                                appActionConfigDefinition().mode === \"raw\"\n                              ) {\n                                <div class=\"space-y-3\">\n                                  <div\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\n                                  >\n                                    {{ t(\"appActionRawConfigFallback\") }}\n                                  </div>\n                                  <mt-textarea-field\n                                    [label]=\"t('appActionConfigJson')\"\n                                    [placeholder]=\"\n                                      t('enterAppActionConfigJson')\n                                    \"\n                                    [formControl]=\"appActionRawConfigControl\"\n                                    [rows]=\"'10'\"\n                                  ></mt-textarea-field>\n                                </div>\n                              } @else {\n                                <div class=\"space-y-3\">\n                                  @for (\n                                    field of appActionConfigDefinition().fields;\n                                    track field.key\n                                  ) {\n                                    <div class=\"space-y-2\">\n                                      @switch (field.kind) {\n                                        @case (\"text\") {\n                                          <mt-text-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                          ></mt-text-field>\n                                        }\n                                        @case (\"number\") {\n                                          <mt-number-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                          ></mt-number-field>\n                                        }\n                                        @case (\"toggle\") {\n                                          <mt-toggle-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                          ></mt-toggle-field>\n                                        }\n                                        @case (\"select\") {\n                                          <mt-select-field\n                                            [label]=\"field.title\"\n                                            [options]=\"\n                                              getAppActionEnumOptions(field)\n                                            \"\n                                            optionLabel=\"label\"\n                                            optionValue=\"value\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                          ></mt-select-field>\n                                        }\n                                        @case (\"json\") {\n                                          <mt-textarea-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                            [rows]=\"'8'\"\n                                          ></mt-textarea-field>\n                                        }\n                                      }\n\n                                      @if (field.description) {\n                                        <div class=\"text-xs text-muted-color\">\n                                          {{ field.description }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n\n                              @if (getAppActionConfigMessages().length) {\n                                <div\n                                  class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\n                                >\n                                  @for (\n                                    message of getAppActionConfigMessages();\n                                    track message\n                                  ) {\n                                    <div>{{ message }}</div>\n                                  }\n                                </div>\n                              }\n                            </div>\n                          </mt-card>\n\n                          <mt-card>\n                            <div class=\"space-y-4\">\n                              <div\n                                class=\"text-sm font-semibold text-surface-900\"\n                              >\n                                {{ t(\"advancedExecution\") }}\n                              </div>\n\n                              <mt-number-field\n                                [label]=\"t('sla')\"\n                                [placeholder]=\"t('enterSla')\"\n                                [formControl]=\"stepForm.controls.sla\"\n                                [required]=\"true\"\n                                [min]=\"0\"\n                              ></mt-number-field>\n\n                              <mt-select-field\n                                [label]=\"t('failureBehavior')\"\n                                [options]=\"failureBehaviorOptions()\"\n                                optionLabel=\"label\"\n                                optionValue=\"value\"\n                                [formControl]=\"\n                                  appActionSettingsForm.controls.failureBehavior\n                                \"\n                                [required]=\"true\"\n                              ></mt-select-field>\n\n                              <mt-number-field\n                                [label]=\"t('timeoutSeconds')\"\n                                [formControl]=\"\n                                  appActionSettingsForm.controls.timeoutSeconds\n                                \"\n                                [required]=\"true\"\n                                [min]=\"1\"\n                              ></mt-number-field>\n                            </div>\n                          </mt-card>\n                        }\n                      </div>\n                    }\n                    @case (\"tab2\") {\n                      <div class=\"mt-4\">\n                        <mt-card>\n                          <div class=\"flex items-center gap-4\">\n                            <div class=\"flex flex-1 items-center gap-3\">\n                              <mt-button\n                                [severity]=\"'secondary'\"\n                                icon=\"file.file-check-02\"\n                              />\n                              <div class=\"flex flex-col\">\n                                <label class=\"font-medium\">{{\n                                  t(\"configureForm\")\n                                }}</label>\n                                <span class=\"text-sm text-muted-color\">{{\n                                  t(\"configureForm-description\")\n                                }}</span>\n                              </div>\n                            </div>\n                          </div>\n                          <div class=\"mt-3\">\n                            <mt-button\n                              [label]=\"t('configureForm')\"\n                              size=\"small\"\n                              (onClick)=\"openFormModal()\"\n                            ></mt-button>\n                          </div>\n                        </mt-card>\n                      </div>\n                    }\n                    @case (\"tab3\") {\n                      <div class=\"mt-4\">\n                        <mt-toggle-field\n                          toggleShape=\"card\"\n                          [label]=\"t('show-hide')\"\n                          [descriptionCard]=\"t('show-hide-notifications')\"\n                          icon=\"general.eye\"\n                          [formControl]=\"showHideControl\"\n                        >\n                          <ng-template #toggleCardBottom>\n                            @if (showHideControl.value) {\n                              <div class=\"mt-3\">\n                                <mt-button\n                                  [label]=\"t('configureNotifications')\"\n                                  size=\"small\"\n                                  (onClick)=\"openNotificationsModal()\"\n                                ></mt-button>\n                              </div>\n                            }\n                          </ng-template>\n                        </mt-toggle-field>\n                      </div>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          </mt-structure-builder>\n        } @else {\n          <p-skeleton width=\"100%\" height=\"50rem\" />\n        }\n      }\n      @case (\"notification\") {\n        <div class=\"flex-1 flex justify-center items-start p-4\">\n          <div class=\"w-1/2 max-[1025px]:w-full\">\n            <mt-card [title]=\"t('notifications')\">\n              <mt-notification-template />\n            </mt-card>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NotificationTemplate, selector: "mt-notification-template" }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowBuilder, decorators: [{
             type: Component,
             args: [{ selector: 'mt-workflow-builder', imports: [
                         StructureBuilder,
@@ -1567,14 +2492,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         Tabs,
                         ReactiveFormsModule,
                         FormsModule,
-                        DynamicForm,
                         Skeleton,
                         ToggleField,
                         Button,
                         TranslocoModule,
                         NotificationTemplate,
                         SelectField,
-                    ], host: {}, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\r\n  <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\r\n    <!-- Main Tabs at top center -->\r\n    <div class=\"flex justify-center w-full py-2\">\r\n      <mt-tabs\r\n        [active]=\"mainTab()\"\r\n        (activeChange)=\"onMainTabChange($event)\"\r\n        [options]=\"mainTabsList\"\r\n        size=\"large\"\r\n      ></mt-tabs>\r\n    </div>\r\n    @switch (mainTab()) {\r\n      @case (\"workflow\") {\r\n        @if (!loading()) {\r\n          <mt-structure-builder\r\n            class=\"flex-1\"\r\n            [availableNodes]=\"availableNodes\"\r\n            [connectionForm]=\"connectionForm()\"\r\n            [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\r\n            [connectionFormulaConfig]=\"connectionFormulaConfig()\"\r\n            [nodeActions]=\"nodeActions()\"\r\n            [nodes]=\"steps()\"\r\n            [connections]=\"connections()\"\r\n            (action)=\"onStructureAction($event)\"\r\n            [addModalType]=\"'drawer'\"\r\n            [addModalStyleClass]=\"'!w-[25rem] !absolute  !shadow-none'\"\r\n            [updateModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\r\n            [addModalHeader]=\"'workflow.builder.addStep' | transloco\"\r\n            [updateModalHeader]=\"'workflow.builder.editStep' | transloco\"\r\n            [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\r\n            [appendTo]=\"'page-content'\"\r\n            [nodeFields]=\"nodeFields()\"\r\n            [availableTabsClass]=\"\r\n              hasMultipleWorkflows() ? 'absolute top-30 start-4 z-1 w-64' : ''\r\n            \"\r\n            [layoutDirection]=\"'LR'\"\r\n          >\r\n            <div flowContent>\r\n              @if (hasMultipleWorkflows()) {\r\n                <div class=\"absolute top-4 start-4 z-10\">\r\n                  <mt-card class=\"w-64\">\r\n                    <!-- <div class=\"flex items-center gap-3\">\r\n                         <label class=\"text-lg font-medium\">{{\r\n                          'workflow.builder.selectWorkflow' | transloco\r\n                        }}</label>\r\n                    </div> -->\r\n                    <mt-select-field\r\n                      [options]=\"workflows()\"\r\n                      optionLabel=\"name.display\"\r\n                      optionValue=\"id\"\r\n                      [ngModel]=\"selectedWorkflowId()\"\r\n                      (ngModelChange)=\"onWorkflowChange($event)\"\r\n                      class=\"mt-2\"\r\n                    />\r\n                  </mt-card>\r\n                </div>\r\n              }\r\n              <div class=\"absolute top-4 end-4 z-10\">\r\n                <div class=\"flex flex-col gap-2 w-80\">\r\n                  <mt-card>\r\n                    <div class=\"flex items-center gap-10\">\r\n                      <div class=\"flex items-center gap-2\">\r\n                        <mt-button\r\n                          [severity]=\"'secondary'\"\r\n                          icon=\"dev.dataflow-01\"\r\n                        />\r\n                        <label>{{\r\n                          \"workflow.builder.enableWorkflow\" | transloco\r\n                        }}</label>\r\n                      </div>\r\n                      <mt-toggle-field\r\n                        [ngModel]=\"isPublished()\"\r\n                        (ngModelChange)=\"onPublishToggle($event)\"\r\n                        [disabled]=\"isPublishDisabled()\"\r\n                      ></mt-toggle-field>\r\n                    </div>\r\n                  </mt-card>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-template\r\n              #nodeDialog\r\n              let-close=\"close\"\r\n              let-save=\"save\"\r\n              let-node=\"node\"\r\n              let-drawerController=\"drawerController\"\r\n            >\r\n              <div class=\"p-4\">\r\n                @if (loadingStep()) {\r\n                  <!-- Loading skeleton -->\r\n                  <div class=\"space-y-4\">\r\n                    <!-- Tabs skeleton -->\r\n                    <div class=\"flex gap-2 mb-4\">\r\n                      <p-skeleton\r\n                        width=\"6rem\"\r\n                        height=\"2.5rem\"\r\n                        borderRadius=\"0.5rem\"\r\n                      ></p-skeleton>\r\n                      <p-skeleton\r\n                        width=\"8rem\"\r\n                        height=\"2.5rem\"\r\n                        borderRadius=\"0.5rem\"\r\n                      ></p-skeleton>\r\n                    </div>\r\n                    <!-- Form fields skeleton -->\r\n                    <div class=\"space-y-4\">\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"8rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"8rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"10rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"3rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"6rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                      <div>\r\n                        <p-skeleton\r\n                          width=\"4rem\"\r\n                          height=\"1rem\"\r\n                          styleClass=\"mb-2\"\r\n                        ></p-skeleton>\r\n                        <p-skeleton\r\n                          width=\"100%\"\r\n                          height=\"2.5rem\"\r\n                          borderRadius=\"0.5rem\"\r\n                        ></p-skeleton>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                } @else {\r\n                  <!-- Actual content -->\r\n                  <mt-tabs\r\n                    [active]=\"selectedTab()\"\r\n                    (activeChange)=\"onNodeDialogTabChange($event)\"\r\n                    [options]=\"tabsList()\"\r\n                    size=\"large\"\r\n                  ></mt-tabs>\r\n                  @switch (selectedTab()) {\r\n                    @case (\"tab1\") {\r\n                      <div class=\"mt-4\">\r\n                        <mt-dynamic-form\r\n                          [formConfig]=\"nodeForm()\"\r\n                          [formControl]=\"nodeFormControl\"\r\n                        ></mt-dynamic-form>\r\n                      </div>\r\n                    }\r\n                    @case (\"tab2\") {\r\n                      <div class=\"mt-4\">\r\n                        <mt-card>\r\n                          <div class=\"flex items-center gap-4\">\r\n                            <div class=\"flex flex-1 items-center gap-3\">\r\n                              <mt-button\r\n                                [severity]=\"'secondary'\"\r\n                                icon=\"file.file-check-02\"\r\n                              />\r\n                              <div class=\"flex flex-col\">\r\n                                <label class=\"font-medium\">{{\r\n                                  t(\"configureForm\")\r\n                                }}</label>\r\n                                <span class=\"text-sm text-muted-color\">{{\r\n                                  t(\"configureForm-description\")\r\n                                }}</span>\r\n                              </div>\r\n                            </div>\r\n                          </div>\r\n                          <div class=\"mt-3\">\r\n                            <mt-button\r\n                              [label]=\"t('configureForm')\"\r\n                              size=\"small\"\r\n                              (onClick)=\"openFormModal()\"\r\n                            ></mt-button>\r\n                          </div>\r\n                        </mt-card>\r\n                      </div>\r\n\r\n                      <!-- Properties table (hidden in manageProperties mode) -->\r\n                      <!-- <div class=\"mt-2\">\r\n                        <mt-table\r\n                          [data]=\"propertiesTableData()\"\r\n                          [columns]=\"propertiesColumns()\"\r\n                          [selectableRows]=\"false\"\r\n                          [showGridlines]=\"true\"\r\n                          [stripedRows]=\"true\"\r\n                          (cellChange)=\"onPropertyCellChange($event)\"\r\n                        ></mt-table>\r\n                      </div> -->\r\n                    }\r\n                    @case (\"tab3\") {\r\n                      <div class=\"mt-4\">\r\n                        <mt-toggle-field\r\n                          toggleShape=\"card\"\r\n                          [label]=\"t('show-hide')\"\r\n                          [descriptionCard]=\"t('show-hide-notifications')\"\r\n                          icon=\"general.eye\"\r\n                          [formControl]=\"showHideControl\"\r\n                        >\r\n                          <ng-template #toggleCardBottom>\r\n                            @if (showHideControl.value) {\r\n                              <div class=\"mt-3\">\r\n                                <mt-button\r\n                                  [label]=\"t('configureNotifications')\"\r\n                                  size=\"small\"\r\n                                  (onClick)=\"openNotificationsModal()\"\r\n                                ></mt-button>\r\n                              </div>\r\n                            }\r\n                          </ng-template>\r\n                        </mt-toggle-field>\r\n                      </div>\r\n                    }\r\n                  }\r\n                }\r\n              </div>\r\n            </ng-template>\r\n          </mt-structure-builder>\r\n        } @else {\r\n          <p-skeleton width=\"100%\" height=\"50rem\" />\r\n        }\r\n      }\r\n      @case (\"notification\") {\r\n        <div class=\"flex-1 flex justify-center items-start p-4\">\r\n          <div class=\"w-1/2 max-[1025px]:w-full\">\r\n            <mt-card [title]=\"t('notifications')\">\r\n              <mt-notification-template />\r\n            </mt-card>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
+                        TextField,
+                        NumberField,
+                        TextareaField,
+                    ], host: {}, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\n  <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\n    <div class=\"flex justify-center w-full py-2\">\n      <mt-tabs\n        [active]=\"mainTab()\"\n        (activeChange)=\"onMainTabChange($event)\"\n        [options]=\"mainTabsList()\"\n        size=\"large\"\n      ></mt-tabs>\n    </div>\n    @switch (mainTab()) {\n      @case (\"workflow\") {\n        @if (!loading()) {\n          <mt-structure-builder\n            class=\"flex-1\"\n            [availableNodes]=\"availableNodes()\"\n            [availableNodesLabel]=\"t('stepTemplates')\"\n            [connectionForm]=\"connectionForm()\"\n            [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\n            [connectionFormulaConfig]=\"connectionFormulaConfig()\"\n            [nodeActions]=\"nodeActions()\"\n            [nodes]=\"steps()\"\n            [connections]=\"connections()\"\n            (action)=\"onStructureAction($event)\"\n            [addModalType]=\"'drawer'\"\n            [addModalStyleClass]=\"'!w-[25rem] !absolute  !shadow-none'\"\n            [updateModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\n            [addModalHeader]=\"'workflow.builder.addStep' | transloco\"\n            [updateModalHeader]=\"'workflow.builder.editStep' | transloco\"\n            [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\n            [appendTo]=\"'page-content'\"\n            [nodeFields]=\"nodeFields()\"\n            [availableTabsClass]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\n            [layoutDirection]=\"'LR'\"\n          >\n            <div flowContent class=\"pointer-events-none\">\n              @if (hasMultipleWorkflows()) {\n                <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\n                  <mt-card class=\"w-64\">\n                    <mt-select-field\n                      [options]=\"workflows()\"\n                      optionLabel=\"name.display\"\n                      optionValue=\"id\"\n                      [ngModel]=\"selectedWorkflowId()\"\n                      (ngModelChange)=\"onWorkflowChange($event)\"\n                      class=\"mt-2\"\n                    />\n                  </mt-card>\n                </div>\n              }\n              <div class=\"pointer-events-auto absolute top-4 end-4 z-10\">\n                <div class=\"flex flex-col gap-2 w-80\">\n                  <mt-card>\n                    <div class=\"flex items-center gap-10\">\n                      <div class=\"flex items-center gap-2\">\n                        <mt-button\n                          [severity]=\"'secondary'\"\n                          icon=\"dev.dataflow-01\"\n                        />\n                        <label>{{\n                          \"workflow.builder.enableWorkflow\" | transloco\n                        }}</label>\n                      </div>\n                      <mt-toggle-field\n                        [ngModel]=\"isPublished()\"\n                        (ngModelChange)=\"onPublishToggle($event)\"\n                        [disabled]=\"isPublishDisabled()\"\n                      ></mt-toggle-field>\n                    </div>\n                  </mt-card>\n                </div>\n              </div>\n            </div>\n            <ng-template\n              #nodeTemplate\n              let-node\n              let-actions=\"actions\"\n              let-onAction=\"onAction\"\n            >\n              <div class=\"min-w-[17rem] overflow-hidden rounded-2xl bg-content\">\n                <div class=\"space-y-3 px-4 py-4\">\n                  <span [class]=\"getStepBadgeClass(node.type)\">\n                    {{ getStepTypeLabel(node.type) }}\n                  </span>\n                  <div class=\"space-y-1\">\n                    <div class=\"text-base font-semibold text-surface-900\">\n                      {{ getStepCardTitle(node) }}\n                    </div>\n                    @if (getStepCardSubtitle(node); as subtitle) {\n                      <div class=\"text-sm text-muted-color\">\n                        {{ subtitle }}\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div\n                  class=\"flex min-h-[3rem] items-center justify-end gap-2 border-t border-surface-200 bg-surface-50 px-4 py-3\"\n                >\n                  @for (action of actions; track action.key) {\n                    <mt-button\n                      [size]=\"action?.size || 'small'\"\n                      [variant]=\"action?.variant\"\n                      [icon]=\"action?.icon\"\n                      [tooltip]=\"action?.tooltip\"\n                      [severity]=\"action?.severity\"\n                      (onClick)=\"onAction(action, node)\"\n                    >\n                    </mt-button>\n                  }\n                </div>\n              </div>\n            </ng-template>\n            <ng-template\n              #nodeDialog\n              let-close=\"close\"\n              let-save=\"save\"\n              let-node=\"node\"\n              let-drawerController=\"drawerController\"\n            >\n              <div class=\"p-4\">\n                @if (loadingStep()) {\n                  <div class=\"space-y-4\">\n                    <div class=\"flex gap-2 mb-4\">\n                      <p-skeleton\n                        width=\"6rem\"\n                        height=\"2.5rem\"\n                        borderRadius=\"0.5rem\"\n                      ></p-skeleton>\n                      <p-skeleton\n                        width=\"8rem\"\n                        height=\"2.5rem\"\n                        borderRadius=\"0.5rem\"\n                      ></p-skeleton>\n                    </div>\n                    <!-- Form fields skeleton -->\n                    <div class=\"space-y-4\">\n                      <div>\n                        <p-skeleton\n                          width=\"8rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"8rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"10rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"3rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"6rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                      <div>\n                        <p-skeleton\n                          width=\"4rem\"\n                          height=\"1rem\"\n                          styleClass=\"mb-2\"\n                        ></p-skeleton>\n                        <p-skeleton\n                          width=\"100%\"\n                          height=\"2.5rem\"\n                          borderRadius=\"0.5rem\"\n                        ></p-skeleton>\n                      </div>\n                    </div>\n                  </div>\n                } @else {\n                  <mt-tabs\n                    [active]=\"selectedTab()\"\n                    (activeChange)=\"onNodeDialogTabChange($event)\"\n                    [options]=\"tabsList()\"\n                    size=\"large\"\n                  ></mt-tabs>\n                  @switch (selectedTab()) {\n                    @case (\"tab1\") {\n                      <div class=\"mt-4 space-y-4\">\n                        <div class=\"grid gap-3\">\n                          <mt-text-field\n                            [label]=\"t('nameEnglish')\"\n                            [placeholder]=\"t('enterNameEnglish')\"\n                            [formControl]=\"stepForm.controls.nameEn\"\n                            [required]=\"true\"\n                          ></mt-text-field>\n                          <mt-text-field\n                            [label]=\"t('nameArabic')\"\n                            [placeholder]=\"t('enterNameArabic')\"\n                            [formControl]=\"stepForm.controls.nameAr\"\n                            [required]=\"true\"\n                          ></mt-text-field>\n                        </div>\n\n                        @if (currentStepType() === \"UserInput\") {\n                          @if (!isEditingInitialNode()) {\n                            <mt-card>\n                              <div class=\"space-y-4\">\n                                <div\n                                  class=\"text-sm font-semibold text-surface-900\"\n                                >\n                                  {{ t(\"approver\") }}\n                                </div>\n                                <mt-select-field\n                                  [label]=\"t('approver')\"\n                                  [options]=\"[\n                                    { label: t('group'), value: '1' },\n                                    { label: t('role'), value: '2' },\n                                  ]\"\n                                  optionLabel=\"label\"\n                                  optionValue=\"value\"\n                                  [formControl]=\"stepForm.controls.targetType\"\n                                  [required]=\"true\"\n                                ></mt-select-field>\n\n                                @if (\n                                  stepForm.controls.targetType.value === \"1\"\n                                ) {\n                                  <mt-select-field\n                                    [label]=\"t('group')\"\n                                    [placeholder]=\"t('selectGroup')\"\n                                    [options]=\"groups()\"\n                                    optionLabel=\"name.display\"\n                                    optionValue=\"id\"\n                                    [formControl]=\"stepForm.controls.group\"\n                                    [required]=\"true\"\n                                  ></mt-select-field>\n                                } @else {\n                                  <mt-select-field\n                                    [label]=\"t('role')\"\n                                    [placeholder]=\"t('selectRole')\"\n                                    [options]=\"roles()\"\n                                    [group]=\"hasGroupedRoles()\"\n                                    optionGroupLabel=\"label\"\n                                    optionGroupChildren=\"items\"\n                                    optionLabel=\"name.display\"\n                                    optionValue=\"value\"\n                                    [formControl]=\"stepForm.controls.role\"\n                                    [required]=\"true\"\n                                  ></mt-select-field>\n                                }\n\n                                <mt-number-field\n                                  [label]=\"t('sla')\"\n                                  [placeholder]=\"t('enterSla')\"\n                                  [formControl]=\"stepForm.controls.sla\"\n                                  [required]=\"true\"\n                                  [min]=\"0\"\n                                ></mt-number-field>\n                              </div>\n                            </mt-card>\n                          }\n                        } @else {\n                          <mt-card>\n                            <div class=\"space-y-4\">\n                              <div class=\"grid gap-3\">\n                                <div class=\"grid gap-1\">\n                                  <label\n                                    class=\"text-sm font-medium text-surface-900\"\n                                  >\n                                    {{ t(\"app\") }}\n                                  </label>\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\n                                  >\n                                    {{ t(\"appLabelPplus\") }}\n                                  </div>\n                                </div>\n\n                                <div class=\"grid gap-1\">\n                                  <label\n                                    class=\"text-sm font-medium text-surface-900\"\n                                  >\n                                    {{ t(\"action\") }}\n                                  </label>\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\n                                  >\n                                    {{ getAppActionDisplayName() }}\n                                  </div>\n                                  @if (getAppActionKey()) {\n                                    <div class=\"text-xs text-muted-color\">\n                                      {{ getAppActionKey() }}\n                                    </div>\n                                  }\n                                </div>\n\n                                @if (\n                                  getAppActionDescription();\n                                  as description\n                                ) {\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\n                                  >\n                                    {{ description }}\n                                  </div>\n                                }\n\n                                @if (\n                                  getAppActionDiscoveryMessage();\n                                  as discoveryMessage\n                                ) {\n                                  <div\n                                    class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\n                                  >\n                                    {{ discoveryMessage }}\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          </mt-card>\n\n                          <mt-card>\n                            <div class=\"space-y-4\">\n                              <div>\n                                <div\n                                  class=\"text-sm font-semibold text-surface-900\"\n                                >\n                                  {{ t(\"appActionConfiguration\") }}\n                                </div>\n                                <div class=\"mt-1 text-sm text-muted-color\">\n                                  {{ t(\"appActionConfigurationDescription\") }}\n                                </div>\n                              </div>\n\n                              @if (\n                                loadingAppActionDetail() &&\n                                appActionSettingsForm.controls.actionKey.value\n                              ) {\n                                <div class=\"space-y-3\">\n                                  <p-skeleton\n                                    width=\"100%\"\n                                    height=\"2.5rem\"\n                                  ></p-skeleton>\n                                  <p-skeleton\n                                    width=\"100%\"\n                                    height=\"6rem\"\n                                  ></p-skeleton>\n                                </div>\n                              } @else if (\n                                !appActionSettingsForm.controls.actionKey.value\n                              ) {\n                                <div\n                                  class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\n                                >\n                                  {{ t(\"appActionUnavailable\") }}\n                                </div>\n                              } @else if (\n                                appActionConfigDefinition().mode === \"schema\" &&\n                                appActionConfigDefinition().fields.length === 0\n                              ) {\n                                <div\n                                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\n                                >\n                                  {{ t(\"appActionNoConfigRequired\") }}\n                                </div>\n                              } @else if (\n                                appActionConfigDefinition().mode === \"raw\"\n                              ) {\n                                <div class=\"space-y-3\">\n                                  <div\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\n                                  >\n                                    {{ t(\"appActionRawConfigFallback\") }}\n                                  </div>\n                                  <mt-textarea-field\n                                    [label]=\"t('appActionConfigJson')\"\n                                    [placeholder]=\"\n                                      t('enterAppActionConfigJson')\n                                    \"\n                                    [formControl]=\"appActionRawConfigControl\"\n                                    [rows]=\"'10'\"\n                                  ></mt-textarea-field>\n                                </div>\n                              } @else {\n                                <div class=\"space-y-3\">\n                                  @for (\n                                    field of appActionConfigDefinition().fields;\n                                    track field.key\n                                  ) {\n                                    <div class=\"space-y-2\">\n                                      @switch (field.kind) {\n                                        @case (\"text\") {\n                                          <mt-text-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                          ></mt-text-field>\n                                        }\n                                        @case (\"number\") {\n                                          <mt-number-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                          ></mt-number-field>\n                                        }\n                                        @case (\"toggle\") {\n                                          <mt-toggle-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                          ></mt-toggle-field>\n                                        }\n                                        @case (\"select\") {\n                                          <mt-select-field\n                                            [label]=\"field.title\"\n                                            [options]=\"\n                                              getAppActionEnumOptions(field)\n                                            \"\n                                            optionLabel=\"label\"\n                                            optionValue=\"value\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                          ></mt-select-field>\n                                        }\n                                        @case (\"json\") {\n                                          <mt-textarea-field\n                                            [label]=\"field.title\"\n                                            [formControl]=\"\n                                              getAppActionConfigControl(\n                                                field.key\n                                              )\n                                            \"\n                                            [required]=\"field.required\"\n                                            [rows]=\"'8'\"\n                                          ></mt-textarea-field>\n                                        }\n                                      }\n\n                                      @if (field.description) {\n                                        <div class=\"text-xs text-muted-color\">\n                                          {{ field.description }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n\n                              @if (getAppActionConfigMessages().length) {\n                                <div\n                                  class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\n                                >\n                                  @for (\n                                    message of getAppActionConfigMessages();\n                                    track message\n                                  ) {\n                                    <div>{{ message }}</div>\n                                  }\n                                </div>\n                              }\n                            </div>\n                          </mt-card>\n\n                          <mt-card>\n                            <div class=\"space-y-4\">\n                              <div\n                                class=\"text-sm font-semibold text-surface-900\"\n                              >\n                                {{ t(\"advancedExecution\") }}\n                              </div>\n\n                              <mt-number-field\n                                [label]=\"t('sla')\"\n                                [placeholder]=\"t('enterSla')\"\n                                [formControl]=\"stepForm.controls.sla\"\n                                [required]=\"true\"\n                                [min]=\"0\"\n                              ></mt-number-field>\n\n                              <mt-select-field\n                                [label]=\"t('failureBehavior')\"\n                                [options]=\"failureBehaviorOptions()\"\n                                optionLabel=\"label\"\n                                optionValue=\"value\"\n                                [formControl]=\"\n                                  appActionSettingsForm.controls.failureBehavior\n                                \"\n                                [required]=\"true\"\n                              ></mt-select-field>\n\n                              <mt-number-field\n                                [label]=\"t('timeoutSeconds')\"\n                                [formControl]=\"\n                                  appActionSettingsForm.controls.timeoutSeconds\n                                \"\n                                [required]=\"true\"\n                                [min]=\"1\"\n                              ></mt-number-field>\n                            </div>\n                          </mt-card>\n                        }\n                      </div>\n                    }\n                    @case (\"tab2\") {\n                      <div class=\"mt-4\">\n                        <mt-card>\n                          <div class=\"flex items-center gap-4\">\n                            <div class=\"flex flex-1 items-center gap-3\">\n                              <mt-button\n                                [severity]=\"'secondary'\"\n                                icon=\"file.file-check-02\"\n                              />\n                              <div class=\"flex flex-col\">\n                                <label class=\"font-medium\">{{\n                                  t(\"configureForm\")\n                                }}</label>\n                                <span class=\"text-sm text-muted-color\">{{\n                                  t(\"configureForm-description\")\n                                }}</span>\n                              </div>\n                            </div>\n                          </div>\n                          <div class=\"mt-3\">\n                            <mt-button\n                              [label]=\"t('configureForm')\"\n                              size=\"small\"\n                              (onClick)=\"openFormModal()\"\n                            ></mt-button>\n                          </div>\n                        </mt-card>\n                      </div>\n                    }\n                    @case (\"tab3\") {\n                      <div class=\"mt-4\">\n                        <mt-toggle-field\n                          toggleShape=\"card\"\n                          [label]=\"t('show-hide')\"\n                          [descriptionCard]=\"t('show-hide-notifications')\"\n                          icon=\"general.eye\"\n                          [formControl]=\"showHideControl\"\n                        >\n                          <ng-template #toggleCardBottom>\n                            @if (showHideControl.value) {\n                              <div class=\"mt-3\">\n                                <mt-button\n                                  [label]=\"t('configureNotifications')\"\n                                  size=\"small\"\n                                  (onClick)=\"openNotificationsModal()\"\n                                ></mt-button>\n                              </div>\n                            }\n                          </ng-template>\n                        </mt-toggle-field>\n                      </div>\n                    }\n                  }\n                }\n              </div>\n            </ng-template>\n          </mt-structure-builder>\n        } @else {\n          <p-skeleton width=\"100%\" height=\"50rem\" />\n        }\n      }\n      @case (\"notification\") {\n        <div class=\"flex-1 flex justify-center items-start p-4\">\n          <div class=\"w-1/2 max-[1025px]:w-full\">\n            <mt-card [title]=\"t('notifications')\">\n              <mt-notification-template />\n            </mt-card>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [] });
 
 // store/app.state.ts
@@ -1592,5 +2519,5 @@ const REQUEST_CONTEXT = new HttpContextToken(() => ({
  * Generated bundle index. Do not edit.
  */
 
-export { CreateConnection, CreateStep, DeleteConnection, DeleteStep, GetFormulaProperties, GetGroups, GetRolesForModule, GetStep, GetWorkflow, GetWorkflows, PublishWorkflow, REQUEST_CONTEXT, SetModuleInfo, UpdateConnection, UpdateStep, ValidateFlow, WorkflowBuilder, WorkflowFacade, WorkflowState };
+export { CreateConnection, CreateStep, DeleteConnection, DeleteStep, GetAppActionDetail, GetAppActions, GetFormulaProperties, GetGroups, GetRolesForModule, GetStep, GetWorkflow, GetWorkflows, PublishWorkflow, REQUEST_CONTEXT, SetModuleInfo, UpdateConnection, UpdateStep, ValidateFlow, WorkflowBuilder, WorkflowFacade, WorkflowState };
 //# sourceMappingURL=masterteam-workflow.mjs.map