availity-angular

Availity Angular SDK

Intro
Demo
Supported Browsers
Quickstart
Upgrading
Angular
Acknowledgments
Authors
License

Intro

Demo

availity.github.io/availity-angular

Supported Browsers

Internet Explorer 9 and newer
Google Chrome
Mozilla Firefox

Other browsers should be supported as well but you may experience some issues.

Migrating to angularjs 1.7.x to 1.8.2

Version 4.2.0 of availity-angular is migration from 1.7.x angular to 1.8.2. In addition, jquery is updated to 3.6.0, to satisfy security requirements. The primary change of what is fixed with security update can be explained with jquery upgrade guide located here https://jquery.com/upgrade-guide/3.5/.
Note: 1.7.x to 1.8.2 is really just an update underlying jquery component embeded in angularjs, and since availity-angular overrides this by including the full jquery. The real upgrade is just the jquery upgrade.

Here is list of known issues with upgrade.

Self-closing tags, like "<div/> <span/> <p/>". As referenced in upgrade-guide, jquery no changes these tags. The result of which is if you have some template like following in your page it will not display and actually cause page to stop rendering due to unmatching tags.

<div class="broken">
     <p>This would display before tag.</p>
     <div data-my-directive/> 
     <p>But directive and items after might not display.</p>
 </div>

 <div class="fixed">
     <p>Fix is to change to remove self closing empty html tag</p>
     <div data-my-directive></div> 
     <p>Now this should display.</p>
 </div>

<div class="nochange">
     <p>Tags that html supports as self closing tags do not need to change since they are not effected.</p> 
      <span>Example: All the following are valid</span>
      <input data-my-directive />
      <input data-my-directive >
      <img data-my-directive />
      <img data-my-directive >
</div>

Unfortunately not good solution to this fix besides just fixing tags. Luckily this regex from here seems to be pretty code at replacing. https://www.reddit.com/r/regex/comments/6mpc7b/replace_invalid_selfclosing_nonvoid_html_tags/ In editor that supports reg expression replace use following:

find: <(?!area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)([a-z|A-Z|_|\-|:|0-9]+)([^>]*)\/>
replace: <$1$2></$1>

bootstrap-datapicker issue. One issue noticed on upgrading is that some projects where getting issue where AvDatepicker was no longer working. This seemed to be dependency resolution where bootstrap-datepicker was pulling in one version of jquery and application was using 3.6 version. The fix was to force resolution to same version using resolution block.
```
  "resolutions": {
    "jquery": "3.6.0"
  }
```
uglify-js 3.11.x issue. Although not related angularjs upgrade an issue was noticed with dependencies. After some effort it was found with uglify-js 3.11.x or greater, the signature of some constructors where changed. In particular the av-block directive's BlockController was effected causing console error "regExp --> regExpProvider not found". Error would only show up on production builds of project. The fix for this is locking in ugligfy-js to 3.10.4.
```
 "resolutions": {
   "jquery": "3.6.0",
   "uglify-js": "3.10.4",
   "uglifyjs-webpack-plugin": "2.2.0"
 },
```

Quickstart

Install the Availity Angular SDK with npm.

$ npm install availity-angular --save

Acknowledgments

The Availity Angular lib was heavily inspired by multiple open source frameworks. If for some reason a library could not be used directly (IE9 limitation), we've reused that projects code directly in this project. Please check out the libs below for some beautifully written code.