commons-shared-web-ui 0.0.29 → 0.0.31

package/index.d.ts

@@ -2469,6 +2469,11 @@ interface ConfirmationModalConfig {
     width?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';
     customClass?: string;
+    type?: 'modal' | 'side-panel';
+    panelPosition?: 'left' | 'right' | 'top' | 'bottom';
+    panelSpacing?: string;
+    panelWidth?: string;
+    panelHeight?: string;
     backgroundColor?: string;
     borderRadius?: string;
     borderTopLeftRadius?: string;
@@ -2574,6 +2579,7 @@ declare class ConfirmationModalComponent implements OnInit, OnDestroy {
     onClose(): void;
     onShowCodeSnippet(): void;
     getModalWidth(): string;
+    getModalStyles(): any;
     getConfirmButtonClass(): string;
     getHeaderClass(): string;
     resolveIconType(icon: any): 'material' | 'custom' | 'img';
@@ -3559,6 +3565,20 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         top: number;
         right: number;
     };
+    /** Items and row for the currently open dropdown — rendered in a portal outside the table. */
+    activeDropdownItems: any[] | null;
+    activeDropdownRow: any;
+    openFilterKey: string | null;
+    activeFilterLabels: {
+        [key: string]: string;
+    };
+    /** Viewport-relative position used to render the filter panel as position:fixed. */
+    filterPosition: {
+        top: number;
+        left: number;
+    };
+    /** The filter config for the currently open filter panel. */
+    activeFilterData: any | null;
     deleteModalOpen: boolean;
     deleteModalConfig: any;
     private pendingDeleteAction;
@@ -3584,6 +3604,14 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     onSort(col: TableColumn): void;
     onSearch(event: Event): void;
     onFilterChange(key: string, event: Event): void;
+    private applyFilter;
+    toggleFilter(key: string, event: Event): void;
+    selectFilterOption(filter: any, opt: {
+        label: string;
+        value: any;
+    } | null): void;
+    getFilterDisplay(filter: any): string;
+    isFilterActive(filter: any): boolean;
     /**
      * Assembles the current table state into a `TableDataChangeEvent` object.
      * Emitted to the parent in external-data mode so it can fetch and supply new data.
@@ -3602,7 +3630,8 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     updateSelectedRows(): void;
     getCellValue(row: any, col: TableColumn): any;
     getBadgeClass(row: any, col: TableColumn): string;
-    getSortIcon(key: string): string;
+    getAscOpacity(key: string): number;
+    getDescOpacity(key: string): number;
     private replaceParams;
     private loadFilterOptions;
     private getValueByPath;
@@ -3611,7 +3640,7 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     get columnCount(): number;
     onColumnClick(row: any, col: TableColumn): void;
     private getHeaders;
-    toggleDropdown(id: string, event: Event): void;
+    toggleDropdown(id: string, event: Event, items: any[], row: any): void;
     closeDropdown(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; "columnClick": "columnClick"; "sortChange": "sortChange"; "pageChange": "pageChange"; "searchChange": "searchChange"; }, never, never, false, never>;

package/package.json

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

package/src/lib/modules/pagination/pagination.theme.scss

@@ -1,66 +1,66 @@
-@use 'sass:map';
-
-// Default configuration for the pagination theme
-$default-pagination-config: (
-  // Font & Text
-  font-family: ('Roboto', sans-serif),
-  text-color: #757575,
-  font-size: 14px,
-
-  // Select Dropdown
-  select-bg: #f5f5f5,
-  select-border: none,
-  select-radius: 4px,
-  select-padding: 6px 12px,
-  select-text-color: #333,
-  select-arrow-color: #f44336, // Red arrow
-
-  // Buttons
-  btn-size: 32px,
-  btn-bg: #ffffff,
-  btn-border: 1px solid #e0e0e0,
-  btn-radius: 4px,
-  btn-text-color: #333,
-  
-  // States
-  btn-hover-bg: #f5f5f5,
-  btn-active-bg: #fff,
-  btn-active-border: 1px solid #ff4081, // Pinkish red
-  btn-active-text: #ff4081,
-  
-  // Disabled
-  disabled-opacity: 0.5,
-  disabled-bg: #f9f9f9
-);
-
-// Mixin to generate CSS variables for the pagination component
-@mixin pagination-theme($user-config: ()) {
-  // Merge user config with defaults
-  $config: map.merge($default-pagination-config, $user-config);
-
-  // Generate CSS Variables
-  --cc-pagination-font-family: #{map.get($config, font-family)};
-  --cc-pagination-text-color: #{map.get($config, text-color)};
-  --cc-pagination-font-size: #{map.get($config, font-size)};
-
-  --cc-pagination-select-bg: #{map.get($config, select-bg)};
-  --cc-pagination-select-border: #{map.get($config, select-border)};
-  --cc-pagination-select-radius: #{map.get($config, select-radius)};
-  --cc-pagination-select-padding: #{map.get($config, select-padding)};
-  --cc-pagination-select-text-color: #{map.get($config, select-text-color)};
-  --cc-pagination-select-arrow-color: #{map.get($config, select-arrow-color)};
-
-  --cc-pagination-btn-size: #{map.get($config, btn-size)};
-  --cc-pagination-btn-bg: #{map.get($config, btn-bg)};
-  --cc-pagination-btn-border: #{map.get($config, btn-border)};
-  --cc-pagination-btn-radius: #{map.get($config, btn-radius)};
-  --cc-pagination-btn-text-color: #{map.get($config, btn-text-color)};
-  
-  --cc-pagination-btn-hover-bg: #{map.get($config, btn-hover-bg)};
-  --cc-pagination-btn-active-bg: #{map.get($config, btn-active-bg)};
-  --cc-pagination-btn-active-border: #{map.get($config, btn-active-border)};
-  --cc-pagination-btn-active-text: #{map.get($config, btn-active-text)};
-  
-  --cc-pagination-disabled-opacity: #{map.get($config, disabled-opacity)};
-  --cc-pagination-disabled-bg: #{map.get($config, disabled-bg)};
-}
+@use 'sass:map';
+
+// Default configuration for the pagination theme
+$default-pagination-config: (
+  // Font & Text
+  font-family: ('Roboto', sans-serif),
+  text-color: #757575,
+  font-size: 14px,
+
+  // Select Dropdown
+  select-bg: #f5f5f5,
+  select-border: none,
+  select-radius: 4px,
+  select-padding: 6px 12px,
+  select-text-color: #333,
+  select-arrow-color: #f44336, // Red arrow
+
+  // Buttons
+  btn-size: 32px,
+  btn-bg: #ffffff,
+  btn-border: 1px solid #e0e0e0,
+  btn-radius: 4px,
+  btn-text-color: #333,
+  
+  // States
+  btn-hover-bg: #f5f5f5,
+  btn-active-bg: #fff,
+  btn-active-border: 1px solid #ff4081, // Pinkish red
+  btn-active-text: #ff4081,
+  
+  // Disabled
+  disabled-opacity: 0.5,
+  disabled-bg: #f9f9f9
+);
+
+// Mixin to generate CSS variables for the pagination component
+@mixin pagination-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-pagination-config, $user-config);
+
+  // Generate CSS Variables
+  --cc-pagination-font-family: #{map.get($config, font-family)};
+  --cc-pagination-text-color: #{map.get($config, text-color)};
+  --cc-pagination-font-size: #{map.get($config, font-size)};
+
+  --cc-pagination-select-bg: #{map.get($config, select-bg)};
+  --cc-pagination-select-border: #{map.get($config, select-border)};
+  --cc-pagination-select-radius: #{map.get($config, select-radius)};
+  --cc-pagination-select-padding: #{map.get($config, select-padding)};
+  --cc-pagination-select-text-color: #{map.get($config, select-text-color)};
+  --cc-pagination-select-arrow-color: #{map.get($config, select-arrow-color)};
+
+  --cc-pagination-btn-size: #{map.get($config, btn-size)};
+  --cc-pagination-btn-bg: #{map.get($config, btn-bg)};
+  --cc-pagination-btn-border: #{map.get($config, btn-border)};
+  --cc-pagination-btn-radius: #{map.get($config, btn-radius)};
+  --cc-pagination-btn-text-color: #{map.get($config, btn-text-color)};
+  
+  --cc-pagination-btn-hover-bg: #{map.get($config, btn-hover-bg)};
+  --cc-pagination-btn-active-bg: #{map.get($config, btn-active-bg)};
+  --cc-pagination-btn-active-border: #{map.get($config, btn-active-border)};
+  --cc-pagination-btn-active-text: #{map.get($config, btn-active-text)};
+  
+  --cc-pagination-disabled-opacity: #{map.get($config, disabled-opacity)};
+  --cc-pagination-disabled-bg: #{map.get($config, disabled-bg)};
+}