Skip to main content

Default Inputs

BooleanFormInputComponent

A checkbox input. The default input component for boolean fields.

Signature
class BooleanFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'boolean-form-input';
readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'boolean-form-input'>;
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'boolean-form-input'>

HtmlEditorFormInputComponent

A JSON editor input with syntax highlighting and error detection. Works well with text type fields.

Signature
class HtmlEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit {
static readonly id: DefaultFormComponentId = 'html-editor-form-input';
constructor(changeDetector: ChangeDetectorRef)
ngOnInit() => ;
}
  • Extends: BaseCodeEditorFormInputComponent

id

constructor

method
(changeDetector: ChangeDetectorRef) => HtmlEditorFormInputComponent

ngOnInit

method
() =>

JsonEditorFormInputComponent

A JSON editor input with syntax highlighting and error detection. Works well with text type fields.

Signature
class JsonEditorFormInputComponent extends BaseCodeEditorFormInputComponent implements FormInputComponent, AfterViewInit, OnInit {
static readonly id: DefaultFormComponentId = 'json-editor-form-input';
constructor(changeDetector: ChangeDetectorRef)
ngOnInit() => ;
}
  • Extends: BaseCodeEditorFormInputComponent

id

constructor

method
(changeDetector: ChangeDetectorRef) => JsonEditorFormInputComponent

ngOnInit

method
() =>

CombinationModeFormInputComponent

A special input used to display the "Combination mode" AND/OR toggle.

Signature
class CombinationModeFormInputComponent implements FormInputComponent, OnInit {
static readonly id: DefaultFormComponentId = 'combination-mode-form-input';
readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'combination-mode-form-input'>;
selectable$: Observable<boolean>;
constructor(configurableInputComponent: ConfigurableInputComponent)
ngOnInit() => ;
setCombinationModeAnd() => ;
setCombinationModeOr() => ;
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'combination-mode-form-input'>

selectable$

property
Observable<boolean>

constructor

method
(configurableInputComponent: ConfigurableInputComponent) => CombinationModeFormInputComponent

ngOnInit

method
() =>

setCombinationModeAnd

method
() =>

setCombinationModeOr

method
() =>

CurrencyFormInputComponent

An input for monetary values. Should be used with int type fields.

Signature
class CurrencyFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'currency-form-input';
@Input() readonly: boolean;
formControl: UntypedFormControl;
currencyCode$: Observable<CurrencyCode>;
config: DefaultFormComponentConfig<'currency-form-input'>;
constructor(dataService: DataService)
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

currencyCode$

property
Observable<CurrencyCode>

config

property
DefaultFormComponentConfig<'currency-form-input'>

constructor

method
(dataService: DataService) => CurrencyFormInputComponent

CustomerGroupFormInputComponent

Allows the selection of a Customer via an autocomplete select input. Should be used with ID type fields which represent Customer IDs.

Signature
class CustomerGroupFormInputComponent implements FormInputComponent, OnInit {
static readonly id: DefaultFormComponentId = 'customer-group-form-input';
@Input() readonly: boolean;
formControl: FormControl<string | { id: string }>;
customerGroups$: Observable<GetCustomerGroupsQuery['customerGroups']['items']>;
config: DefaultFormComponentConfig<'customer-group-form-input'>;
constructor(dataService: DataService)
ngOnInit() => ;
selectGroup(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) => ;
compareWith(o1: T, o2: T) => ;
}

id

readonly

property
boolean

formControl

property
FormControl<string | { id: string }>

customerGroups$

property
Observable<GetCustomerGroupsQuery['customerGroups']['items']>

config

property
DefaultFormComponentConfig<'customer-group-form-input'>

constructor

method
(dataService: DataService) => CustomerGroupFormInputComponent

ngOnInit

method
() =>

selectGroup

method
(group: ItemOf<GetCustomerGroupsQuery, 'customerGroups'>) =>

compareWith

method
(o1: T, o2: T) =>

DateFormInputComponent

Allows selection of a datetime. Default input for datetime type fields.

Signature
class DateFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'date-form-input';
@Input() readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'date-form-input'>;
min: void
max: void
yearRange: void
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'date-form-input'>

min

property

max

property

yearRange

property

FacetValueFormInputComponent

Allows the selection of multiple FacetValues via an autocomplete select input. Should be used with ID type list fields which represent FacetValue IDs.

Signature
class FacetValueFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'facet-value-form-input';
readonly isListInput = true;
readonly: boolean;
formControl: UntypedFormControl;
config: InputComponentConfig;
valueTransformFn = (values: FacetValueFragment[]) => {
const isUsedInConfigArg = this.config.__typename === 'ConfigArgDefinition';
if (isUsedInConfigArg) {
return JSON.stringify(values.map(s => s.id));
} else {
return values;
}
};
}

id

isListInput

property

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
InputComponentConfig

valueTransformFn

property

NumberFormInputComponent

Displays a number input. Default input for int and float type fields.

Signature
class NumberFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'number-form-input';
@Input() readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'number-form-input'>;
prefix: void
suffix: void
min: void
max: void
step: void
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'number-form-input'>

prefix

property

suffix

property

min

property

max

property

step

property

PasswordFormInputComponent

Displays a password text input. Should be used with string type fields.

Signature
class PasswordFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'password-form-input';
readonly: boolean;
formControl: UntypedFormControl;
config: InputComponentConfig;
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
InputComponentConfig

ProductSelectorFormInputComponent

Allows the selection of multiple ProductVariants via an autocomplete select input. Should be used with ID type list fields which represent ProductVariant IDs.

Signature
class ProductSelectorFormInputComponent implements FormInputComponent, OnInit {
static readonly id: DefaultFormComponentId = 'product-selector-form-input';
readonly isListInput = true;
readonly: boolean;
formControl: FormControl<Array<string | { id: string }>>;
config: DefaultFormComponentUiConfig<'product-selector-form-input'>;
selection$: Observable<Array<GetProductVariantQuery['productVariant']>>;
constructor(dataService: DataService)
ngOnInit() => ;
addProductVariant(product: ProductSelectorSearchQuery['search']['items'][number]) => ;
removeProductVariant(id: string) => ;
}

id

isListInput

property

readonly

property
boolean

formControl

property
FormControl<Array<string | { id: string }>>

config

property
DefaultFormComponentUiConfig<'product-selector-form-input'>

selection$

property
Observable<Array<GetProductVariantQuery['productVariant']>>

constructor

method
(dataService: DataService) => ProductSelectorFormInputComponent

ngOnInit

method
() =>

addProductVariant

method
(product: ProductSelectorSearchQuery['search']['items'][number]) =>

removeProductVariant

method
(id: string) =>

RelationFormInputComponent

The default input component for relation type custom fields. Allows the selection of a ProductVariant, Product, Customer or Asset. For other entity types, a custom implementation will need to be defined. See registerFormInputComponent.

Signature
class RelationFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'relation-form-input';
@Input() readonly: boolean;
formControl: UntypedFormControl;
config: RelationCustomFieldConfig;
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
RelationCustomFieldConfig

RichTextFormInputComponent

Uses the RichTextEditorComponent as in input for text type fields.

Signature
class RichTextFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'rich-text-form-input';
readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'rich-text-form-input'>;
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'rich-text-form-input'>

SelectFormInputComponent

Uses a select input to allow the selection of a string value. Should be used with string type fields with options.

Signature
class SelectFormInputComponent implements FormInputComponent, OnInit {
static readonly id: DefaultFormComponentId = 'select-form-input';
@Input() readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment;
uiLanguage$: Observable<LanguageCode>;
options: void
constructor(dataService: DataService)
ngOnInit() => ;
trackByFn(index: number, item: any) => ;
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'select-form-input'> & CustomFieldConfigFragment

uiLanguage$

property
Observable<LanguageCode>

options

property

constructor

method
(dataService: DataService) => SelectFormInputComponent

ngOnInit

method
() =>

trackByFn

method
(index: number, item: any) =>

TextFormInputComponent

Uses a regular text form input. This is the default input for string and localeString type fields.

Signature
class TextFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'text-form-input';
readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'text-form-input'>;
prefix: void
suffix: void
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'text-form-input'>

prefix

property

suffix

property

TextareaFormInputComponent

Uses textarea form input. This is the default input for text type fields.

Signature
class TextareaFormInputComponent implements FormInputComponent {
static readonly id: DefaultFormComponentId = 'textarea-form-input';
readonly: boolean;
formControl: UntypedFormControl;
config: DefaultFormComponentConfig<'textarea-form-input'>;
spellcheck: boolean
}

id

readonly

property
boolean

formControl

property
UntypedFormControl

config

property
DefaultFormComponentConfig<'textarea-form-input'>

spellcheck

property
boolean