@masterteam/governance 0.0.7 → 0.0.9

package/fesm2022/masterteam-governance.mjs

@@ -1,21 +1,22 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, effect, Component, viewChild, linkedSignal, signal } from '@angular/core';
+import { inject, Injectable, computed, input, viewChild, effect, untracked, ChangeDetectionStrategy, Component, linkedSignal, signal } from '@angular/core';
 import { Table } from '@masterteam/components/table';
-import * as i1 from 'primeng/skeleton';
+import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient } from '@angular/common/http';
-import { CrudStateBase, handleApiRequest, TextFieldConfig, NumberFieldConfig, TextareaFieldConfig, SelectFieldConfig, ToggleFieldConfig, ValidatorConfig, DateFieldConfig, MultiSelectFieldConfig } from '@masterteam/components';
+import { CrudStateBase, handleApiRequest, TextFieldConfig, TextareaFieldConfig, RadioCardsFieldConfig, SelectFieldConfig, NumberFieldConfig, MultiSelectFieldConfig, ToggleFieldConfig, ValidatorConfig, DateFieldConfig } from '@masterteam/components';
 import { TranslocoService, TranslocoDirective, TranslocoPipe } from '@jsverse/transloco';
 import { ModalService } from '@masterteam/components/modal';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { map, finalize } from 'rxjs';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import { Button } from '@masterteam/components/button';
-import { ModalRef, DialogService } from '@masterteam/components/dialog';
-import { finalize } from 'rxjs';
+import { ModalRef } from '@masterteam/components/dialog';
+import { ToastService } from '@masterteam/components/toast';
 import { Icon } from '@masterteam/icons';
 import { Chip } from '@masterteam/components/chip';
 
@@ -593,623 +594,1926 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+const GOVERNANCE_RULE_RECIPE_DEFINITIONS = [
+    {
+        key: 'require-module',
+        ruleTypeKeys: ['ModuleExists'],
+        labelKey: 'wizard.recipes.require-module.label',
+    },
+    {
+        key: 'prevent-module',
+        ruleTypeKeys: ['ModuleNotExists', 'ModuleDoesNotExist'],
+        labelKey: 'wizard.recipes.prevent-module.label',
+    },
+    {
+        key: 'module-max-count',
+        ruleTypeKeys: ['ModuleMaxCount'],
+        labelKey: 'wizard.recipes.module-max-count.label',
+    },
+    {
+        key: 'module-min-count',
+        ruleTypeKeys: ['ModuleMinCount'],
+        labelKey: 'wizard.recipes.module-min-count.label',
+    },
+    {
+        key: 'phase-gate-completed',
+        ruleTypeKeys: ['PhaseGateCompleted'],
+        labelKey: 'wizard.recipes.phase-gate-completed.label',
+    },
+    {
+        key: 'phase-gate-module-required',
+        ruleTypeKeys: ['PhaseGateModuleRequired'],
+        labelKey: 'wizard.recipes.phase-gate-module-required.label',
+    },
+    {
+        key: 'no-active-request',
+        ruleTypeKeys: ['NoActiveRequest'],
+        labelKey: 'wizard.recipes.no-active-request.label',
+    },
+    {
+        key: 'property-value',
+        ruleTypeKeys: ['PropertyValueEquals', 'FieldValue'],
+        labelKey: 'wizard.recipes.property-value.label',
+    },
+];
+const GOVERNANCE_APPLIES_TO_OPTIONS = [
+    {
+        value: 'level',
+        labelKey: 'wizard.applies-to.level.label',
+    },
+    {
+        value: 'any-module',
+        labelKey: 'wizard.applies-to.any-module.label',
+    },
+    {
+        value: 'specific-module',
+        labelKey: 'wizard.applies-to.specific-module.label',
+    },
+    {
+        value: 'phase-gate',
+        labelKey: 'wizard.applies-to.phase-gate.label',
+    },
+];
+const GOVERNANCE_ACTION_OPTIONS = [
+    {
+        value: 'create',
+        labelKey: 'wizard.actions.create',
+    },
+    {
+        value: 'update',
+        labelKey: 'wizard.actions.update',
+    },
+    {
+        value: 'delete',
+        labelKey: 'wizard.actions.delete',
+    },
+];
+const GOVERNANCE_OPERATOR_OPTIONS = [
+    {
+        value: 'Equals',
+        labelKey: 'wizard.operators.Equals',
+    },
+    {
+        value: 'NotEquals',
+        labelKey: 'wizard.operators.NotEquals',
+    },
+    {
+        value: 'Contains',
+        labelKey: 'wizard.operators.Contains',
+    },
+    {
+        value: 'GreaterThan',
+        labelKey: 'wizard.operators.GreaterThan',
+    },
+    {
+        value: 'LessThan',
+        labelKey: 'wizard.operators.LessThan',
+    },
+];
+const GOVERNANCE_PROPERTY_OPERATORS = [
+    'Equals',
+    'NotEquals',
+    'Contains',
+    'GreaterThan',
+    'LessThan',
+];
+const DEFAULT_BLOCKING_STATUSES = [
+    'Pending',
+    'Draft',
+    'InProgress',
+];
+const DEFAULT_GOVERNANCE_RULE_FORM_VALUE = {
+    key: '',
+    name: { en: '', ar: '' },
+    description: { en: '', ar: '' },
+    errorMessage: { en: '', ar: '' },
+    appliesTo: 'any-module',
+    selectedModuleKey: null,
+    actionKey: null,
+    recipeKey: null,
+    requiredModuleKey: null,
+    blockedModuleKey: null,
+    countedModuleKey: null,
+    countValue: 1,
+    phaseGateSchemaId: null,
+    requestSchemaId: null,
+    blockingStatuses: [],
+    propertyKey: null,
+    operator: 'Equals',
+    expectedValue: '',
+    priority: 10,
+    stopOnFailure: true,
+    isActive: true,
+};
+function readGovernanceRuleTypeKey(ruleType) {
+    return String(ruleType.key ?? ruleType.type ?? '').trim();
+}
+function readGovernanceRuleKey(rule) {
+    return String(rule.ruleTypeKey ?? '').trim();
+}
+function resolveRecipeDefinition(recipeKey) {
+    return (GOVERNANCE_RULE_RECIPE_DEFINITIONS.find((definition) => definition.key === recipeKey) ?? null);
+}
+function resolveRecipeByRuleTypeKey(ruleTypeKey) {
+    const normalized = String(ruleTypeKey ?? '').trim();
+    if (!normalized) {
+        return null;
+    }
+    return (GOVERNANCE_RULE_RECIPE_DEFINITIONS.find((definition) => definition.ruleTypeKeys.some((key) => key === normalized))?.key ?? null);
+}
+function findRuleTypeByRecipe(ruleTypes, recipeKey) {
+    const definition = resolveRecipeDefinition(recipeKey);
+    if (!definition) {
+        return null;
+    }
+    return (ruleTypes.find((ruleType) => definition.ruleTypeKeys.includes(readGovernanceRuleTypeKey(ruleType))) ?? null);
+}
+function findConfigurationSchemaField(ruleType, fieldKey) {
+    if (!ruleType) {
+        return null;
+    }
+    return (ruleType.configurationSchema.find((field) => field.key === fieldKey) ?? null);
+}
+
+function mapAppliesToToTargetScope(appliesTo) {
+    switch (appliesTo) {
+        case 'level':
+            return 'Level';
+        case 'phase-gate':
+            return 'PhaseGate';
+        case 'any-module':
+        case 'specific-module':
+        default:
+            return 'Module';
+    }
+}
+function mapActionToOperationKey(actionKey) {
+    switch (actionKey) {
+        case 'update':
+            return 'Update';
+        case 'delete':
+            return 'Delete';
+        case 'create':
+        default:
+            return 'Create';
+    }
+}
+function mapOperationKeyToAction(operationKey) {
+    switch (String(operationKey ?? '')
+        .trim()
+        .toLowerCase()) {
+        case 'create':
+            return 'create';
+        case 'update':
+            return 'update';
+        case 'delete':
+            return 'delete';
+        default:
+            return null;
+    }
+}
+function toNullableString(value) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const text = String(value).trim();
+    return text ? text : null;
+}
+function toNullableNumber(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    const numeric = typeof value === 'number'
+        ? value
+        : Number(String(value).replace(/[^\d.-]/g, ''));
+    return Number.isFinite(numeric) ? numeric : null;
+}
+function toStringArray(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value
+        .map((item) => toNullableString(item))
+        .filter((item) => !!item);
+}
+function trimBilingualValue(value) {
+    return {
+        en: value.en.trim(),
+        ar: value.ar.trim(),
+    };
+}
+function normalizeKeySegment(value) {
+    return value
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+function resolveRuleKey(currentKey, name, fallback) {
+    const existingKey = toNullableString(currentKey);
+    if (existingKey) {
+        return existingKey;
+    }
+    const nameKey = normalizeKeySegment(name.en);
+    if (nameKey) {
+        return nameKey;
+    }
+    const fallbackKey = normalizeKeySegment(String(fallback ?? ''));
+    return fallbackKey || 'governance-rule';
+}
+function buildRecipeConfiguration(formValue) {
+    switch (formValue.recipeKey) {
+        case 'require-module': {
+            const requiredModuleKey = toNullableString(formValue.requiredModuleKey);
+            if (!requiredModuleKey) {
+                return undefined;
+            }
+            const minCount = toNullableNumber(formValue.countValue);
+            return minCount && minCount > 1
+                ? { requiredModuleKey, minCount }
+                : { requiredModuleKey };
+        }
+        case 'prevent-module': {
+            const moduleKey = toNullableString(formValue.blockedModuleKey);
+            return moduleKey ? { moduleKey } : undefined;
+        }
+        case 'module-max-count': {
+            const moduleKey = toNullableString(formValue.countedModuleKey);
+            const maxCount = toNullableNumber(formValue.countValue);
+            return moduleKey && maxCount !== null
+                ? { moduleKey, maxCount }
+                : undefined;
+        }
+        case 'module-min-count': {
+            const moduleKey = toNullableString(formValue.countedModuleKey);
+            const minCount = toNullableNumber(formValue.countValue);
+            return moduleKey && minCount !== null
+                ? { moduleKey, minCount }
+                : undefined;
+        }
+        case 'phase-gate-completed': {
+            const phaseGateSchemaId = toNullableNumber(formValue.phaseGateSchemaId);
+            return phaseGateSchemaId !== null ? { phaseGateSchemaId } : undefined;
+        }
+        case 'phase-gate-module-required': {
+            const requiredModuleKey = toNullableString(formValue.requiredModuleKey);
+            if (!requiredModuleKey) {
+                return undefined;
+            }
+            const phaseGateSchemaId = toNullableNumber(formValue.phaseGateSchemaId);
+            return phaseGateSchemaId !== null
+                ? { requiredModuleKey, phaseGateSchemaId }
+                : { requiredModuleKey };
+        }
+        case 'no-active-request': {
+            const requestSchemaId = toNullableNumber(formValue.requestSchemaId);
+            const blockingStatuses = toStringArray(formValue.blockingStatuses);
+            const configuration = {};
+            if (requestSchemaId !== null) {
+                configuration['requestSchemaId'] = requestSchemaId;
+            }
+            if (blockingStatuses.length > 0) {
+                configuration['blockingStatuses'] = blockingStatuses;
+            }
+            return Object.keys(configuration).length > 0 ? configuration : undefined;
+        }
+        case 'property-value': {
+            const propertyKey = toNullableString(formValue.propertyKey);
+            const operator = toNullableString(formValue.operator);
+            const expectedValue = toNullableString(formValue.expectedValue);
+            return propertyKey && operator && expectedValue !== null
+                ? { propertyKey, operator, expectedValue }
+                : undefined;
+        }
+        default:
+            return undefined;
+    }
+}
+function buildCreatePayload(formValue, ruleType) {
+    const name = trimBilingualValue(formValue.name);
+    const description = trimBilingualValue(formValue.description);
+    const errorMessage = trimBilingualValue(formValue.errorMessage);
+    const ruleTypeKey = readGovernanceRuleTypeKey(ruleType);
+    return {
+        key: resolveRuleKey(formValue.key, name, ruleTypeKey),
+        name,
+        description: description.en || description.ar ? description : undefined,
+        errorMessage,
+        ruleType: ruleTypeKey,
+        targetScope: mapAppliesToToTargetScope(formValue.appliesTo),
+        targetModuleKey: formValue.appliesTo === 'specific-module'
+            ? (toNullableString(formValue.selectedModuleKey) ?? undefined)
+            : undefined,
+        targetOperationKey: formValue.actionKey !== null
+            ? mapActionToOperationKey(formValue.actionKey)
+            : undefined,
+        configuration: buildRecipeConfiguration(formValue),
+        priority: toNullableNumber(formValue.priority) ?? 10,
+        stopOnFailure: formValue.stopOnFailure ?? true,
+    };
+}
+function buildUpdatePayload(formValue, ruleType) {
+    return {
+        ...buildCreatePayload(formValue, ruleType),
+        isActive: formValue.isActive ?? true,
+    };
+}
+function mapRuleToWizardFormValue(rule) {
+    const recipeKey = resolveRecipeByRuleTypeKey(readGovernanceRuleKey(rule));
+    if (!recipeKey) {
+        return null;
+    }
+    const appliesTo = resolveAppliesTo(rule, recipeKey);
+    const actionKey = mapOperationKeyToAction(rule.targetOperationKey);
+    if (!actionKey) {
+        return null;
+    }
+    const configuration = rule.configuration ?? {};
+    const formValue = {
+        ...DEFAULT_GOVERNANCE_RULE_FORM_VALUE,
+        key: rule.key ?? '',
+        name: {
+            en: rule.name?.en ?? '',
+            ar: rule.name?.ar ?? '',
+        },
+        description: {
+            en: rule.description?.en ?? '',
+            ar: rule.description?.ar ?? '',
+        },
+        errorMessage: {
+            en: rule.errorMessage?.en ?? '',
+            ar: rule.errorMessage?.ar ?? '',
+        },
+        appliesTo,
+        selectedModuleKey: appliesTo === 'specific-module'
+            ? toNullableString(rule.targetModuleKey)
+            : null,
+        actionKey,
+        recipeKey,
+        priority: rule.priority ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.priority,
+        stopOnFailure: rule.stopOnFailure ?? true,
+        isActive: rule.isActive ?? true,
+        requiredModuleKey: toNullableString(configuration['requiredModuleKey'] ?? configuration['moduleKey']),
+        blockedModuleKey: toNullableString(configuration['moduleKey']),
+        countedModuleKey: toNullableString(configuration['moduleKey']),
+        countValue: toNullableNumber(configuration['maxCount'] ??
+            configuration['minCount'] ??
+            DEFAULT_GOVERNANCE_RULE_FORM_VALUE.countValue) ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.countValue,
+        phaseGateSchemaId: toNullableString(configuration['phaseGateSchemaId']),
+        requestSchemaId: toNullableString(configuration['requestSchemaId']),
+        blockingStatuses: toStringArray(configuration['blockingStatuses']),
+        propertyKey: toNullableString(configuration['propertyKey'] ?? configuration['fieldKey']),
+        operator: toNullableString(configuration['operator']) ??
+            DEFAULT_GOVERNANCE_RULE_FORM_VALUE.operator,
+        expectedValue: toNullableString(configuration['expectedValue'] ?? configuration['value']) ?? '',
+    };
+    if (recipeKey === 'prevent-module') {
+        formValue.blockedModuleKey = toNullableString(configuration['moduleKey']);
+        formValue.requiredModuleKey = null;
+    }
+    if (recipeKey === 'phase-gate-completed') {
+        formValue.requiredModuleKey = null;
+    }
+    if (recipeKey === 'no-active-request') {
+        formValue.requiredModuleKey = null;
+        formValue.blockedModuleKey = null;
+        formValue.countedModuleKey = null;
+    }
+    if (recipeKey === 'property-value') {
+        formValue.requiredModuleKey = null;
+        formValue.blockedModuleKey = null;
+        formValue.countedModuleKey = null;
+    }
+    return formValue;
+}
+function resolveAppliesTo(rule, recipeKey) {
+    const scope = String(rule.targetScope ?? '').trim();
+    const targetModuleKey = String(rule.targetModuleKey ?? '').trim();
+    if (scope === 'Level') {
+        return 'level';
+    }
+    if (scope === 'PhaseGate' ||
+        ((recipeKey === 'phase-gate-completed' ||
+            recipeKey === 'phase-gate-module-required') &&
+            targetModuleKey.toLowerCase() === 'phasegate')) {
+        return 'phase-gate';
+    }
+    return targetModuleKey ? 'specific-module' : 'any-module';
+}
+function mapRuleToLegacyFormValue(rule) {
+    const formData = {
+        key: rule.key,
+        priority: rule.priority,
+        name: {
+            en: rule.name?.en ?? '',
+            ar: rule.name?.ar ?? '',
+        },
+        description: {
+            en: rule.description?.en ?? '',
+            ar: rule.description?.ar ?? '',
+        },
+        errorMessage: {
+            en: rule.errorMessage?.en ?? '',
+            ar: rule.errorMessage?.ar ?? '',
+        },
+        ruleType: rule.ruleTypeKey,
+        targetScope: rule.targetScope,
+        targetModuleKey: rule.targetModuleKey ?? '',
+        targetOperationKey: rule.targetOperationKey ?? '',
+        stopOnFailure: rule.stopOnFailure,
+        isActive: rule.isActive,
+    };
+    Object.entries(rule.configuration ?? {}).forEach(([key, value]) => {
+        formData[`config_${key}`] = value;
+    });
+    return formData;
+}
+function packLegacyFormToCreateDto(formValue) {
+    const name = trimBilingualValue(formValue.name);
+    const description = trimBilingualValue(formValue.description);
+    const errorMessage = trimBilingualValue(formValue.errorMessage);
+    const ruleType = String(formValue.ruleType ?? '');
+    return {
+        key: resolveRuleKey(formValue.key, name, ruleType),
+        name,
+        description: description.en || description.ar ? description : undefined,
+        errorMessage,
+        ruleType,
+        targetScope: String(formValue.targetScope ?? ''),
+        targetModuleKey: String(formValue.targetModuleKey ?? '') || undefined,
+        targetOperationKey: String(formValue.targetOperationKey ?? '') || undefined,
+        configuration: extractLegacyConfiguration(formValue),
+        priority: Number(formValue.priority ?? 0),
+        stopOnFailure: Boolean(formValue.stopOnFailure ?? true),
+    };
+}
+function packLegacyFormToUpdateDto(formValue) {
+    return {
+        ...packLegacyFormToCreateDto(formValue),
+        isActive: Boolean(formValue.isActive ?? true),
+    };
+}
+function extractLegacyConfiguration(formValue) {
+    const configuration = {};
+    Object.entries(formValue).forEach(([key, value]) => {
+        if (key.startsWith('config_') &&
+            value !== null &&
+            value !== undefined &&
+            value !== '') {
+            configuration[key.replace('config_', '')] = value;
+        }
+    });
+    return Object.keys(configuration).length > 0 ? configuration : undefined;
+}
+
+function buildWizardFormConfig({ translate, isEdit, recipeKey, appliesToOptions, actionOptions, recipeOptions, moduleOptions, requestSchemaOptions, propertyOptions, phaseGateOptions, blockingStatuses, }) {
+    const statusOptions = blockingStatuses.map((status) => ({
+        label: status,
+        value: status,
+    }));
+    const operatorOptions = GOVERNANCE_OPERATOR_OPTIONS.map((option) => ({
+        label: translate(option.labelKey),
+        value: option.value,
+    }));
+    const countLabel = recipeKey === 'module-min-count'
+        ? translate('wizard.min-count-label')
+        : translate('wizard.max-count-label');
+    return {
+        sections: [
+            {
+                key: 'basicInfo',
+                type: 'header',
+                label: translate('basic-information'),
+                order: 1,
+                fields: [
+                    new TextFieldConfig({
+                        key: 'name.en',
+                        label: translate('name-en'),
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 1,
+                        colSpan: 6,
+                    }),
+                    new TextFieldConfig({
+                        key: 'name.ar',
+                        label: translate('name-ar'),
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 2,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'description.en',
+                        label: translate('description-en'),
+                        rows: 3,
+                        order: 3,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'description.ar',
+                        label: translate('description-ar'),
+                        rows: 3,
+                        order: 4,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'errorMessage.en',
+                        label: translate('error-message-en'),
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        rows: 3,
+                        order: 5,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'errorMessage.ar',
+                        label: translate('error-message-ar'),
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        rows: 3,
+                        order: 6,
+                        colSpan: 6,
+                    }),
+                ],
+            },
+            {
+                key: 'appliesTo',
+                type: 'header',
+                label: translate('wizard.where-question'),
+                order: 2,
+                fields: [
+                    new RadioCardsFieldConfig({
+                        key: 'appliesTo',
+                        options: appliesToOptions,
+                        optionLabel: 'name',
+                        optionValue: 'id',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 1,
+                        colSpan: 12,
+                        size: 'small',
+                    }),
+                    new SelectFieldConfig({
+                        key: 'selectedModuleKey',
+                        label: translate('wizard.specific-module-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: moduleOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 2,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'appliesTo',
+                                value: 'specific-module',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                ],
+            },
+            {
+                key: 'action',
+                type: 'header',
+                label: translate('wizard.when-question'),
+                order: 3,
+                fields: [
+                    new RadioCardsFieldConfig({
+                        key: 'actionKey',
+                        options: actionOptions,
+                        optionLabel: 'name',
+                        optionValue: 'id',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 1,
+                        colSpan: 12,
+                        size: 'small',
+                    }),
+                ],
+            },
+            {
+                key: 'recipe',
+                type: 'header',
+                label: translate('wizard.what-question'),
+                order: 4,
+                fields: [
+                    new RadioCardsFieldConfig({
+                        key: 'recipeKey',
+                        options: recipeOptions,
+                        optionLabel: 'name',
+                        optionValue: 'id',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 1,
+                        colSpan: 12,
+                        size: 'small',
+                    }),
+                ],
+            },
+            {
+                key: 'details',
+                type: 'header',
+                label: translate('wizard.details-question'),
+                order: 5,
+                fields: [
+                    new SelectFieldConfig({
+                        key: 'requiredModuleKey',
+                        label: translate('wizard.required-module-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: moduleOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 1,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'require-module',
+                                action: 'show',
+                            },
+                            {
+                                key: 'recipeKey',
+                                value: 'phase-gate-module-required',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'blockedModuleKey',
+                        label: translate('wizard.blocked-module-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: moduleOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 2,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'prevent-module',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'countedModuleKey',
+                        label: translate('wizard.counted-module-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: moduleOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 3,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'module-max-count',
+                                action: 'show',
+                            },
+                            {
+                                key: 'recipeKey',
+                                value: 'module-min-count',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new NumberFieldConfig({
+                        key: 'countValue',
+                        label: countLabel,
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                            ValidatorConfig.min(1),
+                        ],
+                        min: 1,
+                        order: 4,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'module-max-count',
+                                action: 'show',
+                            },
+                            {
+                                key: 'recipeKey',
+                                value: 'module-min-count',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'phaseGateCompletedSchemaId',
+                        label: translate('wizard.phase-gate-required-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: phaseGateOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 5,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'phase-gate-completed',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'phaseGateOptionalSchemaId',
+                        label: translate('wizard.phase-gate-optional-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: phaseGateOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        order: 6,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'phase-gate-module-required',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'requestSchemaId',
+                        label: translate('wizard.request-schema-label'),
+                        placeholder: translate('wizard.request-schema-hint'),
+                        options: requestSchemaOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        order: 7,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'no-active-request',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new MultiSelectFieldConfig({
+                        key: 'blockingStatuses',
+                        label: translate('wizard.blocking-statuses-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: statusOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        order: 8,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'no-active-request',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'propertyKey',
+                        label: translate('wizard.property-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: propertyOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 9,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'property-value',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'operator',
+                        label: translate('wizard.operator-label'),
+                        placeholder: translate('wizard.select-placeholder'),
+                        options: operatorOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 10,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'property-value',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new TextFieldConfig({
+                        key: 'expectedValue',
+                        label: translate('wizard.expected-value-label'),
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                        ],
+                        order: 11,
+                        colSpan: 12,
+                        relations: [
+                            {
+                                key: 'recipeKey',
+                                value: 'property-value',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                ],
+            },
+            {
+                key: 'advanced',
+                type: 'header',
+                label: translate('execution-settings'),
+                order: 6,
+                fields: [
+                    new NumberFieldConfig({
+                        key: 'priority',
+                        label: translate('priority'),
+                        validators: [
+                            ValidatorConfig.required(translate('wizard.required-message')),
+                            ValidatorConfig.min(0),
+                        ],
+                        min: 0,
+                        max: 1000,
+                        order: 1,
+                        colSpan: 6,
+                    }),
+                    new ToggleFieldConfig({
+                        key: 'stopOnFailure',
+                        label: translate('stop-on-failure'),
+                        order: 2,
+                        colSpan: 12,
+                    }),
+                    new ToggleFieldConfig({
+                        key: 'isActive',
+                        label: translate('active-rule'),
+                        hidden: !isEdit,
+                        order: 3,
+                        colSpan: 12,
+                    }),
+                ],
+            },
+        ],
+    };
+}
+function buildLegacyFormConfig({ translate, isEdit, langCode, selectedRuleType, ruleTypeOptions, scopeOptions, operationOptions, moduleOptions, requestSchemaOptions, propertyOptions, }) {
+    return {
+        sections: [
+            {
+                key: 'basicInfo',
+                type: 'header',
+                label: translate('basic-information'),
+                order: 1,
+                fields: [
+                    new NumberFieldConfig({
+                        key: 'priority',
+                        label: translate('priority'),
+                        placeholder: '10',
+                        validators: [ValidatorConfig.required(), ValidatorConfig.min(0)],
+                        min: 0,
+                        max: 1000,
+                        order: 1,
+                        colSpan: 6,
+                    }),
+                    new TextFieldConfig({
+                        key: 'name.en',
+                        label: translate('name-en'),
+                        placeholder: translate('name-en-placeholder'),
+                        validators: [ValidatorConfig.required()],
+                        order: 2,
+                        colSpan: 6,
+                    }),
+                    new TextFieldConfig({
+                        key: 'name.ar',
+                        label: translate('name-ar'),
+                        placeholder: translate('name-ar-placeholder'),
+                        validators: [ValidatorConfig.required()],
+                        order: 3,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'description.en',
+                        label: translate('description-en'),
+                        placeholder: translate('description-en-placeholder'),
+                        order: 4,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'description.ar',
+                        label: translate('description-ar'),
+                        placeholder: translate('description-ar-placeholder'),
+                        order: 5,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'errorMessage.en',
+                        label: translate('error-message-en'),
+                        placeholder: translate('error-message-en-placeholder'),
+                        validators: [ValidatorConfig.required()],
+                        order: 6,
+                        colSpan: 6,
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'errorMessage.ar',
+                        label: translate('error-message-ar'),
+                        placeholder: translate('error-message-ar-placeholder'),
+                        validators: [ValidatorConfig.required()],
+                        order: 7,
+                        colSpan: 6,
+                    }),
+                ],
+            },
+            {
+                key: 'ruleTarget',
+                type: 'header',
+                label: translate('rule-target'),
+                order: 2,
+                fields: [
+                    new SelectFieldConfig({
+                        key: 'ruleType',
+                        label: translate('rule-type'),
+                        options: ruleTypeOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [ValidatorConfig.required()],
+                        order: 1,
+                        colSpan: 6,
+                        readonly: isEdit,
+                    }),
+                    new SelectFieldConfig({
+                        key: 'targetScope',
+                        label: translate('target-scope'),
+                        options: scopeOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        validators: [ValidatorConfig.required()],
+                        order: 2,
+                        colSpan: 6,
+                    }),
+                    new SelectFieldConfig({
+                        key: 'targetModuleKey',
+                        label: translate('target-module'),
+                        options: moduleOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        order: 3,
+                        colSpan: 6,
+                        relations: [
+                            {
+                                key: 'targetScope',
+                                value: 'Module',
+                                action: 'show',
+                            },
+                        ],
+                    }),
+                    new SelectFieldConfig({
+                        key: 'targetOperationKey',
+                        label: translate('target-operation'),
+                        options: operationOptions,
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        order: 4,
+                        colSpan: 6,
+                    }),
+                ],
+            },
+            ...(selectedRuleType
+                ? [
+                    buildLegacyConfigurationSection({
+                        translate,
+                        ruleType: selectedRuleType,
+                        langCode,
+                        requestSchemaOptions,
+                        propertyOptions,
+                    }),
+                ]
+                : []),
+            {
+                key: 'executionSettings',
+                type: 'header',
+                label: translate('execution-settings'),
+                order: 4,
+                fields: [
+                    new ToggleFieldConfig({
+                        key: 'stopOnFailure',
+                        label: translate('stop-on-failure'),
+                        order: 1,
+                        colSpan: 12,
+                    }),
+                    new ToggleFieldConfig({
+                        key: 'isActive',
+                        label: translate('active-rule'),
+                        order: 2,
+                        colSpan: 12,
+                    }),
+                ],
+            },
+        ],
+    };
+}
+function buildLegacyConfigurationSection({ translate, ruleType, langCode, requestSchemaOptions, propertyOptions, }) {
+    return {
+        key: 'configuration',
+        type: 'header',
+        label: translate('rule-configuration'),
+        order: 3,
+        fields: ruleType.configurationSchema.map((field, index) => schemaFieldToFormField({
+            field,
+            order: index + 1,
+            langCode,
+            requestSchemaOptions,
+            propertyOptions,
+        })),
+    };
+}
+function schemaFieldToFormField({ field, order, langCode, requestSchemaOptions, propertyOptions, }) {
+    const label = field.label[langCode] || field.label.en;
+    const colSpan = field.colSpan ?? 6;
+    const validators = field.required ? [ValidatorConfig.required()] : [];
+    switch (field.type) {
+        case 'text':
+            return new TextFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                validators,
+                order,
+                colSpan,
+            });
+        case 'textarea':
+            return new TextareaFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                validators,
+                order,
+                colSpan,
+            });
+        case 'number':
+            return new NumberFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                validators,
+                min: field.min,
+                max: field.max,
+                order,
+                colSpan,
+            });
+        case 'select':
+            return new SelectFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                options: getLegacyOptionsForField(field, requestSchemaOptions, propertyOptions),
+                optionLabel: 'label',
+                optionValue: 'value',
+                validators,
+                order,
+                colSpan,
+            });
+        case 'multi-select':
+            return new MultiSelectFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                options: getLegacyOptionsForField(field, requestSchemaOptions, propertyOptions),
+                optionLabel: 'label',
+                optionValue: 'value',
+                validators,
+                order,
+                colSpan,
+            });
+        case 'checkbox':
+            return new ToggleFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                order,
+                colSpan,
+            });
+        case 'date':
+            return new DateFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                validators,
+                order,
+                colSpan,
+            });
+        default:
+            return new TextFieldConfig({
+                key: `config_${field.key}`,
+                label,
+                validators,
+                order,
+                colSpan,
+            });
+    }
+}
+function getLegacyOptionsForField(field, requestSchemaOptions, propertyOptions) {
+    switch (field.optionsSource) {
+        case 'requestSchema':
+            return requestSchemaOptions;
+        case 'properties':
+            return propertyOptions;
+        case 'auto-populated':
+        case 'static':
+        default:
+            return field.options ?? [];
+    }
+}
+
+function buildActionPrompt(appliesTo, actionKey, translate) {
+    return translate('wizard.summary.action', {
+        object: translate(`wizard.summary.objects.${appliesTo}`),
+        action: translate(`wizard.summary.actions.${actionKey}`),
+    });
+}
+function buildSummary({ value, translate, ...context }) {
+    if (!value.actionKey || !value.recipeKey) {
+        return translate('wizard.summary-empty');
+    }
+    return translate('wizard.summary.full', {
+        action: buildActionPrompt(value.appliesTo, value.actionKey, translate),
+        detail: resolveRecipeSummary({ value, translate, ...context }),
+    });
+}
+function resolveRecipeSummary({ value, moduleOptions, requestSchemaOptions, propertyOptions, phaseGateOptions, translate, }) {
+    switch (value.recipeKey) {
+        case 'require-module': {
+            const moduleLabel = findOptionLabel(moduleOptions, value.requiredModuleKey);
+            return translate('wizard.summary.require-module', {
+                module: moduleLabel ??
+                    value.requiredModuleKey ??
+                    translate('wizard.summary.fallbacks.module'),
+            });
+        }
+        case 'prevent-module': {
+            const moduleLabel = findOptionLabel(moduleOptions, value.blockedModuleKey);
+            return translate('wizard.summary.prevent-module', {
+                module: moduleLabel ??
+                    value.blockedModuleKey ??
+                    translate('wizard.summary.fallbacks.selected-module'),
+            });
+        }
+        case 'module-max-count':
+            return translate('wizard.summary.module-max-count', {
+                count: value.countValue ?? 0,
+                module: findOptionLabel(moduleOptions, value.countedModuleKey) ??
+                    value.countedModuleKey ??
+                    translate('wizard.summary.fallbacks.modules'),
+            });
+        case 'module-min-count':
+            return translate('wizard.summary.module-min-count', {
+                count: value.countValue ?? 0,
+                module: findOptionLabel(moduleOptions, value.countedModuleKey) ??
+                    value.countedModuleKey ??
+                    translate('wizard.summary.fallbacks.modules'),
+            });
+        case 'phase-gate-completed': {
+            const phaseGateLabel = findOptionLabel(phaseGateOptions, value.phaseGateSchemaId);
+            return translate('wizard.summary.phase-gate-completed', {
+                phaseGate: phaseGateLabel ?? translate('wizard.summary.fallbacks.phase-gate'),
+            });
+        }
+        case 'phase-gate-module-required': {
+            const moduleLabel = findOptionLabel(moduleOptions, value.requiredModuleKey);
+            return translate('wizard.summary.phase-gate-module-required', {
+                module: moduleLabel ??
+                    value.requiredModuleKey ??
+                    translate('wizard.summary.fallbacks.required-module'),
+            });
+        }
+        case 'no-active-request': {
+            const requestLabel = findOptionLabel(requestSchemaOptions, value.requestSchemaId);
+            return translate('wizard.summary.no-active-request', {
+                request: requestLabel ?? translate('wizard.summary.fallbacks.request'),
+            });
+        }
+        case 'property-value': {
+            const propertyLabel = findOptionLabel(propertyOptions, value.propertyKey) ??
+                value.propertyKey ??
+                translate('wizard.summary.fallbacks.property');
+            return translate('wizard.summary.property-value', {
+                property: propertyLabel,
+                operator: resolveOperatorText(value.operator, translate),
+                expectedValue: value.expectedValue || '',
+            }).trim();
+        }
+        default:
+            return translate('wizard.summary-empty');
+    }
+}
+function resolveOperatorText(operator, translate) {
+    const option = GOVERNANCE_OPERATOR_OPTIONS.find((item) => item.value === operator);
+    return option
+        ? translate(option.labelKey).toLowerCase()
+        : translate('wizard.summary.fallbacks.operator');
+}
+function findOptionLabel(options, value) {
+    if (!value) {
+        return null;
+    }
+    return options.find((option) => option.value === value)?.label ?? null;
+}
+
+const DEFAULT_WIZARD_FORM_STATE = {
+    ...DEFAULT_GOVERNANCE_RULE_FORM_VALUE,
+    phaseGateCompletedSchemaId: null,
+    phaseGateOptionalSchemaId: null,
+};
+function mapWizardFormValueToState(value) {
+    return {
+        ...DEFAULT_WIZARD_FORM_STATE,
+        ...value,
+        phaseGateCompletedSchemaId: value.recipeKey === 'phase-gate-completed'
+            ? value.phaseGateSchemaId
+            : null,
+        phaseGateOptionalSchemaId: value.recipeKey === 'phase-gate-module-required'
+            ? value.phaseGateSchemaId
+            : null,
+    };
+}
+function normalizeWizardFormState(value) {
+    return {
+        ...DEFAULT_WIZARD_FORM_STATE,
+        ...value,
+        name: {
+            ...DEFAULT_GOVERNANCE_RULE_FORM_VALUE.name,
+            ...value?.name,
+        },
+        description: {
+            ...DEFAULT_GOVERNANCE_RULE_FORM_VALUE.description,
+            ...value?.description,
+        },
+        errorMessage: {
+            ...DEFAULT_GOVERNANCE_RULE_FORM_VALUE.errorMessage,
+            ...value?.errorMessage,
+        },
+        selectedModuleKey: value?.selectedModuleKey ?? null,
+        actionKey: value?.actionKey ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.actionKey,
+        recipeKey: value?.recipeKey ?? null,
+        requiredModuleKey: value?.requiredModuleKey ?? null,
+        blockedModuleKey: value?.blockedModuleKey ?? null,
+        countedModuleKey: value?.countedModuleKey ?? null,
+        countValue: value?.countValue ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.countValue,
+        phaseGateCompletedSchemaId: value?.phaseGateCompletedSchemaId ?? null,
+        phaseGateOptionalSchemaId: value?.phaseGateOptionalSchemaId ?? null,
+        phaseGateSchemaId: value?.phaseGateSchemaId ?? null,
+        requestSchemaId: value?.requestSchemaId ?? null,
+        blockingStatuses: Array.isArray(value?.blockingStatuses)
+            ? value.blockingStatuses
+            : [...DEFAULT_GOVERNANCE_RULE_FORM_VALUE.blockingStatuses],
+        propertyKey: value?.propertyKey ?? null,
+        operator: value?.operator ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.operator,
+        expectedValue: value?.expectedValue ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.expectedValue,
+        priority: value?.priority ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.priority,
+        stopOnFailure: value?.stopOnFailure ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.stopOnFailure,
+        isActive: value?.isActive ?? DEFAULT_GOVERNANCE_RULE_FORM_VALUE.isActive,
+    };
+}
+function mapWizardStateToWizardValue(state) {
+    return {
+        key: state.key,
+        name: {
+            en: state.name.en,
+            ar: state.name.ar,
+        },
+        description: {
+            en: state.description.en,
+            ar: state.description.ar,
+        },
+        errorMessage: {
+            en: state.errorMessage.en,
+            ar: state.errorMessage.ar,
+        },
+        appliesTo: state.appliesTo,
+        selectedModuleKey: state.selectedModuleKey,
+        actionKey: state.actionKey,
+        recipeKey: state.recipeKey,
+        requiredModuleKey: state.requiredModuleKey,
+        blockedModuleKey: state.blockedModuleKey,
+        countedModuleKey: state.countedModuleKey,
+        countValue: state.countValue,
+        phaseGateSchemaId: state.phaseGateCompletedSchemaId ??
+            state.phaseGateOptionalSchemaId ??
+            null,
+        requestSchemaId: state.requestSchemaId,
+        blockingStatuses: [...state.blockingStatuses],
+        propertyKey: state.propertyKey,
+        operator: state.operator,
+        expectedValue: state.expectedValue,
+        priority: state.priority,
+        stopOnFailure: state.stopOnFailure,
+        isActive: state.isActive,
+    };
+}
+function resolveRecipeDefinitionForRuleType(ruleType) {
+    return resolveRecipeDefinition(resolveRecipeDefinitionKeyForRuleType(ruleType));
+}
+function resolveRecipeDefinitionKeyForRuleType(ruleType) {
+    switch (readGovernanceRuleTypeKey(ruleType)) {
+        case 'ModuleExists':
+            return 'require-module';
+        case 'ModuleNotExists':
+        case 'ModuleDoesNotExist':
+            return 'prevent-module';
+        case 'ModuleMaxCount':
+            return 'module-max-count';
+        case 'ModuleMinCount':
+            return 'module-min-count';
+        case 'PhaseGateCompleted':
+            return 'phase-gate-completed';
+        case 'PhaseGateModuleRequired':
+            return 'phase-gate-module-required';
+        case 'NoActiveRequest':
+            return 'no-active-request';
+        case 'PropertyValueEquals':
+        case 'FieldValue':
+            return 'property-value';
+        default:
+            return null;
+    }
+}
+function hasCompatibleRecipe(ruleTypes, appliesTo, actionKey) {
+    return ruleTypes.some((ruleType) => !!resolveRecipeDefinitionForRuleType(ruleType) &&
+        isRuleTypeCompatible(ruleType, appliesTo, actionKey));
+}
+function isRuleTypeCompatible(ruleType, appliesTo, actionKey) {
+    return (ruleType.supportedScopes.includes(mapAppliesToToTargetScope(appliesTo)) &&
+        ruleType.supportedOperations.includes(mapActionToOperationKey(actionKey)));
+}
+function areWizardStatesEqual(current, next) {
+    return (current.key === next.key &&
+        current.name.en === next.name.en &&
+        current.name.ar === next.name.ar &&
+        current.description.en === next.description.en &&
+        current.description.ar === next.description.ar &&
+        current.errorMessage.en === next.errorMessage.en &&
+        current.errorMessage.ar === next.errorMessage.ar &&
+        current.appliesTo === next.appliesTo &&
+        current.selectedModuleKey === next.selectedModuleKey &&
+        current.actionKey === next.actionKey &&
+        current.recipeKey === next.recipeKey &&
+        current.requiredModuleKey === next.requiredModuleKey &&
+        current.blockedModuleKey === next.blockedModuleKey &&
+        current.countedModuleKey === next.countedModuleKey &&
+        current.countValue === next.countValue &&
+        current.phaseGateCompletedSchemaId === next.phaseGateCompletedSchemaId &&
+        current.phaseGateOptionalSchemaId === next.phaseGateOptionalSchemaId &&
+        current.phaseGateSchemaId === next.phaseGateSchemaId &&
+        current.requestSchemaId === next.requestSchemaId &&
+        current.propertyKey === next.propertyKey &&
+        current.operator === next.operator &&
+        current.expectedValue === next.expectedValue &&
+        current.priority === next.priority &&
+        current.stopOnFailure === next.stopOnFailure &&
+        current.isActive === next.isActive &&
+        areStringArraysEqual(current.blockingStatuses, next.blockingStatuses));
+}
+function areLegacyFormValuesEqual(current, next) {
+    if (current === next) {
+        return true;
+    }
+    if (!current || !next) {
+        return current === next;
+    }
+    if (current.key !== next.key ||
+        current.priority !== next.priority ||
+        current.name.en !== next.name.en ||
+        current.name.ar !== next.name.ar ||
+        current.description.en !== next.description.en ||
+        current.description.ar !== next.description.ar ||
+        current.errorMessage.en !== next.errorMessage.en ||
+        current.errorMessage.ar !== next.errorMessage.ar ||
+        current.ruleType !== next.ruleType ||
+        current.targetScope !== next.targetScope ||
+        current.targetModuleKey !== next.targetModuleKey ||
+        current.targetOperationKey !== next.targetOperationKey ||
+        current.stopOnFailure !== next.stopOnFailure ||
+        current.isActive !== next.isActive) {
+        return false;
+    }
+    const currentKeys = Object.keys(current);
+    const nextKeys = Object.keys(next);
+    if (currentKeys.length !== nextKeys.length) {
+        return false;
+    }
+    return currentKeys.every((key) => {
+        if (key === 'key' ||
+            key === 'priority' ||
+            key === 'name' ||
+            key === 'description' ||
+            key === 'errorMessage' ||
+            key === 'ruleType' ||
+            key === 'targetScope' ||
+            key === 'targetModuleKey' ||
+            key === 'targetOperationKey' ||
+            key === 'stopOnFailure' ||
+            key === 'isActive') {
+            return true;
+        }
+        const currentValue = current[key];
+        const nextValue = next[key];
+        if (Array.isArray(currentValue) || Array.isArray(nextValue)) {
+            return (Array.isArray(currentValue) &&
+                Array.isArray(nextValue) &&
+                areUnknownArraysEqual(currentValue, nextValue));
+        }
+        return currentValue === nextValue;
+    });
+}
+function areStringArraysEqual(current, next) {
+    if (current.length !== next.length) {
+        return false;
+    }
+    return current.every((value, index) => value === next[index]);
+}
+function areUnknownArraysEqual(current, next) {
+    if (current.length !== next.length) {
+        return false;
+    }
+    return current.every((value, index) => value === next[index]);
+}
+
 class GovernanceRuleForm {
-    // ============================================================================
-    // Injected Services
-    // ============================================================================
     modal = inject(ModalService);
     ref = inject(ModalRef);
     translocoService = inject(TranslocoService);
     facade = inject(GovernanceFacade);
-    // ============================================================================
-    // Input - rule to edit (null for create)
-    // ============================================================================
+    toast = inject(ToastService);
     ruleForEdit = input(null, ...(ngDevMode ? [{ debugName: "ruleForEdit" }] : []));
-    // ============================================================================
-    // Facade Data
-    // ============================================================================
+    dynamicFormRef = viewChild(DynamicForm, ...(ngDevMode ? [{ debugName: "dynamicFormRef" }] : []));
     selectedRule = this.facade.selectedRule;
     ruleTypes = this.facade.ruleTypes;
     isLoadingRule = this.facade.isLoadingRule;
+    isLoadingRuleTypes = this.facade.isLoadingRuleTypes;
     isAddingRule = this.facade.isAddingRule;
     isUpdatingRule = this.facade.isUpdatingRule;
-    // For optionsSource: 'auto-populated' (modules from API)
     modules = this.facade.modules;
-    // For optionsSource: 'requestSchema' and 'properties'
     requestSchemas = this.facade.requestSchemas;
     properties = this.facade.properties;
-    isLoadingRequestSchemas = this.facade.isLoadingRequestSchemas;
-    isLoadingProperties = this.facade.isLoadingProperties;
-    // ============================================================================
-    // Form Control
-    // ============================================================================
-    ruleFormControl = new FormControl();
-    formValue = toSignal(this.ruleFormControl.valueChanges);
-    // ============================================================================
-    // Selected Rule Type (from form value)
-    // ============================================================================
-    selectedRuleType = computed(() => {
-        const formValue = this.formValue();
-        const ruleTypeKey = formValue?.ruleType;
-        if (!ruleTypeKey)
-            return null;
-        return this.ruleTypes().find((rt) => rt.type === ruleTypeKey) ?? null;
-    }, ...(ngDevMode ? [{ debugName: "selectedRuleType" }] : []));
-    // ============================================================================
-    // Target Scope and Module Key (from form value)
-    // ============================================================================
-    targetScope = computed(() => this.formValue()?.targetScope ?? 'Level', ...(ngDevMode ? [{ debugName: "targetScope" }] : []));
-    targetModuleKey = computed(() => this.formValue()?.targetModuleKey ?? null, ...(ngDevMode ? [{ debugName: "targetModuleKey" }] : []));
-    // ============================================================================
-    // Options from state for optionsSource: 'requestSchema'
-    // ============================================================================
+    wizardFormControl = new FormControl(DEFAULT_WIZARD_FORM_STATE, { nonNullable: true });
+    legacyFormControl = new FormControl(null);
+    wizardStateRaw = toSignal(this.wizardFormControl.valueChanges.pipe(map((value) => value ?? DEFAULT_WIZARD_FORM_STATE)), { initialValue: this.wizardFormControl.value });
+    legacyFormValue = toSignal(this.legacyFormControl.valueChanges.pipe(map(() => this.legacyFormControl.value)), { initialValue: this.legacyFormControl.value });
+    activeLang = toSignal(this.translocoService.langChanges$, {
+        initialValue: this.translocoService.getActiveLang(),
+    });
+    langCode = computed(() => this.activeLang() === 'ar' ? 'ar' : 'en', ...(ngDevMode ? [{ debugName: "langCode" }] : []));
+    isEditMode = computed(() => !!this.ruleForEdit()?.id, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    wizardState = computed(() => normalizeWizardFormState(this.wizardStateRaw()), ...(ngDevMode ? [{ debugName: "wizardState" }] : []));
+    wizardValue = computed(() => mapWizardStateToWizardValue(this.wizardState()), ...(ngDevMode ? [{ debugName: "wizardValue" }] : []));
+    moduleOptions = computed(() => {
+        const lang = this.langCode();
+        return this.modules().map((module) => ({
+            label: module.name[lang] || module.name.en,
+            value: module.key,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
     requestSchemaOptions = computed(() => {
-        const lang = this.translocoService.getActiveLang();
+        const lang = this.langCode();
         return this.requestSchemas().map((schema) => ({
             label: schema.name[lang] || schema.name.en,
-            value: schema.id.toString(),
+            value: String(schema.id),
         }));
     }, ...(ngDevMode ? [{ debugName: "requestSchemaOptions" }] : []));
-    // ============================================================================
-    // Options from state for optionsSource: 'properties'
-    // ============================================================================
     propertyOptions = computed(() => {
-        const lang = this.translocoService.getActiveLang();
-        return this.properties().map((prop) => ({
-            label: prop.name[lang] || prop.name.en,
-            value: prop.key,
+        const lang = this.langCode();
+        return this.properties().map((property) => ({
+            label: property.name[lang] || property.name.en,
+            value: property.key,
         }));
     }, ...(ngDevMode ? [{ debugName: "propertyOptions" }] : []));
-    // ============================================================================
-    // Module Options for optionsSource: 'auto-populated' (moduleKey, requiredModuleKey)
-    // ============================================================================
-    moduleOptions = computed(() => {
-        const lang = this.translocoService.getActiveLang();
-        return this.modules().map((mod) => ({
-            label: mod.name[lang] || mod.name.en,
-            value: mod.key,
-        }));
-    }, ...(ngDevMode ? [{ debugName: "moduleOptions" }] : []));
-    // ============================================================================
-    // Scope Options based on selected rule type
-    // ============================================================================
+    appliesToCardOptions = computed(() => GOVERNANCE_APPLIES_TO_OPTIONS.map((option) => ({
+        id: option.value,
+        name: this.translate(option.labelKey),
+    })), ...(ngDevMode ? [{ debugName: "appliesToCardOptions" }] : []));
+    availableActionOptions = computed(() => {
+        return GOVERNANCE_ACTION_OPTIONS.filter((option) => hasCompatibleRecipe(this.ruleTypes(), this.wizardValue().appliesTo, option.value));
+    }, ...(ngDevMode ? [{ debugName: "availableActionOptions" }] : []));
+    actionCardOptions = computed(() => this.availableActionOptions().map((option) => ({
+        id: option.value,
+        name: buildActionPrompt(this.wizardValue().appliesTo, option.value, this.translate.bind(this)),
+    })), ...(ngDevMode ? [{ debugName: "actionCardOptions" }] : []));
+    availableRecipeDefinitions = computed(() => {
+        const actionKey = this.wizardValue().actionKey;
+        if (!actionKey) {
+            return [];
+        }
+        return this.ruleTypes()
+            .map((ruleType) => {
+            const recipe = resolveRecipeDefinitionForRuleType(ruleType);
+            if (!recipe) {
+                return null;
+            }
+            return isRuleTypeCompatible(ruleType, this.wizardValue().appliesTo, actionKey)
+                ? recipe
+                : null;
+        })
+            .filter((recipe, index, items) => !!recipe &&
+            items.findIndex((item) => item?.key === recipe.key) === index);
+    }, ...(ngDevMode ? [{ debugName: "availableRecipeDefinitions" }] : []));
+    recipeCardOptions = computed(() => this.availableRecipeDefinitions().map((recipe) => ({
+        id: recipe.key,
+        name: this.translate(recipe.labelKey),
+    })), ...(ngDevMode ? [{ debugName: "recipeCardOptions" }] : []));
+    selectedRuleType = computed(() => findRuleTypeByRecipe(this.ruleTypes(), this.wizardValue().recipeKey), ...(ngDevMode ? [{ debugName: "selectedRuleType" }] : []));
+    useLegacyEditor = computed(() => {
+        if (!this.ruleForEdit()?.id) {
+            return false;
+        }
+        const rule = this.selectedRule();
+        return !!rule && !mapRuleToWizardFormValue(rule);
+    }, ...(ngDevMode ? [{ debugName: "useLegacyEditor" }] : []));
+    isInitializing = computed(() => {
+        if (this.ruleForEdit()?.id && this.isLoadingRule()) {
+            return true;
+        }
+        return this.ruleTypes().length === 0 && this.isLoadingRuleTypes();
+    }, ...(ngDevMode ? [{ debugName: "isInitializing" }] : []));
+    noRecipesAvailable = computed(() => !this.useLegacyEditor() &&
+        !!this.wizardValue().actionKey &&
+        this.recipeCardOptions().length === 0, ...(ngDevMode ? [{ debugName: "noRecipesAvailable" }] : []));
+    hasReviewSummary = computed(() => {
+        if (this.useLegacyEditor()) {
+            return false;
+        }
+        const value = this.wizardValue();
+        return !!value.actionKey && !!value.recipeKey;
+    }, ...(ngDevMode ? [{ debugName: "hasReviewSummary" }] : []));
+    canSubmit = computed(() => {
+        if (this.useLegacyEditor()) {
+            return this.legacyFormControl.valid;
+        }
+        return (this.wizardFormControl.valid &&
+            !!this.selectedRuleType() &&
+            !!this.wizardValue().actionKey &&
+            !!this.wizardValue().recipeKey);
+    }, ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
+    reviewSummary = computed(() => buildSummary({
+        value: this.wizardValue(),
+        moduleOptions: this.moduleOptions(),
+        requestSchemaOptions: this.requestSchemaOptions(),
+        propertyOptions: this.propertyOptions(),
+        phaseGateOptions: this.getPhaseGateOptions(),
+        translate: this.translate.bind(this),
+    }), ...(ngDevMode ? [{ debugName: "reviewSummary" }] : []));
+    wizardFormConfig = computed(() => buildWizardFormConfig({
+        translate: this.translate.bind(this),
+        isEdit: this.isEditMode(),
+        recipeKey: this.wizardValue().recipeKey,
+        appliesToOptions: this.appliesToCardOptions(),
+        actionOptions: this.actionCardOptions(),
+        recipeOptions: this.recipeCardOptions(),
+        moduleOptions: this.moduleOptions(),
+        requestSchemaOptions: this.requestSchemaOptions(),
+        propertyOptions: this.propertyOptions(),
+        phaseGateOptions: this.getPhaseGateOptions(),
+        blockingStatuses: this.getBlockingStatusOptions(),
+    }), ...(ngDevMode ? [{ debugName: "wizardFormConfig" }] : []));
+    selectedLegacyRuleType = computed(() => {
+        const ruleTypeKey = String(this.legacyFormValue()?.ruleType ?? '').trim();
+        if (!ruleTypeKey) {
+            return null;
+        }
+        return (this.ruleTypes().find((ruleType) => {
+            const catalogKey = readGovernanceRuleTypeKey(ruleType);
+            return (catalogKey === ruleTypeKey || String(ruleType.type) === ruleTypeKey);
+        }) ?? null);
+    }, ...(ngDevMode ? [{ debugName: "selectedLegacyRuleType" }] : []));
     scopeOptions = computed(() => {
-        const ruleType = this.selectedRuleType();
+        const ruleType = this.selectedLegacyRuleType();
         if (!ruleType) {
             return [
-                { label: 'Level', value: 'Level' },
-                { label: 'Module', value: 'Module' },
-                { label: 'PhaseGate', value: 'PhaseGate' },
+                { label: this.translateScopeLabel('Level'), value: 'Level' },
+                { label: this.translateScopeLabel('Module'), value: 'Module' },
+                { label: this.translateScopeLabel('PhaseGate'), value: 'PhaseGate' },
             ];
         }
         return ruleType.supportedScopes.map((scope) => ({
-            label: scope,
+            label: this.translateScopeLabel(scope),
             value: scope,
         }));
     }, ...(ngDevMode ? [{ debugName: "scopeOptions" }] : []));
-    // ============================================================================
-    // Operation Options based on selected rule type
-    // ============================================================================
     operationOptions = computed(() => {
-        const ruleType = this.selectedRuleType();
+        const ruleType = this.selectedLegacyRuleType();
         if (!ruleType) {
             return [
-                { label: 'All', value: '' },
-                { label: 'Create', value: 'Create' },
-                { label: 'Update', value: 'Update' },
-                { label: 'Delete', value: 'Delete' },
+                { label: this.translate('all'), value: '' },
+                { label: this.translateOperationLabel('Create'), value: 'Create' },
+                { label: this.translateOperationLabel('Update'), value: 'Update' },
+                { label: this.translateOperationLabel('Delete'), value: 'Delete' },
             ];
         }
         return [
-            { label: 'All', value: '' },
-            ...ruleType.supportedOperations.map((op) => ({
-                label: op,
-                value: op,
+            { label: this.translate('all'), value: '' },
+            ...ruleType.supportedOperations.map((operation) => ({
+                label: this.translateOperationLabel(operation),
+                value: operation,
             })),
         ];
     }, ...(ngDevMode ? [{ debugName: "operationOptions" }] : []));
-    // ============================================================================
-    // Rule Type Options
-    // ============================================================================
-    ruleTypeOptions = computed(() => {
-        const lang = this.translocoService.getActiveLang();
-        return this.ruleTypes().map((rt) => ({
-            label: rt.name[lang] || rt.name.en,
-            value: rt.type,
-        }));
-    }, ...(ngDevMode ? [{ debugName: "ruleTypeOptions" }] : []));
-    // ============================================================================
-    // Dynamic Form Configuration
-    // ============================================================================
-    formConfig = computed(() => {
-        const t = (key) => this.translocoService.translate(`governance.${key}`);
-        const ruleType = this.selectedRuleType();
-        const isEdit = !!this.ruleForEdit()?.id;
-        return {
-            sections: [
-                // Section 1: Basic Information
-                {
-                    key: 'basicInfo',
-                    type: 'header',
-                    label: t('basic-information'),
-                    order: 1,
-                    fields: [
-                        new TextFieldConfig({
-                            key: 'key',
-                            label: t('rule-key'),
-                            placeholder: 'e.g., charter-required',
-                            validators: [
-                                ValidatorConfig.required(),
-                                ValidatorConfig.pattern('^[a-z0-9-]+$', 'Only lowercase letters, numbers and hyphens allowed'),
-                            ],
-                            order: 1,
-                            colSpan: 6,
-                            disabled: isEdit,
-                        }),
-                        new NumberFieldConfig({
-                            key: 'priority',
-                            label: t('priority'),
-                            placeholder: '10',
-                            validators: [ValidatorConfig.required()],
-                            min: 0,
-                            max: 1000,
-                            order: 2,
-                            colSpan: 6,
-                        }),
-                        new TextFieldConfig({
-                            key: 'name_en',
-                            label: t('name-en'),
-                            placeholder: t('name-en-placeholder'),
-                            validators: [ValidatorConfig.required()],
-                            order: 3,
-                            colSpan: 6,
-                        }),
-                        new TextFieldConfig({
-                            key: 'name_ar',
-                            label: t('name-ar'),
-                            placeholder: t('name-ar-placeholder'),
-                            validators: [ValidatorConfig.required()],
-                            order: 4,
-                            colSpan: 6,
-                        }),
-                        new TextareaFieldConfig({
-                            key: 'description_en',
-                            label: t('description-en'),
-                            placeholder: t('description-en-placeholder'),
-                            order: 5,
-                            colSpan: 6,
-                        }),
-                        new TextareaFieldConfig({
-                            key: 'description_ar',
-                            label: t('description-ar'),
-                            placeholder: t('description-ar-placeholder'),
-                            order: 6,
-                            colSpan: 6,
-                        }),
-                        new TextareaFieldConfig({
-                            key: 'errorMessage_en',
-                            label: t('error-message-en'),
-                            placeholder: t('error-message-en-placeholder'),
-                            validators: [ValidatorConfig.required()],
-                            order: 7,
-                            colSpan: 6,
-                        }),
-                        new TextareaFieldConfig({
-                            key: 'errorMessage_ar',
-                            label: t('error-message-ar'),
-                            placeholder: t('error-message-ar-placeholder'),
-                            validators: [ValidatorConfig.required()],
-                            order: 8,
-                            colSpan: 6,
-                        }),
-                    ],
-                },
-                // Section 2: Rule Target
-                {
-                    key: 'ruleTarget',
-                    type: 'header',
-                    label: t('rule-target'),
-                    order: 2,
-                    fields: [
-                        new SelectFieldConfig({
-                            key: 'ruleType',
-                            label: t('rule-type'),
-                            options: this.ruleTypeOptions(),
-                            optionLabel: 'label',
-                            optionValue: 'value',
-                            validators: [ValidatorConfig.required()],
-                            order: 1,
-                            colSpan: 6,
-                            disabled: isEdit,
-                        }),
-                        new SelectFieldConfig({
-                            key: 'targetScope',
-                            label: t('target-scope'),
-                            options: this.scopeOptions(),
-                            optionLabel: 'label',
-                            optionValue: 'value',
-                            validators: [ValidatorConfig.required()],
-                            order: 2,
-                            colSpan: 6,
-                        }),
-                        new SelectFieldConfig({
-                            key: 'targetModuleKey',
-                            label: t('target-module'),
-                            options: this.moduleOptions(),
-                            optionLabel: 'label',
-                            optionValue: 'value',
-                            order: 3,
-                            colSpan: 6,
-                            relations: [
-                                {
-                                    key: 'targetScope',
-                                    value: 'Module',
-                                    action: 'show',
-                                },
-                            ],
-                        }),
-                        new SelectFieldConfig({
-                            key: 'targetOperationKey',
-                            label: t('target-operation'),
-                            options: this.operationOptions(),
-                            optionLabel: 'label',
-                            optionValue: 'value',
-                            order: 4,
-                            colSpan: 6,
-                        }),
-                    ],
-                },
-                // Section 3: Rule-Specific Configuration (dynamic)
-                ...(ruleType ? [this.buildConfigurationSection(ruleType)] : []),
-                // Section 4: Execution Settings
-                {
-                    key: 'executionSettings',
-                    type: 'header',
-                    label: t('execution-settings'),
-                    order: 4,
-                    fields: [
-                        new ToggleFieldConfig({
-                            key: 'stopOnFailure',
-                            label: t('stop-on-failure'),
-                            order: 1,
-                            colSpan: 6,
-                        }),
-                        new ToggleFieldConfig({
-                            key: 'isActive',
-                            label: t('active-rule'),
-                            order: 2,
-                            colSpan: 6,
-                        }),
-                    ],
-                },
-            ],
-        };
-    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
-    // ============================================================================
-    // Constructor with Effect for Form Population
-    // ============================================================================
+    legacyFormConfig = computed(() => buildLegacyFormConfig({
+        translate: this.translate.bind(this),
+        isEdit: this.isEditMode(),
+        langCode: this.langCode(),
+        selectedRuleType: this.selectedLegacyRuleType(),
+        ruleTypeOptions: this.ruleTypeOptions(),
+        scopeOptions: this.scopeOptions(),
+        operationOptions: this.operationOptions(),
+        moduleOptions: this.moduleOptions(),
+        requestSchemaOptions: this.requestSchemaOptions(),
+        propertyOptions: this.propertyOptions(),
+    }), ...(ngDevMode ? [{ debugName: "legacyFormConfig" }] : []));
     constructor() {
-        // Effect to populate form when editing existing rule
         effect(() => {
-            const ruleId = this.ruleForEdit()?.id;
-            if (this.selectedRule() && ruleId) {
-                const rule = this.selectedRule();
-                if (!rule)
-                    return;
-                // Unpack rule data to form format
-                const formData = this.unpackRuleToForm(rule);
-                this.ruleFormControl.patchValue(formData);
-            }
-            else {
-                // Default values for new rule
-                this.ruleFormControl.reset({
-                    priority: 10,
-                    stopOnFailure: true,
-                    isActive: true,
-                    targetScope: 'Module',
-                });
+            if (this.wizardValue().appliesTo !== 'specific-module' &&
+                this.wizardValue().selectedModuleKey) {
+                this.patchWizardState({ selectedModuleKey: null });
             }
         });
-        // Effect to apply default values when rule type changes (for new rules only)
         effect(() => {
-            const ruleType = this.selectedRuleType();
-            const ruleId = this.ruleForEdit()?.id;
-            // Only apply defaults for new rules (not editing)
-            if (ruleType && !ruleId) {
-                const defaults = this.getDefaultsFromSchema(ruleType);
-                if (Object.keys(defaults).length > 0) {
-                    const currentValue = this.ruleFormControl.value ?? {};
-                    this.ruleFormControl.patchValue({ ...currentValue, ...defaults });
-                }
+            const currentAction = this.wizardValue().actionKey;
+            if (!currentAction ||
+                this.availableActionOptions().some((option) => option.value === currentAction)) {
+                return;
             }
+            this.patchWizardState({ actionKey: null, recipeKey: null });
         });
-        // Effect to fetch requestSchemas and properties when scope/module changes
-        // This runs when configurationSchema has fields with optionsSource = 'requestSchema' or 'properties'
         effect(() => {
-            const ruleType = this.selectedRuleType();
-            const scope = this.targetScope();
-            const moduleKey = this.targetModuleKey();
-            if (!ruleType)
+            const currentRecipe = this.wizardValue().recipeKey;
+            if (!currentRecipe ||
+                this.availableRecipeDefinitions().some((definition) => definition.key === currentRecipe)) {
                 return;
-            // Check if any field needs requestSchema options
-            const needsRequestSchemas = ruleType.configurationSchema.some((f) => f.optionsSource === 'requestSchema');
-            // Check if any field needs properties options
-            const needsProperties = ruleType.configurationSchema.some((f) => f.optionsSource === 'properties');
-            // For Module scope, we need a target module key
-            if (scope === 'Module' && !moduleKey) {
-                // Clear options when module is not selected
-                if (needsRequestSchemas) {
-                    this.facade.clearRequestSchemas();
+            }
+            this.patchWizardState({ recipeKey: null });
+        });
+        effect(() => {
+            const editing = !!this.ruleForEdit()?.id;
+            if (!editing) {
+                this.resetWizardForm();
+                if (this.legacyFormControl.value !== null) {
+                    this.legacyFormControl.reset(null);
                 }
-                if (needsProperties) {
-                    this.facade.clearProperties();
+                return;
+            }
+            const rule = this.selectedRule();
+            if (!rule) {
+                return;
+            }
+            const wizardValue = mapRuleToWizardFormValue(rule);
+            if (wizardValue) {
+                this.setWizardState(mapWizardFormValueToState(wizardValue));
+                if (this.legacyFormControl.value !== null) {
+                    this.legacyFormControl.reset(null);
                 }
                 return;
             }
-            // Fetch options based on scope
+            this.resetWizardForm();
+            const nextLegacyValue = mapRuleToLegacyFormValue(rule);
+            if (!areLegacyFormValuesEqual(this.legacyFormControl.value, nextLegacyValue)) {
+                this.legacyFormControl.setValue(nextLegacyValue);
+            }
+        });
+        effect(() => {
+            const recipeKey = this.wizardValue().recipeKey;
+            const appliesTo = this.wizardValue().appliesTo;
+            const targetModuleKey = appliesTo === 'specific-module'
+                ? (this.wizardValue().selectedModuleKey ?? undefined)
+                : undefined;
+            const targetScope = appliesTo === 'level'
+                ? 'Level'
+                : appliesTo === 'phase-gate'
+                    ? 'PhaseGate'
+                    : 'Module';
+            const needsRequestSchemas = recipeKey === 'no-active-request';
+            const needsProperties = recipeKey === 'property-value';
+            if (!needsRequestSchemas && !needsProperties) {
+                this.clearReferenceData();
+                return;
+            }
+            if (targetScope === 'Module' &&
+                appliesTo === 'specific-module' &&
+                !targetModuleKey) {
+                this.clearReferenceData();
+                return;
+            }
             if (needsRequestSchemas) {
-                this.facade.getRequestSchemas(scope, moduleKey ?? undefined);
+                this.facade.getRequestSchemas(targetScope, targetModuleKey);
             }
             if (needsProperties) {
-                this.facade.getProperties(scope, moduleKey ?? undefined);
+                this.facade.getProperties(targetScope, targetModuleKey);
             }
         });
     }
-    /**
-     * Extract default values from rule type's configuration schema
-     */
-    getDefaultsFromSchema(ruleType) {
-        const defaults = {};
-        for (const field of ruleType.configurationSchema) {
-            if (field.defaultValue !== undefined) {
-                defaults[`config_${field.key}`] = field.defaultValue;
-            }
-        }
-        return defaults;
-    }
     ngOnInit() {
+        if (!this.ruleTypes().length) {
+            this.facade.getRuleTypes();
+        }
+        if (!this.modules().length) {
+            this.facade.getModules();
+        }
         const ruleId = this.ruleForEdit()?.id;
         if (ruleId) {
             this.facade.getRule(ruleId);
         }
     }
-    // ============================================================================
-    // Submit Handler
-    // ============================================================================
     onSubmit() {
-        if (!this.ruleFormControl.valid) {
+        this.dynamicFormRef()?.form.markAllAsTouched();
+        if (this.useLegacyEditor()) {
+            if (!this.legacyFormControl.valid) {
+                this.toast.warn(this.translate('wizard.complete-required-fields'), this.translate('warning'));
+                return;
+            }
+            this.submitLegacyForm();
+            return;
+        }
+        if (!this.wizardValue().actionKey || !this.wizardValue().recipeKey) {
+            this.toast.warn(this.translate('wizard.summary-empty'), this.translate('warning'));
+            return;
+        }
+        if (!this.canSubmit()) {
+            this.toast.warn(this.translate('wizard.complete-required-fields'), this.translate('warning'));
+            return;
+        }
+        const ruleType = this.selectedRuleType();
+        if (!ruleType) {
             return;
         }
-        const formValue = this.ruleFormControl.value;
         const ruleId = this.ruleForEdit()?.id;
+        const payloadValue = this.wizardValue();
         if (ruleId) {
-            // Update
-            const payload = this.packFormToUpdateDto(formValue);
-            this.facade.updateRule(ruleId, payload).subscribe({
-                next: () => {
-                    this.ref.close(true);
-                },
-                error: () => { },
-            });
-        }
-        else {
-            // Create
-            const payload = this.packFormToCreateDto(formValue);
-            this.facade.addRule(payload).subscribe({
-                next: () => {
-                    this.ref.close(true);
-                },
-                error: () => { },
-            });
+            this.saveUpdate(ruleId, buildUpdatePayload(payloadValue, ruleType));
+            return;
         }
+        this.saveCreate(buildCreatePayload(payloadValue, ruleType));
     }
-    // ============================================================================
-    // Build Configuration Section Based on Rule Type
-    // ============================================================================
-    buildConfigurationSection(ruleType) {
-        const t = (key) => this.translocoService.translate(`governance.${key}`);
-        return {
-            key: 'configuration',
-            type: 'header',
-            label: t('rule-configuration'),
-            order: 3,
-            fields: this.buildConfigFieldsForType(ruleType),
-        };
+    getPhaseGateOptions() {
+        return (findConfigurationSchemaField(this.selectedRuleType(), 'phaseGateSchemaId')
+            ?.options ?? []);
     }
-    buildConfigFieldsForType(ruleType) {
-        const lang = this.translocoService.getActiveLang();
-        // Build fields dynamically from configurationSchema array
-        return ruleType.configurationSchema.map((field, index) => this.schemaFieldToFormField(field, index + 1, lang));
-    }
-    /**
-     * Convert a ConfigurationFieldSchema to DynamicForm BaseFieldConfig
-     */
-    schemaFieldToFormField(field, order, lang) {
-        const label = field.label[lang] || field.label.en;
-        const colSpan = field.colSpan ?? 6;
-        const validators = field.required ? [ValidatorConfig.required()] : [];
-        switch (field.type) {
-            case 'text':
-                return new TextFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    validators,
-                    order,
-                    colSpan,
-                });
-            case 'textarea':
-                return new TextareaFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    validators,
-                    order,
-                    colSpan,
-                });
-            case 'number':
-                return new NumberFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    validators,
-                    min: field.min,
-                    max: field.max,
-                    order,
-                    colSpan,
-                });
-            case 'select':
-                return new SelectFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    options: this.getOptionsForField(field),
-                    optionLabel: 'label',
-                    optionValue: 'value',
-                    validators,
-                    order,
-                    colSpan,
-                });
-            case 'multi-select':
-                return new MultiSelectFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    options: this.getOptionsForField(field),
-                    optionLabel: 'label',
-                    optionValue: 'value',
-                    validators,
-                    order,
-                    colSpan,
-                });
-            case 'checkbox':
-                return new ToggleFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    order,
-                    colSpan,
-                });
-            case 'date':
-                return new DateFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    validators,
-                    order,
-                    colSpan,
-                });
+    getBlockingStatusOptions() {
+        const field = findConfigurationSchemaField(this.selectedRuleType(), 'blockingStatuses');
+        if (field?.options?.length) {
+            return field.options.map((option) => option.value);
+        }
+        return [...DEFAULT_BLOCKING_STATUSES];
+    }
+    translate(key, params) {
+        const lang = this.activeLang();
+        return this.translocoService.translate(`governance.${key}`, params, lang);
+    }
+    translateScopeLabel(scope) {
+        switch (scope) {
+            case 'Level':
+                return this.translate('scope-level');
+            case 'Module':
+                return this.translate('scope-module');
+            case 'PhaseGate':
+                return this.translate('scope-phase-gate');
             default:
-                // Fallback to text field for unknown types
-                return new TextFieldConfig({
-                    key: `config_${field.key}`,
-                    label,
-                    validators,
-                    order,
-                    colSpan,
-                });
+                return scope;
         }
     }
-    /**
-     * Get options for a field based on its optionsSource
-     * - 'static' or 'auto-populated': Use options from schema (already in API response)
-     * - 'requestSchema': Use fetched request schemas from state
-     * - 'properties': Use fetched properties from state
-     */
-    getOptionsForField(field) {
-        switch (field.optionsSource) {
-            case 'requestSchema':
-                return this.requestSchemaOptions();
-            case 'properties':
-                return this.propertyOptions();
-            case 'auto-populated':
-            case 'static':
+    translateOperationLabel(operation) {
+        switch (operation) {
+            case 'Create':
+                return this.translate('create');
+            case 'Update':
+                return this.translate('update');
+            case 'Delete':
+                return this.translate('delete');
             default:
-                // Use options directly from schema
-                return field.options ?? [];
+                return operation;
         }
     }
-    // ============================================================================
-    // Data Transformation Helpers
-    // ============================================================================
-    unpackRuleToForm(rule) {
-        const formData = {
-            key: rule.key,
-            priority: rule.priority,
-            name_en: rule.name?.en ?? '',
-            name_ar: rule.name?.ar ?? '',
-            description_en: rule.description?.en ?? '',
-            description_ar: rule.description?.ar ?? '',
-            errorMessage_en: rule.errorMessage?.en ?? '',
-            errorMessage_ar: rule.errorMessage?.ar ?? '',
-            ruleType: rule.ruleTypeKey,
-            targetScope: rule.targetScope,
-            targetModuleKey: rule.targetModuleKey ?? '',
-            targetOperationKey: rule.targetOperationKey ?? '',
-            stopOnFailure: rule.stopOnFailure,
-            isActive: rule.isActive,
-        };
-        // Unpack configuration fields with config_ prefix
-        if (rule.configuration) {
-            Object.entries(rule.configuration).forEach(([key, value]) => {
-                formData[`config_${key}`] = value;
-            });
+    patchWizardState(patch) {
+        const currentState = normalizeWizardFormState(this.wizardFormControl.getRawValue());
+        const nextState = normalizeWizardFormState({
+            ...currentState,
+            ...patch,
+        });
+        if (areWizardStatesEqual(currentState, nextState)) {
+            return;
         }
-        return formData;
-    }
-    packFormToCreateDto(formValue) {
-        return {
-            key: formValue['key'],
-            name: {
-                en: formValue['name_en'],
-                ar: formValue['name_ar'],
-            },
-            description: formValue['description_en'] || formValue['description_ar']
-                ? {
-                    en: formValue['description_en'] ?? '',
-                    ar: formValue['description_ar'] ?? '',
-                }
-                : undefined,
-            errorMessage: {
-                en: formValue['errorMessage_en'],
-                ar: formValue['errorMessage_ar'],
-            },
-            ruleType: formValue['ruleType'],
-            targetScope: formValue['targetScope'],
-            targetModuleKey: formValue['targetModuleKey'] || undefined,
-            targetOperationKey: formValue['targetOperationKey'] || undefined,
-            configuration: this.extractConfiguration(formValue),
-            priority: formValue['priority'],
-            stopOnFailure: formValue['stopOnFailure'] ?? true,
-        };
+        this.wizardFormControl.setValue(nextState);
     }
-    packFormToUpdateDto(formValue) {
-        return {
-            ...this.packFormToCreateDto(formValue),
-            isActive: formValue['isActive'] ?? true,
-        };
+    setWizardState(state) {
+        const currentState = normalizeWizardFormState(this.wizardFormControl.getRawValue());
+        const nextState = normalizeWizardFormState(state);
+        if (areWizardStatesEqual(currentState, nextState)) {
+            return;
+        }
+        this.wizardFormControl.setValue(nextState);
     }
-    extractConfiguration(formValue) {
-        const config = {};
-        Object.entries(formValue).forEach(([key, value]) => {
-            if (key.startsWith('config_') &&
-                value !== null &&
-                value !== undefined &&
-                value !== '') {
-                const configKey = key.replace('config_', '');
-                config[configKey] = value;
-            }
+    resetWizardForm() {
+        this.setWizardState(DEFAULT_WIZARD_FORM_STATE);
+    }
+    clearReferenceData() {
+        const hasRequestSchemas = untracked(() => this.requestSchemas().length > 0);
+        const hasProperties = untracked(() => this.properties().length > 0);
+        if (hasRequestSchemas) {
+            this.facade.clearRequestSchemas();
+        }
+        if (hasProperties) {
+            this.facade.clearProperties();
+        }
+    }
+    saveCreate(payload) {
+        this.facade.addRule(payload).subscribe({
+            next: () => this.ref.close(true),
+            error: () => { },
         });
-        return Object.keys(config).length > 0 ? config : undefined;
+    }
+    saveUpdate(id, payload) {
+        this.facade.updateRule(id, payload).subscribe({
+            next: () => this.ref.close(true),
+            error: () => { },
+        });
+    }
+    submitLegacyForm() {
+        if (!this.legacyFormControl.valid) {
+            return;
+        }
+        const formValue = this.legacyFormControl.value;
+        if (!formValue) {
+            return;
+        }
+        const ruleId = this.ruleForEdit()?.id;
+        if (ruleId) {
+            this.saveUpdate(ruleId, packLegacyFormToUpdateDto(formValue));
+            return;
+        }
+        this.saveCreate(packLegacyFormToCreateDto(formValue));
+    }
+    ruleTypeOptions() {
+        const lang = this.langCode();
+        return this.ruleTypes().map((ruleType) => ({
+            label: ruleType.name[lang] || ruleType.name.en,
+            value: readGovernanceRuleTypeKey(ruleType),
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GovernanceRuleForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: GovernanceRuleForm, isStandalone: true, selector: "mt-governance-rule-form", inputs: { ruleForEdit: { classPropertyName: "ruleForEdit", publicName: "ruleForEdit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'governance'\">\r\n  <div\r\n    [class]=\"'flex flex-col gap-3 p-4 overflow-y-auto   ' + modal.contentClass\"\r\n  >\r\n    @if (isLoadingRule()) {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"6rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    } @else {\r\n      <mt-dynamic-form\r\n        [formConfig]=\"formConfig()\"\r\n        [formControl]=\"ruleFormControl\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"'cancel' | transloco\"\r\n      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      (click)=\"ref.close()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"ruleForEdit() ? t('update') : t('create')\"\r\n      [loading]=\"isAddingRule() || isUpdatingRule()\"\r\n      [disabled]=\"!ruleFormControl.valid\"\r\n      (click)=\"onSubmit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: GovernanceRuleForm, isStandalone: true, selector: "mt-governance-rule-form", inputs: { ruleForEdit: { classPropertyName: "ruleForEdit", publicName: "ruleForEdit", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "dynamicFormRef", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'governance'\">\r\n  <div\r\n    [class]=\"\r\n      'governance-rule-form-content flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 sm:p-5 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    @if (isInitializing()) {\r\n      <div class=\"space-y-4\">\r\n        <p-skeleton height=\"4rem\" />\r\n        <p-skeleton height=\"12rem\" />\r\n        <p-skeleton height=\"12rem\" />\r\n      </div>\r\n    } @else if (useLegacyEditor()) {\r\n      <section class=\"rounded-2xl border border-amber-200 bg-amber-50/70 p-4\">\r\n        <p class=\"m-0 text-sm font-semibold text-slate-900\">\r\n          {{ t(\"wizard.legacy-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm leading-6 text-slate-600\">\r\n          {{ t(\"wizard.legacy-description\") }}\r\n        </p>\r\n      </section>\r\n\r\n      <mt-dynamic-form\r\n        [formConfig]=\"legacyFormConfig()\"\r\n        [formControl]=\"legacyFormControl\"\r\n      />\r\n    } @else {\r\n      @if (noRecipesAvailable()) {\r\n        <section\r\n          class=\"rounded-2xl border border-orange-200 bg-orange-50/80 p-4\"\r\n        >\r\n          <p class=\"m-0 text-sm font-semibold text-slate-900\">\r\n            {{ t(\"wizard.no-recipes-title\") }}\r\n          </p>\r\n          <p class=\"mt-1 mb-0 text-sm leading-6 text-slate-600\">\r\n            {{ t(\"wizard.no-recipes-description\") }}\r\n          </p>\r\n        </section>\r\n      }\r\n\r\n      <mt-dynamic-form\r\n        [formConfig]=\"wizardFormConfig()\"\r\n        [formControl]=\"wizardFormControl\"\r\n      />\r\n\r\n      @if (hasReviewSummary()) {\r\n        <section class=\"rounded-2xl border border-slate-900 bg-slate-900 p-4\">\r\n          <p\r\n            class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-white/70\"\r\n          >\r\n            {{ t(\"wizard.summary-title\") }}\r\n          </p>\r\n          <p class=\"mt-2 mb-0 text-sm leading-6 text-white\">\r\n            {{ reviewSummary() }}\r\n          </p>\r\n        </section>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"\r\n      'governance-rule-form-footer ' +\r\n      modal.footerClass +\r\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\r\n    \"\r\n  >\r\n    <mt-button\n      severity=\"secondary\"\n      [label]=\"'cancel' | transloco\"\n      (click)=\"ref.close()\"\n      styleClass=\"w-full sm:w-auto\"\n    />\n\r\n    <mt-button\r\n      [label]=\"ruleForEdit() ? t('update') : t('create')\"\r\n      [loading]=\"isAddingRule() || isUpdatingRule()\"\r\n      [disabled]=\"isAddingRule() || isUpdatingRule()\"\r\n      (click)=\"onSubmit()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;min-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GovernanceRuleForm, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-governance-rule-form', standalone: true, imports: [
+            args: [{ selector: 'mt-governance-rule-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         Button,
-                        TranslocoDirective,
-                        SkeletonModule,
                         DynamicForm,
                         ReactiveFormsModule,
+                        SkeletonModule,
+                        TranslocoDirective,
                         TranslocoPipe,
-                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'governance'\">\r\n  <div\r\n    [class]=\"'flex flex-col gap-3 p-4 overflow-y-auto   ' + modal.contentClass\"\r\n  >\r\n    @if (isLoadingRule()) {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"6rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    } @else {\r\n      <mt-dynamic-form\r\n        [formConfig]=\"formConfig()\"\r\n        [formControl]=\"ruleFormControl\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"'cancel' | transloco\"\r\n      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      (click)=\"ref.close()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"ruleForEdit() ? t('update') : t('create')\"\r\n      [loading]=\"isAddingRule() || isUpdatingRule()\"\r\n      [disabled]=\"!ruleFormControl.valid\"\r\n      (click)=\"onSubmit()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { ruleForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruleForEdit", required: false }] }] } });
+                    ], host: {
+                        class: 'block h-full',
+                    }, template: "<ng-container *transloco=\"let t; prefix: 'governance'\">\r\n  <div\r\n    [class]=\"\r\n      'governance-rule-form-content flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 sm:p-5 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    @if (isInitializing()) {\r\n      <div class=\"space-y-4\">\r\n        <p-skeleton height=\"4rem\" />\r\n        <p-skeleton height=\"12rem\" />\r\n        <p-skeleton height=\"12rem\" />\r\n      </div>\r\n    } @else if (useLegacyEditor()) {\r\n      <section class=\"rounded-2xl border border-amber-200 bg-amber-50/70 p-4\">\r\n        <p class=\"m-0 text-sm font-semibold text-slate-900\">\r\n          {{ t(\"wizard.legacy-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm leading-6 text-slate-600\">\r\n          {{ t(\"wizard.legacy-description\") }}\r\n        </p>\r\n      </section>\r\n\r\n      <mt-dynamic-form\r\n        [formConfig]=\"legacyFormConfig()\"\r\n        [formControl]=\"legacyFormControl\"\r\n      />\r\n    } @else {\r\n      @if (noRecipesAvailable()) {\r\n        <section\r\n          class=\"rounded-2xl border border-orange-200 bg-orange-50/80 p-4\"\r\n        >\r\n          <p class=\"m-0 text-sm font-semibold text-slate-900\">\r\n            {{ t(\"wizard.no-recipes-title\") }}\r\n          </p>\r\n          <p class=\"mt-1 mb-0 text-sm leading-6 text-slate-600\">\r\n            {{ t(\"wizard.no-recipes-description\") }}\r\n          </p>\r\n        </section>\r\n      }\r\n\r\n      <mt-dynamic-form\r\n        [formConfig]=\"wizardFormConfig()\"\r\n        [formControl]=\"wizardFormControl\"\r\n      />\r\n\r\n      @if (hasReviewSummary()) {\r\n        <section class=\"rounded-2xl border border-slate-900 bg-slate-900 p-4\">\r\n          <p\r\n            class=\"m-0 text-xs font-semibold uppercase tracking-[0.18em] text-white/70\"\r\n          >\r\n            {{ t(\"wizard.summary-title\") }}\r\n          </p>\r\n          <p class=\"mt-2 mb-0 text-sm leading-6 text-white\">\r\n            {{ reviewSummary() }}\r\n          </p>\r\n        </section>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"\r\n      'governance-rule-form-footer ' +\r\n      modal.footerClass +\r\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\r\n    \"\r\n  >\r\n    <mt-button\n      severity=\"secondary\"\n      [label]=\"'cancel' | transloco\"\n      (click)=\"ref.close()\"\n      styleClass=\"w-full sm:w-auto\"\n    />\n\r\n    <mt-button\r\n      [label]=\"ruleForEdit() ? t('update') : t('create')\"\r\n      [loading]=\"isAddingRule() || isUpdatingRule()\"\r\n      [disabled]=\"isAddingRule() || isUpdatingRule()\"\r\n      (click)=\"onSubmit()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;min-height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ruleForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruleForEdit", required: false }] }], dynamicFormRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DynamicForm), { isSignal: true }] }] } });
 
 class GovernanceRulesList {
     // ============================================================================