All examples here are to illustrate the contents of the tethers, not the UI elements that launch them.

Basic List

A basic (vertical) list of items. This takes in a collection of item objects and will return the selected item object upon the user clicking on that object.

HTML

<div ng-controller="TetherBasicListExampleController">
    <ui-tether-basic-list class="u-inlineBlock"
                          items="testItems"
                          item-selected="onItemSelect">
        <div class="u-flex">
            <div class="c-button">Basic List Example</div>
            <inv-icon glyph="'caret-down'"></inv-icon>
        </div>
    </ui-tether-basic-list>
    <ui-tether-basic-list class="u-inlineBlock"
                          items="testItems"
                          item-selected="onItemSelect"
                          disable-links="true">
        <div class="u-flex">
            <div class="c-button">Basic List Example without links</div>
            <inv-icon glyph="'caret-down'"></inv-icon>
        </div>
    </ui-tether-basic-list>
    <ui-tether-basic-list class="u-inlineBlock"
                          items="testTooltipItems"
                          item-selected="onItemSelect">
        <div class="u-flex">
            <div class="c-button">Basic List Example with detail tooltip</div>
            <inv-icon glyph="'caret-down'"></inv-icon>
        </div>
    </ui-tether-basic-list>
</div>

Basic List with Subitems

A basic (vertical) list of items where an item may have a list of subitems that are then displayed as a basic list in a child tether. This takes in a collection of item objects and will return the selected item object to a callback upon the user clicking on that object.

HTML

<div ng-controller="TetherBasicListWithSubitemsExampleController as controller">
  <div class="u-inlineBlock"
       ui-tether-basic-list-with-subitems
       items="controller.testItemsWithSubitems"
       item-selected="controller.onItemSelect(item)"
       subitem-selected="controller.onItemSubitemSelect(item)">
    <div class="c-button">Basic List with Subitems Example</div>
  </div>
</div>

Checkbox List Tether

A tether that can be used to render a list of check-boxes with callback capability.

HTML

<div class="t-content">
    <div ng-controller="checkBoxListExampleController">
        <div ui-tether-check-box-list
             items="testItems"
             on-selected="onItemSelect"
             position="top left"
             attachment="bottom left">
            <inv-icon glyph="'ellipsis-h'"></inv-icon>
        </div>
    </div>
</div>

App Switcher

A tether specifically used to switch between apps in the system.

HTML

<div ng-controller="appSwitcherExampleController">
  <div class="u-inlineBlock"
       ui-tether-app-switcher
       ui-tether-app-switcher-active="current"
       ui-tether-app-switcher-items="apps"
       ui-tether-app-switcher-selected="onItemSelect">
    <div class="c-button">App Switcher Example</div>
  </div>
</div>

Visualizer Switcher

A tether specifically used to switch visualizers in the Reporting module.

HTML

<div ng-controller="visualizerSwitcherExampleController">
  <div ui-tether-visualizer-switcher
       ui-tether-visualizer-switcher-items="visualizers"
       ui-tether-visualizer-switcher-selected="onItemSelect"
       ui-tether-visualizer-switcher-app-id="appId">
    <div class="u-flex u-flexMiddle">
      <inv-icon glyph="'summary-view'"></inv-icon>
      <inv-icon glyph="'caret-down'"></inv-icon>
    </div>
  </div>
</div>

Single-value Selector

A tether that can be used to render a single-value selection tether with callback capability.

HTML

<div class="t-content">
    <div ng-controller="singleSelectExampleController as controller">
        <div ui-tether-single-selector
             options="controller.options"
             on-selected-option="controller.onOptionSelect">
            <inv-icon glyph="'ellipsis-h'"></inv-icon>
        </div>
    </div>
</div>

Fancy Single-value Selector

A tether that can be used to render a fancy single-value selection tether with callback capability.

HTML

<div class="t-content">
    <style type="text/css">
        /*
            Use additional-classes to specify any additional CSS classes to blanket the tether
             they can be useful to override default tether stylings such as width and height
         */
        .drop.c-dayTether,
        .drop.c-dayTether .c-popoutSingleSelectOptions {
            width: 120px;
            min-width: 120px;
        }
    </style>
    <div ng-controller="FancySingleCascadedSelectExampleController as controller">
        <div ui-tether-fancy-single-selector
             additional-classes="c-dayTether"
             options="controller.options"
             on-change="controller.exampleOptionSelected">
            <inv-icon glyph="'ellipsis-h'"></inv-icon>
        </div>
    </div>
</div>

Multi-value Selector

A tether that can be used to render a multi-value selection tether with callback capability.

HTML

<div class="t-content">
  <div ng-controller="multiSelectExampleController as controller">
    <div ui-tether-multi-selector
         ui-tether-multi-select-enable-select-all="true"
         ui-tether-multi-select-options="controller.options"
         ui-tether-multi-select-on-change="controller.onSelectedItemsChanged">
      <inv-icon glyph="'ellipsis-h'"></inv-icon>
    </div>
  </div>
</div>

Multi-Select Suboptions Tether

A tether that can be used to render a multi-select with suboptions tether with callback capability.

HTML

<div class="t-content">
    <div ng-controller="multiSelectSuboptionsExampleController as controller">
        <div ui-tether-multi-selector
             ui-tether-multi-select-options="controller.options"
             ui-tether-multi-select-on-change="controller.onSelectionChanged"
             ui-tether-multi-select-position="bottom center"
             ui-tether-multi-select-attachment="top center">
            <inv-icon glyph="'ellipsis-h'"></inv-icon>
        </div>
    </div>
</div>

Obfuscated Copier - Value Obfuscator w/ Clipboard Copy Semantics

A tether that can be used to provide one-click access to copy (to the clipboard) the specified value. Commonly used to obfuscate an identifier (by linking to the tether in its stead), providing an amount of "security by obscurity" if used properly.

HTML

<div ng-controller="TetherObfuscatedCopierExampleController as controller">
  <div class="c-button"
       ui-tether-obfuscated-copier="controller.exampleValue">
    Obfsucopier Example
  </div>
</div>

Group List Tether

A tether that allows grouped listing of items. Supports items with a `title` property, along with other custom properties, to allow same-titled items within and across groups.

HTML

<div ng-controller="groupListExampleController as controller">
    <div ui-tether-group-list
         ui-tether-group-list-items="controller.accountNumbers"
         ui-tether-group-list-on-item-selected="controller.onAccountSelect"
         ui-tether-group-list-selected-item="controller.selectedItem"
         class="c-careAccountSwitcher">
        <div class="c-button">Group List Example</div>
    </div>
</div>

File Status List Tether

A tether to list imported files for bulk order items and their corresponding bulk order item status indicator.

HTML

<div ng-controller="fileStatusListExampleController as controller">
    <div ui-tether-file-status-list
        ui-tether-file-status-list-items="controller.statuses"
        ui-tether-file-status-list-on-item-selected="controller.onItemSelect.bind(controller)">
        <div class="c-button">File Status List Example</div>
    </div>
</div>