Overview
The Facet Wrapper component adds functionality common to all facet types such as expand/collapse, tooltip, and value search.
Selector
The selector for this component is <hawksearch-facet-wrapper>.
Data Model
The following data model is exposed to the Handlebars template:
type FacetType =
| 'checkbox'
| 'color'
| 'date-range'
| 'link'
| 'numeric-range'
| 'range-slider'
| 'recent-searches'
| 'related-searches'
| 'search'
| 'size'
| 'tabs'
| 'unsupported';
interface FacetValueColor {
name: string;
hex?: string;
imageUrl?: string;
}
interface FacetValue {
title: string;
imageUrl?: string;
value?: string;
color?: FacetValueColor;
count?: number;
level?: number;
selected?: boolean;
excluded?: boolean;
children?: Array<FacetValue>;
}
interface FacetRange<T> {
type: string;
min: T;
max: T;
start: T;
end: T;
}
interface DateFacetRange extends FacetRange<Date> {
type: 'date';
}
interface NumericFacetRange extends FacetRange<number> {
type: 'numeric';
}
interface Facet {
id: number;
type: FacetType;
title: string;
values?: Array<FacetValue>;
field: string;
collapsible: boolean;
collapsed?: boolean;
range?: DateFacetRange | NumericFacetRange;
searchable?: boolean;
searchWithin?: string;
tooltip?: string;
truncateThreshold?: number;
visible: boolean;
}
{
...Facet,
collapsed: boolean;
filter: string;
}
For more information, see Search Models.
Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-facet-heading |
When an element with this attribute is clicked, the collapsed value will be reversed. This is intended to show/hide the list of facet values to make the list of facets more manageable.
Attribute Name | Attribute Value |
|---|---|
hawksearch-facet-search |
When the user types in an input element with this attribute, the list of values will be filtered to show only values containing the entered text.
Attribute Name | Attribute Value |
|---|---|
hawksearch-facet |
The tag for each facet type must have this attribute to have data bound to it.
Default Template
<div class="facet">
<div hawksearch-facet-heading class="facet__heading{{attribute ' facet__heading--collapsible' collapsible}}">
{{title}}
{{#if tooltip}}
<hawksearch-tooltip text="{{tooltip}}"></hawksearch-tooltip>
{{/if}}
{{#if collapsible}}
<hawksearch-icon name="{{if-else collapsed 'chevron-right' 'chevron-down'}}" size="1.5em" class="facet__heading__toggle"></hawksearch-icon>
{{/if}}
</div>
{{#unless collapsed}}
<div class="facet__content">
{{#if searchable}}
<input type="text" placeholder="Quick Lookup" hawksearch-facet-search value="{{filter}}" class="facet__search" />
{{/if}}
{{#if (eq type "checkbox")}}
<hawksearch-checkbox-list-facet hawksearch-facet></hawksearch-checkbox-list-facet>
{{/if}}
{{#if (eq type "color")}}
<hawksearch-color-facet hawksearch-facet></hawksearch-color-facet>
{{/if}}
{{#if (eq type "link")}}
<hawksearch-link-list-facet hawksearch-facet></hawksearch-link-list-facet>
{{/if}}
{{#if (eq type "range-slider")}}
<hawksearch-range-slider-facet hawksearch-facet></hawksearch-range-slider-facet>
{{/if}}
{{#if (eq type "recent-searches")}}
<hawksearch-recent-searches-facet hawksearch-facet></hawksearch-recent-searches-facet>
{{/if}}
{{#if (eq type "related-searches")}}
<hawksearch-related-searches-facet hawksearch-facet></hawksearch-related-searches-facet>
{{/if}}
{{#if (eq type "search")}}
<hawksearch-search-within-facet hawksearch-facet></hawksearch-search-within-facet>
{{/if}}
{{#if (eq type "size")}}
<hawksearch-size-facet hawksearch-facet></hawksearch-size-facet>
{{/if}}
</div>
{{/unless}}
</div>