osi-cards-lib 1.0.0 → 1.1.0

package/README.md

@@ -7,26 +7,68 @@ A standalone Angular library for rendering beautiful, interactive AI-powered car
 ### From npm (Recommended)
 
 ```bash
-npm install @osi/cards-lib
+npm install osi-cards-lib
 ```
 
 The package is available on npm and can be installed directly. This is the easiest and recommended way to use the library.
 
+**Package published at:** https://www.npmjs.com/package/osi-cards-lib
+
+### Installation
+
+The library now supports both Angular 18 and Angular 20, which should resolve most peer dependency conflicts. Simply install:
+
+```bash
+npm install osi-cards-lib
+```
+
+If you still encounter conflicts, you can use:
+
+```bash
+npm install osi-cards-lib --legacy-peer-deps
+```
+
+#### Option 2: Update Incompatible Packages
+
+If possible, update packages that require Angular 18 to versions compatible with Angular 20:
+
+```bash
+# Check for Angular 20 compatible versions
+npm view @ng-select/ng-select versions --json
+npm view @angular-slider/ngx-slider versions --json
+
+# Install compatible versions if available
+npm install @ng-select/ng-select@latest --legacy-peer-deps
+npm install @angular-slider/ngx-slider@latest --legacy-peer-deps
+```
+
+#### Option 3: Use --force (Use with caution)
+
+```bash
+npm install osi-cards-lib --force
+```
+
+**Note:** `osi-cards-lib` supports both Angular 18 and Angular 20, making it compatible with a wider range of projects and reducing peer dependency conflicts.
+
+**Package published at:** https://www.npmjs.com/package/osi-cards-lib
+
 ## Peer Dependencies
 
-The library requires the following peer dependencies:
+The library supports both Angular 18 and Angular 20. It requires the following peer dependencies:
 
 ```json
 {
-  "@angular/common": "^20.0.0",
-  "@angular/core": "^20.0.0",
-  "@angular/animations": "^20.0.0",
-  "@angular/platform-browser": "^20.0.0",
+  "@angular/common": "^18.0.0 || ^20.0.0",
+  "@angular/core": "^18.0.0 || ^20.0.0",
+  "@angular/animations": "^18.0.0 || ^20.0.0",
+  "@angular/platform-browser": "^18.0.0 || ^20.0.0",
   "lucide-angular": "^0.548.0",
   "rxjs": "~7.8.0"
 }
 ```
 
+**Note:** The library is compatible with both Angular 18 and Angular 20, which helps avoid peer dependency conflicts with other packages in your project.
+
 ### Optional Dependencies
 
 For enhanced functionality (charts and maps), you can optionally install:
@@ -44,7 +86,7 @@ These are optional - the library works without them, but chart and map sections
 Install the library using npm:
 
 ```bash
-npm install @osi/cards-lib
+npm install osi-cards-lib
 ```
 
 **For local development** (if using the library from a local path):
@@ -58,7 +100,7 @@ Or add to your `package.json`:
 ```json
 {
   "dependencies": {
-    "@osi/cards-lib": "file:../OSI-Cards-1/dist/osi-cards-lib"
+    "osi-cards-lib": "file:../OSI-Cards-1/dist/osi-cards-lib"
   }
 }
 ```
@@ -68,6 +110,9 @@ Or add to your `package.json`:
 The library requires these peer dependencies. Install them if not already present:
 
 ```bash
+npm install osi-cards-lib
+npm install @angular/common@^18.0.0 @angular/core@^18.0.0 @angular/animations@^18.0.0 @angular/platform-browser@^18.0.0 lucide-angular@^0.548.0 rxjs@~7.8.0
+# OR for Angular 20:
 npm install @angular/common@^20.0.0 @angular/core@^20.0.0 @angular/animations@^20.0.0 @angular/platform-browser@^20.0.0 lucide-angular@^0.548.0 rxjs@~7.8.0
 ```
 
@@ -78,7 +123,7 @@ npm install @angular/common@^20.0.0 @angular/core@^20.0.0 @angular/animations@^2
 Add this to your `src/styles.scss` (or `styles.css`):
 
 ```scss
-@import '@osi/cards-lib/styles/_styles';
+@import 'osi-cards-lib/styles/_styles';
 ```
 
 **Option B: Add to angular.json**
@@ -93,7 +138,7 @@ Add the styles path to your `angular.json`:
         "build": {
           "options": {
             "styles": [
-              "node_modules/@osi/cards-lib/styles/_styles.scss",
+              "node_modules/osi-cards-lib/styles/_styles.scss",
               "src/styles.scss"
             ]
           }
@@ -112,7 +157,7 @@ Add the styles path to your `angular.json`:
 
 ```typescript
 import { Component } from '@angular/core';
-import { AICardRendererComponent, AICardConfig } from '@osi/cards-lib';
+import { AICardRendererComponent, AICardConfig } from 'osi-cards-lib';
 
 @Component({
   selector: 'app-my-component',
@@ -153,7 +198,7 @@ import {
   AICardRendererComponent, 
   AICardConfig,
   CardFieldInteractionEvent 
-} from '@osi/cards-lib';
+} from 'osi-cards-lib';
 
 @Component({
   selector: 'app-card-example',
@@ -238,14 +283,14 @@ import {
   CardAction,        // Action configuration type
   CardType,          // Card type enum
   SectionType        // Section type union
-} from '@osi/cards-lib';
+} from 'osi-cards-lib';
 ```
 
 ### Step 6: Verify Installation
 
 After completing the steps above, verify everything is working:
 
-1. ✅ Check that `node_modules/@osi/cards-lib` exists
+1. ✅ Check that `node_modules/osi-cards-lib` exists
 2. ✅ Verify components can be imported without TypeScript errors
 3. ✅ Ensure styles are applied (check browser DevTools)
 4. ✅ Test rendering a simple card in your application
@@ -260,7 +305,7 @@ import {
   AICardRendererComponent,
   MasonryGridComponent,
   CardSkeletonComponent 
-} from '@osi/cards-lib';
+} from 'osi-cards-lib';
 ```
 
 #### Importing Services
@@ -270,7 +315,7 @@ import {
   IconService,
   SectionNormalizationService,
   MagneticTiltService 
-} from '@osi/cards-lib';
+} from 'osi-cards-lib';
 ```
 
 #### Importing Utilities
@@ -278,7 +323,7 @@ import {
 ```typescript
 import { 
   // Utility functions are available through the main export
-} from '@osi/cards-lib';
+} from 'osi-cards-lib';
 ```
 
 See [IMPORT_EXAMPLE.md](./IMPORT_EXAMPLE.md) for comprehensive import examples and advanced usage patterns.
@@ -290,7 +335,7 @@ See [IMPORT_EXAMPLE.md](./IMPORT_EXAMPLE.md) for comprehensive import examples a
 The card component accepts a `cardConfig` input of type `AICardConfig`. Here's a basic example:
 
 ```typescript
-import { AICardConfig } from '@osi/cards-lib';
+import { AICardConfig } from 'osi-cards-lib';
 
 const card: AICardConfig = {
   cardTitle: 'Company Profile',
@@ -526,7 +571,7 @@ Use path references in `package.json`:
 ```json
 {
   "dependencies": {
-    "@osi/cards-lib": "file:../osi-cards-lib/dist/osi-cards-lib"
+    "osi-cards-lib": "file:../osi-cards-lib/dist/osi-cards-lib"
   }
 }
 ```
@@ -535,10 +580,10 @@ Use path references in `package.json`:
 
 ### Module Not Found
 
-**Error**: `Cannot find module '@osi/cards-lib'`
+**Error**: `Cannot find module 'osi-cards-lib'`
 
 **Solutions**:
-- Ensure the library is installed: `npm install @osi/cards-lib`
+- Ensure the library is installed: `npm install osi-cards-lib`
 - If using local path, verify the path in `package.json` is correct
 - Restart your development server after installation
 - Clear `node_modules` and reinstall: `rm -rf node_modules && npm install`
@@ -549,7 +594,7 @@ Use path references in `package.json`:
 
 **Solutions**:
 - Verify styles are imported in `styles.scss` or `angular.json`
-- Check the import path: `@import '@osi/cards-lib/styles/_styles';`
+- Check the import path: `@import 'osi-cards-lib/styles/_styles';`
 - Ensure SCSS is configured in your Angular project
 - Restart the development server after adding styles
 
@@ -569,8 +614,8 @@ Use path references in `package.json`:
 **Solutions**:
 - Restart TypeScript server in your IDE (VS Code: Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server")
 - Verify the library was built correctly: `ng build osi-cards-lib`
-- Check that `@osi/cards-lib` is accessible in `node_modules`
-- Ensure your Angular version is 20.0.0 or higher
+- Check that `osi-cards-lib` is accessible in `node_modules`
+- Ensure your Angular version is 18.0.0 or higher (18.x or 20.x supported)
 
 ### Build Errors
 
@@ -578,7 +623,7 @@ Use path references in `package.json`:
 
 **Solutions**:
 - Verify all peer dependencies are installed
-- Check Angular version compatibility (requires Angular 20+)
+- Check Angular version compatibility (requires Angular 18+ or 20+)
 - Ensure all imports use the correct paths
 - Clear build cache: `rm -rf .angular && ng build`
 
@@ -596,7 +641,7 @@ Use path references in `package.json`:
 
 After importing the library, verify:
 
-- [ ] Library is installed in `node_modules/@osi/cards-lib`
+- [ ] Library is installed in `node_modules/osi-cards-lib`
 - [ ] All peer dependencies are installed
 - [ ] Components can be imported without TypeScript errors
 - [ ] Styles are imported and applied correctly
@@ -614,10 +659,10 @@ After importing the library, verify:
 
 ### Module Not Found
 
-**Error**: `Cannot find module '@osi/cards-lib'`
+**Error**: `Cannot find module 'osi-cards-lib'`
 
 **Solutions**:
-- Ensure the library is installed: `npm install @osi/cards-lib`
+- Ensure the library is installed: `npm install osi-cards-lib`
 - If using local path, verify the path in `package.json` is correct
 - Restart your development server after installation
 - Clear `node_modules` and reinstall: `rm -rf node_modules && npm install`
@@ -628,7 +673,7 @@ After importing the library, verify:
 
 **Solutions**:
 - Verify styles are imported in `styles.scss` or `angular.json`
-- Check the import path: `@import '@osi/cards-lib/styles/_styles';`
+- Check the import path: `@import 'osi-cards-lib/styles/_styles';`
 - Ensure SCSS is configured in your Angular project
 - Restart the development server after adding styles
 
@@ -648,8 +693,8 @@ After importing the library, verify:
 **Solutions**:
 - Restart TypeScript server in your IDE (VS Code: Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server")
 - Verify the library was built correctly: `ng build osi-cards-lib`
-- Check that `@osi/cards-lib` is accessible in `node_modules`
-- Ensure your Angular version is 20.0.0 or higher
+- Check that `osi-cards-lib` is accessible in `node_modules`
+- Ensure your Angular version is 18.0.0 or higher (18.x or 20.x supported)
 
 ### Build Errors
 
@@ -657,7 +702,7 @@ After importing the library, verify:
 
 **Solutions**:
 - Verify all peer dependencies are installed
-- Check Angular version compatibility (requires Angular 20+)
+- Check Angular version compatibility (requires Angular 18+ or 20+)
 - Ensure all imports use the correct paths
 - Clear build cache: `rm -rf .angular && ng build`
 
@@ -679,7 +724,7 @@ If you're migrating from using the app directly to using the library:
 
 1. **Install the library**:
    ```bash
-   npm install @osi/cards-lib
+   npm install osi-cards-lib
    ```
 
 2. **Update imports**:
@@ -688,12 +733,12 @@ If you're migrating from using the app directly to using the library:
    import { AICardRendererComponent } from './shared/components/cards';
    
    // After
-   import { AICardRendererComponent } from '@osi/cards-lib';
+   import { AICardRendererComponent } from 'osi-cards-lib';
    ```
 
 3. **Import styles**:
    ```scss
-   @import '@osi/cards-lib/styles/_styles';
+   @import 'osi-cards-lib/styles/_styles';
    ```
 
 4. **Update service usage**:
@@ -721,7 +766,7 @@ If you're migrating from using the app directly to using the library:
 To add custom section types, extend the library components or create your own:
 
 ```typescript
-import { BaseSectionComponent } from '@osi/cards-lib';
+import { BaseSectionComponent } from 'osi-cards-lib';
 
 @Component({
   selector: 'app-custom-section',