atomic-category-facet

A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences). An atomic-category-facet displays a facet of values in a browsable, hierarchical fashion.

Properties

Property Attribute Description Type Default

basePath

base-path

The base path shared by all values for the facet, separated by commas.

string | undefined

delimitingCharacter

delimiting-character

The character that separates values of a multi-value field.

string

';'

facetId

facet-id

Specifies a unique identifier for the facet.

string | undefined

field (required)

field

The field whose values you want to display in the facet.

string

filterByBasePath

filter-by-base-path

Whether to use basePath as a filter for the results.

boolean

true

filterFacetCount

filter-facet-count

Whether to exclude the parents of folded results when estimating the result count for each facet value.

boolean

true

injectionDepth

injection-depth

The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: 0

number

1000

isCollapsed

is-collapsed

Specifies if the facet is collapsed.

boolean

false

label

label

The non-localized label for the facet.

string

'no-label'

numberOfValues

number-of-values

The number of values to request for this facet. Also determines the number of additional values to request each time more values are shown.

number

8

sortCriteria

sort-criteria

The sort criterion to apply to the returned facet values. Possible values are 'alphanumeric' and 'occurrences'.

"alphanumeric" | "occurrences"

'occurrences'

withSearch

with-search

Whether this facet should contain a search box. When "true", the search is only enabled when more facet values are available.

boolean

false

Shadow Parts

Part Description

active-parent

The non-clickable active parent.

all-categories-button

The "View all" button displayed first along the parents.

back-arrow

The back arrow displayed before the clickable parents.

facet

The wrapper for the entire facet.

label-button

The button that displays the label and allows to expand/collapse the facet.

label-button-icon

The label button icon.

matches-query

The highlighted query inside the matches labels.

more-matches

The label indicating there are more matches for the current facet search query.

no-matches

The label indicating there are no matches for the current facet search query.

parent-button

The clickable parent button.

parents

The parent values container.

placeholder

The placeholder shown before the first search is executed.

ripple

The ripple effect of the component’s interactive elements.

search-clear-button

The button to clear the search box of input.

search-highlight

The highlighted query inside the facet values.

search-icon

The search box submit button.

search-input

The search box input.

search-result

The search result value.

search-result-path

The search result path.

search-results

The search results container.

show-less

The show less results button.

show-more

The show more results button.

show-more-less-icon

The icons of the show more & show less buttons.

value-count

The facet value count.

value-label

The facet value label.

value-link

The child facet value.

values

The facet values child container.

CSS Custom Content

Name Description

--atomic-facet-search-clear-icon-size

The size of the facet search clear icon.

--atomic-facet-search-icon-size

The size of the facet search icon.

Recommended Articles