feat(bs4): updated to alfa 5 Class name changes (#1201)

Updated modal windows and dropdowns to work with latest bootstrap code on v4-dev branch
valor-software · Nov 4, 2016 · 49197f0 · 49197f0
1 parent 83452e1
commit 49197f0
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/components/dropdown/dropdown.directive.ts b/components/dropdown/dropdown.directive.ts
@@ -10,6 +10,7 @@ import { dropdownService, NONINPUT } from './dropdown.service';
 })
 export class DropdownDirective implements OnInit, OnDestroy {
   @HostBinding('class.open')
+  @HostBinding('class.active')
   @Input()
   public get isOpen():boolean {
     return this._isOpen;

diff --git a/components/modal/modal-backdrop.component.ts b/components/modal/modal-backdrop.component.ts
@@ -32,6 +32,7 @@ export class ModalBackdropComponent {
   public set isShown(value:boolean) {
     this._isShown = value;
     this.renderer.setElementClass(this.element.nativeElement, `${ClassName.IN}`, value);
+    this.renderer.setElementClass(this.element.nativeElement, `${ClassName.ACTIVE}`, value);
   }
 
   public element:ElementRef;

diff --git a/components/modal/modal-options.class.ts b/components/modal/modal-options.class.ts
@@ -32,7 +32,8 @@ export const ClassName:any = {
   BACKDROP: 'modal-backdrop',
   OPEN: 'modal-open',
   FADE: 'fade',
-  IN: 'in'
+  IN: 'in',         // bs3
+  ACTIVE: 'active'  // bs4
 };
 
 export const Selector:any = {

diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts
@@ -163,6 +163,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
     this._isShown = false;
     this.renderer.setElementClass(this.element.nativeElement, ClassName.IN, false);
+    this.renderer.setElementClass(this.element.nativeElement, ClassName.ACTIVE, false);
     // this._addClassIn = false;
 
     if (this.isAnimated) {
@@ -200,6 +201,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
     // this._addClassIn = true;
     this.renderer.setElementClass(this.element.nativeElement, ClassName.IN, true);
+    this.renderer.setElementClass(this.element.nativeElement, ClassName.ACTIVE, true);
 
     const transitionComplete = () => {
       if (this._config.focus) {

diff --git a/demo/index-bs4.html b/demo/index-bs4.html
@@ -13,7 +13,8 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet" type="text/css">
 
   <!--link to bootstrap.css v4.0.0-alpha-->
-  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
+  <!--<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">-->
   <link rel="stylesheet" href="assets/css/glyphicons.css">
   <link rel="stylesheet" href="assets/css/style.css">
   <link rel="stylesheet" href="assets/css/prettify-angulario.css">