iui-input-field-highlight

This directive, iui-input-field-highlight, looks for the focus state on various input types, and applies a bg color change to keep the user's attention on the section. It also separates each section without the use of borders.

    
      
    

      
    


      
    

      
    


  

      <section class="panel panel-default" iui-input-field-highlight>
  <div class="panel-body">
    <div class="form-group">
      <input
        class="form-control"
        aria-label="Field 1"
        placeholder="Field 1"
        type="text">
    </div>
    <div class="form-group">
      <input
        class="form-control"
        aria-label="Field 2"
        placeholder="Field 2"
        type="text">
    </div>
  </div>
</section>
<section class="panel panel-default" iui-input-field-highlight>
  <div class="panel-body">
    <div class="form-group">
      <input
        class="form-control"
        aria-label="Field 3"
        placeholder="Field 3"
        type="text">
    </div>
    <div class="form-group">
      <input
        class="form-control"
        aria-label="Field 4"
        placeholder="Field 4"
        type="text">
    </div>
  </div>
</section>
    

iui-label-indicator

iui-label-indicator is a small circle dot indicator with a question mark that is usually seen next to a label. This indicator allows for more information to be attached to a label in case there is no room to allow for a help block or descriptor text. Upon hovering over the label indicator, a tooltip will appear with the descriptor text.

Options for iui-label-indicator
Attribute	Type	Default	Description
`tooltip-data`	Any	Must be set	This is the help text message that is to be displayed in the indicator's tooltip.
`is-warning-label`	Boolean	false	if set to true, will change the color of the circle dot to the orange warning color to indicate a warning message.

  
        Email Address (Normal)
      
        
      

        Email Address (Warning)
      
        
      


      <div ng-controller="labelIndicatorCtrl">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="indicator_example" class="col-sm-2 control-label">
        Email Address (Normal)<iui-label-indicator tooltip-data="tooltipMessage"></iui-label-indicator>
      </label>
      <div class="col-sm-4">
        <input type="email" id="indicator_example" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="indicator_example" class="col-sm-2 control-label">
        Email Address (Warning)<iui-label-indicator tooltip-data="tooltipWarningMessage" is-warning-label="true"></iui-label-indicator>
      </label>
      <div class="col-sm-4">
        <input type="email" id="indicator_example" class="form-control">
      </div>
    </div>
  </form>
</div>
    

    app.controller('labelIndicatorCtrl', ['$scope', function(scope) {
  scope.tooltipMessage = 'This here is some help text for an email field.';
  scope.tooltipWarningMessage = 'Hold up! Something needs to be addressed here.';
}]);
  

iui-minlength

Angular's minlength directive does not $observe or $eval the value of ngMinlength in Angular 1.2

Field must contain 10 characters

      <div class="form-group" ng-form name="minlengthExample">
  <input
    class="form-control"
    aria-label="Text field 1"
    name="textField1"
    placeholder="This field has 10 character minlength"
    type="text"
    ng-model="iuiTextField"
    iui-minlength="10">
  <p ng-show="minlengthExample.textField1.$error.minlength">Field must contain 10 characters</p>
</div>
    

iui-must-match

Provides validation when two fields need to be the same (like matching passwords)

This field must match the field above

      <fieldset ng-form name="mustMatchExample">
  <legend class="sr-only">Field 1 must match Field 2</legend>
  <div class="form-group">
    <input
      class="form-control"
      aria-label="Text field 1"
      name="matchTextField"
      placeholder="This is the origination field"
      type="text"
      ng-model="iuiMatchTextField1">
  </div>
  <div class="form-group">
    <input
      class="form-control"
      aria-label="Text field 2"
      name="matchTextField2"
      placeholder="This field must match the field above"
      type="text"
      iui-must-match="iuiMatchTextField1"
      ng-model="iuiMatchTextField2">
    <p class="help-block" ng-if="mustMatchExample.matchTextField2.$error.mustMatch">This field must match the field above</p>
  </div>
</fieldset>
    

General page header to be used on every page

  
      <div ng-controller="pageHeaderController">
  <iui-page-header breadcrumb="breadcrumb" heading-text="{{headingText}}"></iui-page-header>
</div>

    app.controller('pageHeaderController', ['$scope', function(scope) {
  scope.breadcrumb = [
    {name: 'Health Information', url: '/my-health-information/'},
    {name: 'Health Trackers', url: '/my-health-information/health-trackers/'}
  ];
  scope.headingText = 'This is a page header';
}]);
  

iui-profile-image

for showing profile images

Options for iui-stepper
Attribute	Type	Description
`iui-image`	String	image data in a base64 string
`iui-gender`	Integer	gender of individual. 0 for undefined, 1 for male, 2 for female

Dependencies

genderFilter

    
      <iui-profile-image class="user-image" iui-image="profile.image" iui-gender="profile.gender"></iui-profile-image>
<iui-profile-image class="user-image" iui-image="" iui-gender="profile.gender"></iui-profile-image>

iui-stepper

Standard stepper button to allow incrementing or decrementing a numerical value.

Options for iui-stepper
Attribute	Type	Default	Description
`ng-model`	Variable	Must be set	ngModel will tie functionality to the value determined in the stepper, therefore, it is required to make it work.
`min-value`	Integer	0	Sets a minimum integer value. If not set, will default to 0.
`max-value`	Integer	None	Sets a ceiling to the value that can be incremented.
`increment-by`	Integer	1	In the case where you need to increment by multiples of an integer. Set to 1 by default.
`stepper-id`	String	None	Pass in a unique identifier for linking form input to label.

  
  

      <div ng-controller="StepperCtrl">
  <iui-stepper
    ng-model="newValue"
    min-value="minValue"
    max-value="maxValue"
    increment-by="incrementBy"
    stepper-id="stepper_value">
  </iui-stepper>
</div>
    

    app.controller('StepperCtrl', ['$scope', function(scope) {
  scope.newValue = 5;
  scope.minValue = 0;
  scope.maxValue = 50;
  scope.incrementBy = 3;
}]);
  