multiselectFacet.tmpl.html

<!-- This is just for a multiselect facet, the others are similar but there's no real "superclass" I can show you -->

<section tt-focus-container tt-focus-order="{{$index}}"
         tt-on-start-of-container="containerBegin(facetController.facet)"
         tt-on-end-of-container="containerEnd(facetController.facet)"
         id="facet-{{facetController.facet.Name}}">
    <div flex layout="row">
        <header class="tt-subheader" style="margin:1.6rem 1.6rem 0 1.6rem;">
            {{facetController.facet.Name}}
        </header>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="facetController.filterExpanded = !facetController.filterExpanded">
            <md-icon class="card-toolbar-view-more-icon" md-font-set="material-icons" ng-show="!facetController.filterExpanded">expand_more</md-icon>
            <md-icon class="card-toolbar-view-more-icon" md-font-set="material-icons" ng-show="facetController.filterExpanded">expand_less</md-icon>
        </md-button>
    </div>
    <md-list ng-show="facetController.filterExpanded">
        <md-list-item ng-repeat="bucket in facetController.facet.Buckets | orderBy: '-Count' | filter:{bucket: Selected}" ng-if="facetController.facet.isShowingMore || $index < 5">
            <md-checkbox class="md-primary" ng-model="bucket.Selected" tt-focus-order="0" tt-focus-item></md-checkbox>
            <div class="md-list-item-text" layout="row" flex>
                <p layout="row" flex>
                    <span flex>{{bucket.Key}}</span>
                    <span>
                        <span class="badge" ng-show="bucket.Count > 0">{{bucket.Count}}</span>
                    </span>
                </p>
            </div>
        </md-list-item>
        <md-list-item ng-click="facetController.facet.isShowingMore = !facetController.facet.isShowingMore" ng-if="facetController.facet.Buckets.length > 5" tt-focus-item tt-focus-order="1"
            aria-label="Show More">
            <p ng-if="facetController.facet.isShowingMore == null || facetController.facet.isShowingMore == false"><b>+ Show More</b></p>
            <p ng-if="facetController.facet.isShowingMore != null && facetController.facet.isShowingMore == true"><b>- Show Less</b></p>
        </md-list-item>
        <div flex layout="row">
            <md-button ng-click="facetController.clearFilter(facet)">Clear All</md-button>
            <span flex></span>
            <md-button ng-click="facetController.applyFilter(facet)">Apply</md-button>
        </div>
    </md-list>
</section>