libs/core/dynamic-form/paragraph/src/paragraph.model.ts
Properties |
|
| copytextOption (Optional) | |
| Type |
"small" | "medium" | "normal" | "large"
|
|
Description
|
The nxCopytext variant. This determines the visuals of the paragraph. |
| cssClasses (Optional) | |
| Type |
string
|
|
Description
|
Property to add css classes via configuration Example : |
| icon (Optional) | |
| Type |
IconDefinition
|
|
Description
|
Configuration of the icon to be place before the label. |
| label | |
| Type |
string
|
|
Description
|
This field's label. It's translatable by default and it supports string interpolation as well as markdown formatting:
|
| layout (Optional) | |
| Type |
{ leftAlignInRetail?: boolean }
|
|
Description
|
The layout of the field. |
| type | |
| Type |
typeof DfParagraphTypeName
|
|
Description
|
Specifies the type of the field as |
| acl (Optional) | |
| Type |
DfFieldAcl[]
|
|
Description
|
ACL rules to be applied to this field. |
| columnSpan (Optional) | |
| Type |
number
|
|
Description
|
This field's custom size. Number of column(s) the element should span. It's only applicable with the "CUSTOM_COLUMN" layout. The value can be 1-12, following the 12-column grid system. The default value is 12. |
| id | |
| Type |
string
|
|
Description
|
This field's ID. The ID will serve as the ACL resource name for the form field. If the field is a form element, it will also be used as a form control name within the FormGroup to which it is added. IDs must be unique within your form. Example : |
| infoIcon (Optional) | |
| Type |
DfInfoIconConfig
|
|
Description
|
Info icon with associated pop-over. |
| onInitEvent (Optional) | |
| Type |
DfInteractiveEventConfig
|
|
Description
|
Configure either a PFE action or service activator configuration handler when the field's |
| renderName (Optional) | |
| Type |
string
|
|
Description
|
The optional renderName is added as the attribute "data-render-name" to the df-formfield elements in the DOM. It can be used to find the rendered element of a specific field of a form. |
| spacing (Optional) | |
| Type |
DfFormfieldSpacing
|
|
Description
|
This field's custom spacing. If defined, it will be used to set the spacing between this field and the next one. |
| testId (Optional) | |
| Type |
string
|
|
Description
|
The id used to select the element in the tests (unit test, e2e testing) |
import { DfBaseConfig } from '@allianz/taly-core/dynamic-form';
import { IconSize } from '@allianz/ng-aquila/icon';
/**
* The value to use for the `type` attribute of paragraph
* formfield configs.
*/
export const DfParagraphTypeName = 'PARAGRAPH';
export interface DfParagraphConfig extends DfBaseConfig {
/**
* Specifies the type of the field as `PARAGRAPH`.
*/
type: typeof DfParagraphTypeName;
/**
* This field's label.
* It's translatable by default and it supports string interpolation as well as
* markdown formatting:
* - Italic: `*text*` or `_text_`
* - Bold: `**text**`
* - Bold Italic: `***text***`
* - Strikethrough: `~~text~~`
* - Underline: `:u[text]`
* - Links: `[text](url)`
*
* @examples [
* "My label",
* "Label with *italic*, **bold**, ~~strikethrough~~, :u[underline], and [link](https://example.com)",
* "My label {$['bb-pgr-simple'].person.firstName}"
* ]
*/
label: string;
/**
* The nxCopytext variant. This determines the visuals of the paragraph.
*/
copytextOption?: 'small' | 'medium' | 'normal' | 'large';
/**
* Configuration of the icon to be place before the label.
*/
icon?: IconDefinition;
/**
* Property to add css classes via configuration
* @examples ["nx-font-weight-bold nx-margin-bottom-s"]
*/
cssClasses?: string;
/**
* The layout of the field.
*/
layout?: {
/**
* Controls paragraph text alignment for retail journeys. Set to `true` to left-align text. Defaults to centered alignment.
* Ignored in expert journeys, which always use left alignment.
* @default false
*/
leftAlignInRetail?: boolean;
};
}
export interface IconDefinition {
/**
* Name of the NDBX icon.
* Available icon names can be found in the NDBX documentation: https://ngx-brand-kit.frameworks.allianz.io/documentation/icon/overview.
* @examples ["info-circle", "exclamation-circle"]
*
*/
name: string;
/**
* Size of the icon
*/
size: IconSize;
}