Page Comparison

interface FacetValueWithStateCheckboxListFacetValue extends FacetValue {
    visible: boolean;
    toggled: boolean;
    hasChildren: boolean;
    children?: Array<FacetValueWithState>Array<CheckboxListFacetValue>;
}

{{#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'">
                        <input{{#if selected}}
                            <input id='"{{@root.id}}-{{value}}'
                            type='checkbox'
   " type="checkbox" checked hawksearch-facet-value value="{{value}}" />
                        {{attribute 'checked' selectedelse}}
                            <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}}

<div class="checkbox-list-facet">
    {{> facet-checkbox-list values}}
    {{#if showToggle}}
        <a<span hawksearch-facet-toggle class='"link facet__toggle'">{{toggleText}}</a>span>
    {{/if}}
</div>