ngx-select-dropdown - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

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

@@ -20,4 +20,4 @@ import { OnInit, EventEmitter, OnChanges, SimpleChanges, ElementRef, QueryList, AfterViewInit, ChangeDetectorRef } from "@angular/core";
     /**
-   * Value
-   */
+     * Value
+     */
     disabled: boolean;
@@ -76,6 +76,6 @@ /**
     availableOptions: QueryList<ElementRef>;
+    value: any;
+    constructor(cdref: ChangeDetectorRef, _elementRef: ElementRef);
     onChange: any;
     onTouched: any;
-    value: any;
-    constructor(cdref: ChangeDetectorRef, _elementRef: ElementRef);
     /**
@@ -92,4 +92,4 @@ * click listener for host inside this component i.e
     /**
-   * click handler on documnent to hide the open dropdown if clicked outside
-   */
+     * click handler on documnent to hide the open dropdown if clicked outside
+     */
     KeyPressOutsideComponent(): void;
@@ -96,0 +96,0 @@ /**

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

@@ -27,6 +27,2 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
         this.multiple = false;
-        // /**
-        //  * event when value changes to update in the UI
-        //  */
-        // @Output() public valueChange: EventEmitter<any> = new EventEmitter();
         /**
@@ -76,4 +72,6 @@ * change event when value changes to provide user to handle things in change event
         this.showNotFound = false;
-        this.onChange = function () { };
-        this.onTouched = function () { };
+        this.onChange = function () {
+        };
+        this.onTouched = function () {
+        };
         this.multiple = false;
@@ -112,4 +110,4 @@ }
     /**
-   * click handler on documnent to hide the open dropdown if clicked outside
-   */
+     * click handler on documnent to hide the open dropdown if clicked outside
+     */
     SelectDropDownComponent.prototype.KeyPressOutsideComponent = function () {
@@ -128,4 +126,5 @@ if (!this.insideKeyPress) {
         this.insideKeyPress = true;
-        if ($event.code === 'Escape') {
+        if ($event.keyCode === 27 || this.disabled) {
             this.toggleDropdown = false;
+            this.insideKeyPress = false;
             return;
@@ -137,3 +136,4 @@ }
         }
-        if ($event.code === 'ArrowDown' && avaOpts.length > 0) {
+        // Arrow Down
+        if ($event.keyCode === 40 && avaOpts.length > 0) {
             this.onArrowKeyDown();
@@ -143,3 +143,4 @@ avaOpts[this.focusedItemIndex].nativeElement.focus();
         }
-        if ($event.code === 'ArrowUp' && avaOpts.length) {
+        // Arrow Up
+        if ($event.keyCode === 38 && avaOpts.length) {
             this.onArrowKeyUp();
@@ -149,3 +150,4 @@ avaOpts[this.focusedItemIndex].nativeElement.focus();
         }
-        if ($event.code === 'Enter' && this.focusedItemIndex !== null) {
+        // Enter
+        if ($event.keyCode === 13 && this.focusedItemIndex !== null) {
             this.selectItem(this.availableItems[this.focusedItemIndex], this.focusedItemIndex);
@@ -152,0 +154,0 @@ return false;

dist/index.umd.js

 /**
  * ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module.
- * @version v1.0.0
+ * @version v1.0.1
  * @author Manish Kumar
@@ -131,6 +131,2 @@ * @link https://github.com/manishjanky/ngx-select-dropdown#readme
         this.multiple = false;
-        // /**
-        //  * event when value changes to update in the UI
-        //  */
-        // @Output() public valueChange: EventEmitter<any> = new EventEmitter();
         /**
@@ -180,4 +176,6 @@ * change event when value changes to provide user to handle things in change event
         this.showNotFound = false;
-        this.onChange = function () { };
-        this.onTouched = function () { };
+        this.onChange = function () {
+        };
+        this.onTouched = function () {
+        };
         this.multiple = false;
@@ -217,4 +215,4 @@ }
     /**
-   * click handler on documnent to hide the open dropdown if clicked outside
-   */
+     * click handler on documnent to hide the open dropdown if clicked outside
+     */
     SelectDropDownComponent.prototype.KeyPressOutsideComponent = function () {
@@ -233,4 +231,5 @@ if (!this.insideKeyPress) {
         this.insideKeyPress = true;
-        if ($event.code === 'Escape') {
+        if ($event.keyCode === 27 || this.disabled) {
             this.toggleDropdown = false;
+            this.insideKeyPress = false;
             return;
@@ -242,3 +241,4 @@ }
         }
-        if ($event.code === 'ArrowDown' && avaOpts.length > 0) {
+        // Arrow Down
+        if ($event.keyCode === 40 && avaOpts.length > 0) {
             this.onArrowKeyDown();
@@ -248,3 +248,4 @@ avaOpts[this.focusedItemIndex].nativeElement.focus();
         }
-        if ($event.code === 'ArrowUp' && avaOpts.length) {
+        // Arrow Up
+        if ($event.keyCode === 38 && avaOpts.length) {
             this.onArrowKeyUp();
@@ -254,3 +255,4 @@ avaOpts[this.focusedItemIndex].nativeElement.focus();
         }
-        if ($event.code === 'Enter' && this.focusedItemIndex !== null) {
+        // Enter
+        if ($event.keyCode === 13 && this.focusedItemIndex !== null) {
             this.selectItem(this.availableItems[this.focusedItemIndex], this.focusedItemIndex);
@@ -257,0 +259,0 @@ return false;

dist/index.umd.min.js

 /**
  * ngx-select-dropdown - A angular(4+) selct dropdown for single selct or multiselct module.
- * @version v1.0.0
+ * @version v1.0.1
  * @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("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/forms","@angular/common"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/forms"),require("@angular/common")):e.ticktock=t(e.ng.core,e.ng.forms,e.ng.common)}("undefined"!=typeof self?self:this,function(e,t,n){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=3)}([function(t,n){t.exports=e},function(e,t,n){"use strict";var o=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++){t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},i=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},r=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 s=n(0),a=n(2),l=function(){function e(e,t){this.cdref=e,this._elementRef=t,this.options=[],this.config={},this.multiple=!1,this.change=new s.EventEmitter,this.open=new s.EventEmitter,this.close=new s.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.clickedInside=!1,this.insideKeyPress=!1,this.focusedItemIndex=null,this.showNotFound=!1,this.onChange=function(){},this.onTouched=function(){},this.multiple=!1}return t=e,Object.defineProperty(e.prototype,"value",{get:function(){return this._value},set:function(e){this._value=e,this.onChange(e),this.onTouched()},enumerable:!0,configurable:!0}),e.prototype.clickInsideComponent=function(){this.clickedInside=!0},e.prototype.clickOutsideComponent=function(){this.clickedInside||(this.toggleDropdown=!1,this.resetArrowKeyActiveElement()),this.clickedInside=!1},e.prototype.KeyPressOutsideComponent=function(){this.insideKeyPress||(this.toggleDropdown=!1,this.resetArrowKeyActiveElement()),this.insideKeyPress=!1},e.prototype.handleKeyboardEvent=function(e){if(this.insideKeyPress=!0,"Escape"===e.code)return void(this.toggleDropdown=!1);var t=this.availableOptions.toArray();return 0!==t.length||this.toggleDropdown||(this.toggleDropdown=!0),"ArrowDown"===e.code&&t.length>0&&(this.onArrowKeyDown(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),"ArrowUp"===e.code&&t.length&&(this.onArrowKeyUp(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),"Enter"===e.code&&null!==this.focusedItemIndex?(this.selectItem(this.availableItems[this.focusedItemIndex],this.focusedItemIndex),!1):void 0},e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=this.options.sort(this.config.customComparator).slice(),this.initDropdownValuesAndOptions())},e.prototype.ngAfterViewInit=function(){this.availableOptions.changes.subscribe(this.setNotFoundState.bind(this))},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.writeValue=function(e){e&&(Array.isArray(e)?this.multiple?this.value=e:this.value=e[0]:this.value=e,0===this.selectedItems.length&&(Array.isArray(e)?this.selectedItems=e:this.selectedItems.push(e),this.initDropdownValuesAndOptions()))},e.prototype.setNotFoundState=function(){0===this.availableOptions.length?this.showNotFound=!0:this.showNotFound=!1,this.cdref.detectChanges()},e.prototype.ngOnChanges=function(e){this.selectedItems=[],this.searchText=null,this.options=this.options||[],e.options&&(this.availableItems=this.options.sort(this.config.customComparator).slice()),e.value&&JSON.stringify(e.value.currentValue)===JSON.stringify([])&&(this.availableItems=this.options.sort(this.config.customComparator).slice()),this.initDropdownValuesAndOptions()},e.prototype.deselectItem=function(e,t){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort(this.config.customComparator)),this.selectedItems=this.selectedItems.slice(),this.availableItems=this.availableItems.slice(),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=this.selectedItems.slice(),this.availableItems=this.availableItems.slice(),this.selectedItems.sort(this.config.customComparator),this.availableItems.sort(this.config.customComparator),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.valueChanged=function(){this.writeValue(this.selectedItems),this.change.emit({value:this.value}),this.setSelectedDisplayText()},e.prototype.toggleSelectDropdown=function(){this.toggleDropdown=!this.toggleDropdown,this.toggleDropdown?this.open.emit():this.close.emit(),this.resetArrowKeyActiveElement()},e.prototype.initDropdownValuesAndOptions=function(){var e=this,t={displayKey:"description",height:"auto",search:!1,placeholder:"Select",searchPlaceholder:"Search",limitTo:this.options.length,customComparator:void 0,noResultsFound:"No results found!",moreText:"more",searchOnKey:null};"undefined"!==this.config&&0!==Object.keys(this.config).length||(this.config=o({},t));for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];this.config[r]=this.config[r]?this.config[r]:t[r]}this.selectedDisplayText=this.config.placeholder,""!==this.value&&void 0!==this.value&&(Array.isArray(this.value)?this.selectedItems=this.value:this.selectedItems[0]=this.value,this.selectedItems.forEach(function(t){var n=e.availableItems.findIndex(function(e){return JSON.stringify(t)===JSON.stringify(e)});-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)+" "+this.config.moreText:this.selectedDisplayText=0===this.selectedItems.length?this.config.placeholder: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},i([s.Input(),r("design:type",Object)],e.prototype,"_value",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"options",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"config",void 0),i([s.Input(),r("design:type",Boolean)],e.prototype,"multiple",void 0),i([s.Input(),r("design:type",Boolean)],e.prototype,"disabled",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"change",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"open",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"close",void 0),i([s.ViewChildren("availableOption"),r("design:type",s.QueryList)],e.prototype,"availableOptions",void 0),i([s.HostListener("click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickInsideComponent",null),i([s.HostListener("document:click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickOutsideComponent",null),i([s.HostListener("document:keydown"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"KeyPressOutsideComponent",null),i([s.HostListener("keydown",["$event"]),r("design:type",Function),r("design:paramtypes",[KeyboardEvent]),r("design:returntype",void 0)],e.prototype,"handleKeyboardEvent",null),e=t=i([s.Component({selector:"ngx-select-dropdown",template:n(6),styles:[n(7)],providers:[{provide:a.NG_VALUE_ACCESSOR,useExisting:s.forwardRef(function(){return t}),multi:!0}]}),r("design:paramtypes",[s.ChangeDetectorRef,s.ElementRef])],e);var t}();t.SelectDropDownComponent=l},function(e,n){e.exports=t},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(4);t.SelectDropDownComponent=o.SelectDropDownComponent;var i=n(10);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(5))},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(1))},function(e,t){e.exports='<div class="ngx-dropdown-container" tabindex="0">\r\n    <button type="button" class="ngx-dropdown-button" [ngClass]="{\'disabled\':disabled}" [disabled]="disabled" (click)="toggleSelectDropdown()">\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" [style.maxHeight]="config.height">\r\n        <div class="search-container" *ngIf="config.search">\r\n            <input name="search" [(ngModel)]="searchText" />\r\n            <label [ngClass]="{\'active\': searchText}">\r\n                <span class="nsdicon-search"></span> {{config.searchPlaceholder}}</label>\r\n        </div>\r\n        <ul class="selected-items">\r\n            <li tabindex="-1" *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i)">\r\n                <span class="nsdicon-close"></span>\r\n                <span> {{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 #availableOption *ngFor="let item of availableItems| filterBy: searchText : config.searchOnKey | limitTo : config.limitTo;let i = index"\r\n                tabindex="-1" [ngClass]="{\'active\': focusedItemIndex == i}" (click)="selectItem(item,i)">\r\n                {{item[config.displayKey] || item}}</li>\r\n            <li *ngIf="showNotFound">{{config.noResultsFound}}</li>\r\n        </ul>\r\n    </div>\r\n</div>'},function(e,t,n){var o=n(8);e.exports="string"==typeof o?o:o.toString()},function(e,t,n){t=e.exports=n(9)(!1),t.push([e.i,".ngx-dropdown-container {\n  width: 100%;\n  position: relative; }\n  .ngx-dropdown-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-dropdown-container button span {\n      vertical-align: middle;\n      float: left; }\n    .ngx-dropdown-container button .nsdicon-angle-down {\n      position: relative;\n      font-size: large;\n      float: right; }\n  .ngx-dropdown-container .ngx-dropdown-button {\n    width: 100%;\n    min-height: 30px;\n    padding: 5px 10px 5px 10px;\n    background-color: white; }\n  .ngx-dropdown-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    overflow-y: auto; }\n    .ngx-dropdown-container .ngx-dropdown-list-container .search-container {\n      position: relative;\n      padding-top: 10px;\n      margin-top: 5px; }\n      .ngx-dropdown-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-dropdown-container .ngx-dropdown-list-container .search-container input:focus {\n          border-bottom: 1px solid #26a69a; }\n        .ngx-dropdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n      .ngx-dropdown-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-dropdown-container .ngx-dropdown-list-container .search-container label.active {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n    .ngx-dropdown-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-dropdown-container .ngx-dropdown-list-container ul.selected-items li {\n        background-color: #337ab7;\n        color: white;\n        margin-bottom: 2px; }\n      .ngx-dropdown-container .ngx-dropdown-list-container ul.available-items li.active {\n        background-color: #337ab7;\n        color: #ffff; }\n      .ngx-dropdown-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-dropdown-container .disabled {\n    pointer-events: none;\n    background-color: #e9ecef;\n    opacity: 1;\n    cursor: no-drop; }\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(11),r=n(12),s=n(0),a=n(13),l=n(2),c=n(1),d=function(){function e(){}return e=o([s.NgModule({declarations:[c.SelectDropDownComponent,r.LimitToPipe,i.ArrayFilterPipe],imports:[a.CommonModule,l.FormsModule],exports:[c.SelectDropDownComponent,r.LimitToPipe],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=d},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(0),r=function(){function e(){}return e.prototype.transform=function(e,t,n){return e&&t&&Array.isArray(e)?"string"==typeof e[0]?e.filter(function(e){return e.toLowerCase().indexOf(t.toLowerCase())>-1}):n?e.filter(function(e){return"object"!=typeof e[n]&&e[n].toString().toLowerCase().indexOf(t.toLowerCase())>-1}):e.filter(function(e){for(var n in e)if("object"!=typeof e[n]&&e[n].toString().toLowerCase().indexOf(t.toLowerCase())>-1)return!0;return!1}):e},e=o([i.Pipe({name:"filterBy"})],e)}();t.ArrayFilterPipe=r},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(0),r=function(){function e(){}return e.prototype.transform=function(e,t,n){return void 0===n&&(n=0),Array.isArray(e)?e.slice(n,n+t):e},e=o([i.Pipe({name:"limitTo"})],e)}();t.LimitToPipe=r},function(e,t){e.exports=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/forms","@angular/common"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/forms"),require("@angular/common")):e.ticktock=t(e.ng.core,e.ng.forms,e.ng.common)}("undefined"!=typeof self?self:this,function(e,t,n){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=3)}([function(t,n){t.exports=e},function(e,t,n){"use strict";var o=this&&this.__assign||Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++){t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},i=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},r=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 s=n(0),a=n(2),l=function(){function e(e,t){this.cdref=e,this._elementRef=t,this.options=[],this.config={},this.multiple=!1,this.change=new s.EventEmitter,this.open=new s.EventEmitter,this.close=new s.EventEmitter,this.toggleDropdown=!1,this.availableItems=[],this.selectedItems=[],this.selectedDisplayText="Select",this.clickedInside=!1,this.insideKeyPress=!1,this.focusedItemIndex=null,this.showNotFound=!1,this.onChange=function(){},this.onTouched=function(){},this.multiple=!1}return t=e,Object.defineProperty(e.prototype,"value",{get:function(){return this._value},set:function(e){this._value=e,this.onChange(e),this.onTouched()},enumerable:!0,configurable:!0}),e.prototype.clickInsideComponent=function(){this.clickedInside=!0},e.prototype.clickOutsideComponent=function(){this.clickedInside||(this.toggleDropdown=!1,this.resetArrowKeyActiveElement()),this.clickedInside=!1},e.prototype.KeyPressOutsideComponent=function(){this.insideKeyPress||(this.toggleDropdown=!1,this.resetArrowKeyActiveElement()),this.insideKeyPress=!1},e.prototype.handleKeyboardEvent=function(e){if(this.insideKeyPress=!0,27===e.keyCode||this.disabled)return this.toggleDropdown=!1,void(this.insideKeyPress=!1);var t=this.availableOptions.toArray();return 0!==t.length||this.toggleDropdown||(this.toggleDropdown=!0),40===e.keyCode&&t.length>0&&(this.onArrowKeyDown(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),38===e.keyCode&&t.length&&(this.onArrowKeyUp(),t[this.focusedItemIndex].nativeElement.focus(),e.preventDefault()),13===e.keyCode&&null!==this.focusedItemIndex?(this.selectItem(this.availableItems[this.focusedItemIndex],this.focusedItemIndex),!1):void 0},e.prototype.ngOnInit=function(){void 0!==this.options&&Array.isArray(this.options)&&(this.availableItems=this.options.sort(this.config.customComparator).slice(),this.initDropdownValuesAndOptions())},e.prototype.ngAfterViewInit=function(){this.availableOptions.changes.subscribe(this.setNotFoundState.bind(this))},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.writeValue=function(e){e&&(Array.isArray(e)?this.multiple?this.value=e:this.value=e[0]:this.value=e,0===this.selectedItems.length&&(Array.isArray(e)?this.selectedItems=e:this.selectedItems.push(e),this.initDropdownValuesAndOptions()))},e.prototype.setNotFoundState=function(){0===this.availableOptions.length?this.showNotFound=!0:this.showNotFound=!1,this.cdref.detectChanges()},e.prototype.ngOnChanges=function(e){this.selectedItems=[],this.searchText=null,this.options=this.options||[],e.options&&(this.availableItems=this.options.sort(this.config.customComparator).slice()),e.value&&JSON.stringify(e.value.currentValue)===JSON.stringify([])&&(this.availableItems=this.options.sort(this.config.customComparator).slice()),this.initDropdownValuesAndOptions()},e.prototype.deselectItem=function(e,t){this.selectedItems.splice(t,1),this.availableItems.includes(e)||(this.availableItems.push(e),this.availableItems.sort(this.config.customComparator)),this.selectedItems=this.selectedItems.slice(),this.availableItems=this.availableItems.slice(),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=this.selectedItems.slice(),this.availableItems=this.availableItems.slice(),this.selectedItems.sort(this.config.customComparator),this.availableItems.sort(this.config.customComparator),this.valueChanged(),this.resetArrowKeyActiveElement()},e.prototype.valueChanged=function(){this.writeValue(this.selectedItems),this.change.emit({value:this.value}),this.setSelectedDisplayText()},e.prototype.toggleSelectDropdown=function(){this.toggleDropdown=!this.toggleDropdown,this.toggleDropdown?this.open.emit():this.close.emit(),this.resetArrowKeyActiveElement()},e.prototype.initDropdownValuesAndOptions=function(){var e=this,t={displayKey:"description",height:"auto",search:!1,placeholder:"Select",searchPlaceholder:"Search",limitTo:this.options.length,customComparator:void 0,noResultsFound:"No results found!",moreText:"more",searchOnKey:null};"undefined"!==this.config&&0!==Object.keys(this.config).length||(this.config=o({},t));for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];this.config[r]=this.config[r]?this.config[r]:t[r]}this.selectedDisplayText=this.config.placeholder,""!==this.value&&void 0!==this.value&&(Array.isArray(this.value)?this.selectedItems=this.value:this.selectedItems[0]=this.value,this.selectedItems.forEach(function(t){var n=e.availableItems.findIndex(function(e){return JSON.stringify(t)===JSON.stringify(e)});-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)+" "+this.config.moreText:this.selectedDisplayText=0===this.selectedItems.length?this.config.placeholder: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},i([s.Input(),r("design:type",Object)],e.prototype,"_value",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"options",void 0),i([s.Input(),r("design:type",Object)],e.prototype,"config",void 0),i([s.Input(),r("design:type",Boolean)],e.prototype,"multiple",void 0),i([s.Input(),r("design:type",Boolean)],e.prototype,"disabled",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"change",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"open",void 0),i([s.Output(),r("design:type",s.EventEmitter)],e.prototype,"close",void 0),i([s.ViewChildren("availableOption"),r("design:type",s.QueryList)],e.prototype,"availableOptions",void 0),i([s.HostListener("click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickInsideComponent",null),i([s.HostListener("document:click"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"clickOutsideComponent",null),i([s.HostListener("document:keydown"),r("design:type",Function),r("design:paramtypes",[]),r("design:returntype",void 0)],e.prototype,"KeyPressOutsideComponent",null),i([s.HostListener("keydown",["$event"]),r("design:type",Function),r("design:paramtypes",[KeyboardEvent]),r("design:returntype",void 0)],e.prototype,"handleKeyboardEvent",null),e=t=i([s.Component({selector:"ngx-select-dropdown",template:n(6),styles:[n(7)],providers:[{provide:a.NG_VALUE_ACCESSOR,useExisting:s.forwardRef(function(){return t}),multi:!0}]}),r("design:paramtypes",[s.ChangeDetectorRef,s.ElementRef])],e);var t}();t.SelectDropDownComponent=l},function(e,n){e.exports=t},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(4);t.SelectDropDownComponent=o.SelectDropDownComponent;var i=n(10);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(5))},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(1))},function(e,t){e.exports='<div class="ngx-dropdown-container" tabindex="0">\r\n    <button type="button" class="ngx-dropdown-button" [ngClass]="{\'disabled\':disabled}" [disabled]="disabled" (click)="toggleSelectDropdown()">\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" [style.maxHeight]="config.height">\r\n        <div class="search-container" *ngIf="config.search">\r\n            <input name="search" [(ngModel)]="searchText" />\r\n            <label [ngClass]="{\'active\': searchText}">\r\n                <span class="nsdicon-search"></span> {{config.searchPlaceholder}}</label>\r\n        </div>\r\n        <ul class="selected-items">\r\n            <li tabindex="-1" *ngFor="let selected of selectedItems;let i = index" (click)="deselectItem(selected,i)">\r\n                <span class="nsdicon-close"></span>\r\n                <span> {{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 #availableOption *ngFor="let item of availableItems| filterBy: searchText : config.searchOnKey | limitTo : config.limitTo;let i = index"\r\n                tabindex="-1" [ngClass]="{\'active\': focusedItemIndex == i}" (click)="selectItem(item,i)">\r\n                {{item[config.displayKey] || item}}</li>\r\n            <li *ngIf="showNotFound">{{config.noResultsFound}}</li>\r\n        </ul>\r\n    </div>\r\n</div>'},function(e,t,n){var o=n(8);e.exports="string"==typeof o?o:o.toString()},function(e,t,n){t=e.exports=n(9)(!1),t.push([e.i,".ngx-dropdown-container {\n  width: 100%;\n  position: relative; }\n  .ngx-dropdown-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-dropdown-container button span {\n      vertical-align: middle;\n      float: left; }\n    .ngx-dropdown-container button .nsdicon-angle-down {\n      position: relative;\n      font-size: large;\n      float: right; }\n  .ngx-dropdown-container .ngx-dropdown-button {\n    width: 100%;\n    min-height: 30px;\n    padding: 5px 10px 5px 10px;\n    background-color: white; }\n  .ngx-dropdown-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    overflow-y: auto; }\n    .ngx-dropdown-container .ngx-dropdown-list-container .search-container {\n      position: relative;\n      padding-top: 10px;\n      margin-top: 5px; }\n      .ngx-dropdown-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-dropdown-container .ngx-dropdown-list-container .search-container input:focus {\n          border-bottom: 1px solid #26a69a; }\n        .ngx-dropdown-container .ngx-dropdown-list-container .search-container input:focus + label {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n      .ngx-dropdown-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-dropdown-container .ngx-dropdown-list-container .search-container label.active {\n          transform: translateY(-2px) scale(0.8);\n          transform-origin: 0 0; }\n    .ngx-dropdown-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-dropdown-container .ngx-dropdown-list-container ul.selected-items li {\n        background-color: #337ab7;\n        color: white;\n        margin-bottom: 2px; }\n      .ngx-dropdown-container .ngx-dropdown-list-container ul.available-items li.active {\n        background-color: #337ab7;\n        color: #ffff; }\n      .ngx-dropdown-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-dropdown-container .disabled {\n    pointer-events: none;\n    background-color: #e9ecef;\n    opacity: 1;\n    cursor: no-drop; }\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(11),r=n(12),s=n(0),a=n(13),l=n(2),c=n(1),d=function(){function e(){}return e=o([s.NgModule({declarations:[c.SelectDropDownComponent,r.LimitToPipe,i.ArrayFilterPipe],imports:[a.CommonModule,l.FormsModule],exports:[c.SelectDropDownComponent,r.LimitToPipe],providers:[],bootstrap:[]})],e)}();t.SelectDropDownModule=d},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(0),r=function(){function e(){}return e.prototype.transform=function(e,t,n){return e&&t&&Array.isArray(e)?"string"==typeof e[0]?e.filter(function(e){return e.toLowerCase().indexOf(t.toLowerCase())>-1}):n?e.filter(function(e){return"object"!=typeof e[n]&&e[n].toString().toLowerCase().indexOf(t.toLowerCase())>-1}):e.filter(function(e){for(var n in e)if("object"!=typeof e[n]&&e[n].toString().toLowerCase().indexOf(t.toLowerCase())>-1)return!0;return!1}):e},e=o([i.Pipe({name:"filterBy"})],e)}();t.ArrayFilterPipe=r},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(0),r=function(){function e(){}return e.prototype.transform=function(e,t,n){return void 0===n&&(n=0),Array.isArray(e)?e.slice(n,n+t):e},e=o([i.Pipe({name:"limitTo"})],e)}();t.LimitToPipe=r},function(e,t){e.exports=n}])});
 //# sourceMappingURL=index.umd.min.js.map

package.json

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

README.md

@@ -10,5 +10,2 @@ # ngx-select-dropdown
 [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/manishjanky/ngx-select-dropdown.svg)]()
-[![GitHub issues](https://img.shields.io/github/issues/manishjanky/ngx-select-dropdown.svg)]()
-[![GitHub closed issues](https://img.shields.io/github/issues-closed/manishjanky/ngx-select-dropdown.svg)]()
-[![GitHub contributors](https://img.shields.io/github/contributors/manishjanky/ngx-select-dropdown.svg)]()
 
@@ -24,2 +21,5 @@ `ngx-select-dropdown` Custom Dropdown component for Angular 4+ with multiple and single selection options
 * custom sort 
+* angular forms support
+* angular v4 and above supported
+* cross browser support
 
@@ -65,4 +65,8 @@
 ````
-<ngx-select-dropdown (change)="selectionChanged($event)" [multiple]="true" [(value)]="dataModel" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>
+<ngx-select-dropdown (change)="selectionChanged($event)" [multiple]="true" [(ngModel)]="dataModel" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>
 ````
+* use with reactive form like
+````
+<ngx-select-dropdown (change)="selectionChanged($event)" formControlName="selectData" [multiple]="true" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>
+````
 
@@ -98,2 +102,23 @@ ## Config
 
+### Change detection
+
+As of now `ngx-select-dropdown` uses Default change detection startegy which means dirty checking checks for immutable data types. And in Javascript Objects and arrays are mutable. So when changing any of the @Input parameters if you mutate an object change detection will not detect it. For ex:-
+````
+this.options.push({id: 34, description: 'Adding new item'});
+
+// or
+
+config.height = '200px';
+
+`````
+Both the above scenarios will not trigger the change detection. In order for the componet to detect the changes what you need to do is:-
+````
+this.options = [...this.options, {id: 34, description: 'Adding new item'}];
+
+// or
+
+config = {...config, height:'200px'};
+
+````
+
 ## Changelog
@@ -100,0 +125,0 @@ * v0.1.0

No alert changes

Improved metrics

Total package byte prevSize

279773

increased by0.21%

Lines of code

1799

increased by0.22%

Number of lines in readme file

185

increased by15.63%

No dependency changes