@ruc-lib/knob 3.1.1 → 4.0.0

package/README.md

@@ -13,47 +13,72 @@ npm install @uxpractice/ruc-lib
 
 ### Install Individual Component
 
-If you only need the Knob component
+If you only need the Knob component:
+
+**For Angular 15:**
 ```bash
-npm install @ruc-lib/knob
+npm install @ruc-lib/knob@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
 ```
 
+**For Angular 16:**
+```bash
+npm install @ruc-lib/knob@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
+```
 
-# Version Compatibility
+**For Angular 17:**
+```bash
+npm install @ruc-lib/knob@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
+```
 
-Please ensure you install the correct version of `@ruc-lib/knob` based on your Angular version.
- 
-| Angular Version    | Compatible `@ruc-lib/knob` Version     |
-|--------------------|------------------------------------------------------|
-| 15.x.x             | `npm install @ruc-lib/knob@^3.0.0`     |
-| 16.x.x             | `npm install @ruc-lib/knob@^3.0.0`     |
+**For Angular 18:**
+```bash
+npm install @ruc-lib/knob@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
+```
+
+**For Angular 19:**
+```bash
+npm install @ruc-lib/knob@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
+```
 
+**For Angular 20:**
+```bash
+npm install @ruc-lib/knob@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
+
+| Angular Version    | Compatible `@ruc-lib/knob` Version     |
+|--------------------|----------------------------------------|
+| 15.x.x             | `npm install @ruc-lib/knob@^3.2.0`     |
+| 16.x.x             | `npm install @ruc-lib/knob@^3.2.0`     |
+| 17.x.x             | `npm install @ruc-lib/knob@^4.0.0`     |
+| 18.x.x             | `npm install @ruc-lib/knob@^4.0.0`     |
+| 19.x.x             | `npm install @ruc-lib/knob@^4.0.0`     |
+| 20.x.x             | `npm install @ruc-lib/knob@^4.0.0`     |
 
 ## Usage
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibKnobModule`:
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibKnobComponent`:
 
 ```typescript
+import { Component } from '@angular/core';
+
 // For Complete Library
-import { RuclibKnobModule } from '@uxpractice/ruc-lib/knob';
+import { RuclibKnobComponent } from '@uxpractice/ruc-lib/knob';
 
 // For Individual Package
-import { RuclibKnobModule } from '@ruc-lib/knob';
-
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    RuclibKnobModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+import { RuclibKnobComponent } from '@ruc-lib/knob';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibKnobComponent],
+  templateUrl: './app.component.html',
 })
-export class AppModule {}
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component