Filter Bar

Default

The filter bar is used to render a series of filter options, typically in conjunction with some type of datatable. Note that changes to the filter will be logged to the console in this example, they will not actually change the filter's value.

HTML

<div class="t-content c-content" ng-controller="filterBarExampleController as $ctrl">
    <div class="c-filterBar">
        <div class="c-filterBar-filters">
            <div class="c-filterBar-filter">
                <inv-single-select class="c-filterButton is-removable" name="countryName"
                    options="$ctrl.countryOptions"
                    is-removable="$ctrl.isRemovable"
                    on-selected-option="$ctrl.handleSingleSelect"
                    on-remove="$ctrl.handleSingleSelectRemove">
                </inv-single-select>
            </div>
            <div class="c-filterBar-filter">
                <inv-single-select class="c-filterButton is-removable" name="paymentTypeName"
                    options="$ctrl.paymentTypeOptions"
                    is-removable="$ctrl.isRemovable"
                    on-selected-option="$ctrl.handleSingleSelect"
                    on-remove="$ctrl.handleSingleSelectRemove">
                </inv-single-select>
            </div>
            <div class="c-filterBar-filter">
                <inv-single-select class="c-filterButton is-removable" name="deviceTypeName"
                    options="$ctrl.deviceTypeOptions"
                    is-removable="$ctrl.isRemovable"
                    on-selected-option="$ctrl.handleSingleSelect"
                    on-remove="$ctrl.handleSingleSelectRemove">
                </inv-single-select>
            </div>
        </div>
    </div>
</div>

Overflow

The filter bar will overflow any buttons that do not fit into its defined width onto a second line.

HTML

<div class="t-content c-content" ng-controller="filterBarExampleController as $ctrl" style="max-width: 600px;">
    <div class="c-filterBar">
        <div class="c-filterBar-filters">
            <div class="c-filterBar-filter">
                <inv-single-select class="c-filterButton" name="countryName"
                    options="$ctrl.countryOptions"
                    is-removable="$ctrl.isRemovable"
                    on-selected-option="$ctrl.handleSingleSelect"
                    on-remove="$ctrl.handleSingleSelectRemove">
                </inv-single-select>
            </div>
            <div class="c-filterBar-filter">
                <inv-single-select class="c-filterButton" name="paymentTypeName"
                    options="$ctrl.paymentTypeOptions"
                    is-removable="$ctrl.isRemovable"
                    on-selected-option="$ctrl.handleSingleSelect"
                    on-remove="$ctrl.handleSingleSelectRemove">
                </inv-single-select>
            </div>
            <div class="c-filterBar-filter">
                <inv-single-select class="c-filterButton" name="deviceTypeName"
                    options="$ctrl.deviceTypeOptions"
                    is-removable="$ctrl.isRemovable"
                    on-selected-option="$ctrl.handleSingleSelect"
                    on-remove="$ctrl.handleSingleSelectRemove">
                </inv-single-select>
            </div>
        </div>
    </div>
</div>

Expandable

Expandable filter bar that can be shown and hidden based on user interaction.

12/27/2016 - 12/29/2016

Name

First Name

Last Name

Address Line 2

Address Line 1

City

State/Region/Province

Postal Code

This is the content area that gets pushed down.

HTML

<div class="t-content c-content" ng-controller="filterBarExampleController as $ctrl">
    <div class="c-filterBar c-filterBar--expandable" ng-class="{'is-expanded': $ctrl.isSearchOpen || $ctrl.isDateFilterVisible}">
        <div class="c-filterBar-filters">
            <div class="c-filterBar-filter c-filterButton" ng-class="{'is-expanded' : $ctrl.isSearchOpen}" ng-click="$ctrl.isSearchOpen = !$ctrl.isSearchOpen">
                <inv-icon glyph="'search-large'" class="c-expandToggle-categoryIcon"></inv-icon>
                <span class="c-expandToggle-text">Search</span>
                <inv-icon glyph="$ctrl.isSearchOpen ? 'angle-double-up' : 'angle-double-down'" class="c-expandToggle-dropArrow"></inv-icon>
            </div>
            <div class="c-filterBar-filter c-filterButton" ng-class="{'is-expanded' : $ctrl.isDateFilterVisible}" ng-click="$ctrl.isDateFilterVisible = !$ctrl.isDateFilterVisible">
                <inv-icon glyph="'calendar'" class="c-expandToggle-categoryIcon"></inv-icon>
                <span class="c-expandToggle-text">12/27/2016 - 12/29/2016</span>
                <inv-icon glyph="$ctrl.isDateFilterVisible ? 'angle-double-up' : 'angle-double-down'" class="c-expandToggle-dropArrow"></inv-icon>
            </div>
        </div>
        <div class="c-filterBarContent" ng-class="{'is-expanded' : $ctrl.isDateFilterVisible}">
            <inv-datepicker-calendar></inv-datepicker-calendar>
        </div>
        <div class="c-filterBarContent" ng-class="{'is-expanded' : $ctrl.isSearchOpen}">
            <form class="c-filterBarForm">
                <div class="c-filterBarContent-main c-filterParts l-grid">
                    <fieldset class="c-filterPart c-fieldset l-grid-cell u-size1of3">
                        <div class="c-filterPart-title">Name</div>
                        <div class="c-filterPart-item is-required" ng-class="{'is-error': (formApi.FirstName.$touched || formApi.$submitted) && formApi.FirstName.$invalid}">
                            <label for="firstName">First Name</label>
                            <input id="firstName" type="text" placeholder="First Name" required name="FirstName" ng-model="FirstName">
                        </div>
                        <div class="c-filterPart-item is-required">
                            <label for="lastName">Last Name</label>
                            <input id="lastName" type="text" placeholder="Last Name" required name="LastName" ng-model="LastName">
                        </div>
                    </fieldset>
                    <fieldset class="c-filterPart c-fieldset l-grid-cell u-size1of3">
                        <div class="c-filterPart-item">
                            <label for="address2">Address Line 2</label>
                            <input id="address2" type="text" placeholder="Address Line 2">
                        </div>
                        <div class="c-filterPart-item">
                            <label for="address1">Address Line 1</label>
                            <input id="address1" type="text" placeholder="Address Line 1">
                        </div>
                    </fieldset>
                    <fieldset class="c-filterPart c-fieldset l-grid-cell u-size1of3">
                        <div class="c-filterPart-item c-filterPart-item--compact">
                            <label for="city">City</label>
                            <input id="city" type="text" placeholder="City">
                        </div>
                        <div class="c-filterPart-item c-filterPart-item--compact">
                            <label for="state">State/Region/Province</label>
                            <div class="c-select">
                                <select id="state" name="State">
                                    <option value="1">Nebraska</option>
                                    <option value="2">Iowa</option>
                                </select>
                            </div>
                        </div>
                        <div class="c-filterPart-item c-filterPart-item--compact is-required">
                            <label for="Postal">Postal Code</label>
                            <input id="Postal" type="text" placeholder="Zip" name="Postal" ng-model="Postal">
                        </div>
                    </fieldset>
                </div>
                <div class="c-filterBarContent-footer">
                    <div class="c-footer-buttonGroup">
                        <button type="submit" class="c-button c-button--primary">Done</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div style="width: 100%; height: 100px;background-color: #4a4a4a; color: white">
        This is the content area that gets pushed down.
    </div>
</div>

Expandable with One Expansion

Expandable filter bar that can be shown and hidden based on user interaction (with only one expansion button).

Name

First Name

Last Name

Address Line 2

Address Line 1

City

State/Region/Province

Postal Code

This is the content area that gets pushed down.

HTML

<div class="t-content c-content" ng-controller="filterBarExampleController">
    <div class="c-filterBar c-filterBar--expandable" ng-class="{'is-expanded': $ctrl.isSearchOpen || $ctrl.isDateFilterVisible}">
        <div class="c-filterBar-filters">
            <div class="c-filterBar-filter c-filterButton" ng-class="{'is-expanded' : $ctrl.isSearchOpen}" ng-click="$ctrl.isSearchOpen = !$ctrl.isSearchOpen">
                <inv-icon glyph="'search-large'" class="c-expandToggle-categoryIcon"></inv-icon>
                <span class="c-expandToggle-text">Search</span>
                <inv-icon glyph="$ctrl.isSearchOpen ? 'angle-double-up' : 'angle-double-down'" class="c-expandToggle-dropArrow"></inv-icon>
            </div>
        </div>
        <div class="c-filterBarContent" ng-class="{'is-expanded' : $ctrl.isSearchOpen}">
            <form class="c-filterBarForm">
                <div class="c-filterBarContent-main c-filterParts l-grid">
                    <fieldset class="c-filterPart c-fieldset l-grid-cell u-size1of3">
                        <div class="c-filterPart-title">Name</div>
                        <div class="c-filterPart-item is-required" ng-class="{'is-error': (formApi.FirstName.$touched || formApi.$submitted) && formApi.FirstName.$invalid}">
                            <label for="firstName">First Name</label>
                            <input id="firstName" type="text" placeholder="First Name" required name="FirstName" ng-model="FirstName">
                        </div>
                        <div class="c-filterPart-item is-required">
                            <label for="lastName">Last Name</label>
                            <input id="lastName" type="text" placeholder="Last Name" required name="LastName" ng-model="LastName">
                        </div>
                    </fieldset>
                    <fieldset class="c-filterPart c-fieldset l-grid-cell u-size1of3">
                        <div class="c-filterPart-item">
                            <label for="address2">Address Line 2</label>
                            <input id="address2" type="text" placeholder="Address Line 2">
                        </div>
                        <div class="c-filterPart-item">
                            <label for="address1">Address Line 1</label>
                            <input id="address1" type="text" placeholder="Address Line 1">
                        </div>
                    </fieldset>
                    <fieldset class="c-filterPart c-fieldset l-grid-cell u-size1of3">
                        <div class="c-filterPart-item c-filterPart-item--compact">
                            <label for="city">City</label>
                            <input id="city" type="text" placeholder="City">
                        </div>
                        <div class="c-filterPart-item c-filterPart-item--compact">
                            <label for="state">State/Region/Province</label>
                            <div class="c-select">
                                <select id="state" name="State">
                                    <option value="1">Nebraska</option>
                                    <option value="2">Iowa</option>
                                </select>
                            </div>
                        </div>
                        <div class="c-filterPart-item c-filterPart-item--compact is-required">
                            <label for="Postal">Postal Code</label>
                            <input id="Postal" type="text" placeholder="Zip" name="Postal" ng-model="Postal">
                        </div>
                    </fieldset>
                </div>
                <div class="c-filterBarContent-footer">
                    <div class="c-footer-buttonGroup">
                        <button type="submit" class="c-button c-button--primary">Done</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div style="width: 100%; height: 100px;background-color: #4a4a4a; color: white">
        This is the content area that gets pushed down.
    </div>
</div>

Read only filter

Filter bar with read only buttons

HTML

<div class="t-content c-content" ng-controller="filterBarExampleController as $ctrl" style="max-width: 600px;">
    <div class="c-filterBar">
        <div class="c-filterBar-filters">
            <div class="c-filterBar-filter">
                <read-only-filter class="c-filterButton"
                                  ng-if="$ctrl.displayFilter"
                                  filter-text="'Subscription'"
                                  is-removable="true"
                                  on-remove="$ctrl.removeFilter()">
                </read-only-filter>
            </div>
        </div>
    </div>
</div>