Checkbox List Facet Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated), created
Overview
The Checkbox List Facet component renders a checkbox for each facet and may be nested depending on the configuration in the Hawksearch admin.
Selector
The selector for this component is <hawksearch-checkbox-list-facet>.
Data Model
The following data model is exposed to the Handlebars template:
interface CheckboxListFacetValue extends FacetValue {
visible: boolean;
toggled: boolean;
hasChildren: boolean;
children?: Array<CheckboxListFacetValue>;
}{
values: Array<CheckboxListFacetValue>;
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:
Handlebars Partials
Name | Parameter |
|---|---|
facet-checkbox-list |
|
This partial renders a checkbox for each facet value along with any applicable actions (include, exclude, toggle).
{{#if length}}
<ul class="checkbox-list-facet__list">
{{#each this}}
{{#if visible}}
<li class="checkbox-list-facet__list__item{{attribute ' checkbox-list-facet__list__item--excluded' excluded}}{{attribute ' checkbox-list-facet__list__item--collapsible' hasChildren }}">
<div class="checkbox-list-facet__list__item__content">
{{#if selected}}
<input id="{{@root.id}}-{{value}}" type="checkbox" checked hawksearch-facet-value value="{{value}}" />
{{else}}
<input id="{{@root.id}}-{{value}}" type="checkbox" hawksearch-facet-value value="{{value}}" />
{{/if}}
<label for="{{@root.id}}-{{value}}" class="facet__value">
<span class="facet__value__title checkbox-list-facet__list__item__title">{{title}}</span>
<span class="facet__value__count checkbox-list-facet__list__item__count">({{count}})</span>
</label>
{{#if toggled}}
{{> facet-checkbox-list children}}
{{/if}}
</div>
<div class="checkbox-list-facet__list__item__actions">
{{#if excluded}}
<span hawksearch-facet-value-include="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Include">
<hawksearch-icon name="plus" class="facet__heading__actions__item"></hawksearch-icon>
</span>
{{else}}
<span hawksearch-facet-value-exclude="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Exclude">
<hawksearch-icon name="minus" class="facet__heading__actions__item"></hawksearch-icon>
</span>
{{/if}}
{{#if hasChildren}}
<span hawksearch-facet-value-toggle="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Toggle">
<hawksearch-icon name="{{if-else toggled 'chevron-down' 'chevron-right'}}" class="facet__heading__toggle"></hawksearch-icon>
</span>
{{/if}}
</div>
</li>
{{/if}}
{{/each}}
</ul>
{{/if}}