From 9c8c74b5f3a09882e3a50b8d3a814e5dbc4b0d1c Mon Sep 17 00:00:00 2001 From: Dmitriy Schekhovtsov Date: Wed, 5 Apr 2017 23:55:39 +0300 Subject: [PATCH] fix(dropdowns): fixed styling of dropdowns with bootstrap 4 --- README.md | 2 +- demo/src/app/getting-started/getting-started.md | 2 +- demo/src/polyfills.ts | 2 +- docs/getting-started/angular-seed.md | 4 ++-- docs/getting-started/aot.md | 4 ++-- src/dropdown/bs-dropdown.directive.ts | 11 +++++++++-- 6 files changed, 16 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index d020e83d16..1d576139e4 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # ngx-bootstrap [![npm version](https://badge.fury.io/js/ngx-bootstrap.svg)](http://badge.fury.io/js/ngx-bootstrap) [![npm downloads](https://img.shields.io/npm/dm/ng2-bootstrap.svg)](https://npmjs.org/ngx-bootstrap)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com) Native Angular directives for Bootstrap 3 and Bootstrap 4 -[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide) +[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide) [![Build Status](https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=master)](https://travis-ci.org/valor-software/ngx-bootstrap) [![codecov](https://codecov.io/gh/valor-software/ngx-bootstrap/branch/development/graph/badge.svg)](https://codecov.io/gh/valor-software/ngx-bootstrap) [![Dependency Status](https://david-dm.org/valor-software/ngx-bootstrap.svg)](https://david-dm.org/valor-software/ngx-bootstrap) diff --git a/demo/src/app/getting-started/getting-started.md b/demo/src/app/getting-started/getting-started.md index 9ba1efd6ec..6290f4d921 100644 --- a/demo/src/app/getting-started/getting-started.md +++ b/demo/src/app/getting-started/getting-started.md @@ -1,6 +1,6 @@ # ngx-bootstrap [![npm version](https://badge.fury.io/js/ngx-bootstrap.svg)](http://badge.fury.io/js/ngx-bootstrap) [![npm downloads](https://img.shields.io/npm/dm/ng2-bootstrap.svg)](https://npmjs.org/ngx-bootstrap)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com) -[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide) +[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide) [![Build Status](https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=master)](https://travis-ci.org/valor-software/ngx-bootstrap) [![codecov](https://codecov.io/gh/valor-software/ngx-bootstrap/branch/development/graph/badge.svg)](https://codecov.io/gh/valor-software/ngx-bootstrap) [![Dependency Status](https://david-dm.org/valor-software/ngx-bootstrap.svg)](https://david-dm.org/valor-software/ngx-bootstrap) diff --git a/demo/src/polyfills.ts b/demo/src/polyfills.ts index 505a23312d..129f07b40a 100644 --- a/demo/src/polyfills.ts +++ b/demo/src/polyfills.ts @@ -1,4 +1,4 @@ -// This file includes polyfills needed by Angular 2 and is loaded before +// This file includes polyfills needed by Angular and is loaded before // the app. You can add your own extra polyfills to this file. import 'ts-helpers'; import 'core-js/es6/symbol'; diff --git a/docs/getting-started/angular-seed.md b/docs/getting-started/angular-seed.md index 78331e6c3d..b791703d63 100644 --- a/docs/getting-started/angular-seed.md +++ b/docs/getting-started/angular-seed.md @@ -27,13 +27,13 @@ // required for dev build { name:'ngx-bootstrap', - path:'node_modules/ngx-bootstrap/bundles/ng2-bootstrap.umd.min.js' + path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js' }, // required for prod build { name:'ngx-bootstrap/*', - path:'node_modules/ngx-bootstrap/bundles/ng2-bootstrap.umd.min.js' + path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js' }, // mandatory dependency for ngx-bootstrap datepicker diff --git a/docs/getting-started/aot.md b/docs/getting-started/aot.md index 96d74fb300..1bdac272f5 100644 --- a/docs/getting-started/aot.md +++ b/docs/getting-started/aot.md @@ -10,9 +10,9 @@ Note that you also have to include bootstrap CSS from the official Bootrstrap si npm install ngx-bootstrap bootstrap --save ``` -#### 2) Edit Angular 2 module +#### 2) Edit Angular module -Open the module file where you want to include ngx-bootstrap (most probably `app.module.ts`) and import either specific ngx-bootstrap modules by listing them in the import statement and then in the import array of the Angular 2 module +Open the module file where you want to include ngx-bootstrap (most probably `app.module.ts`) and import either specific ngx-bootstrap modules by listing them in the import statement and then in the import array of the Angular module ```typescript import { AlertModule } from 'ngx-bootstrap/alert'; diff --git a/src/dropdown/bs-dropdown.directive.ts b/src/dropdown/bs-dropdown.directive.ts index 01a9f089db..d479358743 100644 --- a/src/dropdown/bs-dropdown.directive.ts +++ b/src/dropdown/bs-dropdown.directive.ts @@ -11,12 +11,17 @@ import { BsDropdownContainerComponent } from './bs-dropdown-container.component' import { BsDropdownState } from './bs-dropdown.state'; import { BsComponentRef } from '../component-loader/bs-component-ref.class'; import { BsDropdownMenuDirective } from './'; +import { isBs3 } from '../utils/ng2-bootstrap-config'; @Directive({ selector: '[bsDropdown],[dropdown]', exportAs: 'bs-dropdown', providers: [BsDropdownState], - host: {'[class.dropup]': 'dropup'} + host: { + '[class.dropup]': 'dropup', + '[class.open]': 'isOpen', + '[class.show]': 'isOpen && isBs4' + } }) export class BsDropdownDirective implements OnInit, OnDestroy { /** @@ -69,7 +74,6 @@ export class BsDropdownDirective implements OnInit, OnDestroy { /** * Returns whether or not the popover is currently being shown */ - @HostBinding('class.open') @Input() get isOpen(): boolean { if (this._showInline) { return this._isInlineOpen; @@ -94,6 +98,9 @@ export class BsDropdownDirective implements OnInit, OnDestroy { */ @Output() onHidden: EventEmitter; + get isBs4(): boolean { + return !isBs3(); + } // todo: move to component loader private _isInlineOpen = false; private _showInline: boolean;