@masterteam/workflow 0.0.34 → 0.0.36

package/fesm2022/masterteam-workflow.mjs

@@ -20,7 +20,7 @@ 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 { HttpClient, HttpParams, HttpContextToken } from '@angular/common/http';
 import { of } from 'rxjs';
 import { tap, catchError, finalize } from 'rxjs/operators';
 
@@ -68,6 +68,17 @@ class GetAppActionDetail {
         this.actionKey = actionKey;
     }
 }
+class GetAppActionOptions {
+    actionKey;
+    fieldKey;
+    params;
+    static type = '[Workflow] Get App Action Options';
+    constructor(actionKey, fieldKey, params) {
+        this.actionKey = actionKey;
+        this.fieldKey = fieldKey;
+        this.params = params;
+    }
+}
 class GetStep {
     stepId;
     static type = '[Workflow] Get Step';
@@ -176,6 +187,7 @@ const DEFAULT_STATE = {
     roles: [],
     appActionDescriptors: [],
     selectedAppActionDescriptor: null,
+    appActionOptionsCache: {},
     selectedStep: null,
     isFlowValid: null,
     loadingActive: [],
@@ -217,6 +229,9 @@ let WorkflowState = class WorkflowState {
     static selectedAppActionDescriptor(state) {
         return state.selectedAppActionDescriptor;
     }
+    static appActionOptionsCache(state) {
+        return state.appActionOptionsCache ?? {};
+    }
     static selectedStep(state) {
         return state.selectedStep;
     }
@@ -427,6 +442,64 @@ let WorkflowState = class WorkflowState {
             return of(null);
         }), finalize(() => endLoading(ctx, 'getAppActionDetail')));
     }
+    getAppActionOptions(ctx, action) {
+        const cacheKey = buildAppActionOptionsCacheKey(action.actionKey, action.fieldKey, action.params);
+        const cached = ctx.getState().appActionOptionsCache?.[cacheKey];
+        if (cached && !cached.errorCode) {
+            return of(cached.options);
+        }
+        startLoading(ctx, 'getAppActionOptions');
+        let params = new HttpParams();
+        if (action.params) {
+            for (const [key, value] of Object.entries(action.params)) {
+                if (value === null || value === undefined || value === '')
+                    continue;
+                params = params.set(key, String(value));
+            }
+        }
+        const url = `${this.workflowAppActionsUrl}/actions/${encodeURIComponent(action.actionKey)}/options/${encodeURIComponent(action.fieldKey)}`;
+        return this.http
+            .get(url, params.keys().length ? { params } : {})
+            .pipe(tap((response) => {
+            const options = normalizeWorkflowAppActionOptions(response?.data);
+            const entry = {
+                options,
+                errorCode: null,
+                errorMessage: null,
+                loadedAt: Date.now(),
+            };
+            const state = ctx.getState();
+            ctx.patchState({
+                appActionOptionsCache: {
+                    ...(state.appActionOptionsCache ?? {}),
+                    [cacheKey]: entry,
+                },
+            });
+        }), catchError((error) => {
+            const code = error?.error?.errors?.code ??
+                error?.error?.code ??
+                'workflow_app_action_options_error';
+            const message = error?.error?.errors?.message ??
+                error?.error?.message ??
+                error?.message ??
+                'Failed to load options';
+            const state = ctx.getState();
+            const entry = {
+                options: [],
+                errorCode: String(code),
+                errorMessage: String(message),
+                loadedAt: Date.now(),
+            };
+            ctx.patchState({
+                appActionOptionsCache: {
+                    ...(state.appActionOptionsCache ?? {}),
+                    [cacheKey]: entry,
+                },
+            });
+            setLoadingError(ctx, 'getAppActionOptions', String(message));
+            return of([]);
+        }), finalize(() => endLoading(ctx, 'getAppActionOptions')));
+    }
     getStep(ctx, action) {
         startLoading(ctx, 'getStep');
         return this.http
@@ -858,6 +931,9 @@ __decorate([
 __decorate([
     Action(GetAppActionDetail)
 ], WorkflowState.prototype, "getAppActionDetail", null);
+__decorate([
+    Action(GetAppActionOptions)
+], WorkflowState.prototype, "getAppActionOptions", null);
 __decorate([
     Action(GetStep)
 ], WorkflowState.prototype, "getStep", null);
@@ -915,6 +991,9 @@ __decorate([
 __decorate([
     Selector()
 ], WorkflowState, "selectedAppActionDescriptor", null);
+__decorate([
+    Selector()
+], WorkflowState, "appActionOptionsCache", null);
 __decorate([
     Selector()
 ], WorkflowState, "selectedStep", null);
@@ -941,7 +1020,7 @@ WorkflowState = __decorate([
 ], WorkflowState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowState, decorators: [{
             type: Injectable
-        }], propDecorators: { setModuleInfo: [], getWorkflows: [], getWorkflow: [], getFormulaProperties: [], getGroups: [], getRolesForModule: [], getAppActions: [], getAppActionDetail: [], getStep: [], validateFlow: [], createStep: [], updateStep: [], createConnection: [], updateConnection: [], publishWorkflow: [], deleteStep: [], deleteConnection: [] } });
+        }], propDecorators: { setModuleInfo: [], getWorkflows: [], getWorkflow: [], getFormulaProperties: [], getGroups: [], getRolesForModule: [], getAppActions: [], getAppActionDetail: [], getAppActionOptions: [], getStep: [], validateFlow: [], createStep: [], updateStep: [], createConnection: [], updateConnection: [], publishWorkflow: [], deleteStep: [], deleteConnection: [] } });
 function normalizeWorkflowRoles(data) {
     if (!Array.isArray(data)) {
         return [];
@@ -989,6 +1068,13 @@ function normalizeWorkflowStepSchema(input) {
 function normalizeWorkflowStepDetail(input) {
     const type = normalizeWorkflowStepType$1(input?.type);
     const appAction = normalizeWorkflowAppAction(input, type);
+    const systemKind = typeof input?.systemKind === 'string' && input.systemKind.length
+        ? input.systemKind
+        : type === 'ApprovalCommit'
+            ? 'ApprovalCommit'
+            : null;
+    const isSystem = !!input?.isSystem || type === 'ApprovalCommit';
+    const isLocked = !!input?.isLocked || type === 'ApprovalCommit';
     return {
         ...input,
         id: Number(input?.id ?? 0),
@@ -1006,10 +1092,17 @@ function normalizeWorkflowStepDetail(input) {
             ? undefined
             : !!input.hasForm,
         appAction,
+        systemKind,
+        isSystem,
+        isLocked,
     };
 }
 function normalizeWorkflowStepType$1(type) {
-    return type === 'AppAction' ? 'AppAction' : 'UserInput';
+    if (type === 'AppAction')
+        return 'AppAction';
+    if (type === 'ApprovalCommit')
+        return 'ApprovalCommit';
+    return 'UserInput';
 }
 function normalizeWorkflowStepName(name) {
     if (typeof name === 'string') {
@@ -1064,6 +1157,14 @@ function normalizeWorkflowAppAction(input, type) {
         supportedScopes: Array.isArray(candidate?.supportedScopes)
             ? candidate.supportedScopes.map(String)
             : [],
+        configFields: normalizeAppActionConfigFields(candidate?.configFields),
+        runtimeInputs: normalizeAppActionRuntimeInputs(candidate?.runtimeInputs),
+        outputs: normalizeAppActionOutputs(candidate?.outputs),
+        supportedPhases: Array.isArray(candidate?.supportedPhases)
+            ? candidate.supportedPhases
+                .filter((value) => typeof value === 'string')
+                .map((value) => value)
+            : [],
     };
 }
 function normalizeWorkflowAppActionDescriptors(data) {
@@ -1088,8 +1189,111 @@ function normalizeWorkflowAppActionDescriptor(data) {
         supportedScopes: Array.isArray(record['supportedScopes'])
             ? record['supportedScopes'].map(String)
             : [],
+        configFields: normalizeAppActionConfigFields(record['configFields']),
+        runtimeInputs: normalizeAppActionRuntimeInputs(record['runtimeInputs']),
+        outputs: normalizeAppActionOutputs(record['outputs']),
+        supportedPhases: Array.isArray(record['supportedPhases'])
+            ? record['supportedPhases']
+                .filter((value) => typeof value === 'string')
+                .map((value) => value)
+            : [],
     };
 }
+function normalizeAppActionConfigFields(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter(isRecord$1).map((record) => ({
+        key: readString(record, 'key') ?? '',
+        displayName: readString(record, 'displayName') ?? readString(record, 'key') ?? '',
+        description: readString(record, 'description') ?? null,
+        type: (readString(record, 'type') ?? 'string'),
+        required: !!record['required'],
+        uiControl: readString(record, 'uiControl') ?? null,
+        optionsProviderKey: readString(record, 'optionsProviderKey') ?? null,
+        designerVisible: record['designerVisible'] === undefined ||
+            record['designerVisible'] === null
+            ? true
+            : !!record['designerVisible'],
+        enumValues: Array.isArray(record['enumValues'])
+            ? record['enumValues']
+            : undefined,
+        defaultValue: record['defaultValue'],
+    }));
+}
+function normalizeAppActionRuntimeInputs(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter(isRecord$1).map((record) => ({
+        key: readString(record, 'key') ?? '',
+        source: (readString(record, 'source') ?? 'Context'),
+        contextKey: readString(record, 'contextKey') ?? null,
+        resolverKey: readString(record, 'resolverKey') ?? null,
+        required: !!record['required'],
+        designerVisible: !!record['designerVisible'],
+    }));
+}
+function normalizeAppActionOutputs(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter(isRecord$1).map((record) => ({
+        key: readString(record, 'key') ?? '',
+        type: readString(record, 'type') ?? 'string',
+        persistToWorkflowContext: !!record['persistToWorkflowContext'],
+        description: readString(record, 'description') ?? null,
+    }));
+}
+function normalizeWorkflowAppActionOptions(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const result = [];
+    for (const item of value) {
+        if (!isRecord$1(item))
+            continue;
+        const rawValue = item['value'];
+        if (rawValue === undefined ||
+            rawValue === null ||
+            (typeof rawValue !== 'string' &&
+                typeof rawValue !== 'number' &&
+                typeof rawValue !== 'boolean')) {
+            continue;
+        }
+        const labelRaw = item['label'];
+        const label = typeof labelRaw === 'string'
+            ? labelRaw
+            : isRecord$1(labelRaw)
+                ? labelRaw
+                : String(rawValue);
+        const metadata = isRecord$1(item['metadata'])
+            ? item['metadata']
+            : undefined;
+        result.push({
+            value: rawValue,
+            label,
+            disabled: !!item['disabled'],
+            metadata,
+        });
+    }
+    return result;
+}
+/**
+ * Build a deterministic cache key for an options request:
+ * `{actionKey}::{fieldKey}::{paramHash}`. The param hash is a sorted
+ * `key=value&...` string of non-empty params, or `_` if none.
+ */
+function buildAppActionOptionsCacheKey(actionKey, fieldKey, params) {
+    const paramHash = !params
+        ? '_'
+        : Object.entries(params)
+            .filter(([, value]) => value !== null && value !== undefined && value !== '')
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([key, value]) => `${key}=${String(value)}`)
+            .join('&') || '_';
+    return `${actionKey}::${fieldKey}::${paramHash}`;
+}
 function upsertWorkflowAppActionDescriptor(descriptors, descriptor) {
     const index = descriptors.findIndex((item) => item.actionKey === descriptor.actionKey);
     if (index < 0) {
@@ -1176,6 +1380,7 @@ class WorkflowFacade {
     roles = select(WorkflowState.roles);
     appActionDescriptors = select(WorkflowState.appActionDescriptors);
     selectedAppActionDescriptor = select(WorkflowState.selectedAppActionDescriptor);
+    appActionOptionsCache = select(WorkflowState.appActionOptionsCache);
     selectedStep = select(WorkflowState.selectedStep);
     isFlowValid = select(WorkflowState.isFlowValid);
     steps = select(WorkflowState.stepsSchema);
@@ -1215,6 +1420,18 @@ class WorkflowFacade {
     loadAppActionDetail(actionKey) {
         return this.store.dispatch(new GetAppActionDetail(actionKey));
     }
+    loadAppActionOptions(actionKey, fieldKey, params) {
+        return this.store.dispatch(new GetAppActionOptions(actionKey, fieldKey, params));
+    }
+    /**
+     * Synchronous lookup helper: returns the cached options entry for a given
+     * (actionKey, fieldKey, params) combination, or `undefined` if the request
+     * has not been issued yet. Pair with `loadAppActionOptions` to fetch.
+     */
+    getCachedAppActionOptions(actionKey, fieldKey, params) {
+        const cacheKey = buildAppActionOptionsCacheKey(actionKey, fieldKey, params);
+        return this.appActionOptionsCache()?.[cacheKey];
+    }
     loadStep(stepId) {
         return this.store.dispatch(new GetStep(stepId));
     }
@@ -1261,6 +1478,100 @@ const SUPPORTED_PROPERTY_TYPES = [
     'array',
     'object',
 ];
+/**
+ * Build the editor definition from a descriptor's explicit `configFields[]`.
+ * Prefer this over `buildWorkflowAppActionConfigEditorDefinition` whenever
+ * the backend ships descriptor-driven fields (per the AppActions handoff).
+ *
+ * Only `designerVisible !== false` fields are rendered. Returns an empty
+ * schema when the input is empty so callers can fall back to JSON-Schema
+ * parsing when needed.
+ */
+function buildWorkflowAppActionConfigEditorDefinitionFromFields(configFields) {
+    const visibleFields = (configFields ?? []).filter((field) => field?.designerVisible !== false);
+    if (!visibleFields.length) {
+        return {
+            mode: 'schema',
+            schema: { type: 'object', properties: [], required: [] },
+            fields: [],
+            errors: [],
+        };
+    }
+    const properties = visibleFields.map((field) => ({
+        key: field.key,
+        title: field.displayName || field.key,
+        description: field.description ?? null,
+        type: field.type ?? 'string',
+        required: !!field.required,
+        enumValues: field.enumValues,
+        rawSchema: {
+            type: field.type,
+            title: field.displayName,
+            description: field.description ?? undefined,
+            ...(field.enumValues ? { enum: field.enumValues } : {}),
+        },
+    }));
+    const schema = {
+        type: 'object',
+        properties,
+        required: visibleFields.filter((f) => f.required).map((f) => f.key),
+    };
+    return {
+        mode: 'schema',
+        schema,
+        fields: visibleFields.map((field) => mapDescriptorFieldToEditorField(field)),
+        errors: [],
+    };
+}
+function mapDescriptorFieldToEditorField(field) {
+    const title = field.displayName || field.key;
+    const required = !!field.required;
+    const description = field.description ?? null;
+    const type = field.type ?? 'string';
+    // Explicit uiControl from the descriptor takes precedence — including
+    // `select` driven by an `optionsProviderKey` (no enum needed).
+    if (field.uiControl === 'select' || field.optionsProviderKey) {
+        return {
+            key: field.key,
+            title,
+            description,
+            type,
+            kind: 'select',
+            required,
+            enumValues: field.enumValues,
+            optionsProviderKey: field.optionsProviderKey ?? null,
+        };
+    }
+    if (field.uiControl === 'json' || type === 'array' || type === 'object') {
+        return {
+            key: field.key,
+            title,
+            description,
+            type,
+            kind: 'json',
+            required,
+            jsonValueType: type === 'array' ? 'array' : 'object',
+        };
+    }
+    if (field.uiControl === 'toggle' || type === 'boolean') {
+        return { key: field.key, title, description, type, kind: 'toggle', required };
+    }
+    if (field.uiControl === 'number' || type === 'number') {
+        return { key: field.key, title, description, type, kind: 'number', required };
+    }
+    if (field.enumValues?.length) {
+        return {
+            key: field.key,
+            title,
+            description,
+            type,
+            kind: 'select',
+            required,
+            enumValues: field.enumValues,
+        };
+    }
+    return { key: field.key, title, description, type, kind: 'text', required };
+}
 function buildWorkflowAppActionConfigEditorDefinition(configSchemaJson) {
     if (!configSchemaJson?.trim()) {
         return {
@@ -1618,7 +1929,11 @@ function buildWorkflowStepPayload({ formValue, properties, hasNotification, appA
     };
 }
 function normalizeWorkflowStepType(type) {
-    return type === 'AppAction' ? 'AppAction' : 'UserInput';
+    if (type === 'AppAction')
+        return 'AppAction';
+    if (type === 'ApprovalCommit')
+        return 'ApprovalCommit';
+    return 'UserInput';
 }
 function normalizeStepName(name) {
     if (name && typeof name === 'object') {
@@ -1693,6 +2008,7 @@ class WorkflowBuilder {
     loadingAppActions = this.workflowFacade.isLoading('getAppActions');
     loadingAppActionDetail = this.workflowFacade.isLoading('getAppActionDetail');
     appActionListError = this.workflowFacade.error('getAppActions');
+    publishError = this.workflowFacade.error('publishWorkflow');
     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 */ []));
@@ -1830,6 +2146,8 @@ class WorkflowBuilder {
             variant: 'outlined',
             size: 'small',
             tooltip: 'Edit',
+            // Locked system steps (e.g. Commit Approved Form) are not editable.
+            condition: (node) => !node.isLocked,
         },
         {
             key: 'delete',
@@ -1838,7 +2156,8 @@ class WorkflowBuilder {
             size: 'small',
             severity: 'danger',
             tooltip: 'Delete',
-            condition: (node) => !node.isInitial,
+            // Initial step + locked system steps are not deletable.
+            condition: (node) => !node.isInitial && !node.isLocked,
         },
     ], ...(ngDevMode ? [{ debugName: "nodeActions" }] : /* istanbul ignore next */ []));
     nodeDialogFooterConfig = {
@@ -1870,19 +2189,33 @@ class WorkflowBuilder {
     }, ...(ngDevMode ? [{ debugName: "connectionFormulaConfig" }] : /* istanbul ignore next */ []));
     steps = computed(() => this.workflowFacade.steps().map((step) => {
         const isAppAction = step.type === 'AppAction';
+        const isApprovalCommit = step.type === 'ApprovalCommit';
         return {
             ...step,
-            color: isAppAction ? '#B45309' : '#0369A1',
-            icon: isAppAction
-                ? 'general.zap'
+            // System Approval-Commit step gets a distinct emerald accent + a
+            // verified-check icon. Authoring is locked; the step is rendered
+            // in icon mode like AppActions to communicate "system boundary".
+            color: isApprovalCommit
+                ? '#059669'
+                : isAppAction
+                    ? '#B45309'
+                    : '#0369A1',
+            icon: isApprovalCommit
+                ? 'general.check-verified-01'
+                : isAppAction
+                    ? 'general.zap'
+                    : step.isInitial
+                        ? 'map.flag-04'
+                        : 'file.clipboard-check',
+            subtitle: isApprovalCommit
+                ? this.transloco.translate('workflow.builder.approvalCommitSubtitle')
+                : this.getStepTypeLabel(step.type),
+            badge: isApprovalCommit
+                ? null
                 : step.isInitial
-                    ? 'map.flag-04'
-                    : 'file.clipboard-check',
-            subtitle: this.getStepTypeLabel(step.type),
-            badge: step.isInitial
-                ? this.transloco.translate('workflow.builder.initial')
-                : null,
-            style: isAppAction ? 'icon' : 'detail',
+                    ? this.transloco.translate('workflow.builder.initial')
+                    : null,
+            style: isAppAction || isApprovalCommit ? 'icon' : 'detail',
         };
     }), ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     connections = computed(() => this.workflowFacade.connections().map((connection) => ({
@@ -1955,7 +2288,7 @@ class WorkflowBuilder {
             if (signature === this.lastAppActionDescriptorSignature) {
                 return;
             }
-            this.rebuildAppActionConfigEditor(this.getCurrentAppActionConfigJson(), descriptor?.configSchemaJson ?? null);
+            this.rebuildAppActionConfigEditor(this.getCurrentAppActionConfigJson(), descriptor?.configSchemaJson ?? null, descriptor);
             this.lastAppActionDescriptorSignature = signature;
         });
         this.stepForm.controls.targetType.valueChanges
@@ -2010,6 +2343,12 @@ class WorkflowBuilder {
                 if (!event.data) {
                     return;
                 }
+                // Locked / system steps (e.g. Commit Approved Form) are
+                // backend-owned and not editable from the FE builder. Hard
+                // short-circuit before opening the editor dialog.
+                if (event.data.isLocked || event.data.type === 'ApprovalCommit') {
+                    return;
+                }
                 this.clearForm(normalizeWorkflowStepType(event.data.type));
                 this.isCreatingStep.set(false);
                 this.isEditingInitialNode.set(!!event.data.isInitial);
@@ -2052,6 +2391,12 @@ class WorkflowBuilder {
                 if (!event.data) {
                     return;
                 }
+                // Defensive guard — UI hides the delete button on locked steps
+                // already; this short-circuit is for any caller that bypasses
+                // the canvas chrome (e.g. keyboard shortcuts).
+                if (event.data.isLocked || event.data.type === 'ApprovalCommit') {
+                    return;
+                }
                 this.confirmationService.confirmDelete({
                     type: 'dialog',
                     accept: () => {
@@ -2136,14 +2481,132 @@ class WorkflowBuilder {
         return this.appActionConfigForm.get(key);
     }
     getAppActionEnumOptions(field) {
+        // Dynamic options (loaded from the backend options endpoint) take
+        // precedence over a descriptor's static enumValues. The cache lookup
+        // depends on the current actionKey + the param context (requestSchemaId).
+        if (field.optionsProviderKey) {
+            const dynamic = this.getDynamicAppActionOptions(field.key);
+            if (dynamic !== undefined) {
+                return dynamic;
+            }
+        }
         return (field.enumValues ?? []).map((value) => ({
             label: String(value),
             value,
         }));
     }
+    /**
+     * Lookup the cached dynamic options for a given config field. Returns
+     * an empty array on backend error so the template can render an error
+     * state, or `undefined` when no fetch has been issued yet.
+     */
+    getDynamicAppActionOptions(fieldKey) {
+        const actionKey = this.appActionSettingsForm.controls.actionKey.value;
+        if (!actionKey)
+            return undefined;
+        const params = this.buildAppActionOptionsParams();
+        const cached = this.workflowFacade.getCachedAppActionOptions(actionKey, fieldKey, params);
+        if (!cached)
+            return undefined;
+        const locale = this.transloco.getActiveLang();
+        return cached.options.map((opt) => {
+            const label = typeof opt.label === 'string'
+                ? opt.label
+                : (opt.label?.[locale] ?? opt.label?.['en'] ?? String(opt.value));
+            return {
+                label,
+                value: opt.value,
+                disabled: !!opt.disabled,
+            };
+        });
+    }
+    hasAppActionOptionsError(fieldKey) {
+        const actionKey = this.appActionSettingsForm.controls.actionKey.value;
+        if (!actionKey)
+            return null;
+        const cached = this.workflowFacade.getCachedAppActionOptions(actionKey, fieldKey, this.buildAppActionOptionsParams());
+        return cached?.errorMessage ?? null;
+    }
+    buildAppActionOptionsParams() {
+        const params = {};
+        const workflowId = this.workflow()?.id;
+        if (workflowId) {
+            params['requestSchemaId'] = workflowId;
+        }
+        return params;
+    }
+    /**
+     * Fire option-loading for every descriptor `select` field that uses
+     * an `optionsProviderKey`. Called whenever the editor is rebuilt or
+     * the active actionKey changes.
+     */
+    loadDynamicAppActionOptions() {
+        const actionKey = this.appActionSettingsForm.controls.actionKey.value;
+        if (!actionKey)
+            return;
+        const definition = this.appActionConfigDefinition();
+        const params = this.buildAppActionOptionsParams();
+        for (const field of definition.fields) {
+            if (field.kind !== 'select' || !field.optionsProviderKey)
+                continue;
+            this.workflowFacade
+                .loadAppActionOptions(actionKey, field.key, params)
+                .subscribe();
+        }
+    }
     getAppActionDescription() {
         return this.currentAppActionDescriptor()?.description ?? null;
     }
+    /** Runtime inputs are non-editable (resolved at runtime); the editor
+     * shows them as read-only "Resolved automatically" hints. */
+    getAppActionRuntimeInputs() {
+        return (this.currentAppActionDescriptor()?.runtimeInputs ?? []).filter((input) => input.designerVisible !== true);
+    }
+    /** Outputs are read-only informational hints. */
+    getAppActionOutputs() {
+        return this.currentAppActionDescriptor()?.outputs ?? [];
+    }
+    /** Phases the action supports (e.g. ['AfterCommit']). Drives the
+     * placement warning when the step is placed before the commit step. */
+    getAppActionSupportedPhases() {
+        return this.currentAppActionDescriptor()?.supportedPhases ?? [];
+    }
+    /**
+     * `true` when the current action is restricted to `AfterCommit` and
+     * therefore should be placed downstream of the `Commit Approved Form`
+     * step. Surfaces an inline guidance hint in the editor.
+     */
+    isAppActionAfterCommitOnly() {
+        const phases = this.getAppActionSupportedPhases();
+        return phases.length === 1 && phases[0] === 'AfterCommit';
+    }
+    /**
+     * `true` when an actionKey is set, descriptor lookup is not in flight,
+     * and we still have no resolvable descriptor — i.e. the backend returned
+     * `data: null` for the descriptor describe-one call. The saved config
+     * is preserved per the AppActions handoff §5.3.
+     */
+    isAppActionMissing() {
+        const actionKey = this.appActionSettingsForm.controls.actionKey.value;
+        if (!actionKey)
+            return false;
+        if (this.loadingAppActionDetail())
+            return false;
+        return !this.currentAppActionDescriptor();
+    }
+    describeRuntimeInputSource(input) {
+        if (input.source === 'Context') {
+            return input.contextKey
+                ? `Resolved from workflow context (${input.contextKey})`
+                : 'Resolved from workflow context';
+        }
+        if (input.source === 'InternalResolver') {
+            return input.resolverKey
+                ? `Resolved internally (${input.resolverKey})`
+                : 'Resolved internally';
+        }
+        return input.source;
+    }
     getAppActionDisplayName() {
         return (this.currentAppActionDescriptor()?.displayName ||
             this.appActionSettingsForm.controls.actionKey.value ||
@@ -2225,7 +2688,22 @@ class WorkflowBuilder {
             failureBehavior: editorState.appActionValue.failureBehavior,
             timeoutSeconds: editorState.appActionValue.timeoutSeconds,
         }, { emitEvent: false });
-        this.rebuildAppActionConfigEditor(editorState.appActionValue.configJson, descriptor?.configSchemaJson ?? step.appAction?.configSchemaJson ?? null);
+        this.rebuildAppActionConfigEditor(editorState.appActionValue.configJson, descriptor?.configSchemaJson ?? step.appAction?.configSchemaJson ?? null, descriptor ??
+            (step.appAction
+                ? {
+                    appCode: step.appAction.appCode,
+                    actionKey: step.appAction.actionKey,
+                    displayName: step.appAction.displayName ?? step.appAction.actionKey,
+                    description: step.appAction.description ?? null,
+                    configSchemaJson: step.appAction.configSchemaJson ?? null,
+                    requiredContextKeys: step.appAction.requiredContextKeys ?? [],
+                    supportedScopes: step.appAction.supportedScopes ?? [],
+                    configFields: step.appAction.configFields,
+                    runtimeInputs: step.appAction.runtimeInputs,
+                    outputs: step.appAction.outputs,
+                    supportedPhases: step.appAction.supportedPhases,
+                }
+                : null));
         this.lastAppActionDescriptorSignature =
             this.createAppActionDescriptorSignature(editorState.appActionValue.actionKey, descriptor?.configSchemaJson ??
                 step.appAction?.configSchemaJson ??
@@ -2240,7 +2718,8 @@ class WorkflowBuilder {
     onAppActionActionChanged(actionKey) {
         this.selectedTab.set('tab1');
         this.lastAppActionDescriptorSignature = '';
-        this.rebuildAppActionConfigEditor(DEFAULT_APP_ACTION_EDITOR_VALUE.configJson, this.resolveDescriptorForActionKey(actionKey)?.configSchemaJson ?? null);
+        const descriptor = this.resolveDescriptorForActionKey(actionKey);
+        this.rebuildAppActionConfigEditor(DEFAULT_APP_ACTION_EDITOR_VALUE.configJson, descriptor?.configSchemaJson ?? null, descriptor);
         if (actionKey) {
             this.ensureAppActionDetailLoaded(actionKey);
         }
@@ -2286,7 +2765,7 @@ class WorkflowBuilder {
             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.rebuildAppActionConfigEditor(DEFAULT_APP_ACTION_EDITOR_VALUE.configJson, this.draftAppActionDescriptor()?.configSchemaJson ?? null, this.draftAppActionDescriptor());
         this.ensureAppActionDetailLoaded(actionKey);
     }
     resetPropertiesTable() {
@@ -2347,8 +2826,12 @@ class WorkflowBuilder {
         this.rebuildAppActionConfigEditor(DEFAULT_APP_ACTION_EDITOR_VALUE.configJson, null);
         this.lastAppActionDescriptorSignature = '';
     }
-    rebuildAppActionConfigEditor(configJson, configSchemaJson) {
-        const definition = buildWorkflowAppActionConfigEditorDefinition(configSchemaJson);
+    rebuildAppActionConfigEditor(configJson, configSchemaJson, descriptor) {
+        // Per the AppActions handoff: prefer descriptor `configFields[]` when
+        // present; fall back to JSON-Schema parsing for legacy descriptors.
+        const definition = descriptor?.configFields && descriptor.configFields.length > 0
+            ? buildWorkflowAppActionConfigEditorDefinitionFromFields(descriptor.configFields)
+            : buildWorkflowAppActionConfigEditorDefinition(configSchemaJson);
         const editorValue = mapWorkflowAppActionConfigJsonToEditorValue(configJson, definition);
         Object.keys(this.appActionConfigForm.controls).forEach((key) => {
             this.appActionConfigForm.removeControl(key);
@@ -2362,6 +2845,10 @@ class WorkflowBuilder {
             emitEvent: false,
         });
         this.appActionConfigDefinition.set(definition);
+        // Kick off backend option-loading for any select field driven by an
+        // `optionsProviderKey`. The cache lookup in `getAppActionEnumOptions`
+        // picks up the populated options once they arrive.
+        this.loadDynamicAppActionOptions();
     }
     ensureAppActionDiscoveryLoaded() {
         this.workflowFacade.loadAppActions();
@@ -2498,7 +2985,7 @@ class WorkflowBuilder {
         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'\">\r\n  <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\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            [availableNodesLabel]=\"t('stepTemplates')\"\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]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\r\n            [layoutDirection]=\"'LR'\"\r\n          >\r\n            <div flowContent class=\"pointer-events-none\">\r\n              @if (hasMultipleWorkflows()) {\r\n                <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\r\n                  <mt-card class=\"w-64\">\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=\"pointer-events-auto 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                  <div class=\"space-y-4\">\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                  <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 space-y-4\">\r\n                        <div class=\"grid gap-3\">\r\n                          <mt-text-field\r\n                            [label]=\"t('nameEnglish')\"\r\n                            [placeholder]=\"t('enterNameEnglish')\"\r\n                            [formControl]=\"stepForm.controls.nameEn\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                          <mt-text-field\r\n                            [label]=\"t('nameArabic')\"\r\n                            [placeholder]=\"t('enterNameArabic')\"\r\n                            [formControl]=\"stepForm.controls.nameAr\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                        </div>\r\n\r\n                        @if (currentStepType() === \"UserInput\") {\r\n                          @if (!isEditingInitialNode()) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-4\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"approver\") }}\r\n                                </div>\r\n                                <mt-select-field\r\n                                  [label]=\"t('approver')\"\r\n                                  [options]=\"[\r\n                                    { label: t('group'), value: '1' },\r\n                                    { label: t('role'), value: '2' },\r\n                                  ]\"\r\n                                  optionLabel=\"label\"\r\n                                  optionValue=\"value\"\r\n                                  [formControl]=\"stepForm.controls.targetType\"\r\n                                  [required]=\"true\"\r\n                                ></mt-select-field>\r\n\r\n                                @if (\r\n                                  stepForm.controls.targetType.value === \"1\"\r\n                                ) {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('group')\"\r\n                                    [placeholder]=\"t('selectGroup')\"\r\n                                    [options]=\"groups()\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"id\"\r\n                                    [formControl]=\"stepForm.controls.group\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                } @else {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('role')\"\r\n                                    [placeholder]=\"t('selectRole')\"\r\n                                    [options]=\"roles()\"\r\n                                    [group]=\"hasGroupedRoles()\"\r\n                                    optionGroupLabel=\"label\"\r\n                                    optionGroupChildren=\"items\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"value\"\r\n                                    [formControl]=\"stepForm.controls.role\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                }\r\n\r\n                                <mt-number-field\r\n                                  [label]=\"t('sla')\"\r\n                                  [placeholder]=\"t('enterSla')\"\r\n                                  [formControl]=\"stepForm.controls.sla\"\r\n                                  [required]=\"true\"\r\n                                  [min]=\"0\"\r\n                                ></mt-number-field>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n                        } @else {\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div class=\"grid gap-3\">\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"app\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\r\n                                  >\r\n                                    {{ t(\"appLabelPplus\") }}\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"action\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\r\n                                  >\r\n                                    {{ getAppActionDisplayName() }}\r\n                                  </div>\r\n                                  @if (getAppActionKey()) {\r\n                                    <div class=\"text-xs text-muted-color\">\r\n                                      {{ getAppActionKey() }}\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n\r\n                                @if (\r\n                                  getAppActionDescription();\r\n                                  as description\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\r\n                                  >\r\n                                    {{ description }}\r\n                                  </div>\r\n                                }\r\n\r\n                                @if (\r\n                                  getAppActionDiscoveryMessage();\r\n                                  as discoveryMessage\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n                                  >\r\n                                    {{ discoveryMessage }}\r\n                                  </div>\r\n                                }\r\n                              </div>\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div>\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionConfiguration\") }}\r\n                                </div>\r\n                                <div class=\"mt-1 text-sm text-muted-color\">\r\n                                  {{ t(\"appActionConfigurationDescription\") }}\r\n                                </div>\r\n                              </div>\r\n\r\n                              @if (\r\n                                loadingAppActionDetail() &&\r\n                                appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"2.5rem\"\r\n                                  ></p-skeleton>\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"6rem\"\r\n                                  ></p-skeleton>\r\n                                </div>\r\n                              } @else if (\r\n                                !appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionUnavailable\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"schema\" &&\r\n                                appActionConfigDefinition().fields.length === 0\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionNoConfigRequired\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"raw\"\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <div\r\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n                                  >\r\n                                    {{ t(\"appActionRawConfigFallback\") }}\r\n                                  </div>\r\n                                  <mt-textarea-field\r\n                                    [label]=\"t('appActionConfigJson')\"\r\n                                    [placeholder]=\"\r\n                                      t('enterAppActionConfigJson')\r\n                                    \"\r\n                                    [formControl]=\"appActionRawConfigControl\"\r\n                                    [rows]=\"'10'\"\r\n                                  ></mt-textarea-field>\r\n                                </div>\r\n                              } @else {\r\n                                <div class=\"space-y-3\">\r\n                                  @for (\r\n                                    field of appActionConfigDefinition().fields;\r\n                                    track field.key\r\n                                  ) {\r\n                                    <div class=\"space-y-2\">\r\n                                      @switch (field.kind) {\r\n                                        @case (\"text\") {\r\n                                          <mt-text-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-text-field>\r\n                                        }\r\n                                        @case (\"number\") {\r\n                                          <mt-number-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-number-field>\r\n                                        }\r\n                                        @case (\"toggle\") {\r\n                                          <mt-toggle-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                          ></mt-toggle-field>\r\n                                        }\r\n                                        @case (\"select\") {\r\n                                          <mt-select-field\r\n                                            [label]=\"field.title\"\r\n                                            [options]=\"\r\n                                              getAppActionEnumOptions(field)\r\n                                            \"\r\n                                            optionLabel=\"label\"\r\n                                            optionValue=\"value\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-select-field>\r\n                                        }\r\n                                        @case (\"json\") {\r\n                                          <mt-textarea-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                            [rows]=\"'8'\"\r\n                                          ></mt-textarea-field>\r\n                                        }\r\n                                      }\r\n\r\n                                      @if (field.description) {\r\n                                        <div class=\"text-xs text-muted-color\">\r\n                                          {{ field.description }}\r\n                                        </div>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n\r\n                              @if (getAppActionConfigMessages().length) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\r\n                                >\r\n                                  @for (\r\n                                    message of getAppActionConfigMessages();\r\n                                    track message\r\n                                  ) {\r\n                                    <div>{{ message }}</div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div\r\n                                class=\"text-sm font-semibold text-surface-900\"\r\n                              >\r\n                                {{ t(\"advancedExecution\") }}\r\n                              </div>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('sla')\"\r\n                                [placeholder]=\"t('enterSla')\"\r\n                                [formControl]=\"stepForm.controls.sla\"\r\n                                [required]=\"true\"\r\n                                [min]=\"0\"\r\n                              ></mt-number-field>\r\n\r\n                              <mt-select-field\r\n                                [label]=\"t('failureBehavior')\"\r\n                                [options]=\"failureBehaviorOptions()\"\r\n                                optionLabel=\"label\"\r\n                                optionValue=\"value\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.failureBehavior\r\n                                \"\r\n                                [required]=\"true\"\r\n                              ></mt-select-field>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('timeoutSeconds')\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.timeoutSeconds\r\n                                \"\r\n                                [required]=\"true\"\r\n                                [min]=\"1\"\r\n                              ></mt-number-field>\r\n                            </div>\r\n                          </mt-card>\r\n                        }\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                    @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", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "nodeStyle", "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", "moreLabel", "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" }] });
+    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'\">\r\n  <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\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            [structureMode]=\"'workflow'\"\r\n            [availableNodes]=\"availableNodes()\"\r\n            [availableNodesLabel]=\"t('stepTemplates')\"\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]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\r\n            [layoutDirection]=\"'LR'\"\r\n          >\r\n            <div flowContent class=\"pointer-events-none\">\r\n              @if (hasMultipleWorkflows()) {\r\n                <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\r\n                  <mt-card class=\"w-64\">\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=\"pointer-events-auto 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\r\n                  @if (publishError()) {\r\n                    <mt-card>\r\n                      <div\r\n                        class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n                      >\r\n                        {{ publishError() }}\r\n                      </div>\r\n                    </mt-card>\r\n                  }\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                  <div class=\"space-y-4\">\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                  <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 space-y-4\">\r\n                        <div class=\"grid gap-3\">\r\n                          <mt-text-field\r\n                            [label]=\"t('nameEnglish')\"\r\n                            [placeholder]=\"t('enterNameEnglish')\"\r\n                            [formControl]=\"stepForm.controls.nameEn\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                          <mt-text-field\r\n                            [label]=\"t('nameArabic')\"\r\n                            [placeholder]=\"t('enterNameArabic')\"\r\n                            [formControl]=\"stepForm.controls.nameAr\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                        </div>\r\n\r\n                        @if (currentStepType() === \"UserInput\") {\r\n                          @if (!isEditingInitialNode()) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-4\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"approver\") }}\r\n                                </div>\r\n                                <mt-select-field\r\n                                  [label]=\"t('approver')\"\r\n                                  [options]=\"[\r\n                                    { label: t('group'), value: '1' },\r\n                                    { label: t('role'), value: '2' },\r\n                                  ]\"\r\n                                  optionLabel=\"label\"\r\n                                  optionValue=\"value\"\r\n                                  [formControl]=\"stepForm.controls.targetType\"\r\n                                  [required]=\"true\"\r\n                                ></mt-select-field>\r\n\r\n                                @if (\r\n                                  stepForm.controls.targetType.value === \"1\"\r\n                                ) {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('group')\"\r\n                                    [placeholder]=\"t('selectGroup')\"\r\n                                    [options]=\"groups()\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"id\"\r\n                                    [formControl]=\"stepForm.controls.group\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                } @else {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('role')\"\r\n                                    [placeholder]=\"t('selectRole')\"\r\n                                    [options]=\"roles()\"\r\n                                    [group]=\"hasGroupedRoles()\"\r\n                                    optionGroupLabel=\"label\"\r\n                                    optionGroupChildren=\"items\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"value\"\r\n                                    [formControl]=\"stepForm.controls.role\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                }\r\n\r\n                                <mt-number-field\r\n                                  [label]=\"t('sla')\"\r\n                                  [placeholder]=\"t('enterSla')\"\r\n                                  [formControl]=\"stepForm.controls.sla\"\r\n                                  [required]=\"true\"\r\n                                  [min]=\"0\"\r\n                                ></mt-number-field>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n                        } @else {\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div class=\"grid gap-3\">\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"app\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\r\n                                  >\r\n                                    {{ t(\"appLabelPplus\") }}\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"action\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\r\n                                  >\r\n                                    {{ getAppActionDisplayName() }}\r\n                                  </div>\r\n                                  @if (getAppActionKey()) {\r\n                                    <div class=\"text-xs text-muted-color\">\r\n                                      {{ getAppActionKey() }}\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n\r\n                                @if (\r\n                                  getAppActionDescription();\r\n                                  as description\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\r\n                                  >\r\n                                    {{ description }}\r\n                                  </div>\r\n                                }\r\n\r\n                                @if (\r\n                                  getAppActionDiscoveryMessage();\r\n                                  as discoveryMessage\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n                                  >\r\n                                    {{ discoveryMessage }}\r\n                                  </div>\r\n                                }\r\n\r\n                                @if (isAppActionMissing()) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n                                  >\r\n                                    <div class=\"font-semibold\">\r\n                                      {{ t(\"unknownAppAction\") }}\r\n                                    </div>\r\n                                    <div class=\"mt-1 text-xs\">\r\n                                      {{ t(\"unknownAppActionHint\") }}\r\n                                    </div>\r\n                                  </div>\r\n                                }\r\n                              </div>\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div>\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionConfiguration\") }}\r\n                                </div>\r\n                                <div class=\"mt-1 text-sm text-muted-color\">\r\n                                  {{ t(\"appActionConfigurationDescription\") }}\r\n                                </div>\r\n                              </div>\r\n\r\n                              @if (\r\n                                loadingAppActionDetail() &&\r\n                                appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"2.5rem\"\r\n                                  ></p-skeleton>\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"6rem\"\r\n                                  ></p-skeleton>\r\n                                </div>\r\n                              } @else if (\r\n                                !appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionUnavailable\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"schema\" &&\r\n                                appActionConfigDefinition().fields.length === 0\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionNoConfigRequired\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"raw\"\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <div\r\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n                                  >\r\n                                    {{ t(\"appActionRawConfigFallback\") }}\r\n                                  </div>\r\n                                  <mt-textarea-field\r\n                                    [label]=\"t('appActionConfigJson')\"\r\n                                    [placeholder]=\"\r\n                                      t('enterAppActionConfigJson')\r\n                                    \"\r\n                                    [formControl]=\"appActionRawConfigControl\"\r\n                                    [rows]=\"'10'\"\r\n                                  ></mt-textarea-field>\r\n                                </div>\r\n                              } @else {\r\n                                <div class=\"space-y-3\">\r\n                                  @for (\r\n                                    field of appActionConfigDefinition().fields;\r\n                                    track field.key\r\n                                  ) {\r\n                                    <div class=\"space-y-2\">\r\n                                      @switch (field.kind) {\r\n                                        @case (\"text\") {\r\n                                          <mt-text-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-text-field>\r\n                                        }\r\n                                        @case (\"number\") {\r\n                                          <mt-number-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-number-field>\r\n                                        }\r\n                                        @case (\"toggle\") {\r\n                                          <mt-toggle-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                          ></mt-toggle-field>\r\n                                        }\r\n                                        @case (\"select\") {\r\n                                          <mt-select-field\r\n                                            [label]=\"field.title\"\r\n                                            [options]=\"\r\n                                              getAppActionEnumOptions(field)\r\n                                            \"\r\n                                            optionLabel=\"label\"\r\n                                            optionValue=\"value\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-select-field>\r\n                                        }\r\n                                        @case (\"json\") {\r\n                                          <mt-textarea-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                            [rows]=\"'8'\"\r\n                                          ></mt-textarea-field>\r\n                                        }\r\n                                      }\r\n\r\n                                      @if (field.description) {\r\n                                        <div class=\"text-xs text-muted-color\">\r\n                                          {{ field.description }}\r\n                                        </div>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n\r\n                              @if (getAppActionConfigMessages().length) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\r\n                                >\r\n                                  @for (\r\n                                    message of getAppActionConfigMessages();\r\n                                    track message\r\n                                  ) {\r\n                                    <div>{{ message }}</div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          @if (getAppActionRuntimeInputs().length) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-3\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionResolvedAutomatically\") }}\r\n                                </div>\r\n                                <div class=\"text-xs text-muted-color\">\r\n                                  {{ t(\"appActionResolvedAutomaticallyHint\") }}\r\n                                </div>\r\n                                <div class=\"space-y-2\">\r\n                                  @for (\r\n                                    input of getAppActionRuntimeInputs();\r\n                                    track input.key\r\n                                  ) {\r\n                                    <div\r\n                                      class=\"flex items-start justify-between gap-3 rounded-lg border border-surface-200 bg-surface-50 px-3 py-2\"\r\n                                    >\r\n                                      <div class=\"min-w-0\">\r\n                                        <div\r\n                                          class=\"text-sm font-medium text-surface-900\"\r\n                                        >\r\n                                          {{ input.key }}\r\n                                        </div>\r\n                                        <div class=\"text-xs text-muted-color\">\r\n                                          {{\r\n                                            describeRuntimeInputSource(input)\r\n                                          }}\r\n                                        </div>\r\n                                      </div>\r\n                                      <span\r\n                                        class=\"shrink-0 rounded-full bg-surface-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-surface-600\"\r\n                                      >\r\n                                        {{ t(\"appActionRuntime\") }}\r\n                                      </span>\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n\r\n                          @if (getAppActionOutputs().length) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-3\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionOutputs\") }}\r\n                                </div>\r\n                                <div class=\"text-xs text-muted-color\">\r\n                                  {{ t(\"appActionOutputsHint\") }}\r\n                                </div>\r\n                                <div class=\"flex flex-wrap gap-1.5\">\r\n                                  @for (\r\n                                    output of getAppActionOutputs();\r\n                                    track output.key\r\n                                  ) {\r\n                                    <span\r\n                                      class=\"rounded-md bg-surface-100 px-2 py-0.5 text-xs font-mono text-surface-700\"\r\n                                      [title]=\"output.description ?? ''\"\r\n                                    >\r\n                                      {{ output.key }}:{{ output.type }}\r\n                                    </span>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n\r\n                          @if (isAppActionAfterCommitOnly()) {\r\n                            <div\r\n                              class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-sm text-amber-800\"\r\n                            >\r\n                              {{ t(\"appActionAfterCommitGuidance\") }}\r\n                            </div>\r\n                          }\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div\r\n                                class=\"text-sm font-semibold text-surface-900\"\r\n                              >\r\n                                {{ t(\"advancedExecution\") }}\r\n                              </div>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('sla')\"\r\n                                [placeholder]=\"t('enterSla')\"\r\n                                [formControl]=\"stepForm.controls.sla\"\r\n                                [required]=\"true\"\r\n                                [min]=\"0\"\r\n                              ></mt-number-field>\r\n\r\n                              <mt-select-field\r\n                                [label]=\"t('failureBehavior')\"\r\n                                [options]=\"failureBehaviorOptions()\"\r\n                                optionLabel=\"label\"\r\n                                optionValue=\"value\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.failureBehavior\r\n                                \"\r\n                                [required]=\"true\"\r\n                              ></mt-select-field>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('timeoutSeconds')\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.timeoutSeconds\r\n                                \"\r\n                                [required]=\"true\"\r\n                                [min]=\"1\"\r\n                              ></mt-number-field>\r\n                            </div>\r\n                          </mt-card>\r\n                        }\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                    @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", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "structureMode", "nodeStyle", "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", "moreLabel", "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", "markCurrentUser"], 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.2.8", ngImport: i0, type: WorkflowBuilder, decorators: [{
             type: Component,
@@ -2517,7 +3004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TextField,
                         NumberField,
                         TextareaField,
-                    ], 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    <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            [availableNodesLabel]=\"t('stepTemplates')\"\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]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\r\n            [layoutDirection]=\"'LR'\"\r\n          >\r\n            <div flowContent class=\"pointer-events-none\">\r\n              @if (hasMultipleWorkflows()) {\r\n                <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\r\n                  <mt-card class=\"w-64\">\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=\"pointer-events-auto 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                  <div class=\"space-y-4\">\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                  <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 space-y-4\">\r\n                        <div class=\"grid gap-3\">\r\n                          <mt-text-field\r\n                            [label]=\"t('nameEnglish')\"\r\n                            [placeholder]=\"t('enterNameEnglish')\"\r\n                            [formControl]=\"stepForm.controls.nameEn\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                          <mt-text-field\r\n                            [label]=\"t('nameArabic')\"\r\n                            [placeholder]=\"t('enterNameArabic')\"\r\n                            [formControl]=\"stepForm.controls.nameAr\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                        </div>\r\n\r\n                        @if (currentStepType() === \"UserInput\") {\r\n                          @if (!isEditingInitialNode()) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-4\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"approver\") }}\r\n                                </div>\r\n                                <mt-select-field\r\n                                  [label]=\"t('approver')\"\r\n                                  [options]=\"[\r\n                                    { label: t('group'), value: '1' },\r\n                                    { label: t('role'), value: '2' },\r\n                                  ]\"\r\n                                  optionLabel=\"label\"\r\n                                  optionValue=\"value\"\r\n                                  [formControl]=\"stepForm.controls.targetType\"\r\n                                  [required]=\"true\"\r\n                                ></mt-select-field>\r\n\r\n                                @if (\r\n                                  stepForm.controls.targetType.value === \"1\"\r\n                                ) {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('group')\"\r\n                                    [placeholder]=\"t('selectGroup')\"\r\n                                    [options]=\"groups()\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"id\"\r\n                                    [formControl]=\"stepForm.controls.group\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                } @else {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('role')\"\r\n                                    [placeholder]=\"t('selectRole')\"\r\n                                    [options]=\"roles()\"\r\n                                    [group]=\"hasGroupedRoles()\"\r\n                                    optionGroupLabel=\"label\"\r\n                                    optionGroupChildren=\"items\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"value\"\r\n                                    [formControl]=\"stepForm.controls.role\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                }\r\n\r\n                                <mt-number-field\r\n                                  [label]=\"t('sla')\"\r\n                                  [placeholder]=\"t('enterSla')\"\r\n                                  [formControl]=\"stepForm.controls.sla\"\r\n                                  [required]=\"true\"\r\n                                  [min]=\"0\"\r\n                                ></mt-number-field>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n                        } @else {\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div class=\"grid gap-3\">\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"app\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\r\n                                  >\r\n                                    {{ t(\"appLabelPplus\") }}\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"action\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\r\n                                  >\r\n                                    {{ getAppActionDisplayName() }}\r\n                                  </div>\r\n                                  @if (getAppActionKey()) {\r\n                                    <div class=\"text-xs text-muted-color\">\r\n                                      {{ getAppActionKey() }}\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n\r\n                                @if (\r\n                                  getAppActionDescription();\r\n                                  as description\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\r\n                                  >\r\n                                    {{ description }}\r\n                                  </div>\r\n                                }\r\n\r\n                                @if (\r\n                                  getAppActionDiscoveryMessage();\r\n                                  as discoveryMessage\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n                                  >\r\n                                    {{ discoveryMessage }}\r\n                                  </div>\r\n                                }\r\n                              </div>\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div>\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionConfiguration\") }}\r\n                                </div>\r\n                                <div class=\"mt-1 text-sm text-muted-color\">\r\n                                  {{ t(\"appActionConfigurationDescription\") }}\r\n                                </div>\r\n                              </div>\r\n\r\n                              @if (\r\n                                loadingAppActionDetail() &&\r\n                                appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"2.5rem\"\r\n                                  ></p-skeleton>\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"6rem\"\r\n                                  ></p-skeleton>\r\n                                </div>\r\n                              } @else if (\r\n                                !appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionUnavailable\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"schema\" &&\r\n                                appActionConfigDefinition().fields.length === 0\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionNoConfigRequired\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"raw\"\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <div\r\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n                                  >\r\n                                    {{ t(\"appActionRawConfigFallback\") }}\r\n                                  </div>\r\n                                  <mt-textarea-field\r\n                                    [label]=\"t('appActionConfigJson')\"\r\n                                    [placeholder]=\"\r\n                                      t('enterAppActionConfigJson')\r\n                                    \"\r\n                                    [formControl]=\"appActionRawConfigControl\"\r\n                                    [rows]=\"'10'\"\r\n                                  ></mt-textarea-field>\r\n                                </div>\r\n                              } @else {\r\n                                <div class=\"space-y-3\">\r\n                                  @for (\r\n                                    field of appActionConfigDefinition().fields;\r\n                                    track field.key\r\n                                  ) {\r\n                                    <div class=\"space-y-2\">\r\n                                      @switch (field.kind) {\r\n                                        @case (\"text\") {\r\n                                          <mt-text-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-text-field>\r\n                                        }\r\n                                        @case (\"number\") {\r\n                                          <mt-number-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-number-field>\r\n                                        }\r\n                                        @case (\"toggle\") {\r\n                                          <mt-toggle-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                          ></mt-toggle-field>\r\n                                        }\r\n                                        @case (\"select\") {\r\n                                          <mt-select-field\r\n                                            [label]=\"field.title\"\r\n                                            [options]=\"\r\n                                              getAppActionEnumOptions(field)\r\n                                            \"\r\n                                            optionLabel=\"label\"\r\n                                            optionValue=\"value\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-select-field>\r\n                                        }\r\n                                        @case (\"json\") {\r\n                                          <mt-textarea-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                            [rows]=\"'8'\"\r\n                                          ></mt-textarea-field>\r\n                                        }\r\n                                      }\r\n\r\n                                      @if (field.description) {\r\n                                        <div class=\"text-xs text-muted-color\">\r\n                                          {{ field.description }}\r\n                                        </div>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n\r\n                              @if (getAppActionConfigMessages().length) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\r\n                                >\r\n                                  @for (\r\n                                    message of getAppActionConfigMessages();\r\n                                    track message\r\n                                  ) {\r\n                                    <div>{{ message }}</div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div\r\n                                class=\"text-sm font-semibold text-surface-900\"\r\n                              >\r\n                                {{ t(\"advancedExecution\") }}\r\n                              </div>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('sla')\"\r\n                                [placeholder]=\"t('enterSla')\"\r\n                                [formControl]=\"stepForm.controls.sla\"\r\n                                [required]=\"true\"\r\n                                [min]=\"0\"\r\n                              ></mt-number-field>\r\n\r\n                              <mt-select-field\r\n                                [label]=\"t('failureBehavior')\"\r\n                                [options]=\"failureBehaviorOptions()\"\r\n                                optionLabel=\"label\"\r\n                                optionValue=\"value\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.failureBehavior\r\n                                \"\r\n                                [required]=\"true\"\r\n                              ></mt-select-field>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('timeoutSeconds')\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.timeoutSeconds\r\n                                \"\r\n                                [required]=\"true\"\r\n                                [min]=\"1\"\r\n                              ></mt-number-field>\r\n                            </div>\r\n                          </mt-card>\r\n                        }\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                    @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" }]
+                    ], 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    <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            [structureMode]=\"'workflow'\"\r\n            [availableNodes]=\"availableNodes()\"\r\n            [availableNodesLabel]=\"t('stepTemplates')\"\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]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\r\n            [layoutDirection]=\"'LR'\"\r\n          >\r\n            <div flowContent class=\"pointer-events-none\">\r\n              @if (hasMultipleWorkflows()) {\r\n                <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\r\n                  <mt-card class=\"w-64\">\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=\"pointer-events-auto 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\r\n                  @if (publishError()) {\r\n                    <mt-card>\r\n                      <div\r\n                        class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n                      >\r\n                        {{ publishError() }}\r\n                      </div>\r\n                    </mt-card>\r\n                  }\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                  <div class=\"space-y-4\">\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                  <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 space-y-4\">\r\n                        <div class=\"grid gap-3\">\r\n                          <mt-text-field\r\n                            [label]=\"t('nameEnglish')\"\r\n                            [placeholder]=\"t('enterNameEnglish')\"\r\n                            [formControl]=\"stepForm.controls.nameEn\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                          <mt-text-field\r\n                            [label]=\"t('nameArabic')\"\r\n                            [placeholder]=\"t('enterNameArabic')\"\r\n                            [formControl]=\"stepForm.controls.nameAr\"\r\n                            [required]=\"true\"\r\n                          ></mt-text-field>\r\n                        </div>\r\n\r\n                        @if (currentStepType() === \"UserInput\") {\r\n                          @if (!isEditingInitialNode()) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-4\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"approver\") }}\r\n                                </div>\r\n                                <mt-select-field\r\n                                  [label]=\"t('approver')\"\r\n                                  [options]=\"[\r\n                                    { label: t('group'), value: '1' },\r\n                                    { label: t('role'), value: '2' },\r\n                                  ]\"\r\n                                  optionLabel=\"label\"\r\n                                  optionValue=\"value\"\r\n                                  [formControl]=\"stepForm.controls.targetType\"\r\n                                  [required]=\"true\"\r\n                                ></mt-select-field>\r\n\r\n                                @if (\r\n                                  stepForm.controls.targetType.value === \"1\"\r\n                                ) {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('group')\"\r\n                                    [placeholder]=\"t('selectGroup')\"\r\n                                    [options]=\"groups()\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"id\"\r\n                                    [formControl]=\"stepForm.controls.group\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                } @else {\r\n                                  <mt-select-field\r\n                                    [label]=\"t('role')\"\r\n                                    [placeholder]=\"t('selectRole')\"\r\n                                    [options]=\"roles()\"\r\n                                    [group]=\"hasGroupedRoles()\"\r\n                                    optionGroupLabel=\"label\"\r\n                                    optionGroupChildren=\"items\"\r\n                                    optionLabel=\"name.display\"\r\n                                    optionValue=\"value\"\r\n                                    [formControl]=\"stepForm.controls.role\"\r\n                                    [required]=\"true\"\r\n                                  ></mt-select-field>\r\n                                }\r\n\r\n                                <mt-number-field\r\n                                  [label]=\"t('sla')\"\r\n                                  [placeholder]=\"t('enterSla')\"\r\n                                  [formControl]=\"stepForm.controls.sla\"\r\n                                  [required]=\"true\"\r\n                                  [min]=\"0\"\r\n                                ></mt-number-field>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n                        } @else {\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div class=\"grid gap-3\">\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"app\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\r\n                                  >\r\n                                    {{ t(\"appLabelPplus\") }}\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <div class=\"grid gap-1\">\r\n                                  <label\r\n                                    class=\"text-sm font-medium text-surface-900\"\r\n                                  >\r\n                                    {{ t(\"action\") }}\r\n                                  </label>\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\r\n                                  >\r\n                                    {{ getAppActionDisplayName() }}\r\n                                  </div>\r\n                                  @if (getAppActionKey()) {\r\n                                    <div class=\"text-xs text-muted-color\">\r\n                                      {{ getAppActionKey() }}\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n\r\n                                @if (\r\n                                  getAppActionDescription();\r\n                                  as description\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\r\n                                  >\r\n                                    {{ description }}\r\n                                  </div>\r\n                                }\r\n\r\n                                @if (\r\n                                  getAppActionDiscoveryMessage();\r\n                                  as discoveryMessage\r\n                                ) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n                                  >\r\n                                    {{ discoveryMessage }}\r\n                                  </div>\r\n                                }\r\n\r\n                                @if (isAppActionMissing()) {\r\n                                  <div\r\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n                                  >\r\n                                    <div class=\"font-semibold\">\r\n                                      {{ t(\"unknownAppAction\") }}\r\n                                    </div>\r\n                                    <div class=\"mt-1 text-xs\">\r\n                                      {{ t(\"unknownAppActionHint\") }}\r\n                                    </div>\r\n                                  </div>\r\n                                }\r\n                              </div>\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div>\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionConfiguration\") }}\r\n                                </div>\r\n                                <div class=\"mt-1 text-sm text-muted-color\">\r\n                                  {{ t(\"appActionConfigurationDescription\") }}\r\n                                </div>\r\n                              </div>\r\n\r\n                              @if (\r\n                                loadingAppActionDetail() &&\r\n                                appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"2.5rem\"\r\n                                  ></p-skeleton>\r\n                                  <p-skeleton\r\n                                    width=\"100%\"\r\n                                    height=\"6rem\"\r\n                                  ></p-skeleton>\r\n                                </div>\r\n                              } @else if (\r\n                                !appActionSettingsForm.controls.actionKey.value\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionUnavailable\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"schema\" &&\r\n                                appActionConfigDefinition().fields.length === 0\r\n                              ) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\r\n                                >\r\n                                  {{ t(\"appActionNoConfigRequired\") }}\r\n                                </div>\r\n                              } @else if (\r\n                                appActionConfigDefinition().mode === \"raw\"\r\n                              ) {\r\n                                <div class=\"space-y-3\">\r\n                                  <div\r\n                                    class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n                                  >\r\n                                    {{ t(\"appActionRawConfigFallback\") }}\r\n                                  </div>\r\n                                  <mt-textarea-field\r\n                                    [label]=\"t('appActionConfigJson')\"\r\n                                    [placeholder]=\"\r\n                                      t('enterAppActionConfigJson')\r\n                                    \"\r\n                                    [formControl]=\"appActionRawConfigControl\"\r\n                                    [rows]=\"'10'\"\r\n                                  ></mt-textarea-field>\r\n                                </div>\r\n                              } @else {\r\n                                <div class=\"space-y-3\">\r\n                                  @for (\r\n                                    field of appActionConfigDefinition().fields;\r\n                                    track field.key\r\n                                  ) {\r\n                                    <div class=\"space-y-2\">\r\n                                      @switch (field.kind) {\r\n                                        @case (\"text\") {\r\n                                          <mt-text-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-text-field>\r\n                                        }\r\n                                        @case (\"number\") {\r\n                                          <mt-number-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-number-field>\r\n                                        }\r\n                                        @case (\"toggle\") {\r\n                                          <mt-toggle-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                          ></mt-toggle-field>\r\n                                        }\r\n                                        @case (\"select\") {\r\n                                          <mt-select-field\r\n                                            [label]=\"field.title\"\r\n                                            [options]=\"\r\n                                              getAppActionEnumOptions(field)\r\n                                            \"\r\n                                            optionLabel=\"label\"\r\n                                            optionValue=\"value\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                          ></mt-select-field>\r\n                                        }\r\n                                        @case (\"json\") {\r\n                                          <mt-textarea-field\r\n                                            [label]=\"field.title\"\r\n                                            [formControl]=\"\r\n                                              getAppActionConfigControl(\r\n                                                field.key\r\n                                              )\r\n                                            \"\r\n                                            [required]=\"field.required\"\r\n                                            [rows]=\"'8'\"\r\n                                          ></mt-textarea-field>\r\n                                        }\r\n                                      }\r\n\r\n                                      @if (field.description) {\r\n                                        <div class=\"text-xs text-muted-color\">\r\n                                          {{ field.description }}\r\n                                        </div>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n\r\n                              @if (getAppActionConfigMessages().length) {\r\n                                <div\r\n                                  class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\r\n                                >\r\n                                  @for (\r\n                                    message of getAppActionConfigMessages();\r\n                                    track message\r\n                                  ) {\r\n                                    <div>{{ message }}</div>\r\n                                  }\r\n                                </div>\r\n                              }\r\n                            </div>\r\n                          </mt-card>\r\n\r\n                          @if (getAppActionRuntimeInputs().length) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-3\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionResolvedAutomatically\") }}\r\n                                </div>\r\n                                <div class=\"text-xs text-muted-color\">\r\n                                  {{ t(\"appActionResolvedAutomaticallyHint\") }}\r\n                                </div>\r\n                                <div class=\"space-y-2\">\r\n                                  @for (\r\n                                    input of getAppActionRuntimeInputs();\r\n                                    track input.key\r\n                                  ) {\r\n                                    <div\r\n                                      class=\"flex items-start justify-between gap-3 rounded-lg border border-surface-200 bg-surface-50 px-3 py-2\"\r\n                                    >\r\n                                      <div class=\"min-w-0\">\r\n                                        <div\r\n                                          class=\"text-sm font-medium text-surface-900\"\r\n                                        >\r\n                                          {{ input.key }}\r\n                                        </div>\r\n                                        <div class=\"text-xs text-muted-color\">\r\n                                          {{\r\n                                            describeRuntimeInputSource(input)\r\n                                          }}\r\n                                        </div>\r\n                                      </div>\r\n                                      <span\r\n                                        class=\"shrink-0 rounded-full bg-surface-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-surface-600\"\r\n                                      >\r\n                                        {{ t(\"appActionRuntime\") }}\r\n                                      </span>\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n\r\n                          @if (getAppActionOutputs().length) {\r\n                            <mt-card>\r\n                              <div class=\"space-y-3\">\r\n                                <div\r\n                                  class=\"text-sm font-semibold text-surface-900\"\r\n                                >\r\n                                  {{ t(\"appActionOutputs\") }}\r\n                                </div>\r\n                                <div class=\"text-xs text-muted-color\">\r\n                                  {{ t(\"appActionOutputsHint\") }}\r\n                                </div>\r\n                                <div class=\"flex flex-wrap gap-1.5\">\r\n                                  @for (\r\n                                    output of getAppActionOutputs();\r\n                                    track output.key\r\n                                  ) {\r\n                                    <span\r\n                                      class=\"rounded-md bg-surface-100 px-2 py-0.5 text-xs font-mono text-surface-700\"\r\n                                      [title]=\"output.description ?? ''\"\r\n                                    >\r\n                                      {{ output.key }}:{{ output.type }}\r\n                                    </span>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </mt-card>\r\n                          }\r\n\r\n                          @if (isAppActionAfterCommitOnly()) {\r\n                            <div\r\n                              class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-sm text-amber-800\"\r\n                            >\r\n                              {{ t(\"appActionAfterCommitGuidance\") }}\r\n                            </div>\r\n                          }\r\n\r\n                          <mt-card>\r\n                            <div class=\"space-y-4\">\r\n                              <div\r\n                                class=\"text-sm font-semibold text-surface-900\"\r\n                              >\r\n                                {{ t(\"advancedExecution\") }}\r\n                              </div>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('sla')\"\r\n                                [placeholder]=\"t('enterSla')\"\r\n                                [formControl]=\"stepForm.controls.sla\"\r\n                                [required]=\"true\"\r\n                                [min]=\"0\"\r\n                              ></mt-number-field>\r\n\r\n                              <mt-select-field\r\n                                [label]=\"t('failureBehavior')\"\r\n                                [options]=\"failureBehaviorOptions()\"\r\n                                optionLabel=\"label\"\r\n                                optionValue=\"value\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.failureBehavior\r\n                                \"\r\n                                [required]=\"true\"\r\n                              ></mt-select-field>\r\n\r\n                              <mt-number-field\r\n                                [label]=\"t('timeoutSeconds')\"\r\n                                [formControl]=\"\r\n                                  appActionSettingsForm.controls.timeoutSeconds\r\n                                \"\r\n                                [required]=\"true\"\r\n                                [min]=\"1\"\r\n                              ></mt-number-field>\r\n                            </div>\r\n                          </mt-card>\r\n                        }\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                    @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" }]
         }], ctorParameters: () => [] });
 
 // store/app.state.ts
@@ -2535,5 +3022,5 @@ const REQUEST_CONTEXT = new HttpContextToken(() => ({
  * Generated bundle index. Do not edit.
  */
 
-export { CreateConnection, CreateStep, DeleteConnection, DeleteStep, GetAppActionDetail, GetAppActions, GetFormulaProperties, GetGroups, GetRolesForModule, GetStep, GetWorkflow, GetWorkflows, PublishWorkflow, REQUEST_CONTEXT, SetModuleInfo, UpdateConnection, UpdateStep, ValidateFlow, WorkflowBuilder, WorkflowFacade, WorkflowState };
+export { CreateConnection, CreateStep, DeleteConnection, DeleteStep, GetAppActionDetail, GetAppActionOptions, GetAppActions, GetFormulaProperties, GetGroups, GetRolesForModule, GetStep, GetWorkflow, GetWorkflows, PublishWorkflow, REQUEST_CONTEXT, SetModuleInfo, UpdateConnection, UpdateStep, ValidateFlow, WorkflowBuilder, WorkflowFacade, WorkflowState, buildAppActionOptionsCacheKey };
 //# sourceMappingURL=masterteam-workflow.mjs.map