Fix for https://github.com/edcarroll/ng2-semantic-ui/issues/185

demo/src/app/components/sidebar/sidebar.component.ts

@@ -1,6 +1,4 @@
 import { Component, HostBinding, Output, EventEmitter, HostListener, isDevMode } from "@angular/core";
-// Polyfill for IE
-import "element-closest";
 
 interface IAugmentedElement extends Element {
     closest(selector:string):IAugmentedElement;

package.json

@@ -51,7 +51,6 @@
   "dependencies": {
     "bowser": "^1.7.2",
     "date-fns": "2.0.0-alpha.1",
-    "element-closest": "^2.0.2",
     "extend": "^3.0.1",
     "is-ua-webview": "^1.0.0",
     "popper.js": "^1.11.1",

src/misc/util/helpers/closest.ts

@@ -0,0 +1,37 @@
+// element-closest | CC0-1.0 | github.com/jonathantneal/closest
+
+/** @this {Foo} */
+if (typeof Element !== "undefined") {
+    if (typeof Element.prototype.matches !== "function") {
+        Element.prototype.matches = Element.prototype.msMatchesSelector ||
+            (Element as any).prototype["mozMatchesSelector"] ||
+            Element.prototype.webkitMatchesSelector ||
+            function matches(selector:any):boolean {
+                const element = this;
+                const elements = (element.document || element.ownerDocument).querySelectorAll(selector);
+                let index = 0;
+
+                while (elements[index] && elements[index] !== element) {
+                    ++index;
+                }
+
+                return Boolean(elements[index]);
+            };
+    }
+
+    if (typeof Element.prototype["closest"] !== "function") {
+        Element.prototype["closest"] = function closest(selector:any):any {
+            let element = this;
+
+            while (element && element.nodeType === 1) {
+                if (element.matches(selector)) {
+                    return element;
+                }
+
+                element = element.parentNode;
+            }
+
+            return undefined;
+        };
+    }
+}

src/modules/checkbox/components/checkbox.ts

@@ -67,7 +67,7 @@ export class SuiCheckbox implements ICustomValueAccessorHost<boolean> {
     }
 
     @HostListener("mousedown", ["$event"])
-    public onMouseDown(e:MouseEvent):void {
+    public onMouseDown(e:any):void {
         e.preventDefault();
     }
 

src/modules/checkbox/components/radio.ts

@@ -77,7 +77,7 @@ export class SuiRadio<T> implements ICustomValueAccessorHost<T> {
     }
 
     @HostListener("mousedown", ["$event"])
-    public onMouseDown(e:MouseEvent):void {
+    public onMouseDown(e:any):void {
         e.preventDefault();
     }
 

src/modules/datepicker/components/datepicker.ts

@@ -45,7 +45,7 @@ export class SuiDatepicker {
     }
 
     @HostListener("mousedown", ["$event"])
-    public onMouseDown(e:MouseEvent):void {
+    public onMouseDown(e:any):void {
         e.preventDefault();
     }
 }

src/modules/datepicker/directives/datepicker.directive.ts

@@ -189,7 +189,7 @@ export class SuiDatepickerDirective
     }
 
     @HostListener("keydown", ["$event"])
-    public onKeyDown(e:KeyboardEvent):void {
+    public onKeyDown(e:any):void {
         if (e.keyCode === KeyCode.Escape) {
             this.close();
         }

src/modules/datepicker/views/calendar-view.ts

@@ -54,7 +54,7 @@ export abstract class CalendarView implements AfterViewInit, OnDestroy {
         this._type = viewType;
         this.ranges = ranges;
 
-        this._documentKeyDownListener = renderer.listen("document", "keydown", (e:KeyboardEvent) => this.onDocumentKeyDown(e));
+        this._documentKeyDownListener = renderer.listen("document", "keydown", (e:any) => this.onDocumentKeyDown(e));
     }
 
     // Template Methods
@@ -111,7 +111,7 @@ export abstract class CalendarView implements AfterViewInit, OnDestroy {
         }
     }
 
-    private onDocumentKeyDown(e:KeyboardEvent):void {
+    private onDocumentKeyDown(e:any):void {
         if (this._highlightedItem && e.keyCode === KeyCode.Enter) {
             this.setDate(this._highlightedItem);
             return;

src/modules/dropdown/directives/dropdown-menu.ts

@@ -6,7 +6,7 @@ import { Transition, SuiTransition, TransitionController, TransitionDirection }
 import { HandledEvent, IAugmentedElement, KeyCode } from "../../../misc/util/index";
 import { DropdownService, DropdownAutoCloseType } from "../services/dropdown.service";
 // Polyfill for IE
-import "element-closest";
+import "../../../misc/util/helpers/closest";
 
 @Directive({
     // We must attach to every '.item' as Angular doesn't support > selectors.
@@ -144,11 +144,11 @@ export class SuiDropdownMenu extends SuiTransition implements AfterContentInit,
         this.menuAutoSelectFirst = false;
         this.menuSelectedItemClass = "selected";
 
-        this._documentKeyDownListener = renderer.listen("document", "keydown", (e:KeyboardEvent) => this.onDocumentKeyDown(e));
+        this._documentKeyDownListener = renderer.listen("document", "keydown", (e:any) => this.onDocumentKeyDown(e));
     }
 
     @HostListener("click", ["$event"])
-    public onClick(e:HandledEvent & MouseEvent):void {
+    public onClick(e:HandledEvent & any):void {
         if (!e.eventHandled) {
             e.eventHandled = true;
 
@@ -162,7 +162,7 @@ export class SuiDropdownMenu extends SuiTransition implements AfterContentInit,
         }
     }
 
-    public onDocumentKeyDown(e:KeyboardEvent):void {
+    public onDocumentKeyDown(e:any):void {
         // Only the root dropdown (i.e. not nested dropdowns) is responsible for keeping track of the currently selected item.
         if (this._service.isOpen && !this._service.isNested) {
             // Stop document events like scrolling while open.

src/modules/dropdown/directives/dropdown.ts

@@ -124,7 +124,7 @@ export class SuiDropdown implements AfterContentInit {
     }
 
     @HostListener("keypress", ["$event"])
-    public onKeypress(e:HandledEvent & KeyboardEvent):void {
+    public onKeypress(e:HandledEvent & any):void {
         // Block the keyboard event from being fired on parent dropdowns.
         if (!e.eventHandled) {
 

src/modules/modal/components/modal.ts

@@ -32,7 +32,7 @@ import { ModalConfig, ModalSize } from "../classes/modal-config";
          #modal>
 
         <!-- Configurable close icon -->
-        <i class="close icon" *ngIf="isClosable" (click)="close()"></i>
+        <i class="close icon" [hidden]="!isClosable" (click)="close()"></i>
         <!-- <ng-content> so that <sui-modal> can be used as a normal component. -->
         <ng-content></ng-content>
         <!-- @ViewChild reference so we can insert elements beside this div. -->
@@ -270,27 +270,29 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
 
     // Decides whether the modal needs to reposition to allow scrolling.
     private updateScroll():void {
-        // 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).getPropertyValue("font-size"));
-        const margin = fontSize * 3.5;
-
-        // _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;
-
-            // The modal must scroll if the window height is smaller than the modal height + both margins.
-            this._mustScroll = window.innerHeight < element.clientHeight + margin * 2;
+        if (window) {
+            // 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).getPropertyValue("font-size"));
+            const margin = fontSize * 3.5;
+
+            // _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;
+
+                // The modal must scroll if the window height is smaller than the modal height + both margins.
+                this._mustScroll = window.innerHeight < element.clientHeight + margin * 2;
+            }
         }
     }
 
-    public onClick(e:MouseEvent):void {
+    public onClick(e:any):void {
         // Makes sense here, as the modal shouldn't be attached to any DOM element.
         e.stopPropagation();
     }
 
     // Document listener is fine here because nobody will enough modals open.
     @HostListener("document:keyup", ["$event"])
-    public onDocumentKeyUp(e:KeyboardEvent):void {
+    public onDocumentKeyup(e:any):void {
         if (e.keyCode === KeyCode.Escape) {
             // Close automatically covers case of `!isClosable`, so check not needed.
             this.close();

src/modules/popup/classes/popup-controller.ts

@@ -40,7 +40,7 @@ export abstract class SuiPopupController implements IPopup, OnDestroy {
         // When the popup is closed (onClose fires on animation complete),
         this.popup.onClose.subscribe(() => this.cleanup());
 
-        this._documentListener = renderer.listen("document", "click", (e:MouseEvent) => this.onDocumentClick(e));
+        this._documentListener = renderer.listen("document", "click", (e:any) => this.onDocumentClick(e));
     }
 
     public configure(config?:IPopupConfig):void {
@@ -53,8 +53,10 @@ export abstract class SuiPopupController implements IPopup, OnDestroy {
         // Cancel the opening timer.
         clearTimeout(this._openingTimeout);
 
-        // Start the popup opening after the specified delay interval.
-        this._openingTimeout = window.setTimeout(() => this.open(), this.popup.config.delay);
+        if (window) {
+            // Start the popup opening after the specified delay interval.
+            this._openingTimeout = window.setTimeout(() => this.open(), this.popup.config.delay);
+        }
     }
 
     public open():void {
@@ -141,7 +143,7 @@ export abstract class SuiPopupController implements IPopup, OnDestroy {
         }
     }
 
-    public onDocumentClick(e:MouseEvent):void {
+    public onDocumentClick(e:any):void {
         // If the popup trigger is outside click,
         if (this._componentRef && this.popup.config.trigger === PopupTrigger.OutsideClick) {
             const target = e.target as Element;

src/modules/popup/components/popup.ts

@@ -176,7 +176,7 @@ export class SuiPopup implements IPopup {
 
     public close():void {
         // Only attempt to close if currently open.
-        if (this.isOpen) {
+        if (this.isOpen && window) {
             // Cancel all other transitions, and initiate the closing transition.
             this.transitionController.stopAll();
             this.transitionController.animate(
@@ -193,7 +193,7 @@ export class SuiPopup implements IPopup {
     }
 
     @HostListener("click", ["$event"])
-    public onClick(event:MouseEvent):void {
+    public onClick(event:any):void {
         // Makes sense here, as the popup shouldn't be attached to any DOM element.
         event.stopPropagation();
     }

src/modules/search/components/search.ts

@@ -202,7 +202,7 @@ export class SuiSearch<T> implements AfterViewInit, OnDestroy {
         this.transition = "scale";
         this.transitionDuration = 200;
 
-        this._documentClickListener = renderer.listen("document", "click", (e:MouseEvent) => this.onDocumentClick(e));
+        this._documentClickListener = renderer.listen("document", "click", (e:any) => this.onDocumentClick(e));
     }
 
     public ngAfterViewInit():void {
@@ -226,7 +226,7 @@ export class SuiSearch<T> implements AfterViewInit, OnDestroy {
         }
     }
 
-    public onClick(e:MouseEvent):void {
+    public onClick(e:any):void {
         this.open();
     }
 
@@ -251,7 +251,7 @@ export class SuiSearch<T> implements AfterViewInit, OnDestroy {
         }
     }
 
-    public onDocumentClick(e:MouseEvent):void {
+    public onDocumentClick(e:any):void {
         if (!this._element.nativeElement.contains(e.target)) {
             this.dropdownService.setOpenState(false);
         }

src/modules/search/services/search.service.ts

@@ -108,12 +108,14 @@ export class SearchService<T, U> {
         this._query = query;
 
         clearTimeout(this._searchDelayTimeout);
-        this._searchDelayTimeout = window.setTimeout(
-            () => {
-                this.updateQuery(query, callback);
-            },
-            this.searchDelay
-        );
+        if (window) {
+            this._searchDelayTimeout = window.setTimeout(
+                () => {
+                    this.updateQuery(query, callback);
+                },
+                this.searchDelay
+            );
+        }
     }
 
     // Updates the current search query.

src/modules/select/classes/select-base.ts

@@ -243,7 +243,7 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit, OnDestroy
         this.transitionDuration = 200;
 
         this.onTouched = new EventEmitter<void>();
-        this._documentKeyDownListener = renderer.listen("document", "keydown", (e:KeyboardEvent) => this.onDocumentKeyDown(e));
+        this._documentKeyDownListener = renderer.listen("document", "keydown", (e:any) => this.onDocumentKeyDown(e));
 
         this._selectClasses = true;
     }
@@ -378,15 +378,15 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit, OnDestroy
     }
 
     @HostListener("keypress", ["$event"])
-    public onKeyPress(e:KeyboardEvent):void {
+    public onKeyPress(e:any):void {
         if (e.keyCode === KeyCode.Enter) {
             // Enables support for focussing and opening with the keyboard alone.
             // Using directly because Renderer2 doesn't have invokeElementMethod method anymore.
             this._element.nativeElement.click();
         }
     }
 
-    public onDocumentKeyDown(e:KeyboardEvent):void {
+    public onDocumentKeyDown(e:any):void {
         if (this._element.nativeElement.contains(e.target) &&
             !this.dropdownService.isOpen &&
             e.keyCode === KeyCode.Down) {
@@ -399,7 +399,7 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit, OnDestroy
         }
     }
 
-    public onQueryInputKeydown(event:KeyboardEvent):void {}
+    public onQueryInputKeydown(event:any):void {}
 
     protected focus():void {
         if (this.isSearchable && this.searchInput) {

src/modules/select/components/multi-select.ts

@@ -229,7 +229,7 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         }
     }
 
-    public onQueryInputKeydown(event:KeyboardEvent):void {
+    public onQueryInputKeydown(event:any):void {
         if (event.keyCode === KeyCode.Backspace && this.query === "" && this.selectedOptions.length > 0) {
             // Deselect the rightmost option when the user presses backspace in the search input.
             this.deselectOption(this.selectedOptions[this.selectedOptions.length - 1]);

src/modules/select/directives/select-search.ts

@@ -15,11 +15,11 @@ export class SuiSelectSearch {
     }
 
     public onQueryUpdated:EventEmitter<string>;
-    public onQueryKeyDown:EventEmitter<KeyboardEvent>;
+    public onQueryKeyDown:EventEmitter<any>;
 
     constructor(private _renderer:Renderer2, private _element:ElementRef) {
         this.onQueryUpdated = new EventEmitter<string>();
-        this.onQueryKeyDown = new EventEmitter<KeyboardEvent>();
+        this.onQueryKeyDown = new EventEmitter<any>();
 
         this._searchClass = true;
         this._autoComplete = "off";
@@ -31,7 +31,7 @@ export class SuiSelectSearch {
     }
 
     @HostListener("keydown", ["$event"])
-    private onKeyDown(e:KeyboardEvent):void {
+    private onKeyDown(e:any):void {
         this.onQueryKeyDown.emit(e);
     }
 

src/modules/sidebar/components/sidebar-sibling.ts

@@ -67,7 +67,7 @@ export class SuiSidebarSibling {
     }
 
     @HostListener("click", ["$event"])
-    public onClick(event:MouseEvent):void {
+    public onClick(event:any):void {
         if (this.service.isVisible && !this.service.wasJustOpened) {
             this.service.setVisibleState(false);
         }

src/modules/sidebar/services/sidebar.service.ts

@@ -93,7 +93,9 @@ export class SidebarService {
 
             setTimeout(() => this.wasJustOpened = false);
             clearTimeout(this._isAnimatingTimeout);
-            this._isAnimatingTimeout = window.setTimeout(() => this.isAnimating = false, 500);
+            if (window) {
+                this._isAnimatingTimeout = window.setTimeout(() => this.isAnimating = false, 500);
+            }
         }
     }