diff --git a/cypress/support/accordion.po.ts b/cypress/support/accordion.po.ts index 79c46b15c1..b026b61eb3 100644 --- a/cypress/support/accordion.po.ts +++ b/cypress/support/accordion.po.ts @@ -40,7 +40,7 @@ export class AccordionPo extends BaseComponent { isItemContentVisible(baseSelector: string, itemIndex: number, visible: boolean) { cy.get(`${baseSelector} .panel-body`) - .eq(itemIndex) + .eq(itemIndex, {timeout: 10000}) .should(visible ? 'be.visible' : 'not.be.visible'); } diff --git a/demo/src/app/components/+accordion/docs/usage.md b/demo/src/app/components/+accordion/docs/usage.md index 48c71e3a07..c7af552fcb 100644 --- a/demo/src/app/components/+accordion/docs/usage.md +++ b/demo/src/app/components/+accordion/docs/usage.md @@ -13,3 +13,5 @@ import { AccordionModule } from 'ngx-bootstrap'; ] }) export class AppModule(){} + +Also should be added web-animations-js polyfill for IE browser (Edge) diff --git a/demo/src/app/components/+collapse/docs/usage.md b/demo/src/app/components/+collapse/docs/usage.md index 6bacb44de6..fa73fbf5e8 100644 --- a/demo/src/app/components/+collapse/docs/usage.md +++ b/demo/src/app/components/+collapse/docs/usage.md @@ -13,3 +13,5 @@ import { CollapseModule } from 'ngx-bootstrap'; ] }) export class AppModule(){} + +Also should be added web-animations-js polyfill for IE browser (Edge) diff --git a/demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts b/demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts index 63e11b13b9..f18551909f 100644 --- a/demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts +++ b/demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts @@ -95,6 +95,7 @@ export class ExamplesComponent { }, dependencies: { '@angular/animations': 'latest', + 'web-animations-js': 'latest', 'ngx-bootstrap': 'next' }, title: 'stackblitz demo', diff --git a/demo/src/app/docs/demo-section-components/demo-examples-section/stackblitz/polyfills.ts b/demo/src/app/docs/demo-section-components/demo-examples-section/stackblitz/polyfills.ts index cd94522baf..e643c1de8b 100644 --- a/demo/src/app/docs/demo-section-components/demo-examples-section/stackblitz/polyfills.ts +++ b/demo/src/app/docs/demo-section-components/demo-examples-section/stackblitz/polyfills.ts @@ -32,6 +32,7 @@ export const polyfills = `/** // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/set'; +import 'web-animations-js'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run \`npm install --save classlist.js\`. diff --git a/demo/src/polyfills.ts b/demo/src/polyfills.ts index 35f18eaa73..96b8613b89 100644 --- a/demo/src/polyfills.ts +++ b/demo/src/polyfills.ts @@ -19,5 +19,6 @@ import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; import 'classlist-polyfill'; +import 'web-animations-js'; // import 'intl'; // import 'intl/locale-data/jsonp/en'; diff --git a/package-lock.json b/package-lock.json index 024773f939..5f6d636ee8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -409,15 +409,6 @@ "tslib": "^1.9.0" } }, - "@angular/http": { - "version": "7.2.15", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-7.2.15.tgz", - "integrity": "sha512-TR7PEdmLWNIre3Zn8lvyb4lSrvPUJhKLystLnp4hBMcWsJqq5iK8S3bnlR4viZ9HMlf7bW7+Hm4SI6aB3tdUtw==", - "dev": true, - "requires": { - "tslib": "^1.9.0" - } - }, "@angular/language-service": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-8.0.0.tgz", @@ -12645,11 +12636,6 @@ "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", "dev": true }, - "n": { - "version": "5.0.0-next.0", - "resolved": "https://registry.npmjs.org/n/-/n-5.0.0-next.0.tgz", - "integrity": "sha512-F0dc44VDUjDrYk/vLRIYvCrGEChLikSsAqgTEv7aJtCoNWuWP6BARHf8HqSAjQrWRF98Ve28CGkyS1tqZgb1tg==" - }, "nan": { "version": "2.14.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", @@ -18929,6 +18915,12 @@ } } }, + "web-animations-js": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.2.tgz", + "integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA==", + "dev": true + }, "webpack": { "version": "4.30.0", "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.30.0.tgz", diff --git a/package.json b/package.json index 2dec3ab06c..674f73bf7c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "flow.github-release": "conventional-github-releaser -p angular", "build": "run-s build.modules build:schematics build.sass dist-to-modules compiler-cli:fix", "compiler-cli:fix": "scripts/ivy/compiler-cli-fix.sh", - "dist-to-modules": "cp -r -T ./dist ./node_modules/ngx-bootstrap", + "dist-to-modules": "cp -R ./dist/. ./node_modules/ngx-bootstrap", "build.watch": "node scripts/build-modules --watch", "build:schematics": "node scripts/schematics/build", "build.modules": "node scripts/build-modules", @@ -130,6 +130,7 @@ "bootstrap": "4.2.1", "chai": "4.1.2", "classlist-polyfill": "1.2.0", + "web-animations-js": "2.3.2", "codecov": "3.1.0", "codelyzer": "5.0.1", "compression": "1.7.2", diff --git a/src/collapse/collapse.directive.ts b/src/collapse/collapse.directive.ts index 9b790a8b01..95a1929f1b 100644 --- a/src/collapse/collapse.directive.ts +++ b/src/collapse/collapse.directive.ts @@ -4,7 +4,6 @@ import { AnimationPlayer } from '@angular/animations'; -// todo: add animations when https://github.com/angular/angular/issues/9947 solved import { AfterViewChecked, Directive, @@ -73,8 +72,10 @@ export class CollapseDirective implements AfterViewChecked { /** A flag indicating visibility of content (shown or hidden) */ @Input() set collapse(value: boolean) { - this.isExpanded = value; - this.toggle(); + if (!this._player || this._isAnimationDone) { + this.isExpanded = value; + this.toggle(); + } } get collapse(): boolean { @@ -84,6 +85,7 @@ export class CollapseDirective implements AfterViewChecked { private _display = 'block'; private _factoryCollapseAnimation: AnimationFactory; private _factoryExpandAnimation: AnimationFactory; + private _isAnimationDone: boolean; private _player: AnimationPlayer; private _stylesLoaded = false; @@ -99,8 +101,15 @@ export class CollapseDirective implements AfterViewChecked { this._factoryExpandAnimation = _builder.build(expandAnimation); } - ngAfterViewChecked() { + ngAfterViewChecked(): void { this._stylesLoaded = true; + + if (!this._player || !this._isAnimationDone) { + return; + } + + this._player.reset(); + this._renderer.setStyle(this._el.nativeElement, 'height', '*'); } /** allows to manually toggle content visibility */ @@ -121,7 +130,10 @@ export class CollapseDirective implements AfterViewChecked { this.collapses.emit(this); + this._isAnimationDone = false; + this.animationRun(this.isAnimated, this._COLLAPSE_ACTION_NAME)(() => { + this._isAnimationDone = true; this.collapsed.emit(this); this._renderer.setStyle(this._el.nativeElement, 'display', 'none'); }); @@ -137,7 +149,10 @@ export class CollapseDirective implements AfterViewChecked { this.expands.emit(this); + this._isAnimationDone = false; + this.animationRun(this.isAnimated, this._EXPAND_ACTION_NAME)(() => { + this._isAnimationDone = true; this.expanded.emit(this); }); }