commons-shared-web-ui 0.0.37 → 0.0.39

package/index.d.ts

@@ -1388,6 +1388,7 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     value: any;
     isVisible: boolean;
     showPassword: boolean;
+    isMultiDropdownOpen: boolean;
     isDragOver: boolean;
     fileUploadError: string;
     multiSaveError: string;
@@ -1462,6 +1463,14 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     constructor(fb: FormBuilder, expressionService: ExpressionService, http: HttpClient);
     ngOnInit(): void;
     get addMultiLabel(): string;
+    /** Getter for Select placeholder label */
+    get selectPlaceholderLabel(): string;
+    /** Getter for No options available label */
+    get noOptionsAvailableLabel(): string;
+    /** Getter for expand less icon name */
+    get expandLessLabel(): string;
+    /** Getter for expand more icon name */
+    get expandMoreLabel(): string;
     private initGroupField;
     /**
      * Sets up cross-field validation based on the `onValidate` formula.
@@ -1515,6 +1524,10 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     get errorMessage(): string;
     get showCharCount(): boolean;
     get remainingCharacters(): number | null;
+    toggleMultiDropdown(event: MouseEvent): void;
+    onDocumentClick(): void;
+    onEscapeKey(): void;
+    get multiSelectedCount(): number;
     get isTextField(): boolean;
     get isNumberField(): boolean;
     get isDateField(): boolean;
@@ -1975,10 +1988,13 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChang
     private get validOptions();
     private updateFromConfig;
     private updateFromLabels;
-    get requiredMarker(): string;
-    get searchPlaceholder(): string;
-    get selectedSuffix(): string;
-    get clearAriaLabel(): string;
+    get resolvedLabels(): {
+        requiredMarker: string;
+        searchPlaceholder: string;
+        selectedSuffix: string;
+        clearAriaLabel: string;
+        noResultsFound: string;
+    };
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -3102,6 +3118,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 +3676,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.39",
   "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)};
 }