ng2-material-dropdown - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

dist/ng2-dropdown.bundle.js

@@ -302,13 +302,15 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        this.appendToBody = true;
+	        this.listeners = {
+	            arrowHandler: undefined,
+	            handleKeypress: undefined
+	        };
 	    }
 	    Ng2DropdownMenu.prototype.show = function () {
-	        this.renderer.setElementStyle(this.getMenuElement(), 'display', 'block');
 	        this.state.menuState.isVisible = true;
-	        window.addEventListener('keydown', actions_1.arrowKeysHandler, false);
+	        this.listeners.arrowHandler = this.renderer.listen(window, 'keydown', actions_1.arrowKeysHandler);
 	    };
 	    Ng2DropdownMenu.prototype.hide = function () {
 	        this.state.menuState.isVisible = false;
-	        this.renderer.setElementStyle(this.getMenuElement(), 'display', 'none');
 	        this.state.dropdownState.unselect();
-	        window.removeEventListener('keydown', actions_1.arrowKeysHandler, false);
+	        this.listeners.arrowHandler();
 	    };
@@ -380,3 +382,3 @@ Ng2DropdownMenu.prototype.updatePosition = function (position) {
 	        }
-	        this.listener = this.renderer.listen(body, 'keyup', this.handleKeypress.bind(this));
+	        this.listeners.handleKeypress = this.renderer.listen(body, 'keyup', this.handleKeypress.bind(this));
 	    };
@@ -402,4 +404,4 @@ Ng2DropdownMenu.prototype.ngDoCheck = function () {
 	        elem.parentNode.removeChild(elem);
-	        if (this.listener) {
-	            this.listener();
+	        if (this.listeners.handleKeypress) {
+	            this.listeners.handleKeypress();
 	        }
@@ -436,6 +438,6 @@ };
 	            core_1.trigger('fade', [
-	                core_1.state('visible', core_1.style({ opacity: '1', height: '*', width: '*', display: 'block' })),
-	                core_1.state('hidden', core_1.style({ opacity: '0', height: '0', width: '0', display: 'none' })),
+	                core_1.state('visible', core_1.style({ display: 'block', overflow: '*' })),
+	                core_1.state('hidden', core_1.style({ display: 'none', overflow: 'hidden', width: '0' })),
 	                core_1.transition('hidden => visible', [
-	                    core_1.animate(200, core_1.keyframes([
+	                    core_1.animate(150, core_1.keyframes([
 	                        core_1.style({ opacity: 0, offset: 0, height: '0', width: '0' }),
@@ -446,6 +448,20 @@ core_1.style({ opacity: 1, offset: 1, height: '*', width: '*' }),
 	                core_1.transition('visible => hidden', [
+	                    core_1.animate(250, core_1.keyframes([
+	                        core_1.style({ opacity: 1, offset: 0, height: '*', width: '*' }),
+	                        core_1.style({ opacity: 0, offset: 1, height: '0', width: '0' }),
+	                    ]))
+	                ])
+	            ]),
+	            core_1.trigger('opacity', [
+	                core_1.transition('hidden => visible', [
+	                    core_1.animate(450, core_1.keyframes([
+	                        core_1.style({ opacity: 0, offset: 0 }),
+	                        core_1.style({ opacity: 1, offset: 1 }),
+	                    ]))
+	                ]),
+	                core_1.transition('visible => hidden', [
 	                    core_1.animate(200, core_1.keyframes([
 	                        core_1.style({ opacity: 1, offset: 0 }),
-	                        core_1.style({ opacity: 0.5, offset: 0.5 }),
-	                        core_1.style({ opacity: 0, offset: 1, height: '0', width: '0' }),
+	                        core_1.style({ opacity: 0.5, offset: 0.3 }),
+	                        core_1.style({ opacity: 0, offset: 1 }),
 	                    ]))
@@ -471,3 +487,4 @@ ])
 	    PREV: 38,
-	    NEXT: 40
+	    NEXT: 40,
+	    ENTER: 13
 	};
@@ -492,2 +509,5 @@ var onSwitchNext = function (index, items, state) {
 	};
+	var onItemClicked = function (index, items, state) {
+	    return state.selectedItem ? state.selectedItem.click() : undefined;
+	};
 	exports.ACTIONS = (_a = {},
@@ -497,2 +517,3 @@ _a[KEYS.BACKSPACE] = onBackspace,
 	    _a[KEYS.NEXT] = onSwitchNext,
+	    _a[KEYS.ENTER] = onItemClicked,
 	    _a);
@@ -626,6 +647,6 @@ function arrowKeysHandler(event) {
 	        this._selectedItem = item;
-	        item.focus();
 	        if (!dispatchEvent) {
 	            return;
 	        }
+	        item.focus();
 	        this.onItemSelected.emit(item);
@@ -645,3 +666,3 @@ };
 
-	module.exports = ".ng2-menu-item {\n  font-family: \"Roboto\", \"Helvetica Neue\", Helvetica, Arial;\n  background: #fff;\n  color: rgba(0, 0, 0, 0.87);\n  cursor: pointer;\n  font-size: 0.9em;\n  text-transform: none;\n  font-weight: 400;\n  -webkit-transition: background 0.2s;\n  transition: background 0.2s;\n  letter-spacing: 0.03em;\n  height: 48px;\n  line-height: 48px;\n  padding: 0.3em 1.25rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden; }\n\n.ng2-menu-item--selected {\n  background: rgba(158, 158, 158, 0.2);\n  outline: 0; }\n\n.ng2-menu-item:focus {\n  outline: 0; }\n\n.ng2-menu-item:active {\n  background: rgba(158, 158, 158, 0.4); }\n\n:host(ng2-menu-item) /deep/ [ng2-menu-item-icon] {\n  vertical-align: middle;\n  font-size: 28px;\n  width: 1.5em;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.44); }\n"
+	module.exports = ".ng2-menu-item {\n  font-family: \"Roboto\", \"Helvetica Neue\", Helvetica, Arial;\n  background: #fff;\n  color: rgba(0, 0, 0, 0.87);\n  cursor: pointer;\n  font-size: 0.9em;\n  text-transform: none;\n  font-weight: 400;\n  letter-spacing: 0.03em;\n  height: 48px;\n  line-height: 48px;\n  padding: 0.3em 1.25rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  -webkit-transition: background 0.25s;\n  transition: background 0.25s; }\n\n.ng2-menu-item--selected {\n  background: rgba(158, 158, 158, 0.2);\n  outline: 0; }\n\n.ng2-menu-item:focus {\n  outline: 0; }\n\n.ng2-menu-item:active {\n  background: rgba(158, 158, 158, 0.4); }\n\n:host(ng2-menu-item) /deep/ [ng2-menu-item-icon] {\n  vertical-align: middle;\n  font-size: 28px;\n  width: 1.5em;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.44); }\n"
 
@@ -658,3 +679,3 @@ /***/ },
 
-	module.exports = ".ng2-dropdown-menu {\n  z-index: 100;\n  overflow-y: auto;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n  position: absolute;\n  padding: 0.5em 0;\n  background: #fff;\n  border-radius: 2px;\n  max-height: 400px;\n  min-width: 180px;\n  display: block; }\n\n.ng2-dropdown-menu.ng2-dropdown-menu--inside-element {\n  position: fixed; }\n\n.ng2-dropdown-menu--width--2 {\n  width: 180px; }\n\n.ng2-dropdown-menu--width--4 {\n  width: 250px; }\n\n.ng2-dropdown-menu--width--6 {\n  width: 320px; }\n\n.ng2-dropdown-menu * {\n  opacity: 0;\n  -webkit-transition: opacity 0.3s;\n  transition: opacity 0.3s; }\n\n.ng2-dropdown-menu--open * {\n  opacity: 1; }\n\n.ng2-dropdown-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  overflow: hidden; }\n\n:host /deep/ .ng2-menu-divider {\n  height: 1px;\n  min-height: 1px;\n  max-height: 1px;\n  width: 100%;\n  display: block;\n  background: #f9f9f9; }\n"
+	module.exports = ".ng2-dropdown-menu {\n  z-index: 100;\n  overflow-y: auto;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n  position: absolute;\n  padding: 0.5em 0;\n  background: #fff;\n  border-radius: 1px;\n  max-height: 400px;\n  width: 260px;\n  display: block; }\n\n.ng2-dropdown-menu.ng2-dropdown-menu--inside-element {\n  position: fixed; }\n\n.ng2-dropdown-menu.ng2-dropdown-menu--width--2 {\n  width: 200px; }\n\n.ng2-dropdown-menu.ng2-dropdown-menu--width--4 {\n  width: 260px; }\n\n.ng2-dropdown-menu.ng2-dropdown-menu--width--6 {\n  width: 320px; }\n\n.ng2-dropdown-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  overflow: hidden; }\n\n:host /deep/ .ng2-menu-divider {\n  height: 1px;\n  min-height: 1px;\n  max-height: 1px;\n  width: 100%;\n  display: block;\n  background: #f9f9f9; }\n"
 
@@ -665,3 +686,3 @@ /***/ },
 
-	module.exports = "<!-- MENU -->\n<div class='ng2-dropdown-menu ng2-dropdown-menu---width--{{ width }}'\n     [class.ng2-dropdown-menu--inside-element]=\"!appendToBody\"\n     [class.ng2-dropdown-menu--open]=\"state.menuState.isVisible\"\n     [@fade]=\"state.menuState.toString()\">\n        <ng-content></ng-content>\n</div>\n\n<!-- BACKDROP -->\n<div class=\"ng2-dropdown-backdrop\" *ngIf=\"state.menuState.isVisible\" (click)=\"hide()\"></div>\n";
+	module.exports = "<!-- MENU -->\n<div class='ng2-dropdown-menu ng2-dropdown-menu---width--{{ width }}'\n     [class.ng2-dropdown-menu--inside-element]=\"!appendToBody\"\n     [class.ng2-dropdown-menu--open]=\"state.menuState.isVisible\"\n     [@fade]=\"state.menuState.toString()\">\n        <div class=\"ng2-dropdown-menu__options-container\"\n             [@opacity]=\"state.menuState.toString()\">\n            <ng-content></ng-content>\n        </div>\n</div>\n\n<!-- BACKDROP -->\n<div class=\"ng2-dropdown-backdrop\" *ngIf=\"state.menuState.isVisible\" (click)=\"hide()\"></div>\n";
 
@@ -668,0 +689,0 @@ /***/ },

dist/src/modules/components/menu/actions.js

 var KEYS = {
     BACKSPACE: 9,
     PREV: 38,
-    NEXT: 40
+    NEXT: 40,
+    ENTER: 13
 };
@@ -24,2 +25,5 @@ var onSwitchNext = function (index, items, state) {
 };
+var onItemClicked = function (index, items, state) {
+    return state.selectedItem ? state.selectedItem.click() : undefined;
+};
 export var ACTIONS = (_a = {},
@@ -29,2 +33,3 @@ _a[KEYS.BACKSPACE] = onBackspace,
     _a[KEYS.NEXT] = onSwitchNext,
+    _a[KEYS.ENTER] = onItemClicked,
     _a);
@@ -31,0 +36,0 @@ export function arrowKeysHandler(event) {

dist/src/modules/components/menu/actions.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ACTIONS":{"__symbolic":"error","message":"Expression form not supported","line":30,"character":4},"arrowKeysHandler":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"ACTIONS":{"__symbolic":"error","message":"Expression form not supported","line":30,"character":4},"arrowKeysHandler":{"__symbolic":"function"}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ACTIONS":{"__symbolic":"error","message":"Expression form not supported","line":59,"character":4},"arrowKeysHandler":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"ACTIONS":{"__symbolic":"error","message":"Expression form not supported","line":59,"character":4},"arrowKeysHandler":{"__symbolic":"function"}}}]

dist/src/modules/components/menu/ng2-dropdown-menu.d.ts

@@ -14,3 +14,3 @@ import { ElementRef, Renderer, QueryList } from '@angular/core';
     private position;
-    private listener;
+    private listeners;
     constructor(state: DropdownStateService, element: ElementRef, renderer: Renderer);
@@ -17,0 +17,0 @@ show(): void;

dist/src/modules/components/menu/ng2-dropdown-menu.js

@@ -22,13 +22,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.appendToBody = true;
+        this.listeners = {
+            arrowHandler: undefined,
+            handleKeypress: undefined
+        };
     }
     Ng2DropdownMenu.prototype.show = function () {
-        this.renderer.setElementStyle(this.getMenuElement(), 'display', 'block');
         this.state.menuState.isVisible = true;
-        window.addEventListener('keydown', arrowKeysHandler, false);
+        this.listeners.arrowHandler = this.renderer.listen(window, 'keydown', arrowKeysHandler);
     };
     Ng2DropdownMenu.prototype.hide = function () {
         this.state.menuState.isVisible = false;
-        this.renderer.setElementStyle(this.getMenuElement(), 'display', 'none');
         this.state.dropdownState.unselect();
-        window.removeEventListener('keydown', arrowKeysHandler, false);
+        this.listeners.arrowHandler();
     };
@@ -100,3 +102,3 @@ Ng2DropdownMenu.prototype.updatePosition = function (position) {
         }
-        this.listener = this.renderer.listen(body, 'keyup', this.handleKeypress.bind(this));
+        this.listeners.handleKeypress = this.renderer.listen(body, 'keyup', this.handleKeypress.bind(this));
     };
@@ -122,4 +124,4 @@ Ng2DropdownMenu.prototype.ngDoCheck = function () {
         elem.parentNode.removeChild(elem);
-        if (this.listener) {
-            this.listener();
+        if (this.listeners.handleKeypress) {
+            this.listeners.handleKeypress();
         }
@@ -156,6 +158,6 @@ };
             trigger('fade', [
-                state('visible', style({ opacity: '1', height: '*', width: '*', display: 'block' })),
-                state('hidden', style({ opacity: '0', height: '0', width: '0', display: 'none' })),
+                state('visible', style({ display: 'block', overflow: '*' })),
+                state('hidden', style({ display: 'none', overflow: 'hidden', width: '0' })),
                 transition('hidden => visible', [
-                    animate(200, keyframes([
+                    animate(150, keyframes([
                         style({ opacity: 0, offset: 0, height: '0', width: '0' }),
@@ -166,6 +168,20 @@ style({ opacity: 1, offset: 1, height: '*', width: '*' }),
                 transition('visible => hidden', [
+                    animate(250, keyframes([
+                        style({ opacity: 1, offset: 0, height: '*', width: '*' }),
+                        style({ opacity: 0, offset: 1, height: '0', width: '0' }),
+                    ]))
+                ])
+            ]),
+            trigger('opacity', [
+                transition('hidden => visible', [
+                    animate(450, keyframes([
+                        style({ opacity: 0, offset: 0 }),
+                        style({ opacity: 1, offset: 1 }),
+                    ]))
+                ]),
+                transition('visible => hidden', [
                     animate(200, keyframes([
                         style({ opacity: 1, offset: 0 }),
-                        style({ opacity: 0.5, offset: 0.5 }),
-                        style({ opacity: 0, offset: 1, height: '0', width: '0' }),
+                        style({ opacity: 0.5, offset: 0.3 }),
+                        style({ opacity: 0, offset: 1 }),
                     ]))
@@ -172,0 +188,0 @@ ])

dist/src/modules/components/menu/ng2-dropdown-menu.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"Ng2DropdownMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-dropdown-menu","styleUrls":["./style.scss"],"templateUrl":"./template.html","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["fade",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"1","height":"*","width":"*","display":"block"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0","height":"0","width":"0","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hidden => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":0,"height":"0","width":"0"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":1,"height":"*","width":"*"}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["visible => hidden",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0.5,"offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":1,"height":"0","width":"0"}]}]]}]}]]}]]}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusFirstElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"appendToBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../menu-item/ng2-menu-item","name":"Ng2MenuItem"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services/dropdown-state.service","name":"DropdownStateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"handleKeypress":[{"__symbolic":"method"}],"getMenuElement":[{"__symbolic":"method"}],"calcPositionOffset":[{"__symbolic":"method"}],"applyOffset":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"Ng2DropdownMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-dropdown-menu","styleUrls":["./style.scss"],"templateUrl":"./template.html","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["fade",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"1","height":"*","width":"*","display":"block"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0","height":"0","width":"0","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hidden => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":0,"height":"0","width":"0"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":1,"height":"*","width":"*"}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["visible => hidden",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0.5,"offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":1,"height":"0","width":"0"}]}]]}]}]]}]]}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusFirstElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"appendToBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../menu-item/ng2-menu-item","name":"Ng2MenuItem"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services/dropdown-state.service","name":"DropdownStateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"handleKeypress":[{"__symbolic":"method"}],"getMenuElement":[{"__symbolic":"method"}],"calcPositionOffset":[{"__symbolic":"method"}],"applyOffset":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"Ng2DropdownMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-dropdown-menu","styleUrls":["./style.scss"],"templateUrl":"./template.html","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["fade",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","overflow":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"none","overflow":"hidden","width":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hidden => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[150,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":0,"height":"0","width":"0"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":1,"height":"*","width":"*"}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["visible => hidden",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[250,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":0,"height":"*","width":"*"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":1,"height":"0","width":"0"}]}]]}]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["opacity",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hidden => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[450,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["visible => hidden",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0.5,"offset":0.3}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":1}]}]]}]}]]}]]}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusFirstElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"appendToBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../menu-item/ng2-menu-item","name":"Ng2MenuItem"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services/dropdown-state.service","name":"DropdownStateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"handleKeypress":[{"__symbolic":"method"}],"getMenuElement":[{"__symbolic":"method"}],"calcPositionOffset":[{"__symbolic":"method"}],"applyOffset":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"Ng2DropdownMenu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-dropdown-menu","styleUrls":["./style.scss"],"templateUrl":"./template.html","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["fade",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["visible",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","overflow":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"none","overflow":"hidden","width":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hidden => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[150,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":0,"height":"0","width":"0"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":1,"height":"*","width":"*"}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["visible => hidden",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[250,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":0,"height":"*","width":"*"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":1,"height":"0","width":"0"}]}]]}]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["opacity",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hidden => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[450,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["visible => hidden",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1,"offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0.5,"offset":0.3}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0,"offset":1}]}]]}]}]]}]]}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusFirstElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"appendToBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../menu-item/ng2-menu-item","name":"Ng2MenuItem"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services/dropdown-state.service","name":"DropdownStateService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"handleKeypress":[{"__symbolic":"method"}],"getMenuElement":[{"__symbolic":"method"}],"calcPositionOffset":[{"__symbolic":"method"}],"applyOffset":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

dist/src/modules/services/ng2-dropdown-state.js

@@ -17,6 +17,6 @@ import { EventEmitter } from '@angular/core';
         this._selectedItem = item;
-        item.focus();
         if (!dispatchEvent) {
             return;
         }
+        item.focus();
         this.onItemSelected.emit(item);
@@ -23,0 +23,0 @@ };

package.json

 {
   "name": "ng2-material-dropdown",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Angular material-like dropdown component",
@@ -34,3 +34,3 @@ "scripts": {
     "@types/node": "^6.0.39",
-    "angular2-template-loader": "^0.6.0",
+    "angular2-template-loader": "0.6.0",
     "autoprefixer": "^6.3.7",
@@ -37,0 +37,0 @@ "awesome-typescript-loader": "3.0.0-beta.10",

tsconfig.aot.json

@@ -20,4 +20,3 @@ {
   "awesomeTypescriptLoaderOptions": {
-    "forkChecker": true,
-    "useWebpackText": true
+    "forkChecker": true
   },
@@ -24,0 +23,0 @@ "angularCompilerOptions": {

tsconfig.json

@@ -22,4 +22,3 @@ {
   "awesomeTypescriptLoaderOptions": {
-    "forkChecker": true,
-    "useWebpackText": true
+    "forkChecker": true
   },
@@ -26,0 +25,0 @@ "angularCompilerOptions": {

No alert changes

Improved metrics

Total package byte prevSize

177035

4.35%

Lines of code

1530

2.68%

No dependency changes