TALY - The Allianz Library
  1. Interfaces
  2. DfCheckboxGroupConfig

File

libs/core/dynamic-form/checkbox/src/checkbox.model.ts

Description

Configuration for a checkbox group component

Extends

Omit<DfCheckboxBaseConfig, 'columnSpan'>

Index

Properties

Properties

layout (Optional)
Type VerticalLayout | HorizontalLayout
Default value { optionsColumnSpan: 4, horizontal: false }
Description

The layout configuration for the checkbox group. { optionsColumnSpan: 4, horizontal: false }
options
Type DfOptions[] | string
Description

The options for the checkbox group. Can be either:

  1. A hardcoded array of objects for direct display. Each object must have a 'label' and 'value'.
  2. A string expression used by an option provider service to dynamically fetch options.
Example :
type
Type typeof DfCheckboxGroupTypeName
Description

Specifies the type of the field as CHECKBOX_GROUP.
value (Optional)
Type string[]
Description

The initially selected option values. Each entry must match the stringified value of one of the configured options.

Example :
label
Type string
Description

This field's label. It's translatable by default and supports string interpolation.

Example :
labelSizeSmall (Optional)
Type boolean
Default value false
Description

Sets the checkbox label size to 'small'. The default size is 'large'. false
hint (Optional)
Type string
Description

The hint text to be displayed under the field. It's translatable by default and supports string interpolation.

Example :
note (Optional)
Type string
Description

The note text is displayed in an info message box below the field. It's translatable by default and supports string interpolation.

Example :
onBlurEvent (Optional)
Type DfInteractiveEventConfig
Description

Configure either a PFE action or service activator configuration handler for the field's blur event.
onValueChangesEvent (Optional)
Type DfInteractiveEventConfig
Description

Configure either a PFE action or service activator configuration handler for the field's valueChanges event.
validators (Optional)
Type DynamicFormValidationConfig[]
Description

Validators to set on this form field.
acl (Optional)
Type DfFieldAcl[]
Description

ACL rules to be applied to this field.
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 ngOnInit method is triggered.
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)
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.

 
import {
  DfInteractiveBaseConfig,
  DfOptions,
  HorizontalLayout,
  VerticalLayout
} from '@allianz/taly-core/dynamic-form';

/**
 * The value to use for the `type` attribute of checkbox formfield configs.
 */
export const DfCheckboxTypeName = 'CHECKBOX';

/**
 * The value to use for the `type` attribute of checkbox group formfield configs.
 */
export const DfCheckboxGroupTypeName = 'CHECKBOX_GROUP';

/**
 * Base configuration interface for both single checkbox and checkbox group components
 */
export interface DfCheckboxBaseConfig extends DfInteractiveBaseConfig {
  /**
   * This field's label.
   * It's translatable by default and supports string interpolation.
   * @examples ["My label", "My label {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * Sets the checkbox label size to `'small'`. The default size is `'large'`.
   * @default false
   */
  labelSizeSmall?: boolean;
}

/**
 * Configuration for a single checkbox component
 */
export interface DfCheckboxConfig extends DfCheckboxBaseConfig {
  /**
   * Specifies the type of the field as `CHECKBOX`.
   */
  type: typeof DfCheckboxTypeName;

  /**
   * The field's initial value. `true` if checked, `false` if unchecked.
   */
  value?: boolean;
}

/**
 * Configuration for a checkbox group component
 */
export interface DfCheckboxGroupConfig extends Omit<DfCheckboxBaseConfig, 'columnSpan'> {
  /**
   * Specifies the type of the field as `CHECKBOX_GROUP`.
   */
  type: typeof DfCheckboxGroupTypeName;

  /**
   * The options for the checkbox group. Can be either:
   * 1. A hardcoded array of objects for direct display. Each object must have a `'label'` and `'value'`.
   * 2. A string expression used by an option provider service to dynamically fetch options.
   *
   * @examples [[{"label": "The first option", "value": "1"}], "$.myExpression"]
   */
  options: DfOptions[] | string;

  /**
   * The layout configuration for the checkbox group.
   * @default { optionsColumnSpan: 4, horizontal: false }
   */
  layout?: VerticalLayout | HorizontalLayout;

  /**
   * The initially selected option values.
   * Each entry must match the stringified `value` of one of the configured options.
   * @examples [["option-1", "option-2"]]
   */
  value?: string[];
}

export const CheckboxLabelSize = {
  Small: 'small',
  Large: 'large'
} as const;
export type CheckboxLabelSize = (typeof CheckboxLabelSize)[keyof typeof CheckboxLabelSize];

results matching ""

    No results matching ""