### Convert Example Models

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/README.md

Run this command to convert example models for use with the Form-Engine. Ensure you are in the correct directory.

```sh
gradle convert -p ../exampleModels/
```

--------------------------------

### Install npm Package

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Install the latest npm package using npm or pnpm.

```sh
npm install @com.mgmtp.a12.formengine/formengine-core
```

--------------------------------

### Run Devapp

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/devapp/README.md

Execute this command to start the devapp. Access it via http://localhost:14000.

```sh
node --run start
```

--------------------------------

### Install Form Engine Model Migration Tool

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0400_migration-instructions.adoc

Install the npm package for migrating Form Models. This command installs the tool globally.

```bash
npm install -g @com.mgmtp.a12.formengine/formengine-model-migration
```

--------------------------------

### Update Example Models with Gradle

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Execute the onlyBuildModels task to make updates to example models available to the dev server.

```sh
gradle onlyBuildModels
```

--------------------------------

### Start Watcher

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/codemod/README.md

Starts the file watcher for automatic recompilation during development.

```bash
node --run watch
```

--------------------------------

### Run Dev App in Mock Mode

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Start the application in mock mode using Node.js.

```sh
node --run start:mock // or simply node --run start
```

--------------------------------

### Example Form Model Filenames

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/exampleModels/README.md

Illustrates the naming convention for form and document models within the project structure.

```text
a11y/a11y-form.json
a11y/a11y.controls-form.json
a11y/a11y-document.json

a11y/other/a11y.other-form.json
a11y/other/a11y.other-document.json
```

--------------------------------

### Install Form Engine Core

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0201_getting-started.adoc

Install the Form Engine core package as a development dependency using npm.

```bash
npm install --save-dev @com.mgmtp.a12.formengine/formengine-core
```

--------------------------------

### Run Dev App in Server Mode

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Start the application in server mode using Node.js.

```sh
node --run start:services
```

--------------------------------

### Connect Form Engine Example

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_03_customization.adoc

Demonstrates how to connect the Form Engine, setting the UI state to readonly and adapting navigation button payload for validation.

```tsx
import React from "react";
import { FormEngineTpl, FormEngineStateAdapter, FormEngineActions, Events } from "@form-engine/react";

const MyFormEngine = () => {
  const mapStateToProps = FormEngineStateAdapter.mapStateToProps;
  const mapDispatchToProps = FormEngineActions.mapDispatchToProps;

  return (
    <FormEngineTpl
      mapStateToProps={mapStateToProps}
      mapDispatchToProps={mapDispatchToProps}
      config={{
        ui: {
          state: "readonly",
        },
      }}
      eventAdapter={{
        [Events.navigationButton]: (event) => ({ ...event, validation: "full" }),
      }}
    />
  );
};

export default MyFormEngine;
```

--------------------------------

### Link Binary Globally

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/codemod/README.md

Installs the form-engine-codemod binary globally using pnpm for command-line access.

```bash
pnpm add -g .
```

--------------------------------

### Minimal Form Engine Integration Example

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0201_getting-started.adoc

A basic, self-contained example demonstrating the integration of the Form Engine into a TypeScript/React application.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";

import { FormEngine } from "@com.mgmtp.a12.formengine/formengine-core";

const App = () => {
  return (
    <FormEngine />
  );
};

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

```

--------------------------------

### Example: Enable Submit Button When Engine is Dirty

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0208_06_button_enablement.adoc

Demonstrates how to create and adapt an enablement map for event buttons. This specific example ensures the 'Submit' button is only enabled when the Form Engine detects changes (is dirty).

```typescript
import {
	FormEngine,
	FormData,
	FormModel,
	FormEngineConfig
} from "@mgm/a12-form-engine";

interface MyFormData extends FormEngine {
	// ...
}

interface MyFormModel extends FormModel {
	// ...
}

interface MyFormEngineConfig extends FormEngineConfig {
	// ...
}

const formEngine = new FormEngine<MyFormData, MyFormModel, MyFormEngineConfig>({
	// ...
	config: {
		// ...
		enablements: {
			// ...
			"Submit": {
				// The button "Submit" should only be enabled if the engine is dirty.
				disabled: (engine: MyFormData) => !engine.isDirty
			}
		}
	}
});
```

--------------------------------

### Customizing Standard View with Additional Options

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_03_customization.adoc

Example demonstrating how to customize the standard Form Engine view by providing additional options, such as custom FormModelMap and WidgetMap implementations.

```tsx
import React from "react";
import { FormEngine } from "@mgm/a12-form-engine-client";

const additionalOptionsExample = {
  // ... other options
  config: {
    // ... other config options
    formModelMap: { /* custom form model map */ },
    widgetMap: { /* custom widget map */ },
  },
};

const MyCustomFormEngine = () => (
  <FormEngine
    // ... other props
    config={additionalOptionsExample.config}
  />
);

export default MyCustomFormEngine;
```

--------------------------------

### Install A12 Form Engine Codemod with pnpm

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0401_2025.06-ext4.adoc

Installs the A12 Form Engine codemod globally using pnpm. This is the first step to migrate from deep import paths to top-level imports.

```bash
pnpm install -g @com.mgmtp.a12.formengine/formengine-codemod
```

--------------------------------

### Complete Minimal Form Engine Setup

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_04_non-redux.adoc

The complete code for setting up a minimal Form Engine integration in a non-Redux React application, including loading models, unmarshalling, store creation, and rendering.

```tsx
import { FormEngine } from "@mgm/a12-form-engine";

const { loadModels } = FormEngine.Models;
const { unmarshallModel, unmarshallFormModel } = FormEngine.Models;
const { createStore } = FormEngine.Store;
const { connect, render } = FormEngine.Components;

async function setupFormEngine() {
  const models = await loadModels();

  const documentModel = unmarshallModel(models.document);
  const accessor = FormEngine.createGeneratedCodeAccessor(documentModel, {});

  const formModel = unmarshallFormModel(models.form);

  const store = createStore(formModel, accessor);

  const ConnectedForm = connect(store);

  render(document.getElementById("app"), <ConnectedForm />);
}

setupFormEngine();
```

--------------------------------

### External Enumeration Example

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0206_00_rendering.adoc

Demonstrates how to set up and use an external enumeration provider with the Form Engine React component. This is useful when enumeration values are fetched from an external source.

```tsx
import React from "react";
import { FormEngine, createEngineMiddlewares } from "@form-engine/react";

// Assume ExternalEnumerationProvider is defined elsewhere
// import { ExternalEnumerationProvider } from "./external-enumeration-provider";

const externalEnumerationProvider = {
  getValues: async (query: string) => {
    // Simulate fetching data from an API
    const allOptions = [
      { value: "apple", label: "Apple" },
      { value: "banana", label: "Banana" },
      { value: "cherry", label: "Cherry" },
    ];
    return allOptions.filter(option =>
      option.label.toLowerCase().includes(query.toLowerCase())
    );
  },
};

const config = {
  externalEnumerationProvider,
};

const middlewares = createEngineMiddlewares(config);

function App() {
  return (
    <FormEngine
      formModel={...} // Your form model
      middlewares={middlewares}
      // Other props like initialDocument, onChange, etc.
    />
  );
}

export default App;
```

--------------------------------

### Debug Codemod with Inspect Brk

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/codemod/README.md

Manually starts the codemod as a node script with debugging enabled, pausing execution on the first line.

```bash
node --inspect-brk ./lib/cli.js <recipe> <any tsconfig>
```

--------------------------------

### Custom Section Rendering with FormModelMap

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0208_04_rendering.adoc

This example demonstrates creating a custom FormModelMap to render an image instead of a section when a specific annotation is present. It shows how to define custom rendering logic for Form Model elements.

```tsx
const customSection = (
  props: FormModelElementProps
) => {
  const { element, children } = props;

  if (
    element.annotations.some(
      (annotation) => annotation.name === "custom-section"
    )
  ) {
    return (
      <div className="custom-section">
        <img src="/path/to/your/image.png" alt="Custom Section Image" />
      </div>
    );
  }

  return <DefaultFormModelElement {...props} />;
};

const customFormModelMap: FormModelMap = {
  ...DefaultFormModelMap,
  Section: customSection,
};

export default customFormModelMap;
```

--------------------------------

### Custom SelectorMap Implementation

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0208_09_custom_selector_map.adoc

Example of customizing the Form Engine's selector for attachment thumbnails. Ensure to spread the DefaultSelectorMap when providing your custom implementation.

```tsx
import {
  DefaultSelectorMap,
  SelectorMap,
} from "@mgm/a12-form-engine";

const customSelectorMap: SelectorMap = {
  ...DefaultSelectorMap,
  // Customize attachment thumbnails selection
  attachmentThumbnail: (attachment) => {
    // Your custom logic here
    return attachment.url;
  },
};

```

--------------------------------

### withFormEngineMiddlewares

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Enhances an application configuration with form engine middlewares. This function is intended for use during application setup to integrate form engine's middleware capabilities.

```APIDOC
## withFormEngineMiddlewares

### Description
Enhances an application configuration with form engine middlewares.

### Method
Function

### Signature
export const withFormEngineMiddlewares: <T extends ApplicationWithFormEngineConfig>(cfg: T) => T;

### Parameters
- **cfg** (T) - Required - The application configuration object to enhance.
```

--------------------------------

### Custom Section Rendering with Enablement Checks

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0208_04_rendering.adoc

This example extends the custom section rendering to incorporate enablement checks. It uses Enablement functions to conditionally hide the custom rendered image based on the element's status (e.g., if the section should be hidden).

```tsx
import { Enablements } from "@mgm/a12-form-engine-react";

const customSectionWithEnablement = (
  props: FormModelElementProps
) => {
  const { element, children } = props;

  if (
    element.annotations.some(
      (annotation) => annotation.name === "custom-section"
    )
  ) {
    if (Enablements.isHidden(element)) {
      return null;
    }

    return (
      <div className="custom-section">
        <img src="/path/to/your/image.png" alt="Custom Section Image" />
      </div>
    );
  }

  return <DefaultFormModelElement {...props} />;
};

const customFormModelMapWithEnablement: FormModelMap = {
  ...DefaultFormModelMap,
  Section: customSectionWithEnablement,
};

export default customFormModelMapWithEnablement;
```

--------------------------------

### Run A12 Form Engine Codemod using dlx

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0401_2025.06-ext4.adoc

An alternative method to run the A12 Form Engine codemod using pnpm dlx, which downloads and executes the package without global installation. This command also migrates deep import paths to top-level imports.

```bash
pnpm dlx @com.mgmtp.a12.formengine/formengine-codemod preferTopLevel <path to directory with tsconfig.json>
```

--------------------------------

### Build Project with Gradle

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Execute the assemble task to build the project using Gradle.

```sh
gradle assemble
```

--------------------------------

### createEngineStore

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates an engine store with initial state, models, UI state, and locale.

```APIDOC
## createEngineStore

### Description
Creates an engine store with initial state, models, UI state, and locale.

### Signature
export function createEngineStore(state: {
    readonly data: Partial<EngineStore.DataState>;
    readonly models: Models;
    readonly ui?: Partial<EngineStore.UIState>;
    readonly locale: Locale;
}): EngineState;
```

--------------------------------

### uiSlice

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

A function to get the UI state slice from the engine state.

```APIDOC
## uiSlice(state: object)

### Description
A function to get the UI state slice from the engine state.

### Parameters

- **state** (object) - The current engine state.
```

--------------------------------

### Run Codemod Help Command

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/codemod/README.md

Executes the form-engine-codemod binary to display its help information.

```bash
formengine-codemod --help
```

--------------------------------

### Test Project with Gradle

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Execute the check task to test the project using Gradle.

```sh
gradle check
```

--------------------------------

### Rebuild Documentation with Gradle

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Execute the onlyBuildDocumentation task to rebuild only the developer documentation.

```sh
gradle onlyBuildDocumentation
```

--------------------------------

### Locale Slice Accessor

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

A function to access the 'locale' slice from the engine state. Provides a convenient way to get the current locale.

```typescript
export function localeSlice(state: object): Locale;
```

--------------------------------

### Get All Event Actions

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Retrieves a list of all available event actions within the form engine. Useful for understanding the event system or for debugging.

```typescript
export function getAllEventActions(): ActionCreator_2<AnyAction>[];
```

--------------------------------

### Get All Command Actions

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Retrieves a list of all available command actions within the form engine. This can be used for introspection or dynamic action dispatching.

```typescript
export function getAllCommandActions(): ActionCreator_2<AnyAction>[];
```

--------------------------------

### Get Localized Enumeration Values

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Retrieves localized enumeration values based on the model path. Requires render options and a localizer instance.

```typescript
export function getLocalizedEnumerationValues(renderOptions: FormModelMap.RenderOptions, modelPath: ModelPath, localizer: Localizer): EnumerationValue[];
```

--------------------------------

### Create Engine Store

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Initializes the engine store with initial state, including data, models, UI, and locale.

```typescript
export function createEngineStore(state: {
    readonly data: Partial<EngineStore.DataState>;
    readonly models: Models;
    readonly ui?: Partial<EngineStore.UIState>;
    readonly locale: Locale;
}): EngineState;
```

--------------------------------

### Run Form Model Migration

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0400_migration-instructions.adoc

Execute the Form Engine model migration tool. Provide the path to the form model file or directory. Use the -b flag to create backups if models are not under version control, and -h for help.

```bash
formengine-model-migration <path to form model file> -b
```

--------------------------------

### Code Quality Check with Gradle

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Execute the verify task for code quality checks using Gradle.

```sh
gradle verify
```

--------------------------------

### createEngineMiddlewares

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates engine middlewares with optional middleware options.

```APIDOC
## createEngineMiddlewares

### Description
Creates engine middlewares with optional middleware options.

### Signature
export function createEngineMiddlewares(options?: Partial<MiddlewareOptions>): Middleware[];
```

--------------------------------

### createDefaultMiddlewareOptions

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates default middleware options, with optional partial overrides.

```APIDOC
## createDefaultMiddlewareOptions

### Description
Creates default middleware options, with optional partial overrides.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **options** (Partial<MiddlewareOptions>) - Optional - Partial middleware options to override defaults.

### Request Example
```json
{
  "options": {
    "someOption": "value"
  }
}
```

### Response
#### Success Response (200)
* **MiddlewareOptions** - The default middleware options.

#### Response Example
```json
{
  "someOption": "value",
  "defaultOption1": "defaultValue1",
  "defaultOption2": "defaultValue2"
}
```
```

--------------------------------

### Get Localized Dependent Enumeration Values

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Retrieves localized enumeration values that depend on other form states. Requires render options, the document path, and a localizer instance.

```typescript
export function getLocalizedDependentEnumerationValues(renderOptions: FormModelMap.RenderOptions, documentPath: EntityInstancePath, localizer: Localizer): EnumerationValue[];
```

--------------------------------

### createUIState

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates a UI state object, focusing on screen location and other optional UI states.

```APIDOC
## createUIState

### Description
Creates a UI state object, focusing on screen location and other optional UI states.

### Signature
export function createUIState(uiState: Pick<EngineStore.UIState, "screenLocation"> & Partial<EngineStore.UIState>): EngineStore.UIState;
```

--------------------------------

### Configure Form Engine with AttachmentLoader

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0203_04_attachments.adoc

Pass a custom AttachmentLoader implementation to the Form Engine sagas during application setup. This ensures the Form Engine can handle file attachments.

```tsx
const yourAttachmentLoaderImplementation: AttachmentLoader = /* your impl here */

ApplicationFactories.createApplicationSetup({
    // ...other props
    customSagas: [
        // ...other sagas
        ...formEngineSagas({ attachmentLoader: yourAttachmentLoaderImplementation }),
    ]
});
```

--------------------------------

### Get Document Path for Input

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

This utility function determines the EntityInstancePath for a given input within a DocumentModel. It's useful for referencing specific input elements within the form structure.

```typescript
export function useDocumentPathForInput(documentModelPath: ModelPath, documentModel: DocumentModel): EntityInstancePath;
```

--------------------------------

### createFormEngineMiddlewares

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates form engine middlewares with optional middleware options.

```APIDOC
## createFormEngineMiddlewares

### Description
Creates form engine middlewares with optional middleware options.

### Signature
export function createFormEngineMiddlewares(middlewareOptions?: Partial<MiddlewareOptions>): Middleware[];
```

--------------------------------

### Create Empty Document

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Initializes an empty document based on the provided document and form models.

```typescript
export function createEmptyDocument(documentModel: DocumentModel, formModel: FormModel): object;
```

--------------------------------

### Type-Only Exports Example

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0401_2025.06.adoc

A12 Form Engine now uses 'type' keyword for type-only exports. This may affect import statements when creating type aliases. Use the 'type' keyword syntax for type aliases.

```tsx
import { DispatchConfiguration } from "@com.mgmtp.a12.formengine/formengine-core/lib/view";

// creating a type alias
type RepeatConfig = DispatchConfiguration.Repeat;

// different syntax, same result!
import RepeatConfig = DispatchConfiguration.Repeat
```

```tsx
import { DispatchConfiguration, FormModelMap } from "@com.mgmtp.a12.formengine/formengine-core/lib/view";
```

--------------------------------

### Add Form Engine Middlewares

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_01_client-setup.adoc

Call `createFormEngineMiddlewares` and add the returned middlewares to `additionalMiddlewares`. If customizing middlewares, pass `MiddlewareOptions` directly to `createFormEngineMiddlewares`.

```javascript
call createFormEngineMiddlewares and add the returned middlewares to the additionalMiddlewares
```

--------------------------------

### Create and Initialize Redux Store

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_04_non-redux.adoc

Creates and initializes a Redux store with the loaded models. This store will manage the Form Engine's state.

```tsx
import { FormEngine } from "@mgm/a12-form-engine";

const { createStore } = FormEngine.Store;

const store = createStore(formModel, accessor);

console.log(store);
```

--------------------------------

### Clean Build Artifacts with Gradle

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Execute the clean task to remove build artifacts using Gradle.

```sh
gradle clean
```

--------------------------------

### createEmptyDocumentDataProvider

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates a data provider for an empty document with optional configuration.

```APIDOC
## createEmptyDocumentDataProvider

### Description
Creates a data provider for an empty document with optional configuration.

### Signature
export function createEmptyDocumentDataProvider(options?: EmptyDocumentDataProviderOptions): DataProvider;
```

--------------------------------

### Importing Core API Types

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Demonstrates importing various types and interfaces from the form engine core and related libraries. These imports are necessary for using the form engine's functionalities.

```typescript
import type { A12ApplicationConfig } from '@com.mgmtp.a12.client/client-core/lib/core/application/index.js';
import type { ActionContentboxProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/contentbox/main/action-contentbox/action-contentbox.api.js';
import { ActionCreator } from 'typescript-fsa';
import type { ActionCreator as ActionCreator_2 } from 'redux';
import { Activity } from '@com.mgmtp.a12.client/client-core/lib/core/activity/index.js';
import { ActivityReducers } from '@com.mgmtp.a12.client/client-core/lib/core/activity/index.js';
import type { Annotation } from '@com.mgmtp.a12.base/base-model-api/lib/main/header/index.js';
import type { AnyAction } from 'redux';
import type { AnyAction as AnyAction_2 } from 'typescript-fsa';
import type { ApplicationWithConfiguredFeature } from '@com.mgmtp.a12.client/client-core/lib/core/application/index.js';
import type { AttachedPortalProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/attached-portal/main/attached-portal.api.js';
import type { Attachment } from '@com.mgmtp.a12.dataservices/dataservices-access/lib/Attachment/attachment.js';
import type { AutocompleteProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/input/autocomplete/main/autocomplete.api.js';
import type { BodyProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/typography/main/typography.api.js';
import type { BreadcrumbProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/breadcrumb/main/breadcrumb.api.js';
import type { BulletListProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/bullet-list/main/bullet-list.api.js';
import type { ButtonGroupContainerProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/layout/button-group-container/main/button-group-container.api.js';
import type { ButtonGroupProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/button-group/main/button-group.api.js';
import type { ButtonProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/button/main/button.api.js';
import type { CheckboxGroupProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/input/checkbox-group/main/checkbox-group.api.js';
import type { CheckboxItemProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/input/checkbox-group/main/checkbox-group.api.js';
import type { CheckboxProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/input/checkbox/main/checkbox.api.js';
import type { ClearfixProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/clearfix/main/clearfix.api.js';
import type { Column } from '@com.mgmtp.a12.widgets/widgets-core/lib/table/new-api/column.api.js';
import { Component } from 'react';
import type { ComponentType } from 'react';
import type { Container } from '@com.mgmtp.a12.widgets/widgets-core/lib/common/main/base-props.js';
import type { ContentBoxProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/contentbox/main/template/contentbox.tpl.api.js';
import { Context } from 'react';
import type { CounterProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/counter/main/counter.api.js';
import type { CssEllipsisProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/css-ellipsis/main/css-ellipsis.api.js';
import type { DataFormats } from '@com.mgmtp.a12.utils/utils-localization/lib/main/index.js';
import type { DataProvider } from '@com.mgmtp.a12.client/client-core/lib/core/data/index.js';
import type { DatePickerDialogProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/datepicker/main/date-picker.mobile.api.js';
import type { DatePickerProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/datepicker/main/date-picker.api.js';
import type { DateTimePickerProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/date-time-picker/main/date-time-picker.api.js';
import type { DefaultFileUploadProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/file-upload/main/default/default-file-upload.api.js';
import type { Dispatch } from 'redux';
import type { Document as Document_2 } from '@com.mgmtp.a12.kernel/kernel-md-facade/lib/main/js/api.js';
import type { DocumentJsonRpc2Request } from '@com.mgmtp.a12.dataservices/dataservices-access/lib/Document/index.js';
import type { DocumentModel } from '@com.mgmtp.a12.kernel/kernel-md-facade/lib/main/js/api.js';
import type { EntityInstancePath } from '@com.mgmtp.a12.kernel/kernel-md-facade/lib/main/js/api.js';
import type { ErrorTooltipProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/tooltip/error/main/error.api.js';
import type { Expression } from '@com.mgmtp.a12.expression/expression-core';
import type { FieldInstanceValue } from '@com.mgmtp.a12.kernel/kernel-md-facade/lib/main/js/api.js';
import type { FlyoutMenuProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/menu/main/flyout-menu.api.js';
import type { GlobalMessageBoxProps } from '@com.mgmtp.a12.widgets/widgets-core/lib/global-message-box/main/global-message-box.api.js';
```

--------------------------------

### Load Form Engine Models

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_04_non-redux.adoc

Loads the necessary models for the Form Engine. This is the first step in setting up the engine.

```tsx
import { FormEngine } from "@mgm/a12-form-engine";

const { loadModels } = FormEngine.Models;

const models = await loadModels();
```

--------------------------------

### MiddlewareOptions Interface

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Configuration options for middleware, including localization settings, conversion options, and validation behavior.

```APIDOC
## MiddlewareOptions Interface

### Description
Configuration options that can be passed to the form engine's middleware. These options allow customization of various aspects like localization, data conversion, and validation behavior.

### Properties
- **disableRepeatValidationOnLeaving** (boolean, optional) - If true, validation for repeat sections is disabled when leaving them.
- **externalEnumerationProvider** (IExternalEnumerationProvider, optional) - An optional provider for external enumeration data.
- **nowProvider** (EngineStore.Provider<Date | undefined>, optional) - A provider for the current date and time, used for time-sensitive operations.
```

--------------------------------

### Create Engine Middlewares

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Generates engine middlewares with optional partial middleware options.

```typescript
export function createEngineMiddlewares(options?: Partial<MiddlewareOptions>): Middleware[];
```

--------------------------------

### Register Middleware for Event Button

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0208_03_behavior_customization.adoc

Demonstrates how to write and register a middleware for the 'eventButton' event-action. This snippet focuses on the middleware registration part.

```typescript
const middleware: Middleware = (dispatch, getState, context) => {
  return (next) => async (action) => {
    if (action.type === "eventButton") {
      // Custom logic for eventButton
      console.log("eventButton action intercepted:", action);
      // Example: Modify action payload before dispatching
      action.payload.customData = "processed";
    }
    return next(action);
  };
};
```

--------------------------------

### Creating Form Engine Activity with Initial Disabled State

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_03_customization.adoc

Demonstrates how to create a Form Engine activity with an initially disabled state by providing a pre-initialized UI slice in the create action payload.

```typescript
import { FormEngineActions } from "@mgm/a12-form-engine-client";

const createAction = FormEngineActions.create({
  // ... other properties
  payload: {
    // ... other payload properties
    slices: {
      ui: {
        // ... other ui properties
        disabled: true,
      },
    },
  },
});
```

--------------------------------

### Existing File Interface

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Represents an existing file with its document path and file name.

```typescript
// @public
export interface ExistingFile {
    readonly documentPath: EntityInstancePath;
    readonly fileName: string;
}
```

--------------------------------

### Configure Application with Form Model Support

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Use this function to enable form model support within an application configuration. It takes an application configuration and returns the updated configuration.

```typescript
export const withFormModelSupport: <T extends ApplicationWithFormEngineConfig>(cfg: T) => T;
```

--------------------------------

### Create Empty Document Data Provider

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates a data provider for an empty document, with optional configuration.

```typescript
export function createEmptyDocumentDataProvider(options?: EmptyDocumentDataProviderOptions): DataProvider;
```

--------------------------------

### Form Engine Commands: Set Document

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Action creator for setting the document within the form engine. Requires a payload containing document details.

```typescript
const setDocument: ActionCreator<SetDocumentPayload>;
```

--------------------------------

### withConfiguredFormEngine

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

A higher-order function that configures the form engine with the provided application configuration. It returns the application configuration augmented with form engine capabilities.

```APIDOC
## withConfiguredFormEngine

### Description
Configures the form engine with the provided application configuration.

### Method
Function

### Signature
<T extends ApplicationWithFormEngineConfig>(cfg: T) => T

### Parameters
- **cfg** (T) - Required - The application configuration object.
```

--------------------------------

### useCommonWidgetSettings

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/content-elements/formengine-content-elements.api.md

A hook that derives common widget settings from base control settings. This is typically used to apply consistent styling and behavior across different widget types.

```APIDOC
## useCommonWidgetSettings

### Description
A hook that derives common widget settings from base control settings. This is typically used to apply consistent styling and behavior across different widget types.

### Signature
```typescript
function useCommonWidgetSettings(commonControlSettings: BaseControlSettings): BaseWidgetSettings
```

### Parameters
#### Path Parameters
- **commonControlSettings** (BaseControlSettings) - Required - The base control settings to derive widget settings from.
```

--------------------------------

### InputLocalization

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Provides selectors for retrieving localized strings for various input attributes like labels, placeholders, hints, helper text, and suffixes.

```APIDOC
## InputLocalization Selectors

### Description
Provides selectors for retrieving localized strings for various input attributes like labels, placeholders, hints, helper text, and suffixes.

### Methods
- **labelLocalizables**(formModelPath: ModelPath, input: FormModel.FieldBasedInputType): Selector<Localizable[]>
- **placeholderLocalizables**(formModelPath: ModelPath, input: FormModel.FieldBasedInputType): Selector<Localizable[]>
- **hintLocalizables**(formModelPath: ModelPath, input: FormModel.FieldBasedInputType): Selector<Localizable[]>
- **helperTextLocalizables**(formModelPath: ModelPath, input: FormModel.FieldBasedInputType): Selector<Localizable[]>
- **suffixTextLocalizables**(documentModelPath: ModelPath): Selector<Localizable[]>
```

--------------------------------

### createEmptyDocument

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates an empty document based on the provided document and form models.

```APIDOC
## createEmptyDocument

### Description
Creates an empty document based on the provided document and form models.

### Signature
export function createEmptyDocument(documentModel: DocumentModel, formModel: FormModel): object;
```

--------------------------------

### Add Java Dependency

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/README.md

Add the latest Java dependency to your build.gradle file.

```groovy
dependencies {
	implementation 'com.mgmtp.a12.com.mgmtp.a12.formengine:formengine-model'
}
```

--------------------------------

### Tooltips

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

A React component for displaying various types of tooltips (error, hint, info, warning).

```APIDOC
## Tooltips(props: TooltipsProps)

### Description
A React component for displaying various types of tooltips (error, hint, info, warning).

### Props

- **disabled** (boolean) - Optional - Whether tooltips are disabled.
- **errorTooltip** ({ id: string, content: ReactNode }) - Optional - Configuration for error tooltips.
- **hintTooltip** ({ id: string, content: ReactNode }) - Optional - Configuration for hint tooltips.
- **infoTooltip** ({ id: string, content: ReactNode }) - Optional - Configuration for info tooltips.
- **warningTooltip** ({ id: string, content: ReactNode }) - Optional - Configuration for warning tooltips.
```

--------------------------------

### Pre-process Document

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Processes a document instance with the provided models and configuration. This function is used to prepare document data before further operations.

```typescript
export function preProcessDocument(params: PreProcessDocumentParams): PreProcessDocumentResult;
```

--------------------------------

### Create Default Middleware Options

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates default middleware options for the form engine. It allows for partial overrides of the default configuration.

```typescript
export function createDefaultMiddlewareOptions(options?: Partial<MiddlewareOptions>): MiddlewareOptions;
```

--------------------------------

### Connect Components and Render Engine

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0207_04_non-redux.adoc

Connects the Form Engine components to the Redux store and renders the engine. This is the final step to display the form.

```tsx
import { FormEngine } from "@mgm/a12-form-engine";

const { connect, render } = FormEngine.Components;

const ConnectedForm = connect(store);

render(document.getElementById("app"), <ConnectedForm />);
```

--------------------------------

### Configure Application with Form Engine Middlewares

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Use this function to enhance an application configuration with form engine middlewares. It accepts an application configuration and returns the enhanced configuration.

```typescript
export const withFormEngineMiddlewares: <T extends ApplicationWithFormEngineConfig>(cfg: T) => T;
```

--------------------------------

### Configure Application with Form Engine View

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Use this function to add form engine view capabilities to an application configuration. It accepts an application configuration and returns the enhanced configuration.

```typescript
export const withFormEngineView: <T extends ApplicationWithFormEngineConfig>(cfg: T) => T;
```

--------------------------------

### Adapt and Pass Configuration Options

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0208_01_configuration_options.adoc

This TypeScript snippet shows how to modify the Config object by setting properties like 'cardView' and 'uiIdPrefix' before passing it to form engine components.

```typescript
const config = new Config();
config.cardView = "card";
config.uiIdPrefix = "my-prefix-";

const component = new Component(config);

```

--------------------------------

### Form Engine Commands

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Provides access to various commands for interacting with the form engine, such as setting document data, managing messages, changing screens, and handling repeat instances.

```APIDOC
## Form Engine Commands

This section details the commands available for interacting with the form engine.

### Commands

- **setDocument**: Sets the document data.
- **setMessageState**: Manages the state of messages.
- **setMessageStateEntry**: Manages individual message state entries.
- **setSectionsCollapsed**: Controls the collapsed state of sections.
- **setLocationStack**: Manages the location stack.

### Command Payloads and Interfaces

- **SetDocumentPayload**: Payload for the `setDocument` command.
- **SetMessageStatePayload**: Payload for the `setMessageState` command.
- **SetMessageStateEntryPayload**: Payload for the `setMessageStateEntry` command.
- **ChangeScreenPayload**: Payload for changing the screen, requires `screenName`.
- **SetSectionsCollapsedPayload**: Payload for collapsing sections.
- **SetLocationStackPayload**: Payload for managing the location stack.

### Repeat Instance Management

- **ChangeRepeatInstanceStateEntryPayload**: Payload for changing the state of a repeat instance entry.
- **ChangeRepeatStaticStateEntryPayload**: Payload for changing the static state of a repeat instance entry.

### Correction Mode Commands

- **setCorrectionModeBackup**: Sets a backup for the correction mode.
- **restoreCorrectionModeBackup**: Restores the correction mode from a backup.
- **setCorrectionScreenState**: Sets the state for the correction screen.
- **setValidationBarState**: Sets the state for the validation bar.
```

--------------------------------

### Create Platform Single Document Data Provider

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Creates a data provider for a platform-specific single document.

```typescript
export function createPlatformSingleDocumentDataProvider(options?: PlatformSingleDocumentDataProviderOptions): DataProvider;
```

--------------------------------

### getAllCommandActions

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Retrieves all available command actions within the form engine. These actions represent operations that can be performed on the form state.

```APIDOC
## getAllCommandActions

### Description
Returns an array of all action creators for commands available in the form engine. These actions can be dispatched to modify the engine's state.

### Returns
`ActionCreator_2<AnyAction>[]` - An array of action creators for command actions.
```

--------------------------------

### DispatchConfiguration.Repeat API

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Provides methods for managing repeatable form sections, such as adding, removing, cloning, and navigating rows, as well as handling column resizing and filtering.

```APIDOC
## DispatchConfiguration.Repeat API

### Description
Provides methods for managing repeatable form sections, including row manipulation, pagination, filtering, and sorting.

### Methods
- `addRow(path: EntityInstancePath, repeatFormModelPath: ModelPath): void`
- `enterRow(rowPath: EntityInstancePath, repeatFormModelPath: ModelPath, triggerElement?: "edit-button" | "row"): void`
- `onChangePage(page: number, path: ModelPath): void`
- `onClearFilters(repeatFormModelPath: ModelPath): void`
- `onCloneRow(rowPath: EntityInstancePath, repeatFormModelPath: ModelPath): void`
- `onCloseEmbeddedRepeatRow(repeatFormModelPath: ModelPath): void`
- `onColumnWidthChange(columnPath: ModelPath, width: number): void`
- `onCustomRowAction(path: EntityInstancePath, repeatFormModelPath: ModelPath, eventName: string): void`
- `onFilterParseError(columnId: string, repeatFormModelPath: ModelPath, errors: RangeFilterParseError | FilterParseError): void`
- `onFilterValueChange(repeatFormModelPath: ModelPath, columnId: string, filter?: RepeatFilter): void`
- `onLeaveDetachedRepeatRow(cancel: boolean): void`
- `onLeaveRepeatRow(rowPath: EntityInstancePath, repeatFormModelPath: ModelPath): void`
- `onLeaveTable(repeatFormModelPath: ModelPath): void`
- `onMoveRow(repeatFormModelPath: ModelPath, rowPath: EntityInstancePath, delta: number): void`
- `onShowFilter(path: ModelPath, show: boolean): void`
- `onSortingChange(repeatFormModelPath: ModelPath, orderPath: ModelPath, sorting: "asc" | "desc" | "none" | undefined): void`
- `removeRow(rowPath: EntityInstancePath, repeatFormModelPath: ModelPath): void`
```

--------------------------------

### withFormEngine

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

A higher-order function that integrates the form engine feature into the application configuration. It returns the application configuration with the form engine feature enabled.

```APIDOC
## withFormEngine

### Description
Integrates the form engine feature into the application configuration.

### Method
Function

### Signature
<T extends ApplicationWithFormEngineConfig>(cfg: T) => ApplicationWithConfiguredFeature<T, "formEngine">

### Parameters
- **cfg** (T) - Required - The application configuration object.
```

--------------------------------

### Configuring FormEngine View with Custom SelectorMap

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/documentation/src/0401_2025.06.adoc

This TypeScript snippet shows how to configure the FormEngine view component by passing a custom SelectorMap. This allows the Form Engine to use your customized selectors, such as the one for attachment thumbnails.

```tsx
import { FormEngineViews } from "@com.mgmtp.a12.formengine/formengine-core/lib/client-extensions";

const customConfig: Partial<Config> = {
	selectorMap: CustomSelectorMap,
	
	// WidgetMap, FormModelMap and more...
};

function CustomFormEngine(props: View) {
	return (
		<FormEngineViews.FormEngine {...props} {...customConfig} />
	);
}
```

--------------------------------

### platformSingleDocumentDataProvider

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

A default implementation of DataProvider for single document retrieval on the platform.

```APIDOC
## platformSingleDocumentDataProvider

### Description
An instance of `DataProvider` tailored for the platform, designed to fetch a single document. It provides the mechanism for retrieving document data.

### Type
`DataProvider`
```

--------------------------------

### Multi File Upload Action Creator

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Action creator for handling multi-file uploads.

```typescript
const // (undocumented)
        multiFileUpload: ActionCreator<MultiFileUploadPayload>;
```

--------------------------------

### WidgetMapContext

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/content-elements/formengine-content-elements.api.md

Context object providing the WidgetMap to descendant components.

```APIDOC
## WidgetMapContext

### Description
A React Context object that exposes the `WidgetMap` to the component tree. This allows components to access and use the registered widgets.

### Type
Context<WidgetMap>
```

--------------------------------

### FormEngineActions

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Provides functions for dispatching commands and events within the Form Engine. It includes utilities for creating command dispatchers and adapters.

```APIDOC
## FormEngineActions

### Description
Provides functions for dispatching commands and events within the Form Engine. It includes utilities for creating command dispatchers and adapters.

### Functions
- `commandDispatch(clientDispatch: Dispatch, activityId: string): Dispatch`
- `dispatchAdapterFactory(clientDispatch: Dispatch, activityId: string): Dispatch`

### Interfaces
- `FormEngineEventActions<T = AnyAction>`: Represents actions related to form engine events, including `activityId` and `engineEvent`.

### Other Exports
- `formEngineDataReducers: ActivityReducers.DataReducer[]`
- `FormEngineRenderer: ComponentType<FormEngineRendererPropsType>`
- `FormEngineRendererPropsType`: Props for the `FormEngineRenderer` component.
- `FormEngineSagaOptions`: Options for configuring form engine sagas.
- `formEngineSagas(options?: FormEngineSagaOptions): (typeof resetUiDirtyStateOnSave)[]`
- `FormEngineSelectors`: Namespace for form engine state selectors.
- `FormEngineStateAdapter`: Namespace for state adapter functions, including `mapStateToProps`.
- `FormEngineViews`: Namespace for form engine view components.
```

--------------------------------

### Form Engine Commands: Change Screen

Source: https://github.com/mgm-tp/a12-form-engine/blob/main/core/formengine-core.api.md

Action creator for changing the current screen within the form engine. Requires a payload specifying the screen name.

```typescript
export interface ChangeScreenPayload {
    readonly screenName: string;
}
```