ngx-select-dropdown - npm Package Compare versions

Comparing version 0.3.5 to 0.4.0

dist/components/ngx-select-dropdown-component/ngx-select-dropdown.component.d.ts

@@ -57,2 +57,6 @@ import { OnInit, EventEmitter, OnChanges, SimpleChanges } from "@angular/core";
     clickedInside: boolean;
+    /**
+     * variable to track the focused item whenuser uses arrow keys to select item
+     */
+    focusedItemIndex: number;
     constructor();
@@ -70,2 +74,7 @@ /**
     /**
+     * Event handler for key up and down event and enter press for selecting element
+     * @param event
+     */
+    handleKeyboardEvent(event: KeyboardEvent): boolean;
+    /**
      * Component onInit
@@ -76,2 +85,3 @@ */
      * Component onchage i.e when any of the innput properties change
+     * @param changes
      */
@@ -81,18 +91,24 @@ ngOnChanges(changes: SimpleChanges): void;
      * When user changes search changes trigger the model change
+     * @param $event
      */
     changed($event: any): void;
     /**
-     * Deselct a selected item
+     * Deselct a selected items
+     * @param item:  item to be deselected
+     * @param index:  index of the item
      */
-    deselectItem(item: any, index: number, $event: Event): void;
+    deselectItem(item: any, index: number): void;
     /**
      * Select an item
+     * @param item:  item to be selected
+     * @param index:  index of the item
      */
-    selectItem(item: string, index: number, $event: Event): void;
+    selectItem(item: string, index: number): void;
     /**
      * When selected items changes trigger the chaange back to parent
      */
-    valueChanged($event: Event): void;
+    valueChanged(): void;
     /**
      * Toggle the dropdownlist on/off
+     * @param event
      */
@@ -112,2 +128,15 @@ toggleSelectDropdown($event: any): void;
     private setSelectedDisplayText();
+    /**
+     * Event handler for arrow key up event thats focuses on a item
+     */
+    private onArrowKeyUp();
+    /**
+     * Event handler for arrow key down event thats focuses on a item
+     */
+    private onArrowKeyDown();
+    private onArrowKey();
+    /**
+     * will reset the element that is marked active using arrow keys
+     */
+    private resetArrowKeyActiveElement();
 }

dist/components/ngx-select-dropdown-component/ngx-select-dropdown.component.js

@@ -47,2 +47,6 @@ import { Component, Input, EventEmitter, Output, HostListener } from "@angular/core";
         this.clickedInside = false;
+        /**
+         * variable to track the focused item whenuser uses arrow keys to select item
+         */
+        this.focusedItemIndex = null;
         this.multiple = false;
@@ -71,2 +75,3 @@ this.searchTextChanged
             this.toggleDropdown = false;
+            this.resetArrowKeyActiveElement();
         }
@@ -76,2 +81,18 @@ this.clickedInside = false;
     /**
+     * Event handler for key up and down event and enter press for selecting element
+     * @param event
+     */
+    SelectDropDownComponent.prototype.handleKeyboardEvent = function (event) {
+        if (event.code === 'ArrowDown') {
+            this.onArrowKeyDown();
+        }
+        if (event.code === 'ArrowUp') {
+            this.onArrowKeyUp();
+        }
+        if (event.code === 'Enter' && this.focusedItemIndex !== null) {
+            this.selectItem(this.availableItems[this.focusedItemIndex], this.focusedItemIndex);
+        }
+        return false;
+    };
+    /**
      * Component onInit
@@ -87,2 +108,3 @@ */
      * Component onchage i.e when any of the innput properties change
+     * @param changes
      */
@@ -100,2 +122,3 @@ SelectDropDownComponent.prototype.ngOnChanges = function (changes) {
      * When user changes search changes trigger the model change
+     * @param $event
      */
@@ -106,5 +129,7 @@ SelectDropDownComponent.prototype.changed = function ($event) {
     /**
-     * Deselct a selected item
+     * Deselct a selected items
+     * @param item:  item to be deselected
+     * @param index:  index of the item
      */
-    SelectDropDownComponent.prototype.deselectItem = function (item, index, $event) {
+    SelectDropDownComponent.prototype.deselectItem = function (item, index) {
         this.selectedItems.splice(index, 1);
@@ -115,8 +140,11 @@ if (!this.availableItems.includes(item)) {
         }
-        this.valueChanged($event);
+        this.valueChanged();
+        this.resetArrowKeyActiveElement();
     };
     /**
      * Select an item
+     * @param item:  item to be selected
+     * @param index:  index of the item
      */
-    SelectDropDownComponent.prototype.selectItem = function (item, index, $event) {
+    SelectDropDownComponent.prototype.selectItem = function (item, index) {
         if (!this.multiple) {
@@ -133,3 +161,4 @@ if (this.selectedItems.length > 0) {
         this.availableItems.sort();
-        this.valueChanged($event);
+        this.valueChanged();
+        this.resetArrowKeyActiveElement();
     };
@@ -139,3 +168,3 @@ /**
      */
-    SelectDropDownComponent.prototype.valueChanged = function ($event) {
+    SelectDropDownComponent.prototype.valueChanged = function () {
         this.value = this.selectedItems;
@@ -148,5 +177,7 @@ this.valueChange.emit(this.value);
      * Toggle the dropdownlist on/off
+     * @param event
      */
     SelectDropDownComponent.prototype.toggleSelectDropdown = function ($event) {
         this.toggleDropdown = !this.toggleDropdown;
+        this.resetArrowKeyActiveElement();
     };
@@ -162,3 +193,3 @@ /**
             // exclude selectedItems from availableItems
-            this.availableItems = this.availableItems.filter(function (item) { return !JSON.stringify(_this.selectedItems).includes(JSON.stringify(item)); });
+            this.availableItems = this.availableItems.filter(function (item) { return !JSON.stringify(_this.selectedItems).toLocaleLowerCase().includes(JSON.stringify(item).toLocaleLowerCase()); });
             return;
@@ -224,7 +255,44 @@ }
     };
+    /**
+     * Event handler for arrow key up event thats focuses on a item
+     */
+    SelectDropDownComponent.prototype.onArrowKeyUp = function () {
+        if (this.focusedItemIndex === 0) {
+            this.focusedItemIndex = this.availableItems.length - 1;
+            return;
+        }
+        if (this.onArrowKey()) {
+            this.focusedItemIndex--;
+        }
+    };
+    /**
+     * Event handler for arrow key down event thats focuses on a item
+     */
+    SelectDropDownComponent.prototype.onArrowKeyDown = function () {
+        if (this.focusedItemIndex === this.availableItems.length - 1) {
+            this.focusedItemIndex = 0;
+            return;
+        }
+        if (this.onArrowKey()) {
+            this.focusedItemIndex++;
+        }
+    };
+    SelectDropDownComponent.prototype.onArrowKey = function () {
+        if (this.focusedItemIndex === null) {
+            this.focusedItemIndex = 0;
+            return false;
+        }
+        return true;
+    };
+    /**
+     * will reset the element that is marked active using arrow keys
+     */
+    SelectDropDownComponent.prototype.resetArrowKeyActiveElement = function () {
+        this.focusedItemIndex = null;
+    };
     SelectDropDownComponent.decorators = [
         { type: Component, args: [{
                     selector: "ngx-select-dropdown",
-                    template: "\n    <div class=\"ngx-dorpdown-container\">\n        <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n            <span>{{selectedDisplayText}} </span>\n            <span class=\"nsdicon-angle-down\"></span>\n        </button>\n        <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n            <div class=\"search-container\" *ngIf=\"config.search\">\n                <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n                <label [ngClass]=\"{'active': searchText}\">\n                    <span class=\"nsdicon-search\"></span> Search</label>\n            </div>\n            <ul class=\"selected-items\">\n                <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n                    <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n                </li>\n            </ul>\n            <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n            <ul class=\"available-items\">\n                <li *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{item[config.displayKey] || item}}</li>\n            </ul>\n        </div>\n    </div>\n  ",
-                    styles: ["\n    .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21)}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\n  "],
+                    template: "\n    <div class=\"ngx-dorpdown-container\">\n        <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n            <span>{{selectedDisplayText}} </span>\n            <span class=\"nsdicon-angle-down\"></span>\n        </button>\n        <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n            <div class=\"search-container\" *ngIf=\"config.search\">\n                <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n                <label [ngClass]=\"{'active': searchText}\">\n                    <span class=\"nsdicon-search\"></span> Search</label>\n            </div>\n            <ul class=\"selected-items\">\n                <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n                    <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n                </li>\n            </ul>\n            <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n            <ul class=\"available-items\">\n                <li *ngFor=\"let item of availableItems;let i = index\" [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\n                {{item[config.displayKey] || item}}</li>\n            </ul>\n        </div>\n    </div>\n  ",
+                    styles: ["\n    .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21)}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n  "],
                 },] },
@@ -243,2 +311,3 @@ ];
         'clickOutsideComponent': [{ type: HostListener, args: ['document:click',] },],
+        'handleKeyboardEvent': [{ type: HostListener, args: ['document:keydown', ['$event'],] },],
     };
@@ -245,0 +314,0 @@ return SelectDropDownComponent;

dist/components/ngx-select-dropdown-component/ngx-select-dropdown.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n    <div class=\"ngx-dorpdown-container\">\n        <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n            <span>{{selectedDisplayText}} </span>\n            <span class=\"nsdicon-angle-down\"></span>\n        </button>\n        <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n            <div class=\"search-container\" *ngIf=\"config.search\">\n                <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n                <label [ngClass]=\"{'active': searchText}\">\n                    <span class=\"nsdicon-search\"></span> Search</label>\n            </div>\n            <ul class=\"selected-items\">\n                <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n                    <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n                </li>\n            </ul>\n            <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n            <ul class=\"available-items\">\n                <li *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{item[config.displayKey] || item}}</li>\n            </ul>\n        </div>\n    </div>\n  ","styles":["\n    .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21)}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\n  "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n    <div class=\"ngx-dorpdown-container\">\n        <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n            <span>{{selectedDisplayText}} </span>\n            <span class=\"nsdicon-angle-down\"></span>\n        </button>\n        <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n            <div class=\"search-container\" *ngIf=\"config.search\">\n                <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n                <label [ngClass]=\"{'active': searchText}\">\n                    <span class=\"nsdicon-search\"></span> Search</label>\n            </div>\n            <ul class=\"selected-items\">\n                <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\n                    <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n                </li>\n            </ul>\n            <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n            <ul class=\"available-items\">\n                <li *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{item[config.displayKey] || item}}</li>\n            </ul>\n        </div>\n    </div>\n  ","styles":["\n    .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21)}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}.ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before{vertical-align:middle}\n  "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n    <div class=\"ngx-dorpdown-container\">\n        <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n            <span>{{selectedDisplayText}} </span>\n            <span class=\"nsdicon-angle-down\"></span>\n        </button>\n        <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n            <div class=\"search-container\" *ngIf=\"config.search\">\n                <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n                <label [ngClass]=\"{'active': searchText}\">\n                    <span class=\"nsdicon-search\"></span> Search</label>\n            </div>\n            <ul class=\"selected-items\">\n                <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n                    <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n                </li>\n            </ul>\n            <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n            <ul class=\"available-items\">\n                <li *ngFor=\"let item of availableItems;let i = index\" [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\n                {{item[config.displayKey] || item}}</li>\n            </ul>\n        </div>\n    </div>\n  ","styles":["\n    .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21)}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n  "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}],"onArrowKeyUp":[{"__symbolic":"method"}],"onArrowKeyDown":[{"__symbolic":"method"}],"onArrowKey":[{"__symbolic":"method"}],"resetArrowKeyActiveElement":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropDownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-select-dropdown","template":"\n    <div class=\"ngx-dorpdown-container\">\n        <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\n            <span>{{selectedDisplayText}} </span>\n            <span class=\"nsdicon-angle-down\"></span>\n        </button>\n        <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\n            <div class=\"search-container\" *ngIf=\"config.search\">\n                <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\n                <label [ngClass]=\"{'active': searchText}\">\n                    <span class=\"nsdicon-search\"></span> Search</label>\n            </div>\n            <ul class=\"selected-items\">\n                <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\n                    <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\n                </li>\n            </ul>\n            <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\n            <ul class=\"available-items\">\n                <li *ngFor=\"let item of availableItems;let i = index\" [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\n                {{item[config.displayKey] || item}}</li>\n            </ul>\n        </div>\n    </div>\n  ","styles":["\n    .ngx-dorpdown-container{width:100%;position:relative}.ngx-dorpdown-container button{display:inline-block;margin-bottom:0;font-weight:400;line-height:1.42857143;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;border:1px solid #ccc;border-radius:4px;color:#333;background-color:#fff;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.ngx-dorpdown-container button span{vertical-align:middle;float:left}.ngx-dorpdown-container button .nsdicon-angle-down{position:relative;font-size:large;float:right}.ngx-dorpdown-container .ngx-dropdown-button{width:100%;min-height:30px;padding:5px 10px 5px 10px;background-color:white}.ngx-dorpdown-container .ngx-dropdown-list-container{box-sizing:border-box;border:1px solid rgba(0,0,0,0.15);border-radius:4px;padding-left:10px;padding-right:10px;z-index:999999999;width:100%;background-clip:padding-box;background:white;position:absolute;-webkit-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);-moz-box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21);box-shadow:5px 5px 5px 0px rgba(0,0,0,0.21)}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container{position:relative;padding-top:10px;margin-top:5px}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input{background-color:transparent;border:none;border-bottom:1px solid #9e9e9e;border-radius:0;outline:none;height:2rem;width:100%;font-size:13px;margin:0;padding:0;box-shadow:none;box-sizing:content-box;transition:all 0.3s}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus{border-bottom:1px solid #26a69a}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus+label{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label{color:#9e9e9e;position:absolute;top:0;left:0;height:100%;font-size:1rem;cursor:text;-webkit-transition:-webkit-transform 0.2s ease-out;transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;text-align:initial;transform:translateY(12px);pointer-events:none}.ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active{transform:translateY(-2px) scale(0.8);transform-origin:0 0}.ngx-dorpdown-container .ngx-dropdown-list-container ul{margin-top:1rem;margin-bottom:1rem;list-style-type:none;padding-left:0px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li{background-color:#337ab7;color:white;margin-bottom:2px}.ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active{background-color:#337ab7;color:#ffff}.ngx-dorpdown-container .ngx-dropdown-list-container ul li{font-size:inherit;cursor:pointer;display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:normal}\n  "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"clickInsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickOutsideComponent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:click"]}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"changed":[{"__symbolic":"method"}],"deselectItem":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"toggleSelectDropdown":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"initDropdownValuesAndOptions":[{"__symbolic":"method"}],"setSelectedDisplayText":[{"__symbolic":"method"}],"onArrowKeyUp":[{"__symbolic":"method"}],"onArrowKeyDown":[{"__symbolic":"method"}],"onArrowKey":[{"__symbolic":"method"}],"resetArrowKeyActiveElement":[{"__symbolic":"method"}]}}}}]

dist/index.umd.js

 /**
  * ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module.
- * @version v0.3.5
+ * @version v0.4.0
  * @author Manish Kumar
@@ -145,2 +145,6 @@ * @link https://github.com/manishjanky/ngx-select-dropdown#readme
         this.clickedInside = false;
+        /**
+         * variable to track the focused item whenuser uses arrow keys to select item
+         */
+        this.focusedItemIndex = null;
         this.multiple = false;
@@ -169,2 +173,3 @@ this.searchTextChanged
             this.toggleDropdown = false;
+            this.resetArrowKeyActiveElement();
         }
@@ -174,2 +179,18 @@ this.clickedInside = false;
     /**
+     * Event handler for key up and down event and enter press for selecting element
+     * @param event
+     */
+    SelectDropDownComponent.prototype.handleKeyboardEvent = function (event) {
+        if (event.code === 'ArrowDown') {
+            this.onArrowKeyDown();
+        }
+        if (event.code === 'ArrowUp') {
+            this.onArrowKeyUp();
+        }
+        if (event.code === 'Enter' && this.focusedItemIndex !== null) {
+            this.selectItem(this.availableItems[this.focusedItemIndex], this.focusedItemIndex);
+        }
+        return false;
+    };
+    /**
      * Component onInit
@@ -185,2 +206,3 @@ */
      * Component onchage i.e when any of the innput properties change
+     * @param changes
      */
@@ -198,2 +220,3 @@ SelectDropDownComponent.prototype.ngOnChanges = function (changes) {
      * When user changes search changes trigger the model change
+     * @param $event
      */
@@ -204,5 +227,7 @@ SelectDropDownComponent.prototype.changed = function ($event) {
     /**
-     * Deselct a selected item
+     * Deselct a selected items
+     * @param item:  item to be deselected
+     * @param index:  index of the item
      */
-    SelectDropDownComponent.prototype.deselectItem = function (item, index, $event) {
+    SelectDropDownComponent.prototype.deselectItem = function (item, index) {
         this.selectedItems.splice(index, 1);
@@ -213,8 +238,11 @@ if (!this.availableItems.includes(item)) {
         }
-        this.valueChanged($event);
+        this.valueChanged();
+        this.resetArrowKeyActiveElement();
     };
     /**
      * Select an item
+     * @param item:  item to be selected
+     * @param index:  index of the item
      */
-    SelectDropDownComponent.prototype.selectItem = function (item, index, $event) {
+    SelectDropDownComponent.prototype.selectItem = function (item, index) {
         if (!this.multiple) {
@@ -231,3 +259,4 @@ if (this.selectedItems.length > 0) {
         this.availableItems.sort();
-        this.valueChanged($event);
+        this.valueChanged();
+        this.resetArrowKeyActiveElement();
     };
@@ -237,3 +266,3 @@ /**
      */
-    SelectDropDownComponent.prototype.valueChanged = function ($event) {
+    SelectDropDownComponent.prototype.valueChanged = function () {
         this.value = this.selectedItems;
@@ -246,5 +275,7 @@ this.valueChange.emit(this.value);
      * Toggle the dropdownlist on/off
+     * @param event
      */
     SelectDropDownComponent.prototype.toggleSelectDropdown = function ($event) {
         this.toggleDropdown = !this.toggleDropdown;
+        this.resetArrowKeyActiveElement();
     };
@@ -260,3 +291,3 @@ /**
             // exclude selectedItems from availableItems
-            this.availableItems = this.availableItems.filter(function (item) { return !JSON.stringify(_this.selectedItems).includes(JSON.stringify(item)); });
+            this.availableItems = this.availableItems.filter(function (item) { return !JSON.stringify(_this.selectedItems).toLocaleLowerCase().includes(JSON.stringify(item).toLocaleLowerCase()); });
             return;
@@ -322,2 +353,39 @@ }
     };
+    /**
+     * Event handler for arrow key up event thats focuses on a item
+     */
+    SelectDropDownComponent.prototype.onArrowKeyUp = function () {
+        if (this.focusedItemIndex === 0) {
+            this.focusedItemIndex = this.availableItems.length - 1;
+            return;
+        }
+        if (this.onArrowKey()) {
+            this.focusedItemIndex--;
+        }
+    };
+    /**
+     * Event handler for arrow key down event thats focuses on a item
+     */
+    SelectDropDownComponent.prototype.onArrowKeyDown = function () {
+        if (this.focusedItemIndex === this.availableItems.length - 1) {
+            this.focusedItemIndex = 0;
+            return;
+        }
+        if (this.onArrowKey()) {
+            this.focusedItemIndex++;
+        }
+    };
+    SelectDropDownComponent.prototype.onArrowKey = function () {
+        if (this.focusedItemIndex === null) {
+            this.focusedItemIndex = 0;
+            return false;
+        }
+        return true;
+    };
+    /**
+     * will reset the element that is marked active using arrow keys
+     */
+    SelectDropDownComponent.prototype.resetArrowKeyActiveElement = function () {
+        this.focusedItemIndex = null;
+    };
     __decorate([
@@ -359,2 +427,8 @@ core_1.Input(),
     ], SelectDropDownComponent.prototype, "clickOutsideComponent", null);
+    __decorate([
+        core_1.HostListener('document:keydown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [KeyboardEvent]),
+        __metadata("design:returntype", void 0)
+    ], SelectDropDownComponent.prototype, "handleKeyboardEvent", null);
     SelectDropDownComponent = __decorate([
@@ -434,3 +508,3 @@ core_1.Component({
 
-module.exports = "<div class=\"ngx-dorpdown-container\">\r\n    <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\r\n        <span>{{selectedDisplayText}} </span>\r\n        <span class=\"nsdicon-angle-down\"></span>\r\n    </button>\r\n    <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\r\n        <div class=\"search-container\" *ngIf=\"config.search\">\r\n            <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\r\n            <label [ngClass]=\"{'active': searchText}\">\r\n                <span class=\"nsdicon-search\"></span> Search</label>\r\n        </div>\r\n        <ul class=\"selected-items\">\r\n            <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i,$event)\">\r\n                <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\r\n            </li>\r\n        </ul>\r\n        <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\r\n        <ul class=\"available-items\">\r\n            <li *ngFor=\"let item of availableItems;let i = index\" (click)=\"selectItem(item,i,$event)\"> {{item[config.displayKey] || item}}</li>\r\n        </ul>\r\n    </div>\r\n</div>"
+module.exports = "<div class=\"ngx-dorpdown-container\">\r\n    <button type=\"button\" class=\"ngx-dropdown-button\" (click)=\"toggleSelectDropdown($event)\">\r\n        <span>{{selectedDisplayText}} </span>\r\n        <span class=\"nsdicon-angle-down\"></span>\r\n    </button>\r\n    <div class=\"ngx-dropdown-list-container\" *ngIf=\"toggleDropdown\">\r\n        <div class=\"search-container\" *ngIf=\"config.search\">\r\n            <input name=\"search\" (ngModelChange)='changed($event)' [(ngModel)]=\"searchText\" />\r\n            <label [ngClass]=\"{'active': searchText}\">\r\n                <span class=\"nsdicon-search\"></span> Search</label>\r\n        </div>\r\n        <ul class=\"selected-items\">\r\n            <li *ngFor=\"let selected of selectedItems;let i = index\" (click)=\"deselectItem(selected,i)\">\r\n                <span class=\"nsdicon-close\"> {{selected[config.displayKey] || selected}}</span>\r\n            </li>\r\n        </ul>\r\n        <hr *ngIf=\"selectedItems.length > 0 && availableItems.length > 0\" />\r\n        <ul class=\"available-items\">\r\n            <li *ngFor=\"let item of availableItems;let i = index\" [ngClass]=\"{'active': focusedItemIndex == i}\" (click)=\"selectItem(item,i)\">\r\n            {{item[config.displayKey] || item}}</li>\r\n        </ul>\r\n    </div>\r\n</div>"
 
@@ -460,3 +534,3 @@ /***/ }),
 // module
-exports.push([module.i, ".ngx-dorpdown-container {\n  width: 100%;\n  position: relative; }\n  .ngx-dorpdown-container button {\n    display: inline-block;\n    margin-bottom: 0;\n    font-weight: 400;\n    line-height: 1.42857143;\n    vertical-align: middle;\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    color: #333;\n    background-color: #fff;\n    white-space: nowrap;\n    overflow-x: hidden;\n    text-overflow: ellipsis; }\n    .ngx-dorpdown-container button span {\n      vertical-align: middle;\n      float: left; }\n    .ngx-dorpdown-container button .nsdicon-angle-down {\n      position: relative;\n      font-size: large;\n      float: right; }\n  .ngx-dorpdown-container .ngx-dropdown-button {\n    width: 100%;\n    min-height: 30px;\n    padding: 5px 10px 5px 10px;\n    background-color: white; }\n  .ngx-dorpdown-container .ngx-dropdown-list-container {\n    box-sizing: border-box;\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 4px;\n    padding-left: 10px;\n    padding-right: 10px;\n    z-index: 999999999;\n    width: 100%;\n    background-clip: padding-box;\n    background: white;\n    position: absolute;\n    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21); }\n    .ngx-dorpdown-container .ngx-dropdown-list-container .search-container {\n      position: relative;\n      padding-top: 10px;\n      margin-top: 5px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input {\n        background-color: transparent;\n        border: none;\n        border-bottom: 1px solid #9e9e9e;\n        border-radius: 0;\n        outline: none;\n        height: 2rem;\n        width: 100%;\n        font-size: 13px;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        box-sizing: content-box;\n        transition: all 0.3s; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus {\n          border-bottom: 1px solid #26a69a; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label {\n        color: #9e9e9e;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        font-size: 1rem;\n        cursor: text;\n        -webkit-transition: -webkit-transform 0.2s ease-out;\n        transition: -webkit-transform 0.2s ease-out;\n        transition: transform 0.2s ease-out;\n        transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;\n        -webkit-transform-origin: 0% 100%;\n        transform-origin: 0% 100%;\n        text-align: initial;\n        transform: translateY(12px);\n        pointer-events: none; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n    .ngx-dorpdown-container .ngx-dropdown-list-container ul {\n      margin-top: 1rem;\n      margin-bottom: 1rem;\n      list-style-type: none;\n      padding-left: 0px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li {\n        background-color: #337ab7;\n        color: white;\n        margin-bottom: 2px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul li {\n        font-size: inherit;\n        cursor: pointer;\n        display: block;\n        padding: 3px 20px;\n        clear: both;\n        font-weight: 400;\n        line-height: 1.42857143;\n        color: #333;\n        white-space: normal; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before {\n          vertical-align: middle; }\n", ""]);
+exports.push([module.i, ".ngx-dorpdown-container {\n  width: 100%;\n  position: relative; }\n  .ngx-dorpdown-container button {\n    display: inline-block;\n    margin-bottom: 0;\n    font-weight: 400;\n    line-height: 1.42857143;\n    vertical-align: middle;\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    color: #333;\n    background-color: #fff;\n    white-space: nowrap;\n    overflow-x: hidden;\n    text-overflow: ellipsis; }\n    .ngx-dorpdown-container button span {\n      vertical-align: middle;\n      float: left; }\n    .ngx-dorpdown-container button .nsdicon-angle-down {\n      position: relative;\n      font-size: large;\n      float: right; }\n  .ngx-dorpdown-container .ngx-dropdown-button {\n    width: 100%;\n    min-height: 30px;\n    padding: 5px 10px 5px 10px;\n    background-color: white; }\n  .ngx-dorpdown-container .ngx-dropdown-list-container {\n    box-sizing: border-box;\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 4px;\n    padding-left: 10px;\n    padding-right: 10px;\n    z-index: 999999999;\n    width: 100%;\n    background-clip: padding-box;\n    background: white;\n    position: absolute;\n    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21); }\n    .ngx-dorpdown-container .ngx-dropdown-list-container .search-container {\n      position: relative;\n      padding-top: 10px;\n      margin-top: 5px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input {\n        background-color: transparent;\n        border: none;\n        border-bottom: 1px solid #9e9e9e;\n        border-radius: 0;\n        outline: none;\n        height: 2rem;\n        width: 100%;\n        font-size: 13px;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        box-sizing: content-box;\n        transition: all 0.3s; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus {\n          border-bottom: 1px solid #26a69a; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label {\n        color: #9e9e9e;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        font-size: 1rem;\n        cursor: text;\n        -webkit-transition: -webkit-transform 0.2s ease-out;\n        transition: -webkit-transform 0.2s ease-out;\n        transition: transform 0.2s ease-out;\n        transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;\n        -webkit-transform-origin: 0% 100%;\n        transform-origin: 0% 100%;\n        text-align: initial;\n        transform: translateY(12px);\n        pointer-events: none; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n    .ngx-dorpdown-container .ngx-dropdown-list-container ul {\n      margin-top: 1rem;\n      margin-bottom: 1rem;\n      list-style-type: none;\n      padding-left: 0px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li {\n        background-color: #337ab7;\n        color: white;\n        margin-bottom: 2px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active {\n        background-color: #337ab7;\n        color: #ffff; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul li {\n        font-size: inherit;\n        cursor: pointer;\n        display: block;\n        padding: 3px 20px;\n        clear: both;\n        font-weight: 400;\n        line-height: 1.42857143;\n        color: #333;\n        white-space: normal; }\n", ""]);
 
@@ -463,0 +537,0 @@ // exports

dist/index.umd.min.js

 /**
  * ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module.
- * @version v0.3.5
+ * @version v0.4.0
  * @author Manish Kumar
@@ -8,3 +8,3 @@ * @link https://github.com/manishjanky/ngx-select-dropdown#readme
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/Subject","rxjs/Rx","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.Rx,e.Rx,e.ng.common,e.ng.forms)}("undefined"!=typeof self?self:this,function(e,t,n,o,i){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s},i=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),s=n(5);n(6);var a=function(){function e(){var e=this;this.options=[],this.multiple=!1,this.valueChange=new r.EventEmitter,this.change=new r.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.searchTextChanged=new s.Subject,this.clickedInside=!1,this.multiple=!1,this.searchTextChanged.debounceTime(300).distinctUntilChanged().subscribe(function(t){e.searchText=t,e.search()})}return e.prototype.clickInsideComponent=function(){this.clickedInside=!0},e.prototype.clickOutsideComponent=function(){this.clickedInside||(this.toggleDropdown=!1),this.clickedInside=!1},e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=this.options.sort().slice(),this.initDropdownValuesAndOptions())},e.prototype.ngOnChanges=function(e){this.selectedItems=[],this.searchText=null,this.options=this.options||[],e.options&&(this.availableItems=this.options.sort().slice()),this.initDropdownValuesAndOptions()},e.prototype.changed=function(e){this.searchTextChanged.next(e)},e.prototype.deselectItem=function(e,t,n){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort()),this.valueChanged(n)},e.prototype.selectItem=function(e,t,n){this.multiple||(this.selectedItems.length>0&&this.availableItems.push(this.selectedItems[0]),this.selectedItems=[],this.toggleDropdown=!1),this.availableItems.splice(t,1),this.selectedItems.push(e),this.selectedItems.sort(),this.availableItems.sort(),this.valueChanged(n)},e.prototype.valueChanged=function(e){this.value=this.selectedItems,this.valueChange.emit(this.value),this.change.emit({value:this.value}),this.setSelectedDisplayText()},e.prototype.toggleSelectDropdown=function(e){this.toggleDropdown=!this.toggleDropdown},e.prototype.search=function(){var e=this,t=[];if(""===this.searchText)return this.availableItems=this.options.slice(),void(this.availableItems=this.availableItems.filter(function(t){return!JSON.stringify(e.selectedItems).includes(JSON.stringify(t))}));for(var n=0,o=this.options;n<o.length;n++){var i=o[n];if("object"==typeof i)for(var r in i)i[r]&&i[r].toString().indexOf(this.searchText)>-1&&(t.includes(i)||t.push(i));else i.indexOf(this.searchText)>-1&&t.push(i)}this.availableItems=t,this.availableItems=this.availableItems.filter(function(t){return!e.selectedItems.includes(t)})},e.prototype.initDropdownValuesAndOptions=function(){var e=this;void 0===this.config&&(this.config={displayKey:"description"}),""!==this.value&&void 0!==this.value&&(this.selectedItems=this.value,this.value.forEach(function(t){var n=e.availableItems.indexOf(t);-1!==n&&e.availableItems.splice(n,1)}),this.setSelectedDisplayText())},e.prototype.setSelectedDisplayText=function(){var e=this.selectedItems[0];"object"==typeof this.selectedItems[0]&&(e=this.selectedItems[0][this.config.displayKey]),this.multiple&&this.selectedItems.length>0?this.selectedDisplayText=1===this.selectedItems.length?e:e+" + "+(this.selectedItems.length-1)+" more":this.selectedDisplayText=0===this.selectedItems.length?"Select":e},o([r.Input(),i("design:type",Object)],e.prototype,"options",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"config",void 0),o([r.Input(),i("design:type",Boolean)],e.prototype,"multiple",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"value",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"valueChange",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"change",void 0),o([r.HostListener("click"),i("design:type",Function),i("design:paramtypes",[]),i("design:returntype",void 0)],e.prototype,"clickInsideComponent",null),o([r.HostListener("document:click"),i("design:type",Function),i("design:paramtypes",[]),i("design:returntype",void 0)],e.prototype,"clickOutsideComponent",null),e=o([r.Component({selector:"ngx-select-dropdown",template:n(7),styles:[n(8)]}),i("design:paramtypes",[])],e)}();t.SelectDropDownComponent=a},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(3);t.SelectDropDownComponent=o.SelectDropDownComponent;var i=n(11);t.SelectDropDownModule=i.SelectDropDownModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(4))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(0))},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports='<div class="ngx-dorpdown-container">\r\n    <button type="button" class="ngx-dropdown-button" (click)="toggleSelectDropdown($event)">\r\n        <span>{{selectedDisplayText}} </span>\r\n        <span class="nsdicon-angle-down"></span>\r\n    </button>\r\n    <div class="ngx-dropdown-list-container" *ngIf="toggleDropdown">\r\n        <div class="search-container" *ngIf="config.search">\r\n            <input name="search" (ngModelChange)=\'changed($event)\' [(ngModel)]="searchText" />\r\n            <label [ngClass]="{\'active\': searchText}">\r\n                <span class="nsdicon-search"></span> Search</label>\r\n        </div>\r\n        <ul class="selected-items">\r\n            <li *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i,$event)">\r\n                <span class="nsdicon-close"> {{selected[config.displayKey] || selected}}</span>\r\n            </li>\r\n        </ul>\r\n        <hr *ngIf="selectedItems.length > 0 && availableItems.length > 0" />\r\n        <ul class="available-items">\r\n            <li *ngFor="let item of availableItems;let i = index" (click)="selectItem(item,i,$event)"> {{item[config.displayKey] || item}}</li>\r\n        </ul>\r\n    </div>\r\n</div>'},function(e,t,n){var o=n(9);e.exports="string"==typeof o?o:o.toString()},function(e,t,n){t=e.exports=n(10)(!1),t.push([e.i,".ngx-dorpdown-container {\n  width: 100%;\n  position: relative; }\n  .ngx-dorpdown-container button {\n    display: inline-block;\n    margin-bottom: 0;\n    font-weight: 400;\n    line-height: 1.42857143;\n    vertical-align: middle;\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    color: #333;\n    background-color: #fff;\n    white-space: nowrap;\n    overflow-x: hidden;\n    text-overflow: ellipsis; }\n    .ngx-dorpdown-container button span {\n      vertical-align: middle;\n      float: left; }\n    .ngx-dorpdown-container button .nsdicon-angle-down {\n      position: relative;\n      font-size: large;\n      float: right; }\n  .ngx-dorpdown-container .ngx-dropdown-button {\n    width: 100%;\n    min-height: 30px;\n    padding: 5px 10px 5px 10px;\n    background-color: white; }\n  .ngx-dorpdown-container .ngx-dropdown-list-container {\n    box-sizing: border-box;\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 4px;\n    padding-left: 10px;\n    padding-right: 10px;\n    z-index: 999999999;\n    width: 100%;\n    background-clip: padding-box;\n    background: white;\n    position: absolute;\n    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21); }\n    .ngx-dorpdown-container .ngx-dropdown-list-container .search-container {\n      position: relative;\n      padding-top: 10px;\n      margin-top: 5px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input {\n        background-color: transparent;\n        border: none;\n        border-bottom: 1px solid #9e9e9e;\n        border-radius: 0;\n        outline: none;\n        height: 2rem;\n        width: 100%;\n        font-size: 13px;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        box-sizing: content-box;\n        transition: all 0.3s; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus {\n          border-bottom: 1px solid #26a69a; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label {\n        color: #9e9e9e;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        font-size: 1rem;\n        cursor: text;\n        -webkit-transition: -webkit-transform 0.2s ease-out;\n        transition: -webkit-transform 0.2s ease-out;\n        transition: transform 0.2s ease-out;\n        transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;\n        -webkit-transform-origin: 0% 100%;\n        transform-origin: 0% 100%;\n        text-align: initial;\n        transform: translateY(12px);\n        pointer-events: none; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n    .ngx-dorpdown-container .ngx-dropdown-list-container ul {\n      margin-top: 1rem;\n      margin-bottom: 1rem;\n      list-style-type: none;\n      padding-left: 0px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li {\n        background-color: #337ab7;\n        color: white;\n        margin-bottom: 2px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul li {\n        font-size: inherit;\n        cursor: pointer;\n        display: block;\n        padding: 3px 20px;\n        clear: both;\n        font-weight: 400;\n        line-height: 1.42857143;\n        color: #333;\n        white-space: normal; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container ul li span::before {\n          vertical-align: middle; }\n",""])},function(e,t){function n(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var r=o(i);return[n].concat(i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"})).concat([r]).join("\n")}return[n].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o=n(t,e);return t[2]?"@media "+t[2]+"{"+o+"}":o}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<e.length;i++){var s=e[i];"number"==typeof s[0]&&o[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),r=n(12),s=n(13),a=n(0),l=function(){function e(){}return e=o([i.NgModule({declarations:[a.SelectDropDownComponent],imports:[r.CommonModule,s.FormsModule],exports:[a.SelectDropDownComponent],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=l},function(e,t){e.exports=o},function(e,t){e.exports=i}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/Subject","rxjs/Rx","@angular/common","@angular/forms"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("rxjs/Subject"),require("rxjs/Rx"),require("@angular/common"),require("@angular/forms")):e.ticktock=t(e.ng.core,e.Rx,e.Rx,e.ng.common,e.ng.forms)}("undefined"!=typeof self?self:this,function(e,t,n,o,i){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s},i=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),s=n(5);n(6);var a=function(){function e(){var e=this;this.options=[],this.multiple=!1,this.valueChange=new r.EventEmitter,this.change=new r.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.searchTextChanged=new s.Subject,this.clickedInside=!1,this.focusedItemIndex=null,this.multiple=!1,this.searchTextChanged.debounceTime(300).distinctUntilChanged().subscribe(function(t){e.searchText=t,e.search()})}return e.prototype.clickInsideComponent=function(){this.clickedInside=!0},e.prototype.clickOutsideComponent=function(){this.clickedInside||(this.toggleDropdown=!1,this.resetArrowKeyActiveElement()),this.clickedInside=!1},e.prototype.handleKeyboardEvent=function(e){return"ArrowDown"===e.code&&this.onArrowKeyDown(),"ArrowUp"===e.code&&this.onArrowKeyUp(),"Enter"===e.code&&null!==this.focusedItemIndex&&this.selectItem(this.availableItems[this.focusedItemIndex],this.focusedItemIndex),!1},e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=this.options.sort().slice(),this.initDropdownValuesAndOptions())},e.prototype.ngOnChanges=function(e){this.selectedItems=[],this.searchText=null,this.options=this.options||[],e.options&&(this.availableItems=this.options.sort().slice()),this.initDropdownValuesAndOptions()},e.prototype.changed=function(e){this.searchTextChanged.next(e)},e.prototype.deselectItem=function(e,t){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort()),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.selectItem=function(e,t){this.multiple||(this.selectedItems.length>0&&this.availableItems.push(this.selectedItems[0]),this.selectedItems=[],this.toggleDropdown=!1),this.availableItems.splice(t,1),this.selectedItems.push(e),this.selectedItems.sort(),this.availableItems.sort(),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.valueChanged=function(){this.value=this.selectedItems,this.valueChange.emit(this.value),this.change.emit({value:this.value}),this.setSelectedDisplayText()},e.prototype.toggleSelectDropdown=function(e){this.toggleDropdown=!this.toggleDropdown,this.resetArrowKeyActiveElement()},e.prototype.search=function(){var e=this,t=[];if(""===this.searchText)return this.availableItems=this.options.slice(),void(this.availableItems=this.availableItems.filter(function(t){return!JSON.stringify(e.selectedItems).toLocaleLowerCase().includes(JSON.stringify(t).toLocaleLowerCase())}));for(var n=0,o=this.options;n<o.length;n++){var i=o[n];if("object"==typeof i)for(var r in i)i[r]&&i[r].toString().indexOf(this.searchText)>-1&&(t.includes(i)||t.push(i));else i.indexOf(this.searchText)>-1&&t.push(i)}this.availableItems=t,this.availableItems=this.availableItems.filter(function(t){return!e.selectedItems.includes(t)})},e.prototype.initDropdownValuesAndOptions=function(){var e=this;void 0===this.config&&(this.config={displayKey:"description"}),""!==this.value&&void 0!==this.value&&(this.selectedItems=this.value,this.value.forEach(function(t){var n=e.availableItems.indexOf(t);-1!==n&&e.availableItems.splice(n,1)}),this.setSelectedDisplayText())},e.prototype.setSelectedDisplayText=function(){var e=this.selectedItems[0];"object"==typeof this.selectedItems[0]&&(e=this.selectedItems[0][this.config.displayKey]),this.multiple&&this.selectedItems.length>0?this.selectedDisplayText=1===this.selectedItems.length?e:e+" + "+(this.selectedItems.length-1)+" more":this.selectedDisplayText=0===this.selectedItems.length?"Select":e},e.prototype.onArrowKeyUp=function(){if(0===this.focusedItemIndex)return void(this.focusedItemIndex=this.availableItems.length-1);this.onArrowKey()&&this.focusedItemIndex--},e.prototype.onArrowKeyDown=function(){if(this.focusedItemIndex===this.availableItems.length-1)return void(this.focusedItemIndex=0);this.onArrowKey()&&this.focusedItemIndex++},e.prototype.onArrowKey=function(){return null!==this.focusedItemIndex||(this.focusedItemIndex=0,!1)},e.prototype.resetArrowKeyActiveElement=function(){this.focusedItemIndex=null},o([r.Input(),i("design:type",Object)],e.prototype,"options",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"config",void 0),o([r.Input(),i("design:type",Boolean)],e.prototype,"multiple",void 0),o([r.Input(),i("design:type",Object)],e.prototype,"value",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"valueChange",void 0),o([r.Output(),i("design:type",r.EventEmitter)],e.prototype,"change",void 0),o([r.HostListener("click"),i("design:type",Function),i("design:paramtypes",[]),i("design:returntype",void 0)],e.prototype,"clickInsideComponent",null),o([r.HostListener("document:click"),i("design:type",Function),i("design:paramtypes",[]),i("design:returntype",void 0)],e.prototype,"clickOutsideComponent",null),o([r.HostListener("document:keydown",["$event"]),i("design:type",Function),i("design:paramtypes",[KeyboardEvent]),i("design:returntype",void 0)],e.prototype,"handleKeyboardEvent",null),e=o([r.Component({selector:"ngx-select-dropdown",template:n(7),styles:[n(8)]}),i("design:paramtypes",[])],e)}();t.SelectDropDownComponent=a},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(3);t.SelectDropDownComponent=o.SelectDropDownComponent;var i=n(11);t.SelectDropDownModule=i.SelectDropDownModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(4))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(0))},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports='<div class="ngx-dorpdown-container">\r\n    <button type="button" class="ngx-dropdown-button" (click)="toggleSelectDropdown($event)">\r\n        <span>{{selectedDisplayText}} </span>\r\n        <span class="nsdicon-angle-down"></span>\r\n    </button>\r\n    <div class="ngx-dropdown-list-container" *ngIf="toggleDropdown">\r\n        <div class="search-container" *ngIf="config.search">\r\n            <input name="search" (ngModelChange)=\'changed($event)\' [(ngModel)]="searchText" />\r\n            <label [ngClass]="{\'active\': searchText}">\r\n                <span class="nsdicon-search"></span> Search</label>\r\n        </div>\r\n        <ul class="selected-items">\r\n            <li *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i)">\r\n                <span class="nsdicon-close"> {{selected[config.displayKey] || selected}}</span>\r\n            </li>\r\n        </ul>\r\n        <hr *ngIf="selectedItems.length > 0 && availableItems.length > 0" />\r\n        <ul class="available-items">\r\n            <li *ngFor="let item of availableItems;let i = index" [ngClass]="{\'active\': focusedItemIndex == i}" (click)="selectItem(item,i)">\r\n            {{item[config.displayKey] || item}}</li>\r\n        </ul>\r\n    </div>\r\n</div>'},function(e,t,n){var o=n(9);e.exports="string"==typeof o?o:o.toString()},function(e,t,n){t=e.exports=n(10)(!1),t.push([e.i,".ngx-dorpdown-container {\n  width: 100%;\n  position: relative; }\n  .ngx-dorpdown-container button {\n    display: inline-block;\n    margin-bottom: 0;\n    font-weight: 400;\n    line-height: 1.42857143;\n    vertical-align: middle;\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    color: #333;\n    background-color: #fff;\n    white-space: nowrap;\n    overflow-x: hidden;\n    text-overflow: ellipsis; }\n    .ngx-dorpdown-container button span {\n      vertical-align: middle;\n      float: left; }\n    .ngx-dorpdown-container button .nsdicon-angle-down {\n      position: relative;\n      font-size: large;\n      float: right; }\n  .ngx-dorpdown-container .ngx-dropdown-button {\n    width: 100%;\n    min-height: 30px;\n    padding: 5px 10px 5px 10px;\n    background-color: white; }\n  .ngx-dorpdown-container .ngx-dropdown-list-container {\n    box-sizing: border-box;\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 4px;\n    padding-left: 10px;\n    padding-right: 10px;\n    z-index: 999999999;\n    width: 100%;\n    background-clip: padding-box;\n    background: white;\n    position: absolute;\n    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21);\n    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.21); }\n    .ngx-dorpdown-container .ngx-dropdown-list-container .search-container {\n      position: relative;\n      padding-top: 10px;\n      margin-top: 5px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input {\n        background-color: transparent;\n        border: none;\n        border-bottom: 1px solid #9e9e9e;\n        border-radius: 0;\n        outline: none;\n        height: 2rem;\n        width: 100%;\n        font-size: 13px;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        box-sizing: content-box;\n        transition: all 0.3s; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus {\n          border-bottom: 1px solid #26a69a; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label {\n        color: #9e9e9e;\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        font-size: 1rem;\n        cursor: text;\n        -webkit-transition: -webkit-transform 0.2s ease-out;\n        transition: -webkit-transform 0.2s ease-out;\n        transition: transform 0.2s ease-out;\n        transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;\n        -webkit-transform-origin: 0% 100%;\n        transform-origin: 0% 100%;\n        text-align: initial;\n        transform: translateY(12px);\n        pointer-events: none; }\n        .ngx-dorpdown-container .ngx-dropdown-list-container .search-container label.active {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n    .ngx-dorpdown-container .ngx-dropdown-list-container ul {\n      margin-top: 1rem;\n      margin-bottom: 1rem;\n      list-style-type: none;\n      padding-left: 0px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul.selected-items li {\n        background-color: #337ab7;\n        color: white;\n        margin-bottom: 2px; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul.available-items li.active {\n        background-color: #337ab7;\n        color: #ffff; }\n      .ngx-dorpdown-container .ngx-dropdown-list-container ul li {\n        font-size: inherit;\n        cursor: pointer;\n        display: block;\n        padding: 3px 20px;\n        clear: both;\n        font-weight: 400;\n        line-height: 1.42857143;\n        color: #333;\n        white-space: normal; }\n",""])},function(e,t){function n(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var r=o(i);return[n].concat(i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"})).concat([r]).join("\n")}return[n].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o=n(t,e);return t[2]?"@media "+t[2]+"{"+o+"}":o}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<e.length;i++){var s=e[i];"number"==typeof s[0]&&o[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),r=n(12),s=n(13),a=n(0),l=function(){function e(){}return e=o([i.NgModule({declarations:[a.SelectDropDownComponent],imports:[r.CommonModule,s.FormsModule],exports:[a.SelectDropDownComponent],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=l},function(e,t){e.exports=o},function(e,t){e.exports=i}])});
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "ngx-select-dropdown",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "A angular(4+) selct dropdown for single selct or multiselct module.",
@@ -5,0 +5,0 @@ "main": "./dist/index.umd.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

215513

increased by10.25%

Lines of code

1359

increased by15.07%

No dependency changes