Idle Timer

Animation

Tada

A website in motion stays in motion and is way more awesome.
<div class="velocity-callout-tada" data-ng-show="animate.visible"> ... </div>

Slide In Up

I've been animated with Velocity and Angular!

<p> <button data-ng-click="animate.onClick2()" class="btn btn-default">Animate</button> </p> <div class="velocity-transition-slideUpIn" data-ng-show="animate.visible2" data-velocity-opts="{ duration: 5000 }"> I&apos;ve been animated with Velocity and Angular! </div>

Bounce In

<!-- Javascript --> <script> $animate.addClass($el, 'velocity-transition-bounceIn', function() { $el.removeClass('velocity-transition-bounceIn'); }); </script>

Loading Indicator

<div data-av-loader="" class="loading-indicator"></div>

Block UI

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div data-block-ui="avBlock"></div>

Breadcrumbs

Breadcrumbs are defined within the application's routes and rely on Angular UI's UI Router.

The breadcrumbs update on $stateChangeSuccess according to the current state.

<div av-breadcrumbs=""></div> <!-- Javascript --> <script> var demo = angular.module('demo', ['ui.router', 'availity', 'availity.ui']); demo.config(['$stateProvider', function($stateProvider) { $stateProvider .state('parent-state', { data: { breadcrumb: { displayName: 'Parent State' } } }) .state('child-state', { data: { breadcrumb: { displayName: 'Child State', // The breadcrumb's name parent: 'parent-state' // The breadcrumb's parent state } } }); }]); </script>

Datepicker

<form name="datepickerForm"> <div class="form-group"> <label for="withIcon">With Icon</label> <div class="input-group date"> <input type="text" class="form-control" id="withIcon" data-ng-model="demo.date1" data-av-datepicker=""> <span class="input-group-btn" data-toggle="datepicker"> <button class="btn btn-default" type="button"><span class="icon icon-calendar"></span></button> </span> </div> </div> <div class="form-group"> <label for="noIcon">No Icon</label> <input type="text" class="form-control" id="noIcon" data-ng-model="demo.date2" data-av-datepicker=""> </div> </form> <!-- Javascript --> <script> var demo = angular.module('demo', ['aviality', 'availity-ui']); demo.controller('DatepickerController', function($scope) { $scope.demo = { date1: new Date(), date2: null }; }); </script>

Dimmer

Dimmer Message

Example title

Example text

<div av-dimmer="" class="card card-block"> <div class="dimmer-content dimmer-content-dark text-center"> <p> Dimmer Message </p> </div> <h4 class="card-title">Example title</h4> <p class="card-text">Example text</p> </div>

Dropdowns

The dropdown directives requires ng-model to function properly. The model must be present in scope (value can be undefinded or null) else Angular renders and empty <option> tag that confuses Select2 and causes it to render an empty div

Select2 requires an empty <option></option> tag in order for the directive option data-allow-clear=true to work properly.

For a complete listing of options supported Select2, please checkout the docs at http://select2.github.io/select2/

Single

<form name="dropdownForm"> <div class="form-group"> <label for="dropdownStates1">States</label> <select id="dropdownStates1" class="form-control select2" data-av-dropdown="" data-ng-model="selectedStates" data-ng-options="state.name for state in states" data-ng-change="selectAction(selectedStates)" data-placeholder="Select State" data-allow-clear="true"> <option></option> </select> </div> <div class="form-controls"> <button type="submit" class="btn btn-default" data-ng-click="addStates()"> Add States </button> <button type="submit" class="btn btn-default" data-ng-click="setState()"> Set State </button> <button type="submit" class="btn btn-default" value="Set Null" data-ng-click="resetSingle()"> Reset </button> </div> </form> <!-- Javascript --> <script> var demo = angular.module('demo', ['availity', 'availity-ui']); availity.demo.controller('DropdownController', function($scope, $log, avCodesResource) { $scope.states = [ { id: 'AL', name: 'Alabama' }, { id: 'CA', name: 'California' }, { id: 'NM', name: 'New Mexico' }, { id: 'TX', name: 'Texas' }, { id: 'WY', name: 'Wyoming' } ]; $scope.selectedState = null; $scope.selectedHosp = null; $scope.addStates = function() { $scope.states.push({id: 'FL', name: 'Florida'}); }; $scope.setState = function() { $scope.selectedState = $scope.states[$scope.states.length - 1]; }; $scope.resetSingle = function() { $scope.selectedState = null; }; $scope.resetSingleHosp = function() { $scope.selectedHosp = null; }; $scope.selectAction = function(selection) { $log.info(selection); }; }); </script>

Multiple

<form name="dropdownForm"> <div class="form-group"> <label for="dropdownStates2">States</label> <select id="dropdownStates2" class="form-control select2" multiple data-av-dropdown="" data-ng-model="selectedStates" data-ng-options="state.name for state in states" data-ng-change="selectAction(selectedStates)" data-placeholder="Select State" data-allow-clear="true"> <option></option> </select> </div> <div class="form-controls"> <button type="submit" class="btn btn-default" value="Set Null" data-ng-click="resetMultiple()">Set Null</button> </div> </form> <!-- Javascript --> <script> availity.demo.controller('DropdownController', function($scope, $log, avCodesResource) { $scope.selectedStates = [{ id: 'WY', name: 'Wyoming' }, { id: 'NM', name: 'New Mexico' }]; $scope.resetMultiple = function() { $scope.selectedStates = null; }; }); </script>

Remote Data

Using remote data requires a hidden input field, rather than a select element.

Options

  • data-format-result - specify how the data is viewed in the dropdown
  • data-format-selection - specify how the data is viewed when selected
<form name="dropdownForm"> <div class="form-group"> <label for="dropdownHosp3">Hospital</label> <input type="hidden" id="dropdownHosp3" class="form-control select2" data-av-dropdown="" data-ng-model="selectedHosp" data-ng-change="selectAction(selectedHosp)" data-placeholder="Select a hospital" data-allow-clear="true" data-ajax="myAjax" data-minimum-input-length="3" data-format-result="myFormatResult" data-format-selection="myFormatResult"> </div> <div class="form-controls"> <button type="submit" class="btn btn-default" value="Reset" data-ng-click="resetSingleHosp()"> Reset </button> </div> </form> <!-- Javascript --> <script> availity.demo.controller('DropdownController', function($scope, $log, avCodesResource) { $scope.states = [ { id: 'AL', name: 'Alabama' }, { id: 'CA', name: 'California' }, { id: 'NM', name: 'New Mexico' }, { id: 'TX', name: 'Texas' }, { id: 'WY', name: 'Wyoming' } ]; $scope.selectedState = null; $scope.selectedHosp = null; $scope.selectedStates = [{ id: 'WY', name: 'Wyoming' }, { id: 'NM', name: 'New Mexico' }]; $scope.addStates = function() { $scope.states.push({id: 'FL', name: 'Florida'}); }; $scope.setState = function() { $scope.selectedState = $scope.states[$scope.states.length - 1]; }; $scope.resetSingle = function() { $scope.selectedState = null; }; $scope.resetSingleHosp = function() { $scope.selectedHosp = null; }; $scope.resetMultiple = function() { $scope.selectedStates = null; }; $scope.selectAction = function(selection) { $log.info(selection); }; $scope.weFocused = function() { $log.info("ngFocus event occurred"); }; $scope.weBlurred = function() { $log.info("ngBlur event occurred"); }; // how it is viewed in the drop down $scope.myFormatResult = function(code) { var markup = '<div class="row">' + '<div class="col-xs-12">'+ '<span class="label label-info">' + code.code + '</span> ' + code.value.split("|")[1] + '</div>' + '</div>'; return markup; }; $scope.myQuery = function(data) { data.q = data.term; data.list = 'someList'; return avCodesResource.getCodes(data); }; }); </script>

Value Selector

av-dropdown now supports the select as clause in ng-options: (e.g. data-ng-options="state.id as state.name for state in states"). In this example, the model is bound to a simple string, and two-way binding works if it is edited via the textbox.

<form name="dropdownForm"> <div class="form-group"> <label for="dropdownStates3">States</label> <select id="dropdownStates3" class="form-control select2" data-av-dropdown="" data-ng-model="selectedState" data-ng-options="state.id as state.name for state in states"> <option></option> </select> </div> <div class="form-group"> <label for="textboxStates3">Selected State (Textbox)</label> <input type="text" id="textboxStates3" class="form-control select2" data-ng-model="selectedState"> </div> </form> <!-- Javascript --> <script> var demo = angular.module('demo', ['availity', 'availity-ui']); availity.demo.controller('DropdownController', function($scope, $log, avCodesResource) { $scope.states = [ { id: 'AL', name: 'Alabama' }, { id: 'CA', name: 'California' }, { id: 'NM', name: 'New Mexico' }, { id: 'TX', name: 'Texas' }, { id: 'WY', name: 'Wyoming' } ]; $scope.selectedState = null; // ... }); </script>

Event Listeners

If you need to include listeners for events, including those fired by Select2, you can specify them in a map (keyed by the event ID) and set them to event-listeners in your template.

{{event.index}}: {{event.event}}
<form name="dropdownForm"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="dropdownStates4">States</label> <select id="dropdownStates4" class="form-control select2" data-av-dropdown="" data-ng-model="selectedState" data-ng-options="state.id as state.name for state in states" data-event-listeners="eventListeners"> <option></option> </select> </div> </div> <div class="col-md-6"> <label>Event Log</label> <div class="well"> <div data-ng-repeat="event in eventHistory track by event.index">{{event.index}}: {{event.event}}</div> </div> </div> </div> </form> <!-- Javascript --> <script> var demo = angular.module('demo', ['availity', 'availity-ui']); availity.demo.controller('DropdownController', function($scope, $log, avCodesResource) { $scope.eventHistory = []; var eventIndex = 1; var addEventToHistory = function(event) { $scope.eventHistory.unshift({event: event, index: eventIndex}); eventIndex++; if ($scope.eventHistory.length > 10) { $scope.eventHistory.pop() } $scope.$apply(); }; $scope.eventListeners = { 'select2-open': function(){ addEventToHistory('Open'); }, 'select2-close': function(){ addEventToHistory('Close'); }, 'select2-highlight': function() { addEventToHistory('Highlight'); }, 'select2-selecting': function() { addEventToHistory('Selecting'); }, 'change': function() { addEventToHistory('Change'); } }; // ... }); </script>

Inline Options

You picked {{myNumber}}!

<div class="form-group"> <label for="numbersDemo">Numbers</label> <select id="numbersDemo" class="form-control" data-ng-model="myNumber" data-av-dropdown=""> <option value=""></option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <p>You picked {{myNumber}}!</p> <button class="btn btn-default" data-ng-click="myNumber = 1">Set to one</button>

Filters

Filters can easily be abused and increase chances of performance issues. Use sparingly and on select properties.

Approximate

An optional precision parameter can be supplied to include decimals within the approximation.

Formatted Value

<span data-ng-bind="value | avApproximate"></span> <span data-ng-bind="value | avApproximate: 1"></span>

Badges

Badges display the approximation of the given value.

Badges hide when value is falsey unless specified otherwise.

Alerts

Alerts

<p>Alerts <span data-av-badge="42"></span></p> <p>Alerts <span data-av-badge="1000" data-color="badge-success"></span></p> <button class="btn btn-primary" type="button"> Messages <span data-av-badge="42"></span> </button>

Labels

Remove


<span data-ng-repeat="label in labels"> <span class="label" data-ng-class="label.labelClass" data-av-removable-label="" data-on-remove="removeLabel" data-remove-value="$index"> <span data-ng-bind="label.value"></span> </span> </span>

Mask

To use a mask you must declare the data-av-mask attribute and assign a predefined format or a mask definition.

Predefined formats include:

  • data-av-mask="date" which is equivalent to 99/99/9999
  • data-av-mask="phone" which is equivalent to (999) 999-9999
  • data-av-mask="SSN" which is equivalent to 999-99-9999

Roll a custom mask definition by using:

  • 9 for a digit,
  • a for a letter
  • * for either a digit or a letter
<form name="datepickerForm"> <div class="form-group"> <label for="date">Date</label> <input type="text" name="date" class="form-control" data-av-mask="date"> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="text" name="phone" class="form-control" data-av-mask="phone"> </div> <div class="form-group"> <label for="SSN">SSN</label> <input type="text" name="SSN" class="form-control" data-av-mask="SSN"> </div> <div class="form-group"> <label for="A">aa9a*</label> <input type="text" name="SSN" class="form-control" data-av-mask="aa9a*"> </div> </form>

Modals

<div ng-controller="ModalCtrl"> <button class="btn btn-primary" data-ng-click="modalOpen1()"> Launch Modal </button> </div> <!-- Javascript --> <script> availity.demo.controller('ModalCtrl', function ($scope, AvModal) { $scope.modalOpen1 = function() { new AvModal({ show: true, scope: $scope, templateUrl: "templates/modal-1-template.html" }); }; }); </script> <!-- modal-1-template.html --> <div av-modal=""> <div class="modal-header"> <!-- header goes here --> </div> <div class="modal-body"> <!-- body goes here --> </div> <div class="modal-footer"> <!-- footer goes here --> </div> </div>

Optional Sizes

<!-- Large Modal Template --> <div av-modal="" size="lg"> ... </div> <!-- Small Modal Template --> <div av-modal="" size="sm"> ... </div>

Modal With Controller

availity.demo.controller('ModalCtrl', function ($scope, AvModal) { $scope.modalOpenWithController = function() { AvModal.create({ show: true, controller: 'ModalSpecificController', controllerAs: 'vm', locals: { someValue: 'This is a value passed in using locals, it could be params passed from the external scope required by the modal.' } }); }; });

Modal Manager

<!--Javascript --> <script> $scope.$on('$stateChangeSuccess', function(event, toState) { if(toState.name === 'one') { avModalManager.closeAll(); } }); $scope.routeChange = function() { AvModal.create({ show: true, scope: $scope, templateUrl: 'templates/modal-route-template.html' }); }; </script>

Permissions

Define all permissions used in your app in constant.

For better performance, query for all permissions that your app will need on load.

The following gives example of how to use the av-has-permission directive to hide a section based on whether or not user has permission. There should be only one button showing below.

<p ng-cloak=""> <button type="button" class="btn btn-lg btn-success ng-hide" ng-cloak="" data-av-has-permission="DEMO_PERMISSIONS.GOOD"> Is Authorized to 452 </button> <button type="button" class="btn btn-lg btn-danger" data-av-has-permission="DEMO_PERMISSIONS.BAD"> Not Authorized to 999 </button> <button type="button" class="btn btn-lg btn-success" data-av-has-permission="either"> Is Authorized to 452 or 999 </button> </p> <!-- Javascript --> <script> var availity = root.availity; availity.demo.constant('DEMO_PERMISSIONS', { GOOD: '452', BAD: '999' }); availity.demo.controller('HasPermissionController', function($scope, DEMO_PERMISSIONS, avUserAuthorizations) { $scope.DEMO_PERMISSIONS = DEMO_PERMISSIONS; $scope.either = _.values(DEMO_PERMISSIONS); // This is not required but does prevent multiple hits bad to server avUserAuthorizations.getPermissions(_.values(DEMO_PERMISSIONS)); }); </script>

Popovers

<button type="button" class="btn btn-lg btn-danger" data-av-popover="" data-toggle="popover" data-trigger="focus" title="What is HIPAA" data-content="HIPAA is short for the Health Insurance Portability and Accountability Act."> Click to toggle popover </button> <button type="button" class="btn btn-lg btn-info" data-av-popover="" data-toggle="popover" data-trigger="hover" title="Protected Health Information (PHI)" data-content="PHI is any information in a medical record that can be used to identify an individual, and that was created, used, or disclosed in the course of providing a health care service, such as a diagnosis or treatment."> Hover to show popover </button> <button type="button" class="btn btn-lg btn-warning" data-av-popover="" data-toggle="popover" data-trigger="manual" title="Need an immediate alert?" data-content="You can toggle popovers to show immediately!" data-show-on-load="showOnLoad" data-delay="{&quot;hide&quot;:20000}"> Show popover on load </button>

Tabs

Default

A default active tab may be specified by setting the active attribute to true. This may also be achieved via databinding. If no active tab is specified, the first tab becomes active.

A tab's content may be provided by setting:

  • template - The HTML string of the template to display.
  • templateUrl - The URL of the template to display.
  • or simply adding HTML as the contents of the avTab
<div av-tabs=""> <div av-tab="" ng-repeat="tab in tabs" heading="{{tab.heading}}" template="tab.template" active="tab.active"></div> </div> // Or <div av-tabs=""> <div av-tab="" heading="Home" template-url="templates/home.html"></div> <div av-tab="" heading="Profile" template-url="templates/profile.html"></div> <div av-tab="" heading="Messages" template-url="templates/messages.html"></div> <div av-tab="" heading="Settings" template-url="templates/settings.html"></div> </div> // Or <div av-tabs=""> <div av-tab="" heading="Home"><p class="lead">Home</p></div> <div av-tab="" heading="Profile"><p class="lead">Profile</p></div> <div av-tab="" heading="Messages"><p class="lead">Messages</p></div> <div av-tab="" heading="Settings"><p class="lead">Settings</p></div> </div>

Tab content is padded by default. Set pad-content="false" on avTabs to remove the padding.

Pills

Tab style may be changed by setting the tabType option. The default value is tabs.

Home

Profile

Messages

Settings

<div av-tabs="" tab-type="pills"> ... </div>

Pills are also vertically stackable. Just set vertical="true" instead.

Home

Profile

Messages

Settings

<div av-tabs="" tab-type="pills" vertical="true"> ... </div>

Pills Secondary

Home

Profile

Messages

Settings

<div av-tabs="" tab-type="pills-secondary"> ... </div>

Justified

Home

Profile

Messages

Settings

<div av-tabs="" justified="true"> ... </div>

Disabled

To disable tabs, set a tab's disable attribute. This can also be achieved via databinding.

Home

Profile

Messages

Settings

<div av-tabs=""> <div av-tab="" heading="Home"><p class="lead">Home</p></div> <div av-tab="" heading="Profile"><p class="lead">Profile</p></div> <div av-tab="" heading="Messages" disable="true"><p class="lead">Messages</p></div> <div av-tab="" heading="Settings"><p class="lead">Settings</p></div> </div> // Or <div av-tabs=""> <div av-tab="" ng-repeat="tab in tabs" heading="{{tab.heading}}" template="tab.template" disable="tab.disabled"></div> </div>

Scroll Pagination

The scroll pagination plugin provides a simple way to page data that is displayed in a scrollable list. Specifically:

  • Provides buttons to get data pages
  • Offloads data when needed to maintain performance
  • Maintains scroll position as data is loaded and offloaded to preserve the UX

The plugin requires several pieces of information:

  • api-resource, the API from which to get data. The plugin expects a service built from the API factory
  • entries, the scoped list where the API items will be set
  • options, configuration options for the plugin. See the example for a full list of available settings

{{entry.name}}

{{entry.company}}

{{entry.about}}

<div id="scrollPaginationContainer" data-av-scroll-pagination="demo" data-api-resource="apiResource" data-entries="entries" data-options="options"> <div class="list-group list-group-cards"> <div class="list-group-item" data-ng-repeat="entry in entries" id="{{entry._id}}"> <!-- set ID to the entryIdAttribute value as specified in the plugin options --> ... </div> </div> </div> <!-- Javascript --> <script> /* global availity */ availity.demo.controller('ScrollPaginationController', function($scope, scrollPaginationDemoApi) { $scope.apiResource = scrollPaginationDemoApi; $scope.entries = []; $scope.options = { limit: 10, // Number of entries to grab per page offset: 0, // API offset, typically should be set to 0 maxCached: 20, // Max number of item to store in memory. If exceeded, entries will be offloaded responseKey: 'data', // Key to API response data resourceId: 'scrollPaginationItems', // Name of resource in API response entryIdAttribute: '_id', // Unique identifier for an entry, should be used as the HTML id for the entry container in HTML loadMoreText: 'Load more customers', // Text for pagination buttons, beforePageLoad: function(options) {}, // Function to run prior to making an API call for the next / previous page of data afterPageLoad: function(response) {}, // Function to run after making an API call for the next / previous page of data apiParams: { // Any additional parameters to send to the API transactionType: '270' } }; }); </script>

Validation

<form name="demoForm" data-av-val-form="demo.rule"> <div class="form-group"> <label for="demoFirstName1">First Name</label> <input type="text" class="form-control" name="demoFirstName1" placeholder="..." data-ng-model="demo.firstName" data-av-val-field="firstName"> <p data-av-val-container=""></p> </div> </form> <!-- Javascript --> <script> /* global availity */ availity.demo.config(function(avAnalyticsProvider, avValProvider) { var defaultRules = { 'firstName': { 'required': { 'message': 'First name is required.' }, 'size': { 'min': 2, 'max': 20, 'message': 'First name must be between 2 and 20 characters.' } } }; avValProvider.addRules({ 'defaultRules': defaultRules }); }); </script>