From 49197f04dc1f520cadd4ea7715757363bf6e6961 Mon Sep 17 00:00:00 2001 From: Gillardo Date: Fri, 4 Nov 2016 11:42:00 +0000 Subject: [PATCH] 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 --- components/dropdown/dropdown.directive.ts | 1 + components/modal/modal-backdrop.component.ts | 1 + components/modal/modal-options.class.ts | 3 ++- components/modal/modal.component.ts | 2 ++ demo/index-bs4.html | 3 ++- 5 files changed, 8 insertions(+), 2 deletions(-) diff --git a/components/dropdown/dropdown.directive.ts b/components/dropdown/dropdown.directive.ts index 3facb4359e..603fd6bddb 100644 --- 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 index 2478bc8e92..27ee248e86 100644 --- 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 index d189e9e98c..234886694a 100644 --- 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 index 69daca02c2..168f6f5dcd 100644 --- 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 index 6326170e2e..cc86380f42 100644 --- a/demo/index-bs4.html +++ b/demo/index-bs4.html @@ -13,7 +13,8 @@ - + +