Merge pull request #18 from edcarroll/develop

v0.4.2 into master

Author: edcarroll

README.md

@@ -44,7 +44,7 @@ Now you're good to go!
 
 ## Dependencies
 
-* [Angular 2](https://angular.io) (2.0.0-rc.7)
+* [Angular 2](https://angular.io) (^2.0.0 final)
 * [Semantic UI CSS](http://semantic-ui.com/) (jQuery is **not** required)
 
 ## Components

components/select/select.ts

@@ -212,7 +212,7 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {
         this._dropdownService.isOpen = false;
         this.renderSelectedItem();
 
-        this._searchService.updateQuery("");
+        this._searchService.updateQuery("", false)
     }
 
     private focusSearch() {
@@ -229,11 +229,10 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {
     }
 
     public writeValue(value:any) {
-        if (value) {
+        if (value !== null && value !== undefined) {
             this.selectedOption = value;
             if (this.options.length > 0) {
-                let compareValue = this._searchService.deepValue(value, this.keyField);
-                this.selectedOption = this.options.find(o => compareValue == o);
+                this.selectedOption = this.options.find(o => value == this._searchService.deepValue(o, this.keyField));
             }
         }
         this.renderSelectedItem();

components/tabs/tab.ts

@@ -14,6 +14,8 @@ export class SuiTab {
         }
     }
 
+    public index:number;
+
     private _content:SuiTabContent;
 
     public set content(content:SuiTabContent) {
@@ -27,7 +29,10 @@ export class SuiTab {
     private _stateObserver: Observer<SuiTab>;
 
     constructor() {
-        this.stateChanged$ = new Observable<SuiTab>((observer:any) => this._stateObserver = observer);
+        this.stateChanged$ = new Observable<SuiTab>((observer:any) => {
+            this._stateObserver = observer;
+            this._stateObserver.next(this);
+        });
     }
 
     private _isActive:boolean = false;
@@ -39,7 +44,9 @@ export class SuiTab {
     public set isActive(value:boolean) {
         var change = this._isActive != value;
         this._isActive = value;
-        this._content.isActive = value;
+        if (this._content) {
+            this._content.isActive = value;
+        }
         this.stateObserverNext(change);
         this.isActiveChange.emit(this._isActive);
 
@@ -62,7 +69,7 @@ export class SuiTab {
     }
 
     private stateObserverNext(change:boolean) {
-        if (change) {
+        if (change && this._stateObserver) {
             this._stateObserver.next(this);
         }
     }

components/tabs/tabset.ts

@@ -29,7 +29,7 @@ export class SuiTabset implements AfterContentInit {
 
         this._tabs.changes.subscribe(tabHeaders => {
             setTimeout(() => {
-                this.loadTabs()
+                this.loadTabs();
             });
         });
     }
@@ -41,7 +41,7 @@ export class SuiTabset implements AfterContentInit {
             throw new Error("You cannot have no tabs!");
         }
         //For every content header we have managed to find,
-        this._loadedTabs.forEach((t:SuiTab) => {
+        this._loadedTabs.forEach((t:SuiTab, i:number) => {
             //Assuming they have an associated content
             if (!t.content) {
                 //Link the content header with the content with the same ID excluding ones that are already linked
@@ -56,6 +56,8 @@ export class SuiTabset implements AfterContentInit {
                 t.content = possibleContents.pop();
             }
 
+            t.index = i;
+
             //Next observe the content's state to catch any changes made anywhere
             t.stateChanged$.subscribe((t:SuiTab) => this.tabStateChanged(t));
         });
@@ -81,8 +83,8 @@ export class SuiTabset implements AfterContentInit {
             this._activeTab = tab;
         }
         //Otherwise check there are no active tabs
-        else if (this._activeTab && !this._loadedTabs.filter((tH:SuiTab) => tH.isActive).length) {
-            this.activateClosestTab(tab);
+        else if (this._activeTab && !this._loadedTabs.find((tH:SuiTab) => tH.isActive)) {
+            this.activateClosestTab(this._activeTab);
         }
 
         //Check if the content is now disabled, and if so if is currently active
@@ -114,13 +116,14 @@ export class SuiTabset implements AfterContentInit {
     private activateClosestTab(tab:SuiTab) {
         //Grab a list of all of the loaded tabs that aren't disabled (excluding the one we are leaving)
         var availableTabs = this._loadedTabs
-            .filter((tH:SuiTab) => !tH.isDisabled || tH == tab);
+            .filter((tH:SuiTab) => !tH.isDisabled);
 
-        var tabIndex = availableTabs
-            .findIndex((tH:SuiTab) => tH == tab);
+        var tabIndex = tab.index;
 
-        //Go to the previous content, unless it is the 1st content.
-        tabIndex += (tabIndex ? -1 : 1);
+        // Only change the tabIndex if we have to.
+        if (tabIndex >= availableTabs.length) {
+            tabIndex = availableTabs.length - 1;
+        }
 
         availableTabs[tabIndex].isActive = true;
         //This if we just activated a disabled content, not to worry as it will bubble through

components/transition/transition.ts

@@ -2,14 +2,17 @@ import {Directive, HostBinding, ElementRef, AfterViewInit, Renderer} from "@angu
 
 export interface ISuiAnimation {
     name:string;
-    classes?:string[];
     duration?:number;
-    static?:boolean;
     display?:string;
     direction?:string;
     callback?:() => any;
 }
 
+interface ISuiConfiguredAnimation extends ISuiAnimation {
+    classes?:string[];
+    static?:boolean;
+}
+
 @Directive({
     selector: '[suiTransition]',
     exportAs: 'transition'
@@ -37,7 +40,7 @@ export class SuiTransition {
         this.renderer.setElementClass(this.el.nativeElement, "animating", value);
     }
 
-    private animationTimeout:number;
+    private animationTimeout:any;
 
     private _isVisible = null;
 
@@ -62,33 +65,40 @@ export class SuiTransition {
         this.renderer.setElementClass(this.el.nativeElement, "hidden", value);
     }
 
-    private queue:ISuiAnimation[] = [];
+    private queue:ISuiConfiguredAnimation[] = [];
 
     private queueFirst() {
         return this.queue.slice(0, 1).pop();
     }
 
+    private queueLast() {
+        return this.queue.slice(-1).pop();
+    }
+
     public animate(animation:ISuiAnimation) {
         animation = Object.assign({}, animation);
-        animation.classes = animation.name.split(" ");
-        if (!animation.duration) {
-            animation.duration = 250;
+        let anim = animation as ISuiConfiguredAnimation;
+
+        anim.classes = animation.name.split(" ");
+        if (!anim.duration) {
+            anim.duration = 250;
         }
-        if (!animation.display) {
-            animation.display = 'block';
+        if (!anim.display) {
+            anim.display = 'block';
         }
-        if (!animation.static) {
-            animation.static = ["jiggle", "flash", "shake", "pulse", "tada", "bounce"].indexOf(animation.name) != -1;
+        if (!anim.static) {
+            anim.static = ["jiggle", "flash", "shake", "pulse", "tada", "bounce"].indexOf(anim.name) != -1;
         }
-        if (!animation.direction) {
-            animation.direction = this.isVisible ? "out" : "in";
-            let queueLast = this.queueFirst();
+        if (!anim.direction) {
+            anim.direction = this.isVisible ? "out" : "in";
+            let queueLast = this.queueLast();
             if (queueLast) {
-                animation.direction = queueLast.direction == "in" ? "out" : "in"
+                anim.direction = queueLast.direction == "in" ? "out" : "in"
             }
         }
 
         this.queue.push(animation);
+
         this.performAnimation();
     }
 
@@ -115,7 +125,7 @@ export class SuiTransition {
         this.animationTimeout = setTimeout(() => this.finishAnimation(animation), animation.duration);
     }
 
-    private finishAnimation(animation:ISuiAnimation) {
+    private finishAnimation(animation:ISuiConfiguredAnimation) {
         this.isAnimating = false;
         animation.classes.forEach(c => this.renderer.setElementClass(this.el.nativeElement, c, false));
         this.renderer.setElementClass(this.el.nativeElement, animation.direction, false);

demo/app/app.component.html

@@ -2,7 +2,7 @@
     <div class="sidebar">
         <div class="ui vertical inverted fluid menu">
             <div class="item">
-                <a class="ui mini images" href="/">
+                <a class="ui mini images">
                     <img class="ui image" src="http://semantic-ui.com/images/logo.png">
                     <img class="ui image" src="https://angular.io/resources/images/logos/standard/shield-large.png">
                 </a>

demo/app/pages/getting-started/getting-started.page.html

@@ -30,7 +30,7 @@ <h2 class="ui dividing header">Installation</h2>
     <p>Now you're good to go!</p>
     <h2 class="ui dividing header">Dependencies</h2>
     <div class="ui bulleted list">
-        <div class="item"><a href="https://angular.io">Angular 2</a> (2.0.0-rc.5 <strong>or higher</strong>)</div>
+        <div class="item"><a href="https://angular.io">Angular 2</a> (^2.0.0 final)</div>
         <div class="item"><a href="http://semantic-ui.com/">Semantic UI CSS</a> (jQuery is <strong>not</strong> required)</div>
     </div>
 </div>

demo/app/pages/tabs/tabs.page.ts

@@ -92,7 +92,7 @@ export class TabsPage {
 <sui-tabset>
     <div class="ui top attached tabular menu">
         <a class="item" suiTabHeader="static">Static</a>
-        <a class="item" *ngFor="let tab of tabs; let i = index" [suiTabHeader]="i">{{ tab.header }}</a>
+        <a class="item" *ngFor="let tab of tabs; let i = index" [suiTabHeader]="i" [(isActive)]="active[i]">{{ tab.header }}</a>
     </div>
     <div class="ui bottom attached segment" *ngFor="let tab of tabs; let i = index" [suiTabContent]="i">{{ tab.content }}</div>
     <div class="ui bottom attached segment" suiTabContent="static">
@@ -149,18 +149,21 @@ export class TabExampleProperties {
     template: new TabsPage().exampleDynamicTemplate
 })
 export class TabExampleDynamic {
+    public active:boolean[] = [];
     public tabs = [
         { header: "1st", content: "Dynamic content" },
         { header: "2nd", content: "More content" },
         { header: "3rd", content: "Even more content" }
     ];
     public addTab() {
+        this.active.push(true);
         this.tabs.push({
             header: "New",
             content: "Another dynamic tab"
         });
     };
     public removeTab() {
+        this.active.pop();
         this.tabs.pop();
     }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "ng2-semantic-ui",
   "main": "ng2-semantic-ui.js",
   "typings": "ng2-semantic-ui.d.ts",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Angular 2 Semantic UI Components",
   "repository": {
     "type": "git",
@@ -30,14 +30,14 @@
     "prepublish": "tsc"
   },
   "dependencies": {
-    "@angular/common": "^2.0.0-rc.7",
-    "@angular/compiler": "^2.0.0-rc.7",
-    "@angular/core": "^2.0.0-rc.7",
-    "@angular/forms": "^2.0.0-rc.7",
-    "@angular/http": "^2.0.0-rc.7",
-    "@angular/platform-browser": "^2.0.0-rc.7",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.7",
-    "@angular/router": "^3.0.0-rc.3",
+    "@angular/common": "^2.0.0",
+    "@angular/compiler": "^2.0.0",
+    "@angular/core": "^2.0.0",
+    "@angular/forms": "^2.0.0",
+    "@angular/http": "^2.0.0",
+    "@angular/platform-browser": "^2.0.0",
+    "@angular/platform-browser-dynamic": "^2.0.0",
+    "@angular/router": "^3.0.0",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.3",
     "rxjs": "^5.0.0-beta.12",