Class FacetWrapperComponent

The Facet Wrapper component adds functionality common to all facet types such as expand/collapse, tooltip, and value search.

Tag

The tag for this component is <hawksearch-facet-wrapper>.

Event-Binding Attributes

Name 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.

Name Value
hawksearch-facet-search

When the user types in an input element with this attribute, the values collection will be filtered to show only values containing the entered text.

Name Value
hawksearch-facet

The tag for each facet type must have this attribute to have data bound to it.

This helper function returns the zero-padded day of the month from a provided date object.

Default Template

The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.

<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 "date-range")}}
                <hawksearch-date-range-facet hawksearch-facet></hawksearch-date-range-facet>
            {{/if}}
            {{#if (eq type "link")}}
                <hawksearch-link-list-facet hawksearch-facet></hawksearch-link-list-facet>
            {{/if}}
            {{#if (eq type "numeric-range")}}
                <hawksearch-numeric-range-facet hawksearch-facet></hawksearch-numeric-range-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>

Hierarchy

Properties

bindFromEvent componentName configOverride? contentModel? data? defaultHtml handlebars state

Accessors

configuration rootElement

Methods

bindChildElements getContentModel interpolate onRender registerHelpers render renderContent triggerEvent

Properties

Protected bindFromEvent

bindFromEvent: boolean = false

Protected componentName

componentName: keyof HawkSearchComponents = 'facet-wrapper'

Optional configOverride

configOverride?: FacetWrapperComponentConfig

Optional instance-level configuration to override the global configuration

Protected Optional contentModel

contentModel?: FacetWrapperComponentModel

The data bound to the Handlebars template.

Optional data

data?: Facet

The data bound to the component.

Protected defaultHtml

defaultHtml: string = defaultHtml

Protected handlebars

handlebars: typeof Handlebars = HawkSearch.handlebars

The Handlebars reference shared by all HawkSearch components.

state

state: FacetState

Accessors

Protected configuration

  • get configuration(): undefined | TConfig

  • The optional configuration object for this component.

    Returns undefined | TConfig

rootElement

  • get rootElement(): ParentNode

  • The root element which should be used for querying any child elements. This resolves to this.shadowRoot if the Shadow DOM is enabled, otherwise this.

    Returns ParentNode

Methods

Protected bindChildElements

  • After the component is rendered, this method is called to bind any child components.

    Returns void

Protected getContentModel

Protected interpolate

  • Replaces placeholders in a given string with values from a data object.

    Parameters

    • template: string

      The template string.

    • values: Record<string, string>

      The object containing properties which will be bound to template.

    Returns string

    The template string with all placeholders replaced by the values specified in values.

Protected onRender

  • After the component is rendered, this method is called for any additional processing (such as attaching event listeners) which needs to occur.

    Returns void

Protected registerHelpers

  • Optional method that can be overwritten to register Handlebars helper functions which can be accessed from the template. For more information, see Custom Helpers.

    Returns void

render

Protected renderContent

  • Determines whether the data meets the necessary conditions to perform data binding and render content.

    Returns boolean

    Whether the component should be rendered. If false, the component will have empty contents and be set to display: none;.

Protected triggerEvent

  • Type Parameters

    • T

    Parameters

    • name: string
    • data: T

    Returns void

Settings

Member Visibility

Theme

On This Page