osi-cards-lib 1.5.33 → 1.5.35

package/README.md

@@ -159,21 +159,43 @@ This is the **most reliable method**, especially for SASS files. The styles are
 
 **Important**:
 - ⚠️ **Case sensitive**: Use `osi-cards-lib` (lowercase), NOT `osi-cards-Lib`
-- ⚠️ **REQUIRED**: You must wrap your components in a container with the `osi-cards-container` class and `data-theme` attribute:
+- ⚠️ **REQUIRED**: You must wrap your components in a container. **RECOMMENDED: Use `<osi-cards-container>` component** (automatically handles theme and tilt):
 
 ```html
-<!-- Static theme -->
+<!-- ✅ RECOMMENDED: Use osi-cards-container component -->
+<osi-cards-container [theme]="'day'">
+  <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+</osi-cards-container>
+
+<!-- ✅ Also works with dynamic theme -->
+<osi-cards-container [theme]="cardTheme" *ngIf="cardConfig">
+  <app-ai-card-renderer [cardConfig]="cardConfig"></app-ai-card-renderer>
+</osi-cards-container>
+```
+
+**Why use the component?**
+- ✅ Automatically sets `data-theme` attribute correctly
+- ✅ Automatically adds `perspective: 1200px` for 3D tilt effects
+- ✅ Preserves 3D transform context (`transform-style: preserve-3d`)
+- ✅ Handles all container styling automatically
+- ✅ More reliable than manual div setup
+
+**Alternative (Manual Setup):**
+If you prefer a plain div, you must manually set both the class and `data-theme` attribute:
+
+```html
+<!-- ⚠️ Manual setup - requires both class and data-theme -->
 <div class="osi-cards-container" data-theme="day">
   <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
 </div>
 
-<!-- Dynamic theme (Angular) -->
+<!-- Dynamic theme with manual setup -->
 <div class="osi-cards-container" [attr.data-theme]="theme" *ngIf="cardConfig">
   <app-ai-card-renderer [cardConfig]="cardConfig"></app-ai-card-renderer>
 </div>
 ```
 
-**The `data-theme` attribute is REQUIRED** - without it, styles will not apply correctly. Use `"day"` for light theme or `"night"` for dark theme.
+**The `data-theme` attribute is REQUIRED** - without it, styles will not apply correctly. Use `"day"` for light theme or `"night"` for dark theme. The component handles this automatically.
 
 #### Option B: Global Styles (For Standalone Apps)
 
@@ -236,32 +258,36 @@ export class StaticCardComponent {
 }
 ```
 
-**HTML (with scoped styles):**
+**HTML (RECOMMENDED - using OsiCardsContainerComponent):**
 
 ```html
-<div class="osi-cards-container" [attr.data-theme]="cardTheme">
+<osi-cards-container [theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [streamingStage]="'complete'"
     [showLoadingByDefault]="false"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</div>
+</osi-cards-container>
 ```
 
-**HTML (with global styles or using OsiCardsContainerComponent):**
+**HTML (Alternative - manual div setup):**
 
 ```html
-<osi-cards-container [theme]="cardTheme">
+<div class="osi-cards-container" [attr.data-theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [streamingStage]="'complete'"
     [showLoadingByDefault]="false"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</osi-cards-container>
+</div>
 ```
 
+**Note**: The component approach is recommended because it automatically handles theme, perspective for tilt, and 3D transform context.
+
 **Key Settings:**
 - `[streamingStage]="'complete'"` → Card is fully loaded
 - `[showLoadingByDefault]="false"` → No loading spinner
@@ -354,14 +380,14 @@ export class StreamingCardComponent {
 }
 ```
 
-**HTML (with scoped styles):**
+**HTML (RECOMMENDED - using OsiCardsContainerComponent):**
 
 ```html
 <button (click)="generateCard()" [disabled]="isStreaming">
   {{ isStreaming ? 'Generating...' : 'Generate Card' }}
 </button>
 
-<div class="osi-cards-container" [attr.data-theme]="cardTheme">
+<osi-cards-container [theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [isStreaming]="isStreaming"
@@ -370,19 +396,20 @@ export class StreamingCardComponent {
     [showLoadingByDefault]="true"
     [loadingMessages]="loadingMessages"
     [loadingTitle]="'AI Analysis'"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</div>
+</osi-cards-container>
 ```
 
-**HTML (with global styles or using OsiCardsContainerComponent):**
+**HTML (Alternative - manual div setup):**
 
 ```html
 <button (click)="generateCard()" [disabled]="isStreaming">
   {{ isStreaming ? 'Generating...' : 'Generate Card' }}
 </button>
 
-<osi-cards-container [theme]="cardTheme">
+<div class="osi-cards-container" [attr.data-theme]="cardTheme">
   <app-ai-card-renderer
     [cardConfig]="card"
     [isStreaming]="isStreaming"
@@ -391,9 +418,10 @@ export class StreamingCardComponent {
     [showLoadingByDefault]="true"
     [loadingMessages]="loadingMessages"
     [loadingTitle]="'AI Analysis'"
+    [tiltEnabled]="true"
     (cardInteraction)="onCardAction($event)">
   </app-ai-card-renderer>
-</osi-cards-container>
+</div>
 ```
 
 **Key Settings:**
@@ -1095,14 +1123,23 @@ If you want to keep the import in your styles file:
    ```
    Then remove the `@import` from your `styles.scss`.
 
-3. **Wrap components in container** - You MUST wrap your components:
+3. **Wrap components in container** - You MUST wrap your components. **RECOMMENDED: Use `<osi-cards-container>` component** (automatically handles theme and tilt):
+   ```html
+   <!-- ✅ RECOMMENDED: Component automatically handles theme and tilt -->
+   <osi-cards-container [theme]="'day'">
+     <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+   </osi-cards-container>
+   ```
+
+   **Alternative (Manual Setup):**
    ```html
+   <!-- ⚠️ Manual setup - requires both class and data-theme -->
    <div class="osi-cards-container" data-theme="day">
      <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
    </div>
    ```
 
-4. **Set theme attribute** - Add `data-theme="day"` or `data-theme="night"`:
+4. **Set theme attribute** - The component handles this automatically via `[theme]` input. For manual setup, add `data-theme="day"` or `data-theme="night"`:
    ```html
    <div class="osi-cards-container" data-theme="day">
    ```
@@ -1131,8 +1168,9 @@ Import styles in your `styles.scss`:
 
 **Common Issues:**
 - ❌ **Wrong import path**: `@import 'osi-cards-Lib/styles/_styles-scoped'` (wrong casing)
-- ❌ **Missing container**: Components not wrapped in `.osi-cards-container`
-- ❌ **Missing theme**: No `data-theme` attribute on container
+- ❌ **Missing container**: Components not wrapped in `.osi-cards-container` or `<osi-cards-container>` component
+- ❌ **Missing theme**: No `data-theme` attribute on container (use `<osi-cards-container [theme]="'day'">` to fix automatically)
+- ❌ **Tilt not working**: Missing `perspective` on container (use `<osi-cards-container>` component which adds it automatically)
 - ❌ **SCSS not compiled**: Check that your build process compiles SCSS files
 
 ### Icons not showing

package/fesm2022/osi-cards-lib.mjs

@@ -6083,7 +6083,7 @@ function getSectionsRequiringExternalLibs() {
  * Manifest metadata
  */
 const MANIFEST_META = {
-    generatedAt: '2025-12-12T11:12:18.177Z',
+    generatedAt: '2025-12-12T20:10:53.516Z',
     registryVersion: '1.5.19',
     totalSections: 22,
     publicSections: 22
@@ -26542,6 +26542,7 @@ class OsiCardsContainerComponent {
         // Inject configuration from providers (optional - may not be provided)
         this.cssIsolationMode = inject(CSS_ISOLATION_MODE, { optional: true });
         this.defaultThemeConfig = inject(DEFAULT_THEME, { optional: true });
+        this.cdr = inject(ChangeDetectorRef);
     }
     /**
      * Computed container class name.
@@ -26566,8 +26567,24 @@ class OsiCardsContainerComponent {
         const resolvedTheme = this.theme ?? (typeof configTheme === 'string' ? configTheme : null) ?? 'day';
         return resolvedTheme;
     }
+    /**
+     * React to input changes, especially theme changes.
+     * This ensures OnPush change detection works correctly when theme input changes.
+     */
+    ngOnChanges(changes) {
+        // If theme input changed, manually trigger change detection for OnPush strategy
+        // Handle both first change and subsequent changes to ensure theme updates work
+        if (changes['theme']) {
+            const oldTheme = changes['theme'].previousValue;
+            const newTheme = changes['theme'].currentValue;
+            console.log(`[OsiCardsContainer] Theme input changed from ${oldTheme} to ${newTheme}`);
+            this.cdr.markForCheck();
+            // Also trigger detectChanges to ensure immediate update
+            this.cdr.detectChanges();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OsiCardsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: OsiCardsContainerComponent, isStandalone: true, selector: "osi-cards-container", inputs: { theme: "theme", strictIsolation: "strictIsolation" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: OsiCardsContainerComponent, isStandalone: true, selector: "osi-cards-container", inputs: { theme: "theme", strictIsolation: "strictIsolation" }, usesOnChanges: true, ngImport: i0, template: `
     <div
       [class]="containerClass"
       [attr.data-theme]="effectiveTheme"
@@ -26576,7 +26593,7 @@ class OsiCardsContainerComponent {
     >
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [":host{display:block;background:transparent!important;background-color:transparent!important}.osi-cards-container{padding:var(--osi-card-padding);background:transparent!important;background-color:transparent!important;perspective:1200px;transform-style:preserve-3d;display:flex;justify-content:center;align-items:flex-start}.osi-cards-container--strict{contain:content;isolation:isolate;overflow:hidden}@media (max-width: 480px){.osi-cards-container{padding:var(--osi-card-padding-mobile)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;background:transparent!important;background-color:transparent!important}.osi-cards-container{padding:var(--osi-card-padding);background:transparent!important;background-color:transparent!important;perspective:1200px;transform-style:preserve-3d;display:flex;justify-content:center;align-items:flex-start}.osi-cards-container--strict{contain:content;isolation:isolate;overflow:hidden}@media (max-width: 480px){.osi-cards-container{padding:var(--osi-card-padding-mobile)}}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OsiCardsContainerComponent, decorators: [{
             type: Component,
@@ -26589,7 +26606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
     >
       <ng-content></ng-content>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;background:transparent!important;background-color:transparent!important}.osi-cards-container{padding:var(--osi-card-padding);background:transparent!important;background-color:transparent!important;perspective:1200px;transform-style:preserve-3d;display:flex;justify-content:center;align-items:flex-start}.osi-cards-container--strict{contain:content;isolation:isolate;overflow:hidden}@media (max-width: 480px){.osi-cards-container{padding:var(--osi-card-padding-mobile)}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, styles: [":host{display:block;background:transparent!important;background-color:transparent!important}.osi-cards-container{padding:var(--osi-card-padding);background:transparent!important;background-color:transparent!important;perspective:1200px;transform-style:preserve-3d;display:flex;justify-content:center;align-items:flex-start}.osi-cards-container--strict{contain:content;isolation:isolate;overflow:hidden}@media (max-width: 480px){.osi-cards-container{padding:var(--osi-card-padding-mobile)}}\n"] }]
         }], propDecorators: { theme: [{
                 type: Input
             }], strictIsolation: [{
@@ -31794,10 +31811,10 @@ class SubscriptionPool {
  * Do not edit manually - generated by scripts/generate-version.js
  *
  * Source of truth: version.config.json
- * Last synced: 2025-12-12T19:25:18.901Z
+ * Last synced: 2025-12-12T20:38:43.054Z
  */
 const VERSION = '1.5.19';
-const BUILD_DATE = '2025-12-12T19:25:18.901Z';
+const BUILD_DATE = '2025-12-12T20:38:43.054Z';
 const BUILD_HASH = 'fbe56c9';
 const BUILD_BRANCH = 'main';
 const VERSION_INFO = {