Merge pull request #50 from edcarroll/develop

v0.6.0 into master

Author: edcarroll

.gitignore

@@ -5,7 +5,6 @@
 /tmp
 
 ## ngc logs
-
 *.ngfactory.ts
 *.ngsummary.json
 

README.md

@@ -44,7 +44,7 @@ Now you're good to go!
 
 ## Dependencies
 
-* [Angular 2](https://angular.io) (>=2.0.0)
+* [Angular 2](https://angular.io) (^4.0.0)
 * [Semantic UI CSS](http://semantic-ui.com/) (jQuery is **not** required)
 
 ## Components
@@ -62,6 +62,7 @@ The current list of available components with links to their docs is below:
 * [Rating](https://edcarroll.github.io/ng2-semantic-ui/#/components/rating)
 * [Search](https://edcarroll.github.io/ng2-semantic-ui/#/components/search)
 * [Select](https://edcarroll.github.io/ng2-semantic-ui/#/components/select)
+* [Sidebar](https://edcarroll.github.io/ng2-semantic-ui/#/components/sidebar)
 * [Tabs](https://edcarroll.github.io/ng2-semantic-ui/#/components/tabs)
 * [Transition](https://edcarroll.github.io/ng2-semantic-ui/#/components/transition)
 

angular-cli.json

@@ -16,7 +16,10 @@
       "tsconfig": "tsconfig.json",
       "prefix": "demo",
       "mobile": false,
-      "styles": ["styles.css"],
+      "styles": [
+        "css/styles.css",
+        "css/code.css"
+      ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {

components/dropdown/dropdown-menu.ts

@@ -3,6 +3,12 @@ import {SuiTransition, Transition} from '../transition/transition';
 import {DropdownService, DropdownAutoCloseType} from './dropdown.service';
 import {TransitionController} from '../transition/transition-controller';
 import {KeyCode} from '../util/util';
+// Polyfill for IE
+import "element-closest";
+
+interface AugmentedElement extends Element {
+    closest(selector:string):AugmentedElement;
+}
 
 @Directive({
     // We must attach to every '.item' as Angular doesn't support > selectors.
@@ -137,7 +143,8 @@ export class SuiDropdownMenu extends SuiTransition implements AfterContentInit {
         e.stopPropagation();
 
         if (this._service.autoCloseMode == DropdownAutoCloseType.ItemClick) {
-            if (e.srcElement.classList.contains("item")) {
+            const target = e.target as AugmentedElement;
+            if (this.element.nativeElement.contains(target.closest(".item")) && !/input|textarea/i.test(target.tagName)) {
                 // Once an item is selected, we can close the entire dropdown.
                 this._service.setOpenState(false, true);
             }

components/dropdown/dropdown.ts

@@ -56,7 +56,7 @@ export class SuiDropdown implements AfterContentInit {
 
     @HostBinding('attr.tabindex')
     public get tabIndex() {
-        return this.isDisabled ? -1 : 0;
+        return (this.isDisabled || this.service.isNested) ? null : 0;
     }
 
     @Input()

components/index.ts

@@ -9,6 +9,7 @@ export * from "./progress/progress.module";
 export * from "./rating/rating.module";
 export * from "./search/search.module";
 export * from "./select/select.module";
+export * from "./sidebar/sidebar.module";
 export * from "./tabs/tab.module";
 export * from "./transition/transition.module";
 

components/popup/popup.directive.ts

@@ -123,6 +123,9 @@ export class SuiPopupDirective {
         if (!this._popupComponentRef) {
             const factory = this._componentFactoryResolver.resolveComponentFactory(SuiPopup);
             this._popupComponentRef = this._viewContainerRef.createComponent(factory);
+            
+            // Move the generated element to the body to avoid any positioning issues.
+            document.querySelector("body").appendChild(this._popupComponentRef.location.nativeElement);
 
             this._popup.onClose.subscribe(() => {
                 this._popupComponentRef.destroy();

components/search/search.module.ts

@@ -4,7 +4,7 @@ import {FormsModule} from "@angular/forms";
 import {SuiDropdownModule} from "../dropdown/dropdown.module";
 import {SuiTransitionModule} from "../transition/transition.module";
 import {SuiSearch, SuiSearchValueAccessor} from './search';
-import {SearchService} from './search.service';
+import {SearchService, LookupFn} from './search.service';
 
 @NgModule({
     imports: [
@@ -23,4 +23,4 @@ import {SearchService} from './search.service';
 })
 export class SuiSearchModule {}
 
-export {SearchService};
+export {SearchService, LookupFn};

components/search/search.service.ts

@@ -1,10 +1,13 @@
 import {readValue} from '../util/util';
 
 // Define useful types to avoid any.
-export type LookupFn<T> = (query:string) => Promise<T[]>
+export type LookupFn<T> = (query:string) => Promise<T[]> | Promise<T>;
+export type QueryLookupFn<T> = (query:string) => Promise<T[]>;
+export type ItemLookupFn<T, U> = (query:string, initial:U) => Promise<T>;
+export type ItemsLookupFn<T, U> = (query:string, initial:U[]) => Promise<T[]>;
+
 type CachedArray<T> = { [query:string]:T[] };
 
-// T extends JavascriptObject so we can do a recursive search on the object.
 export class SearchService<T> {
     // Stores the available options.
     private _options:T[];
@@ -36,6 +39,22 @@ export class SearchService<T> {
         this.reset();
     }
 
+    public get queryLookup() {
+        return this._optionsLookup as QueryLookupFn<T>;
+    }
+
+    public get hasItemLookup() {
+         return this.optionsLookup && this.optionsLookup.length == 2;
+    }
+
+    public itemLookup<U>(initial:U) {
+        return (this._optionsLookup as ItemLookupFn<T, U>)(undefined, initial);
+    }
+
+    public itemsLookup<U>(initial:U[]) {
+        return (this._optionsLookup as ItemsLookupFn<T, U>)(undefined, initial);
+    }
+
     public get optionsField() {
         return this._optionsField
     }
@@ -112,7 +131,7 @@ export class SearchService<T> {
         if (this._optionsLookup) {
             this._isSearching = true;
 
-            this._optionsLookup(this._query)
+            this.queryLookup(this._query)
                 .then(results => {
                     // Unset 'loading' state, and display & cache the results.
                     this._isSearching = false;
@@ -170,12 +189,9 @@ export class SearchService<T> {
 
     // Resets the search back to a pristine state.
     private reset() {
-        this._query = "";
         this._results = [];
-        if (this.allowEmptyQuery) {
-            this._results = this._options;
-        }
         this._resultsCache = {};
         this._isSearching = false;
+        this.updateQuery("");
     }
 }

components/search/search.ts

@@ -39,7 +39,6 @@ import {PositioningService, PositioningPlacement} from '../util/positioning.serv
 export class SuiSearch<T> implements AfterViewInit {
     public dropdownService:DropdownService;
     public searchService:SearchService<T>;
-    public position:PositioningService;
 
     @ViewChild(SuiDropdownMenu)
     private _menu:SuiDropdownMenu;
@@ -78,7 +77,7 @@ export class SuiSearch<T> implements AfterViewInit {
     // Sets local or remote options by determining whether a function is passed.
     @Input()
     public set options(options:T[] | LookupFn<T>) {
-        if (typeof(options) == "function") {
+        if (typeof options == "function") {
             this.searchService.optionsLookup = options;
             return;
         }
@@ -131,10 +130,6 @@ export class SuiSearch<T> implements AfterViewInit {
 
     public ngAfterViewInit() {
         this._menu.service = this.dropdownService;
-
-        // Initialse the positioning service to correctly display the results.
-        // This adds support for repositioning the results above the search when there isn't enough space below.
-        this.position = new PositioningService(this._element, this._menu.element, PositioningPlacement.BottomLeft);
     }
 
     // Selects an item.
@@ -160,10 +155,8 @@ export class SuiSearch<T> implements AfterViewInit {
 
     // Sets a specific item to be selected, updating the query automatically.
     public writeValue(item:T) {
-        if (item) {
-            this.selectedItem = item;
-            this.searchService.updateQuery(this.readValue(item) as string, () => {});
-        }
+        this.selectedItem = item;
+        this.searchService.updateQuery(item ? this.readValue(item) as string : "");
     }
 }