Skip to content

Criterion Type documentation

(CriterionValue & CriterionDefinition)
Deprecated: Use one the more specific types instead: - CriterionValue for the output value of the FilteredSearch, containing the user input. - CriterionDefinition for the definition of criteria so the [criteria] input of the SiFilteredSearchComponent .

Types Documentation

A CriterionValue is the input/output value of the SiFilteredSearchComponent , containing the user input.
Properties
If the criterion was defined as date or date-time this field will contain the value das js Date.
dateValue?: Date
The mandatory name of a criterion.
name: string
This property holds the selected or entered operator of the criterion.
operator?: string
The value property holds the selected or entered value/values of the criterion. The value can also be passed as an array of strings. When multiSelect is enabled, the items in the value array will be shown as selected values in value input and the typeahead.
value?: (string | string[])
A CriterionDefinition is the definition of criteria in the SiFilteredSearchComponent . It defines the type and based this further attributes like multiselect and available options.
Properties
Optional configuration object for the datepicker.
datepickerConfig?: DatepickerInputConfig
An optional label, which is used in the user interface.
label?: TranslatableString
Defines whether multi selection of the options is possible in a typeahead. Setting it to true enables the checkbox besides the option values. When multiSelect is true , the value input field will be readonly, allowing user to select the values only from the typeahead.
multiSelect?: boolean
The mandatory name of a criterion.
name: string
Limit criterion options to the predefined ones and prevent typing. onlySelectValue enforces strictValue to true automatically.
onlySelectValue?: boolean
This provides possible operators that the user can select for this criterion.
operators?: string[]
The options provide possible values that the user can select for this criterion.
options?: OptionType[]
Limit criterion options to the predefined ones.
strictValue?: boolean
This provides the value type of the input field.
validationType?: ValidationType
extends DatepickerConfig
Properties
Similar to dateTimeFormat , but used when only a date is displayed (e.g. when showTime === false or disabledTime === true ). Only numeric date formats are supported.
dateFormat?: string
A custom date/time format according the Angular date pipe (see https://angular.dev/api/common/DatePipe ). Only numeric date formats are supported. The format is used to render the time of a date-time criterion. If not specified, mediumTime is used if the showSeconds flag is true, otherwise shortTime as default. For the date-only case, 'shortDate' is used.
dateTimeFormat?: string
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean from disabledTime
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString from disabledTimeText
Options to turn on date range selection.
enableDateRange?: boolean from enableDateRange
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString from enabledTimeText
Consider time with minDate and maxDate
enableTimeValidation?: boolean from enableTimeValidation
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean from enableTwoMonthDateRange
endTimeLabel?: string from endTimeLabel
hideLabels?: boolean from hideLabels
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean from hideWeekNumbers
hoursAriaLabel?: string from hoursAriaLabel
hoursLabel?: string from hoursLabel
hoursPlaceholder?: string from hoursPlaceholder
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean from mandatoryTime
Maximal (latest) selectable date.
maxDate?: Date from maxDate
meridians?: string[] from meridians
meridiansAriaLabel?: string from meridiansAriaLabel
meridiansLabel?: string from meridiansLabel
millisecondsAriaLabel?: string from millisecondsAriaLabel
millisecondsLabel?: string from millisecondsLabel
millisecondsPlaceholder?: string from millisecondsPlaceholder
Minimal (earliest) selectable date.
minDate?: Date from minDate
minutesAriaLabel?: string from minutesAriaLabel
minutesLabel?: string from minutesLabel
minutesPlaceholder?: string from minutesPlaceholder
Only month and year are selectable.
onlyMonthSelection?: boolean from onlyMonthSelection
secondsAriaLabel?: string from secondsAriaLabel
secondsLabel?: string from secondsLabel
secondsPlaceholder?: string from secondsPlaceholder
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean from showMilliseconds
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean from showMinutes
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean from showSeconds
Defines the timepicker visibility. Default is false .
showTime?: boolean from showTime
startTimeLabel?: string from startTimeLabel
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString from todayText
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart from weekStartDay
(string & Translatable)
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.
(string | OptionCriterion)
Type for options
("string" | "integer" | "float" | "date" | "date-time")
("base-1" | "base-0")
Use this type with filter components colorVariant to render component variants based on background of container
On search, the filtered search component emits a SearchCriteria object. It consists of all user selected criteria and the free text input value.
Properties
The selected criteria of the filtered search. Each criteria has a name and a value.
criteria: (CriterionValue & CriterionDefinition)[]
Additional unstructured free text, which the user entered in the search.
value: string
Event allows to intercept and change the displayed criteria before shown in typeahead.
Properties
List of criteria names to display in typeahead.
criteria: string[]
Current search criteria.
searchCriteria: SearchCriteria
Methods
(criteriaNamesToDisplay: string[]) => void
Interceptor function allows to reduce the list of displayed criteria.
Parameters
list of criteria names to be displayed.
criteriaNamesToDisplay: string[]
(criteriaNamesToDisplay: string[]) => void
Method
Interceptor function allows to reduce the list of displayed criteria.
Parameters
list of criteria names to be displayed.
criteriaNamesToDisplay: string[]

Wrapper around an actual translation framework which is meant to be used internally by Element. Applications must not use this service.

Use injectSiTranslateService to get an instance of the translation service.
Constructor
() => {}
Properties
documentRef: any
prevent$LocalizeInit?: boolean
translationChange$: Observable<void>
ɵfac: unknown
ɵprov: ɵɵInjectableDeclaration<SiTranslateService>
Accessors
The available languages.
get availableLanguages: string[]
set availableLanguages: (languages: string[])
The currently used language.
get currentLanguage: string
If the underlying translation library supports switching the language and/or updating the translation texts, this observable will emit. There is no initial emit.
get translationChange: Observable<void>
Methods
The language to be used as default.
Returns The code of the default language.
getDefaultLanguage: () => string
(lang: string) => Observable<void>
Sets a new language to be used. If needed, loads the language file.
Returns An observable that emits when the new language is loaded and activated.
Parameters
The language to be used.
lang: string
(lang: string) => void
The language to be used as default.
Parameters
The language code.
lang: string
(lang: string) => void
Parameters
lang: string
(key: string, value: string) => void
If supported by the underlying translation library, this method can be used to add a translation for a specific key.
It is intended to be used for adding the english default value.
It will be called whenever a key within element is resolved.
An implementation of this method must check that it does not override an existing translation.
Parameters
key: string
value: string
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => (TranslationResult<T> | Observable<TranslationResult<T>>)
Translates the key(s) by using the underlying translation library.
Returns Returns the translated key or an object with the translated keys. Depending on the underlying translation library (sync/async) the result will be wrapped in an Observable.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => Observable<TranslationResult<T>>
Translates the key(s) by using the underlying translation library in an asynchronous manner. It will emit each time the active language is changed.
Returns Returns the translated key or an object with the translated keys wrapped in an Observable.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => TranslationResult<T>
Translates the key(s) by using the underlying translation library in a synchronous manner.

Warning: The caller of this function needs to make sure the translation file(s) are already loaded. It is generally not recommended to use this function unless you know exactly what you are doing.

Returns Returns the translated key or an object with the translated keys.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
Properties
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString
Options to turn on date range selection.
enableDateRange?: boolean
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString
Consider time with minDate and maxDate
enableTimeValidation?: boolean
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean
endTimeLabel?: string
hideLabels?: boolean
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean
hoursAriaLabel?: string
hoursLabel?: string
hoursPlaceholder?: string
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean
Maximal (latest) selectable date.
maxDate?: Date
meridians?: string[]
meridiansAriaLabel?: string
meridiansLabel?: string
millisecondsAriaLabel?: string
millisecondsLabel?: string
millisecondsPlaceholder?: string
Minimal (earliest) selectable date.
minDate?: Date
minutesAriaLabel?: string
minutesLabel?: string
minutesPlaceholder?: string
Only month and year are selectable.
onlyMonthSelection?: boolean
secondsAriaLabel?: string
secondsLabel?: string
secondsPlaceholder?: string
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean
Defines the timepicker visibility. Default is false .
showTime?: boolean
startTimeLabel?: string
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart
Translatable
import
It allows to specify a different value between the one which is rendered and the one which is used for the search.
Properties
The icon to be displayed besides value in the typeahead
iconClass?: string
The label to show
label?: TranslatableString
Shows whether the option is selected in the multi-select dropdown
selected?: boolean
The value to use on searching
value: string
() => SiTranslateService
Function

boolean
Property
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
TranslatableString
Property
Text or translation key for the disabled disable time. Default is Ignore time .
boolean
Property
Options to turn on date range selection.
TranslatableString
Property
Text or translation key for the enabled disable time. Default is Consider time .
boolean
Property
Consider time with minDate and maxDate
boolean
Property
Option to use two months view for date range picking.
string
Property
boolean
Property
boolean
Property
Configuration for hiding week numbers. Default is false .
string
Property
string
Property
string
Property
boolean
Property
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
Date
Property
Maximal (latest) selectable date.
string[]
Property
string
Property
string
Property
string
Property
string
Property
string
Property
Date
Property
Minimal (earliest) selectable date.
string
Property
string
Property
string
Property
boolean
Property
Only month and year are selectable.
string
Property
string
Property
string
Property
boolean
Property
Defines the timepicker milliseconds visibility . Default is false .
boolean
Property
Defines the timepicker minutes visibility. Default is true .
boolean
Property
Defines the timepicker seconds visibility . Default is false .
boolean
Property
Defines the timepicker visibility. Default is false .
string
Property
TranslatableString
Property
Text or translation key for today button title. Default is Today .
("monday" | "saturday" | "sunday" | undefined)
WeekStart
Property
Defines the starting day of the week. Default is monday .
(string | { [ key in (string | number) ]: any })
A singular item to be used in the typeahead. Can be either a string or an object.
<T> T extends string ? string : Record<string, string>
implements OnInit, OnChanges, OnDestroy
Constructor
() => {}
Properties
The cache is used to control when the interceptDisplayedCriteria event needs to be called. Every time a criteria gain the focus we have to reset the cache to call the interceptor.
allowedCriteriaCache?: string[]
autoEditCriteria: boolean = false
cdRef: ChangeDetectorRef = ...
Clear button aria label. Needed for a11y
clearButtonLabel: InputSignal<TranslatableString> = $localize`:@@SI_FILTERED_SEARCH.CLEAR:Clear`
Color variant to determine component background
colorVariant: InputSignal<BackgroundColorVariant> = 'base-1'
Predefine criteria options.
criteria: InputSignal<(Criterion[] | CriterionDefinition[])> = []
dataSource: Observable<InternalCriterionDefinition[]>
destroySubscriptions: Subject<boolean> = ...
Disable any interactivity.
disabled: InputSignalWithTransform<boolean, unknown> = false
Disables the free text search to only use the criterion for filtering.
disableFreeTextSearch: InputSignalWithTransform<boolean, unknown> = false
By default, the Filtered Search will treat : as a special character to submit the current input in the freetext and immediately create a criterion. Use this input to disable this behavior.
disableSelectionByColonAndSemicolon: InputSignalWithTransform<boolean, unknown> = false
Output callback event that provides an object describing the selected criteria and additional filter text.
doSearch: OutputEmitterRef<SearchCriteria> = ...
If this is set to true , the search triggers for each input (implicit search). By default, the search is triggered when the user submits by pressing the search button or by pressing enter.
doSearchOnInputChange: InputSignalWithTransform<boolean, unknown> = false
Opt-in to search for each criterion only once.
exclusiveCriteria: InputSignalWithTransform<boolean, unknown> = false
freeTextInputElement: Signal<ElementRef<HTMLInputElement>> = ...
icons: Record<("elementCancel" | "elementSearch"), string> = ...
The interceptor is called when the list of criteria is shown as soon as the user starts typing in the input field. The interceptor's DisplayedCriteriaEventArgs.allow method can be used to filter the list of displayed criteria.

Note: The interceptor is called as long as the searchCriteria does not exceed maxCriteria . Further, the interceptor is not called when using the lazyCriterionProvider .

Example:
<si-filtered-search
  [criteria]="[{ name: 'foo', label: 'Foo' }, { name: 'bar', label: 'Bar' }]"
  (interceptDisplayedCriteria)="$event.allow(
      $event.searchCriteria.criteria.some(s => s.name === 'foo')
        ? $event.criteria.filter(c => c !== 'foo')
        : $event.criteria
    )">
</si-filtered-search>
interceptDisplayedCriteria: OutputEmitterRef<DisplayedCriteriaEventArgs> = ...
Internal criteria model
internalCriterionDefinitions: InternalCriterionDefinition[] = []
isReadOnly: Signal<boolean> = ...
isStrictOrOnlySelectValue: Signal<boolean> = ...
Items count text appended to the count in case of multi-selection of values. Translation key, {{itemCount}} in the translation will be replaced with the actual value.
itemCountText: InputSignal<TranslatableString> = ''
Text or translate key for multi selection pills text.
Deprecated: Use the new input itemCountText instead.
items: InputSignal<TranslatableString> = $localize`:@@SI_FILTERED_SEARCH.ITEMS:items`
lastEmittedSearchCriteria?: SearchCriteria
In addition to lazy loaded value, you can also lazy load the criteria itself
lazyCriterionProvider: InputSignal<(undefined | (typed: string, searchCriteria: SearchCriteria) => Observable<(Criterion[] | CriterionDefinition[])>)> = ...
lazyLoadedCriteria: WritableSignal<(undefined | Criterion[] | CriterionDefinition[])> = ...
Custom debounce time for lazy loading of criteria data.
lazyLoadingDebounceTime: InputSignal<number> = 500
In many cases, your application defines the criteria, but the values need to be loaded from a server. In this case you can provide a function that returns the possible criterion options as an Observable.
lazyValueProvider: InputSignal<(undefined | (criterionName: string, typed: (string | string[])) => Observable<OptionType[]>)> = ...
loadedCriteria: Signal<(Criterion[] | CriterionDefinition[])> = ...
locale: string = ...
Limit the number of possible criteria. The default is undefined so that any number of criteria can be used. For example, setting the value to 1 let you only select one criterion that you need to remove before being able to set another one.
maxCriteria: InputSignal<(undefined | number)> = undefined
Defines the maximum options within one criterion. The default is 20 and 0 means unlimited.
maxCriteriaOptions: InputSignal<number> = 20
Deprecated: This property is unused and will be removed without a replacement.
noMatchingCriteriaText: InputSignal<TranslatableString> = $localize`:@@SI_FILTERED_SEARCH.NO_MATCHING_CRITERIA:No matching criteria`
Limit criterion options to the predefined ones and prevent typing. [onlySelectValue] enforces [strictValue] and [strictCriterion] to true automatically.
onlySelectValue: InputSignalWithTransform<boolean, unknown> = false
Defines the number of criteria, criteria values and operators visible at once.
optionsInScrollableView: InputSignal<number> = 10
The placeholder for input field.
placeholder: InputSignal<string> = ''
Do not allow changes. Search can still be triggered.
Deprecated: Use disabled instead.
readonly: InputSignalWithTransform<boolean, unknown> = false
scrollContainer: Signal<ElementRef<any>> = ...
The current selected search criteria and entered search text.
searchCriteria: ModelSignal<SearchCriteria> = { criteria: [], value: '' }
Custom debounce time (in mills) to delay the search emission. (Default is 0 as in most cases a users manually triggers a search. Recommended to increase a bit when using doSearchOnInputChange=true)
searchDebounceTime: InputSignal<number> = 0
Used to debounce the Search emissions
searchEmitQueue: Subject<(undefined | SearchCriteria)> = ...
Search input aria label, Needed by a11y
searchLabel: InputSignal<TranslatableString> = $localize`:@@SI_FILTERED_SEARCH.SEARCH:Search`
searchValue: string = ''
Deprecated: Setting this property will make it harder for user to submit a search. Instead of using this property to preselect to most relevant option, sort the options by relevance.
selectedCriteriaIndex: InputSignal<(undefined | number)> = ...
Deprecated: This property is unused and will be removed without a replacement.
showIcon: InputSignalWithTransform<boolean, unknown> = false
Limit criteria to the predefined ones.
strictCriterion: InputSignalWithTransform<boolean, unknown> = false
strictCriterionOrValue: Signal<boolean> = ...
Limit criterion options to the predefined ones. [strictValue] enforces [strictCriterion] to true automatically.
strictValue: InputSignalWithTransform<boolean, unknown> = false
The accessible label of the search button.
submitButtonLabel: InputSignal<TranslatableString> = $localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`
Deprecated: This property is unused and will be removed without a replacement. To provide translation for the new search button, use the submitButtonLabel input.
submitText: InputSignal<TranslatableString> = $localize`:@@SI_FILTERED_SEARCH.SUBMIT:Apply search criteria`
translateService: SiTranslateService = ...
Used to trigger a renewed search
typeaheadInputChange: BehaviorSubject<string> = ...
Limit on the number of criteria/criteria value to be displayed by the typeahead
typeaheadOptionsLimit: InputSignal<number> = 20
valueComponents: Signal<readonly SiFilteredSearchValueComponent[]> = ...
values: { config: InternalCriterionDefinition, value: CriterionValue }[] = []
criterionRegex: RegExp = ...
Methods
(config: InternalCriterionDefinition, value: string) => void
Parameters
config: InternalCriterionDefinition
value?: string
Converts the internally used data model to the external model. In case options for Criterion is Option[] map to the value from the label.
convertToExternalModel: () => SearchCriteria
(event: MouseEvent) => void
Deletes all currently selected criteria and effectively resets the filtered search.
Parameters
event?: MouseEvent
(criterion: CriterionValue, index: number, event: (void | { triggerSearch: boolean })) => void
Parameters
criterion: CriterionValue
index: number
event: (void | { triggerSearch: boolean })
emitChangeEvent: () => void
(index: number, event: (void | { freeText: string })) => void
Parameters
index: number
event: (void | { freeText: string })
(event: Event) => void
Parameters
event: Event
freeTextFocus: () => void
(event: Event) => void
Parameters
event: Event
(result: CriterionDefinition[]) => InternalCriterionDefinition[]
Parameters
result: CriterionDefinition[]
(token: string) => InternalCriterionDefinition[]
Get criteria list to be shown in typeahead.
Returns list of criteria to be shown in typeahead.
Parameters
input field value.
token: string
initCriteria: () => void
initValue: () => void
(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
submit: () => void
(event: TypeaheadOption) => void
Parameters
event: TypeaheadOption
updateAndEmitSearchCriteria: () => void
(criterion: InternalCriterionDefinition) => boolean
Parameters
criterion: InternalCriterionDefinition
(value: CriterionValue, criterion: { config: InternalCriterionDefinition, value: CriterionValue }) => void
Parameters
value: CriterionValue
criterion: { config: InternalCriterionDefinition, value: CriterionValue }

Except where otherwise noted, content on this site is licensed under MIT License.