diff --git a/components/collapse/collapse.ts b/components/collapse/collapse.ts index 2875eb707..319e9f765 100644 --- a/components/collapse/collapse.ts +++ b/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]' diff --git a/demo/src/app/pages/accordion/accordion.page.html b/demo/src/app/pages/accordion/accordion.page.html index c6b98423c..bad159739 100644 --- a/demo/src/app/pages/accordion/accordion.page.html +++ b/demo/src/app/pages/accordion/accordion.page.html @@ -6,6 +6,16 @@

Examples

+ + +
Important Note
+

+ The accordion depends on the Web Animations API, which requires a polyfill for full browser + support. Read the collapse docs for guidance. +

+
+
+

Accordion

@@ -23,7 +33,10 @@

Styled

Manual

-

By using isDisabled and isOpen you can change the element controlling the accordion. Click the arrow to open the panel.

+

+ By using isDisabled and isOpen you can change + the element controlling the accordion. Click the arrow to open the panel. +

diff --git a/demo/src/app/pages/collapse/collapse.page.html b/demo/src/app/pages/collapse/collapse.page.html index 740175a9f..b63c42efc 100644 --- a/demo/src/app/pages/collapse/collapse.page.html +++ b/demo/src/app/pages/collapse/collapse.page.html @@ -14,6 +14,22 @@

Collapse

+ +
Important Note
+

The collapse component uses the Web Animations API.

+

+ This isn't yet supported in all browsers so if using this + component please use the web-animations-js polyfill: +

+
+ +
+

Then import it in polyfills.ts: +

+ +
+
+

API

diff --git a/demo/src/app/pages/collapse/collapse.page.ts b/demo/src/app/pages/collapse/collapse.page.ts index c7865dc41..5e1fbd2a5 100644 --- a/demo/src/app/pages/collapse/collapse.page.ts +++ b/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({ diff --git a/demo/src/polyfills.ts b/demo/src/polyfills.ts index 4749399c2..d6b877c45 100644 --- a/demo/src/polyfills.ts +++ b/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'; \ No newline at end of file diff --git a/package.json b/package.json index 8c2f703cd..fc905b85d 100644 --- a/package.json +++ b/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", @@ -35,25 +35,23 @@ "@angular/common": "^4.1.0", "@angular/core": "^4.1.0", "@angular/forms": "^4.1.0", - "@angular/http": "^4.1.0", - "@angular/platform-browser": "^4.1.0", "@types/popper.js": "^1.8.0", - "core-js": "^2.4.1", "element-closest": "^2.0.2", "popper.js": "^1.0.6", - "rxjs": "^5.0.1", - "web-animations-js": "^2.2.5", - "zone.js": "^0.8.4" + "rxjs": "^5.0.1" }, "devDependencies": { "@angular/cli": "^1.0.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" diff --git a/rollup.config.js b/rollup.config.js index 295a97f0d..76967a916 100644 --- a/rollup.config.js +++ b/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,10 +40,6 @@ export default { '@angular/common', '@angular/core', '@angular/forms', - '@angular/http', - '@angular/platform-browser', - 'rxjs/Observable', - 'rxjs/Observer', 'rxjs/Subscription', ], } \ No newline at end of file