{"_id":"@bsaranga/ng-multiselect-dropdown","_rev":"16-86944b8af46b40f75e3013e2f5cb6bbc","time":{"created":"2023-07-10T06:16:03.927Z","0.3.9-mod":"2023-07-07T07:36:50.563Z","modified":"2023-07-10T06:21:50.493Z","0.3.0":"2023-07-07T10:22:41.343Z","0.3.1":"2023-07-07T10:54:12.413Z","0.3.2":"2023-07-10T01:55:19.649Z","0.3.3":"2023-07-10T02:17:23.301Z","0.3.4":"2023-07-10T05:58:56.088Z","0.3.5":"2023-07-10T06:16:04.184Z","0.3.6":"2023-07-10T06:21:50.372Z"},"name":"@bsaranga/ng-multiselect-dropdown","dist-tags":{"latest":"0.3.6"},"versions":{"0.3.5":{"name":"@bsaranga/ng-multiselect-dropdown","version":"0.3.5","private":false,"description":"Angular Multi-Select Dropdown Modified","author":{"name":"Nilesh Patel"},"contributors":[{"name":"Buwaneka Saranga"}],"license":"MIT","scripts":{"ng":"ng","start":"ng serve --port 4201","build":"ng build","ng:test":"ng test","lint":"ng lint","test":"jest --watch","test:ci":"jest --runInBand","test:coverage":"jest --coverage","build:prod":"ng build --prod","prepublish":"tsc"},"keywords":["angular4","angular8","angular multiselect dropdown","angular4 multiselect dropdown","angular8 multiselect dropdown","ng multiselect dropdown","ng4 multiselect dropdown","ng8 multiselect dropdown"],"repository":{"type":"git","url":"git+https://github.com/bsaranga/ng-multiselect-dropdown.git"},"bugs":{"url":"https://github.com/nileshpatel17/ng-multiselect-dropdown/issues"},"homepage":"https://github.com/nileshpatel17/ng-multiselect-dropdown#readme","peerDependencies":{"@angular/common":">=2.0.0","@angular/core":">=2.0.0"},"devDependencies":{"@angular-devkit/build-angular":"~0.802.2","@angular/animations":"8.2.2","@angular/cli":"^8.2.2","@angular/common":"8.2.2","@angular/compiler":"8.2.2","@angular/compiler-cli":"8.2.2","@angular/core":"8.2.2","@angular/forms":"8.2.2","@angular/http":"7.2.15","@angular/language-service":"8.2.2","@angular/platform-browser":"8.2.2","@angular/platform-browser-dynamic":"8.2.2","@angular/router":"8.2.2","@types/jasmine":"~3.4.0","@types/jasminewd2":"~2.0.2","@types/node":"~12.7.2","angular-cli-ghpages":"^0.6.0-rc.2","angular2-markdown":"^2.2.3","codelyzer":"~5.1.0","copyfiles":"^2.0.0","core-js":"^3.2.1","jasmine-core":"~3.4.0","jasmine-spec-reporter":"~4.2.1","jest":"^24.9.0","jest-preset-angular":"^7.1.1","karma":"~4.2.0","karma-chrome-launcher":"~3.1.0","karma-cli":"~2.0.0","karma-coverage-istanbul-reporter":"^2.1.0","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.2","ng-multiselect-dropdown":"^0.2.11","ng-packagr":"^11.0.3","ngx-bootstrap":"^5.1.1","protractor":"~5.4.2","rimraf":"^3.0.0","rxjs":"^6.2.1","rxjs-compat":"^6.2.1","ts-node":"~8.3.0","tslint":"~5.19.0","typescript":"^4.4.2","zone.js":"^0.10.2"},"gitHead":"bc61541b65176e16e7203deaf81e9bc9f0dbc697","_id":"@bsaranga/ng-multiselect-dropdown@0.3.5","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-CWHVIOzS2Kpu6zPQwP6xFSnVhWuM52VBVaI+42r1MU5A31ZIFG5WuPxxZuSRNmzg7EBEKA1VFTXouNYGp5gWcQ==","shasum":"6601faadf05407853a6037124a8f304725981d94","tarball":"https://registry.npmjs.org/@bsaranga/ng-multiselect-dropdown/-/ng-multiselect-dropdown-0.3.5.tgz","fileCount":3,"unpackedSize":19822,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3Sxp37zmNrVSaprY0uQvlYyEMOkFKCU58BEchnLdEpAiBEfpArB/yFLQ5jvnGD+MSAxxCbUsFkzxoMRrOfZfFdnQ=="}]},"_npmUser":{"name":"bsaranga","email":"bsaranga@gmail.com"},"directories":{},"maintainers":[{"name":"bsaranga","email":"bsaranga@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-multiselect-dropdown_0.3.5_1688969764023_0.14135900197272"},"_hasShrinkwrap":false},"0.3.6":{"name":"@bsaranga/ng-multiselect-dropdown","version":"0.3.6","private":false,"description":"Angular Multi-Select Dropdown Modified","author":{"name":"Nilesh Patel"},"contributors":[{"name":"Buwaneka Saranga"}],"license":"MIT","scripts":{"ng":"ng","start":"ng serve --port 4201","build":"ng build","ng:test":"ng test","lint":"ng lint","test":"jest --watch","test:ci":"jest --runInBand","test:coverage":"jest --coverage","build:prod":"ng build --prod","prepublish":"tsc"},"keywords":["angular4","angular8","angular multiselect dropdown","angular4 multiselect dropdown","angular8 multiselect dropdown","ng multiselect dropdown","ng4 multiselect dropdown","ng8 multiselect dropdown"],"repository":{"type":"git","url":"git+https://github.com/bsaranga/ng-multiselect-dropdown.git"},"bugs":{"url":"https://github.com/nileshpatel17/ng-multiselect-dropdown/issues"},"homepage":"https://github.com/nileshpatel17/ng-multiselect-dropdown#readme","peerDependencies":{"@angular/common":">=2.0.0","@angular/core":">=2.0.0"},"devDependencies":{"@angular-devkit/build-angular":"~0.802.2","@angular/animations":"8.2.2","@angular/cli":"^8.2.2","@angular/common":"8.2.2","@angular/compiler":"8.2.2","@angular/compiler-cli":"8.2.2","@angular/core":"8.2.2","@angular/forms":"8.2.2","@angular/http":"7.2.15","@angular/language-service":"8.2.2","@angular/platform-browser":"8.2.2","@angular/platform-browser-dynamic":"8.2.2","@angular/router":"8.2.2","@types/jasmine":"~3.4.0","@types/jasminewd2":"~2.0.2","@types/node":"~12.7.2","angular-cli-ghpages":"^0.6.0-rc.2","angular2-markdown":"^2.2.3","codelyzer":"~5.1.0","copyfiles":"^2.0.0","core-js":"^3.2.1","jasmine-core":"~3.4.0","jasmine-spec-reporter":"~4.2.1","jest":"^24.9.0","jest-preset-angular":"^7.1.1","karma":"~4.2.0","karma-chrome-launcher":"~3.1.0","karma-cli":"~2.0.0","karma-coverage-istanbul-reporter":"^2.1.0","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.2","ng-multiselect-dropdown":"^0.2.11","ng-packagr":"^11.0.3","ngx-bootstrap":"^5.1.1","protractor":"~5.4.2","rimraf":"^3.0.0","rxjs":"^6.2.1","rxjs-compat":"^6.2.1","ts-node":"~8.3.0","tslint":"~5.19.0","typescript":"^4.4.2","zone.js":"^0.10.2"},"gitHead":"bc61541b65176e16e7203deaf81e9bc9f0dbc697","_id":"@bsaranga/ng-multiselect-dropdown@0.3.6","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-hk6FzGNw2FPOIUDh3qj0ZCI0BEqWVGuPa5+YjrMGt3eHv9+RXI8Nm7sosLxzP+oMcWt9Df1akziQ7aibTfIKlg==","shasum":"b16f10d8ee01afab6446ed610a43c8afbc8e0102","tarball":"https://registry.npmjs.org/@bsaranga/ng-multiselect-dropdown/-/ng-multiselect-dropdown-0.3.6.tgz","fileCount":24,"unpackedSize":64079,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF85IRjG4v2DjeTuYGqRIS3H5PrGJ3eyYp9rp842Bm5FAiEAn6FAd+00FtT87nMoD1SipDTyz15Hvxt+2j+f0Qyn4AM="}]},"_npmUser":{"name":"bsaranga","email":"bsaranga@gmail.com"},"directories":{},"maintainers":[{"name":"bsaranga","email":"bsaranga@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-multiselect-dropdown_0.3.6_1688970110045_0.16990696655408555"},"_hasShrinkwrap":false}},"maintainers":[{"name":"bsaranga","email":"bsaranga@gmail.com"}],"description":"Angular Multi-Select Dropdown Modified","homepage":"https://github.com/nileshpatel17/ng-multiselect-dropdown#readme","keywords":["angular4","angular8","angular multiselect dropdown","angular4 multiselect dropdown","angular8 multiselect dropdown","ng multiselect dropdown","ng4 multiselect dropdown","ng8 multiselect dropdown"],"repository":{"type":"git","url":"git+https://github.com/bsaranga/ng-multiselect-dropdown.git"},"contributors":[{"name":"Buwaneka Saranga"}],"author":{"name":"Nilesh Patel"},"bugs":{"url":"https://github.com/nileshpatel17/ng-multiselect-dropdown/issues"},"license":"MIT","readme":"# Angular Multiselect Dropdown\r\n<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->\r\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)\r\n<!-- ALL-CONTRIBUTORS-BADGE:END -->\r\n\r\n[![npm version](https://img.shields.io/npm/v/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\r\n[![downloads](https://img.shields.io/npm/dt/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\r\n[![downloads](https://img.shields.io/npm/dm/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\r\n\r\nAngular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.\r\n\r\n# [Demo](https://nileshpatel17.github.io/ng-multiselect-dropdown/)\r\n\r\n![demo](Screenshots/ng-multiselect-dropdown_v0.1.6.gif)\r\n\r\n## Getting Started\r\n\r\n## Features\r\n\r\n- dropdown with single/multiple selction option\r\n- bind to any custom data source\r\n- search item with custom placeholder text\r\n- limit selection\r\n- select/de-select all items\r\n- custom theme\r\n\r\n### Installation\r\n\r\n```\r\nnpm install ng-multiselect-dropdown\r\n```\r\n\r\nAnd then include it in your module (see [app.module.ts](https://github.com/NileshPatel17/ng-multiselect-dropdown/blob/master/src/app/app.module.ts)):\r\n\r\n```ts\r\nimport { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';\r\n// ...\r\n\r\n@NgModule({\r\n  imports: [\r\n    NgMultiSelectDropDownModule.forRoot()\r\n    // ...\r\n  ]\r\n  // ...\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n### Usage\r\n\r\n```ts\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\r\n\r\nexport class AppComponent implements OnInit {\r\n  dropdownList = [];\r\n  selectedItems = [];\r\n  dropdownSettings = {};\r\n  ngOnInit() {\r\n    this.dropdownList = [\r\n      { item_id: 1, item_text: 'Mumbai' },\r\n      { item_id: 2, item_text: 'Bangaluru' },\r\n      { item_id: 3, item_text: 'Pune' },\r\n      { item_id: 4, item_text: 'Navsari' },\r\n      { item_id: 5, item_text: 'New Delhi' }\r\n    ];\r\n    this.selectedItems = [\r\n      { item_id: 3, item_text: 'Pune' },\r\n      { item_id: 4, item_text: 'Navsari' }\r\n    ];\r\n    this.dropdownSettings:IDropdownSettings = {\r\n      singleSelection: false,\r\n      idField: 'item_id',\r\n      textField: 'item_text',\r\n      selectAllText: 'Select All',\r\n      unSelectAllText: 'UnSelect All',\r\n      itemsShowLimit: 3,\r\n      allowSearchFilter: true\r\n    };\r\n  }\r\n  onItemSelect(item: any) {\r\n    console.log(item);\r\n  }\r\n  onSelectAll(items: any) {\r\n    console.log(items);\r\n  }\r\n}\r\n```\r\n\r\n```html\r\n<ng-multiselect-dropdown\r\n  [placeholder]=\"'custom placeholder'\"\r\n  [data]=\"dropdownList\"\r\n  [(ngModel)]=\"selectedItems\"\r\n  [settings]=\"dropdownSettings\"\r\n  (onSelect)=\"onItemSelect($event)\"\r\n  (onSelectAll)=\"onSelectAll($event)\"\r\n>\r\n</ng-multiselect-dropdown>\r\n```\r\n\r\n### Settings\r\n\r\n| Setting                        | Type       | Description                                                                                                                                                                                                                                                                                                                                              | Default Value       |\r\n| :----------------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ |\r\n| singleSelection                | Boolean    | Mode of this component. If set `true` user can select more than one option.                                                                                                                                                                                                                                                                              | false               |\r\n| placeholder                    | String     | Text to be show in the dropdown, when no items are selected.                                                                                                                                                                                                                                                                                             | 'Select'            |\r\n| disabled                       | Boolean    | Disable the dropdown                                                                                                                                                                                                                                                                                                                                     | false               |\r\n| data                           | Array<any> | Array of items from which to select. Should be an array of objects with id and `text` properties. You can also use custom properties. In that case you need to map idField and `textField` properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text(no mapping is required) | n/a                 |\r\n| idField                        | String     | map id field in case of custom array of object                                                                                                                                                                                                                                                                                                           | 'id'                |\r\n| textField                      | String     | map text field in case of custom array of object                                                                                                                                                                                                                                                                                                         | 'text'              |\r\n| enableCheckAll                 | Boolean    | Enable the option to select all items in list                                                                                                                                                                                                                                                                                                            | false               |\r\n| selectAllText                  | String     | Text to display as the label of select all option                                                                                                                                                                                                                                                                                                        | Select All          |\r\n| unSelectAllText                | String     | Text to display as the label of unSelect option                                                                                                                                                                                                                                                                                                          | UnSelect All        |\r\n| allowSearchFilter              | Boolean    | Enable filter option for the list.                                                                                                                                                                                                                                                                                                                       | false               |\r\n| searchPlaceholderText          | String     | custom search placeholder                                                                                                                                                                                                                                                                                                                                | Search              |\r\n| clearSearchFilter              | Boolean    | clear search filter on dropdown close                                                                                                                                                                                                                                                                                                                    | true                |\r\n| maxHeight                      | Number     | Set maximum height of the dropdown list in px.                                                                                                                                                                                                                                                                                                           | 197                 |\r\n| itemsShowLimit                 | Number     | Limit the number of items to show in the input field. If not set will show all selected.                                                                                                                                                                                                                                                                 | All                 |\r\n| limitSelection                 | Number     | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled.                                                                                                                                                                                                                            | none                |\r\n| searchPlaceholderText          | String     | Custom text for the search placeholder text. Default value would be 'Search'                                                                                                                                                                                                                                                                             | 'Search'            |\r\n| noDataAvailablePlaceholderText | String     | Custom text when no data is available.                                                                                                                                                                                                                                                                                                                   | 'No data available' |\r\n| closeDropDownOnSelection       | Boolean    | Closes the dropdown when item is selected. applicable only in cas of single selection                                                                                                                                                                                                                                                                    | false               |\r\n| defaultOpen                    | Boolean    | open state of dropdown                                                                                                                                                                                                                                                                                                                                   | false               |\r\n| allowRemoteDataSearch                    | Boolean    | allow search remote api if no data is present.                                                                                                                                                                                                                                                                                                                                   | false               |\r\n\r\n\r\n### Callback Methods\r\n\r\n- `onSelect` - Return the selected item when an item is checked.\r\n  Example : (onSelect)=\"onItemSelect($event)\"\r\n- `onSelectAll` - Return the all items.\r\n  Example : (onSelectAll)=\"onSelectAll($event)\".\r\n- `onDeSelect` - Return the unselected item when an item is unchecked.\r\n  Example : (onDeSelect)=\"onItemDeSelect($event)\"\r\n- `onFilterChange` - Return the key press.\r\n  Example : (onFilterChange)=\"onFilterChange($event)\"\r\n- `onDropDownClose`-\r\n  Example : (onDropDownClose)=\"onDropDownClose()\"\r\n\r\n\r\n### Custom Theme\r\n\r\n- The component package has a themes folder in node_modules at `ng-multiselet-dropdown\\themes\\ng-multiselect-dropdown.theme.scss`\r\n- Include the `ng-multiselet-dropdown.theme.css` in `angular-cli.json` (for versions below angular 6) and `angular.json` (for version 6 or more).\r\n- [Refer this file](https://github.com/NileshPatel17/ng-multiselect-dropdown/blob/master/custom-theme.md) on how to add the css file to your angular project.\r\n<img src=\"Screenshots/theme-step-3.png\" width=\"800\">\r\n<!-- ![](Screenshots/theme-step-3.png) -->\r\n\r\n## Custom Template(in beta):\r\n\r\n### Variables can be used in template\r\n\r\n1. id: return id as number\r\n2. option: return option text. return string\r\n3. isSelected: determine if item is selected or not. returns boolean\r\n\r\nTemplate for each item\r\n```\r\n<ng-template #optionsTemplate let-item let-option=\"option\" let-id=\"id\" let-isSelected=\"isSelected\">\r\n  {{option}}\r\n</ng-template>\r\n```\r\n\r\nTemplate for selected item\r\n```\r\n<ng-template #optionSelectedTemplate optionSelectedTemplate let-option=\"option\"  let-id=\"id\">\r\n  {{option}}\r\n</ng-template>\r\n```\r\n\r\n[Demo](https://codesandbox.io/s/custom-template-uyo0o?file=/src/app/app.component.html)\r\n### Run locally\r\n\r\n- Clone the repository or downlod the .zip,.tar files.\r\n- Run `npm install`\r\n- Run `ng serve` for a dev server\r\n- Navigate to `http://localhost:4200/`\r\n\r\n### Library Build / NPM Package\r\n\r\nRun `yarn build:lib` to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.\r\n\r\n## Running unit tests\r\n\r\nRun `yarn test` to execute the unit tests.\r\n\r\n## Development\r\n\r\nThis project was generated with Angular CLI version 1.7.1.\r\n\r\n## Contributions\r\n\r\nContributions are welcome, please open an issue and preferrably file a pull request.\r\n\r\n### Opening Issue\r\n\r\nPlease share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.\r\n\r\n## License\r\n\r\nMIT License.\r\n\r\n## Contributors ✨\r\n\r\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\r\n\r\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\r\n<!-- prettier-ignore-start -->\r\n<!-- markdownlint-disable -->\r\n<table>\r\n  <tr>\r\n    <td align=\"center\"><a href=\"http://blog.techotom.com\"><img src=\"https://avatars0.githubusercontent.com/u/1773838?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Tom Saleeba</b></sub></a><br /><a href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=tomsaleeba\" title=\"Code\">💻</a></td>\r\n    <td align=\"center\"><a href=\"https://overtrack.gg\"><img src=\"https://avatars0.githubusercontent.com/u/2515062?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Pinfold</b></sub></a><br /><a href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=synap5e\" title=\"Code\">💻</a></td>\r\n    <td align=\"center\"><a href=\"http://helpfordeveloper.blogspot.in\"><img src=\"https://avatars0.githubusercontent.com/u/32981723?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Sushil Suthar</b></sub></a><br /><a href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=sushil-suthar\" title=\"Code\">💻</a></td>\r\n    <td align=\"center\"><a href=\"http://sacgro.com\"><img src=\"https://avatars1.githubusercontent.com/u/1292182?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Sachin Grover</b></sub></a><br /><a href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=sacgrover\" title=\"Code\">💻</a></td>\r\n    <td align=\"center\"><a href=\"https://github.com/WWL-MikeRoberts\"><img src=\"https://avatars3.githubusercontent.com/u/9750056?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Mike Roberts</b></sub></a><br /><a href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=WWL-MikeRoberts\" title=\"Code\">💻</a></td>\r\n    <td align=\"center\"><a href=\"https://github.com/DsosaV\"><img src=\"https://avatars2.githubusercontent.com/u/3926475?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>David Sosa</b></sub></a><br /><a href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=DsosaV\" title=\"Code\">💻</a></td>\r\n  </tr>\r\n</table>\r\n\r\n<!-- markdownlint-enable -->\r\n<!-- prettier-ignore-end -->\r\n<!-- ALL-CONTRIBUTORS-LIST:END -->\r\n\r\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","readmeFilename":"README.md"}