SiSelectLazyOptionsDirective documentation¶

An interface to define a lazy option source for the SiSelectComponent .

Methods

compareOptions

(a: SelectOption<TValue>, b: SelectOption<TValue>) => number¶

This function is used to sort options.

It is only called if the si-select was able to find all options without querying the option source.

Parameters
a: `SelectOption`<`TValue`>¶
b: `SelectOption`<`TValue`>¶

Get all available options. If provided, this will be called when no filter value is provided. Otherwise, si-select will only show the selected values.

This function must be implemented if this source is used on a select without a filter.
getAllOptions: () => Observable<SelectItem<TValue>[]>¶

getOptionsForSearch

(search: string) => Observable<SelectItem<TValue>[]>¶

Find options for a search value. It will never be called with an empty search value.

This function must be implemented if this source is used on a si-select with a filter.

Parameters
value typed by the user in the search field. search: `string`¶

getOptionsForValues

(values: TValue[]) => Observable<SelectOption<TValue>[]>¶

Get options for the provided values. This is basically a resolver function, that resolves values to options.

Parameters
values that should be resolved to an option. values: `TValue`[]¶

valuesEqual

(optionA: TValue, optionB: TValue) => boolean¶

Function to check if two values are equal.

This function must be implemented if the check on reference equality is not enough. For instance, when using objects as value.

Parameters
optionA: `TValue`¶
optionB: `TValue`¶

SelectItem <T> (`SelectGroup`<`T`> \| `SelectOption`<`T`>)¶ Type alias Alias for SelectOption or SelectGroup

SelectOption

<T>¶

A select option

Properties
Whether this option is disabled. disabled?: `boolean`¶
An optional icon. icon?: `string`¶
The color of an icon. iconColor?: `string`¶
A label to be shown for this option. Is optional if a custom template is provided or if the value should directly be rendered. label?: `string`¶
An optional stacked icon. stackedIcon?: `string`¶
The color of a stacked icon. stackedIconColor?: `string`¶
Defines this to be an option. type: `"option"`¶
Used for typeahead functionality when filtering is disabled. If provided, this will be used, otherwise the innerText of the rendered element. typeaheadLabel?: `string`¶
The value if this option. It will be used for formControls and the value property of this `si-select` . The value will internally be checked on equality by using `===` . So an app should either use `string` or ensure that same values are referentially equal. value: `T`¶

SelectGroup

<T>¶

A select option group

Properties
An optional key to identify this group in a custom template. key?: `string`¶
A label to be shown as header for this group. Is optional if a custom template is provided. label?: `string`¶
All options that are part of this group. options: `SelectOption`<`T`>[]¶
Defines this to be a group. type: `"group"`¶

SiFormItemControl

Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.

Properties
Generated ID that the SiFormItemComponent will assign to the element containing the error messages. Implementations of SiFormItemControl must generate this ID and assign it to the `aria-describedby` attribute of their focusable elements. This property will be required with v48. errormessageId?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
The actual id of the control that should be used in the `for` attribute of a label. id?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
If the control is meant to be used a checkbox. This affects the label positioning. isFormCheck?: `boolean`¶
ID that should be assigned to the label element inside the SiFormItemComponent . If the target control is not of type input, select or button, it cannot be referenced by a label. Instead, aria-labelledby must be used to create a reference to a label. In such a case, an implementation of SiFormItemControl must provide the id of the label in labelledby . SiFormItemComponent will apply the id to the label so that it can be used inside the control to reference it in the aria-labelledby attribute. labelledby?: (`null` \| `string` \| `Signal`<(`undefined` \| `string`)>)¶

SI_FORM_ITEM_CONTROL `InjectionToken`<`SiFormItemControl`> = ...¶ Variable

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Translatable ¶ import imported from @siemens/element-translate-ng

SiFormError

SiFormValidationErrorMapper

Properties
key: `string`¶
message?: `string`¶
params: `any`¶

Interface for form error mapper. It resolves a key to either a translatable string or function which is called with the validation error for its key and should return a translatable string.

Index signature: [ key: string ]: (undefined | string | (error: any) => string)¶

Properties
dateFormat?: (`TranslatableString` \| (error: { format: `string` }) => `TranslatableString`)¶
email?: (`TranslatableString` \| (error: { email: `boolean` }) => `TranslatableString`)¶
max?: (`TranslatableString` \| (error: { actual: `number`, max: `number` }) => `TranslatableString`)¶
maxDate?: (`TranslatableString` \| (error: { actual: `Date`, max: `Date` }) => `TranslatableString`)¶
maxLength?: (`TranslatableString` \| (error: { actualLength: `number`, requiredLength: `number` }) => `TranslatableString`)¶
min?: (`TranslatableString` \| (error: { actual: `number`, min: `number` }) => `TranslatableString`)¶
minDate?: (`TranslatableString` \| (error: { actual: `Date`, min: `Date` }) => `TranslatableString`)¶
minLength?: (`TranslatableString` \| (error: { actualLength: `number`, requiredLength: `number` }) => `TranslatableString`)¶
numberFormat?: (`TranslatableString` \| (error: { numberFormat: `boolean` }) => `TranslatableString`)¶
pattern?: (`TranslatableString` \| (error: { pattern: (`string` \| `RegExp`) }) => `TranslatableString`)¶
required?: (`TranslatableString` \| (error: { required: `boolean` }) => `TranslatableString`)¶
requiredTrue?: (`TranslatableString` \| (error: { required: `boolean` }) => `TranslatableString`)¶

Breakpoints

Properties
lgMinimum: `number`¶
mdMinimum: `number`¶
smMinimum: `number`¶
xlMinimum: `number`¶
xxlMinimum: `number`¶

SiFormValidationError

Properties
controlName?: `string`¶
controlNameTranslationKey?: `string`¶
errorCode: `string`¶
errorCodeTranslationKey?: `string`¶
errorParams?: `any`¶

SiSelectComponent

<T> implements OnChanges, AfterContentInit, SiFormItemControl¶

▶

Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.

Constructor
() => `{}`¶

Properties
actionsTemplate: `Signal`<(`undefined` \| `TemplateRef`<`any`>)> = ...¶
Aria label of the select. ariaLabel: `InputSignal`<(`null` \| `string`)> = `null`¶
backdropClicked: `boolean` = `false`¶
Emits on selection dropdown close. Deprecated: Use openChange instead. ~~dropdownClose~~: `OutputEmitterRef`<`void`> = ...¶
errormessageId: `string` implements `errormessageId` = ...¶
Placeholder for search input field. filterPlaceholder: `InputSignal`<`TranslatableString`> = $localize`:@@SI_SELECT.SEARCH-PLACEHOLDER:Search...`¶
groupTemplate: `Signal`<(`undefined` \| `TemplateRef`<{ $implicit: `SelectGroup`<`T`> }>)> = ...¶
Enables the filter input hasFilter: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Unique identifier. id: `InputSignal`<`string`> implements `id` = `__si-select-${SiSelectComponent.idCounter++}`¶
isOpen: `WritableSignal`<`boolean`> = ...¶
labelledby: `Signal`<`string`> implements `labelledby` = ...¶
Aria labelledby of the select. labelledbyInput: `InputSignal`<(`undefined` \| `string`)> = `undefined`¶
Label if no item can be found. noResultsFoundLabel: `InputSignal`<`TranslatableString`> = $localize`:@@SI_SELECT.NO-RESULTS-FOUND:No results found`¶
Emits when the dropdown open state changes. openChange: `OutputEmitterRef`<`boolean`> = ...¶
optionTemplate: `Signal`<(`undefined` \| `TemplateRef`<{ $implicit: `SelectOption`<`T`> }>)> = ...¶
overlayWidth: `number` = `0`¶
Placeholder text to display when no options are selected. placeholder: `InputSignal`<(`undefined` \| `TranslatableString`)> = ...¶
Readonly state. Similar to disabled but with higher contrast * readonly: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
rows: readonly `SelectItem`<`T`>[] = `[]`¶
selectionStrategy: `SiSelectSelectionStrategy`<`any`, `any`> = ...¶
selectOptions: `SiSelectOptionsStrategy`<`unknown`> = ...¶
trigger: `Signal`<`ElementRef`<`HTMLDivElement`>> = ...¶
idCounter: `number` = `0`¶

Methods

backdropClick: () => void¶

Closes the si-select .
close: () => void¶

A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit¶

ngOnChanges

(changes: SimpleChanges) => void from OnChanges.ngOnChanges¶

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

Parameters
The changed properties. changes: `SimpleChanges`¶

Opens the si-select .
open: () => void¶

verifyValueProvider: () => void¶

SiFormItemComponent

implements AfterContentInit, AfterViewInit, AfterContentChecked, OnChanges, OnInit, OnDestroy¶

▶

Constructor
() => `{}`¶

Properties
container: (`null` \| `SiFormContainerComponent`<{ [ key: `string` ]: `AbstractControl`<`any`, `any`> } }>) = ...¶
controlElementRef: `Signal`<(`undefined` \| `ElementRef`<`HTMLElement`>)> = ...¶
Disables the automatic error printing. Error printing will be enabled by default in v46. disableErrorPrinting: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
elementRef: `ElementRef`<`HTMLElement`> = ...¶
errors: `WritableSignal`<`SiFormError`[]> = ...¶
fieldControl: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlNative: `WritableSignal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlQuery: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldset: (`null` \| `SiFormFieldsetComponent`) = ...¶
formErrorMapper: `InputSignal`<(`undefined` \| `SiFormValidationErrorMapper`)> = ...¶
hasRequiredValidator: `WritableSignal`<`boolean`> = ...¶
Deprecated: property has longer an effect. SiFormItem detects IDs automatically ~~inputId~~?: `string`¶
Deprecated: Remove with v48 ~~isLegacyMode~~: `WritableSignal`<`boolean`> = ...¶
The label to be displayed in the form item. It will be translated if a translation key is available. label: `InputSignal`<(`undefined` \| `null` \| `string`)> = ...¶
A custom width value to be applied to the label. A value of 0 is allowed as well to visually hide away the label area. Numbers will be converted to pixels. Using numbers is discouraged and might be dropped. Example: `labelWidth="100px"` labelWidth: `InputSignal`<(`undefined` \| `string` \| `number`)> = ...¶
labelWidthCssVar: `Signal`<(`undefined` \| `string`)> = ...¶
ngControl: `Signal`<(`undefined` \| `NgControl`)> = ...¶
previousErrors?: (`null` \| `ValidationErrors`)¶
printErrors: `Signal`<`boolean`> = ...¶
Deprecated: This input has no effect and can be removed. ~~readonly~~: `boolean` = `false`¶
required: `Signal`<`boolean`> = ...¶
Defines that this form item is required for the overall form to be valid. requiredInput: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
requiredTestControl: `FormControl`<(`null` \| `string`)> = ...¶
requiredValidator: `Signal`<(`undefined` \| `RequiredValidator`)> = ...¶
validationErrorService: `SiFormValidationErrorService` = ...¶
validator?: (`null` \| `ValidatorFn`)¶

Accessors
get formItemErrormessageId: (`null` \| `string`)¶
get formItemId: (`null` \| `string`)¶
get formItemLabelledBy: (`null` \| `string`)¶

Methods

A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
ngAfterContentChecked: () => void from AfterContentChecked.ngAfterContentChecked¶

A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit¶

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit¶

ngOnChanges

(changes: SimpleChanges) => void from OnChanges.ngOnChanges¶

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

Parameters
The changed properties. changes: `SimpleChanges`¶

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy¶

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit¶

updateRequiredState: () => void¶

updateValidationMessages: () => void¶

SiFormContainerComponent

<(TControl: { [ K in keyof TControl ]: AbstractControl })>¶

getControlNameTranslateKey

▶

Constructor
() => `{}`¶

Properties
The container hosts the form within a siResizeContainer to configure the breakpoint for different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints input. contentContainerBreakpoints: `InputSignal`<(`undefined` \| `Breakpoints`)> = ...¶
A map the maps from control names of the form to their translate keys. The initial map is empty and the user is responsible to add the required translate keys. controlNameTranslateKeyMap: `InputSignal`<`Map`<`string`, `string`>> = `new Map<string, string>()`¶
In some scenarios, one may not want the form container to be responsible for the layout relevant `si-container-[xs\|...]` classes, but let this be done by a different, nested component, e.g. by a group box. In these cases, the property should be set to true. disableContainerBreakpoints: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Disables the automatic error printing in all nested SiFormItemComponent . Error printing will be enabled by default in v46. disableErrorPrinting: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Every validation error has an errorCode. This map holds translate keys for error codes. The keys can be used to display a translated message for each validation error. The defaults old english readable key defaults for the Angular standard validators of the `Validators` class like `min` , `max` or `required` . Use the input to set your own translate keys for the form validators you need. errorCodeTranslateKeyMap: `InputSignal`<(`undefined` \| `SiFormValidationErrorMapper` \| `Map`<`string`, `string`>)> = ...¶
errorResolver: `SiFormValidationErrorService` = ...¶
Set the form entity to the container to enable the overall form validation on in the form container edit panel. form: `InputSignal`<(`undefined` \| `FormGroup`<`TControl`>)> = ...¶
formErrorMapper: `Signal`<{ [ key: `string` ]: (`undefined` \| `string` \| (error: `any`) => `string`) } }> = ...¶
hasParentContainer: `boolean` = ...¶
A custom width value to be applied to all labels. Example: `labelWidth="100px".` labelWidth: `InputSignal`<(`undefined` \| `string`)> = ...¶
A form container in readonly mode is only displaying the form content without ability to change it. The edit panel with typically save and cancel buttons is hidden. Set to true to display the edit panel. readonly: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶

Accessors
Indicates whether the content editor message shall be styled as warning. Returns `true` , if SiFormContainerComponent.userInteractedWithForm is true and the form is invalid. get invalidFormContainerMessage: `boolean`¶
Indicates whether the user interacted with the form. Returns `true` , if the user selected at least one form element and [blurred] https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event by losing focus again (e.g. by setting focus on another element), or by editing the content of a form element. Otherwise `false` . get userInteractedWithForm: `boolean`¶
Indicates whether content editor message shall be styled as success. Returns `true` , if SiFormContainerComponent.userInteractedWithForm is true and the form is valid. get validFormContainerMessage: `boolean`¶

Methods

(controlName: string) => (undefined | string)¶

Parameters
controlName: `string`¶

getFormGroupErrors

(formGroup: FormGroup) => SiFormValidationError[]¶

Parameters
formGroup: `FormGroup`¶

getFormValidationErrorsPrivate

(control: AbstractControl, controlName: string) => SiFormValidationError[]¶

Parameters
control: `AbstractControl`¶
controlName?: `string`¶

~~getValidationErrors~~

(controlName: string) => SiFormValidationError[]¶

Returns the validation errors of the form's control when the control name is provided. Otherwise, returns all validation errors of the form. Returns an empty arry when no form is available or if the name does not match to a control.
Deprecated: The SiFormItemComponent is able to display validation errors automatically when siFormInput directive is used.

Parameters
An optional name of a control that is part of the form. controlName?: `string`¶

SiFormFieldsetComponent

implements DoCheck¶