Merge pull request #82 from edcarroll/develop

v0.8.0 into master

Author: edcarroll

README.md

@@ -73,6 +73,7 @@ The current list of available components with links to their docs is below:
 * [Dimmer](https://edcarroll.github.io/ng2-semantic-ui/#/components/dimmer)
 * [Dropdown](https://edcarroll.github.io/ng2-semantic-ui/#/components/dropdown)
 * [Message](https://edcarroll.github.io/ng2-semantic-ui/#/components/message)
+* [Modal](https://edcarroll.github.io/ng2-semantic-ui/#/components/modal)
 * [Popup](https://edcarroll.github.io/ng2-semantic-ui/#/components/popup)
 * [Progress](https://edcarroll.github.io/ng2-semantic-ui/#/components/progress)
 * [Rating](https://edcarroll.github.io/ng2-semantic-ui/#/components/rating)

components/accordion/accordion-panel.ts

@@ -65,10 +65,18 @@ export class SuiAccordionPanel {
 
             // Cancel all current animations, and fade the contents. The direction is automatic.
             this.transitionController.stopAll();
-            this.transitionController.animate(new Transition("fade", this.transitionDuration));
+            this.transitionController.animate(new Transition(this.transition, this.transitionDuration));
         }
     }
 
+    public get transition() {
+        if (this._service) {
+            return this._service.transition;
+        }
+
+        return "fade";
+    }
+
     public get transitionDuration() {
         if (this._service) {
             // Return the service defined transition duration.

components/accordion/accordion.service.ts

@@ -3,12 +3,15 @@ import {SuiAccordionPanel} from "./accordion-panel";
 export class SuiAccordionService {
     public closeOthers:boolean;
 
+    public transition:string;
     public transitionDuration:number;
 
     public panels:SuiAccordionPanel[];
 
     constructor() {
         this.closeOthers = true;
+
+        this.transition = "fade";
         this.transitionDuration = 350;
 
         this.panels = [];

components/accordion/accordion.ts

@@ -33,6 +33,11 @@ export class SuiAccordion implements AfterContentInit {
         this._service.closeOthers = value;
     }
 
+    @Input()
+    public set transition(transition:string) {
+        this._service.transition = transition;
+    }
+    
     @Input()
     public set transitionDuration(duration:number) {
         this._service.transitionDuration = duration;

components/collapse/collapse.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
+import {Directive, ElementRef, Input, HostBinding, Renderer2, HostListener} from '@angular/core';
 import "web-animations-js";
 
 @Directive({
@@ -40,7 +40,14 @@ export class SuiCollapse {
     @Input()
     public collapseDuration:number;
 
-    public constructor(private _element:ElementRef, private _renderer: Renderer) {
+    private get _animationDuration() {
+        return this._pristine ? 0 : this.collapseDuration;
+    }
+
+    // Timer for window resize counter.
+    private _resizeTimeout:number;
+
+    public constructor(private _element:ElementRef, private _renderer:Renderer2) {
         this._pristine = true;
 
         // Collapse animation duration is 350ms by default.
@@ -55,10 +62,10 @@ export class SuiCollapse {
         this._isExpanded = false;
 
         // Forcibly hide the overflow so that content is not visible past the boundaries of its container.
-        this._renderer.setElementStyle(this._element.nativeElement, 'overflow', 'hidden');
+        this._renderer.setStyle(this._element.nativeElement, 'overflow', 'hidden');
 
         // Animate the host element from its scroll height to 0.
-        this.animate(this._element.nativeElement.scrollHeight, 0, () => {
+        this.animate(this._element.nativeElement.scrollHeight, 0, false, () => {
             this._isCollapsing = false;
         });
     }
@@ -67,38 +74,47 @@ export class SuiCollapse {
         this._isCollapsing = true;
 
         // Animate the host element from its offset height to its scroll height.
-        this.animate(this._element.nativeElement.offsetHeight, this._element.nativeElement.scrollHeight, () => {
+        this.animate(this._element.nativeElement.offsetHeight, this._element.nativeElement.scrollHeight, true, () => {
             // Remove the overflow override to enable user styling once again.
-            this._renderer.setElementStyle(this._element.nativeElement, 'overflow', null);
+            this._renderer.removeStyle(this._element.nativeElement, 'overflow');
 
             this._isCollapsing = false;
             this._isExpanded = true;
         });
     }
 
-    private animate(startHeight:number, endHeight:number, callback:() => void) {
+    private animate(startHeight:number, endHeight:number, removeOnComplete:boolean = false, callback:() => void = () => {}) {
+        const heightFrames = [
+            {
+                offset: 0,
+                height: `${startHeight}px`
+            },
+            {
+                offset: 1,
+                height: `${endHeight}px`
+            }
+        ];
+
+        if (removeOnComplete) {
+            heightFrames.push({
+                offset: 1,
+                height: `auto`
+            });
+        }
+
         // Animate the collapse using the web animations API.
-        this._renderer.invokeElementMethod(
-            this._element.nativeElement,
-            "animate",
-            [
-                [
-                    {
-                        height: `${startHeight}px`
-                    },
-                    {
-                        height: `${endHeight}px`
-                    }
-                ],
-                {
-                    delay: 0,
-                    // Disable animation on 1st collapse / expansion.
-                    duration: this._pristine ? 0 : this.collapseDuration,
-                    iterations: 1,
-                    easing: "ease",
-                    fill: "both"
-                }
-            ]);
+        // Using directly because Renderer2 doesn't have invokeElementMethod method anymore.
+        this._element.nativeElement.animate(
+            heightFrames,
+            {
+                delay: 0,
+                // Disable animation on 1st collapse / expansion.
+                duration: this._animationDuration,
+                iterations: 1,
+                easing: "ease",
+                fill: "both"
+            }
+        );
 
         if (this._pristine) {
             // Remove pristine flag when first hit.

components/dimmer/dimmer.ts

@@ -1,10 +1,9 @@
-import {Component, Input, Output, HostBinding, HostListener, EventEmitter, Renderer, ElementRef, ChangeDetectorRef} from '@angular/core';
+import {Component, Input, Output, HostBinding, HostListener, EventEmitter, Renderer2, ElementRef, ChangeDetectorRef} from '@angular/core';
 import {SuiTransition, Transition, TransitionDirection} from '../transition/transition';
 import {TransitionController} from '../transition/transition-controller';
 
 @Component({
     selector: 'sui-dimmer',
-    exportAs: 'suiDimmer',
     template: `
 <div class="content">
     <div class="center">
@@ -48,7 +47,7 @@ export class SuiDimmer extends SuiTransition {
 
             if (this._transitionController.isVisible != dimmed) {
                 this._transitionController.stopAll();
-                this._transitionController.animate(new Transition("fade", 300, dimmed ? TransitionDirection.In : TransitionDirection.Out));
+                this._transitionController.animate(new Transition("fade", this.transitionDuration, dimmed ? TransitionDirection.In : TransitionDirection.Out));
             }
         }
     }
@@ -65,7 +64,7 @@ export class SuiDimmer extends SuiTransition {
     @Input()
     public transitionDuration:number;
 
-    constructor(renderer:Renderer, element:ElementRef, changeDetector:ChangeDetectorRef) {
+    constructor(renderer:Renderer2, element:ElementRef, changeDetector:ChangeDetectorRef) {
         super(renderer, element, changeDetector);
 
         this._isDimmed = false;

components/dropdown/dropdown-menu.ts

@@ -1,4 +1,4 @@
-import {Directive, HostBinding, ContentChild, forwardRef, Renderer, ElementRef, AfterContentInit, ContentChildren, QueryList, Input, HostListener, ChangeDetectorRef} from '@angular/core';
+import {Directive, HostBinding, ContentChild, forwardRef, Renderer2, ElementRef, AfterContentInit, ContentChildren, QueryList, Input, HostListener, ChangeDetectorRef} from '@angular/core';
 import {SuiTransition, Transition} from '../transition/transition';
 import {DropdownService, DropdownAutoCloseType} from './dropdown.service';
 import {TransitionController} from '../transition/transition-controller';
@@ -25,7 +25,11 @@ export class SuiDropdownMenuItem {
 
     public set isSelected(value:boolean) {
         // Renderer is used to enable a dynamic class name.
-        this._renderer.setElementClass(this.element.nativeElement, this.selectedClass, value)
+        if(value){
+            this._renderer.addClass(this.element.nativeElement, this.selectedClass)
+        }else{
+            this._renderer.removeClass(this.element.nativeElement, this.selectedClass);
+        }
     }
 
     // Stores the class name used for a 'selected' item.
@@ -38,15 +42,15 @@ export class SuiDropdownMenuItem {
         return !!this.childDropdownMenu;
     }
 
-    constructor(private _renderer:Renderer, public element:ElementRef) {
+    constructor(private _renderer:Renderer2, public element:ElementRef) {
         this.isSelected = false;
 
         this.selectedClass = "selected";
     }
 
     public performClick() {
-        // Manually click the element. Done via renderer so as to avoid nativeElement changes directly.
-        this._renderer.invokeElementMethod(this.element.nativeElement, "click");
+        // Using directly because Renderer2 doesn't have invokeElementMethod method anymore.
+        this.element.nativeElement.click();
     }
 }
 
@@ -117,7 +121,7 @@ export class SuiDropdownMenu extends SuiTransition implements AfterContentInit {
     @Input()
     public menuSelectedItemClass:string;
 
-    constructor(renderer:Renderer, public element:ElementRef, changeDetector:ChangeDetectorRef) {
+    constructor(renderer:Renderer2, public element:ElementRef, changeDetector:ChangeDetectorRef) {
         super(renderer, element, changeDetector);
 
         // Initialise transition functionality.

components/dropdown/dropdown.module.ts

@@ -3,7 +3,7 @@ import {CommonModule} from "@angular/common";
 import {SuiTransitionModule} from "../transition/transition.module";
 import {SuiDropdown} from './dropdown';
 import {SuiDropdownMenu, SuiDropdownMenuItem} from './dropdown-menu';
-import {DropdownService} from './dropdown.service';
+import {DropdownService, DropdownAutoCloseType} from './dropdown.service';
 
 @NgModule({
     imports: [
@@ -23,4 +23,4 @@ import {DropdownService} from './dropdown.service';
 })
 export class SuiDropdownModule {}
 
-export {DropdownService};
+export {DropdownService, DropdownAutoCloseType};

components/dropdown/dropdown.ts

@@ -1,4 +1,4 @@
-import {Directive, Input, HostBinding, EventEmitter, Output, AfterContentInit, ContentChild, Renderer, ElementRef, HostListener, QueryList, ContentChildren, forwardRef} from '@angular/core';
+import {Directive, Input, HostBinding, EventEmitter, Output, AfterContentInit, ContentChild, Renderer2, ElementRef, HostListener, QueryList, ContentChildren, forwardRef} from '@angular/core';
 import {SuiTransition, Transition} from '../transition/transition';
 import {TransitionController} from '../transition/transition-controller';
 import {DropdownService, DropdownAutoCloseType} from './dropdown.service';

components/index.ts

@@ -4,6 +4,7 @@ export * from "./collapse/collapse.module";
 export * from "./dimmer/dimmer.module";
 export * from "./dropdown/dropdown.module";
 export * from "./message/message.module";
+export * from "./modal/modal.module";
 export * from "./popup/popup.module";
 export * from "./progress/progress.module";
 export * from "./rating/rating.module";