@react-form-builder/core
Version:
React JSON Schema Form Builder to create complex, validated, reusable forms with no deep React knowledge required
5,207 lines • 174 kB
TypeScript
import { AriaAttributes } from 'react';
import { ComponentType } from 'react';
import { Context } from 'react';
import { CSSProperties } from 'react';
import { ForwardedRef } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { ForwardRefRenderFunction } from 'react';
import { JSX } from 'react/jsx-runtime';
import { PropsWithoutRef } from 'react';
import { Provider } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { Ref } from 'react';
import { RefAttributes } from 'react';
import { SyntheticEvent } from 'react';
/**
* Action Storage.
* Used for add a new action, store information about it.
*/
export declare type ActionData = {
/**
* The unique action key.
*/
[KeySymbol]?: string;
/**
* The action name.
*/
name: string;
/**
* The action type.
*/
type: ActionType;
/**
* The action arguments.
*/
args?: Arguments;
};
/**
* Represents the definition of an action.
*/
export declare class ActionDefinition {
readonly func: Func;
readonly body?: string | undefined;
readonly params: ActionParameters;
/**
* Creates a new instance of the ActionDefinition class.
* @param func the function of an action.
* @param body the source code of the Action.
* @param params the parameters of the Action.
*/
constructor(func: Func, body?: string | undefined, params?: ActionParameters);
/**
* Creates an action from the function.
* @param func the function of an action.
* @param params the parameters of the Action.
* @returns the new instance of the ActionDefinition class.
*/
static functionalAction(func: Func, params?: ActionParameters): ActionDefinition;
/**
* Creates an action from the source code.
* @param body the source code of the Action.
* @param params the parameters of the Action.
* @returns the new instance of the ActionDefinition class.
*/
static sourceAction(body: string, params?: ActionParameters): ActionDefinition;
/**
* Correctly creates the {@link ActionDefinition} from deserialized data.
* @param value the deserialized data.
* @returns the ActionDefinition instance.
*/
static createFromObject(value: any): ActionDefinition;
}
/**
* Arguments passed to the event handler.
*/
export declare class ActionEventArgs {
#private;
readonly type: string;
readonly sender: ComponentData;
readonly store: Store;
readonly args: any[];
readonly renderedProps: Record<string, any>;
readonly cellInfo?: CellInfo | undefined;
/**
* The index of the component in the array, if the component is in the array.
*/
readonly index?: number;
/**
* The user-defined context passed from the form viewer props.
*/
readonly userContext?: unknown;
/**
* The ref value, if available.
*/
readonly refValue?: any;
/**
* Creates arguments for the event handler.
* @param type the event type.
* @param sender the component that triggered the event.
* @param store the form viewer settings.
* @param args the event arguments.
* @param renderedProps the component properties that were used to render the sender component.
* @param cellInfo the information about the current table cell.
*/
constructor(type: string, sender: ComponentData, store: Store, args: any[], renderedProps: Record<string, any>, cellInfo?: CellInfo | undefined);
/**
* @returns user-defined properties for the React component that override other properties of the component.
*/
get userDefinedProps(): Record<string, any>;
/**
* Sets user-defined properties for the React component that override other properties of the component.
* @param props the component properties.
*/
setUserDefinedProps: (props?: Record<string, any>) => void;
/**
* @returns the event handled by the event handler.
*/
get event(): SyntheticEvent | null;
/**
* @returns the first element of the event argument array, which is treated as a value.
*/
get value(): any;
/**
* @returns the object for reading and changing form data.
*/
get data(): Record<string, unknown>;
/**
* @returns the object to read and modify parent data (available for array elements).
*/
get parentData(): Record<string, unknown> | undefined;
/**
* @returns the object to read and modify root form data.
*/
get rootData(): Record<string, unknown>;
}
/**
* Description of the event argument type for the code editor.
*/
export declare const ActionEventArgsDeclaration = "\n/**\n * Arguments passed to the event handler.\n */\ndeclare class ActionEventArgs {\n\n /**\n * The event type.\n */\n readonly type: string\n\n /**\n * The component that triggered the event.\n */\n readonly sender: ComponentData\n \n /**\n * The component properties that were used to render the sender component.\n */\n readonly renderedProps: Record<string, any>\n\n /**\n * The index of the component in the array, if the component is in the array.\n */\n readonly index?: number\n\n /**\n * @returns user-defined properties for the React component that override other properties of the component.\n */\n get userDefinedProps(): Record<string, any>\n\n /**\n * Sets current props of component.\n */\n readonly setUserDefinedProps: (props: Record<string, any>) => void\n\n /**\n * The form viewer settings.\n */\n readonly store: Store\n\n /**\n * The event arguments.\n */\n readonly args: any[]\n\n /**\n * @returns the event handled by the event handler.\n */\n get event(): SyntheticEvent | null\n\n /**\n * @returns the first element of the event argument array, which is treated as a value.\n */\n get value(): any\n \n /**\n * @returns the object for reading and changing form data.\n */\n get data(): Record<string, unknown>\n \n /**\n * @returns the object to read and modify parent data (available for array elements).\n */\n get parentData(): Record<string, unknown> | undefined\n\n /**\n * @returns the object to read and modify root form data.\n */\n get rootData(): Record<string, unknown>\n \n /**\n * The information about the current cell.\n */\n readonly cellInfo?: CellInfo\n\n /**\n * The user-defined context passed from the form viewer props.\n */\n readonly userContext?: unknown\n\n /**\n * The ref value, if available.\n */\n readonly refValue?: any\n}\n";
/**
* Event handler function type.
* @param e the action arguments.
* @param args the action parameters.
*/
export declare type ActionEventHandler = (e: ActionEventArgs, args?: Record<string, any>) => void | Promise<void>;
/**
* Action function type.
* @param e the action arguments.
* @param params the action parameters arguments.
* @template T the type of action parameters.
*/
export declare type ActionHandler<T> = (e: ActionEventArgs, params: {
[k in keyof T]: any;
}) => void | Promise<void>;
/**
* Represents a set of action parameters.
*/
export declare type ActionParameters = Record<ParameterName, ParameterType>;
/**
* The type of function that initializes an actions on a component. **Internal use only.**
* @param props the component's property settings.
* @param def the helper to create an action event handler.
* @returns the Record with action event handlers.
*/
export declare type ActionsInitializer = (props: ComponentStore['props'], def: DefineActionHelper) => Record<EventName, ActionEventHandler | ActionDefinition>;
/**
* Action type.
*/
export declare type ActionType = 'common' | 'code' | 'custom';
/**
* Represents a set of action definitions.
*/
export declare type ActionValues = Record<string, ActionDefinition>;
/**
* Basic metadata class for a React component property for the form builder.
*/
export declare class Annotation {
/**
* The component property key.
*/
readonly key: string;
/**
* The component property name.
*/
readonly name: string;
/**
* The name of the component's property editor.
*/
readonly editor: EditorType;
/**
* The hint for the component property.
*/
readonly hint?: ReactNode;
/**
* True if the property value can be localized, false otherwise.
*/
readonly localizable: boolean;
/**
* True if the property value is bound to form data, false otherwise.
*/
readonly valued: boolean;
/**
* The type of component data binding.
*/
readonly dataBindingType: DataBindingType;
/**
* True if the property value controls a read-only flag, false otherwise.
*/
readonly readOnly: boolean;
/**
* True if the property value controls a disabled flag, false otherwise.
*/
readonly disabled: boolean;
/**
* True if the property value controls a required flag, false otherwise.
*/
readonly controlsRequiredProp: boolean;
/**
* Additional properties for the component property editor.
*/
readonly editorProps?: any;
/**
* The default property value.
*/
readonly default?: any;
/**
* The property value for the uncontrolled state.
*/
readonly uncontrolledValue?: unknown;
/**
* The data type for the value of the property.
*/
readonly type?: SchemaType;
/**
* True if the component property is required, false otherwise.
*/
readonly required: boolean;
/**
* The function for validating the property value.
*/
readonly validator?: RuleValidator;
/**
* Message and/or error code for the validation function.
*/
readonly errorMap?: ErrorMap;
/**
* True if the property value can be a calculated property, false otherwise.
*/
readonly calculable: boolean;
/**
* A function that returns a string containing the source code of the function to bind child components.
* @param props the properties of the component, which are available only inside Form Builder Designer.
*/
readonly slotConditionBuilder?: (props: any) => string;
/**
* The component property binding type.
*/
readonly bindingType?: ComponentPropertyBindType;
/**
* Creates metadata for a React component property.
* @param key the property name.
* @param name the human-readable property name.
*/
constructor(key: string, name: string);
/**
* @returns the metadata clone.
*/
clone(): any;
}
/**
* The builder class to define the metadata property of the form builder component.
* @template T the property type.
*/
export declare class AnnotationBuilder<T> extends BaseBuilder<T> {
/**
* Creates a component property metadata builder.
* @param editor the property editor type.
* @template T the property type.
*/
constructor(editor: EditorType);
/**
* Creates a component property metadata builder.
* @param editor the property editor type.
* @template T the property type.
* @returns the component property metadata builder.
*/
static create: <T_1>(editor: EditorType) => AnnotationBuilder<T_1>;
/**
* Sets the property as a "array" property.
* @returns the instance of the metadata property builder.
*/
get array(): ArrayBuilder<T[] | undefined>;
/**
* Sets the field type for the component property.
* @param type the field type.
* @returns the instance of the metadata property builder.
*/
typed<T extends SchemaType>(type: T): TypedBuilder<SchemaTypeMap[T] | undefined>;
/**
* Sets the property as a "single select" property.
* @param values the possible values for the property.
* @returns the instance of the metadata property builder.
*/
oneOf<U extends string | number>(...values: U[]): OneOfBuilder<U>;
/**
* Sets the property as a "multiple select" property.
* @param values the possible values for the property.
* @returns the instance of the metadata property builder.
*/
someOf<U extends string | number>(...values: U[]): SomeOfBuilder<U>;
}
/**
* The type-safe description of the component's metadata property builders.
* @template T the component property name type.
*/
export declare type Annotations<T extends object> = {
[key in keyof T]: BaseBuilder<T[key]> | undefined;
};
/**
* Type of component property description in the form builder.
*/
export declare type AnnotationType = 'Property' | 'Container' | 'Event' | 'Module' | 'Style';
/**
* It will be transformed in arguments before passing in action.
*/
export declare type Arguments = Record<ParameterName, ArgumentValue>;
/**
* The type of the argument value of the function.
*/
export declare type ArgumentValue = PrimitiveArgumentValue | FunctionArgumentValue;
/**
* The record with 'aria' attributes.
*/
export declare type AriaAttributesIds = Record<keyof Pick<AriaAttributes, 'aria-labelledby' | 'aria-errormessage'>, string>;
/**
* Represents the options for ARIA attributes configurations.
*/
export declare type AriaAttributesOptions = {
/**
* Indicates whether an item, element, or entity is marked or tagged with a label.
*/
labeled: boolean;
};
/**
* The annotation builder for a component property with type 'Array'.
*/
export declare const array: ArrayBuilder<unknown[] | undefined>;
/**
* The builder class to define the metadata property of the form builder component.
* Used for properties where the property value is an array.
* @template T the property type.
*/
export declare class ArrayBuilder<T> extends TypedBuilder<T> {
subType?: SchemaType;
/**
* Sets the component's value type to an array of strings.
* @returns the modified instance of the builder.
*/
get ofString(): ArrayBuilder<string[] | undefined>;
/**
* Sets the component's value type to an array of objects.
* @returns the modified instance of the builder.
*/
get ofObject(): ArrayBuilder<object[] | undefined>;
}
/**
* Asynchronous function constructor.
*/
export declare const AsyncFunction: Function;
/**
* The base builder class to define the metadata property of the form builder component.
* @template T the property type.
*/
export declare class BaseBuilder<T> {
/**
* Partial metadata for a component property.
*/
annotation: PreAnnotation;
/**
* Options for building an annotation.
*/
options: BuilderOptions;
/**
* @returns the main component property that is used as form data and for validation rules.
*/
get valued(): this;
/**
* @returns the main property of the component that uses the form data as data (one-way data binding).
*/
get dataBound(): this;
/**
* Sets the value for the property that prevents uncontrolled state.
* @param uncontrolledValue the value for the uncontrolled state.
* @returns the modified instance of the builder.
*/
uncontrolledValue(uncontrolledValue: unknown): this;
/**
* @returns the component property that can be localized.
*/
get localize(): this;
/**
* @returns the non-localizable component property.
*/
get notLocalize(): this;
/**
* Specifies the name of the component property.
* @param name the property name.
* @returns the modified instance of the builder.
*/
named(name: string): this;
/**
* Adds the hint to the property name of the component.
* @param hint the hint.
* @returns the modified instance of the builder.
*/
hinted(hint: ReactNode): this;
/**
* Marks the component property as calculable.
* @param calculable true if the property is calculable.
* @returns the modified instance of the builder.
*/
calculable(calculable: boolean): this;
/**
* Modifies the component property metadata builder with custom options.
* @param options the custom options.
* @returns the modified instance of the builder.
*/
setup(options: BuilderSetup): this;
/**
* Clones the instance of the builder.
* @returns the cloned instance of the builder.
*/
clone(): this;
/**
* Creates component property metadata for the form builder.
* @param key the unique key of the component property.
* @returns the instance of the component property metadata for the form builder.
*/
build(key: string): Annotation;
/**
* Sets custom properties for the component's property editor.
* @param props the custom properties
* @returns the modified instance of the builder.
*/
withEditorProps(props: any): this;
/**
* Hides the component property editor.
* @returns the modified instance of the builder.
*/
hideEditor(): this;
/**
* Returns the annotation name.
* @param key the property name
* @returns the annotation name.
*/
protected getName(key: string): string;
}
/**
* The result of compiling of anything. **Internal use only.**
*/
export declare interface BaseCompilationResult {
/**
* Flag if true - compilation failed, false otherwise.
*/
error: boolean;
/**
* The array of compilation errors.
*/
exceptions?: Error[];
}
/**
* The enumeration of bidirectional text layout types.
*/
export declare enum BiDi {
/**
* Left to right.
*/
LTR = "ltr",
/**
* Right to left.
*/
RTL = "rtl"
}
/**
* The annotation builder for a component property with type 'boolean'.
*/
export declare const boolean: TypedBuilder<boolean | undefined>;
/**
* Value validation rules.
*/
export declare type BoundValueSchema = {
/**
* Flag, if true then automatic validation of the value works, false otherwise.
*/
autoValidate?: boolean;
/**
* The array of validation rule settings.
*/
validations?: ValidationRuleSettings[];
};
/**
* Description of the React component that connects to the form builder.
* Contains metadata for the form builder and metadata for the form viewer.
*/
export declare interface BuilderComponent {
/**
* The component metadata for the form builder.
*/
readonly meta: Meta;
/**
* The component metadata for the form viewer.
*/
readonly model: Model;
/**
* The name of the component category in the designer.
*/
readonly category?: string;
}
/**
* Form builder mode. Builder or viewer.
*/
export declare type BuilderMode = 'builder' | 'viewer';
/**
* The BuilderMode context provider.
*/
export declare const
/**
* @returns the {@link BuilderMode} builder mode value.
*/
/**
* The BuilderMode context provider.
*/
BuilderModeProvider: Provider<BuilderMode>;
/**
* Options for building an annotation.
*/
export declare class BuilderOptions {
/**
* Type of component property description in the form builder.
*/
annotationType: AnnotationType;
/**
* Flag if true, the property name will be automatically converted in the designer from a camel case string to a human-readable string.
*/
autoName: boolean;
}
/**
* The type representing custom options for the component's property metadata builder.
*/
export declare type BuilderSetup = Partial<PreAnnotation & BuilderOptions>;
/**
* Builder theme mode - either dark or light.
*/
export declare type BuilderTheme = 'dark' | 'light';
/**
* Context provider for the {@link useBuilderTheme} hook.
*/
export declare const
/**
* @returns the current {@link BuilderTheme} value.
*/
/**
* Context provider for the {@link useBuilderTheme} hook.
*/
BuilderThemeProvider: Provider<BuilderTheme>;
/**
* Represents all the metadata of the form builder components.
*/
export declare class BuilderView extends View {
#private;
/**
* The array of metadata of form builder components.
*/
builderComponents: BuilderComponent[];
/**
* The function for filtering components on the component palette.
*/
paletteFilter?: (builderComponent: BuilderComponent) => boolean;
/**
* The description of the component library in different languages.
*/
i18nDescriptions?: Array<Record<LanguageFullCode, ComponentLibraryDescription>>;
/**
* Returns the component metadata for the specified component type name.
* @param type the component type name.
* @returns the component metadata for the specified component type name.
*/
getMeta(type: string): Meta;
/**
* Adds the component metadata to the form builder.
* @param component the component metadata.
*/
addComponent(component: BuilderComponent): void;
/**
* Removes the component metadata from the form builder.
* @param name the component type name.
*/
removeComponent(name: string): void;
/**
* Returns the component metadata for the specified component type name or undefined.
* @param type the component type name.
* @returns the component metadata for the specified component type name or undefined.
*/
findMeta(type: string): Meta | undefined;
/**
* Creates metadata for the form builder for templates from the specified template names.
* @param templates the array of template names.
* @returns the instance of the {@link BuilderView} class.
*/
withTemplates(templates: string[]): this;
/**
* Sets a function for filtering components on the component palette.
* @param filter the component filtering function.
* @returns the instance of the {@link BuilderView} class.
*/
withPaletteFilter(filter: (builderComponent: BuilderComponent) => boolean): this;
/**
* Adds a description of the component library in different languages.
* @param i18nDescription the description of the component library in different languages.
* @returns the instance of the {@link BuilderView} class.
*/
withComponentLibraryDescription(i18nDescription: Record<LanguageFullCode, ComponentLibraryDescription>): this;
/**
* Creates an instance of BuilderComponent for the specified template name.
* @param name the template name
* @returns the BuilderComponent instance.
*/
static createTemplateComponent(name: string): BuilderComponent;
/**
* Creates metadata for form builder components.
* @param builderComponents the array of metadata of form builder components.
*/
constructor(builderComponents: BuilderComponent[]);
}
/**
* Creates and returns a new form JSON builder instance.
* @param options the optional configuration options for the form.
* @returns the instance of {@link IFormJsonBuilder} to start building the form.
*/
export declare function buildForm(options?: FormOptions): IFormJsonBuilder;
/**
* Calculable result.
*/
export declare class CalculableResult {
readonly error: boolean;
readonly result?: any | undefined;
readonly exceptions?: Error[] | undefined;
readonly warning?: boolean | undefined;
/**
* Constructor.
* @param error the error.
* @param result the result.
* @param exceptions the exceptions.
* @param warning the warning.
*/
constructor(error?: boolean, result?: any | undefined, exceptions?: Error[] | undefined, warning?: boolean | undefined);
/**
* Creates a new instance of the CalculableResult class with a successful result.
* @param result the calculable result.
* @returns the new instance of CalculableResult class.
*/
static success(result: any): CalculableResult;
/**
* Creates a new instance of CalculableResult class with an error.
* @param exceptions the exception array.
* @returns the new instance of CalculableResult class.
*/
static error(exceptions: Error[]): CalculableResult;
/**
* Creates a new instance of the CalculableResult class with a warning result.
* @param result the calculable result.
* @returns the new instance of CalculableResult class.
*/
static warning(result: any): CalculableResult;
}
/* Excluded from this release type: calculatePropertyValue */
/**
* Convert a string to camelCase.
* @param input the input string.
* @returns the camelCased string.
*/
export declare function camelCase(input: string): string;
/**
* The information about a cell.
*/
export declare type CellInfo = {
/**
* The data key.
*/
dataKey?: DataKeyType;
/**
* The row index.
*/
rowIndex?: number;
/**
* The row data.
*/
rowData?: Record<DataKeyType, unknown>;
};
export declare const CellInfoContextProvider: Provider<CellInfo>;
/**
* A component feature that indicates that the component is a preset.
*/
export declare const cfComponentIsPreset = "component-is-preset";
/**
* Enabling this component feature will hide the 'Actions' editors.
*/
export declare const cfDisableActionEditors = "disable-action-editors";
/**
* Enabling this component feature will hide the component's additional properties' editor.
*/
export declare const cfDisableAdditionalProperties = "disable-additional-properties";
/**
* Enabling this component feature will prevent this component from being removed.
*/
export declare const cfDisableComponentRemove = "disable-component-remove";
/**
* Enabling this component feature will hide the main component's property editors, except for the key property and additional properties.
*/
export declare const cfDisableMainComponentProperties = "disable-main-component-properties";
/**
* Enabling this component feature will hide the properties editor on the styles tab.
*/
export declare const cfDisableStyleProperties = "disable-style-properties";
/**
* Enabling this component feature will disable the styling of the component.
*/
export declare const cfDisableStyles = "disable-component-styling";
/**
* Enabling this component feature will hide the 'Styles for className' editor.
*/
export declare const cfDisableStylesForClassNameEditor = "disable-styles-for-classname-editor";
/**
* Enabling this component feature will hide the component tooltip properties editor.
*/
export declare const cfDisableTooltipProperties = "disable-tooltip-properties";
/**
* Enabling this component feature will disable the styling of the component wrapper.
*/
export declare const cfDisableWrapperStyles = "disable-component-wrapper-styling";
/**
* Enabling this component feature will show the 'Inline styles' editor.
*/
export declare const cfEnableInlineStylesEditor = "enable-inline-styles-editor";
/**
* Enabling this component feature will hide it from the component palette.
*/
export declare const cfHideFromComponentPalette = "hide-from-component-palette";
/**
* Performs the function of checking if the child component can be bound. **Internal use only.**
* @param childStore the child component settings.
* @param parentProps the parent component properties.
* @returns true, if the child component can be bound, false otherwise.
*/
export declare function checkSlotCondition(childStore: ComponentStore, parentProps: any): boolean;
/**
* The annotation builder for the component property containing the CSS class name.
*/
export declare const className: Annotation;
/**
* Creates a deep cloned copy of the provided value.
* - Preserves prototypes for objects and class instances.
* - Copies Maps, Sets, Dates, RegExps, ArrayBuffers/TypedArrays.
* - Handles circular references via an internal WeakMap.
* @param value the value to deep-clone.
* @param weakMap internal map to track circular references (do not pass in normal use).
* @returns a deep-cloned value structurally equal to the input.
*/
export declare function cloneDeep<T>(value: T, weakMap?: WeakMap<WeakKey, any>): T;
/**
* The annotation builder for a component property with type 'color' (e.g. rgba(71, 167, 122, 0.72)).
*/
export declare const color: TypedBuilder<string | undefined>;
/**
* The annotations for generic CSS properties of a component.
*/
export declare const commonStyles: {
width: AnnotationBuilder<unknown>;
height: AnnotationBuilder<unknown>;
marginTop: AnnotationBuilder<unknown>;
marginInlineEnd: AnnotationBuilder<unknown>;
marginBottom: AnnotationBuilder<unknown>;
marginInlineStart: AnnotationBuilder<unknown>;
color: AnnotationBuilder<unknown>;
backgroundColor: AnnotationBuilder<unknown>;
};
/**
* This tree of elements contains the data required to display the component. It is synchronized with the ComponentStore tree.
*/
export declare class ComponentData implements IFormData {
#private;
private _state;
/**
* The unique identifier.
*/
readonly id: string;
/**
* The component settings.
*/
readonly store: ComponentStore;
/**
* The component metadata.
*/
readonly model: Model;
/**
* The field with the form data.
*/
field?: Field;
/**
* The parent node in the component data tree.
*/
parent?: ComponentData;
/**
* The child nodes in the component data tree.
*/
children: ComponentData[];
/**
* User defined properties of the React component.
*/
userDefinedProps?: Record<string, any>;
/**
* If true, then validation is in progress.
*/
validating: boolean;
/**
* Specifies the root component for the data in the component tree. **Internal use only.**
*/
dataRootProvider?: IDataRootProvider;
/**
* Specifies the index in the array if the component is in the component array.
* This is not an index in a parent-child structure.
*/
index?: number;
/**
* The state of the component. **Internal use only.
*/
componentState: IComponentState;
/**
* The function for getting initial data. **Internal use only.**
*/
getInitialData?: () => unknown;
/**
* The function for updating initial data. **Internal use only.**
*/
setInitialData?: SetInitialDataFn;
/**
* Constructor.
* @param componentStore the component settings.
* @param model the component metadata for the form viewer.
* @param childFactory the factory function that creates {@link ComponentData} instance.
* @param getFormValidationResult the function that returns a form validation results.
*/
constructor(componentStore: ComponentStore, model: Model, childFactory: (componentStore: ComponentStore) => ComponentData, getFormValidationResult?: () => Promise<Record<string, string>[]>);
/**
* Sets the new parent for this node.
* @param newParent the new parent.
*/
setParent(newParent: ComponentData): void;
/**
* Inserts the given node after this node.
* @param inserted the node to insert.
*/
insertAfterMe(inserted: ComponentData): void;
/**
* Inserts the given node before this node.
* @param inserted the node to insert.
*/
insertBeforeMe(inserted: ComponentData): void;
/**
* @inheritDoc
*/
get state(): Record<string, unknown>;
/**
* @inheritDoc
*/
set state(state: Record<string, unknown>);
/**
* @returns the root component for the data in the component tree.
*/
get dataRoot(): ComponentData;
/**
* @returns the initial data.
*/
get initialData(): unknown;
/**
* Updates the initial data. **Internal use only.**
* @param key the initial data key.
* @param value the initial data value.
*/
updateInitialData(key: string | number, value: unknown): void;
/**
* @returns the key of this node (same as the key of the ComponentStore).
*/
get key(): string;
/**
* @returns the ComponentDataEvents object.
*/
get events(): ComponentDataEvents;
/**
* Find the node with the given key.
* @param key the key to find.
* @returns the node or undefined if not found.
*/
findByKey(key: string): ComponentData | undefined;
/**
* Assigns unique keys to the items in the tree.
* @param root the root of the tree to unify keys. Defaults to the root of this tree.
* @returns the map of new keys to old keys.
*/
unifyKeys(root: ComponentData): Map<string, string>;
/**
* Assigns unique keys to the items in the tree.
*/
unifyTree(): void;
/**
* @returns all the fields in the tree as a map. Starts from this node.
*/
get fields(): Map<string, Field>;
/**
* @returns an array of all component fields, including non-unique data keys.
*/
get allComponentFields(): ComponentField[];
/**
* @returns an array of all fields, including non-unique data keys.
*/
get allFields(): Field[];
/**
* @returns an array of all children components.
*/
get allChildren(): ComponentData[];
/**
* Deletes this node from the tree.
*/
delete(): void;
/**
* @inheritDoc
*/
get data(): Record<string, unknown>;
/**
* @returns the generated form data.
*/
generatedData(): Record<string, unknown>;
/**
* @returns the object to read and modify parent data (available for array elements).
*/
get parentData(): Record<string, unknown> | undefined;
/**
* @returns the object to read and modify root form data.
*/
get rootData(): Record<string, unknown>;
/**
* @inheritDoc
*/
get errors(): Record<string, unknown>;
/**
* @inheritDoc
*/
set errors(errors: Record<string, unknown>);
/**
* @inheritDoc
*/
get hasErrors(): boolean;
/**
* @inheritDoc
*/
setAllErrors(message?: string): void;
/**
* @inheritDoc
*/
validate(): Promise<ValidationMessages>;
/**
* @inheritDoc
*/
getValidationResult(): Promise<undefined>;
/**
* @inheritDoc
*/
get isValidating(): boolean;
/**
* @inheritDoc
*/
reset(clearInitialData?: boolean): void;
/**
* @inheritDoc
*/
clear(clearInitialData?: boolean): void;
/**
* Dispose method that releases resources used by the object.
* It disposes the field and all the children objects.
*/
dispose(): void;
/**
* @returns true if it has no parent {@link ComponentData}, false otherwise.
*/
get isRoot(): boolean;
/**
* @returns the root of the component tree.
*/
get root(): ComponentData;
/**
* @returns the index in the array if the component is in the component array
* (looks for the nearest index in the component hierarchy).
*/
get nearestIndex(): number | undefined;
private validateForm;
private insert;
/**
* Disposes the nodes by calling the disposers, disposing the field,
* and resetting the parent and children properties to undefined and an empty array, respectively.
* @param nodes the array of ComponentData objects representing the nodes to dispose.
*/
private disposeNodes;
private collectAllNodesAsArray;
private collectAllFields;
private collectAllChildren;
private addChild;
private removeChild;
private invokeOnAfterKeyChanged;
private invokeOnBeforeDeleted;
private clearInitialData;
}
/**
* Represents a class that holds events related to component data.
*/
export declare class ComponentDataEvents {
/**
* An event that occurs after a component key change.
*/
readonly onAfterKeyChanged: SyncEvent<ComponentData, ComponentKeyChangedEventArgs>;
/**
* An event that occurs before a component is removed from the component tree.
*/
readonly onBeforeDelete: SyncEvent<ComponentData, undefined>;
/**
* Unsubscribe from all events.
*/
dispose(): void;
}
/**
* Context provider for the useComponentData hook. **Internal use only.**
*/
export declare const
/**
* @returns the instance of the ComponentData of the currently rendered component.
*/
/**
* Context provider for the useComponentData hook. **Internal use only.**
*/
ComponentDataProvider: Provider<ComponentData>;
/**
* The description of a component.
*/
export declare type ComponentDescription = I18nItem & {
/**
* The properties of the component.
*/
props?: Record<string, I18nItem>;
};
/**
* Styles for a device.
*/
export declare type ComponentDeviceStyle = {
/**
* The CSS string.
*/
string?: string;
};
/**
* A component feature defining a component's characteristic.
*/
export declare type ComponentFeature = {
/**
* The component feature name.
*/
name: string;
/**
* Flag, if true the feature can contain multiple values, false otherwise.
*/
allowMultiple: boolean;
};
/**
* The component features.
*/
export declare type ComponentFeatures = Record<string, unknown>;
/**
* Describes the field of the component.
*/
export declare interface ComponentField {
/**
* The component data key.
*/
dataKey: string;
/**
* The component field.
*/
field: Field;
}
/**
* The component key.
*/
export declare type ComponentKey = string;
/**
* Represents the event argument for the event when the component key changes.
*/
export declare class ComponentKeyChangedEventArgs {
readonly oldKey: string;
readonly newKey: string;
/**
* Constructs a new instance of the ComponentKeyChangedEventArgs class.
* @param oldKey the old key.
* @param newKey the new key.
*/
constructor(oldKey: string, newKey: string);
}
/**
* The component kind type.
*/
export declare type ComponentKind = 'container' | 'component' | 'template' | 'repeater';
/**
* A component library description.
*/
export declare type ComponentLibraryDescription = {
/**
* A record mapping category names to their descriptions.
*/
categories?: Record<string, I18nItem>;
/**
* A record mapping component names to their descriptions.
*/
components?: Record<string, ComponentDescription>;
/**
* A record mapping common component properties to their descriptions.
*/
commonProperties?: Record<string, I18nItem>;
};
/**
* The function to localize the properties of a component.
* @param componentStore the component settings.
* @param language the language selected in the form viewer.
* @returns the Record with the localized properties of a component.
*/
export declare type ComponentLocalizer = (componentStore: ComponentStore, language: Language) => Record<string, any>;
/**
* Component metadata event listeners.
*/
export declare interface ComponentMetadataEventListeners {
/**
* The callback function that is called when the component is selected.
* @param node the selected component data.
* @param self the component data.
*/
onSelectNode?: (node: ComponentData, self: ComponentData) => void;
/**
* The callback function that is called when a component is created and added to a form.
* @param node the created component data.
* @param store the form viewer settings.
*/
onCreateNode?: (node: ComponentData, store: IStore) => void;
}
/**
* The component properties context type.
*/
export declare type ComponentPropertiesContext = {
/**
* The event handlers.
*/
readonly eventHandlers?: Record<EventName, ActionEventHandler>;
/**
* The value property.
*/
readonly valueProperty?: ReactProperty;
/**
* The information about the cell.
*/
readonly cellInfo?: CellInfo;
};
/**
* The value of the component property.
* @template T the value type.
*/
export declare interface ComponentProperty<T = any> {
/**
* The simple value of a component property.
*/
value?: T;
/**
* Source code of the function for calculating the value of a component property.
*/
fnSource?: string;
/**
* Type of the component's calculated property. If not specified - the value from value is used.
*/
computeType?: ComponentPropertyComputeType;
/**
* The component property editor type, only used in Designer mode.
*/
editorType?: string;
}
/**
* The component property binding type.
*/
export declare type ComponentPropertyBindType = 'single' | 'array';
/**
* The component property value type.
*/
export declare type ComponentPropertyComputeType = 'function' | 'localization';
/**
* The component property name.
*/
export declare type ComponentPropertyName = string;
/**
* A record containing localizations for the component properties.
*/
export declare type ComponentPropsLocalization = Record<ComponentPropertyName, unknown>;
/**
* The role of a component, such as a label, tooltip, etc.
*/
export declare type ComponentRole = 'label' | 'tooltip' | 'error-message' | 'modal' | string;
/**
* A record containing localizations grouped by component key.
*/
export declare type ComponentsLocalization = Record<ComponentKey, TypedLocalization>;
/**
* Calculates all the properties of the form view component.
*/
export declare class ComponentState implements IComponentState {
#private;
readonly data: ComponentData;
readonly store: Store;
readonly localizer: ComponentStoreLocalizer;
readonly computeChildren: ComputeChildren;
/**
* The context for working with component properties.
*/
readonly context: ComponentPropertiesContext;
/**
* Creates an instance that calculates the properties of the form viewer component.
* @param data the data needed to display the component.
* @param store the form viewer settings.
* @param localizer the function to localize the properties of a component, returns a Record with localized properties.
* @param computeChildren the function that calculates all child properties of a component.
* @param context the context for working with component properties.
*/
constructor(data: ComponentData, store: Store, localizer: ComponentStoreLocalizer, computeChildren: ComputeChildren, context?: ComponentPropertiesContext);
/**
* @inheritDoc
*/
get get(): Record<string, any>;
/**
* @inheritDoc
*/
get ownProps(): {
className: string;
};
/**
* @inheritDoc
*/
get propsWithoutChildren(): Record<string, any>;
/**
* @returns the component's field value data, if the component can have a field value.
*/
get value(): {
[x: string]: unknown;
} | undefined;
/**
* @returns the read-only property of a component if the component has a read-only flag.
*/
get readOnly(): {
[x: string]: any;
} | undefined;
/**
* @returns the required property of a component if the component has a required flag.
*/
get required(): Record<string, boolean> | undefined;
/**
* @inheritDoc
*/
get isReadOnly(): any;
/**
* @returns the disabled property of a component if the component has a disabled flag.
*/
get disabled(): {
[x: string]: any;
} | undefined;
/**
* @inheritDoc
*/
get isDisabled(): any;
/**
* @returns the values for all properties of the component, calculates the values of the calculated properties.
*/
get calculatedProps(): Record<string, any>;
/**
* @returns component localized properties.
*/
get localizedProps(): Record<string, any>;
/**
* @returns the component event handlers that send events to the event bus.
*/
get events(): Record<string, (...args: unknown[]) => Promise<void>>;
/**
* Calculates and returns className property.
* @returns the Record that contains the className property for the component.
*/
get className(): string;
/**
* @inheritDoc
*/
get wrapperClassName(): string;
/**
* @returns the Record that contains the style property for the component.
*/
get style(): {
style: any;
} | undefined;
/**
* @inheritDoc
*/
get wrapperStyle(): {
style: any;
} | undefined;
/**
* @returns all arbitrary HTML attributes of the component.
*/
get htmlAttributes(): HtmlAttribute | undefined;
/**
* Calculates and returns all child components.
* @param props the React component properties.
* @returns the Record that contains the child components of a component.
*/
children(props: any): Record<string, any>;
/**
* @inheritDoc
*/
onDidMount(): void;
/**
* @inheritDoc
*/
onWillUnmount(): void;
/**
* @inheritDoc
*/
applyStyles(cssPart: CssPart, flatCss: string): void;
private applyAllStyles;
/**
* Clears component styles.
*/
private cleanStyles;
/**
* @inheritDoc
*/
setRef: (object: any) => void;
/**
* @inheritDoc
*/
getRefValue: () => any;
private executeLifecycleEvent;
private getStyleFromStylePart;
/**
* @inheritDoc
*/
get flatCss(): string;
/**
* @inheritDoc
*/
get flatWrapperCss(): string;
private computeFlatCssForPart;
private updateAdoptedStyleSheets;
private get selfProps();
private get hasRequiredValidation();
private get requiredClassName();
}
/**
* The component state factory that calculates the properties of the form viewer component.
* @param data the data needed to display the component.
* @param store the form viewer settings.
* @param context the context for working with component properties.
* @returns the component property calculator.
*/
export declare type ComponentStateFactory = (data: ComponentData, store: Store, context?: ComponentPropertiesContext) => IComponentState;
/**
* Component settings for serialization in JSON.
*/
export declare class ComponentStore {
/**
* The React component key.
*/
key: string;
/**
* The component data key.
*/
dataKey?: string;
/**
* The component type of the form viewer.
*/
type: string;
/**
* The component properties.
*/
props: Record<string, ComponentProperty>;
/**
* The component CSS styles.
*/
css?: Css;
/**
* The component wrapper CSS styles.
*/
wrapperCss?: Css;
/**
* The component styles for the `style` attribute.
*/
style?: ComponentStyle;
/**
* The component wrapper styles for the `style` attribute.
*/
wrapperStyle?: ComponentStyle;
/**
* The set of event handlers.
*/
events?: Record<EventName, ActionData[]>;
/**
* The array of child components.
*/
children?: ComponentStore[];
/**
* The component value validation settings.
*/
schema?: BoundValueSchema;
/**
* The set of arbitrary HTML attributes added to the component.
*/
htmlAttributes?: HtmlAttribute[];
/**
* The tooltip settings.
*/
tooltipProps?: Record<string, ComponentProperty>;
/**
* The modal settings.
*/
modal?: ModalComponentStore;
/**
* The name of the occupied component property in the parent component.
*/
slot?: string;
/**
* The condition for binding a child element to a parent element.
*/
slotCondition?: string;
/**
* The expression or function to conditionally render a component.
*/
renderWhen?: ComponentProperty;
/**
* Disables data binding for the component.
*/
disableDataBinding?: ComponentProperty<boolean>;
/**
* Creates the component settings.
* @param key the React component key.
* @param type the component type of the form viewer.
*/
constructor(key: string, type: string);
/**
* Adds a validation rule to the component.
* @param store the component settings.
* @param key the validation key.
* @param type the validation type.
*/
static addValidationRule(store: ComponentStore, key: string, type?: ValidatorType): void;
/**
* Returns true if the component has a validation rule.
* @param store the component settings.
* @param key the validation key.
* @returns true if the component has a validation rule, otherwise false.
*/
static hasValidationRule(store: ComponentStore, key: string): boolean | undefined;
/**
* Removes a validation rule from the component.
* @param store the component settings.
* @param key the validation key.
*/
static removeValidationRule(store: ComponentStore, key: string): void;
/**
* Correctly creates the {@link ComponentStore} from deserialized data.
* @param value the deserialized data.
* @returns the component Store.
*/
static createFromObject(value: any): any;
/**
* Adds the event handler for component.
* @param store the target {@link ComponentStore}.
* @param eventName the target event name.
* @param data the {@link ActionData}.
*/
static addEventHandler(store: ComponentStore, eventName: string, data: ActionData): void;
/**
* Returns a clone of the specified component settings.
* @param store the component settings.
* @returns the clone of the specified component settings.
*/
static clone(store: ComponentStore): ComponentStore;
}
/**
* Represents a function that localizes components based on the supplied component store.
*/
export declare type ComponentStoreLocalizer = (componentStore: ComponentStore) => Record<string, any>;
/**
* The type for the style property of a React component.
*/
export declare type ComponentStyle = {
/**
* Styles for an arbitrary device.
*/
any?: ComponentDeviceStyle;
/**
* Styles for mobile devices.
*/
mobile?: ComponentDeviceStyle;
/**
* Styles for tablet devices.
*/
tablet?: ComponentDeviceStyle;
/**
* Styles for desktop devices.
*/
desktop?: ComponentDeviceStyle;
};
/**
* The React component that displays an array of ComponentData. **Internal use only.**
* @param props the React component properties.
* @param props.data the array of child elements of the tree.
* @param props.componentDataViewer the component displaying an item.
* @returns the React element.
*/
export declare const ComponentTree: ({ data, componentDataViewer }: ComponentTreeProps) => JSX.Element;
/**
* Properties of a form component tree element.
*/
export declare interface ComponentTreeProps {
/**
* An array of child elements of the tree.
*/
data: ComponentData[];
/**
* The component displaying an item.
*/
componentDataViewer?: ComponentType;
}
/**
* Function that calculates all child properties of a component. **Internal use only.**
* @param componentData the data required to display a component.
* @param componentProps the calculated properties of the component.
* @returns the Record with calculated child properties.
*/
export declare type ComputeChildren = (componentData: ComponentData, componentProps: Record<string, any>) => Record<string, any>;
/**
* Metadata for the component container property for the form builder.
* The Container property of a component can contain other React components.
*/
export declare class ContainerAnnotation extends Annotation {
/**
* The function that checks whether a child component can be inserted into a parent component.
*/
insertPredicate?: (self: ComponentData, child: ComponentData) => boolean;
/**
* The default editor.
*/
defaultEditor?: NodeEditorType;
/**
* Returns the node editor type for the component property.
* @param componentProperty the component property.
* @returns the node editor type for the component property.
*/
getNodeEditorType(componentProperty?: ComponentProperty): NodeEditorType;
}
/**
* The annotations for generic CSS properties of a container component.
*/
export declare const containerStyles: {
flexDirection: OneOfBuilder<"column" | "row" | "column-reverse" | "row-reverse">;
gap: TypedBuilder<string | undefined>;
alignItems: OneOfBuilder<"center" | "start" | "baseline" | "end" | "stretch">;
justifyContent: OneOfBuilder<"center" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "left" | "right">;
flexWrap: OneOfBuilder<"wrap" | "nowrap" | "wrap-reverse">;
};
export declare const coreComponentsDescriptions: Record<LanguageFullCode, ComponentLibraryDescription>;
/**
* Converts the input object to an ActionValues object. **Internal use only.**
* @param obj the input object.
* @returns the converted ActionValues object.
*/
export declare const createActionValuesFromObject: (obj: any) => ActionValues;
export declare const createAnnotation: <T>(editor: EditorType) => AnnotationBuilder<T>;
/**
* Creates non-nullable React context. **Internal use only.**
* @param name the context name.
* @param defaultValue the optional default value.
* @returns the tuple [hook, provider, and common context] for interactions with a non-nullable context.
*/
export declare function createNonNullableContext<T>(name: string, defaultValue?: T | null): [() => T, Provider<T>, Context<T | null>];
/**
* Creates an instance of the builder class to define the property's metadata.
* @param editor editor type for editing the property.
* @returns the instance of the builder class to define the property's metadata.
*/
export declare function createProperty(editor: FirstParameter<typeof createAnnotation>): AnnotationBuilder<unknown>;
export declare const createView: typeof View.create;
/**
* The type for the CSS property of a React component.
*/
export declare type Css = {
/**
* CSS styles for arbitrary device.
*/
any?: DeviceStyle;
/**
* CSS styles for mobile devices.
*/
mobile?: DeviceStyle;
/**
* CSS styles for tablet devices.
*/
tablet?: DeviceStyle;
/**
* CSS styles for desktop devices.
*/
desktop?: DeviceStyle;
};
/**
* Represents a cleanup function that can be called when unmounting.
*/
export declare type CssCleanupFunction = () => Promise<void>;
/**
* Represents a CSS loading function.
*/
export declare type CssLoaderFunction = () => Promise<void | CssCleanupFunction>;
/**
* Represents the type of CSS loader. Can be either BiDi or common for both BiDi.
*/
export declare type CssLoaderType = BiDi | 'common';
/**
* CSS rules declaration map.
*/
export declare type CSSObject = Record<string, any>;
/**
* The part of the CSS properties of a component.
*/
export declare type CssPart = 'css' | 'wrapperCss';
/**
* The annotation builder for a component property containing a CSS dimension.
*/
export declare const cssSize: AnnotationBuilder<unknown>;
/**
* Custom actions for the form viewer.
*/
export declare type CustomActions = Record<string, ActionDefinition | ActionEventHandler>;
/**
* A set of metadata of custom validation rules, grouped by rule name.
*/
export declare type CustomValidationRules = Record<string, CustomValidationRuleSettings>;
/**
* Custom validation rule settings.
*/
export declare type CustomValidationRuleSettings = {
/**
* Metadata of validation rule parameters.
*/
params?: ValidationRuleParameter[];
/**
* The function that validates the value.
*/
validate: RuleValidator;
};
/**
* The type of component data binding.
*/
export declare type DataBindingType = 'oneWay' | 'twoWay' | 'none';
/**
* The data key type.
*/
export declare type DataKeyType = string | number | symbol;
/**
* Binds all parts of the validation and performs the validation.
*/
export declare class DataValidator {
#private;
private setter;
private constructor();
/**
* Creates a DataValidator instance.
* @param store the form viewer settings.
* @param getFormData the function that returns a form data.
* @param resolver the validation function factory.
* @param args the validation function factory arguments.
* @param setter the callback function called to set a validation error.
* @param localizer the function that localizes validation error messages.
* @template T the validation function factory arguments.
* @returns the DataValidator instance.
*/
static create: <T>(store: IStore, getFormData: () => IFormData, resolver: SchemaResolver<T>, args: T, setter: Setter<string | undefined>, localizer?: ErrorMessageLocalizer) => DataValidator;
/**
* Generates an event to perform validation.
* @param value the validated value.
*/
sendValidationEvent: (value: any) => void;
/**
* Performs a validation of the value.
* @param value the validated value.
* @returns the Promise with the result of the validation.
*/
validate: (value: any) => Promise<string | undefined>;
/**
* Returns the validation results without triggering an events and changing the state of the form.
* @param value the validated value.
* @returns the validation results.
*/
getValidationResult: (value: any) => Promise<string[] | undefined>;
}
/**
* The annotation builder for a component property with type 'Date'.
*/
export declare const date: TypedBuilder<Date | undefined>;
/**
* Debounce function calls with a timeout.
* @param fn the function to debounce.
* @param wait the delay in ms.
* @returns the debounced function.
*/
export declare function debounce<T extends (...args: any[]) => any>(fn: T, wait?: number): (...args: Parameters<T>) => ReturnType<T> | void;
/**
* The React component that wraps every component in a form.
* @param props the React component properties.
* @returns the React element.
*/
export declare const DefaultWrapper: ForwardRefExoticComponent<any> | ForwardRefExoticComponent<Omit<any, "ref"> & RefAttributes<any>>;
export declare const define: typeof Definer.define;
/**
* The defineAction helper type. **Internal use only.**
* @param name the action name.
* @param func the action handler.
* @param params the definition of action parameters.
* @param description the action description.
* @template T the type of action parameter.
* @returns the definition of an action.
*/
export declare type DefineActionHelper = <T>(name: string, func: ActionHandler<T>, params?: ParameterDefinition<T>[], description?: string) => ActionDefinition;
export declare const definePreset: typeof Definer.definePreset;
/**
* The builder class to define the metadata of the form builder component.
* @template T React component property type.
*/
export declare class Definer<T extends object> {
#private;
/**
* Definer class data.
* @template T React component property type.
*/
data: DefinerData<T>;
/**
* Static method to create an instance of the component's metadata builder class.
* @param component the React component.
* @param typeName the type name for the anonymous component.
* @returns the instance of the {@link Definer} class.
*/
static define<T extends object>(component: ComponentType<T>, typeName?: string): Definer<T>;
/**
* Static method to create an instance of the preset component's metadata builder class.
* @param name the preset name.
* @param components the components of the preset.
* @returns the instance of the {@link Definer} class.
*/
static definePreset(name: string, components: ComponentStore[]): Definer<object>;
private constructor();
/**
* Sets the name of the component.
* @param name the component name.
* @returns the modified Definer class instance.
*/
name: (name: string) => Definer<T>;
/**
* Sets the kind of the component.
* @param kind the component kind.
* @returns the modified Definer class instance.
*/
kind: (kind: ComponentKind) => Definer<T>;
addFeature: (name: string, value: unknown) => Definer<T>;
/**
* Sets the icon of the component.
* @param icon the component icon or the icon name.
* @returns the modified Definer class instance.
*/
icon: (icon: ComponentType | FormBuilderComponentIconName) => Definer<T>;
/**
* Sets the category of the component.
* @param category the component category.
* @returns the modified Definer class instance.
*/
category: (category: string) => Definer<T>;
/**
* Sets the type name of the component.
* @param typeName the component type name.
* @returns the modified Definer class instance.
*/
type: (typeName: string) => this;
/**
* Sets the metadata of the component's properties.
* @param properties the metadata of the component's properties.
* @returns the modified Definer class instance.
*/
props: (properties: Annotations<T>) => Definer<T>;
/**
* Sets the component CSS metadata.
* @param css the component CSS metadata.
* @returns the modified Definer class instance.
*/
css: (css: Annotations<CSSObject>) => Definer<T>;
/**
* Sets the component wrapper CSS metadata.
* @param css the component wrapper CSS metadata.
* @returns the modified Definer class instance.
*/
wrapperCss: (css: Annotations<CSSObject>) => Definer<T>;
/**
* Adds the metadata of the component's actions. **Internal use only.**
* @param fn the function that initializes an actions on a component.
* @returns the modified Definer class instance.
*/
actions: (fn: ActionsInitializer) => Definer<T>;
/**
* @returns the component type name.
*/
getType(): string;
/**
* Sets initial component JSON.
* @param initialJson the JSON source for the component (instance of {@link ComponentStore} class serialised to JSON).
* @returns the modified Definer class instance.
*/
initialJson: (initialJson?: string) => Definer<T>;
/**
* Sets the component metadata event listeners.
* @param eventListeners the component metadata event listeners.
* @returns the modified Definer class instance.
*/
eventListeners: (eventListeners?: ComponentMetadataEventListeners) => Definer<T>;
/**
* Sets the function that restricts the insertion of a component into another component.
* @param insertRestriction the function that restricts the insertion of a component into another component.
* @returns the modified Definer class instance.
*/
insertRestriction: (insertRestriction?: InsertRestrictionFn) => Definer<T>;
/**
* Sets the role (e.g., label, tooltip, etc.) for the component.
* @param value the component role.
* @returns the modified Definer class instance.
*/
componentRole(value: ComponentRole): Definer<T>;
/**
* Hides a component from the component palette.
* @param value true to hide the component, false otherwise.
* @returns the modified Definer class instance.
*/
hideFromComponentPalette(value?: boolean): Definer<T>;
/**
* Prevent this component from being removed.
* @param value true to disable removal, false otherwise.
* @returns the modified Definer class instance.
*/
disableRemove(value?: boolean): Definer<T>;
/**
* Disables the styling of the component.
* @param value true to disable the styling of the component.
* @returns the modified Definer class instance.
*/
withoutStyles(value?: boolean): Definer<T>;
/**
* Disables the styling of the component wrapper.
* @param value true to disable the styling of the component wrapper.
* @returns the modified Definer class instance.
*/
withoutWrapperStyles(value?: boolean): Definer<T>;
/**
* Show or hide 'Styles for className' editor.
* @param value if the value is `true` or `undefined`, the editor will be displayed.
* @returns the modified Definer class instance.
*/
showClassNameStylesEditor(value: boolean): Definer<T>;
/**
* Show or hide 'Inline styles' properties editor.
* @param value if the value is `true` or `undefined`, the editor will be displayed.
* @returns the modified Definer class instance.
*/
showInlineStylesEditor(value: boolean): Definer<T>;
/**
* Hides child components from the field collection.
* It is used when components are dynamically added to the form, for example in the Repeater component.
* @param value true if the feature is enabled.
* @returns the modified Definer class instance.
*/
skipChildrenDuringFieldCollection(value?: boolean): Definer<T>;
/**
* Show or hide 'Tooltip' properties editor.
* @param value if the value is `false` or `undefined`, the editor will be displayed.
* @returns the modified Definer class instance.
*/
hideTooltipEditor(value?: boolean): Definer<T>;
/**
* Overrides event handlers (for example, onChange, onBlur) that are added to the component.
* @param eventHandlers the custom event handlers.
* @returns the modified instance of the builder.
*/
overrideEventHandlers(eventHandlers: Record<EventName, ActionEventHandler>): Definer<T>;
/**
* Hides or shows the 'Actions' editors.
* @param value if the value is true, the editors will be hidden.
* @returns the modified Definer class instance.
*/
hideActionEditors(value?: boolean): Definer<T>;
/**
* Creates component metadata for the form builder and form viewer.
* @returns component metadata for the form builder and form viewer.
*/
build(): BuilderComponent;
}
/**
* Definer class data.
* @template T React component property type.
*/
export declare type DefinerData<T extends object> = {
/**
* The React component.
*/
readonly component: ComponentType<T>;
/**
* The component name.
*/
name?: string;
/**
* The component type name.
*/
typeName?: string;
/**
* The component kind.
*/
kind?: ComponentKind;
/**
* The set of component features.
*/
features?: ComponentFeatures;
/**
* The component category.
*/
category?: string;
/**
* The component CSS metadata.
*/
cssObject?: Annotations<CSSObject>;
/**
* The wrapper CSS metadata.
*/
wrapperCssObject?: Annotations<CSSObject>;
/**
* The component icon or the icon name.
*/
icon?: ComponentType | string;
/**
* The function that initializes an actions on a component (for internal use only).
*/
readonly actionsInitializer?: ActionsInitializer;
/**
* The property metadata.
*/
properties?: Annotations<T>;
/**
* The JSON source for the component (instance of {@link ComponentStore} class serialised to JSON).
*/
initialJson?: string;
/**
* The component metadata event listeners.
*/
eventListeners?: ComponentMetadataEventListeners;
/**
* The function that restricts the insertion of a component into another component.
*/
insertRestriction?: InsertRestrictionFn;
};
/**
* Represents the target device for applying styles.
*/
export declare type Device = 'any' | 'desktop' | 'mobile' | 'tablet';
/**
* CSS styles for a device.
*/
export declare type DeviceStyle = {
/**
* CSS styles defined in the general style settings.
*/
object?: any;
/**
* CSS styles defined in the style code editor.
*/
string?: string;
};
/**
* The DidMountEvent event name.
*/
export declare const DidMountEvent = "onDidMount";
/**
* Annotation builder for a disabled property of a component with type 'boolean'.
*/
export declare const disabled: TypedBuilder<boolean | undefined>;
/**
* A type that denotes the name of the property editor.
*/
export declare type EditorType = string;
export declare const embeddedFormMeta: Meta;
export declare const embeddedFormModel: Model<EmbeddedFormProps>;
/**
* The embedded form component properties.
*/
export declare interface EmbeddedFormProps {
/**
* If false, nested form data show as nested object, true otherwise.
*/
storeDataInParentForm?: boolean;
/**
* The form name ({@link FormViewerProps.formName}).
*/
formName?: string;
/**
* The additional options for loading the embedded form ({@link FormViewerProps.formOptions}).
*/
options?: any;
/**
* If true, the embedded form is disabled.
*/
disabled?: boolean;
/**
* If true, the embedded form is read-only.
*/
readOnly?: boolean;
}
/**
* The empty component settings object. **Internal use only.**
*/
export declare const emptyComponentStore: ComponentStore;
/**
* The result of validating a component property in the form builder.
*/
export declare type ErrorMap = {
/**
* The validation code.
*/
code?: string;
/**
* The validation message.
*/
message?: string;
};
/**
* A function that localizes validation error messages.
* @param value the results of the validation.
* @returns the localization result or undefined.
*/
export declare type ErrorMessageLocalizer = (value: ValidationResult[] | undefined) => string[] | undefined;
/**
* The component metadata for error message. **Internal use only.**
*/
export declare const errorMessageModel: Model<ErrorWrapperProps>;
/**
* Properties of the React component that wraps the form view component and displays validation errors.
*/
export declare interface ErrorWrapperProps {
/**
* The error text.
*/
error?: string;
/**
* The wrapped component.
*/
children?: ReactNode;
/**
* The CSS class name.
*/
className?: string;
}
/**
* The annotation builder for a component property with type 'event' (or event handler, or just a function).
*/
declare const event_2: AnnotationBuilder<EventHandler>;
export { event_2 as event }
/**
* Metadata for the component event property for the form builder.
*/
export declare class EventAnnotation extends Annotation {
}
/**
* The event handler function.
*/
export declare type EventHandler = (...args: unknown[]) => unknown;
/**
* The type for the event name.
*/
export declare type EventName = string;
/**
* Field with the form data.
*/
export declare interface Field {
/**
* The field type.
*/
fieldType: FieldType;
/**
* Flag, false if nested form data show as nested object, true otherwise.
*/
storeDataInParentForm?: boolean;
/**
* Contains a field validation error if the field data is not valid.
*/
error?: string;
/**
* Sets the error value.
* @param error The error value to be set.
*/
setError: (error: unknown) => void;
/**
* Contains a field validation errors if the field provides multiple errors (i.e. field is template).
* Contains an array of field validation errors if the field contains an array of components.
*/
errors?: Record<string, unknown> | Array<Record<string, unknown>>;
/**
* Flag, true, if the field is marked as touched.
*/
touched: boolean;
/**
* Value of the field.
*/
value: unknown;
/**
* The name of the component property that contains the field value.
*/
valued: string;
/**
* Sets the value of the field.
* @param value the value.
*/
setValue: (value: unknown) => void;
/**
* Marks the field as touched.
*/
setTouched: () => void;
/**
* Validates the field value.
*/
validate: () => Promise<void>;
/**
* Returns the validation results without triggering an events and changing the state of the form.
* @returns the {@link ValidationMessages} validation results.
*/
getValidationResult: () => Promise<ValidationMessages | ValidationMessages[]>;
/**
* Sets the field to its default value.
*/
reset: () => void;
/**
* Clears the data in the field.
*/
clear: () => void;
/**
* Releases allocated resources, must be used when destroying an object instance.
*/
dispose: () => void;
/**
* Initializes the value of the field.
*/
init: () => void;
}
/**
* The field type.
*/
export declare type FieldType = 'simple' | 'template' | 'repeater';
/**
* Finds {@link Language} by language code.
* @param languages the array of languages to look in.
* @param language the language code.
* @returns found {@link Language}, or the default Language if no Language exists for the language code.
*/
export declare function findLanguage(languages: Array<Language>, language: LanguageFullCode): Language | undefined;
/**
* Finds the depth of a given element in a tree. **Internal use only.**
* @param value the root of the tree.
* @param element the element to find the depth of.
* @param depth the current depth of the tree (optional, default is 0).
* @returns the depth of the element in the tree, or undefined if the element is not found.
*/
export declare function findTreeElementDepth<T extends {
children?: T[];
}>(value: T, element?: T, depth?: number): number | undefined;
/**
* The generic type that returns the first parameter of the generic type T. **Internal use only.**
*/
export declare type FirstParameter<T extends (...args: any) => any> = Parameters<T>[0];
/**
* Fluent.js implementation of {@link ILocalizationEngine}.
*/
export declare class FluentLocalizationEngine implements ILocalizationEngine {
#private;
/**
* Constructor.
* @param locale the language full code, i.e. 'en-US'.
*/
constructor(locale?: LanguageFullCode);
/**
* @inheritDoc
*/
set language(locale: LanguageFullCode);
/**
* @inheritDoc
*/
get language(): LanguageFullCode;
/**
* @inheritDoc
*/
addMessages(locale: LanguageFullCode, messages: Record<string, unknown>): Array<LocalizationError>;
/**
* @inheritDoc
*/
localizeProperties(form: IForm, formData: IFormData, language: Language, componentStore: ComponentStore, type?: LocalizationType): Record<string, unknown>;
/**
* @inheritDoc
*/
getCompatibleId(rawId: string): string;
/**
* @inheritDoc
*/
localizeErrorMessage(form: IForm, formData: ComponentData, language: Language, componentStore: ComponentStore, ruleKey: string): string | undefined;
/**
* @inheritDoc
*/
testLocalization(localization: string, localizationStringId: string, language: Language, formData: IFormData): string | LocalizationError[];
}
/**
* The annotation builder for a component property with type 'function'.
* @param fnDescriptionBegin the beginning of function description.
* @param fnDescriptionEnd the ending of function description.
* @returns the annotation builder for a component property with type 'function'.
* @example
* ```ts
* // Example usage with TSDoc-style function description:
* fn(
* `/**
* * @param {string} value
* * @param {ItemDataType} item
* * @return {boolean}
* *\/
* function filterBy(value, item) {`
* )
* ```
* This will create a function property with proper type hints and documentation
* that describes a filter function taking a string and an item, returning a boolean.
*/
export declare const fn: (fnDescriptionBegin: string, fnDescriptionEnd?: string) => TypedBuilder<string | undefined>;
/**
* Represents a form that is rendered in Viewer or edited in Builder.
*/
export declare class Form implements IForm {
/**
* Root component of the form.
*/
readonly componentTree: ComponentData;
/**
* @inheritDoc
*/
readonly localization: LocalizationStore;
/**
* Localization languages of the form.
*/
readonly languages: Language[];
/**
* The set of action definitions.
*/
readonly actions: ActionValues;
/**
* Properties of the component displaying the error.
*/
errorProps: any;
/**
* The type name of the component displaying the tooltip.
*/
tooltipType?: string;
/**
* The type name of the component displaying the error.
*/
errorType?: string;
/**
* The type name of the component displaying the modal.
*/
modalType?: string;
/**
* @inheritDoc
*/
defaultLanguage: Language;
/**
* The form validator.
*/
formValidator?: string;
/**
* Creates a new instance of Form.
* @param componentTree the root component of the form.
* @param localization the localization of the form.
* @param actions the form custom actions.
* @param languages the localization languages of the form.
* @param defaultLanguage the default localization language of the form.
*/
constructor(componentTree: ComponentData, localization: LocalizationStore, actions: ActionValues, languages: Language[], defaultLanguage: Language);
/**
* @returns the actions names array.
*/
get actionNames(): string[];
/**
* @returns the form validator function.
*/
get formValidatorFunction(): FormValidator | undefined;
/**
* Initializes form fields.
*/
initFields(): void;
/**
* Disposes the form. Disposes all the components and localization.
*/
dispose(): void;
/**
* Removes the action from the form.
* @param name the action name to remove.
*/
removeAction(name: string): void;
/**
* Changes the existing action to the new one, adds the action if the existing action is not found.
* @param oldActionName the existing action name.
* @param newAction the new named action.
*/
updateOrAddAction(oldActionName: string, newAction: NamedActionDefinition): void;
/**
* Clones the action.
* @param namedAction the named action to clone.
*/
cloneAction(namedAction: NamedActionDefinition): void;
private rebindActionData;
private rebindEvents;
private rebindActionHandlers;
private removeEvents;
private removeCodeActionBinding;
private onComponentDataBeforeDelete;
private onComponentDataAfterKeyChanged;
}
/**
* The name of the icon for a form builder component.
*/
export declare type FormBuilderComponentIconName = typeof iconsList[number];
/**
* Options for configuring the form behavior.
*/
export declare type FormOptions = {
/**
* The type of component that displays validation errors.
*/
errorType?: string;
/**
* The default form language.
*/
defaultLanguage?: string;
};
/**
* Represents a function that validate the form data.
* @param data the form data.
* @returns the Record with form field errors.
*/
export declare type FormValidator = (data: Record<string, unknown>) => Promise<Record<string, string> | undefined>;
/**
* Represents an array of functions that validate the form data.
*/
export declare type FormValidators = FormValidator[];
export declare const FormViewer: (props: FormViewerProps) => JSX.Element;
export declare const FormViewerLite: (props: FormViewerProps) => JSX.Element;
/**
* Form viewer React component properties.
*/
export declare interface FormViewerProps {
/**
* Loads the form.
* @param name the form name.
* @param options the form options.
* @returns the string or Promise with the form.
*/
getForm?: (name?: string, options?: any) => string | Promise<string>;
/**
* The form name.
* Updating the value triggers the {@link FormViewerProps.getForm} function.
*/
formName?: string;
/**
* The form options. Used to transfer any options to the {@link FormViewerProps.getForm} function.
* Updating the value triggers the {@link FormViewerProps.getForm} function.
*/
formOptions?: any;
/**
* All the metadata of the components of the form viewer.
*/
view: IView;
/**
* Custom actions for the form viewer.
*/
actions?: CustomActions;
/**
* The set of functions that validate the form data.
*/
formValidators?: FormValidators;
/**
* The initial data of the form.
*/
initialData?: Record<string, unknown>;
/**
* The initial user-defined state for the form.
* This object is set into {@link IFormData.state} when the form is initialized, this property is reactive.
*/
initialState?: Record<string, unknown>;
/**
* The form validation errors.
*/
errors?: Record<string, unknown>;
/**
* The React component that wraps every component in a form. **Internal use only.**
*/
componentWrapper?: ComponentType<any>;
/**
* The default error wrapper used when errorType is not specified in the form.
*/
errorWrapper?: ComponentType<ErrorWrapperProps>;
/**
* Display resolution type.
*/
viewMode?: ViewMode;
/**
* The language of the form, e.g. 'en-US'.
*/
language?: LanguageFullCode;
/**
* The function to localize the properties of a component.
*/
localize?: ComponentLocalizer;
/**
* The set of metadata of validation rules, grouped by the type of value being validated.
*/
validators?: Validators;
/**
* The reference to {@link IFormViewer}.
*/
viewerRef?: ForwardedRef<IFormViewer>;
/**
* The event is called whenever a form data changes.
* @param data the {@link IFormData} with all the form data.
*/
onFormDataChange?: (data: IFormData) => void;
/**
* If true, the form is read-only.
*/
readOnly?: boolean;
/**
* If true, the form is disabled.
*/
disabled?: boolean;
/**
* If true, all validation errors will be displayed.
*/
showAllValidationErrors?: boolean;
/**
* The arbitrary context object passed to the form viewer.
* It is forwarded to custom actions as the third argument of the handler.
*/
userContext?: unknown;
/**
* The arbitrary context used internally by the form viewer.
*/
context?: any;
/**
* The localization engine used by the viewer.
*/
localizationEngine?: ILocalizationEngine;
}
/**
* Represents the props passed to the FormViewer Store. **Internal use only.**
*/
export declare class FormViewerPropsStore {
/**
* The metadata of the form viewer components.
*/
view: IView;
/**
* The initial form data.
*/
initialData: Record<string, unknown>;
/**
* The set of metadata of validation rules, grouped by the type of value being validated.
*/
validators?: Validators;
/**
* The set of functions that validate the form data.
*/
formValidators?: FormValidators;
/**
* The function to localize the properties of a component.
*/
localizer?: ComponentLocalizer;
/**
* Custom actions for the form viewer.
*/
actions?: ActionValues;
/**
* The full language code passed in the FormViewer properties, e.g. 'en-US'.
*/
propsLanguage?: LanguageFullCode;
/**
* The default error wrapper used when errorType is not specified in the form.
*/
errorWrapper?: ComponentType<ErrorWrapperProps>;
/**
* If true, the form is read-only.
*/
readOnly?: boolean;
/**
* If true, the form is disabled.
*/
disabled?: boolean;
/**
* If true, all validation errors will be displayed.
*/
showAllValidationErrors?: boolean;
/**
* The arbitrary internal context.
*/
context?: any;
/**
* The initial user-defined state.
*/
initialState: Record<string, unknown>;
/**
* The arbitrary user context passed via props.
* This value is not observable and is intended to be non-reactive.
*/
userContext?: unknown;
/**
* The localization engine provided via FormViewer props.
*/
localizationEngine?: ILocalizationEngine;
/**
* Constructs a new FormViewerPropsStore from the given FormViewerProps.
* @param formViewerProps the FormViewer props.
* @returns the FormViewerPropsStore.
*/
constructor(formViewerProps: FormViewerProps);
/**
* Applies the given FormViewerProps.
* @param formViewerProps the properties to apply.
*/
applyProps(formViewerProps: FormViewerProps): void;
/**
* Returns the clone of the FormViewerPropsStore object.
* @returns the clone of the FormViewerPropsStore object.
*/
clone(): FormViewerPropsStore;
}
/**
* Validation rules for FormViewer.
*/
export declare type FormViewerValidationRules = {
/**
* The set of custom validators.
*/
custom?: CustomValidationRules;
/**
* The set of internal validators.
*/
internal: ValidationRuleSet;
};
/**
* Represents a form viewer Wrapper component.
*/
export declare type FormViewerWrapper = ComponentType<FormViewerWrapperComponentProps>;
/**
* Represents the props for the WrapperComponent. WrapperComponent is a component that wraps the form viewer. Can be added externally.
*/
export declare interface FormViewerWrapperComponentProps {
/**
* The FormViewer language.
*/
language: Language;
/**
* The React child node.
*/
children: ReactNode;
}
/**
* Shim to be compatible with React 19.
* @param render the forward ref render function.
* @returns the React component.
*/
export declare const forwardRef: <T, P = Record<string, unknown>>(render: ForwardRefRenderFunction<T, P & {
ref: Ref<T>;
}>) => ForwardRefExoticComponent<P> | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
/**
* The type of arbitrary function that returns void or Promise<void>.
*/
export declare type Func = (...arg: any[]) => void | Promise<void>;
/**
* Function argument value type.
*/
export declare type FunctionArgumentValue = {
/**
* Argument type for function type.
*/
type: 'fn';
/**
* The source code of the function for use in design mode.
*/
body?: string;
};
/**
* Generates the template type name from the specified template name. **Internal use only.**
* @param name the template name.
* @returns the template type name.
*/
export declare function generateTemplateTypeName(name: string): string;
/**
* Generates a unique name with the specified prefix. **Internal use only.**
* @param prefix the prefix.
* @param existingNames the set of existing names to match with which uniqueness will be checked.
* @returns the generated name.
*/
export declare function generateUniqueName(prefix: string, existingNames: Set<string>): string;
/**
* Returns the {@link Record} with all child components. **Internal use only.**
* @param data the parent component's data necessary to display the component.
* @param componentTreeItem the type of React component that wraps child components.
* @param componentProps the properties of the parent component.
* @returns the {@link Record} with all child components.
*/
export declare function getChildren(data: ComponentData, componentTreeItem: ComponentType<ComponentTreeProps>, componentProps: Record<string, any>): Record<string, any>;
/**
* Extracts component properties default values from annotations . **Internal use only.**
* @param annotations the array of component annotations.
* @returns the object containing component properties default values.
*/
export declare function getDefault(annotations: Annotation[]): Readonly<Record<string, any>>;
/**
* Extracts CSS properties default values from annotations . **Internal use only.**
* @param annotations the array of component annotations.
* @returns the object with CSS properties default values.
*/
export declare function getDefaultCss(annotations: Annotation[]): Readonly<Record<string, any>>;
/**
* Replaces empty form fields with an empty string. **Internal use only.**
* @param form the form.
* @returns all form data where empty fields are filled with empty strings.
*/
export declare const getEditableFormData: (form: IFormData) => Record<string, unknown>;
/**
* Returns the initial data for the field.
*/
export declare type GetInitialDataFn = () => unknown;
/**
* Generates the random string. **Internal use only.**
* @returns the generated random string.
*/
export declare const getKey: () => string;
/**
* Extracts the template name from the specified component type name. **Internal use only.**
* @param typeName the component type name.
* @returns the template name.
*/
export declare function getTemplateName(typeName: string): string;
/**
* Retrieves the property block type for a given rule key. **Internal use only.**
* @param ruleKey the rule key.
* @returns the property block type. Validator property block types are prefixed with 'validator-'.
*/
export declare const getValidatorPropertyBlockType: (ruleKey: string) => PropertyBlockType;
/**
* The default language for the application.
*/
export declare const globalDefaultLanguage: Language;
/**
* Groups the array of values by function predicate. **Internal use only.**
* @param array the array of values.
* @param predicate the function that returns a string to group the values of the array.
* @returns the Record with grouped values.
*/
export declare function groupBy<T>(array: T[], predicate: (value: T, index: number, array: T[]) => string): Record<string, T[]>;
/**
* The arbitrary HTML attributes for the component.
*/
export declare type HtmlAttribute = Record<string, string>;
/**
* The annotation builder for the 'key' property of a component.
*/
export declare const htmlAttributes: AnnotationBuilder<unknown>;
/**
* The i18n item.
*/
export declare type I18nItem = {
/**
* The name of the item.
*/
name?: string;
/**
* The description of the item.
*/
description?: string;
};
/**
* Interface for configuring a specific component within the form.
*/
export declare interface IComponentBuilder extends IFormJsonBuilder {
/**
* Sets a property on the component.
* @param key the name of the property.
* @param value the value of the property.
* @returns the component builder for method chaining.
*/
prop(key: string, value: any): IComponentBuilder;
/**
* Sets a localized property on the component.
* @param key the name of the property.
* @param language the localized code, e.g. 'en-US'.
* @param value the localized value of the property.
* @returns the component builder for method chaining.
*/
localizedProp(key: string, language: LanguageFullCode, value: any): IComponentBuilder;
/**
* Sets a computed property on the component.
* @param key the name of the property.
* @param value the code of the function for calculating the property value.
* @returns the component builder for method chaining.
*/
computedProp(key: string, value: string): IComponentBuilder;
/**
* Starts configuring validation rules for the specified field.
* @param key the name of the validation rule.
* @returns the validation builder for defining arguments.
*/
validation(key: string): IValidationBuilder;
/**
* Starts configuring an event handler for the given event name.
* @param eventName the name of the event (e.g., "onClick", "onChange").
* @returns the event handler builder.
*/
event(eventName: string): IEventHandlerBuilder;
/**
* Applies styles to the component, optionally per device.
* @param value the style string (e.g., "color: red") or object with style properties.
* @param device the optional device-specific styling.
* @returns the component builder for method chaining.
*/
style(value: string | CSSProperties, device?: Device): IComponentBuilder;
/**
* Adds child components inside this component.
* @param childrenBuilder the function that builds the child components.
* @returns the component builder for method chaining.
*/
children(childrenBuilder: (builder: IFormJsonBuilder) => IFormJsonBuilder): IComponentBuilder;
}
/**
* The factory for creating ComponentData instances. **Internal use only.**
*/
export declare interface IComponentDataFactory {
/**
* Creates the element for the component tree. **Internal use only.**
* @param componentStore the component settings.
* @param deferFieldCalculation if true, then the calculated field must be explicitly initialized.
* @returns the element for the component tree.
*/
createComponentData(componentStore: ComponentStore, deferFieldCalculation: boolean): ComponentData;
}
/**
* Calculates all the properties of the form view component.
*/
export declare interface IComponentState {
/**
* @returns combined in order of priority component properties.
*/
get get(): Record<string, any>;
/**
* Calculates and returns wrapper className property.
* @returns the className for the wrapper of component.
*/
get wrapperClassName(): string;
/**
* @returns the Record that contains the style property for the wrapper of component.
*/
get wrapperStyle(): {
style: CSSProperties;
} | undefined;
/**
* @returns combined component properties in order of priority, excluding child components, the className property
* does not contain styles additionally defined for the component.
*/
get propsWithoutChildren(): Record<string, any>;
/**
* @returns combined in order of priority component properties without children props.
*/
get ownProps(): Record<string, any>;
/**
* The method that is called when the component is mounted.
*/
onDidMount(): void;
/**
* The method that is called when the component is unmounted.
*/
onWillUnmount(): void;
/**
* Apply styles to the document.
* @param cssPart the CSS part to apply.
* @param flatCss the flattened CSS.
*/
applyStyles(cssPart: CssPart, flatCss: string): void;
/**
* @returns the flattened CSS for the component.
*/
get flatCss(): string;
/**
* @returns the flattened CSS for the component wrapper.
*/
get flatWrapperCss(): string;
/**
* @returns true if the component is read-only, false otherwise.
*/
get isReadOnly(): boolean;
/**
* @returns true if the component is disabled, false otherwise.
*/
get isDisabled(): boolean;
/**
* Sets the object associated with this component in the viewer.
* @param object the object associated with this component in the viewer.
*/
setRef?: (object: any) => void;
/**
* @returns the object associated with this component in the viewer.
*/
getRefValue?: () => any;
}
export declare const iconsList: readonly ["Breadcrumb", "Button", "Card", "Checkbox", "CollectionEditor", "Container", "Content", "CustomBlock", "CustomControl", "DatePicker", "Default", "Dropdown", "Dropzone", "ErrorMessage", "Grid", "GridLayout", "GridView", "Image", "Input", "Label", "Link", "Footer", "Header", "Sidebar", "Menu", "Message", "NumberFormat", "PatternFormat", "ProgressCircle", "ProgressLine", "RadioGroup", "Repeater", "RichTextEditor", "Search", "Signature", "Sparks", "StaticContent", "Tab", "TextArea", "TimePicker", "Toggle", "Tooltip", "TreePicker", "Uploader"];
/**
* Provides the root component for the data in the component tree.
*/
export declare interface IDataRootProvider {
/**
* @returns the root component for the data in the component tree.
*/
get dataRoot(): ComponentData;
}
/**
* Type of disposable object.
*/
export declare type IDisposable = {
/**
* Performs the tasks necessary to release resources correctly.
*/
dispose: () => void;
};
/**
* Interface for defining event handlers for a component.
*/
export declare interface IEventHandlerBuilder extends IComponentBuilder {
/**
* Sets a common handler for the event.
* @param name the name of the common handler.
* @returns the event handler builder.
*/
commonAction(name: string): IEventHandlerBuilder;
/**
* Sets a custom handler for the event.
* @param name the name of the custom handler function.
* @returns the event handler builder.
*/
customAction(name: string): IEventHandlerBuilder;
/**
* Specifies the arguments passed to the event handler.
* @param val the arguments to pass to the handler.
* @returns the event handler builder.
*/
args(val: any): IEventHandlerBuilder;
}
/**
* A form.
*/
export declare interface IForm {
/**
* Localization of the form.
*/
readonly localization: ILocalizationStore;
/**
* Default localization language of the form.
*/
readonly defaultLanguage: Language;
}
/**
* The interface for accessing the form data.
*/
export declare interface IFormData {
/**
* @returns the Record with all the form data.
*/
get data(): Record<string, unknown>;
/**
* @returns the object to read and modify parent data (available for array elements).
*/
get parentData(): Record<string, unknown> | undefined;
/**
* @returns the object to read and modify root form data.
*/
get rootData(): Record<string, unknown>;
/**
* @returns the Record with all validation error messages.
*/
get errors(): Record<string, unknown>;
/**
* Sets the form error messages.
*/
set errors(errors: Record<string, unknown>);
/**
* true if the form contains errors, otherwise false.
*/
get hasErrors(): boolean;
/**
* @returns A user-defined key-value observable storage. Utilize it to store and share any custom data.
*/
get state(): Record<string, unknown>;
/**
* Sets state object.
*/
set state(state: Record<string, unknown>);
/**
* Sets the validation error message for all form data fields.
* @param message the validation error message.
*/
setAllErrors: (message?: string) => void;
/**
* Validates the data in the form.
* @returns the {@link ValidationMessages} validation results.
*/
validate: () => Promise<ValidationMessages>;
/**
* Returns the validation results without triggering an events and changing the state of the form.
* @returns the {@link ValidationMessages} validation results.
*/
getValidationResult: () => Promise<ValidationMessages>;
/**
* If true, then validation is in progress.
*/
get isValidating(): boolean;
/**
* Sets the form to its default value.
* @param clearInitialData if true, then also clear the initial data.
* @default true
*/
reset: (clearInitialData?: boolean) => void;
/**
* Clears the form data.
* @param clearInitialData if true, then also clear the initial data.
* @default true
*/
clear: (clearInitialData?: boolean) => void;
/**
* @returns the index in the array if the component is in the component array.
*/
index?: number;
}
/**
* Description of the form data for the code editor.
*/
export declare const IFormDataDeclaration = "declare interface IFormData {\n /**\n * @returns the {@link Record} with all the form data.\n */\n get data(): Record<string, unknown>\n\n /**\n * @returns the object to read and modify parent data (available for array elements).\n */\n get parentData(): Record<string, unknown> | undefined\n\n /**\n * @returns the object to read and modify root form data.\n */\n get rootData(): Record<string, unknown>\n\n /**\n * @returns the {@link Record} with all validation error messages.\n */\n get errors(): Record<string, unknown>\n\n /**\n * true if the form contains errors, otherwise false.\n */\n get hasErrors(): boolean\n\n /**\n * @returns A user-defined key-value observable storage. Utilize it to store and share any custom data.\n */\n get state(): Record<string, unknown>\n\n /**\n * Sets the validation error message for all form data fields.\n * @param message the validation error message.\n */\n setAllErrors(message?: string): void\n\n /**\n * Validates the data in the form.\n */\n validate(): Promise<void>\n\n /**\n * Returns the validation results without triggering an events and changing the state of the form.\n * @returns the validation results.\n */\n getValidationResult: () => Promise<ValidationMessages>\n\n /**\n * If true, then validation is in progress.\n */\n get isValidating(): boolean\n\n /**\n * Sets the form to its default value.\n * @param clearInitialData if true, then also clear the initial data. Defaults to true.\n */\n reset(clearInitialData?: boolean): void\n\n /**\n * Clears the form data.\n * @param clearInitialData if true, then also clear the initial data. Defaults to true.\n */\n clear(clearInitialData?: boolean): void\n\n /**\n * @returns the index in the array if the component is in the component array.\n */\n index?: number\n}";
/**
* Interface for building a form JSON.
*/
export declare interface IFormJsonBuilder {
/**
* Adds a component to the form.
* @param key the unique identifier of the component.
* @param type the type of the component.
* @returns the component builder for further configuration.
*/
component(key: string, type: string): IComponentBuilder;
/**
* Serializes the current state of the form into a JSON string.
* @returns JSON representation of the form.
*/
json(): string;
}
/**
* The form viewer settings interface.
*/
export declare interface IFormViewer {
/**
* @returns the {@link IFormData} with all the form data.
*/
get formData(): IFormData;
}
/**
* The form localization engine.
*/
export declare interface ILocalizationEngine {
/**
* The current language.
*/
language: LanguageFullCode;
/**
* Adds messages to the localization engine.
* @param locale the locale for the messages.
* @param messages the messages to add.
* @returns the array of any localization errors that occurred.
*/
addMessages(locale: string, messages: Record<string, unknown>): Array<LocalizationError>;
/**
* Gets a compatible ID for localization engine.
* @param rawId the raw ID to make compatible.
* @returns the compatible ID.
*/
getCompatibleId(rawId: string): string;
/**
* Localizes properties for a component.
* @param form the form containing localization data.
* @param formData the form data for variable substitution.
* @param language the target language for localization.
* @param componentStore the component store to localize.
* @param type the type of localization (default: 'component').
* @returns the object with localized property values.
*/
localizeProperties(form: IForm, formData: IFormData, language: Language, componentStore: ComponentStore, type?: LocalizationType): Record<string, any>;
/**
* Localizes error messages for validation rules.
* @param form the form containing localization data.
* @param formData the form data for variable substitution.
* @param language the target language for localization.
* @param componentStore the component store to localize.
* @param ruleKey the validation rule key.
* @returns the localized error message or undefined.
*/
localizeErrorMessage(form: IForm, formData: IFormData, language: Language, componentStore: ComponentStore, ruleKey: string): string | undefined;
/**
* Tests localization by formatting a message with given data.
* @param localization the localization string to test.
* @param localizationStringId the ID of the localization string.
* @param language the language for the test.
* @param formData the data to use for variable substitution.
* @returns the array of errors or the formatted result string.
*/
testLocalization?: (localization: string, localizationStringId: string, language: Language, formData: IFormData) => Array<LocalizationError> | string;
}
/**
* Localization of the form.
*/
export declare interface ILocalizationStore {
/**
* The localization value object.
*/
readonly value: LocalizationValue;
/**
* The localization engine.
*/
readonly engine: ILocalizationEngine;
/**
* Returns the localization value for the given language, component, property and type.
* @param languageFullCode the full code (en-US, en-GB etc.) of the language.
* @param componentKey the component key.
* @param propertyName the component property name.
* @param type the localization type.
* @returns the localization value.
*/
getLocalization(languageFullCode: LanguageFullCode, componentKey: string, propertyName: string, type: LocalizationType): unknown;
/**
* Sets localization for a component property.
* @param languageFullCode the full code (en-US, en-GB etc.) of the language.
* @param componentKey the component key.
* @param propertyName the component property name.
* @param type the localization type.
* @param value the localization value.
*/
setLocalization(languageFullCode: LanguageFullCode, componentKey: string, propertyName: string, type: LocalizationType, value: unknown): void;
/**
* Removes localization for a component.
* @param componentKey the component key.
*/
removeLocalization(componentKey: string): void;
/**
* Removes localization for a component with the specified type.
* @param componentKey the component key.
* @param type the localization type.
*/
removeLocalizationForType(componentKey: string, type: LocalizationType): void;
/**
* Returns true if at least one localization exists for the component property and type.
* @param componentKey the component key.
* @param propertyName the component property name.
* @param type the localization type.
* @returns true if localization exists.
*/
hasLocalization(componentKey: string, propertyName: string, type: LocalizationType): boolean;
/**
* Checks if the specified language exists in localization.
* @param languageFullCode the full code (en-US, en-GB etc.) of the language.
* @returns true if language exists.
*/
hasLanguage(languageFullCode: LanguageFullCode): boolean;
/**
* Returns normalized localization item id for the component property.
* @param componentKey the component key.
* @param propertyName the component property name.
* @returns normalized localization item id.
*/
getLocalizationItemId(componentKey: string, propertyName: string): string;
/**
* Returns all localization items provided by engine.
* @param languageFullCode the full code (en-US, en-GB etc.).
* @returns all localization items.
*/
getItems(languageFullCode: LanguageFullCode): Record<string, unknown> | null;
}
/**
* The function that restricts the insertion of a component into another component.
*/
export declare type InsertRestrictionFn = (self: ComponentData, target: ComponentData, slot?: string) => boolean;
/* Excluded from this release type: internalErrorModel */
/**
* React component properties that display an internal form view error. **Internal use only.**
*/
export declare interface InternalErrorProps {
/**
* The internal error.
*/
error: any;
}
/**
* Returns true if value is a boolean.
* @param value input value.
* @returns boolean indicating boolean.
*/
export declare function isBoolean(value: unknown): value is boolean;
/**
* Type predicate, asserts that the value is an instance of ContainerAnnotation. **Internal use only.**
* @param value the value.
* @returns true if the value is an instance of ContainerAnnotation, false otherwise.
*/
export declare const isContainer: (value: Annotation) => value is ContainerAnnotation;
/**
* Returns true if value is instance of Date.
* @param value input value.
* @returns boolean indicating value is instance of Date.
*/
export declare function isDate(value: unknown): value is Date;
/**
* Generic emptiness check for strings, arrays, maps/sets and objects.
* @param value input value.
* @returns true if considered empty.
*/
export declare function isEmpty(value: unknown): boolean;
/**
* Naive deep equality via JSON serialization.
* @param a the first value.
* @param b the second value.
* @returns the equality result.
*/
export declare function isEqual<T>(a: T, b: T): boolean;
/**
* Deep equality with optional customizer short-circuiting element-wise.
* @param a the first value.
* @param b the second value.
* @param customizer the optional comparator callback.
* @returns the equality result.
*/
export declare function isEqualWith(a: unknown, b: unknown, customizer?: (a: any, b: any, key?: any) => boolean | undefined): boolean;
/**
* Returns true if the property value is calculated by the function, otherwise false. **Internal use only.**
* @param componentProperty the component property.
* @returns true if the property value is calculated by the function, otherwise false.
*/
export declare function isFunctionalProperty(componentProperty?: ComponentProperty): boolean;
/**
* Returns true if the property value is localized, otherwise false. **Internal use only.**
* @param componentProperty the component property.
* @returns true if the property value is localized, otherwise false.
*/
export declare function isLocalizedProperty(componentProperty?: ComponentProperty): boolean;
/**
* Returns true if value is strictly null.
* @param value the input value.
* @returns boolean indicating null.
*/
export declare function isNull(value: unknown): value is null;
/**
* Returns true if value is a number (NaN and Infinity included).
* @param value input value.
* @returns boolean indicating number.
*/
export declare function isNumber(value: unknown): value is number;
/**
* Type guard: true if value is a non-null object.
* @param value input value.
* @returns boolean indicating object.
*/
export declare function isObject(value: unknown): value is Record<string, unknown>;
/**
* Type predicate, asserts that the value is a Promise. **Internal use only.**
* @param value the value.
* @returns true if the value is a Promise, false otherwise.
*/
export declare function isPromise<T = any>(value: any): value is Promise<T>;
/**
* Type predicate, asserts that the value is an instance of PropertyAnnotation. **Internal use only.**
* @param value the value.
* @returns true if the value is an instance of PropertyAnnotation, false otherwise.
*/
export declare const isProperty: (value: Annotation) => value is PropertyAnnotation;
/**
* Type predicate, asserts that the value is a string. **Internal use only.**
* @param value the value.
* @returns true if the value is a string, false otherwise.
*/
export declare function isString(value: any): value is string;
/**
* Returns true if typeName is the template type, false otherwise. **Internal use only.**
* @param typeName the type name.
* @returns true if typeName is the template type, false otherwise.
*/
export declare function isTemplateType(typeName?: string): boolean;
/**
* The form viewer settings interface.
*/
export declare interface IStore {
/**
* The displayed form.
*/
form: Form;
/**
* @returns the slice of the initial data in accordance with the Store hierarchy. **Internal use only.**
*/
get initialDataSlice(): unknown;
/**
* @returns true if all validation errors are to be displayed, false otherwise.
*/
get showAllValidationErrors(): boolean | undefined;
/**
* Performs the callback function on each element of the component tree, accumulates the return values.
* @param callback the function that calculates the value for the accumulator.
* @param initialValue the initial value for the accumulator.
* @template T the return value type.
* @returns the accumulated value.
*/
reduceScreen: <T>(callback: (accumulator: T, current: ComponentData) => T, initialValue: T) => T;
/**
* The function to localize the validation error message.
* @param formData the form data.
* @param componentStore the component settings.
* @param validationResults the results of the validation.
* @returns the result of localization or undefined.
*/
localizeErrorMessages(formData: IFormData, componentStore: ComponentStore, validationResults?: ValidationResult[]): string[] | undefined;
/**
* Localizes a component store based on the given localization type. If a custom localizer is available, it will be used.
* @param type the type of localization.
* @param formData the form data.
* @param componentStore the component settings.
* @returns the Record with the localized properties.
*/
localizeComponent(type: LocalizationType, formData: IFormData, componentStore: ComponentStore): Record<string, unknown>;
/**
* Correctly clears allocated resources, the function must be called when destroying an instance of the class.
*/
dispose: () => void;
}
/**
* Returns true if value is strictly undefined.
* @param value the input value.
* @returns boolean indicating undefined.
*/
export declare function isUndefined(value: unknown): value is undefined;
/**
* Returns true if the component key is unique across the entire component tree. **Internal use only.**
* @param value the component key.
* @param store the form viewer settings.
* @returns true if the component key is unique across the entire component tree.
*/
export declare const isUniqueKey: RuleValidator<string>;
/**
* Determines if the given type is a validator property block type. **Internal use only.**
* @param type the type to be checked.
* @returns the boolean value indicating if the type is a validator property block type.
*/
export declare const isValidatorPropertyBlockType: (type: PropertyBlockType) => boolean;
/**
* Interface for defining validation rules for a component.
*/
export declare interface IValidationBuilder extends IComponentBuilder {
/**
* Specifies the arguments for the validation rule.
* @param val the validation arguments.
* @returns the component builder for method chaining.
*/
args(val: any): IComponentBuilder;
}
/**
* Represents all the metadata of the form viewer components.
*/
export declare interface IView {
/**
* Defines the component's metadata for the form viewer.
* @param model the component's metadata.
*/
define: (model: Model) => void;
/**
* Returns the component's metadata for the form viewer for the specified type.
* @param type the component type.
* @returns the component metadata for the form viewer for the specified type.
*/
get: (type: string) => Model;
/**
* Returns the component's metadata for the form viewer for the specified type.
* @param type the component type.
* @returns the component metadata for the form viewer for the specified type or undefined.
*/
find: (type: string) => Model | undefined;
/**
* @returns all component metadata for the form viewer.
*/
all: () => Model[];
/**
* Returns the array of component metadata filtered using the predicate function.
* @param predicate the filter function.
* @returns the array of component metadata filtered using the predicate function.
*/
filterModels: (predicate: (model: Model) => boolean) => Model[];
/**
* Adds a wrapper to the list of viewers for this viewer wrapper.
* @param wrapper the viewer wrapper to be added. The wrapper is a component that wraps the form viewer.
* @returns the {@link View} instance.
*/
withViewerWrapper: (wrapper: FormViewerWrapper) => this;
/**
* Retrieves the viewer wrappers array.
* @returns the viewer wrappers array.
*/
readonly viewerWrappers: FormViewerWrapper[];
/**
* Applies the given CSS loader to the component based on the BiDi layout.
* @param cssLoaderType the BiDi layout type, either 'common', 'ltr', or 'rtl'.
* @param loader the function that returns a Promise to load CSS or other required localization resources,
* optionally returning a cleanup function to be called on unmount.
* @returns the {@link View} instance.
*/
withCssLoader: (cssLoaderType: CssLoaderType, loader: CssLoaderFunction) => this;
/**
* Retrieves the CSS loaders for a given BiDi.
* @param biDi the BiDi object for which to retrieve the CSS loaders.
* @returns the array containing the CSS loaders for the specified BiDi.
*/
getCssLoaders: (biDi: BiDi) => Array<CssLoaderFunction>;
}
/**
* The annotation for the 'key' property of the component.
*/
export declare const key: Annotation;
/**
* The unique Symbol for the key property.
*/
export declare const KeySymbol: unique symbol;
/**
* The element with the value and the label.
*/
export declare interface LabeledValue {
/**
* The value.
*/
value: string | number;
/**
* The label.
*/
label?: string;
}
/**
* The language to localize the form builder.
*/
export declare class Language {
readonly code: string;
readonly dialect: string;
readonly name: string;
readonly description: string;
readonly bidi: BiDi;
/**
* Creates a localization language for the form builder.
* @param code the language code, for example, 'en'.
* @param dialect the dialect code, for example, 'US'.
* @param name the name of the language, for example 'English'.
* @param description the description of the language, for example 'American English'.
* @param bidi the type of text layout, for example, BiDi.LTR.
*/
constructor(code: string, dialect: string, name: string, description: string, bidi?: BiDi);
/**
* @returns the full code of the Language i.e. en-US, en-GB etc.
*/
get fullCode(): LanguageFullCode;
/**
* Clones an existing instance of the language.
* @param source the cloning object.
* @returns the object clone.
*/
static clone(source: Language): Language;
}
/**
* The full language code, e.g. 'en-US'.
*/
export declare type LanguageFullCode = `${string}-${string}`;
/**
* Loads a resource into the document head asynchronously. **Internal use only.**
* @param id the identifier of the resource.
* @param href represents a URL to the resource.
* @param rel the relationship of the resource to the document.
* @returns the promise that resolves when the resource has been loaded successfully.
*/
export declare const loadResource: (id: string, href: string, rel: Rel) => Promise<void>;
/**
* Localization error class.
*/
export declare class LocalizationError extends Error {
/**
* Creates a new LocalizationError.
* @param name the error name.
* @param message the error message.
*/
constructor(name: string, message: string);
}
/**
* Observable storage of localization. **Internal use only.**
*/
export declare class LocalizationStore implements ILocalizationStore {
#private;
readonly value: LocalizationValue;
readonly engine: ILocalizationEngine;
private localizationCache;
private configuredLanguageCodes;
private repository;
private resolver;
/**
* Creates a new LocalizationStore instance.
* @param value the initial localization value.
* @param engine the localization engine to use.
*/
constructor(value: LocalizationValue | undefined, engine: ILocalizationEngine);
/**
* Returns value of localization constant.
* @param languageFullCode the full code (en-US, en-GB etc.) of the language we are looking to localize.
* @param componentKey the component we are looking to localize.
* @param propertyName the property name we are looking to localize.
* @param type the type of localization.
* @returns the value of localization constant.
*/
getLocalization(languageFullCode: LanguageFullCode, componentKey: string, propertyName: string, type: LocalizationType): unknown;
/**
* Returns normalized localization item id for the component property.
* @param componentKey the component key.
* @param propertyName the component property name.
* @returns normalized localization item id.
*/
getLocalizationItemId(componentKey: string, propertyName: string): string;
/**
* Sets localization for component property.
* @param languageFullCode the full code (en-US, en-GB etc.) of the language in which localization will be set.
* @param componentKey the component key that requires localization.
* @param propertyName the component's property name to be localized.
* @param type the type of localization.
* @param value the localization value to persist.
*/
setLocalization(languageFullCode: LanguageFullCode, componentKey: string, propertyName: string, type: LocalizationType, value: unknown): void;
/**
* Removes localization for component.
* @param componentKey the component key that requires localization removal.
*/
removeLocalization(componentKey: string): void;
/**
* Removes localization for component with specified type.
* @param componentKey the component key that requires localization removal.
* @param type the localization type.
*/
removeLocalizationForType(componentKey: string, type: LocalizationType): void;
/**
* Checks that the specified language exists in the localization.
* Looks for exact match first, then match by language code only.
* @param languageFullCode The full code (en-US, en-GB etc.) of the language to be checked.
* @returns true if the specified language exists in the localization.
*/
hasLanguage(languageFullCode: LanguageFullCode): boolean;
/**
* Checks that the specified property has localization.
* @param componentKey the component we are looking to localize.
* @param propertyName the component's property name to be localized.
* @param type the type of localization.
* @returns true if the specified property has localization in at least one language.
*/
hasLocalization(componentKey: string, propertyName: string, type: LocalizationType): boolean;
/**
* Finds the best matching localization key for the given language code.
* Looks for exact match first, then match by language code only.
* @param languageFullCode the requested language full code.
* @returns the best matching language full code or null if no match found.
*/
findLocalizationKey(languageFullCode: LanguageFullCode): LanguageFullCode | null;
/**
* @inheritDoc
*/
getItems(languageFullCode: LanguageFullCode): Record<string, unknown> | null;
/**
* Changes the component key for all languages in the value object.
* @param oldComponentKey the old component key to be replaced.
* @param newComponentKey the new component key to replace the old component key.
*/
changeComponentKey(oldComponentKey: string, newComponentKey: string): void;
/**
* Retrieves the localization values for a given component key.
* @param componentKey the key of the component to retrieve localization for.
* @returns the object containing the localization values for the component in each supported language.
*/
getLocalizationForComponent(componentKey: string): LocalizationValue;
/**
* Inserts the localization values for a given component key. Replaces the old component key with the new component key.
* @param localization the localization object for insertion.
* @param oldComponentKey the old component key that needs to be replaced.
* @param newComponentKey the new component key to be added.
*/
addLocalizationWithNewKey(localization: LocalizationValue, oldComponentKey: string, newComponentKey: string): void;
/**
* @returns the available language codes.
*/
get langCodes(): Array<LanguageFullCode>;
}
/**
* Represents the type of localization. The localization can be for a component, tooltip or for validator.
*/
export declare type LocalizationType = 'component' | 'tooltip' | 'modal' | string;
/**
* The format in which localization is stored.
* @example
* {
* "en-US": {
* "componentKey": {
* "property": "This {$value} is localized!"
* }
* }
* }
*/
export declare type LocalizationValue = Record<LanguageFullCode, ComponentsLocalization>;
/**
* Deep merge plain objects left-to-right.
* @param target the target object.
* @param sources the additional sources.
* @returns the merged target.
*/
export declare function merge<T extends object>(target: T, ...sources: any[]): T;
/**
* The validation result messages map.
*/
export declare type MessagesMap = Record<string, string[] | Record<string, string[] | any>>;
/**
* Component metadata for the form builder.
*/
export declare class Meta {
readonly type: string;
readonly properties: Annotation[];
readonly css: Annotation[];
readonly wrapperCss: Annotation[];
readonly modules: Annotation[];
readonly valuedAn?: Annotation | undefined;
readonly initialJson?: string | undefined;
readonly eventListeners?: ComponentMetadataEventListeners | undefined;
readonly icon?: (ComponentType | string) | undefined;
readonly insertRestriction?: InsertRestrictionFn | undefined;
/**
* Creates the component metadata for the form builder.
* @param type the component type name.
* @param properties the component's properties metadata.
* @param css the component's CSS metadata.
* @param wrapperCss the component's wrapper CSS metadata.
* @param modules common metadata for the component.
* @param valuedAn the metadata for the component value.
* @param initialJson the JSON source for the component (instance of {@link ComponentStore} class serialised to JSON).
* @param eventListeners the component metadata event listeners.
* @param icon the component icon or the icon name.
* @param insertRestriction the function that restricts the insertion of a component into another component.
*/
constructor(type: string, properties: Annotation[], css: Annotation[], wrapperCss: Annotation[], modules: Annotation[], valuedAn?: Annotation | undefined, initialJson?: string | undefined, eventListeners?: ComponentMetadataEventListeners | undefined, icon?: (ComponentType | string) | undefined, insertRestriction?: InsertRestrictionFn | undefined);
}
/**
* Modal settings for serialization in JSON.
*/
export declare type ModalComponentStore = {
/**
* The component properties.
*/
props: Record<string, ComponentProperty>;
/**
* The set of event handlers.
*/
events?: Record<EventName, ActionData[]>;
};
/**
* Represents component metadata for the form viewer.
* @template T the type of React component properties.
*/
export declare class Model<T = any> {
#private;
readonly actionsInitializer?: ActionsInitializer | undefined;
readonly valued?: string | undefined;
readonly valueType?: SchemaType | undefined;
readonly defaultProps?: Readonly<Record<string, any>> | undefined;
readonly css?: Css | undefined;
readonly wrapperCss?: Css | undefined;
readonly typeName?: string | undefined;
readonly kind: ComponentKind;
readonly readOnly?: string | undefined;
readonly propsBindingTypes: Readonly<Record<string, ComponentPropertyBindType>>;
readonly uncontrolledValue?: unknown | undefined;
readonly disabled?: string | undefined;
readonly dataBindingType: DataBindingType;
readonly features: ComponentFeatures;
/**
* The React component.
*/
readonly component: ComponentType<T>;
/**
* Creates component metadata for the form viewer.
* @param component the React component.
* @param name the component name.
* @param actionsInitializer the function to initialize actions in the component.
* @param valued the name of the component property where the component value is stored.
* @param valueType the type of the component value.
* @param defaultProps the component's default property values.
* @param css the component's CSS values.
* @param wrapperCss the component's wrapper CSS values.
* @param typeName the component type name.
* @param kind the component kind.
* @param readOnly the name of the component property that stores the read-only flag.
* @param propsBindingTypes the component property binding types.
* @param uncontrolledValue the value for the uncontrolled (undefined) state.
* @param disabled the name of the component property that stores the disabled flag.
* @param dataBindingType the type of component data binding.
* @param features the component features that provide additional information about component's characteristic.
* @template T the type of React component properties.
*/
constructor(component: ComponentType<T>, name?: string, actionsInitializer?: ActionsInitializer | undefined, valued?: string | undefined, valueType?: SchemaType | undefined, defaultProps?: Readonly<Record<string, any>> | undefined, css?: Css | undefined, wrapperCss?: Css | undefined, typeName?: string | undefined, kind?: ComponentKind, readOnly?: string | undefined, propsBindingTypes?: Readonly<Record<string, ComponentPropertyBindType>>, uncontrolledValue?: unknown | undefined, disabled?: string | undefined, dataBindingType?: DataBindingType, features?: ComponentFeatures);
/**
* @returns the component name, or type if there is no component name.
*/
get name(): string;
/**
* @returns the component type name.
*/
get type(): string;
/**
* Returns true if feature is present in the component feature set and equals value, false otherwise.
* @param name the feature name.
* @param value the feature value.
* @returns true if feature is present in the component feature set and equals value, false otherwise.
*/
hasFeatureValue(name: string, value: unknown): boolean;
/**
* Returns true if feature is present in the component feature set and equals `true`, false otherwise.
* @param name the feature name.
* @returns true if feature is present in the component feature set and equals `true`, false otherwise.
*/
isFeatureEnabled(name: string): boolean;
/**
* Returns true if the role is defined in the component's roles, false otherwise.
* @param value the component role.
* @returns true if the role is defined in the component's roles, false otherwise.
*/
hasComponentRole(value: ComponentRole): boolean;
}
/**
* Metadata for a component property that is not a property of the component itself,
* but is supplied by the form builder.
*/
export declare class ModuleAnnotation extends Annotation {
}
/**
* Computes the autorun name based on the owner, name, and parameters. **Internal use only.**
* @param owner the owner of the autorun.
* @param name the name of the autorun.
* @param params the parameters for specific autorun.
* @returns the computed autorun name.
*/
export declare function nameAutorun(owner: string, name: string, params?: Record<string, any>): string;
/**
* Represents a named action definition.
*/
export declare type NamedActionDefinition = {
/**
* The name of action definition.
*/
name: string;
/**
* The definition of an action.
*/
actionDefinition: ActionDefinition;
};
/**
* Creates the observable React component. **Internal use only.**
* @param displayName the displayName value of the React component.
* @param component the React component.
* @returns the observable React component.
*/
export declare function namedObserver<T extends ComponentType<any>>(displayName: string, component: T): T;
/**
* Computes the observable name based on the owner, name, and parameters. **Internal use only.**
* @param owner the owner of the observable.
* @param params the parameters for specific observable.
* @returns the computed observable name.
*/
export declare function nameObservable(owner: string, params?: Record<string, any>): string;
/**
* Returns true if the component should be rendered, false otherwise.
* @param componentStore the component settings.
* @param formData the form data.
* @returns true if the component should be rendered, false otherwise.
*/
export declare function needRender(componentStore: ComponentStore, formData: IFormData): boolean;
/**
* The annotation builder for a component property with type 'ReactNode'.
*/
export declare const node: NodeAnnotationBuilder<ReactNode>;
/**
* The builder class to define the node metadata property.
* @template T the property type.
*/
export declare class NodeAnnotationBuilder<T> extends AnnotationBuilder<T> {
/**
* The function that checks whether a child component can be inserted into a parent component.
*/
insertPredicate?: (self: ComponentData, child: ComponentData) => boolean;
/**
* The default editor.
*/
defaultEditor?: NodeEditorType;
/**
* Creates a component property metadata builder.
* @param editor the property editor type.
* @template T the property type.
*/
constructor(editor: EditorType);
/**
* Specifies a function that will create conditions that check if a child component can be bound to a parent slot.
* @param slotConditionBuilder the function that returns a string containing the source code of the function to bind child components.
* @returns the instance of the metadata property builder.
*/
withSlotConditionBuilder(slotConditionBuilder: (props: any) => string): this;
/**
* @inheritDoc
*/
build(key: string): Annotation;
/**
* Specifies a function that checks whether a child component can be inserted into a parent component.
* @param predicate the function that returns a boolean value.
* @returns the modified instance of the builder.
*/
withInsertRestriction(predicate?: (self: ComponentData, child: ComponentData) => boolean): this;
/**
* Specifies the default editor for the property.
* @param defaultEditor the default editor.
* @returns the modified instance of the builder.
*/
withDefaultEditor(defaultEditor: NodeEditorType): this;
}
/**
* The annotation builder for a component property with type 'ReactNode[]'.
*/
export declare const nodeArray: NodeAnnotationBuilder<ReactNode[]>;
/**
* The editor type for the "ReactNode" type property.
*/
export declare type NodeEditorType = 'node' | 'string';
/**
* The annotation builder for a component property with type 'number' that cannot be negative.
*/
export declare const nonNegNumber: TypedBuilder<number | undefined>;
/**
* A no-operation localization engine that provides empty implementations.
* Used when localization is not needed or as a fallback.
*/
export declare class NoopLocalizationEngine implements ILocalizationEngine {
#private;
/**
* @inheritDoc
*/
constructor(locale?: LanguageFullCode);
/**
* @inheritDoc
*/
set language(locale: LanguageFullCode);
/**
* @inheritDoc
*/
get language(): LanguageFullCode;
/**
* @inheritDoc
*/
addMessages(): never[];
/**
* @inheritDoc
*/
getCompatibleId(rawId: string): string;
/**
* @inheritDoc
*/
localizeProperties(): {};
/**
* @inheritDoc
*/
localizeErrorMessage(): undefined;
}
/**
* The annotation builder for a component property with type 'number'.
*/
export declare const number: TypedBuilder<number | undefined>;
/**
* The annotation builder for a component property with type 'object'. It can accommodate any nested POJO that contains primitive values.
*/
export declare const object: TypedBuilder<object | undefined>;
/**
* The annotation builder for a component property with type 'enum', the property value can only be one of enum.
*/
export declare const oneOf: <U extends string | number>(...values: U[]) => OneOfBuilder<U>;
/**
* The builder class to define the metadata property of the form builder component.
* Used for properties where the property value can be selected from one of the predefined values.
* @template T the property type.
*/
export declare class OneOfBuilder<T> extends QuantifierBuilder<T> {
/**
* Sets the radio buttons as the component's property editor.
* @returns the modified instance of the builder.
*/
radio(): this;
/**
* Sets the default value for the component property.
* @param value the default value.
* @returns the modified instance of the builder.
*/
default(value: T): this;
}
/**
* The annotation builder for a component property with type 'enum', the property value can only be one of enum.
* New values cannot be created (non-creatable).
*/
export declare const oneOfStrict: <U extends string | number>(...values: U[]) => OneOfBuilder<U>;
/**
* The type to describe the action parameter.
* @template T the type of action parameter.
*/
export declare type ParameterDefinition<T> = [PropertyKey_2<T>, ParameterType];
/**
* The type for the parameter name.
*/
export declare type ParameterName = string;
/**
* Parameter type.
*/
export declare type ParameterType = 'string' | 'number' | 'boolean' | 'function';
/**
* The format for saving a form designed in Form Builder.
*/
export declare interface PersistedForm {
/**
* The version of the saved form.
*/
version?: PersistedFormVersion;
/**
* Represents a set of action definitions.
*/
actions?: ActionValues;
/**
* The form validator.
*/
formValidator?: string;
/**
* Properties of the component displaying the error.
*/
errorProps?: any;
/**
* Name of the type of component that displays the modal.
*/
modalType?: string;
/**
* Name of the type of component that displays the tooltip.
*/
tooltipType?: string;
/**
* Name of the type of component displaying the error.
*/
errorType?: string;
/**
* Settings for components that display the form.
*/
form: ComponentStore;
/**
* Localization of the form.
*/
localization?: LocalizationValue;
/**
* Form languages.
*/
languages?: Language[];
/**
* The default form language.
*/
defaultLanguage?: string;
}
/**
* The version of the saved form.
*/
export declare enum PersistedFormVersion {
version1 = "1"
}
/**
* Type for component property metadata without the 'key' property, but with the 'editor' property.
*/
export declare type PreAnnotation = Partial<Omit<Annotation, 'key'>> & Pick<Annotation, 'editor'>;
/**
* Primitive argument value type.
*/
export declare type PrimitiveArgumentValue = string | number | boolean;
/**
* Metadata for the component property for the form builder.
*/
export declare class PropertyAnnotation extends Annotation {
/**
* Possible values for the property.
*/
data: LabeledValue[];
}
/**
* Represents the type of property block.
*/
export declare type PropertyBlockType = 'component' | 'tooltip' | 'modal' | string;
/**
* Component property key type.
* @template T the type of action parameter
*/
declare type PropertyKey_2<T> = keyof T & string;
export { PropertyKey_2 as PropertyKey }
/**
* The abstract builder class to define the metadata property of the form builder component.
* Used for properties where the property value can be selected from predefined values.
* @template T the property type.
*/
export declare abstract class QuantifierBuilder<T> extends TypedBuilder<T> {
/**
* Possible values for the property.
*/
values: (string | number)[];
/**
* Labels for the possible values of the property.
*/
labels?: string[];
/**
* Marks the component property as required.
* @returns the modified instance of the builder.
*/
get required(): QuantifierBuilder<NonNullable<T>>;
/**
* Sets the labels for predefined values.
* @param labels the labels.
* @returns the modified instance of the builder.
*/
labeled(...labels: string[]): this;
/**
* Creates component property metadata for the form builder.
* @param key the unique key of the component property.
* @returns the instance of the component property metadata for the form builder.
*/
build(key: string): Annotation;
/**
* Sets the default value for the component property.
* @param value the default value, can be an array of values.
* @returns the modified instance of the builder.
*/
default(value: T | T[]): this;
}
/**
* The React component property.
*/
export declare type ReactProperty = {
/**
* The value property name.
*/
readonly propertyName: string;
/**
* @returns the property value.
*/
readonly propertyValue: unknown;
};
/**
* Converts a React-style JS object to standard CSS string.
* @param styles - React inline style object.
* @param selector - optional CSS selector to wrap the rules.
* @returns CSS string.
*/
export declare function reactStylesToCss(styles: Record<string, string | number>, selector?: string): string;
/**
* Annotation builder for a read-only property of a component with type 'boolean'.
*/
export declare const readOnly: TypedBuilder<boolean | undefined>;
/**
* Represents a relationship attribute value used in HTML.
*/
export declare type Rel = 'stylesheet' | string;
/**
* The annotation builder for the synthetic 'renderWhen' property of the component.
*/
export declare const renderWhen: TypedBuilder<boolean | undefined>;
/**
* Annotation builder for a required property of a component with type 'boolean'.
*/
export declare const required: TypedBuilder<boolean | undefined>;
/**
* The function that validates a value and returns the validation result.
* @param value the validated value.
* @param store the form viewer settings.
* @param getFormData the function that returns a form data.
* @returns the Promise with the results of the validation.
*/
export declare type ResolvedValidator = (value: any, store: IStore, getFormData?: () => IFormData) => Promise<ValidationResult[] | undefined>;
/**
* The function that checks the value and returns the result of the rule validation, see {@link RuleValidatorResult}.
* @param value the value.
* @param store the form viewer settings
* @param args the rule arguments.
* @param formData the form data.
* @template T the value type.
*/
export declare type RuleValidator<T = any> = (value: T, store: IStore, args?: Record<string, unknown>, formData?: IFormData) => RuleValidatorResult | Promise<RuleValidatorResult>;
/**
* The result of validation of a single rule, true means validation was successful,
* false means validation failed, string means error message.
*/
export declare type RuleValidatorResult = string | boolean;
/**
* The validation function factory.
* @param value the validated value.
* @template T the validation function factory arguments.
* @returns the function that validates a value.
*/
export declare type SchemaResolver<T> = (value: T) => ResolvedValidator;
/**
* The value type name.
*/
export declare type SchemaType = keyof SchemaTypeMap;
/**
* Describes the mapping of a value type name to a type.
*/
export declare type SchemaTypeMap = {
/**
* The string.
*/
'string': string;
/**
* The number.
*/
'number': number;
/**
* The boolean.
*/
'boolean': boolean;
/**
* The object.
*/
'object': object;
/**
* The array.
*/
'array': any[];
/**
* The enumeration.
*/
'enum': any;
/**
* The date.
*/
'date': Date;
/**
* The time.
*/
'time': string;
};
/**
* Form viewer screen metadata. **Internal use only.**
*/
export declare const screenModel: Model<Omit<any, "ref"> & RefAttributes<any>>;
/**
* Properties of the root component of the form. **Internal use only.**
*/
export declare interface ScreenProps {
/**
* The React child node.
*/
children: ReactNode;
/**
* If true, the children are in disabled state.
*/
disabled?: boolean;
/**
* If true, the children are in read-only state.
*/
readOnly?: boolean;
}
/**
* Sets the initial data.
*/
export declare type SetInitialDataFn = (key: string | number, value: unknown) => void;
/**
* Value setting function type.
* @param value the value.
* @template T the value type.
*/
export declare type Setter<T = any> = (value: T) => void;
/**
* The annotation builder for a component property with type 'CSS unit' (width, height, etc.).
*/
export declare const size: TypedBuilder<string | undefined>;
/**
* Form viewer slot metadata. **Internal use only.**
*/
export declare const slotModel: Model<any>;
/**
* The annotation builder for a component property with type 'enum', the property value can contain multiple enum values.
*/
export declare const someOf: <U extends string | number>(...values: U[]) => SomeOfBuilder<U>;
/**
* The builder class to define the metadata property of the form builder component.
* Used for properties where the property value can be a set of predefined values.
* @template T the property type.
*/
export declare class SomeOfBuilder<T> extends QuantifierBuilder<T> {
/**
* Sets the default value for the component property.
* @param value the default value.
* @returns the modified instance of the builder.
*/
default(value: T[]): this;
}
/**
* Convert a string to Start Case.
* @param input the input string.
* @returns the start-cased string.
*/
export declare function startCase(input: string): string;
/**
* The form viewer settings. **Internal use only.**
*/
export declare class Store implements IStore, IFormViewer, IComponentDataFactory {
formViewerPropsStore: FormViewerPropsStore;
readonly componentStateFactory: ComponentStateFactory;
readonly parentStore?: Store | undefined;
readonly getInitialData?: GetInitialDataFn | undefined;
readonly setInitialData?: SetInitialDataFn | undefined;
/**
* The currently selected language.
*/
selectedLanguage?: Language;
/**
* Current display resolution type.
*/
viewMode: ViewMode;
/**
* The form.
*/
form: Form;
/**
* The loading form error.
*/
formLoadError?: string;
/**
* Creates form viewer settings.
* @param formViewerPropsStore the form viewer store settings.
* @param componentStateFactory the factory for creating component states.
* @param parentStore the form viewer settings, used in templates.
* @param getInitialData the function to get initial data for the Store.
* @param setInitialData the function for updating initial data.
*/
constructor(formViewerPropsStore: FormViewerPropsStore, componentStateFactory: ComponentStateFactory, parentStore?: Store | undefined, getInitialData?: GetInitialDataFn | undefined, setInitialData?: SetInitialDataFn | undefined);
/**
* @returns the Record with the common actions.
*/
get commonActions(): ActionValues;
/**
* Returns an action by the specified action name and action type.
* @param name the action name.
* @param type the action type.
* @returns the action.
*/
getAction(name: string, type: ActionType): ActionDefinition;
/**
* @inheritDoc
*/
get formData(): ComponentData;
/**
* Clears the form in Form Viewer.
*/
clear(): void;
/**
* @inheritDoc
*/
dispose(): void;
/**
* @inheritDoc
*/
get initialDataSlice(): unknown;
/**
* @inheritDoc
*/
get showAllValidationErrors(): boolean | undefined;
/**
* @inheritDoc
*/
reduceScreen<T>(callback: (accumulator: T, current: ComponentData) => T, initialValue: T): T;
/**
* Searches for an action, returns definition for the found action.
* @param actionData the action's data.
* @returns the action definition.
* @throws {Error} If the action was not found.
*/
findAction(actionData: ActionData): ActionDefinition;
/**
* Returns model for the specified type.
* @param type the component type.
* @returns the model for the specified type.
*/
getModel(type: string): Model<any> | Model<InternalErrorProps>;
/**
* @inheritDoc
*/
createComponentData(componentStore: ComponentStore, deferFieldCalculation?: boolean): ComponentData;
/**
* Returns the object with validators for the specified value type.
* @param type the value type.
* @returns the object with validators for the specified value type.
*/
getValidationRules(type: SchemaType): FormViewerValidationRules;
private createField;
/**
* Populates the value of this store with the values of the saved form.
* @param text saved form value.
*/
applyStringForm(text: string): void;
private fixPropertyTypes;
private fixDateProperty;
/**
* Populates the value of this store with the values of the saved form.
* @param persistedForm saved form value.
*/
applyPersistedForm(persistedForm: PersistedForm): void;
/**
* @returns the current display language.
*/
get displayedLanguage(): Language;
/**
* @inheritDoc
*/
localizeComponent(type: LocalizationType, formData: IFormData, componentStore: ComponentStore): Record<string, any>;
/**
* @inheritDoc
*/
localizeErrorMessages(formData: IFormData, componentStore: ComponentStore, validationResults?: ValidationResult[]): string[] | undefined;
private calculateProperty;
/**
* Creates a data validator for the field.
* @param componentData the component data.
* @param valueType the field's data type.
* @param onError the callback function called when the validation error text is set.
* @returns the data validator.
*/
private createDataValidator;
private createDataRoot;
private getFormValidatorsResult;
/**
* Returns the first type of component with the specified role.
* @param componentRole the component role.
* @returns the first type of component with the specified role.
*/
getFirstComponentTypeWithRole(componentRole: ComponentRole): string | undefined;
private updateInitialData;
}
/**
* **Internal use only.**
*/
export declare const
/**
* **Internal use only.**
*/
/**
* **Internal use only.**
*/
StoreContext: Context<Store | null>;
/**
* **Internal use only.**
*/
export declare const
/**
* **Internal use only.**
*/
/**
* **Internal use only.**
*/
StoreProvider: Provider<Store>;
/**
* The annotation builder for a component property with type 'string'.
*/
export declare const string: TypedBuilder<string | undefined>;
/**
* The annotation builder for a component property with type 'ReactNode'/'string'.
*/
export declare const stringNode: NodeAnnotationBuilder<ReactNode>;
/**
* Metadata for the component style property for the form builder.
*/
export declare class StyleAnnotation extends Annotation {
}
/**
* SuppressResizeObserverErrors component is used to suppress ResizeObserver errors. **Internal use only.**
* @param props the component props.
* @param props.children the child elements to render.
* @returns the rendered child elements.
*/
export declare const SuppressResizeObserverErrors: ({ children }: SuppressResizeObserverErrorsProps) => JSX.Element;
/**
* Represents the props for the SuppressResizeObserverErrors component. **Internal use only.**
*/
export declare interface SuppressResizeObserverErrorsProps {
/**
* The React child node.
*/
children: ReactNode;
}
/**
* Represents a synchronous event that can be subscribed to and invoked. **Internal use only.**
* @template TSender the type of the object that raises the event.
* @template TEventArgs the type of the event arguments.
*/
export declare class SyncEvent<TSender, TEventArgs> {
private handlers;
/**
* Adds a handler to the list of subscribers.
* @param handler the handler function to be added.
*/
subscribe(handler: SyncEventHandler<TSender, TEventArgs>): void;
/**
* Removes the specified event handler from the list of handlers.
* @param handler the event handler to remove.
*/
unsubscribe(handler: SyncEventHandler<TSender, TEventArgs>): void;
/**
* Returns true if the object has subscribers, false otherwise.
* @returns true if the object has handlers registered for events, otherwise returns false.
*/
get isSubscribed(): boolean;
/**
* Invokes the event by calling all registered event handlers.
* @param sender the sender of the event.
* @param eventArgs the event arguments.
*/
invoke(sender: TSender, eventArgs: TEventArgs): void;
/**
* Dispose method to release all handlers.
*/
dispose(): void;
}
/**
* Represents a synchronous event handler.
* @template TSender the type of the event source.
* @template TEventArgs the type of the event arguments.
*/
export declare type SyncEventHandler<TSender, TEventArgs> = (source: TSender, eventArgs: TEventArgs) => void;
/**
* The field with the form data, contains the value of the nested form. **Internal use only.**
*/
export declare class TemplateField implements Field {
readonly componentStore: ComponentStore;
readonly viewerStore: IStore;
/**
* @inheritDoc
*/
valued: string;
/**
* @inheritDoc
*/
touched: boolean;
/**
* Creates the nested form field with form data for the component.
* @param componentStore the component settings.
* @param viewerStore the form viewer settings.
*/
constructor(componentStore: ComponentStore, viewerStore: IStore);
/**
* @inheritDoc
*/
get fieldType(): FieldType;
/**
* @inheritDoc
*/
get storeDataInParentForm(): any;
/**
* @inheritDoc
*/
get value(): unknown;
/**
* @inheritDoc
*/
dispose(): void;
/**
* @inheritDoc
*/
clear(): void;
/**
* @inheritDoc
*/
reset(): void;
/**
* @inheritDoc
*/
setTouched(): void;
/**
* @inheritDoc
*/
setValue(value: unknown): void;
/**
* @inheritDoc
*/
validate(): Promise<void>;
/**
* @inheritDoc
*/
getValidationResult(): Promise<undefined>;
/**
* @inheritDoc
*/
init(): void;
/**
* @returns the form for the field.
*/
get form(): ComponentData;
/**
* @inheritDoc
*/
get errors(): Record<string, unknown>;
/**
* @inheritDoc
*/
setError: (error: unknown) => void;
}
/**
* The template component properties.
*/
export declare type TemplateProps = Omit<EmbeddedFormProps, 'formName'>;
/**
* The annotation builder for a component property with type 'Time'.
*/
export declare const time: TypedBuilder<string | undefined>;
/**
* The string format for a value of the Time type.
*/
export declare const timeFormat = "HH:mm:ss";
/**
* Converts the object containing component property metadata into an array. **Internal use only.**
* @param annotations the object containing component property metadata.
* @param setup the custom options for the component's property metadata builder.
* @returns the metadata array of the component properties.
*/
export declare function toArray<T extends object = any>(annotations?: Annotations<T>, setup?: BuilderSetup): Annotation[];
/**
* Converts the array of elements into the array of {@link LabeledValue} elements.
* @param items the array of elements.
* @param upper if true, the first character in {@link LabeledValue.label} will be capitalized.
* @returns the array of {@link LabeledValue} elements.
*/
export declare const toLabeledValues: (items: Array<string | number | LabeledValue>, upper?: boolean) => LabeledValue[];
/**
* The annotation builder for component tooltip properties.
*/
export declare const tooltipProps: AnnotationBuilder<unknown>;
/**
* The annotation builder for the form property describing the type of form tooltip.
*/
export declare const tooltipType: TypedBuilder<string | undefined>;
/**
* Uppercase wrapper guarding falsy input.
* @param input the input string.
* @returns the uppercased string.
*/
export declare function toUpper(input: string): string;
/**
* Executes a given function on each node of a tree. **Internal use only.**
* @param tree the root node of the tree.
* @param fn the function to be executed on each node of the tree.
*/
export declare function treeForEach<T extends {
children?: T[];
}>(tree: T, fn: (treeNode: T) => void): void;
/**
* The builder class to define the metadata property of the form builder component.
* Used for properties where the property value can be validated.
* @template T the property type.
*/
export declare class TypedBuilder<T> extends BaseBuilder<T> {
/**
* Marks the component property as required.
* @returns the modified instance of the builder.
*/
get required(): TypedBuilder<NonNullable<T>>;
/**
* Sets the default value for the component property.
* @param value the default value.
* @returns the modified instance of the builder.
*/
default(value: T): this;
/**
* Modifies the component property metadata builder with validation properties.
* @param validator the validation function.
* @param errorMap the validation error settings.
* @returns the modified instance of the builder.
*/
validated(validator: RuleValidator<T>, errorMap: ErrorMap): this;
}
/**
* A record containing localizations grouped by localization type.
*/
export declare type TypedLocalization = Partial<Record<LocalizationType, ComponentPropsLocalization>>;
/**
* Create an incrementing unique id string with optional prefix.
* @param prefix the optional prefix.
* @returns the unique id string.
*/
export declare function uniqueId(prefix?: string): string;
export declare namespace uniqueId {
var counter: number;
}
/**
* Unloads a resource from the DOM based on its ID. **Internal use only.**
* @param id the ID of the resource to unload.
*/
export declare const unloadResource: (id: string) => void;
/**
* Uppercase the first character of a string.
* @param input input string.
* @returns string with first char uppercased.
*/
export declare function upperFirst(input: string): string;
/**
* @param options options for configuring the generation of ARIA attributes.
* @returns a record with 'aria' attributes.
*/
export declare const useAriaAttributes: (options: AriaAttributesOptions) => {
'aria-invalid': boolean;
"aria-labelledby": string;
"aria-errormessage": string;
};
/**
* @param options options for configuring the generation of ARIA attributes.
* @returns a map of aria attributes ids.
*/
export declare const useAriaAttributesIds: (options: AriaAttributesOptions) => AriaAttributesIds;
/**
* @returns a record with an 'aria-errormessage' attribute.
*/
export declare const useAriaErrorMessage: () => {
'aria-errormessage': string;
};
/**
* @returns a record with an 'aria-invalid' attribute.
*/
export declare const useAriaInvalid: () => {
'aria-invalid': boolean;
};
/**
* Returns a React element for the builder or viewer component based on the current builder mode.
* @param builderComponent the component to use in the 'builder' mode.
* @param viewerComponent the component to use in the 'viewer' mode.
* @param props the props forwarded to the selected component.
* @returns the React element for the selected component.
*/
export declare const useBuilderComponent: <T>(builderComponent: ComponentType<T>, viewerComponent: ComponentType<T>, props: T) => ReactElement;
/**
* @returns the {@link BuilderMode} builder mode value.
*/
export declare const
/**
* @returns the {@link BuilderMode} builder mode value.
*/
/**
* @returns the {@link BuilderMode} builder mode value.
*/
useBuilderMode: () => BuilderMode;
/**
* @returns the current {@link BuilderTheme} value.
*/
export declare const
/**
* @returns the current {@link BuilderTheme} value.
*/
/**
* @returns the current {@link BuilderTheme} value.
*/
useBuilderTheme: () => BuilderTheme;
/**
* Returns the value to use in the builder mode.
* @param value the value.
* @param builderValue the value to be used if the value is not defined is an empty string or a string containing only spaces.
* @returns the value to use in the builder mode.
*/
export declare const useBuilderValue: <T>(value: T, builderValue: T) => T;
/**
* @returns the instance of the ComponentData of the currently rendered component.
*/
export declare const
/**
* @returns the instance of the ComponentData of the currently rendered component.
*/
/**
* @returns the instance of the ComponentData of the currently rendered component.
*/
useComponentData: () => ComponentData;
/**
* Creates a disposable object and dispose the object when the React component is unmounted. **Internal use only.**
* @param factory the factory function to create a disposable object.
* @returns the disposable object.
*/
export declare function useDisposable<T extends IDisposable>(factory: () => T): T | undefined;
/**
* @returns a field validation error message if the field data is not valid.
*/
export declare const useErrorMessage: () => string | undefined;
/**
* @returns the model of React component used to display the error.
*/
export declare const useErrorModel: () => Model<ErrorWrapperProps>;
/**
* Disables the `enforceActions` check for `mobx`, so that the state can be changed from anywhere.
*/
export declare const useMobxConfig: () => void;
/**
* Generates the {@link ComponentData} for the modal component.
* @param parentComponentData the modal's parent component.
* @param modalType the modal type.
* @returns the generated {@link ComponentData} for the modal component.
*/
export declare const useModalComponentData: (parentComponentData: ComponentData, modalType: string) => ComponentData;
/**
* @returns the type name of the React component used to display the modal. **Internal use only.**
*/
export declare const useModalType: () => string | undefined;
/**
* **Internal use only.**
*/
export declare const
/**
* **Internal use only.**
*/
/**
* **Internal use only.**
*/
useStore: () => Store;
/**
* @returns the type of React component used to display the tooltip. **Internal use only.**
*/
export declare const useTooltipType: () => string | undefined;
/**
* **Internal use only.**
*/
export declare const
/**
* **Internal use only.**
*/
/**
* **Internal use only.**
*/
useViewerProps: () => Readonly<FormViewerProps>;
/**
* The annotation builder for arbitrary HTML attributes of a component.
*/
export declare const validation: AnnotationBuilder<unknown>;
/**
* The validation result messages.
*/
export declare type ValidationMessages = string[] | MessagesMap | undefined;
/**
* The result of the validation.
*/
export declare type ValidationResult = {
/**
* The validation rule settings.
*/
settings: ValidationRuleSettings;
/**
* The validation error message text.
*/
message?: string;
};
/**
* Validation rule metadata required to create a validation function.
*/
export declare type ValidationRule = {
/**
* Metadata of validation rule parameters.
*/
params?: ValidationRuleParameter[];
/**
* The validation function factory.
*/
validatorFactory: ValidatorFactory<any>;
};
/**
* Describes the settings of the validation rule parameter.
*/
export declare type ValidationRuleParameter = {
/**
* The unique setting key of the parameter.
*/
key: string;
/**
* The type of value.
*/
type: SchemaType;
/**
* Flag whether the setting value must be filled in.
*/
required: boolean;
/**
* The default value.
*/
default?: unknown;
/**
* The editor type of the setting value.
*/
editorType?: string;
};
/**
* Describes a set of validation rules.
*/
export declare type ValidationRuleSet = Record<string, ValidationRule>;
/**
* The validation rule settings.
*/
export declare type ValidationRuleSettings = {
/**
* The unique key of the validation rule. The key is unique within the value type.
*/
key: string;
/**
* The type of validator.
*/
type?: ValidatorType;
/**
* Arguments of the validation rule.
*/
args?: Record<string, any>;
/**
* The property that determines when validation needs to be performed.
*/
validateWhen?: ComponentProperty;
};
/**
* The validation function factory.
* @param args the factory arguments.
* @returns the function that checks the value and returns the result of the rule validation
* @template Params the factory arguments type.
*/
export declare type ValidatorFactory<Params> = (args: Params) => RuleValidator;
/**
* The set of metadata of custom validation rules, grouped by the type of value being validated.
*/
export declare type Validators = Partial<Record<SchemaType, CustomValidationRules>>;
/**
* The type of validator.
*/
export declare type ValidatorType = 'internal' | 'custom';
/**
* Represents all the metadata of the form viewer components.
*/
export declare class View implements IView {
#private;
/**
* Static wrapper for the {@link View} constructor.
* @param models the components metadata.
* @returns the {@link View} instance.
*/
static create(models: Model[]): View;
/**
* Creates an instance of the {@link View}.
* @param models the components metadata.
*/
constructor(models?: Model[]);
/**
* @inheritDoc
*/
define(model: Model): void;
/**
* @inheritDoc
*/
get(type: string): Model<any>;
/**
* @inheritDoc
*/
find(type: string): Model<any> | undefined;
/**
* @inheritDoc
*/
all(): Model<any>[];
/**
* @inheritDoc
*/
filterModels(predicate: (model: Model) => boolean): Model<any>[];
/**
* @inheritDoc
*/
withViewerWrapper: (wrapper: FormViewerWrapper) => this;
/**
* @inheritDoc
*/
get viewerWrappers(): FormViewerWrapper[];
/**
* @inheritDoc
*/
withCssLoader(cssLoaderType: CssLoaderType, loader: CssLoaderFunction): this;
/**
* @inheritDoc
*/
getCssLoaders(biDi: BiDi): CssLoaderFunction[];
}
/**
* **Internal use only.**
*/
export declare const
/**
* **Internal use only.**
*/
/**
* **Internal use only.**
*/
ViewerPropsProvider: Provider<Readonly<FormViewerProps>>;
/**
* Display resolution type.
*/
export declare type ViewMode = 'desktop' | 'mobile' | 'tablet';
/**
* The WillUnmountEvent event name.
*/
export declare const WillUnmountEvent = "onWillUnmount";
/**
* React wrapper component properties.
*/
export declare interface WrapperProps {
/**
* The React child node.
*/
children: ReactNode;
/**
* The CSS class name.
*/
className?: string;
}
export { }