ng2-material-dropdown - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/ng2-dropdown.bundle.js

@@ -89,10 +89,15 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        this.onItemClicked = new core_1.EventEmitter();
+	        this.onItemSelected = new core_1.EventEmitter();
+	        this.onShow = new core_1.EventEmitter();
+	        this.onHide = new core_1.EventEmitter();
 	        this.state = new ng2_dropdown_state_1.Ng2DropdownState();
 	    }
 	    Ng2Dropdown.prototype.toggleMenu = function () {
-	        this.menu.state.isVisible ? this.menu.hide() : this.menu.show();
+	        var isVisible = this.menu.state.isVisible;
+	        isVisible ? this.menu.hide() : this.menu.show();
 	        var position = this.button.getPosition();
 	        this.menu.updatePosition(position);
+	        isVisible ? this.onHide.emit(this) : this.onShow.emit(this);
 	    };
-	    Ng2Dropdown.prototype.ngAfterViewInit = function () {
+	    Ng2Dropdown.prototype.ngOnInit = function () {
 	        var _this = this;
@@ -106,8 +111,8 @@ this.state.onItemClicked.subscribe(function (item) {
 	        });
-	        if (this.button) {
-	            this.button.onMenuToggled.subscribe(function () {
-	                _this.toggleMenu();
-	            });
-	        }
+	        this.state.onItemSelected.subscribe(function (item) { return _this.onItemSelected.emit(item); });
 	    };
+	    Ng2Dropdown.prototype.ngAfterViewInit = function () {
+	        var _this = this;
+	        this.button.onMenuToggled.subscribe(function () { return _this.toggleMenu(); });
+	    };
 	    __decorate([
@@ -125,2 +130,14 @@ core_1.ContentChild(ng2_dropdown_button_1.Ng2DropdownButton),
 	    ], Ng2Dropdown.prototype, "onItemClicked", void 0);
+	    __decorate([
+	        core_1.Output(), 
+	        __metadata('design:type', core_1.EventEmitter)
+	    ], Ng2Dropdown.prototype, "onItemSelected", void 0);
+	    __decorate([
+	        core_1.Output(), 
+	        __metadata('design:type', core_1.EventEmitter)
+	    ], Ng2Dropdown.prototype, "onShow", void 0);
+	    __decorate([
+	        core_1.Output(), 
+	        __metadata('design:type', core_1.EventEmitter)
+	    ], Ng2Dropdown.prototype, "onHide", void 0);
 	    Ng2Dropdown = __decorate([
@@ -555,3 +572,3 @@ core_1.Component({
 
-	module.exports = "<button class='ng2-dropdown-button' (click)=\"toggleMenu()\" tabindex=\"0\">\n    <ng-content></ng-content>\n\n    <span class=\"caret\" *ngIf=\"showCaret\"></span>\n</button>\n";
+	module.exports = "<button class='ng2-dropdown-button' (click)=\"toggleMenu()\">\n    <ng-content></ng-content>\n\n    <span class=\"caret\" *ngIf=\"showCaret\"></span>\n</button>\n";
 
@@ -586,2 +603,4 @@ /***/ },
 	        this.renderer = renderer;
+	        this.width = 4;
+	        this.focusFirstElement = true;
 	        this.state = {
@@ -596,7 +615,10 @@ isVisible: false,
 	        this.state.isVisible = true;
+	        if (this.focusFirstElement) {
+	            this.dropdown.state.select(this.items.first, false);
+	        }
 	        this.focusMenuElement();
-	        this.dropdown.state.select(this.items.first, false);
 	    };
 	    Ng2DropdownMenu.prototype.hide = function () {
 	        this.state.isVisible = false;
+	        this.renderer.setElementStyle(this.getMenuElement(), 'display', 'none');
 	        this.dropdown.state.unselect();
@@ -620,4 +642,6 @@ };
 	    };
-	    Ng2DropdownMenu.prototype.focusMenuElement = function () {
-	        this.renderer.invokeElementMethod(this.getMenuElement(), 'focus', []);
+	    Ng2DropdownMenu.prototype.focusMenuElement = function (element) {
+	        if (element === void 0) { element = this.getMenuElement(); }
+	        this.renderer.setElementStyle(element, 'display', 'block');
+	        this.renderer.invokeElementMethod(element, 'focus', []);
 	    };
@@ -629,2 +653,10 @@ Ng2DropdownMenu.prototype.ngOnInit = function () {
 	    __decorate([
+	        core_1.Input(), 
+	        __metadata('design:type', Number)
+	    ], Ng2DropdownMenu.prototype, "width", void 0);
+	    __decorate([
+	        core_1.Input(), 
+	        __metadata('design:type', Boolean)
+	    ], Ng2DropdownMenu.prototype, "focusFirstElement", void 0);
+	    __decorate([
 	        core_1.ContentChildren(ng2_menu_item_1.Ng2MenuItem), 
@@ -744,3 +776,3 @@ __metadata('design:type', core_1.QueryList)
 	// module
-	exports.push([module.id, ".ng2-menu-item {\n  font-family: \"Roboto\", \"Helvetica Neue\", Helvetica, Arial;\n  padding: 0 1.25rem;\n  background: #fff;\n  color: #444;\n  cursor: pointer;\n  font-size: 15px;\n  text-transform: none;\n  font-weight: 400;\n  -webkit-transition: background 0.3s;\n  transition: background 0.3s;\n  letter-spacing: 0.03em;\n  height: 48px;\n  line-height: 48px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow-x: hidden; }\n\n.ng2-menu-item--selected {\n  background: #f9f9f9;\n  outline: 0; }\n\n.ng2-menu-item:focus {\n  outline: 0; }\n\n.ng2-menu-item:active {\n  background: #eee; }\n\n.ng2-menu-item [ng2-menu-item-icon] {\n  vertical-align: bottom;\n  font-size: 28px;\n  width: 40px;\n  height: 40px;\n  color: rgba(0, 0, 0, 0.54); }\n", ""]);
+	exports.push([module.id, ".ng2-menu-item {\n  font-family: \"Roboto\", \"Helvetica Neue\", Helvetica, Arial;\n  padding: 0 1.25rem;\n  background: #fff;\n  color: #444;\n  cursor: pointer;\n  font-size: 15px;\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  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow-x: hidden; }\n\n.ng2-menu-item--selected {\n  background: #f9f9f9;\n  outline: 0; }\n\n.ng2-menu-item:focus {\n  outline: 0; }\n\n.ng2-menu-item:active {\n  background: #eee; }\n\n.ng2-menu-item [ng2-menu-item-icon] {\n  vertical-align: bottom;\n  font-size: 28px;\n  width: 40px;\n  height: 40px;\n  color: rgba(0, 0, 0, 0.54); }\n", ""]);
 
@@ -765,4 +797,4 @@ // exports
 	        core_1.state('visible', core_1.style({
-	            width: '250px',
-	            maxHeight: '300px',
+	            width: '100%',
+	            maxHeight: '350px',
 	            opacity: 1
@@ -776,6 +808,6 @@ })),
 	        core_1.transition('visible => hidden', [
-	            core_1.animate('50ms ease-out')
+	            core_1.animate('100ms ease-out')
 	        ]),
 	        core_1.transition('hidden => visible', [
-	            core_1.animate('200ms cubic-bezier(0.55, 0, 0.55, 0.2)')
+	            core_1.animate('150ms cubic-bezier(0.55, 0, 0.55, 0.2)')
 	        ])
@@ -863,3 +895,3 @@ ])
 	// module
-	exports.push([module.id, ".ng2-dropdown-menu-container {\n  max-height: 300px;\n  position: fixed;\n  z-index: 2;\n  overflow-y: auto;\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);\n  padding: 0.5em 0;\n  background: #fff;\n  border-radius: 2px; }\n\n.ng2-dropdown-menu-container:focus {\n  outline: 0;\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3); }\n\n.ng2-dropdown-menu {\n  position: relative; }\n\n.ng2-dropdown-menu * {\n  opacity: 0;\n  -webkit-transition: opacity 0.8s;\n  transition: opacity 0.8s; }\n\n.ng2-dropdown-menu--active * {\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\nng2-menu-divider {\n  height: 1px;\n  min-height: 1px;\n  max-height: 1px;\n  width: 100%;\n  display: block;\n  background: #f9f9f9; }\n", ""]);
+	exports.push([module.id, ".ng2-dropdown-menu-container {\n  position: fixed;\n  z-index: 2;\n  overflow-y: auto;\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);\n  padding: 0.5em 0;\n  background: #fff;\n  border-radius: 2px;\n  display: none; }\n\n.ng2-dropdown-menu-container.ng2-dropdown-menu-container--open {\n  display: block; }\n\n.ng2-dropdown-menu-container--2 {\n  width: 150px; }\n\n.ng2-dropdown-menu-container--4 {\n  width: 250px; }\n\n.ng2-dropdown-menu-container--6 {\n  width: 320px; }\n\n.ng2-dropdown-menu-container:focus {\n  outline: 0;\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3); }\n\n.ng2-dropdown-menu {\n  position: relative; }\n\n.ng2-dropdown-menu * {\n  opacity: 0;\n  -webkit-transition: opacity 0.5s;\n  transition: opacity 0.5s; }\n\n.ng2-dropdown-menu-container.ng2-dropdown-menu-container--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\nng2-menu-divider {\n  height: 1px;\n  min-height: 1px;\n  max-height: 1px;\n  width: 100%;\n  display: block;\n  background: #f9f9f9; }\n", ""]);
 
@@ -873,3 +905,3 @@ // exports
 
-	module.exports = "<div class=\"ng2-dropdown-menu-container\" tabindex=\"0\" (keydown)=\"handleKeypress($event)\">\n    <div class='ng2-dropdown-menu'\n         [class.ng2-dropdown-menu--active]=\"state.isVisible\"\n         @fade=\"state.toString()\">\n            <ng-content></ng-content>\n    </div>\n</div>\n\n<div class=\"ng2-dropdown-backdrop\" [hidden]=\"!state.isVisible\" (click)=\"hide()\"></div>\n";
+	module.exports = "<!-- CONTAINER -->\n<div class=\"ng2-dropdown-menu-container ng2-dropdown-menu-container--{{ width }}\"\n     [class.ng2-dropdown-menu-container--open]=\"state.isVisible\"\n     tabindex=\"0\"\n     (keydown)=\"handleKeypress($event)\">\n\n    <!-- MENU -->\n    <div class='ng2-dropdown-menu' @fade=\"state.toString()\">\n        <ng-content></ng-content>\n    </div>\n</div>\n\n<!-- BACKDROP -->\n<div class=\"ng2-dropdown-backdrop\" [hidden]=\"!state.isVisible\" (click)=\"hide()\"></div>\n";
 
@@ -954,3 +986,3 @@ /***/ },
 
-	module.exports = "<div class=\"ng2-dropdown-container\">\n    <ng-content select=\"ng2-dropdown-button\"></ng-content>\n\n    <ng-content select=\"ng2-dropdown-menu\"></ng-content>\n</div>\n";
+	module.exports = "<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";
 
@@ -957,0 +989,0 @@ /***/ }

package.json

 {
   "name": "ng2-material-dropdown",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Angular 2 material-like Dropdown Component",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -54,13 +54,20 @@ # Angular2 Dropdown Component
 **`ng2-dropdown`**
-`onItemSelected()` - `[(onItemSelected($event)]` : event that emits the currently selected/hovered item
-`onItemClicked()` - `[(onItemClicked($event)]` : event that emits the item clicked on
+**`onItemSelected()`** - **`[(onItemSelected($event)]`** : event that emits the currently selected/hovered item
+**`onItemClicked()`** - **`[(onItemClicked($event)]`** : event that emits the item clicked on
+**`onShow()`** - **`[(onItemClicked($event)]`** : event that emits when the dropdown gets shown
+**`onHide()`** - **`[(onItemClicked($event)]`** : event that emits when the dropdown gets hidden
 
 
+**`ng2-dropdown-menu`**
+**`focusFirstElement`** - **`[?boolean]`** : by default the first element is immediately focused. You can disable by setting this option to false
+**`width`** - **`[?number]`**: this determines the width of the menu. Possible values are 2, 4 and 6. By default, this is set to 4
+
+
 **`ng2-dropdown-button`**
-`showCaret` - `[?boolean]` : if present, a caret will be appended to the button's text
+**`showCaret`** - **`[?boolean]`** : if present, a caret will be appended to the button's text
 
 
 **`ng2-menu-item`**
-`preventClose` - `[?boolean]` : if present, this attribute prevents the menu to hide when the menu item is clicked
-`value` - `[?any]` : any value that you may want to attach to a menu item
+**`preventClose`** - `[?boolean]` : if present, this attribute prevents the menu to hide when the menu item is clicked
+**`value` - `[?any]`** : any value that you may want to attach to a menu item. Useful for using this component with other components.
 

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93935

increased by4.33%

Lines of code

1027

increased by3.32%

Number of lines in readme file

73

increased by10.61%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes