Availity Angular

Analytics


      <button class="btn btn-primary" av-analytics-on="click" av-analytics-label="save" av-analytics-value="10">
      Track Event
      </button>

Animation

On value change


    <span av-animate="counter" class="badge badge-primary" ng-bind="anim.counter"></span>

On load

I will animate on load!


    <div class="card card-block" av-animate>
      I will animate on load!
    </div>

On event


    <button type="button" class="btn btn-default" av-animate av-animate-on="click">
      Click Me!
    </button>

With children

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur


    <div class="loading-indicator" av-animate av-animate-type="'transition.slideRightBigIn'" av-animate-options="{ stagger: 500 }">
      <p> ... </p>
      <p> ... </p>
      <p> ... </p>
    </div>

Options


    <div av-animate av-animate-on-load="false" av-animate-type="{{anim.actualAnimation}}" class="card card-default text-center card-block">
      ...
    </div>

Loader


    <div av-loader></div>

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 av-block-ui="blockDemo"></div>

Breadcrumbs

Spaces

>


    <av-spaces-breadcrumbs page-name="My Page" space-id="1093906101146120962309999999"> ></av-spaces-breadcrumbs>

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" ng-model="demo.date1" 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" ng-model="demo.date2" format="'MMM-M-YYYY'" av-datepicker>
    </div>
    <div class="form-group">
      <label for="dateInput">Input type of 'date'</label>
      <div class="input-group date">
        <input type="date" class="form-control" id="dateInput" ng-model="demo.date3" av-datepicker format="'yyyy-MM-dd'">
        <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>
  </form>

Dimmer

Default

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>

Using Configuration

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

Simple


    <select id="dropdownSimple" class="form-control" av-dropdown ng-model="vm.selectedNumber" options="{ allowClear: false, placeholder: 'Select your favorite number'}">
      <option value>Select One</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
    </select>

Array


    <select id="dropdownPoke" class="form-control" av-dropdown ng-model="vm.selectedPoke" ng-options="poke for poke in vm.pokemon" options="{ allowClear: false, placeholder: 'Select a Pokemon'}">
    <option></option>
    </select>

Label for Value in Array


    <select id="dropdownStates1" class="form-control" av-dropdown ng-model="vm.selectedState1" ng-options="state.name for state in vm.states" ng-change="vm.onChange(vm.selectedState1)" options="{ allowClear: true, placeholder: 'Select State'}">
    <option></option>
    </select>

Select as Label for Value in Array


    <select id="dropdownStates1" class="form-control" av-dropdown ng-model="vm.selectedState1" ng-options="state.id as state.name for state in vm.states" ng-change="vm.onChange(vm.selectedState1)" options="{ allowClear: true, placeholder: 'Select State'}">
    <option></option>
    </select>

Label for Value in Array Track By


    <select id="dropdownStates1" class="form-control" av-dropdown ng-model="vm.selectedState1" ng-options="state.name for state in vm.states track by state.id" ng-change="vm.onChange(vm.selectedState1)" options="{ allowClear: true, placeholder: 'Select State'}">
    <option></option>
    </select>

Multiple


    <select id="dropdownMultiple" class="form-control" multiple av-dropdown ng-model="vm.selectedStates" ng-options="state.name for state in vm.states track by state.id" ng-change="vm.onChange(vm.selectedStates)" options="{ allowClear: true, placeholder: 'Select State'}">
    <option></option>
    </select>

Query Large Data-sets

Type aaa to see a result set or three letters of any kind to view another


    <div>
      <label for="dropdownQuery">Photos</label>
      <input type="hidden" id="dropdownQuery" class="form-control" av-dropdown ng-model="vm.selectedPhoto" ng-change="vm.onChange(vm.selectedPhoto)" options="vm.getOptions()">
    </div>

Query Organizations (Infinite List)


      <div class="form-group">
          <label for="dropdownQuery">Organizations</label>
          <av-select-organizations ng-model="vm.selectedOrganization" ng-change="vm.onOrganizationChange(vm.selectedOrganization)">
          </av-select-organizations>
  </div>

HTML in selection

Type aaa to see a result set or three letters of any kind to view another



    import picturesFormatResult from './picturesResultFormat';

    demo.factory('demoDropdownService', ($log, demoDropdownResource) => {

    class DemoDropdownService {
    ...
    getOptions() {
    return {
    allowClear: true,
    placeholder: 'Find a photo',
    minimumInputLength: 3,
    query: demoDropdownResource,
    formatResult: picturesFormatResult,
    formatSelection: picturesFormatResult
    };
    }
    ...

    }

    return new DemoDropdownService();
    });

    // picturesResultFormat.js

    export default (item) => {
    return `
    <div>
      <div style="display:inline-block">
        <img src="${item.thumbnailUrl}">
      </div>
      <div style="display:inline-block; padding-left: 5px">
        ${item.text}
      </div>
    </div>
    `;
    };

Mask


  <form name="datepickerForm">
    <div class="form-group">
      <label for="demoDate">Date</label>
      <input type="text" name="date" id="demoDate" class="form-control" ng-model="vm.date" ui-mask="{{mask.date}}">
    </div>
    <div class="form-group">
      <label for="demoPhone">Phone</label>
      <input type="text" name="phone" id="demoPhone" class="form-control" ng-model="vm.phone" ui-mask="{{mask.phone}}">
    </div>
    <div class="form-group">
      <label for="demoSSN">SSN</label>
      <input type="text" name="SSN" id="demoSSN" class="form-control" ng-model="vm.ssn" ui-mask="{{mask.ssn}}">
    </div>
    <div class="form-group">
      <label for="demoRandom">AA9A*</label>
      <input type="text" name="SSN" id="demoRandom" class="form-control" ng-model="vm.random" ui-mask="AA9A*">
    </div>
  </form>


  AvModal.create({
    show: true,
    controller: 'SomeController',
    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.'
    }
  });

Permissions

A green checkbox will show when logged in user has appropriate permission

Permission 7100
Permission 8100
Permission 9100


    <ul class="list-group">
      <li class="list-group-item">
        Permission 7100 <i class="icon icon-ok text-success" av-hide-permission="7100"></i>
      </li>
      <li class="list-group-item">
        Permission 8100 <span class="icon icon-ok text-success" av-hide-permission="8100"></span>
      </li>
      <li class="list-group-item">
        Permission 9100 <span class="icon icon-ok text-success" av-hide-permission="9100"></span>
      </li>
    </ul>

Popovers


<button type="button" class="btn btn-default" av-popover data-trigger="focus" title="What is HIPAA" data-placement="top" data-content="HIPAA is short for the Health Insurance Portability and Accountability Act.">
    Click to toggle popover
</button>
<button type="button" class="btn btn-default" av-popover data-trigger="hover" title="Protected Health Information (PHI)" data-placement="top" 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-default" av-popover data-trigger="manual" title="Need an immediate alert?" data-placement="top" data-show="showOnLoad" data-content="You can toggle popovers to show immediately!">
    Show popover on load
</button>

Tooltips


    <button type="button" class="btn btn-default" data-av-tooltip data-trigger="click" data-placement="top" title="What is HIPAA">
        Click to toggle tooltip
    </button>
    <button type="button" class="btn btn-default" data-av-tooltip data-placement="top" data-trigger="hover" title="Protected Health Information (PHI)">
        Hover to show tooltip
    </button>
    <button type="button" class="btn btn-default" data-av-tooltip data-trigger="manual" title="Need an immediate tooltip?" data-placement="top" data-show="showOnLoad">
        Show tooltip on load
    </button>

Inline Help


    <inline-help title="Hello World"></inline-help>

Validation



  <form name="demoForm" av-val-form="vm.rule">
    <div class="form-group">
      <label for="demoFirstName1">First Name</label>
      <input type="text" class="form-control" name="demoFirstName1" placeholder="..." ng-model="vm.firstName" av-val-field="firstName">
      <p av-val-container></p>
    </div>
  </form>

  <!-- Javascript -->
  <script>

    const app = require('./app');

    app.config((avAnalyticsProvider, avValProvider) => {

      const 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
      });

    });

  </script>

Analytics

Animation

On value change

On load

On event

With children

Options

Loader

Block UI

Spaces

Datepicker

Dimmer

Default

Example title

Using Configuration

Example title

Dropdowns

Simple

Array

Label for Value in Array

Select as Label for Value in Array

Label for Value in Array Track By

Multiple

Query Large Data-sets

Query Organizations (Infinite List)

HTML in selection

Mask

Modals

Sizes

Manager

With Controller

Permissions

Popovers

Tooltips

Inline Help

Validation