Selectors

Selectors are UI components that are used to select one or more values from a range of values.

Default

Single select filters are by default non-removable. They expect the container component to dictate their rendering height.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="singleSelectExampleController as controller">
        <inv-single-select
            name="controller.name"
            options="controller.options"
            on-selected-option="controller.onOptionSelect">
        </inv-single-select>
        <inv-single-select
            name="controller.name2"
            options="controller.options2"
            on-selected-option="controller.onOptionSelect2">
        </inv-single-select>
    </div>
</div>

Single Select Non-Removable

You can explicitly specify a filter to be non-removable.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="singleSelectExampleController as controller">
        <inv-single-select
            name="controller.name"
            options="controller.options"
            is-removable="controller.nonRemovable"
            on-selected-option="controller.onOptionSelect"
            on-remove="controller.onRemoveFilter">
        </inv-single-select>
    </div>
</div>

Templated Single Select

Just like 'Single Select Non-Removable' but you can assign a custom template for the options in the popout

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="templatedSingleSelectExampleController as controller">
        <inv-single-select
            template="controller.template"
            options="controller.options"
            on-selected-option="controller.onOptionSelect">
        </inv-single-select>
    </div>
</div>

Pricing Single Select

A single select customized to display pricing information

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="singleSelectExampleController as controller">
        <inv-pricing-single-select
            name="controller.pricingPlanExampleName"
            options="controller.pricingPlanExampleOptions"
            is-removable="controller.nonRemovable"
            on-selected-option="controller.pricingPlanExampleOnOptionSelect"
            on-remove="controller.onRemoveFilter">
        </inv-pricing-single-select>
    </div>
</div>

Simple Single Select

A toned down version of a selector which has the popout representing the options

Using `is-growable` option to set `max-width: 100%`

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="singleSelectExampleController as controller">
        <inv-simple-single-select
            name="controller.name"
            options="controller.options"
            on-selected-option="controller.onOptionSelect">
        </inv-simple-single-select>
    </div>
</div>

<em class="u-block u-p u-mt">
    Using `is-growable` option to set `max-width: 100%`
</em>

Single Select Removable

Filter that allows for a single selection only and is removable

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="singleSelectExampleController as controller">
        <inv-single-select
            name="controller.name"
            options="controller.options2"
            is-removable="controller.isRemovable"
            on-selected-option="controller.onOptionSelect2"
            on-remove="controller.onRemoveFilter2">
        </inv-single-select>
    </div>
</div>

Single Select Search

Filter that allows for a single selection for a search field

options: (array object) - The array of options that will be displayed in the select.

on-selected-option: (function) - Callback function to receive the selected value.

on-cleared-text: (function) - Optional callback function to trigger when clicking the "x" icon.

search-name: (string) - Optional prefix value for single select (eg. <-prefix value->: ID).

placeholder: (string) - Optional search input placeholder value.

popup-position: (string) - Optional value to change the popup position.

popup-attachment: (string) - Optional value to change the popup attachment.

HTML

<div style="padding-bottom: 8px">
    <div><b>options:</b> (array object) - The array of options that will be displayed in the select.</div>
    <div><b>on-selected-option:</b> (function) - Callback function to receive the selected value.</div>
    <div><b>on-cleared-text:</b> (function) - Optional callback function to trigger when clicking the "x" icon.</div>
    <div><b>search-name:</b> (string) - Optional prefix value for single select (eg. <-prefix value->: ID).</div>
    <div><b>placeholder:</b> (string) - Optional search input placeholder value.</div>
    <div><b>popup-position:</b> (string) - Optional value to change the popup position.</div>
    <div><b>popup-attachment:</b> (string) - Optional value to change the popup attachment.</div>
</div>

<div class="t-content" style="width: 500px;"
     ng-controller="selectSearchExampleController as controller">
    <inv-single-select-search
        options="controller.options"
        ng-change="controller.searchChanged()"
        ng-model="controller.searchText"
        on-selected-option="controller.onOptionSelect">
    </inv-single-select-search>

    <inv-single-select-search class="u-mt++"
        search-name="'Custom'"
        placeholder="'Search products...'"
        popup-position="top center"
        popup-attachment="bottom right"
        options="controller.options"
        ng-change="controller.searchChanged()"
        ng-model="controller.searchText"
        on-selected-option="controller.onOptionSelect">
    </inv-single-select-search>
</div>

A Basic Multi Select

Basic menu. This takes in a collection of item object, and will return the selected item object upon user click on that object.

An optional enable-select-all can be specified. This shows the "Select All" shortcut.
An optional show-only-options can be specified. This hides the search input and selectable shortcuts.

HTML

An optional enable-select-all can be specified. This shows the "Select All" shortcut.
<br>
An optional show-only-options can be specified. This hides the search input and selectable shortcuts.

<div class="t-content" ng-controller="multiSelectExampleController as controller">
    <inv-multi-select
        name="controller.name"
        options="controller.options"
        is-removable="false"
        filter-placeholder-text="Search"
        on-selection-changed="controller.onSelectedItemsChanged"
        enable-select-all="true">
    </inv-multi-select>
    <inv-multi-select
        name="controller.name"
        options="controller.options"
        is-removable="false"
        filter-placeholder-text="Search"
        on-selection-changed="controller.onSelectedItemsChanged"
        show-only-options="true">
    </inv-multi-select>
</div>

A Disabled Multi Select

Disabled Multi Select filter that doesn't allow for a selection

HTML

<div class="t-content">
    <div ng-controller="multiSelectExampleController as controller">
        <inv-multi-select
            name="controller.name"
            is-disabled="true"
            options="controller.options"
            is-removable="true"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            on-selection-changed="controller.onSelectedItemsChanged"
            enable-select-all="true">
        </inv-multi-select>
    </div>
</div>

A Basic Removable Multi Select

Basic menu. This takes in a collection of item object, and will return the selected item object upon user click on that object.

HTML

<div class="t-content">
    <div ng-controller="multiSelectExampleController as controller">
        <inv-multi-select
            name="controller.name"
            options="controller.options"
            is-removable="true"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            on-selection-changed="controller.onSelectedItemsChanged"
        >
        </inv-multi-select>
    </div>
</div>

A Multi Select disabled apply

Multi Select with the ability to pass in an optional function to disable the apply button.

HTML

<div class="t-content">
    <div ng-controller="multiSelectExampleController as controller">
        <inv-multi-select
                name="controller.name"
                options="controller.options"
                filter-placeholder-text="Search"
                on-selection-changed="controller.onSelectedItemsChanged"
                selection-validation-delegate="controller.disableApply"
        >
        </inv-multi-select>
    </div>
</div>

Show multi select selections in the target

You can choose to show the selected items in the target. Defaults to 'true'

HTML

<div class="t-content" ng-init="appId = 'reporting';">
    <inv-app-theme app-id="appId"></inv-app-theme>
    <div ng-controller="multiSelectExampleController as controller">
        <inv-multi-select
            name="controller.name"
            options="controller.options"
            is-removable="true"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            on-selection-changed="controller.onSelectedItemsChanged"
            show-selected-in-target="true">
        </inv-multi-select>
        <inv-multi-select
            name="controller.name"
            options="controller.options"
            is-removable="true"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            on-selection-changed="controller.onSelectedItemsChanged"
            show-selected-in-target="false">
        </inv-multi-select>
    </div>
</div>

Multi Select with no selections target text

You can specify the text to be shown when no options are selected.

HTML

<div class="t-content">
    <div ng-controller="multiSelectExampleController as controller">
        <inv-multi-select
                name="controller.name"
                options="controller.options"
                on-remove="controller.onRemoveFilter"
                filter-placeholder-text="Search"
                on-selection-changed="controller.onSelectedItemsChanged"
                >
        </inv-multi-select>
        <inv-multi-select
            name="controller.name"
            options="controller.options"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            empty-placeholder-text="All"
            on-selection-changed="controller.onSelectedItemsChanged"
        >
        </inv-multi-select>
    </div>
</div>

A Basic Multi Select with Suboptions

Multi Select with suboptions. This takes in a collection of item objects with suboptions, and will return the selected item object upon user click on the object.

HTML

<div class="t-content" ng-controller="multiSelectSuboptionsExampleController as controller" style="display: flex;">
    <inv-multi-select
            name="controller.name"
            options="controller.options"
            is-removable="false"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search..."
            on-selection-changed="controller.onSelectionChanged"
    >
    </inv-multi-select>
</div>

Multi Select Async

Filter with that allows for a multiple selections and uses an async search

HTML

<div class="t-content">
    <div ng-controller="multiSelectAsyncExampleController as controller">
        <inv-multi-select-async
            name="controller.name"
            options="controller.options"
            selected="controller.selected"
            is-removable="false"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            on-selection-changed="controller.onSelectedItemsChanged"
            on-async-search="controller.asyncSearchFunc"
            is-processing="controller.isProcessing"
            is-disabled="false"
        >
        </inv-multi-select-async>
    </div>
</div>

Fancy Single Select

Fancy filter that allows for a single selection only

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="fancySingleSelectExampleController as controller">
        <inv-fancy-single-select
            name="controller.name"
            options="controller.options"
            is-removable="controller.nonRemovable"
            filter-placeholder-text="Search..."
            on-change="controller.exampleOptionSelected">
        </inv-fancy-single-select>
    </div>
</div>

Fancy Single Select With Search Delegate

Fancy filter that allows for a single selection and can specify search delegate

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="fancySingleSelectExampleController as controller">
        <inv-fancy-single-select
                name="controller.name"
                options="controller.options"
                is-removable="controller.nonRemovable"
                filter-placeholder-text="Search..."
                on-change="controller.exampleOptionSelected"
                search-delegate="controller.searchDelegate">
        </inv-fancy-single-select>
    </div>
</div>

Fancy Single Select With Single Select Search

Fancy filter that has single select search to search by different options. We need to pass the search options and single select flag to enable it. Function binding for filter can be passed through existing bindings.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="fancySingleSelectExampleController as controller">
        <inv-fancy-single-select
            name="'Code Type'"
            options="controller.singleSelectOptions"
            is-removable="false"
            is-Clearable="true"
            is-single-select-search="true"
            filter-placeholder-text="Search..."
            search-options="controller.singleSelectSearchOptions"
            search-delegate="controller.searchDelegate"
            on-change-search="controller.onFilterChanged">
        </inv-fancy-single-select>
    </div>
</div>

Fancy Single Select With Icons

Fancy filter that allows for a single selection only and displays icons per option

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="fancySingleSelectIconsExampleController as controller">
        <inv-fancy-single-select
                name="controller.name"
                options="controller.options"
                is-removable="controller.nonRemovable"
                filter-placeholder-text="Search..."
                on-change="controller.exampleOptionSelected">
        </inv-fancy-single-select>
    </div>
</div>

Fancy Single Cascaded Select

Fancy filter that allows for a single cascaded selection only

HTML

<div class="t-content"
     style="display: flex; align-items: stretch; height: 2em;"
     ng-controller="FancySingleCascadedSelectExampleController as controller">
    <inv-fancy-single-select
            name="controller.name"
            options="controller.options"
            is-removable="controller.nonRemovable"
            filter-placeholder-text="Search..."
            on-change="controller.exampleOptionSelected">
    </inv-fancy-single-select>
</div>

Disabled Fancy Single Select

Disabled Fancy filter that doesn't allow for a selection

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="fancySingleSelectExampleController as controller">
        <inv-fancy-single-select
                name="controller.name"
                is-disabled="true"
                options="controller.options"
                is-removable="controller.nonRemovable"
                filter-placeholder-text="Search..."
                on-change="controller.exampleOptionSelected">
        </inv-fancy-single-select>
    </div>
</div>

Advanced Select

An advanced select which opens a Rich List Dialog to easily locate the desired item.

dialog-title: (string) - The title for the rich list dialog.

value: (object) - The selected object.

options: (object) The array of objects you need to search through.

placeholder: (string) - The link text for when there is no value.

primary-label-key: (string) - The object's key to use for the main display label.

secondary-label-key: (string) - The object's key to use for the sub display label.

sort-items: (array object) The object to provide the sorting keys, text, and optional sortFunction.

api-criteria: (object) - Criteria that will be passed to the api on every call. This is criteria additional to the search filter.

is-api-searching: (boolean) - When paging by API, the selector state which will control the loading indicator.

api-search-error-key: (string) - The translation key for the api error toast message.

api-search-translated-error:(string) - The translated error from the selector for a failed api call.

pager: (boolean) - Show or hide the pager (pages 20 items per page)

pager-api: (function) - The api to call when paging through the rich list.

pager-size: (integer, defaults to 20) - Number of items per page when paging.

hide-remove: (boolean) Whether to hide the "Remove" link option.

is-disabled: (boolean) Whether or not the field is disabled.

is-loading: (boolean) Whether or not the field values are loading.

on-value-changed: Function - Callback function to receive the selected value.

No value

Set Value

Disabled

Is Loading

HTML

<div style="padding-bottom: 8px">
    <div><b>dialog-title:</b> (string) - The title for the rich list dialog.</div>
    <div><b>value:</b> (object) - The selected object.</div>
    <div><b>options:</b> (object) The array of objects you need to search through.</div>
    <div><b>placeholder:</b> (string) - The link text for when there is no value.</div>
    <div><b>primary-label-key:</b> (string) - The object's key to use for the main display label.</div>
    <div><b>secondary-label-key:</b> (string) - The object's key to use for the sub display label.</div>
    <div><b>sort-items:</b> (array object) The object to provide the sorting keys, text, and optional sortFunction.</div>
    <div><b>api-criteria:</b> (object) - Criteria that will be passed to the api on every call. This is criteria additional to the search filter.</div>
    <div><b>is-api-searching:</b> (boolean) - When paging by API, the selector state which will control the loading indicator.</div>
    <div><b>api-search-error-key:</b> (string) - The translation key for the api error toast message.</div>
    <div><b>api-search-translated-error:</b>(string) - The translated error from the selector for a failed api call.</div>
    <div><b>pager:</b> (boolean) - Show or hide the pager (pages 20 items per page)</div>
    <div><b>pager-api:</b> (function) - The api to call when paging through the rich list.</div>
    <div><b>pager-size:</b> (integer, defaults to 20) - Number of items per page when paging.</div>
    <div><b>hide-remove:</b> (boolean) Whether to hide the "Remove" link option.</div>
    <div><b>is-disabled:</b> (boolean) Whether or not the field is disabled.</div>
    <div><b>is-loading:</b> (boolean) Whether or not the field values are loading.</div>
    <div><b>on-value-changed:</b> Function - Callback function to receive the selected value.</div>
</div>

<div class="t-content c-generalForm" ng-controller="AdvancedSelectExampleController as $ctrl">
    <fieldset class="c-fieldset">
        <div><b>No value</b></div>
        <div class="c-fieldset-item">
            <inv-advanced-select
                dialog-title="'Select An Example'"
                options="$ctrl.exampleList"
                value="$ctrl.exampleValueNull"
                placeholder="'Select Example Customer'"
                primary-label-key="'name'"
                secondary-label-key="'birthday'"
                sort-items="$ctrl.sortItems"
                pager="true"
                on-value-changed="$ctrl.handleNullValueChange(value)">
            </inv-advanced-select>
        </div>

        <br>
        <div><b>Set Value</b></div>
        <div class="c-fieldset-item">
            <inv-advanced-select
                dialog-title="'Select An Example'"
                options="$ctrl.exampleList"
                value="$ctrl.exampleValue1"
                placeholder="'Select Example Customer'"
                primary-label-key="'name'"
                secondary-label-key="'birthday'"
                sort-items="$ctrl.sortItems"
                pager="true"
                on-value-changed="$ctrl.handleValueChange(value)">
            </inv-advanced-select>
        </div>

        <br>
        <div><b>Disabled</b></div>
        <div class="c-fieldset-item is-disabled">
            <inv-advanced-select
                dialog-title="'Select An Example'"
                options="$ctrl.exampleList"
                value="$ctrl.exampleValueDisabledNull"
                placeholder="'Select Example Customer'"
                primary-label-key="'name'"
                secondary-label-key="'birthday'"
                is-disabled="true"
                on-value-changed="$ctrl.handleValueChange(value)">
            </inv-advanced-select>
        </div>
        <div class="c-fieldset-item is-disabled">
            <inv-advanced-select
                dialog-title="'Select An Example'"
                options="$ctrl.exampleList"
                value="$ctrl.exampleValueDisabled"
                placeholder="'Select Example Customer'"
                primary-label-key="'name'"
                secondary-label-key="'birthday'"
                is-disabled="true"
                on-value-changed="$ctrl.handleValueChange(value)">
            </inv-advanced-select>
        </div>

        <br>
        <div><b>Is Loading</b></div>
        <div class="c-fieldset-item">
            <inv-advanced-select
                dialog-title="'Select An Example'"
                options="$ctrl.exampleList"
                value="$ctrl.exampleValueDisabledNull"
                placeholder="'Select Example Customer'"
                primary-label-key="'name'"
                secondary-label-key="'birthday'"
                is-loading="true"
                on-value-changed="$ctrl.handleValueChange(value)">
            </inv-advanced-select>
        </div>
        <div class="c-fieldset-item">
            <inv-advanced-select
                dialog-title="'Select An Example'"
                options="$ctrl.exampleList"
                value="$ctrl.exampleValueDisabled"
                placeholder="'Select Example Customer'"
                primary-label-key="'name'"
                secondary-label-key="'birthday'"
                is-loading="true"
                on-value-changed="$ctrl.handleValueChange(value)">
            </inv-advanced-select>
        </div>
    </fieldset>
</div>

Date Picker Filter

Simple button that spawns a single date selector component which automatically applies the selected date.

Another example shows a date picker that has a default value to start.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="datePickerExampleController as exampleController">
        <inv-date-picker min-date="exampleController.minDate"
                        max-date="exampleController.maxDate"
                        date="exampleController.date"
                        on-date-changed="exampleController.onDateChanged(date)"
                        render-mode="exampleController.single">
        </inv-date-picker>
    </div>
    <p>Another example shows a date picker that has a default value to start.</p>
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="datePickerWithValueExampleController as exampleController">
        <inv-date-picker min-date="exampleController.minDate"
                        max-date="exampleController.maxDate"
                        date="exampleController.date"
                        on-date-changed="exampleController.onDateChanged(date)"
                        render-mode="exampleController.single">
        </inv-date-picker>
    </div>
</div>

Date Picker

Simple button that spawns a date component. This component has an optional time and/or time zone segment.

hide-input: (boolean) Hide the input field.

hide-hour: (boolean) Hide the time portion of the date. The time will be set at 00:00 or 00:00:00 depending on the show-seconds attribute.

hide-utc-offset: (boolean) Hide the time zone offset portion of the date. The UTC offset will be whatever was passed on the model date.

hide-clear: (boolean) Hide the clear button.

hide-relational-time: (boolean) Hide the relational time text. The relational time is not shown if date is null.

is-icon-variant: (boolean) Display the selector as an icon.

is-not-focusable: (boolean) Set the selector to not be focusable.

min-date: (date) The minimum allowed date.

max-date: (date) The maximum allowed date.

placeholder: (string) Set a custom placeholder.

show-seconds: (boolean) Show the seconds portion of the time.

end-of-day: (boolean) The time will be set at 23:59 or 23:59:59 depending on the show-seconds attribute.

is-defaulted-to-end-of-day: (boolean) The time will be set at 23:59 or 23:59:59 depending on the show-seconds attribute but will allow time changes, once the date is selected will reset the time back to 23:59 or 23:59:59. NOTE: If end-of-day is set to true end-of-day config will take over

Date:

Date and Time:

Date, Time and Time Zone:

Disabled:

End of Day:

Defaulted to End of Day:

The component may also be used in conjunction with form-field-error-messages as long as it's used with ng-model and set as `required`.

HTML

<div style="padding-bottom: 8px">
    <div><b>hide-input:</b> (boolean) Hide the input field.</div>
    <div><b>hide-hour:</b> (boolean) Hide the time portion of the date. The time will be set at 00:00 or 00:00:00 depending on the show-seconds attribute.</div>
    <div><b>hide-utc-offset:</b> (boolean) Hide the time zone offset portion of the date. The UTC offset will be whatever was passed on the model date.</div>
    <div><b>hide-clear:</b> (boolean) Hide the clear button.</div>
    <div><b>hide-relational-time:</b> (boolean) Hide the relational time text. The relational time is not shown if date is null.</div>
    <div><b>is-icon-variant:</b> (boolean) Display the selector as an icon.</div>
    <div><b>is-not-focusable:</b> (boolean) Set the selector to not be focusable.</div>
    <div><b>min-date:</b> (date) The minimum allowed date.</div>
    <div><b>max-date:</b> (date) The maximum allowed date.</div>
    <div><b>placeholder:</b> (string) Set a custom placeholder.</div>
    <div><b>show-seconds:</b> (boolean) Show the seconds portion of the time.</div>
    <div><b>end-of-day:</b> (boolean) The time will be set at 23:59 or 23:59:59 depending on the show-seconds attribute.</div>
    <div><b>is-defaulted-to-end-of-day:</b> (boolean) The time will be set at 23:59 or 23:59:59 depending on the show-seconds attribute but will allow time changes, once the date is selected will reset the time back to 23:59 or 23:59:59. <b>NOTE:</b> If <code>end-of-day</code> is set to true end-of-day config will take over</div>
</div>
<div class="t-content" ng-controller="DateTimeSelectorExampleController as controller" inv-focus-group>
    <ng-form class="c-generalForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <b>Date:</b>
            <div style="display: flex;">
                <inv-date-time-selector date="controller.date"
                                        hide-utc-offset="true"
                                        hide-hour="true"
                                        hide-relational-time="true"
                                        min-date="controller.minDate"
                                        max-date="controller.maxDate"
                                        on-date-changed="controller.onDateOnlyChange">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        date="controller.noDate"
                                        hide-utc-offset="true"
                                        hide-hour="true"
                                        hide-relational-time="true"
                                        min-date="controller.minDate"
                                        max-date="controller.maxDate"
                                        on-date-changed="controller.onNoSetDateChange">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        is-icon-variant="true"
                                        date="controller.date"
                                        hide-hour="true"
                                        hide-relational-time="true"
                                        min-date="controller.minDate"
                                        max-date="controller.maxDate"
                                        on-date-changed="controller.onDateOnlyChange">
                </inv-date-time-selector>
            </div><br>

            <b>Date and Time:</b>
            <div style="display: flex;">
                <inv-date-time-selector date="controller.dateTime"
                                        hide-utc-offset="true"
                                        hide-relational-time="true"
                                        on-date-changed="controller.onDateTimeChange">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        date="controller.dateTime"
                                        show-seconds="true"
                                        hide-utc-offset="true"
                                        hide-relational-time="true"
                                        on-date-changed="controller.onDateTimeChange">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        is-icon-variant="true"
                                        date="controller.dateTime"
                                        hide-relational-time="true"
                                        on-date-changed="controller.onDateTimeChange">
                </inv-date-time-selector>
            </div><br>

            <b>Date, Time and Time Zone:</b>
            <div style="display: flex;">
                <inv-date-time-selector date="controller.dateTimeAndZone"
                                        on-date-changed="controller.onDateTimeAndZoneChange">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        date="controller.dateTimeAndZone"
                                        show-seconds="true"
                                        date="controller.noDate"
                                        on-date-changed="controller.onNoSetDateChange">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        date="controller.noDate"
                                        on-date-changed="controller.onNoSetDateChange">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        is-icon-variant="true"
                                        date="controller.dateTimeAndZone"
                                        on-date-changed="controller.onDateTimeAndZoneChange">
                </inv-date-time-selector>
            </div><br>

            <b>Disabled:</b>
            <div style="display: flex;">
                <inv-date-time-selector date="controller.disabledDate"
                                        on-date-changed="controller.disabledDateChange"
                                        is-disabled="true">
                </inv-date-time-selector>

                <inv-date-time-selector style="margin-left: 20px;"
                                        is-icon-variant="true"
                                        date="controller.disabledDate"
                                        on-date-changed="controller.disabledDateChange"
                                        is-disabled="true">
                </inv-date-time-selector>
            </div><br>

            <b>End of Day:</b>
            <div style="display: flex;">
                    <inv-date-time-selector date="controller.endOfDayDate"
                                        hide-utc-offset="true"
                                        hide-relational-time="true"
                                        on-date-changed="controller.onDateTimeAndEndOfDayChange"
                                        end-of-day="true">
                    </inv-date-time-selector>
            </div><br>

            <b>Defaulted to End of Day:</b>
            <div style="display: flex;">
                <inv-date-time-selector date="controller.defaultEndOfDayDate"
                                        hide-utc-offset="true"
                                        hide-relational-time="true"
                                        on-date-changed="controller.onDateTimeAndEndOfDayChange"
                                        is-defaulted-to-end-of-day="true">
                </inv-date-time-selector>
            </div>


            <p>The component may also be used in conjunction with form-field-error-messages as long as it's used with ng-model and set as `required`.</p>
            <form class="c-generalForm" autocomplete="off" ng-controller="formErrorsExampleController as errorController" ng-submit="" novalidate>
                <fieldset class="c-fieldset">
                    <form-error-messages
                        extra-error-messages="['This is an extra error message.','This is a good place to convey errors from the API.']">
                    </form-error-messages>
                    <div class="c-generalForm-instruction">
                        These are form-level instructions, which should appear beneath any errors.
                    </div>
                    <div class="c-fieldset-item is-required"
                        form-field-error-state="someDate"
                        form-field-locale-key="uiModule.creditcard.expiration_date">
                        <label for="someDate">Some Date</label>
                        <inv-date-time-selector
                            name="someDate"
                            is-icon-variant="true"
                            date="controller.dateRandom"
                            hide-utc-offset="true"
                            hide-hour="true"
                            min-date="controller.minDate"
                            max-date="controller.maxDate"
                            ng-model="someModel"
                            required>
                        </inv-date-time-selector>
                        <form-field-error-messages name="someDate"></form-field-error-messages>
                    </div>
                </fieldset>
            </form>
        </fieldset>
    </ng-form>
</div>

Date Range Filter

Simple filter button that spawns a date range picker component.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="dateRangeExampleController as controller">
        <inv-date-range shortcuts="controller.shortcuts"
                        selected-shortcut="controller.selectedShortcut"
                        min-date="controller.minDate"
                        max-date="controller.maxDate"
                        start-date="controller.selectedStart"
                        end-date="controller.selectedEnd"
                        on-date-range-changed="controller.onDateRangeChanged(start, end, selectedShortcut)"
                        entry-mode="date-time">
        </inv-date-range>
    </div>
</div>

Date Range Filter With Options

Simple filter button that spawns a date range picker component with options enable.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="dateRangeOptionsExampleController as controller">
        <inv-date-range-options shortcuts="controller.shortcuts"
                        selected-shortcut="controller.selectedShortcut"
                        selected-option="controller.selectedOption"
                        min-date="controller.minDate"
                        max-date="controller.maxDate"
                        start-date="controller.selectedStart"
                        end-date="controller.selectedEnd"
                        on-date-range-changed="controller.onDateRangeChanged(start, end, selectedShortcut, selectedOption)"
                        options-data="controller.optionsData"
                        entry-mode="date-time">
        </inv-date-range-options>
    </div>
</div>

Date Range Filter with Switcher

Simple filter button that spawns a date range picker component with switcher.

selected-start:

selected-end:

selected-shortcut:

HTML

<div class="t-content"
     ng-controller="daterangeSwitcherExampleController as controller">

    <div style="height: 2em;">
        <inv-date-range-switcher shortcuts="controller.shortcuts"
                                 selected-shortcut="controller.selectedShortcut"
                                 start-date="controller.selectedStart"
                                 end-date="controller.selectedEnd"
                                 min-date="controller.minDate"
                                 max-date="controller.maxDate"
                                 entry-mode="date-time"
                                 show-apply-all="true"
                                 immediate-selection-in-quick-mode="false"
                                 is-removable="true"
                                 on-date-range-changed="controller.onDateRangeChanged"
        ></inv-date-range-switcher>
    </div>
    <div style="padding: 8px">
        <div><strong>selected-start:</strong> <span ng-bind="controller.current.start"></span></div>
        <div><strong>selected-end:</strong> <span ng-bind="controller.current.end"></span></div>
        <div><strong>selected-shortcut:</strong> <span ng-bind="controller.current.shortcut.label"></span></div>
    </div>
</div>

Date Range Filter with Switcher and Apply All

Simple filter button that spawns a date range picker component with switcher and Apply All button.

By setting show-apply-all="true" would show the Apply All button, and dispatch on-apply-all-date-range-changed event when the Apply All button is clicked.

Set immediate-selection-in-quick-mode="false", the picker will show Apply/Cancel (and Apply All if set to true) accordingly in Quick mode.

selected-start:

selected-end:

selected-shortcut:

apply all:

HTML

<div class="t-content"
     ng-controller="daterangeSwitcherExampleController as controller">
    <p>
        By setting <code>show-apply-all="true"</code> would show the Apply All button,
        and dispatch <code>on-apply-all-date-range-changed</code> event when the Apply All button is clicked.
    </p>
    <p>
        Set <code>immediate-selection-in-quick-mode="false"</code>, the picker will show
        Apply/Cancel (and Apply All if set to true) accordingly in Quick mode.
    </p>

    <div style="display: flex; align-items: stretch; height: 2em;">
        <inv-date-range-switcher shortcuts="controller.shortcuts"
                                 selected-shortcut="controller.selectedShortcut"
                                 start-date="controller.selectedStart"
                                 end-date="controller.selectedEnd"
                                 min-date="controller.minDate"
                                 max-date="controller.maxDate"
                                 entry-mode="date-time"
                                 show-apply-all="true"
                                 immediate-selection-in-quick-mode="false"
                                 on-apply-all-date-range-changed="controller.onApplyAllDateRangeChanged"
                                 on-date-range-changed="controller.onDateRangeChanged"
        ></inv-date-range-switcher>
    </div>

    <div style="padding-left: 8px">
        <div><strong>selected-start:</strong> <span ng-bind="controller.current.start"></span></div>
        <div><strong>selected-end:</strong> <span ng-bind="controller.current.end"></span></div>
        <div><strong>selected-shortcut:</strong> <span ng-bind="controller.current.shortcut.label"></span></div>
        <div><strong>apply all:</strong> <span ng-bind="controller.current.isApplyAll"></span></div>
    </div>
</div>

Boolean Filter

Simple filter button displays a boolean selection.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="booleanFilterExampleController as controller">
        <inv-boolean-filter
            is-selected="controller.isSelected"
            label="controller.label"
            on-change="controller.onChange">
        </inv-boolean-filter>
    </div>
</div>

Loading

Single and multi selects can show a loading indicator.

HTML

<div class="t-content">
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="singleSelectExampleController as controller">
        <inv-single-select
            name="controller.name"
            options="controller.options"
            is-removable="controller.nonRemovable"
            on-selected-option="controller.onOptionSelect"
            on-remove="controller.onRemoveFilter"
            is-loading="true">
        </inv-single-select>
    </div>
    <div ng-controller="multiSelectExampleController as controller">
        <inv-multi-select
            name="controller.name"
            options="controller.options"
            is-removable="true"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            on-selection-changed="controller.onSelectedItemsChanged"
            is-loading="true"
        >
        </inv-multi-select>
    </div>
    <div ng-controller="multiSelectAsyncExampleController as controller">
        <inv-multi-select-async
            name="controller.name"
            options="controller.options"
            is-removable="false"
            on-remove="controller.onRemoveFilter"
            filter-placeholder-text="Search"
            on-selection-changed="controller.onSelectedItemsChanged"
            on-async-search="controller.asyncSearchFunc"
            is-processing="controller.isProcessing"
            is-loading="true"
        >
        </inv-multi-select-async>
    </div>
    <div style="display: flex; align-items: stretch; height: 2em;"
        ng-controller="fancySingleSelectExampleController as controller">
        <inv-fancy-single-select
            name="controller.name"
            options="controller.options"
            is-removable="controller.nonRemovable"
            filter-placeholder-text="Search..."
            on-change="controller.exampleOptionSelected"
            is-loading="true">
        </inv-fancy-single-select>
    </div>
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="dateRangeExampleController as controller">
        <inv-date-range shortcuts="controller.shortcuts"
            selected-shortcut="controller.selectedShortcut"
            min-date="controller.minDate"
            max-date="controller.maxDate"
            start-date="controller.selectedStart"
            end-date="controller.selectedEnd"
            on-date-range-changed="controller.onDateRangeChanged(start, end, selectedShortcut)"
            entry-mode="date-time"
            is-loading="true">
        </inv-date-range>
    </div>
</div>

Code Native Select

Native select for code value.

HTML

<div class="t-content" ng-controller="CodeNativeSelectExampleController as ctrl" style="width: 200px;">
    <form class="c-generalForm">
        <div class="c-fieldset-item">
            <code-native-select
                id="renewalType"
                class="c-fieldset-itemInput"
                code-type="SubscriptionBillingRenewalType"
                descriptor="ctrl.renewalDescriptor"
                form-name="renewalType"
                is-required="true"
                selected-value="ctrl.entity.RenewalType"
                on-selected-option="ctrl.onRenewalChange"
                is-disabled="false">
            </code-native-select>
        </div>
    </form>
</div>

Code Native Select with placeholder

Native select for code value with empty placeholder text.

HTML

<div class="t-content" ng-controller="CodeNativeSelectExampleController as ctrl" style="width: 200px;">
    <form class="c-generalForm">
        <div class="c-fieldset-item">
            <code-native-select
                id="renewalType"
                class="c-fieldset-itemInput"
                code-type="SubscriptionBillingRenewalType"
                descriptor="ctrl.renewalDescriptor"
                empty-placeholder-text="'Select a Value'"
                form-name="renewalType"
                is-required="true"
                selected-value="ctrl.entity.RenewalType"
                on-selected-option="ctrl.onRenewalChange"
                is-disabled="false">
            </code-native-select>
        </div>
    </form>
</div>

Code Single Select

Single select for code value.

The code-type attribute should be the key name of the code type as it appears in MetadataConstants.codes. An optional code-type-filter can be specified. This is a function that will be applied after the metadata is received, but before the select is populated.

HTML

The code-type attribute should be the key name of the code type as it appears in MetadataConstants.codes.

An optional code-type-filter can be specified. This is a function that will be applied after the metadata is received,
but before the select is populated.

<div class="t-content" ng-controller="CodeSingleSelectExampleController as ctrl" style="width: 200px;">
    <inv-code-single-select
        name="'Renewal Type'"
        code-type="SubscriptionBillingRenewalType"
        code-type-filter="ctrl.filterOutUnwantedResults"
        selected-value="ctrl.renewalType"
        on-selected-option="ctrl.onRenewalTypeSelected">
    </inv-code-single-select>
</div>

Code Single Select With on-codes-loaded Option

Single select for code value with on-codes-loaded option.

Disabled Single Selector for code values that doesn't allow for a selection. An option on-codes-loaded is specified to automatically select the only code value available.

HTML

Disabled Single Selector for code values that doesn't allow for a selection.

An option on-codes-loaded is specified to automatically select the only code value available.

<div class="t-content" ng-controller="CodeSingleSelectExampleController as ctrl" style="width: 200px;">
    <inv-code-single-select
        name="'Renewal Type'"
        is-disabled="ctrl.isDisabled"
        code-type="SubscriptionBillingRenewalType"
        code-type-filter="ctrl.filterOutUnwantedResults"
        selected-value="ctrl.renewalType"
        on-selected-option="ctrl.onRenewalTypeSelected"
        on-codes-loaded="ctrl.onCodeLoadedCallback">
    </inv-code-single-select>
</div>

Codes Multi Select

Multi select for code values. A runnable example is not provided because it requires redux, the metadata reducers from invision-core, the metadata middleware from invision, and an redux action to be called.

The code-type attribute should be the key name of the code type as it appears in MetadataConstants.codes.

An optional code-type-filter can be specified. This is a function that will be applied after the metadata is received, but before the select is populated.
An optional show-only-options can be specified. This hides the search input and selectable shortcuts.

HTML

The code-type attribute should be the key name of the code type as it appears in MetadataConstants.codes.
<br><br>
An optional code-type-filter can be specified. This is a function that will be applied after the metadata is received,
but before the select is populated.
<br>
An optional show-only-options can be specified. This hides the search input and selectable shortcuts.

<div class="t-content" ng-controller="CodeMultiSelectExampleController as ctrl" style="width: 500px;">
    <inv-codes-multi-select
        name="'Renewal Type'"
        code-type="SubscriptionBillingRenewalType"
        selected-value="ctrl.renewalType"
        on-selected-options="ctrl.onRenewalTypeSelected">
    </inv-codes-multi-select>
    <inv-codes-multi-select
        name="'Renewal Type'"
        code-type="SubscriptionBillingRenewalType"
        selected-value="ctrl.renewalType"
        on-selected-options="ctrl.onRenewalTypeSelected"
        show-only-options="true">
    </inv-codes-multi-select>
</div>

Code Multi Select With on-codes-loaded Option

Multi select for code value with on-codes-loaded option.

Disabled Multi Selector for code values that doesn't allow for a selection. An option on-codes-loaded is specified to automatically select the only code value available.

HTML

Disabled Multi Selector for code values that doesn't allow for a selection.

An option on-codes-loaded is specified to automatically select the only code value available.

<div class="t-content" ng-controller="CodeMultiSelectExampleController as ctrl" style="width: 200px;">
    <inv-codes-multi-select
        name="'Renewal Type'"
        is-disabled="ctrl.isDisabled"
        code-type="SubscriptionBillingRenewalType"
        code-type-filter="ctrl.filterOutUnwantedResults"
        selected-value="ctrl.renewalType"
        on-selected-options="ctrl.onRenewalTypeSelected"
        on-codes-loaded="ctrl.onCodeLoadedCallback">
    </inv-codes-multi-select>
</div>

Numeric Comparison

Compares numeric values by the provided available operations

HTML

<div class="t-content">
    <div  style="display: flex; align-items: stretch; height: 2em;" ng-controller="numericComparisonExampleController as controller">
        <inv-numeric-comparison descriptor="controller.descriptor"
                                selected-label="controller.selectedLabel"
                                available-operators="controller.availableOperators"
                                operator="controller.operator"
                                operand="controller.operand"
                                secondary-operand="controller.secondaryOperand"
                                on-selection-changed="controller.onChanged_handler">
        </inv-numeric-comparison>
    </div>
</div>

Items Organizer

Items Organizer helps organize items into selected and unselected lists. Items can be moved between lists. It also supports Add all and Remove all for unselected and selected lists respectively. Items can also be searched by name.

HTML

<div class="t-content" ng-controller="organizerExampleController as controller">
    <inv-items-organizer style="display: inline-flex; flex: 1; width: 800px;height: 485px;"
                         available-items="controller.availableItems"
                         selected-items="controller.selectedItems"
                         descriptor="controller.descriptor"
                         unselected-items-title="'Available Column Options'"
                         selected-items-title="'Column Order'"
                         unselected-items-search-placeholder="'Search Column Options...'"
                         selected-items-search-placeholder="'Search Column Order...'">
    </inv-items-organizer>
</div>

Default

Single select filters are by default non-removable. They expect the container component to dictate their rendering height.

Single Select Non-Removable

You can explicitly specify a filter to be non-removable.

Templated Single Select

Just like 'Single Select Non-Removable' but you can assign a custom template for the options in the popout

Pricing Single Select

A single select customized to display pricing information

Simple Single Select

A toned down version of a selector which has the popout representing the options

Single Select Removable

Filter that allows for a single selection only and is removable

Single Select Search

Filter that allows for a single selection for a search field

A Basic Multi Select

Basic menu. This takes in a collection of item object, and will return the selected item object upon user click on that object.

A Disabled Multi Select

Disabled Multi Select filter that doesn't allow for a selection

A Basic Removable Multi Select

Basic menu. This takes in a collection of item object, and will return the selected item object upon user click on that object.

A Multi Select disabled apply

Multi Select with the ability to pass in an optional function to disable the apply button.

Show multi select selections in the target

You can choose to show the selected items in the target. Defaults to 'true'

Multi Select with no selections target text

You can specify the text to be shown when no options are selected.

A Basic Multi Select with Suboptions

Multi Select with suboptions. This takes in a collection of item objects with suboptions, and will return the selected item object upon user click on the object.

Multi Select Async

Filter with that allows for a multiple selections and uses an async search

Fancy Single Select

Fancy filter that allows for a single selection only

Fancy Single Select With Search Delegate

Fancy filter that allows for a single selection and can specify search delegate

Fancy Single Select With Single Select Search

Fancy filter that has single select search to search by different options. We need to pass the search options and single select flag to enable it. Function binding for filter can be passed through existing bindings.

Fancy Single Select With Icons

Fancy filter that allows for a single selection only and displays icons per option

Fancy Single Cascaded Select

Fancy filter that allows for a single cascaded selection only

Disabled Fancy Single Select

Disabled Fancy filter that doesn't allow for a selection

Advanced Select

An advanced select which opens a Rich List Dialog to easily locate the desired item.

Date Picker Filter

Simple button that spawns a single date selector component which automatically applies the selected date.

Date Picker

Simple button that spawns a date component. This component has an optional time and/or time zone segment.

Date Range Filter

Simple filter button that spawns a date range picker component.

Date Range Filter With Options

Simple filter button that spawns a date range picker component with options enable.

Date Range Filter with Switcher

Simple filter button that spawns a date range picker component with switcher.

Date Range Filter with Switcher and Apply All

Simple filter button that spawns a date range picker component with switcher and Apply All button.

Boolean Filter

Simple filter button displays a boolean selection.

Loading

Single and multi selects can show a loading indicator.

Code Native Select

Native select for code value.

Code Native Select with placeholder

Native select for code value with empty placeholder text.

Code Single Select

Single select for code value.

Code Single Select With on-codes-loaded Option

Single select for code value with on-codes-loaded option.

Codes Multi Select

Multi select for code values. A runnable example is not provided because it requires redux, the metadata reducers from invision-core, the metadata middleware from invision, and an redux action to be called.

Code Multi Select With on-codes-loaded Option

Multi select for code value with on-codes-loaded option.

Numeric Comparison

Compares numeric values by the provided available operations

Multiple Text Input Dropdown

A dropdown component that provides user input of multiple text items.

Items Organizer

Items Organizer helps organize items into selected and unselected lists. Items can be moved between lists. It also supports Add all and Remove all for unselected and selected lists respectively. Items can also be searched by name.