commons-shared-web-ui 0.0.37 → 0.0.38

package/index.d.ts

@@ -3102,6 +3102,14 @@ interface SideNavStyleConfig {
     activeBg?: string;
     activeColor?: string;
     activeHoverBg?: string;
+    toggleBg?: string;
+    toggleBorderColor?: string;
+    tooltipBg?: string;
+    tooltipColor?: string;
+    tooltipFontWeight?: string;
+    tooltipLetterSpacing?: string;
+    tooltipOffset?: string;
+    tooltipShadow?: string;
 }
 interface SideNavSection {
     heading?: string;
@@ -3652,6 +3660,8 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     private calculateStickyPositions;
     private toTitleCase;
     get columnCount(): number;
+    get showPagination(): boolean;
+    private applyPaginationDefaults;
     onColumnClick(row: any, col: TableColumn): void;
     private getHeaders;
     toggleDropdown(id: string, event: Event, items: any[], row: any): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/modules/side-nav/side-nav.theme.scss

@@ -2,7 +2,8 @@
 
 $default-side-nav-config: (
   // Container & Global
-  bg: #F9C80E0D,
+  bg: #ffffff,
+  border-color: rgba(0, 0, 0, 0.08),
   width: 220px,
   collapsed-width: 56px,
   gap-sections: 24px,
@@ -23,27 +24,34 @@ $default-side-nav-config: (
   item-font-weight: 400,
   item-font-size: 14px,
   item-color: #5F6368,
-  
+
   // Item Hover
-  // (Figma didn't strictly specify hover for inactive, assume subtle transparency on the active color)
-  item-hover-bg: rgba(#E63E30, 0.05),
-  item-hover-color: #3C4043,
+  item-hover-bg: rgba(30, 30, 45, 0.08),
+  item-hover-color: #1e1e2d,
 
   // Active Item
-  active-bg: #E63E30,
-  active-color: #FFFFFF,
+  active-bg: #1e1e2d,
+  active-color: #ffffff,
   active-font-weight: 500,
-  active-hover-bg: #D4382B, // Darkened active color
-  
+  active-hover-bg: #2a2a3d,
+
   // Disable State
   disabled-opacity: 0.5,
 
+  // Toggle Pill
+  toggle-bg: #ffffff,
+  toggle-border-color: rgba(0, 0, 0, 0.1),
+
   // Tooltip Styling
-  tooltip-bg: rgba(0, 0, 0, 0.8),
+  tooltip-bg: #1e1e2d,
   tooltip-color: #FFFFFF,
-  tooltip-padding: 8px 12px,
+  tooltip-padding: 8px 14px,
   tooltip-border-radius: 6px,
-  tooltip-font-size: 12px
+  tooltip-font-size: 12px,
+  tooltip-font-weight: 500,
+  tooltip-letter-spacing: 0.2px,
+  tooltip-offset: 20px,
+  tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.35)
 );
 
 @mixin side-nav-theme($user-config: ()) {
@@ -51,6 +59,7 @@ $default-side-nav-config: (
 
   // Container
   --cc-side-nav-bg: #{map.get($config, bg)};
+  --cc-side-nav-border-color: #{map.get($config, border-color)};
   --cc-side-nav-width: #{map.get($config, width)};
   --cc-side-nav-collapsed-width: #{map.get($config, collapsed-width)};
   --cc-side-nav-gap-sections: #{map.get($config, gap-sections)};
@@ -85,10 +94,18 @@ $default-side-nav-config: (
   // Disabled
   --cc-side-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
 
+  // Toggle Pill
+  --cc-side-nav-toggle-bg: #{map.get($config, toggle-bg)};
+  --cc-side-nav-toggle-border-color: #{map.get($config, toggle-border-color)};
+
   // Tooltip
   --cc-side-nav-tooltip-bg: #{map.get($config, tooltip-bg)};
   --cc-side-nav-tooltip-color: #{map.get($config, tooltip-color)};
   --cc-side-nav-tooltip-padding: #{map.get($config, tooltip-padding)};
   --cc-side-nav-tooltip-border-radius: #{map.get($config, tooltip-border-radius)};
   --cc-side-nav-tooltip-font-size: #{map.get($config, tooltip-font-size)};
+  --cc-side-nav-tooltip-font-weight: #{map.get($config, tooltip-font-weight)};
+  --cc-side-nav-tooltip-letter-spacing: #{map.get($config, tooltip-letter-spacing)};
+  --cc-side-nav-tooltip-offset: #{map.get($config, tooltip-offset)};
+  --cc-side-nav-tooltip-shadow: #{map.get($config, tooltip-shadow)};
 }