atomic-rating-range-facet

This is for:

Developer

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-rating-range-facet displays a facet of the results for the current query as ratings. It only supports numeric fields.

Properties

Property Attribute Description Type Default

dependsOn

The required facets and values for this facet to be displayed. Examples:

<atomic-facet facet-id="abc" field="objecttype" ...></atomic-facet>

<!-- To show the facet when any value is selected in the facet with id "abc": -->
<atomic-rating-range-facet
  depends-on-abc
  ...
></atomic-rating-range-facet>

<!-- To show the facet when value "doc" is selected in the facet with id "abc": -->
<atomic-rating-range-facet
  depends-on-abc="doc"
  ...
></atomic-rating-range-facet>

{ [x: string]: 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

filterFacetCount

filter-facet-count

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

boolean

true

headingLevel

heading-level

The heading level to use for the heading over the facet, from 1 to 6.

number

0

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.

When using a custom icon, at least part of your icon should have the color set to fill="currentColor". This part of the SVG will take on the colors set in the following variables:

  • --atomic-rating-icon-active-color

  • --atomic-rating-icon-inactive-color

string

Star

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 Default: 1000

number

1000

isCollapsed

is-collapsed

Specifies whether the facet is collapsed. When the facet is the child of an atomic-facet-manager component, the facet manager controls this property.

boolean

false

label

label

The non-localized label for the facet. Used in the atomic-breadbox component through the bindings store.

string

'no-label'

maxValueInIndex

max-value-in-index

The maximum value in the field’s index and the number of rating icons to display in the facet. This property will default to the same value as numberOfIntervals, if not assigned a value.

number

this.numberOfIntervals

minValueInIndex

min-value-in-index

The minimum value of the field.

number

1

numberOfIntervals

number-of-intervals

The number of options to display in the facet. If maxValueInIndex isn’t specified, it will be assumed that this is also the maximum number of rating icons.

number

5

tabsExcluded

tabs-excluded

The tabs on which this facet must not be displayed. This property should not be used at the same time as tabs-included.

Set this property as a stringified JSON array, e.g.,

 <atomic-timeframe-facet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-timeframe-facet>

If you don’t set this property, the facet can be displayed on any tab. Otherwise, the facet won’t be displayed on any of the specified tabs.

string | string[]

'[]'

tabsIncluded

tabs-included

The tabs on which the facet can be displayed. This property should not be used at the same time as tabs-excluded.

Set this property as a stringified JSON array, e.g.,

 <atomic-timeframe-facet tabs-included='["tabIDA", "tabIDB"]'></atomic-timeframe-facet>

If you don’t set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.

string | string[]

'[]'

Shadow Parts

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.

value-box

The facet value when display is 'box'.

value-box-selected

The selected facet value when display is 'box'.

value-count

The facet value count, common for all displays.

value-label

The facet value label, common for all displays.

value-link

The facet value when display is 'link'.

value-link-selected

The selected facet value when display is 'link'.

values

The facet values container.

CSS Custom Content

Name Description

--atomic-rating-icon-active-color

Color of the icon when active.

--atomic-rating-icon-inactive-color

Color of the icon when inactive.

--atomic-rating-icon-outline

Color of the icon’s outline.