File

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

Extends

DfDateBaseConfig

Index

Properties

Properties

mode
Type typeof DfDateFullDateMode
startView (Optional)
Type DfDateStartViewTypeFullDate
Description

The view that the calendar should start with.

Defaults to month.

displayFormat (Optional)
Type string
Description

The display format for the date input.

Refer the NDBX datefield documentation for details: https://api-test.allianz.com/ngx-brand-kit-next/documentation/datefield

hideCalendarPicker (Optional)
Type boolean
Description

Boolean to hide the calendar picker

inputPrefix (Optional)
Type string
Description

Prefix text to place at the start of this field's input. It's translatable by default and supports string interpolation.

inputSuffix (Optional)
Type string
Description

Suffix text to place at the end of this field's input. It's translatable by default and supports string interpolation.

label
Type string
Description

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

Example :
nonStrictParsing (Optional)
Type boolean
Description

The ndbx date picker supports a non-strict parsing. This makes it possible to enter dates without separators like / or .

When the non strict parsing is active, the datepicker will also automatically format the date to what it detected.

optionalLabel (Optional)
Type string
Description

Text that is additionally displayed in the label if the field is not mandatory.

Example :
panelClass (Optional)
Type string | string[]
Description

Classes to be passed to the date picker panel. Supports the same syntax as ngClass.

parseFormat (Optional)
Type string | string[]
Description

The parse format for the date input.

The formats are dependent on the date-adapter.

Day.js formats: https://day.js.org/docs/en/parse/string-format

Refer the NDBX datefield documentation for details: https://api-test.allianz.com/ngx-brand-kit-next/documentation/datefield

placeholder (Optional)
Type string
Description

Placeholder to be displayed in the field when the input is empty. It's translatable by default and supports string interpolation.

Example :
startAt (Optional)
Type string
Description

The date on which to open the calendar initially.

Note that this is not the same thing as the date field's initial value, which still defaults to empty.

type
Type typeof DfDateTypeName
Description

Specifies the type of the field as DATE.

value (Optional)
Type string
Description

The initial value for the date field. Accepts an ISO date string or a relative constant ("TODAY", "TOMORROW", "YESTERDAY").

Example :
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.

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 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)

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

/**
 * The value to use for the `type` attribute of date
 * formfield configs.
 */
export const DfDateTypeName = 'DATE';
/**
 * The value options to use for the `mode` attribute of date
 * formfield configs.
 */
export const DfDateMonthYearOnlyMode = 'monthYearOnly';
export const DfDateYearOnlyMode = 'yearOnly';
export const DfDateFullDateMode = 'fullDate';
export type DfDateMode =
  | typeof DfDateMonthYearOnlyMode
  | typeof DfDateYearOnlyMode
  | typeof DfDateFullDateMode;

/**
 * Available views that the date picker's calendar can start with.
 *
 * month: Start the calendar on the month view, which shows all days of that month.
 * year: Start the calendar on the year view, which shows all months of that year.
 * multi-year: Start the calendar on the multi-year view, which shows a range of years.
 */
export const DfDateStartViewTypeFullDate = {
  Month: 'month',
  Year: 'year',
  MultiYear: 'multi-year'
} as const;
export type DfDateStartViewTypeFullDate =
  (typeof DfDateStartViewTypeFullDate)[keyof typeof DfDateStartViewTypeFullDate];

export const DfDateStartViewTypeMonthYearOnly = {
  Year: 'year',
  MultiYear: 'multi-year'
} as const;

export type DfDateStartViewTypeMonthYearOnly =
  (typeof DfDateStartViewTypeMonthYearOnly)[keyof typeof DfDateStartViewTypeMonthYearOnly];

/**
 * Configuration for a date input field.
 */
export interface DfDateBaseConfig extends DfInteractiveBaseConfig, SingleInputFieldLayout {
  /**
   * Specifies the mode of the date input field.
   * Determines the level of granularity for date selection:
   * - `monthYearOnly`: Allows selection of only month and year.
   * - `yearOnly`: Allows selection of only the year.
   * - `fullDate`: Allows selection of the full date (day, month, year).
   */
  mode: DfDateMode;
  /**
   * The parse format for the date input.
   *
   * The formats are dependent on the date-adapter.
   *
   * Day.js formats: https://day.js.org/docs/en/parse/string-format
   *
   * Refer the NDBX datefield documentation for details:
   * https://api-test.allianz.com/ngx-brand-kit-next/documentation/datefield
   */
  parseFormat?: string | string[];
  /**
   * The display format for the date input.
   *
   * Refer the NDBX datefield documentation for details:
   * https://api-test.allianz.com/ngx-brand-kit-next/documentation/datefield
   */
  displayFormat?: string;
  /**
   * The initial value for the date field.
   * Accepts an ISO date string or a relative constant ("TODAY", "TOMORROW", "YESTERDAY").
   * @examples ["TODAY", "TOMORROW", "YESTERDAY", "2023-12-31"]
   */
  value?: string;

  /**
   * Specifies the type of the field as `DATE`.
   */
  type: typeof DfDateTypeName;

  /**
   * 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;

  /**
   * Placeholder to be displayed in the field when the input is empty.
   * It's translatable by default and supports string interpolation.
   * @examples ["Placeholder", "Placeholder with dynamic value {$['bb-pgr-simple'].date}"]
   */
  placeholder?: string;

  /**
   * The date on which to open the calendar initially.
   *
   * Note that this is not the same thing as the date field's initial value, which
   * still defaults to empty.
   */
  startAt?: string;

  /**
   * The ndbx date picker supports a non-strict parsing.
   * This makes it possible to enter dates without separators like / or .
   *
   * When the non strict parsing is active, the datepicker will also automatically
   * format the date to what it detected.
   */
  nonStrictParsing?: boolean;

  /**
   * Classes to be passed to the date picker panel. Supports the same syntax as ngClass.
   */
  panelClass?: string | string[];

  /**
   * Boolean to hide the calendar picker
   */
  hideCalendarPicker?: boolean;

  /**
   * Prefix text to place at the start of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputPrefix?: string;

  /**
   * Suffix text to place at the end of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputSuffix?: string;

  /**
   * Text that is additionally displayed in the label if the field is not mandatory.
   * @examples ["Optional"]
   */
  optionalLabel?: string;
}

interface DfDateConfigMonthYearOnly extends DfDateBaseConfig {
  /**
   * When set to "monthYearOnly", the user cannot choose a day.
   * Day will always be set to 01.
   */
  mode: typeof DfDateMonthYearOnlyMode;
  startView?: DfDateStartViewTypeMonthYearOnly;
}

interface DfDateConfigYearOnly extends DfDateBaseConfig {
  /**
   * When set to "yearOnly", the user cannot choose a day or a month.
   * Day and month will always be set to 01.
   */
  mode: typeof DfDateYearOnlyMode;
  parseFormat?: never;
  displayFormat?: never;
  startView?: never;
}

// default case, allow all format fields
interface DfDateConfigFull extends DfDateBaseConfig {
  mode: typeof DfDateFullDateMode;
  /**
   * The view that the calendar should start with.
   *
   * Defaults to month.
   */
  startView?: DfDateStartViewTypeFullDate;
}

export type DfDateConfig = DfDateConfigMonthYearOnly | DfDateConfigYearOnly | DfDateConfigFull;

/**
 * Default values for the DATE
 */
export const DfDateDefaultValues = {
  Yesterday: 'YESTERDAY',
  Today: 'TODAY',
  Tomorrow: 'TOMORROW'
} as const;
export type DfDateDefaultValues = (typeof DfDateDefaultValues)[keyof typeof DfDateDefaultValues];

results matching ""

    No results matching ""