osi-cards-lib 1.5.44 → 1.5.46

package/index.d.ts

@@ -3,6 +3,8 @@ import { InjectionToken, OnDestroy, Type, OnChanges, EventEmitter, ChangeDetecto
 import * as rxjs from 'rxjs';
 import { Observable, Subscription } from 'rxjs';
 import * as lucide_angular from 'lucide-angular';
+import { ChartData as ChartData$1, ChartOptions, ChartType as ChartType$1 } from 'chart.js';
+import { BaseChartDirective } from 'ng2-charts';
 
 /**
  * OSI Cards Branded Types
@@ -2969,6 +2971,27 @@ interface SectionDesignParams extends SectionColorParams, SectionBorderParams, S
     customVars?: Record<string, string>;
 }
 
+/**
+ * Layout configuration for a section type.
+ * Each section component defines its own static layoutConfig.
+ * @deprecated Use SectionLayoutPreferences instead
+ */
+interface SectionLayoutConfig {
+    /** Preferred column span (1-4) */
+    preferredColumns: number;
+    /** Minimum columns the section should span */
+    minColumns: number;
+    /** Maximum columns the section can span */
+    maxColumns: number;
+    /** Expand by 1 column when field count exceeds this threshold */
+    expandOnFieldCount?: number;
+    /** Expand by 1 column when item count exceeds this threshold */
+    expandOnItemCount?: number;
+    /** Expand by 1 column when description exceeds this character count */
+    expandOnDescriptionLength?: number;
+    /** For horizontal layouts: set columns to match item count (up to maxColumns) */
+    matchItemCount?: boolean;
+}
 /**
  * Layout preferences for a section component.
  * Each section component defines its own responsive behavior dynamically.
@@ -10207,66 +10230,130 @@ declare class BrandColorsSectionComponent extends BaseSectionComponent implement
 }
 
 /**
- * Chart Section Component
+ * Chart data interface
+ */
+interface ChartDataset {
+    label?: string;
+    data: number[];
+    backgroundColor?: string | string[];
+    borderColor?: string | string[];
+    borderWidth?: number;
+}
+/**
+ * Chart configuration
+ */
+interface ChartConfig {
+    labels: string[];
+    datasets: ChartDataset[];
+    type: 'bar' | 'line' | 'pie' | 'doughnut';
+}
+/**
+ * Abstract base for sections with data visualizations.
  *
- * Displays data visualizations using Frappe Charts.
- * Supports: bar, line, pie, percentage (doughnut), area charts.
+ * Use this for:
+ * - Chart Section
+ * - Analytics sections with charts
  *
- * Note: Requires frappe-charts to be installed.
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class ChartSectionComponent extends ChartSectionBaseComponent {
+ *   static override readonly layoutConfig: SectionLayoutConfig = {
+ *     preferredColumns: 2,
+ *     minColumns: 1,
+ *     maxColumns: 4
+ *   };
+ * }
+ * ```
  */
-declare class ChartSectionComponent extends BaseSectionComponent implements AfterViewInit, OnDestroy, OnInit, OnChanges {
-    private readonly layoutService;
-    ngOnInit(): void;
-    chartContainer?: ElementRef<HTMLDivElement>;
-    private chartInstance;
-    protected chartLibraryLoaded: boolean;
-    protected chartError: string | null;
-    private previousChartType;
-    private previousChartDataHash;
-    private isRendering;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+declare abstract class ChartSectionBaseComponent extends BaseSectionComponent {
     /**
-     * Render chart using Frappe Charts (if available)
+     * Override in subclass to customize layout behavior
      */
-    private renderChart;
+    static readonly layoutConfig: SectionLayoutConfig;
     /**
-     * Update existing chart with new data
+     * Whether the chart library is loaded
      */
-    private updateChart;
+    protected chartLibraryLoaded: i0.WritableSignal<boolean>;
     /**
-     * Convert Chart.js data format to Frappe Charts format
+     * Chart loading error
      */
-    private convertToFrappeFormat;
+    protected chartError: i0.WritableSignal<string | null>;
     /**
-     * Map Chart.js chart types to Frappe Charts types
+     * Chart type (bar, line, pie, doughnut)
      */
-    private mapChartType;
+    readonly chartType: i0.Signal<"bar" | "line" | "pie" | "doughnut">;
     /**
-     * Extract colors from Chart.js format
+     * Processed chart configuration
      */
-    private extractColors;
+    readonly chartConfig: i0.Signal<ChartConfig | null>;
+    /**
+     * Whether the chart has valid data
+     */
+    readonly hasValidData: i0.Signal<boolean>;
+    /**
+     * Total value across all datasets
+     */
+    readonly totalValue: i0.Signal<number>;
+    /**
+     * Load the chart library dynamically
+     */
+    protected abstract loadChartLibrary(): Promise<void>;
+    /**
+     * Initialize the chart
+     */
+    protected abstract initializeChart(): void;
+    /**
+     * Update the chart with new data
+     */
+    protected abstract updateChart(): void;
+    /**
+     * Destroy the chart instance
+     */
+    protected abstract destroyChart(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChartSectionBaseComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChartSectionBaseComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Chart Section Component
+ *
+ * Displays data visualizations using Chart.js library.
+ * Supports bar, line, pie, and doughnut chart types.
+ *
+ * Note: Requires Chart.js library to be installed.
+ */
+declare class ChartSectionComponent extends ChartSectionBaseComponent implements AfterViewInit, OnDestroy, OnInit {
+    private readonly layoutService;
+    chart?: BaseChartDirective;
+    chartInitFailed: boolean;
+    chartLoading: boolean;
+    chartData: ChartData$1<'bar' | 'line' | 'pie' | 'doughnut'>;
+    chartOptions: ChartOptions;
+    chartJsType: ChartType$1;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     /**
-     * Detect if chart data contains revenue/monetary values
+     * Load Chart.js library dynamically
      */
-    private detectRevenueData;
+    protected loadChartLibrary(): Promise<void>;
     /**
-     * Format value as currency
+     * Initialize the chart
      */
-    private formatCurrency;
+    protected initializeChart(): Promise<void>;
     /**
-     * Fix Y-axis label rendering issues
+     * Update chart data from ChartConfig
      */
-    private fixYAxisLabels;
+    private updateChartData;
     /**
-     * Fix legend label truncation
+     * Update the chart with new data
      */
-    private fixLegendLabels;
+    protected updateChart(): void;
     /**
-     * Destroy chart instance
+     * Destroy the chart instance
      */
-    private destroyChart;
+    protected destroyChart(): void;
     /**
      * Calculate layout preferences for chart section based on content.
      * Chart sections: 2 cols default, can shrink to 1, expands to 3-4 for wide charts
@@ -11572,11 +11659,11 @@ declare function packWithZeroGapsGuarantee(sections: CardSection[], columns?: nu
  * Do not edit manually - generated by scripts/generate-version.js
  *
  * Source of truth: version.config.json
- * Last synced: 2026-01-08T11:12:12.048Z
+ * Last synced: 2026-01-08T13:31:21.984Z
  */
-declare const VERSION = "1.5.44";
-declare const BUILD_DATE = "2026-01-08T11:12:12.048Z";
-declare const BUILD_HASH = "ebfa0a6";
+declare const VERSION = "1.5.46";
+declare const BUILD_DATE = "2026-01-08T13:31:21.984Z";
+declare const BUILD_HASH = "1964431";
 declare const BUILD_BRANCH = "main";
 interface VersionInfo {
     version: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "osi-cards-lib",
-  "version": "1.5.44",
+  "version": "1.5.46",
   "description": "Standalone OSI Cards library for Angular applications with CSS Layer support for easy style overrides",
   "keywords": [
     "angular",
@@ -20,6 +20,9 @@
     "url": "https://github.com/Inutilepat83/OSI-Cards/issues"
   },
   "homepage": "https://github.com/Inutilepat83/OSI-Cards#readme",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^20.0.0",
     "@angular/common": "^18.0.0 || ^20.0.0",

package/styles/components/sections/_section-shell.scss

@@ -88,7 +88,7 @@
 .ai-section__title {
   @include section-heading-text;
   font-size: var(--osi-section-title-font-size) !important;
-  font-weight: var(--osi-section-title-font-weight) !important;
+  font-weight: 700 !important;
   letter-spacing: var(--osi-section-title-letter-spacing) !important;
   line-height: var(--osi-section-title-line-height) !important;
   color: var(--osi-section-title-color) !important;