@ruc-lib/tour-guide 2.1.8 → 3.1.0

package/README.md

@@ -18,31 +18,37 @@ If you only need the Tour Guide component
 npm install @ruc-lib/tour-guide
 ```
 
-## Usage
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibTourGuideModule`:
+### 📦 Version Compatibility
+ 
+Please ensure you install the correct version of `@ruc-lib/tour-guide` based on your Angular version.
+ 
+| Angular Version    | Compatible `@ruc-lib/tour-guide` Version     |
+|--------------------|---------------------------------------------|
+| 15.x.x             | `npm install @ruc-lib/tour-guide@^3.0.0`     |
+| 16.x.x             | `npm install @ruc-lib/tour-guide@^3.0.0`     |
 
-```typescript
-// For Complete Library
-import { RuclibTourGuideModule } from '@uxpractice/ruc-lib/tour-guide';
-
-// For Individual Package
-import { RuclibTourGuideModule } from '@ruc-lib/tour-guide';
-
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    RuclibTourGuideModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
+
+## Usage
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibTourGuideComponent`:
+
+```typescript
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibTourGuideComponent } from '@uxpractice/ruc-lib/tour-guide';
+
+// For Individual Package
+import { RuclibTourGuideComponent } from '@ruc-lib/tour-guide';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibTourGuideComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component
@@ -193,6 +199,22 @@ export class AppComponent {
 }
 ```
 
+> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**
+
+When implementing **custom themes**, such as:
+
+```scss
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+}
+
+// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+  @include mat.typography-level($theme-custom-typography-name, body-1);
+}
+```
+
 ## Contribution
 
 Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.