@unnilouis.org/vs-chipdropdown 9.0.9 → 9.1.2

package/README.md

@@ -1,24 +1,87 @@
-# VsChipdropdown
+📦 Chip Dropdown Package - <lib-vs-chipdd-cmp>
+This component provides a multi-select dropdown with autocomplete, infinite scroll, and search functionality. It displays selected items as chips and is ideal when users need to choose multiple options.
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.13.
+🔧 Usage
+<lib-vs-chipdd-cmp  
+  [InputFields]="inputaccount" 
+  (dataEvent)="chipfunction($event)">
+</lib-vs-chipdd-cmp>
 
-## Code scaffolding
 
-Run `ng generate component component-name --project vs-chipdropdown` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project vs-chipdropdown`.
-> Note: Don't forget to add `--project vs-chipdropdown` or else it will be added to the default project in your `angular.json` file. 
+📥 Inputs
 
-## Build
+1. InputFields
 
-Run `ng build vs-chipdropdown` to build the project. The build artifacts will be stored in the `dist/` directory.
+Pass an object to configure the dropdown. It supports both API-driven and frontend static data.
 
-## Publishing
+Supported keys:
 
-After building your library with `ng build vs-chipdropdown`, go to the dist folder `cd dist/vs-chipdropdown` and run `npm publish`.
+method: HTTP method to call the API (GET, POST, etc.)
 
-## Running unit tests
+url: Backend API endpoint
 
-Run `ng test vs-chipdropdown` to execute the unit tests via [Karma](https://karma-runner.github.io).
+searchkey: Key to be used for searching within the dropdown
 
-## Further help
+params: Default query/body params for the API request (e.g., { flag: 1 })
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+displaykey: Key in the response object used to display dropdown values
+
+label: Label of the dropdown
+
+Outputkey: Key to emit through the dataEvent output (optional)
+
+If omitted, the entire selected object(s) will be emitted.
+
+formcontrolname: Name of the FormControl defined in the parent form
+
+fronentdata: Set true to use frontend data (disables API call)
+
+data: Array of objects used as options in frontend mode
+
+
+2. formGroup (Optional)
+Pass the parent form's FormGroup to enable form integration and auto-patching selected values.
+
+
+📤 Output
+3. dataEvent
+An output event that emits the selected dropdown data whenever the selection changes.
+
+Example:
+
+chipfunction(event: any) {
+  console.log('Selected items:', event);
+}
+
+
+✅ Example InputFields Object
+
+this.inputaccount = {
+  method: 'POST',
+  url: 'https://your.api/multiselect',
+  params: { flag: 2 },
+  displaykey: 'account_name',
+  Outputkey: 'account_id',
+  label: 'Accounts',
+  formcontrolname: 'selectedAccounts',
+  fronentdata: false,
+};
+
+🧩 Use Cases
+
+Multi-select dropdowns with autocomplete
+
+Displaying selected items as chips
+
+API-driven or static list of options
+
+Search-enabled large datasets
+
+
+💡 Tips
+
+Use Outputkey if you only want to emit specific values (like IDs or names).
+
+If you need the full object, simply skip the Outputkey.
+
+Works well with Angular Reactive Forms.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unnilouis.org/vs-chipdropdown",
-  "version": "9.0.9",
+  "version": "9.1.2",
   "main": "bundles/unnilouis.org-vs-chipdropdown.umd.js",
   "module": "fesm5/unnilouis.org-vs-chipdropdown.js",
   "es2015": "fesm2015/unnilouis.org-vs-chipdropdown.js",