{"_id":"@bugsplat/ng-multiselect-dropdown","name":"@bugsplat/ng-multiselect-dropdown","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bugsplat/ng-multiselect-dropdown","version":"1.0.0","description":"Angular Multi-Select Dropdown","author":{"name":"Nilesh Patel"},"license":"MIT","contributers":[{"name":"Bobby Galli","email":"bobbyg603@gmail.com"}],"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/nileshpatel17/ng-multiselect-dropdown.git"},"bugs":{"url":"https://github.com/nileshpatel17/ng-multiselect-dropdown/issues"},"homepage":"https://github.com/nileshpatel17/ng-multiselect-dropdown#readme","peerDependencies":{},"dependencies":{"tslib":"^2.0.0"},"module":"fesm2015/bugsplat-ng-multiselect-dropdown.mjs","es2020":"fesm2020/bugsplat-ng-multiselect-dropdown.mjs","esm2020":"esm2020/bugsplat-ng-multiselect-dropdown.mjs","fesm2020":"fesm2020/bugsplat-ng-multiselect-dropdown.mjs","fesm2015":"fesm2015/bugsplat-ng-multiselect-dropdown.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/bugsplat-ng-multiselect-dropdown.mjs","es2020":"./fesm2020/bugsplat-ng-multiselect-dropdown.mjs","es2015":"./fesm2015/bugsplat-ng-multiselect-dropdown.mjs","node":"./fesm2015/bugsplat-ng-multiselect-dropdown.mjs","default":"./fesm2020/bugsplat-ng-multiselect-dropdown.mjs"}},"sideEffects":false,"gitHead":"86780720771cc208318179cee2f1609b5defa96d","_id":"@bugsplat/ng-multiselect-dropdown@1.0.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-ChVWIvR7KWXCIi+/CqBQ7WgDi0X6MlYpOcfZQZmXS2RJc5h+vst8C/Hsl30fWqJ3ldRdnS09BOaFn9uXstEQCQ==","shasum":"6b7a727da0747cfe1ffee43ad4ba0f73ca070787","tarball":"https://registry.npmjs.org/@bugsplat/ng-multiselect-dropdown/-/ng-multiselect-dropdown-1.0.0.tgz","fileCount":21,"unpackedSize":238222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4KUF9jHlGosf0VjmUzJ8enzkIMFBT7UE3ox2ds7cXuwIhAM3+EKJ4BBS4JDauyHGA5Pr+0xtj6eBpmiftt/wbyBvd"}]},"_npmUser":{"name":"bugsplat","email":"support@bugsplat.com"},"directories":{},"maintainers":[{"name":"bugsplat","email":"support@bugsplat.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-multiselect-dropdown_1.0.0_1696416692330_0.4700509456067379"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-04T10:51:32.254Z","1.0.0":"2023-10-04T10:51:32.485Z","modified":"2023-10-04T10:51:32.755Z"},"maintainers":[{"name":"bugsplat","email":"support@bugsplat.com"}],"description":"Angular Multi-Select Dropdown","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/nileshpatel17/ng-multiselect-dropdown.git"},"author":{"name":"Nilesh Patel"},"bugs":{"url":"https://github.com/nileshpatel17/ng-multiselect-dropdown/issues"},"license":"MIT","readme":"# Angular Multiselect Dropdown\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)\n\n\n[![npm version](https://img.shields.io/npm/v/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dt/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dm/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n\nAngular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.\n\n# [Demo](https://nileshpatel17.github.io/ng-multiselect-dropdown/)\n\n![demo](Screenshots/ng-multiselect-dropdown_v0.1.6.gif)\n\n## Getting Started\n\n## Features\n\n- dropdown with single/multiple selction option\n- bind to any custom data source\n- search item with custom placeholder text\n- limit selection\n- select/de-select all items\n- custom theme\n\n### Installation\n\n```\nnpm install ng-multiselect-dropdown\n```\n\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)):\n\n```ts\nimport { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';\n// ...\n\n@NgModule({\n imports: [\n NgMultiSelectDropDownModule.forRoot()\n // ...\n ]\n // ...\n})\nexport class AppModule {}\n```\n\n### Usage\n\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\n\nexport class AppComponent implements OnInit {\n dropdownList = [];\n selectedItems = [];\n dropdownSettings = {};\n ngOnInit() {\n this.dropdownList = [\n { item_id: 1, item_text: 'Mumbai' },\n { item_id: 2, item_text: 'Bangaluru' },\n { item_id: 3, item_text: 'Pune' },\n { item_id: 4, item_text: 'Navsari' },\n { item_id: 5, item_text: 'New Delhi' }\n ];\n this.selectedItems = [\n { item_id: 3, item_text: 'Pune' },\n { item_id: 4, item_text: 'Navsari' }\n ];\n this.dropdownSettings:IDropdownSettings = {\n singleSelection: false,\n idField: 'item_id',\n textField: 'item_text',\n selectAllText: 'Select All',\n unSelectAllText: 'UnSelect All',\n itemsShowLimit: 3,\n allowSearchFilter: true\n };\n }\n onItemSelect(item: any) {\n console.log(item);\n }\n onSelectAll(items: any) {\n console.log(items);\n }\n}\n```\n\n```html\n\n\n```\n\n### Settings\n\n| Setting | Type | Description | Default Value |\n| :----------------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ |\n| singleSelection | Boolean | Mode of this component. If set `true` user can select more than one option. | false |\n| placeholder | String | Text to be show in the dropdown, when no items are selected. | 'Select' |\n| disabled | Boolean | Disable the dropdown | false |\n| data | Array | 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 |\n| idField | String | map id field in case of custom array of object | 'id' |\n| textField | String | map text field in case of custom array of object | 'text' |\n| enableCheckAll | Boolean | Enable the option to select all items in list | false |\n| selectAllText | String | Text to display as the label of select all option | Select All |\n| unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |\n| allowSearchFilter | Boolean | Enable filter option for the list. | false |\n| searchPlaceholderText | String | custom search placeholder | Search |\n| clearSearchFilter | Boolean | clear search filter on dropdown close | true |\n| maxHeight | Number | Set maximum height of the dropdown list in px. | 197 |\n| itemsShowLimit | Number | Limit the number of items to show in the input field. If not set will show all selected. | All |\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 |\n| searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |\n| noDataAvailablePlaceholderText | String | Custom text when no data is available. | 'No data available' |\n| closeDropDownOnSelection | Boolean | Closes the dropdown when item is selected. applicable only in cas of single selection | false |\n| defaultOpen | Boolean | open state of dropdown | false |\n| allowRemoteDataSearch | Boolean | allow search remote api if no data is present. | false |\n\n\n### Callback Methods\n\n- `onSelect` - Return the selected item when an item is checked.\n Example : (onSelect)=\"onItemSelect($event)\"\n- `onSelectAll` - Return the all items.\n Example : (onSelectAll)=\"onSelectAll($event)\".\n- `onDeSelect` - Return the unselected item when an item is unchecked.\n Example : (onDeSelect)=\"onItemDeSelect($event)\"\n- `onFilterChange` - Return the key press.\n Example : (onFilterChange)=\"onFilterChange($event)\"\n- `onDropDownClose`-\n Example : (onDropDownClose)=\"onDropDownClose()\"\n\n\n### Custom Theme\n\n- The component package has a themes folder in node_modules at `ng-multiselet-dropdown\\themes\\ng-multiselect-dropdown.theme.scss`\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).\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.\n\n\n\n## Custom Template(in beta):\n\n### Variables can be used in template\n\n1. id: return id as number\n2. option: return option text. return string\n3. isSelected: determine if item is selected or not. returns boolean\n\nTemplate for each item\n```\n\n {{option}}\n\n```\n\nTemplate for selected item\n```\n\n {{option}}\n\n```\n\n[Demo](https://codesandbox.io/s/custom-template-uyo0o?file=/src/app/app.component.html)\n### Run locally\n\n- Clone the repository or downlod the .zip,.tar files.\n- Run `npm install`\n- Run `ng serve` for a dev server\n- Navigate to `http://localhost:4200/`\n\n### Library Build / NPM Package\n\nRun `yarn build:lib` to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.\n\n## Running unit tests\n\nRun `yarn test` to execute the unit tests.\n\n## Development\n\nThis project was generated with Angular CLI version 1.7.1.\n\n## Contributions\n\nContributions are welcome, please open an issue and preferrably file a pull request.\n\n### Opening Issue\n\nPlease share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.\n\n## License\n\nMIT License.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n
\"\"/
Tom Saleeba
💻		\"\"/
Simon Pinfold
💻		\"\"/
Sushil Suthar
💻		\"\"/
Sachin Grover
💻		\"\"/
Mike Roberts
💻		\"\"/
David Sosa
💻		\"\"/
Sergiy Gedeon
💻
\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md"}