atomic-rating-facet

This is for:

Developer

In this article

Properties
Shadow Parts
CSS Custom Content
Dependencies

A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences). An atomic-rating-facet displays a facet of the results for the current query as ratings. It only supports numeric fields.

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type	Default
`displayValuesAs`	`display-values-as`	Whether to display the facet values as checkboxes (multiple selection) or links (single selection). Possible values are 'checkbox' and 'link'.	`"checkbox" \| "link"`	`'checkbox'`
`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`
`icon`	`icon`	The SVG icon to use to display the rating. Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. Use a value that starts with `assets://`, to display an icon from the Atomic package. Use a stringified SVG to display it directly.	`string`	`Star`
`isCollapsed`	`is-collapsed`	Specifies if the facet is collapsed.	`boolean`	`false`
`label`	`label`	The non-localized label for the facet.	`string`	`'no-label'`
`maxValueInIndex`	`max-value-in-index`	The maximum value of the field. This value is also used as the number of icons to be displayed.	`number`	`this.numberOfIntervals`
`minValueInIndex`	`min-value-in-index`	The minimum value of the field.	`number`	`1`
`numberOfIntervals`	`number-of-intervals`	The number of intervals to split the index for this facet.	`number`	`5`

displayValuesAs

display-values-as

Whether to display the facet values as checkboxes (multiple selection) or links (single selection). Possible values are 'checkbox' and 'link'.

"checkbox" | "link"

'checkbox'

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

icon

The SVG icon to use to display the rating.

Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.
Use a value that starts with assets://, to display an icon from the Atomic package.
Use a stringified SVG to display it directly.

string

Star

isCollapsed

is-collapsed

Specifies if the facet is collapsed.

boolean

false

label

The non-localized label for the facet.

string

'no-label'

maxValueInIndex

max-value-in-index

The maximum value of the field. This value is also used as the number of icons to be displayed.

number

this.numberOfIntervals

minValueInIndex

min-value-in-index

The minimum value of the field.

number

1

numberOfIntervals

number-of-intervals

The number of intervals to split the index for this facet.

number

5

Shadow Parts

Part Description

Part	Description
`clear-button`	The button that resets the actively selected facet values.
`clear-button-icon`	The clear button icon.
`facet`	The wrapper for the entire facet.
`label-button`	The button that displays the label and toggles to expand or collapse the facet.
`label-button-icon`	The label button icon.
`placeholder`	The placeholder shown before the first search is executed.
`ripple`	The ripple effect of the component’s interactive elements.
`value-checkbox`	The facet value checkbox, available when display is 'checkbox'.
`value-checkbox-label`	The facet value checkbox clickable label, available when display is 'checkbox'.
`value-count`	The facet value count, common for all displays.
`value-link`	The facet value when display is 'link'.
`value-rating`	The facet value rating, common for all displays.
`values`	The facet values container.

clear-button

The button that resets the actively selected facet values.

clear-button-icon

The clear button icon.

facet

The wrapper for the entire facet.

label-button

The button that displays the label and toggles to expand or collapse the facet.

label-button-icon

The label button icon.

placeholder

The placeholder shown before the first search is executed.

ripple

The ripple effect of the component’s interactive elements.

value-checkbox

The facet value checkbox, available when display is 'checkbox'.

value-checkbox-label

The facet value checkbox clickable label, available when display is 'checkbox'.

value-count

The facet value count, common for all displays.

value-link

The facet value when display is 'link'.

value-rating

The facet value rating, common for all displays.

values

The facet values container.

CSS Custom Content

Name Description

Name	Description
`--atomic-facet-checkbox-size`	Size of the checkbox.
`--atomic-facet-checkbox-thickness`	Thickness of the checkbox check.
`--atomic-rating-facet-icon-active-color`	Color of the icon when active.
`--atomic-rating-facet-icon-inactive-color`	Color of the icon when inactive.

--atomic-facet-checkbox-size

Size of the checkbox.

--atomic-facet-checkbox-thickness

Thickness of the checkbox check.

--atomic-rating-facet-icon-active-color

Color of the icon when active.

--atomic-rating-facet-icon-inactive-color

Color of the icon when inactive.