ng2-material-dropdown - npm Package Compare versions

Comparing version 0.9.3 to 0.9.4-beta

bundles/ng2-material-dropdown.umd.js

@@ -548,2 +548,3 @@ (function (global, factory) {
             var /** @type {?} */ newSelectedItem;
+            var /** @type {?} */ items = _this.menu.items.toArray();
             if (item !== _this.state.dropdownState.selectedItem) {
@@ -553,3 +554,3 @@ return;
             if (_this.menu.focusFirstElement) {
-                newSelectedItem = _this.menu.items.first;
+                newSelectedItem = item === items[0] && items.length > 1 ? items[1] : items[0];
             }
@@ -556,0 +557,0 @@ _this.state.dropdownState.select(newSelectedItem);

bundles/ng2-material-dropdown.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/animations","@angular/common"],t):t(e["ng2-material-dropdown"]={},e.ng.core,e.ng.animations,e.ng.common)}(this,function(e,t,n,o){"use strict";var i=function(){function e(e){this.element=e,this.onMenuToggled=new t.EventEmitter,this.showCaret=!0}return e.prototype.toggleMenu=function(){this.onMenuToggled.emit(!0)},e.prototype.getPosition=function(){return this.element.nativeElement.getBoundingClientRect()},e}();i.decorators=[{type:t.Component,args:[{selector:"ng2-dropdown-button",styles:['\n      .ng2-dropdown-button {\n        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;\n        background: #fff;\n        padding: 0.45rem 0.25rem;\n        font-size: 14px;\n        letter-spacing: 0.08rem;\n        color: #444;\n        outline: 0;\n        cursor: pointer;\n        font-weight: 400;\n        border: none;\n        border-bottom: 1px solid #efefef;\n        text-align: left;\n        min-width: 100px;\n        width: 100%;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: row;\n                flex-direction: row;\n        max-width: 150px; }\n\n      .ng2-dropdown-button:hover {\n        color: #222; }\n\n      .ng2-dropdown-button:active,\n      .ng2-dropdown-button:focus {\n        color: #222;\n        border-bottom: 2px solid #2196F3; }\n\n      .ng2-dropdown-button__label {\n        -webkit-box-flex: 1;\n            -ms-flex: 1 1 95%;\n                flex: 1 1 95%; }\n\n      .ng2-dropdown-button__caret {\n        width: 12px;\n        height: 12px;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-flex: 1;\n            -ms-flex: 1 1 6%;\n                flex: 1 1 6%; }\n\n      :host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button {\n        border: none;\n        min-width: 40px;\n        width: 40px;\n        border-radius: 100%;\n        -webkit-transition: all 0.2s;\n        transition: all 0.2s;\n        text-align: center;\n        height: 40px;\n        padding: 0.5em; }\n\n      :host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button:active {\n        background: rgba(0, 0, 0, 0.2); }\n    '],template:'\n      <button class=\'ng2-dropdown-button\' type="button" (click)="toggleMenu()" tabindex="0s">\n          <span class="ng2-dropdown-button__label">\n              <ng-content></ng-content>\n          </span>\n\n          <span class="ng2-dropdown-button__caret" *ngIf="showCaret">\n              <svg enable-background="new 0 0 32 32" height="16px" id="Слой_1" version="1.1" viewBox="0 0 32 32" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M24.285,11.284L16,19.571l-8.285-8.288c-0.395-0.395-1.034-0.395-1.429,0  c-0.394,0.395-0.394,1.035,0,1.43l8.999,9.002l0,0l0,0c0.394,0.395,1.034,0.395,1.428,0l8.999-9.002  c0.394-0.395,0.394-1.036,0-1.431C25.319,10.889,24.679,10.889,24.285,11.284z" fill="#121313" id="Expand_More"/><g/><g/><g/><g/><g/><g/></svg>\n          </span>\n      </button>\n    '}]}],i.ctorParameters=function(){return[{type:t.ElementRef}]},i.propDecorators={onMenuToggled:[{type:t.Output}],showCaret:[{type:t.Input}]};var s={BACKSPACE:9,PREV:38,NEXT:40,ENTER:13,ESCAPE:27},r=(h={},h[s.BACKSPACE]=function(e,t,n){e<t.length-1?n.select(t[e+1],!0):n.select(t[0],!0)},h[s.PREV]=function(e,t,n){e>0&&n.select(t[e-1],!0)},h[s.NEXT]=function(e,t,n){e<t.length-1&&n.select(t[e+1],!0)},h[s.ENTER]=function(e,t,n){return n.selectedItem?n.selectedItem.click():undefined},h[s.ESCAPE]=function(){this.hide()},h),d=function(){function e(){this.onItemSelected=new t.EventEmitter,this.onItemClicked=new t.EventEmitter,this.onItemDestroyed=new t.EventEmitter}return Object.defineProperty(e.prototype,"selectedItem",{get:function(){return this._selectedItem},enumerable:!0,configurable:!0}),e.prototype.select=function(e,t){void 0===t&&(t=!0),this._selectedItem=e,t&&(e.focus(),this.onItemSelected.emit(e))},e.prototype.unselect=function(){this._selectedItem=undefined},e}(),p=function(){return function(){this.menuState={isVisible:!1,toString:function(){return!0===this.isVisible?"visible":"hidden"}},this.dropdownState=new d}}();p.decorators=[{type:t.Injectable}],p.ctorParameters=function(){return[]};var a=function(){function e(e,t,n){this.state=e,this.element=t,this.renderer=n,this.preventClose=!1}return e.prototype.ngOnDestroy=function(){this.state.dropdownState.onItemDestroyed.emit(this)},Object.defineProperty(e.prototype,"isSelected",{get:function(){return this===this.state.dropdownState.selectedItem},enumerable:!0,configurable:!0}),e.prototype.select=function(e){this.state.dropdownState.select(this,!0),e&&(e.stopPropagation(),e.preventDefault())},e.prototype.click=function(){this.state.dropdownState.onItemClicked.emit(this)},e.prototype.focus=function(){this.renderer.invokeElementMethod(this.element.nativeElement.children[0],"focus")},e}();a.decorators=[{type:t.Component,args:[{selector:"ng2-menu-item",styles:['\n      .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    '],template:'\n      <div class=\'ng2-menu-item\'\n           role="button"\n           tabindex="0"\n           [class.ng2-menu-item--selected]="isSelected"\n           (keydown.enter)="click()"\n           (click)="click()"\n           (mouseover)="select()">\n              <ng-content></ng-content>\n      </div>\n    '}]}],a.ctorParameters=function(){return[{type:p},{type:t.ElementRef},{type:t.Renderer}]},a.propDecorators={preventClose:[{type:t.Input}],value:[{type:t.Input}]};var l=function(){function e(e,t,n){this.state=e,this.element=t,this.renderer=n,this.width=4,this.focusFirstElement=!0,this.appendToBody=!0,this.zIndex=1e3,this.listeners={arrowHandler:undefined,handleKeypress:undefined}}return e.prototype.show=function(e,t){void 0===t&&(t=!0);var n="undefined"!=typeof document?document:undefined,o="undefined"!=typeof window?window:undefined;this.state.menuState.isVisible=!0,e&&this.updatePosition(e,t),this.listeners.handleKeypress=this.renderer.listen(n.body,"keydown",this.handleKeypress.bind(this)),this.listeners.arrowHandler=this.renderer.listen(o,"keydown",function(e){[38,40].indexOf(e.keyCode)>-1&&e.preventDefault()})},e.prototype.hide=function(){this.state.menuState.isVisible=!1,this.state.dropdownState.unselect(),this.listeners.arrowHandler?this.listeners.arrowHandler():undefined,this.listeners.handleKeypress?this.listeners.handleKeypress():undefined},e.prototype.updatePosition=function(e,t){this.position=e,this.updateOnChange(t)},e.prototype.handleKeypress=function(e){var t=e.keyCode,n=this.items.toArray(),o=n.indexOf(this.state.dropdownState.selectedItem);r.hasOwnProperty(t)&&r[t].call(this,o,n,this.state.dropdownState)},e.prototype.getMenuElement=function(){return this.element.nativeElement.children[0]},e.prototype.calcPositionOffset=function(e){var t="undefined"!=typeof window?window:undefined,n="undefined"!=typeof document?document:undefined;if(t&&n&&e){var o=this.getMenuElement(),i=t.pageXOffset!==undefined,s="CSS1Compat"===(n.compatMode||""),r=i?t.pageXOffset:s?n.documentElement.scrollLeft:n.body.scrollLeft,d=i?t.pageYOffset:s?n.documentElement.scrollTop:n.body.scrollTop,p=this.applyOffset(e.top+(this.appendToBody?d-15:0)+"px",e.left+r-5+"px"),a=p.top,l=p.left,c=o.clientWidth,u=o.clientHeight,h=parseInt(a)+u+(this.appendToBody?0:d-15),m=parseInt(l)+c,f=t.innerHeight+t.scrollY,g=t.innerWidth+t.scrollX;if(h>=f&&(a=parseInt(a.replace("px",""))-u+"px"),m>=g){var y=m-g+30;l=parseInt(l.replace("px",""))-y+"px"}return{top:a,left:l}}},e.prototype.applyOffset=function(e,t){if(!this.offset)return{top:e,left:t};var n=this.offset.split(" ");return n[1]||(n[1]="0"),e=parseInt(e.replace("px",""))+parseInt(n[0])+"px",t=parseInt(t.replace("px",""))+parseInt(n[1])+"px",{top:e,left:t}},e.prototype.ngOnInit=function(){var e="undefined"!=typeof document?document:undefined;this.appendToBody&&e.body.appendChild(this.element.nativeElement)},e.prototype.updateOnChange=function(e){void 0===e&&(e=!0);var t=this.getMenuElement(),n=this.calcPositionOffset(this.position);n&&(this.renderer.setElementStyle(t,"top",n.top.toString()),this.renderer.setElementStyle(t,"left",n.left.toString())),this.focusFirstElement&&this.items.first&&!this.state.dropdownState.selectedItem&&this.state.dropdownState.select(this.items.first,!1)},e.prototype.ngOnDestroy=function(){var e=this.element.nativeElement;e.parentNode.removeChild(e),this.listeners.handleKeypress&&this.listeners.handleKeypress()},e}();l.decorators=[{type:t.Component,args:[{selector:"ng2-dropdown-menu",styles:["\n      :host {\n        display: block; }\n\n      .ng2-dropdown-menu {\n        overflow-y: auto;\n        -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\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        min-height: 0;\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    "],template:'\n      \x3c!-- MENU --\x3e\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           [style.z-index]="zIndex"\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      \x3c!-- BACKDROP --\x3e\n      <div class="ng2-dropdown-backdrop" *ngIf="state.menuState.isVisible" (click)="hide()"></div>\n    ',animations:[n.trigger("fade",[n.state("visible",n.style({display:"block",height:"*",width:"*"})),n.state("hidden",n.style({display:"none",overflow:"hidden",height:0,width:0})),n.transition("hidden => visible",[n.animate("250ms ease-in",n.keyframes([n.style({opacity:0,offset:0}),n.style({opacity:1,offset:1,height:"*",width:"*"})]))]),n.transition("visible => hidden",[n.animate("350ms ease-out",n.keyframes([n.style({opacity:1,offset:0}),n.style({opacity:0,offset:1,width:"0",height:"0"})]))])]),n.trigger("opacity",[n.transition("hidden => visible",[n.animate("450ms ease-in",n.keyframes([n.style({opacity:0,offset:0}),n.style({opacity:1,offset:1})]))]),n.transition("visible => hidden",[n.animate("250ms ease-out",n.keyframes([n.style({opacity:1,offset:0}),n.style({opacity:.5,offset:.3}),n.style({opacity:0,offset:1})]))])])]}]}],l.ctorParameters=function(){return[{type:p},{type:t.ElementRef},{type:t.Renderer}]},l.propDecorators={width:[{type:t.Input}],focusFirstElement:[{type:t.Input}],offset:[{type:t.Input}],appendToBody:[{type:t.Input}],zIndex:[{type:t.Input}],items:[{type:t.ContentChildren,args:[a]}]};var c=function(){function e(e){this.state=e,this.dynamicUpdate=!0,this.onItemClicked=new t.EventEmitter,this.onItemSelected=new t.EventEmitter,this.onShow=new t.EventEmitter,this.onHide=new t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;this.state.dropdownState.onItemClicked.subscribe(function(t){e.onItemClicked.emit(t),t.preventClose||e.hide.call(e)}),this.button&&this.button.onMenuToggled.subscribe(function(){e.toggleMenu()}),this.state.dropdownState.onItemSelected.subscribe(function(t){e.onItemSelected.emit(t)}),this.state.dropdownState.onItemDestroyed.subscribe(function(t){var n;t===e.state.dropdownState.selectedItem&&(e.menu.focusFirstElement&&(n=e.menu.items.first),e.state.dropdownState.select(n))})},e.prototype.toggleMenu=function(e){void 0===e&&(e=this.button.getPosition()),this.state.menuState.isVisible?this.hide():this.show(e)},e.prototype.hide=function(){this.menu.hide(),this.onHide.emit(this)},e.prototype.show=function(e){void 0===e&&(e=this.button.getPosition()),this.menu.show(e,this.dynamicUpdate),this.onShow.emit(this)},e.prototype.scrollListener=function(){this.button&&this.dynamicUpdate&&this.menu.updatePosition(this.button.getPosition(),!0)},e}();c.decorators=[{type:t.Component,args:[{selector:"ng2-dropdown",template:'\n      <div class="ng2-dropdown-container">\n          <ng-content select="ng2-dropdown-button"></ng-content>\n          <ng-content select="ng2-dropdown-menu"></ng-content>\n      </div>\n    ',providers:[p]}]}],c.ctorParameters=function(){return[{type:p}]},c.propDecorators={button:[{type:t.ContentChild,args:[i]}],menu:[{type:t.ContentChild,args:[l]}],dynamicUpdate:[{type:t.Input}],onItemClicked:[{type:t.Output}],onItemSelected:[{type:t.Output}],onShow:[{type:t.Output}],onHide:[{type:t.Output}],scrollListener:[{type:t.HostListener,args:["window:scroll"]}]};var u=function(){return function(){}}();u.decorators=[{type:t.NgModule,args:[{exports:[a,i,l,c],declarations:[c,a,i,l],imports:[o.CommonModule]}]}],u.ctorParameters=function(){return[]};var h;e.Ng2Dropdown=c,e.Ng2DropdownMenu=l,e.Ng2MenuItem=a,e.Ng2DropdownButton=i,e.Ng2DropdownModule=u,e.DropdownStateService=p,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/animations","@angular/common"],t):t(e["ng2-material-dropdown"]={},e.ng.core,e.ng.animations,e.ng.common)}(this,function(e,t,n,o){"use strict";var i=function(){function e(e){this.element=e,this.onMenuToggled=new t.EventEmitter,this.showCaret=!0}return e.prototype.toggleMenu=function(){this.onMenuToggled.emit(!0)},e.prototype.getPosition=function(){return this.element.nativeElement.getBoundingClientRect()},e}();i.decorators=[{type:t.Component,args:[{selector:"ng2-dropdown-button",styles:['\n      .ng2-dropdown-button {\n        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;\n        background: #fff;\n        padding: 0.45rem 0.25rem;\n        font-size: 14px;\n        letter-spacing: 0.08rem;\n        color: #444;\n        outline: 0;\n        cursor: pointer;\n        font-weight: 400;\n        border: none;\n        border-bottom: 1px solid #efefef;\n        text-align: left;\n        min-width: 100px;\n        width: 100%;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: row;\n                flex-direction: row;\n        max-width: 150px; }\n\n      .ng2-dropdown-button:hover {\n        color: #222; }\n\n      .ng2-dropdown-button:active,\n      .ng2-dropdown-button:focus {\n        color: #222;\n        border-bottom: 2px solid #2196F3; }\n\n      .ng2-dropdown-button__label {\n        -webkit-box-flex: 1;\n            -ms-flex: 1 1 95%;\n                flex: 1 1 95%; }\n\n      .ng2-dropdown-button__caret {\n        width: 12px;\n        height: 12px;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-flex: 1;\n            -ms-flex: 1 1 6%;\n                flex: 1 1 6%; }\n\n      :host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button {\n        border: none;\n        min-width: 40px;\n        width: 40px;\n        border-radius: 100%;\n        -webkit-transition: all 0.2s;\n        transition: all 0.2s;\n        text-align: center;\n        height: 40px;\n        padding: 0.5em; }\n\n      :host-context(.ng2-dropdown-button--icon) .ng2-dropdown-button:active {\n        background: rgba(0, 0, 0, 0.2); }\n    '],template:'\n      <button class=\'ng2-dropdown-button\' type="button" (click)="toggleMenu()" tabindex="0s">\n          <span class="ng2-dropdown-button__label">\n              <ng-content></ng-content>\n          </span>\n\n          <span class="ng2-dropdown-button__caret" *ngIf="showCaret">\n              <svg enable-background="new 0 0 32 32" height="16px" id="Слой_1" version="1.1" viewBox="0 0 32 32" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M24.285,11.284L16,19.571l-8.285-8.288c-0.395-0.395-1.034-0.395-1.429,0  c-0.394,0.395-0.394,1.035,0,1.43l8.999,9.002l0,0l0,0c0.394,0.395,1.034,0.395,1.428,0l8.999-9.002  c0.394-0.395,0.394-1.036,0-1.431C25.319,10.889,24.679,10.889,24.285,11.284z" fill="#121313" id="Expand_More"/><g/><g/><g/><g/><g/><g/></svg>\n          </span>\n      </button>\n    '}]}],i.ctorParameters=function(){return[{type:t.ElementRef}]},i.propDecorators={onMenuToggled:[{type:t.Output}],showCaret:[{type:t.Input}]};var s={BACKSPACE:9,PREV:38,NEXT:40,ENTER:13,ESCAPE:27},r=(h={},h[s.BACKSPACE]=function(e,t,n){e<t.length-1?n.select(t[e+1],!0):n.select(t[0],!0)},h[s.PREV]=function(e,t,n){e>0&&n.select(t[e-1],!0)},h[s.NEXT]=function(e,t,n){e<t.length-1&&n.select(t[e+1],!0)},h[s.ENTER]=function(e,t,n){return n.selectedItem?n.selectedItem.click():undefined},h[s.ESCAPE]=function(){this.hide()},h),d=function(){function e(){this.onItemSelected=new t.EventEmitter,this.onItemClicked=new t.EventEmitter,this.onItemDestroyed=new t.EventEmitter}return Object.defineProperty(e.prototype,"selectedItem",{get:function(){return this._selectedItem},enumerable:!0,configurable:!0}),e.prototype.select=function(e,t){void 0===t&&(t=!0),this._selectedItem=e,t&&(e.focus(),this.onItemSelected.emit(e))},e.prototype.unselect=function(){this._selectedItem=undefined},e}(),p=function(){return function(){this.menuState={isVisible:!1,toString:function(){return!0===this.isVisible?"visible":"hidden"}},this.dropdownState=new d}}();p.decorators=[{type:t.Injectable}],p.ctorParameters=function(){return[]};var a=function(){function e(e,t,n){this.state=e,this.element=t,this.renderer=n,this.preventClose=!1}return e.prototype.ngOnDestroy=function(){this.state.dropdownState.onItemDestroyed.emit(this)},Object.defineProperty(e.prototype,"isSelected",{get:function(){return this===this.state.dropdownState.selectedItem},enumerable:!0,configurable:!0}),e.prototype.select=function(e){this.state.dropdownState.select(this,!0),e&&(e.stopPropagation(),e.preventDefault())},e.prototype.click=function(){this.state.dropdownState.onItemClicked.emit(this)},e.prototype.focus=function(){this.renderer.invokeElementMethod(this.element.nativeElement.children[0],"focus")},e}();a.decorators=[{type:t.Component,args:[{selector:"ng2-menu-item",styles:['\n      .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    '],template:'\n      <div class=\'ng2-menu-item\'\n           role="button"\n           tabindex="0"\n           [class.ng2-menu-item--selected]="isSelected"\n           (keydown.enter)="click()"\n           (click)="click()"\n           (mouseover)="select()">\n              <ng-content></ng-content>\n      </div>\n    '}]}],a.ctorParameters=function(){return[{type:p},{type:t.ElementRef},{type:t.Renderer}]},a.propDecorators={preventClose:[{type:t.Input}],value:[{type:t.Input}]};var l=function(){function e(e,t,n){this.state=e,this.element=t,this.renderer=n,this.width=4,this.focusFirstElement=!0,this.appendToBody=!0,this.zIndex=1e3,this.listeners={arrowHandler:undefined,handleKeypress:undefined}}return e.prototype.show=function(e,t){void 0===t&&(t=!0);var n="undefined"!=typeof document?document:undefined,o="undefined"!=typeof window?window:undefined;this.state.menuState.isVisible=!0,e&&this.updatePosition(e,t),this.listeners.handleKeypress=this.renderer.listen(n.body,"keydown",this.handleKeypress.bind(this)),this.listeners.arrowHandler=this.renderer.listen(o,"keydown",function(e){[38,40].indexOf(e.keyCode)>-1&&e.preventDefault()})},e.prototype.hide=function(){this.state.menuState.isVisible=!1,this.state.dropdownState.unselect(),this.listeners.arrowHandler?this.listeners.arrowHandler():undefined,this.listeners.handleKeypress?this.listeners.handleKeypress():undefined},e.prototype.updatePosition=function(e,t){this.position=e,this.updateOnChange(t)},e.prototype.handleKeypress=function(e){var t=e.keyCode,n=this.items.toArray(),o=n.indexOf(this.state.dropdownState.selectedItem);r.hasOwnProperty(t)&&r[t].call(this,o,n,this.state.dropdownState)},e.prototype.getMenuElement=function(){return this.element.nativeElement.children[0]},e.prototype.calcPositionOffset=function(e){var t="undefined"!=typeof window?window:undefined,n="undefined"!=typeof document?document:undefined;if(t&&n&&e){var o=this.getMenuElement(),i=t.pageXOffset!==undefined,s="CSS1Compat"===(n.compatMode||""),r=i?t.pageXOffset:s?n.documentElement.scrollLeft:n.body.scrollLeft,d=i?t.pageYOffset:s?n.documentElement.scrollTop:n.body.scrollTop,p=this.applyOffset(e.top+(this.appendToBody?d-15:0)+"px",e.left+r-5+"px"),a=p.top,l=p.left,c=o.clientWidth,u=o.clientHeight,h=parseInt(a)+u+(this.appendToBody?0:d-15),m=parseInt(l)+c,f=t.innerHeight+t.scrollY,g=t.innerWidth+t.scrollX;if(h>=f&&(a=parseInt(a.replace("px",""))-u+"px"),m>=g){var y=m-g+30;l=parseInt(l.replace("px",""))-y+"px"}return{top:a,left:l}}},e.prototype.applyOffset=function(e,t){if(!this.offset)return{top:e,left:t};var n=this.offset.split(" ");return n[1]||(n[1]="0"),e=parseInt(e.replace("px",""))+parseInt(n[0])+"px",t=parseInt(t.replace("px",""))+parseInt(n[1])+"px",{top:e,left:t}},e.prototype.ngOnInit=function(){var e="undefined"!=typeof document?document:undefined;this.appendToBody&&e.body.appendChild(this.element.nativeElement)},e.prototype.updateOnChange=function(e){void 0===e&&(e=!0);var t=this.getMenuElement(),n=this.calcPositionOffset(this.position);n&&(this.renderer.setElementStyle(t,"top",n.top.toString()),this.renderer.setElementStyle(t,"left",n.left.toString())),this.focusFirstElement&&this.items.first&&!this.state.dropdownState.selectedItem&&this.state.dropdownState.select(this.items.first,!1)},e.prototype.ngOnDestroy=function(){var e=this.element.nativeElement;e.parentNode.removeChild(e),this.listeners.handleKeypress&&this.listeners.handleKeypress()},e}();l.decorators=[{type:t.Component,args:[{selector:"ng2-dropdown-menu",styles:["\n      :host {\n        display: block; }\n\n      .ng2-dropdown-menu {\n        overflow-y: auto;\n        -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\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        min-height: 0;\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    "],template:'\n      \x3c!-- MENU --\x3e\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           [style.z-index]="zIndex"\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      \x3c!-- BACKDROP --\x3e\n      <div class="ng2-dropdown-backdrop" *ngIf="state.menuState.isVisible" (click)="hide()"></div>\n    ',animations:[n.trigger("fade",[n.state("visible",n.style({display:"block",height:"*",width:"*"})),n.state("hidden",n.style({display:"none",overflow:"hidden",height:0,width:0})),n.transition("hidden => visible",[n.animate("250ms ease-in",n.keyframes([n.style({opacity:0,offset:0}),n.style({opacity:1,offset:1,height:"*",width:"*"})]))]),n.transition("visible => hidden",[n.animate("350ms ease-out",n.keyframes([n.style({opacity:1,offset:0}),n.style({opacity:0,offset:1,width:"0",height:"0"})]))])]),n.trigger("opacity",[n.transition("hidden => visible",[n.animate("450ms ease-in",n.keyframes([n.style({opacity:0,offset:0}),n.style({opacity:1,offset:1})]))]),n.transition("visible => hidden",[n.animate("250ms ease-out",n.keyframes([n.style({opacity:1,offset:0}),n.style({opacity:.5,offset:.3}),n.style({opacity:0,offset:1})]))])])]}]}],l.ctorParameters=function(){return[{type:p},{type:t.ElementRef},{type:t.Renderer}]},l.propDecorators={width:[{type:t.Input}],focusFirstElement:[{type:t.Input}],offset:[{type:t.Input}],appendToBody:[{type:t.Input}],zIndex:[{type:t.Input}],items:[{type:t.ContentChildren,args:[a]}]};var c=function(){function e(e){this.state=e,this.dynamicUpdate=!0,this.onItemClicked=new t.EventEmitter,this.onItemSelected=new t.EventEmitter,this.onShow=new t.EventEmitter,this.onHide=new t.EventEmitter}return e.prototype.ngOnInit=function(){var e=this;this.state.dropdownState.onItemClicked.subscribe(function(t){e.onItemClicked.emit(t),t.preventClose||e.hide.call(e)}),this.button&&this.button.onMenuToggled.subscribe(function(){e.toggleMenu()}),this.state.dropdownState.onItemSelected.subscribe(function(t){e.onItemSelected.emit(t)}),this.state.dropdownState.onItemDestroyed.subscribe(function(t){var n,o=e.menu.items.toArray();t===e.state.dropdownState.selectedItem&&(e.menu.focusFirstElement&&(n=t===o[0]&&o.length>1?o[1]:o[0]),e.state.dropdownState.select(n))})},e.prototype.toggleMenu=function(e){void 0===e&&(e=this.button.getPosition()),this.state.menuState.isVisible?this.hide():this.show(e)},e.prototype.hide=function(){this.menu.hide(),this.onHide.emit(this)},e.prototype.show=function(e){void 0===e&&(e=this.button.getPosition()),this.menu.show(e,this.dynamicUpdate),this.onShow.emit(this)},e.prototype.scrollListener=function(){this.button&&this.dynamicUpdate&&this.menu.updatePosition(this.button.getPosition(),!0)},e}();c.decorators=[{type:t.Component,args:[{selector:"ng2-dropdown",template:'\n      <div class="ng2-dropdown-container">\n          <ng-content select="ng2-dropdown-button"></ng-content>\n          <ng-content select="ng2-dropdown-menu"></ng-content>\n      </div>\n    ',providers:[p]}]}],c.ctorParameters=function(){return[{type:p}]},c.propDecorators={button:[{type:t.ContentChild,args:[i]}],menu:[{type:t.ContentChild,args:[l]}],dynamicUpdate:[{type:t.Input}],onItemClicked:[{type:t.Output}],onItemSelected:[{type:t.Output}],onShow:[{type:t.Output}],onHide:[{type:t.Output}],scrollListener:[{type:t.HostListener,args:["window:scroll"]}]};var u=function(){return function(){}}();u.decorators=[{type:t.NgModule,args:[{exports:[a,i,l,c],declarations:[c,a,i,l],imports:[o.CommonModule]}]}],u.ctorParameters=function(){return[]};var h;e.Ng2Dropdown=c,e.Ng2DropdownMenu=l,e.Ng2MenuItem=a,e.Ng2DropdownButton=i,e.Ng2DropdownModule=u,e.DropdownStateService=p,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ng2-material-dropdown.umd.min.js.map

dist/ng2-dropdown.bundle.js

@@ -548,2 +548,3 @@ (function (global, factory) {
             var /** @type {?} */ newSelectedItem;
+            var /** @type {?} */ items = _this.menu.items.toArray();
             if (item !== _this.state.dropdownState.selectedItem) {
@@ -553,3 +554,3 @@ return;
             if (_this.menu.focusFirstElement) {
-                newSelectedItem = _this.menu.items.first;
+                newSelectedItem = item === items[0] && items.length > 1 ? items[1] : items[0];
             }
@@ -556,0 +557,0 @@ _this.state.dropdownState.select(newSelectedItem);

ng2-material-dropdown.es5.js

@@ -551,2 +551,3 @@ import { Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostListener, Injectable, Input, NgModule, Output, Renderer } from '@angular/core';
             var /** @type {?} */ newSelectedItem;
+            var /** @type {?} */ items = _this.menu.items.toArray();
             if (item !== _this.state.dropdownState.selectedItem) {
@@ -556,3 +557,3 @@ return;
             if (_this.menu.focusFirstElement) {
-                newSelectedItem = _this.menu.items.first;
+                newSelectedItem = item === items[0] && items.length > 1 ? items[1] : items[0];
             }
@@ -559,0 +560,0 @@ _this.state.dropdownState.select(newSelectedItem);

ng2-material-dropdown.js

@@ -718,2 +718,3 @@ import { Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostListener, Injectable, Input, NgModule, Output, Renderer } from '@angular/core';
             let /** @type {?} */ newSelectedItem;
+            const /** @type {?} */ items = this.menu.items.toArray();
             if (item !== this.state.dropdownState.selectedItem) {
@@ -723,3 +724,3 @@ return;
             if (this.menu.focusFirstElement) {
-                newSelectedItem = this.menu.items.first;
+                newSelectedItem = item === items[0] && items.length > 1 ? items[1] : items[0];
             }
@@ -726,0 +727,0 @@ this.state.dropdownState.select(newSelectedItem);

package.json

@@ -1,1 +0,1 @@
-{"name":"ng2-material-dropdown","version":"0.9.3","description":"Angular material-like dropdown component","scripts":{"release":"npm run build && npm publish dist","postrelease":"rm -rf dist","build":"ng-packagr && mkdir ./dist/dist && cp ./dist/bundles/ng2-material-dropdown.umd.js ./dist/dist/ng2-dropdown.bundle.js","server":"webpack-dev-server --config webpack.demo.js --inline --colors --progress --display-error-details --display-cached --port 3005  --content-base demo","start":"npm run server","test":"karma start karma.conf.js --single-run"},"author":{"name":"Giancarlo Buomprisco","email":"[e-mail]"},"contributors":[],"license":"MIT","devDependencies":{"@angular/animations":"^5.0.0","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/compiler-cli":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@types/es6-collections":"^0.5.29","@types/es6-shim":"0.0.22-alpha","@types/jasmine":"^2.2.34","@types/node":"^6.0.39","angular2-template-loader":"0.6.0","autoprefixer":"^6.3.7","awesome-typescript-loader":"3.0.0-beta.10","core-js":"^2.2.0","css-loader":"^0.23.1","es6-promise":"3.0.2","es6-shim":"0.35.0","file-loader":"^0.9.0","html-loader":"^0.4.3","jasmine":"^2.4.1","karma":"^0.13.22","karma-chrome-launcher":"^0.2.3","karma-coverage":"^1.0.0","karma-jasmine":"^0.3.8","karma-sourcemap-loader":"^0.3.7","karma-webpack":"1.7.0","ng-packagr":"^1.6.0","node-sass":"^3.8.0","postcss-loader":"^0.9.1","precss":"^1.4.0","protractor":"^3.3.0","raw-loader":"^0.5.1","reflect-metadata":"0.1.2","rxjs":"^5.5.0","sass-loader":"^3.2.1","source-map-loader":"^0.1.5","style-loader":"^0.13.1","svg-url-loader":"^1.0.3","ts-helpers":"1.1.1","ts-node":"^0.7.3","tslint":"^3.5.0","typescript":"~2.4.2","typings":"~1.0.3","url-loader":"^0.5.7","webpack":"^1.14.0","webpack-dev-server":"^1.16.2","webpack-merge":"^0.8.4","zone.js":"0.8.5"},"keywords":["angular 5","angular 5 material dropdown","angular 5 component dropdown","angular 5 dropdown","angular 5 menu"],"repository":{"type":"git","url":"https://github.com/Gbuomprisco/ng2-material-dropdown"},"bugs":{"url":"https://github.com/Gbuomprisco/ng2-material-dropdown/issues"},"homepage":"https://github.com/Gbuomprisco/ng2-material-dropdown","main":"bundles/ng2-material-dropdown.umd.js","$schema":"./node_modules/ng-packagr/package.schema.json","module":"ng2-material-dropdown.es5.js","es2015":"ng2-material-dropdown.js","typings":"ng2-material-dropdown.d.ts","metadata":"ng2-material-dropdown.metadata.json"}
+{"name":"ng2-material-dropdown","version":"0.9.4-beta","description":"Angular material-like dropdown component","scripts":{"release":"npm run build && npm publish dist","postrelease":"rm -rf dist","build":"ng-packagr && mkdir ./dist/dist && cp ./dist/bundles/ng2-material-dropdown.umd.js ./dist/dist/ng2-dropdown.bundle.js","server":"webpack-dev-server --config webpack.demo.js --inline --colors --progress --display-error-details --display-cached --port 3005  --content-base demo","start":"npm run server","test":"karma start karma.conf.js --single-run"},"author":{"name":"Giancarlo Buomprisco","email":"[e-mail]"},"contributors":[],"license":"MIT","devDependencies":{"@angular/animations":"^5.0.0","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/compiler-cli":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@types/es6-collections":"^0.5.29","@types/es6-shim":"0.0.22-alpha","@types/jasmine":"^2.2.34","@types/node":"^6.0.39","angular2-template-loader":"0.6.0","autoprefixer":"^6.3.7","awesome-typescript-loader":"3.0.0-beta.10","core-js":"^2.2.0","css-loader":"^0.23.1","es6-promise":"3.0.2","es6-shim":"0.35.0","file-loader":"^0.9.0","html-loader":"^0.4.3","jasmine":"^2.4.1","karma":"^0.13.22","karma-chrome-launcher":"^0.2.3","karma-coverage":"^1.0.0","karma-jasmine":"^0.3.8","karma-sourcemap-loader":"^0.3.7","karma-webpack":"1.7.0","ng-packagr":"^1.6.0","node-sass":"^3.8.0","postcss-loader":"^0.9.1","precss":"^1.4.0","protractor":"^3.3.0","raw-loader":"^0.5.1","reflect-metadata":"0.1.2","rxjs":"^5.5.0","sass-loader":"^3.2.1","source-map-loader":"^0.1.5","style-loader":"^0.13.1","svg-url-loader":"^1.0.3","ts-helpers":"1.1.1","ts-node":"^0.7.3","tslint":"^3.5.0","typescript":"~2.4.2","typings":"~1.0.3","url-loader":"^0.5.7","webpack":"^1.14.0","webpack-dev-server":"^1.16.2","webpack-merge":"^0.8.4","zone.js":"0.8.5"},"keywords":["angular 5","angular 5 material dropdown","angular 5 component dropdown","angular 5 dropdown","angular 5 menu"],"repository":{"type":"git","url":"https://github.com/Gbuomprisco/ng2-material-dropdown"},"bugs":{"url":"https://github.com/Gbuomprisco/ng2-material-dropdown/issues"},"homepage":"https://github.com/Gbuomprisco/ng2-material-dropdown","main":"bundles/ng2-material-dropdown.umd.js","$schema":"./node_modules/ng-packagr/package.schema.json","module":"ng2-material-dropdown.es5.js","es2015":"ng2-material-dropdown.js","typings":"ng2-material-dropdown.d.ts","metadata":"ng2-material-dropdown.metadata.json"}

No alert changes

Improved metrics

Total package byte prevSize

340182

increased by0.42%

Lines of code

3094

increased by0.13%

No dependency changes