Moved web-animations-js polyfill back outside of the library

Closes #91 and #92

Author: edcarroll

components/collapse/collapse.ts

@@ -1,5 +1,4 @@
 import {Directive, ElementRef, Input, HostBinding, Renderer2, HostListener} from '@angular/core';
-import "web-animations-js";
 
 @Directive({
     selector: '[suiCollapse]'

demo/src/app/pages/accordion/accordion.page.html

@@ -6,6 +6,16 @@
 </demo-page-title>
 <demo-page-content>
     <h2 class="ui dividing header">Examples</h2>
+
+    <sui-message class="warning" [isDismissable]="false">
+        <div class="header">Important Note</div>
+        <p>
+            The accordion depends on the Web Animations API, which requires a polyfill for full browser
+            support. Read the <a routerLink="/components/collapse">collapse docs</a> for guidance.
+        </p>
+    </sui-message>
+    <br>
+
     <demo-example [code]="exampleStandardTemplate">
         <div info>
             <h4 class="ui header">Accordion</h4>
@@ -23,7 +33,10 @@ <h4 class="ui header">Styled</h4>
     <demo-example [code]="exampleManualTemplate">
         <div info>
             <h4 class="ui header">Manual</h4>
-            <p>By using <code>isDisabled</code> and <code>isOpen</code> you can change the element controlling the accordion. Click the arrow to open the panel.</p>
+            <p>
+                By using <code>isDisabled</code> and <code>isOpen</code> you can change
+                the element controlling the accordion. Click the arrow to open the panel.
+            </p>
         </div>
         <accordion-example-manual result></accordion-example-manual>
     </demo-example>

demo/src/app/pages/collapse/collapse.page.html

@@ -14,6 +14,22 @@ <h4 class="ui header">Collapse</h4>
         <collapse-example-standard result></collapse-example-standard>
     </demo-example>
 
+    <sui-message class="warning" [isDismissable]="false">
+        <div class="header">Important Note</div>
+        <p>The collapse component uses the <a href="https://w3c.github.io/web-animations/">Web Animations API.</a></p>
+        <p>
+            This isn't yet supported in all browsers so if using this
+            component please use the <code>web-animations-js</code> polyfill:
+        </p>
+        <div class="ui segment">
+            <demo-codeblock language="bash" [src]="polyfillInstall"></demo-codeblock>
+        </div>
+        <p>Then import it in <code>polyfills.ts</code>:
+        <div class="ui segment">
+            <demo-codeblock language="bash" [src]="polyfillInclude"></demo-codeblock>
+        </div>
+    </sui-message>
+
     <h2 id="api" class="ui dividing header">API</h2>
     <demo-api [api]="api"></demo-api>
 </demo-page-content>

demo/src/app/pages/collapse/collapse.page.ts

@@ -44,6 +44,9 @@ export class CollapsePage {
         }
     ];
     public exampleStandardTemplate = exampleStandardTemplate;
+
+    public polyfillInstall = `$ npm install web-animations-js --save`;
+    public polyfillInclude = `import 'web-animations-js';`;
 }
 
 @Component({

demo/src/polyfills.ts

@@ -17,3 +17,5 @@ import 'core-js/es6/reflect';
 
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
+
+import 'web-animations-js';

package.json

@@ -3,7 +3,7 @@
   "main": "bundles/ng2-semantic-ui.umd.min.js",
   "module": "index.js",
   "typings": "index.d.ts",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Angular 2 Semantic UI Components",
   "repository": {
     "type": "git",
@@ -38,22 +38,20 @@
     "@types/popper.js": "^1.8.0",
     "element-closest": "^2.0.2",
     "popper.js": "^1.0.6",
-    "rxjs": "^5.0.1",
-    "web-animations-js": "^2.2.5"
+    "rxjs": "^5.0.1"
   },
   "devDependencies": {
-    "core-js": "^2.4.1",
-    "zone.js": "^0.8.4",
     "@angular/cli": "^1.0.0",
-    "@angular/http": "^4.1.0",
-    "@angular/platform-browser": "^4.1.0",
     "@angular/compiler": "^4.1.0",
     "@angular/compiler-cli": "^4.1.0",
+    "@angular/http": "^4.1.0",
+    "@angular/platform-browser": "^4.1.0",
     "@angular/platform-browser-dynamic": "^4.1.0",
     "@angular/router": "^4.1.0",
     "@types/prismjs": "~1.4.18",
     "@types/protractor": "~4.0.0",
     "codelyzer": "~2.0.0-beta.4",
+    "core-js": "^2.4.1",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.0",
@@ -68,7 +66,9 @@
     "rollup-plugin-uglify": "~1.0.1",
     "ts-node": "~2.0.0",
     "tslint": "~4.3.1",
-    "typescript": "^2.3.0"
+    "typescript": "^2.3.0",
+    "web-animations-js": "^2.2.5",
+    "zone.js": "^0.8.4"
   },
   "peerDependencies": {
     "typescript": "^2.3.0"

rollup.config.js

@@ -31,7 +31,6 @@ export default {
         commonjs({
             include: [
                 'node_modules/element-closest/**',
-                'node_modules/web-animations-js/**',
                 'node_modules/popper.js/**'
             ]
         }),
@@ -41,8 +40,6 @@ export default {
         '@angular/common',
         '@angular/core',
         '@angular/forms',
-        '@angular/http',
-        '@angular/platform-browser',
         'rxjs/Subscription',
   ],
 }