@ruc-lib/multi-select 3.2.0 → 4.0.0

package/README.md

@@ -12,45 +12,75 @@ npm install @uxpractice/ruc-lib
 ```
 
 ### Install Individual Component
-If you only need the Multi-Select component:
+
+If you only need the MultiSelect component:
+
+**For Angular 15:**
+```bash
+npm install @ruc-lib/multi-select@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
+```
+
+**For Angular 16:**
+```bash
+npm install @ruc-lib/multi-select@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
+```
+
+**For Angular 17:**
+```bash
+npm install @ruc-lib/multi-select@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
+```
+
+**For Angular 18:**
+```bash
+npm install @ruc-lib/multi-select@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
+```
+
+**For Angular 19:**
+```bash
+npm install @ruc-lib/multi-select@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
+```
+
+**For Angular 20:**
 ```bash
-npm install @ruc-lib/multi-select
+npm install @ruc-lib/multi-select@4.0.0
 ```
 
+> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
 
-# Version Compatibility
+### 📦 Version Compatibility
 
-Please ensure you install the correct version of `@ruc-lib/multi-select` based on your Angular version.
- 
 | Angular Version    | Compatible `@ruc-lib/multi-select` Version     |
 |--------------------|------------------------------------------------|
 | 15.x.x             | `npm install @ruc-lib/multi-select@^3.2.0`     |
 | 16.x.x             | `npm install @ruc-lib/multi-select@^3.2.0`     |
+| 17.x.x             | `npm install @ruc-lib/multi-select@^4.0.0`     |
+| 18.x.x             | `npm install @ruc-lib/multi-select@^4.0.0`     |
+| 19.x.x             | `npm install @ruc-lib/multi-select@^4.0.0`     |
+| 20.x.x             | `npm install @ruc-lib/multi-select@^4.0.0`     |
 
 
 ## Usage
 
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibMultiSelectModule`:
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibMultiSelectComponent`:
 
 ```typescript
-import { RuclibMultiSelectModule } from '@ruc-lib/multi-select';
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    RuclibMultiSelectModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibMultiSelectComponent } from '@uxpractice/ruc-lib/multi-select';
+
+// For Individual Package
+import { RuclibMultiSelectComponent } from '@ruc-lib/multi-select';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibMultiSelectComponent],
+  templateUrl: './app.component.html',
 })
-export class AppModule {}
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component
@@ -178,4 +208,4 @@ Contributions are welcome! Feel free to open issues or pull requests for any enh
 
 ## Acknowledgements
 
-Thank you for choosing the Multi Select Component. If you have any feedback or suggestions, please let us know!
+Thank you for choosing the Multi Select Component. If you have any feedback or suggestions, please let us know!