From ecd958c04a55a2df5c5033ecdc49a1e6fa3ef933 Mon Sep 17 00:00:00 2001
From: Ed Carroll <ed@edcarroll.co.uk>
Date: Sun, 4 Jun 2017 07:19:08 +0100
Subject: [PATCH 01/14] Fixed version mismatch

Closes #84
---
 README.md                                                    | 2 +-
 demo/src/app/pages/getting-started/getting-started.page.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a2de6a3a8..eb9a90e0d 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,7 @@ Now you're good to go!
 
 ## Dependencies
 
-* [Angular](https://angular.io) (^4.0.0)
+* [Angular](https://angular.io) (^4.1.0)
 * [Semantic UI CSS](http://semantic-ui.com/) (jQuery is **not** required)
 
 ## Components
diff --git a/demo/src/app/pages/getting-started/getting-started.page.html b/demo/src/app/pages/getting-started/getting-started.page.html
index 8806d559d..c63f1374b 100644
--- a/demo/src/app/pages/getting-started/getting-started.page.html
+++ b/demo/src/app/pages/getting-started/getting-started.page.html
@@ -33,7 +33,7 @@ <h2 class="ui dividing header">Installation</h2>
     </div>
     <h2 class="ui dividing header">Dependencies</h2>
     <div class="ui bulleted list">
-        <div class="item"><a href="https://angular.io">Angular</a> (^4.0.0)</div>
+        <div class="item"><a href="https://angular.io">Angular</a> (^4.1.0)</div>
         <div class="item"><a href="http://semantic-ui.com/">Semantic UI CSS</a> (jQuery is <strong>not</strong> required)</div>
     </div>
 </demo-page-content>

From ca50fadd34f1921b99eedb6abf709f70104a509c Mon Sep 17 00:00:00 2001
From: Ed Carroll <ed@edcarroll.co.uk>
Date: Sun, 4 Jun 2017 07:20:43 +0100
Subject: [PATCH 02/14] Fixed favicon

---
 demo/src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/index.html b/demo/src/index.html
index d25b9ce70..8f0b91a69 100644
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -5,7 +5,7 @@
 
     <base href="/">
 
-    <link rel="icon" sizes="16x16" type="image/x-icon" href="/favicon.ico">
+    <link rel="icon" sizes="16x16" type="image/x-icon" href="favicon.ico">
 
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

From 9aef10058c4e52cfabdce00f711511811891f6fd Mon Sep 17 00:00:00 2001
From: Ed Carroll <ed@edcarroll.co.uk>
Date: Sun, 4 Jun 2017 07:30:10 +0100
Subject: [PATCH 03/14] Stopped global defaults working for popup examples

---
 demo/src/app/pages/popup/popup.page.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/demo/src/app/pages/popup/popup.page.ts b/demo/src/app/pages/popup/popup.page.ts
index 9a19292fa..e58cc8d60 100644
--- a/demo/src/app/pages/popup/popup.page.ts
+++ b/demo/src/app/pages/popup/popup.page.ts
@@ -1,5 +1,6 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit, OnDestroy} from '@angular/core';
 import {ApiDefinition} from "../../components/api/api.component";
+import {SuiPopupConfig} from '../../../../../components/popup/popup.service';
 
 const exampleStandardTemplate = `
 <button class="ui green icon button" suiPopup popupHeader="Example" popupText="This is an example popup">
@@ -167,7 +168,21 @@ export class MyComponent {
     selector: 'popup-example-standard',
     template: exampleStandardTemplate
 })
-export class PopupExampleStandard {}
+export class PopupExampleStandard implements OnInit {
+    // We only need to do this once.
+    private _config:SuiPopupConfig;
+
+    constructor(public popupConfig:SuiPopupConfig) {
+        this._config = new SuiPopupConfig();
+
+        Object.assign(this._config, popupConfig);
+        Object.assign(this.popupConfig, new SuiPopupConfig());
+    }
+
+    public ngOnInit() {
+        Object.assign(this.popupConfig, this._config);
+    }
+}
 
 @Component({
     selector: 'popup-example-template',

From 04929492f30ddb76169f7c5ec811cb979a69f198 Mon Sep 17 00:00:00 2001
From: Ed Carroll <ed@edcarroll.co.uk>
Date: Sun, 4 Jun 2017 07:50:43 +0100
Subject: [PATCH 04/14] Closes #86

---
 components/modal/modal.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/modal/modal.ts b/components/modal/modal.ts
index fb4415ae6..bdd4a4f28 100644
--- a/components/modal/modal.ts
+++ b/components/modal/modal.ts
@@ -124,10 +124,12 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     }
 
     public ngOnInit() {
-        // Transition the modal to be visible.
-        this.transitionController.animate(new Transition(this.transition, this.transitionDuration, TransitionDirection.In));
         // Use a slight delay as the `<sui-dimmer>` cancels the initial transition.
-        setTimeout(() => this.dimBackground = true);
+        setTimeout(() => {
+            // Transition the modal to be visible.
+            this.transitionController.animate(new Transition(this.transition, this.transitionDuration, TransitionDirection.In))
+            this.dimBackground = true;
+        });
     }
 
     public ngAfterViewInit() {

From 7f7a5c3dd5e10935ff02d17d55bd4d14e59e66c5 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 18:52:29 +0100
Subject: [PATCH 05/14] Modal windows are now scrollable

Added `mustScroll` option to modal.
Closes #87
---
 components/collapse/collapse.ts        |  3 --
 components/modal/modal-config.ts       |  5 +++
 components/modal/modal.ts              | 49 ++++++++++++++++++++++++--
 demo/src/app/pages/modal/modal.page.ts |  6 ++++
 demo/src/index.html                    |  2 +-
 5 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/components/collapse/collapse.ts b/components/collapse/collapse.ts
index 2b05fe31e..2875eb707 100644
--- a/components/collapse/collapse.ts
+++ b/components/collapse/collapse.ts
@@ -44,9 +44,6 @@ export class SuiCollapse {
         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;
 
diff --git a/components/modal/modal-config.ts b/components/modal/modal-config.ts
index cd68c1d1b..19bebcc56 100644
--- a/components/modal/modal-config.ts
+++ b/components/modal/modal-config.ts
@@ -27,6 +27,9 @@ export class ModalConfig<T, U = null, V = null> {
     // Whether or not the modal has basic styles applied.
     public isBasic:boolean;
 
+    // Whether or not the modal should always display a scrollbar.
+    public mustScroll:boolean;
+
     // Transition to display modal with.
     public transition:string;
     // Duration of the modal & dimmer transitions.
@@ -41,6 +44,8 @@ export class ModalConfig<T, U = null, V = null> {
         this.isFullScreen = false;
         this.isBasic = false;
 
+        this.mustScroll = false;
+
         this.transition = "scale";
         this.transitionDuration = 500;
     }
diff --git a/components/modal/modal.ts b/components/modal/modal.ts
index bdd4a4f28..5503b8941 100644
--- a/components/modal/modal.ts
+++ b/components/modal/modal.ts
@@ -16,6 +16,7 @@ import {ModalConfig, ModalSize} from './modal-config';
      [class.active]="transitionController?.isVisible"
      [class.fullscreen]="isFullScreen"
      [class.basic]="isBasic"
+     [class.scrolling]="mustScroll"
      #modal>
 
     <!-- Configurable close icon -->
@@ -25,7 +26,15 @@ import {ModalConfig, ModalSize} from './modal-config';
     <!-- @ViewChild reference so we can insert elements beside this div. -->
     <div #templateSibling></div>
 </div>
-`
+`,
+    styles: [`
+.scrolling {
+    position: absolute !important;
+    margin-top: 3.5rem !important;
+    margin-bottom: 3.5rem !important;
+    top: 0;
+}
+`]
 })
 export class SuiModal<T, U> implements OnInit, AfterViewInit {
     @Input()
@@ -83,6 +92,22 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     @Input()
     public isBasic:boolean;
 
+    // Whether the modal currently is displaying a scrollbar.
+    private _mustScroll:boolean;
+    // Whether or not the modal should always display a scrollbar.
+    private _mustAlwaysScroll:boolean;
+
+    @Input()
+    public get mustScroll() {
+        return this._mustScroll;
+    }
+
+    public set mustScroll(mustScroll:boolean) {
+        this._mustScroll = mustScroll;
+        this._mustAlwaysScroll = mustScroll;
+        this.updateScroll();
+    }
+
     public transitionController:TransitionController;
 
     // Transition to display modal with.
@@ -135,7 +160,10 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     public ngAfterViewInit() {
         // Update margin offset to center modal correctly on-screen.
         const element = this._modalElement.nativeElement as Element;
-        this._renderer.setStyle(element, "margin-top", `-${element.clientHeight / 2}px`);
+        setTimeout(() => {
+            this._renderer.setStyle(element, "margin-top", `-${element.clientHeight / 2}px`);
+            this.updateScroll();
+        });
     }
 
     // Updates the modal with the specified configuration.
@@ -147,6 +175,8 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
         this.isFullScreen = config.isFullScreen;
         this.isBasic = config.isBasic;
 
+        this.mustScroll = config.mustScroll;
+
         this.transition = config.transition;
         this.transitionDuration = config.transitionDuration;
     }
@@ -177,11 +207,24 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
         }
     }
 
+    private updateScroll() {
+        const fontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
+        const margin = fontSize * 3.5;
+        const element = this._modalElement.nativeElement as Element;
+        
+        this._mustScroll = !this._mustAlwaysScroll && window.innerHeight < element.clientHeight + margin * 2;
+    }
+
     @HostListener("document:keyup", ["$event"])
-    public onKeyup(e:KeyboardEvent) {
+    public onDocumentKeyup(e:KeyboardEvent) {
         if (e.keyCode == KeyCode.Escape) {
             // Close automatically covers case of `!isClosable`, so check not needed.
             this.close();
         }
     }
+
+    @HostListener("window:resize")
+    public onDocumentResize() {
+        this.updateScroll();
+    }
 }
\ No newline at end of file
diff --git a/demo/src/app/pages/modal/modal.page.ts b/demo/src/app/pages/modal/modal.page.ts
index 8c8f49f0e..d28006b08 100644
--- a/demo/src/app/pages/modal/modal.page.ts
+++ b/demo/src/app/pages/modal/modal.page.ts
@@ -78,6 +78,12 @@ export class ModalPage {
                     description: "Sets whether or not clicking the dimmer will dismiss it.",
                     defaultValue: "true"
                 },
+                {
+                    name: "mustScroll",
+                    type: "boolean",
+                    description: "Whether or not the modal should always display a scrollbar.",
+                    defaultValue: "false"
+                },
                 {
                     name: "transition",
                     type: "string",
diff --git a/demo/src/index.html b/demo/src/index.html
index 8f0b91a69..022bfb1d5 100644
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-    <title>ng2-semantic-ui - Semantic UI Angular 2 Integrations</title>
+    <title>ng2-semantic-ui - Semantic UI Angular Integrations</title>
 
     <base href="/">
 

From b2ec965d19ad374d8edb92b4c4bcb2d2f661c40c Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 19:24:51 +0100
Subject: [PATCH 06/14] Warns user when using typescript < 2.3

Addresses #88
---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e230aeecf..c6420c844 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,9 @@
     "rollup-plugin-uglify": "~1.0.1",
     "ts-node": "~2.0.0",
     "tslint": "~4.3.1",
-    "typescript": "^2.1.6"
+    "typescript": "^2.3.0"
+  },
+  "peerDependencies": {
+    "typescript": "^2.3.0"
   }
 }

From 253a4f0409a6833e540451e4bbb62a5bc442a139 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 19:45:00 +0100
Subject: [PATCH 07/14] Added support for search options lookup to not return
 promise

---
 components/search/search.service.ts | 41 ++++++++++++++++++-----------
 components/select/multi-select.ts   | 11 ++++++--
 components/select/select.ts         | 18 ++++++++-----
 3 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/components/search/search.service.ts b/components/search/search.service.ts
index 93793334f..f1c4e6b99 100644
--- a/components/search/search.service.ts
+++ b/components/search/search.service.ts
@@ -1,10 +1,10 @@
 import {readValue} from '../util/util';
 
 // Define useful types to avoid any.
-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[]>;
+export type LookupFn<T> = (query:string) => (Promise<T[]> | Promise<T> | T[] | T);
+export type QueryLookupFn<T> = (query:string) => (Promise<T[]> | T[]);
+export type ItemLookupFn<T, U> = (query:string, initial:U) => (Promise<T> | T);
+export type ItemsLookupFn<T, U> = (query:string, initial:U[]) => (Promise<T[]> | T[]);
 
 type CachedArray<T> = { [query:string]:T[] };
 
@@ -131,18 +131,27 @@ export class SearchService<T> {
         if (this._optionsLookup) {
             this._isSearching = true;
 
-            this.queryLookup(this._query)
-                .then(results => {
-                    // Unset 'loading' state, and display & cache the results.
-                    this._isSearching = false;
-                    this.updateResults(results);
-                    return callback(null);
-                })
-                .catch(error => {
-                    // Unset 'loading' state, and throw the returned error without updating the results.
-                    this._isSearching = false;
-                    return callback(error);
-                });
+            const lookupFinished = (results:T[]) => {
+                this._isSearching = false;
+
+                this.updateResults(results);
+                return callback(null);
+            }
+
+            const queryLookup = this.queryLookup(this._query);
+
+            if (queryLookup instanceof Promise) {
+                queryLookup
+                    .then(results => lookupFinished(results))
+                    .catch(error => {
+                        // Unset 'loading' state, and throw the returned error without updating the results.
+                        this._isSearching = false;
+                        return callback(error);
+                    });
+            }
+            else {
+                lookupFinished(queryLookup);
+            }
             return;
         }
 
diff --git a/components/select/multi-select.ts b/components/select/multi-select.ts
index de083ffdb..a55c5926d 100644
--- a/components/select/multi-select.ts
+++ b/components/select/multi-select.ts
@@ -113,8 +113,15 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements AfterVi
             if (values.length > 0 && this.selectedOptions.length == 0) {
                 if (this.valueField && this.searchService.hasItemLookup) {
                     // If the search service has a selected lookup function, make use of that to load the initial values.
-                    this.searchService.itemsLookup<U>(values)
-                        .then(r => this.selectedOptions = r);
+                    const lookupFinished = (items:T[]) => this.selectedOptions = items;
+
+                    const itemsLookup = this.searchService.itemsLookup<U>(values);
+                    if (itemsLookup instanceof Promise) {
+                        itemsLookup.then(r => lookupFinished(r));
+                    }
+                    else {
+                        lookupFinished(itemsLookup);
+                    }
                 }
                 else {
                     // Otherwise, cache the written value for when options are set.
diff --git a/components/select/select.ts b/components/select/select.ts
index 9117db13e..007651d6b 100644
--- a/components/select/select.ts
+++ b/components/select/select.ts
@@ -86,12 +86,18 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> implements CustomValueA
             if (!this.selectedOption) {
                 if (this.valueField && this.searchService.hasItemLookup) {
                     // If the search service has a selected lookup function, make use of that to load the initial value.
-                    (this.searchService.itemLookup<U>(value) as Promise<T>)
-                        .then(r => {
-                            this.selectedOption = r;
-
-                            this.drawSelectedOption();
-                        });
+                    const lookupFinished = (i:T) => {
+                        this.selectedOption = i;
+                        this.drawSelectedOption();
+                    }
+
+                    const itemLookup = this.searchService.itemLookup<U>(value);
+                    if (itemLookup instanceof Promise) {
+                        itemLookup.then(r => lookupFinished(r));
+                    }
+                    else {
+                        lookupFinished(itemLookup);
+                    }
                     return;
                 }
                 else {

From 192bd5c30547fe12e53daad0da15c5310dc98780 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 20:41:48 +0100
Subject: [PATCH 08/14] Updated docs for local search

Closes #85
---
 demo/src/app/pages/search/search.page.html | 9 ++++++++-
 demo/src/app/pages/search/search.page.ts   | 6 +++---
 demo/src/app/pages/select/select.page.ts   | 2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/demo/src/app/pages/search/search.page.html b/demo/src/app/pages/search/search.page.html
index e243bc6d2..f210d7173 100644
--- a/demo/src/app/pages/search/search.page.html
+++ b/demo/src/app/pages/search/search.page.html
@@ -11,7 +11,14 @@ <h2 class="ui dividing header">Examples</h2>
             <h4 class="ui header">Local</h4>
             <p>A search can display a set of local results</p>
         </div>
-        <search-example-standard result></search-example-standard>
+        <div result>
+            <search-example-standard></search-example-standard>
+            <br>
+            <p>
+                Note: Setting the <code>[options]</code> property to a function that takes a query
+                and returns an array of results allows for custom search functions on local data.
+            </p>
+        </div>
     </demo-example>
     <demo-example [code]="exampleRemoteTemplate">
         <div info>
diff --git a/demo/src/app/pages/search/search.page.ts b/demo/src/app/pages/search/search.page.ts
index de799083f..ee312c405 100644
--- a/demo/src/app/pages/search/search.page.ts
+++ b/demo/src/app/pages/search/search.page.ts
@@ -33,7 +33,7 @@ export class SearchPage {
                 {
                     name: "options",
                     type: "T[] | LookupFn<T>",
-                    description: "Sets the options available to the search component. Can either be an array or a function that takes a query and returns a Promise for remote lookup.",
+                    description: "Sets the options available to the search component. Can either be an array, or a function that takes a query and returns either a <code>Promise</code> (for remote lookups) or an array (for custom local searches).",
                     required: true
                 },
                 {
@@ -73,8 +73,8 @@ export class SearchPage {
             ]
         }
     ];
-    public exampleStandardTemplate;
-    public exampleRemoteTemplate;
+    public exampleStandardTemplate = exampleStandardTemplate;
+    public exampleRemoteTemplate = exampleRemoteTemplate;
 }
 
 @Component({
diff --git a/demo/src/app/pages/select/select.page.ts b/demo/src/app/pages/select/select.page.ts
index acc37970f..f625f9eb0 100644
--- a/demo/src/app/pages/select/select.page.ts
+++ b/demo/src/app/pages/select/select.page.ts
@@ -104,7 +104,7 @@ export class SelectPage {
                 {
                     name: "options",
                     type: "T[] | LookupFn<T>",
-                    description: "Sets the options available to the select component. Can either be an array or a function that takes a query and returns a Promise for remote lookup."
+                    description: "Sets the options available to the select component. Can either be an array, or a function that takes a query and returns either a <code>Promise</code> (for remote lookups) or an array (for custom local searches)."
                 },
                 {
                     name: "labelField",

From 5388994409045fa3ab0346f04e80b7fa7ab16d51 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 21:56:33 +0100
Subject: [PATCH 09/14] Popper arrows now flow correctly when auto repositioned

Closes #83
---
 components/popup/popup.ts              |  4 +--
 components/util/positioning.service.ts | 43 +++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/components/popup/popup.ts b/components/popup/popup.ts
index 9ef104c8a..8185ab774 100644
--- a/components/popup/popup.ts
+++ b/components/popup/popup.ts
@@ -16,7 +16,7 @@ import Popper from "popper.js";
         <div class="content">{{ config.text }}</div>
     </ng-container>
     <div #templateSibling></div>
-    <sui-popup-arrow *ngIf="!config.isBasic" [placement]="_positioningService.placement" [inverted]="config.isInverted"></sui-popup-arrow>
+    <sui-popup-arrow *ngIf="!config.isBasic" [placement]="_positioningService.actualPlacement" [inverted]="config.isInverted"></sui-popup-arrow>
 </div>
 `,
     styles: [`
@@ -83,7 +83,7 @@ export class SuiPopup implements IPopup {
     // Returns the direction (`top`, `left`, `right`, `bottom`) of the current placement.
     public get direction() {
         if (this._positioningService) {
-            return this._positioningService.placement.split(" ").shift();
+            return this._positioningService.actualPlacement.split(" ").shift();
         }
     }
 
diff --git a/components/util/positioning.service.ts b/components/util/positioning.service.ts
index a41a99f11..08fe4385e 100644
--- a/components/util/positioning.service.ts
+++ b/components/util/positioning.service.ts
@@ -57,6 +57,43 @@ function placementToPopper(placement:PositioningPlacement):PopperPlacement {
     return chosenPlacement.join("-") as PopperPlacement;
 }
 
+function popperToPlacement(popper:string):PositioningPlacement {
+    if (!popper || popper == "inherit") {
+        return "inherit";
+    }
+
+    const [direction, alignment] = popper.split("-");
+
+    let chosenPlacement = [direction];
+
+    switch (direction) {
+        case "top":
+        case "bottom":
+            switch (alignment) {
+                case "start":
+                    chosenPlacement.push("left");
+                    break;
+                case "end":
+                    chosenPlacement.push("right");
+                    break;
+            }
+            break;
+        case "left":
+        case "right":
+            switch (alignment) {
+                case "start":
+                    chosenPlacement.push("top");
+                    break;
+                case "end":
+                    chosenPlacement.push("bottom");
+                    break;
+            }
+            break;
+    }
+
+    return chosenPlacement.join(" ") as PositioningPlacement;
+}
+
 export class PositioningService {
     public readonly anchor:ElementRef;
     public readonly subject:ElementRef;
@@ -65,7 +102,7 @@ export class PositioningService {
     private _popperState:Popper.Data;
     private _placement:PositioningPlacement;
 
-    public get placement():PositioningPlacement {
+    public get placement() {
         return this._placement;
     }
 
@@ -75,6 +112,10 @@ export class PositioningService {
         this.update();
     }
 
+    public get actualPlacement() {
+        return popperToPlacement(this._popperState.placement);
+    }
+
     public get state() {
         return this._popperState;
     }

From 640b0a73c4ba7fa81b048d6eee03f6efa227ab69 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 21:57:11 +0100
Subject: [PATCH 10/14] Bumped version number

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c6420c844..8c2f703cd 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "main": "bundles/ng2-semantic-ui.umd.min.js",
   "module": "index.js",
   "typings": "index.d.ts",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Angular 2 Semantic UI Components",
   "repository": {
     "type": "git",

From 4ee15fc72e72db8f9928adce414804d32c219ddd Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 22:46:03 +0100
Subject: [PATCH 11/14] Fixed errors on modal & popup open

---
 components/modal/modal.ts              | 9 ++++++---
 components/util/positioning.service.ts | 4 ++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/modal/modal.ts b/components/modal/modal.ts
index 5503b8941..6f9faa90e 100644
--- a/components/modal/modal.ts
+++ b/components/modal/modal.ts
@@ -210,9 +210,12 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     private updateScroll() {
         const fontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
         const margin = fontSize * 3.5;
-        const element = this._modalElement.nativeElement as Element;
-        
-        this._mustScroll = !this._mustAlwaysScroll && window.innerHeight < element.clientHeight + margin * 2;
+
+        if (this._modalElement) {
+            const element = this._modalElement.nativeElement as Element;
+
+            this._mustScroll = !this._mustAlwaysScroll && window.innerHeight < element.clientHeight + margin * 2;
+        }
     }
 
     @HostListener("document:keyup", ["$event"])
diff --git a/components/util/positioning.service.ts b/components/util/positioning.service.ts
index 08fe4385e..f4735b9cf 100644
--- a/components/util/positioning.service.ts
+++ b/components/util/positioning.service.ts
@@ -113,6 +113,10 @@ export class PositioningService {
     }
 
     public get actualPlacement() {
+        if (!this._popperState) {
+            return PositioningPlacement.Inherit;
+        }
+        
         return popperToPlacement(this._popperState.placement);
     }
 

From 58b24c3fa4db1433d11f453bcdccd3ef7bef63c0 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 23:03:43 +0100
Subject: [PATCH 12/14] Improved modal docs

---
 components/modal/modal.service.ts      |  6 +++++-
 demo/src/app/pages/modal/modal.page.ts | 20 ++++++++++----------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/modal/modal.service.ts b/components/modal/modal.service.ts
index f08687ce5..b423ebc0e 100644
--- a/components/modal/modal.service.ts
+++ b/components/modal/modal.service.ts
@@ -25,7 +25,7 @@ export class SuiModalService {
                 $implicit: modal.context,
                 // `let-modal="modal"`
                 modal: componentRef.instance.controls
-            });
+            })
         }
         // If the config is for a component based modal,
         else if (modal instanceof ComponentModalConfig) {
@@ -59,6 +59,10 @@ export class SuiModalService {
             contentElement.remove();
         }
 
+        // Remove the template div from the DOM. This is to fix some styling issues.
+        const templateElement = modalComponent.templateSibling.element.nativeElement as Element;
+        templateElement.remove();
+
         // Attach the new modal component to the application.
         this._applicationRef.attachView(componentRef.hostView);
 
diff --git a/demo/src/app/pages/modal/modal.page.ts b/demo/src/app/pages/modal/modal.page.ts
index d28006b08..5ddc356fa 100644
--- a/demo/src/app/pages/modal/modal.page.ts
+++ b/demo/src/app/pages/modal/modal.page.ts
@@ -12,8 +12,8 @@ const exampleTemplateModalTemplate = `
         <p>{{ context.data }}</p>
     </div>
     <div class="actions">
-        <button class="ui red button" (click)="modal.deny('denied!')">Cancel</button>
-        <button class="ui green button" (click)="modal.approve('approved!')">OK</button>
+        <button class="ui red button" (click)="modal.deny('denied')">Cancel</button>
+        <button class="ui green button" (click)="modal.approve('approved')">OK</button>
     </div>
 </ng-template>
 `;
@@ -153,7 +153,7 @@ export class MyComponent {
 public open(dynamicContent:string = "Example") {
     const config = new TemplateModalConfig<IContext, string, string>(this.modalTemplate);
 
-    config.isClosable = false;
+    config.closeResult = "closed!";
     config.context = { data: dynamicContent };
 
     this.modalService
@@ -195,8 +195,8 @@ export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, voi
     public componentOpen = `
 this.modalService
     .open(new ConfirmModal("Are you sure?", "Are you sure about accepting this?"))
-    .onApprove(() => alert("accepted!"))
-    .onDeny(() => alert("denied!"));
+    .onApprove(() => alert("User has accepted."))
+    .onDeny(() => alert("User has denied."));
 `;
 }
 
@@ -215,13 +215,13 @@ export class ModalExampleTemplate {
     public open(dynamicContent:string = "Example") {
         const config = new TemplateModalConfig<{ data:string }, string, string>(this.modalTemplate);
 
-        config.isClosable = false;
+        config.closeResult = "dismissed";
         config.context = { data: dynamicContent };
 
         this.modalService
             .open(config)
-            .onApprove(r => alert(r)) 
-            .onDeny(r => alert(r));
+            .onApprove(r => alert(`Accepted with result: '${r}'.`)) 
+            .onDeny(r => alert(`Denied with result: '${r}'.`));
     }
 }
 
@@ -258,8 +258,8 @@ export class ModalExampleComponent {
     public open() {
         this.modalService
             .open(new ConfirmModal("Are you sure?", "Are you sure about accepting this?"))
-            .onApprove(() => alert("accepted!"))
-            .onDeny(() => alert("denied!"));
+            .onApprove(() => alert("User has accepted."))
+            .onDeny(() => alert("User has denied."));
     }
 }
 

From df8a199b059bb425917d09f11fc5c1c4305897d9 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 23:14:05 +0100
Subject: [PATCH 13/14] Commented new modal scrolling functionality

---
 components/modal/modal.ts              | 9 +++++++--
 demo/src/app/pages/modal/modal.page.ts | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/modal/modal.ts b/components/modal/modal.ts
index 6f9faa90e..d2ec40729 100644
--- a/components/modal/modal.ts
+++ b/components/modal/modal.ts
@@ -104,6 +104,7 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
 
     public set mustScroll(mustScroll:boolean) {
         this._mustScroll = mustScroll;
+        // 'Cache' value in _mustAlwaysScroll so that if `true`, _mustScroll isn't ever auto-updated.
         this._mustAlwaysScroll = mustScroll;
         this.updateScroll();
     }
@@ -207,14 +208,18 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
         }
     }
 
+    // Decides whether the modal needs to reposition to allow scrolling.
     private updateScroll() {
+        // Semantic UI modal margin is 3.5rem, which is relative to the global font size, so for compatibility:
         const fontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
         const margin = fontSize * 3.5;
 
-        if (this._modalElement) {
+        // _mustAlwaysScroll works by stopping _mustScroll from being automatically updated, so it stays `true`.
+        if (!this._mustAlwaysScroll && this._modalElement) {
             const element = this._modalElement.nativeElement as Element;
 
-            this._mustScroll = !this._mustAlwaysScroll && window.innerHeight < element.clientHeight + margin * 2;
+            // The modal must scroll if the window height is smaller than the modal height + both margins.
+            this._mustScroll = window.innerHeight < element.clientHeight + margin * 2;
         }
     }
 
diff --git a/demo/src/app/pages/modal/modal.page.ts b/demo/src/app/pages/modal/modal.page.ts
index 5ddc356fa..e5ec13a45 100644
--- a/demo/src/app/pages/modal/modal.page.ts
+++ b/demo/src/app/pages/modal/modal.page.ts
@@ -242,6 +242,7 @@ export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, voi
     constructor(title:string, question:string) {
         super(ConfirmModalComponent, { title, question });
 
+        this.mustScroll = true;
         this.isClosable = false;
         this.transitionDuration = 200;
         this.size = ModalSize.Small;

From 9f876efece12e444759e1b975a3872fec3552012 Mon Sep 17 00:00:00 2001
From: Edward Carroll <ed@edcarroll.co.uk>
Date: Mon, 5 Jun 2017 23:19:27 +0100
Subject: [PATCH 14/14] Removed `mustScroll` from confirm modal demo

---
 demo/src/app/pages/modal/modal.page.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/demo/src/app/pages/modal/modal.page.ts b/demo/src/app/pages/modal/modal.page.ts
index e5ec13a45..5ddc356fa 100644
--- a/demo/src/app/pages/modal/modal.page.ts
+++ b/demo/src/app/pages/modal/modal.page.ts
@@ -242,7 +242,6 @@ export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, voi
     constructor(title:string, question:string) {
         super(ConfirmModalComponent, { title, question });
 
-        this.mustScroll = true;
         this.isClosable = false;
         this.transitionDuration = 200;
         this.size = ModalSize.Small;