Color Facet Component

Owned by Jordan Kasper (Deactivated)
Last updated: Nov 02, 2022
3 min read

Overview

The Color Facet component renders a box with color preview for each value.

Selector

The selector for this component is <hawksearch-color-facet>.

Data Model

The following data model is exposed to the Handlebars template:

interface ColorFacetValue extends FacetValue { visible: boolean; }
{ values: Array<ColorFacetValue>; showToggle: boolean; toggleText: string; expanded: boolean | undefined; }

For more information, see Search Models.

Event Binding Attributes

This component supports the following attributes which are common to all Facet Type Components:

Default Template

<div class="color-facet"> <div class="row row--tight color-facet__items"> {{#each values}} {{#if visible}} <div hawksearch-facet-value="{{value}}" class="column column--2 color-facet__item{{attribute ' color-facet__item--selected' selected}}"> {{#if color.imageUrl}} <img src="{{color.imageUrl}}" class="color-facet__item__image" alt="{{color.name}}" title="{{color.name}}" /> {{else}} <div class="color-facet__item__box" style="background: {{color.hex}};"></div> {{/if}} <span class="color-facet__item__actions"> {{#if excluded}} <span hawksearch-facet-value-include="{{value}}" class="color-facet__item__actions__item" title="Include"> <hawksearch-icon name="plus"></hawksearch-icon> </span> {{else}} <span hawksearch-facet-value-exclude="{{value}}" class="color-facet__item__actions__item" title="Exclude"> <hawksearch-icon name="minus"></hawksearch-icon> </span> {{/if}} </span> </div> {{/if}} {{/each}} </div> {{#if showToggle}} <span hawksearch-facet-toggle class="link facet__toggle">{{toggleText}}</span> {{/if}} </div>