commons-shared-web-ui 0.0.1 → 0.0.3

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, AfterViewInit, QueryList, ElementRef, ChangeDetectorRef, NgZone } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import * as i1 from '@angular/material/card';
 import * as i2 from '@angular/material/snack-bar';
@@ -34,8 +34,8 @@ import * as i29 from '@angular/cdk/accordion';
 import * as i3$1 from '@angular/forms';
 import { ControlValueAccessor, FormGroup, FormBuilder, AbstractControl, FormControl, FormArray } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import * as i3$2 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
+import { Subject } from 'rxjs';
 
 declare class MaterialModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MaterialModule, never>;
@@ -390,9 +390,8 @@ interface SummaryCardMeta {
 }
 declare class SummaryCardComponent {
     config: SummaryCardConfig;
-    theme: 'theme-1' | 'theme-2';
+    theme?: 'theme-1' | 'theme-2';
     cardClick: EventEmitter<void>;
-    get hostClasses(): string;
     constructor();
     onCardClick(): void;
     get cardClasses(): {
@@ -596,7 +595,7 @@ declare class ConfigurableFormComponent implements OnInit, OnChanges {
 
 declare class ConfigurableFormModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfigurableFormModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ConfigurableFormModule, never, [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof i3$2.HttpClientModule, typeof MaterialModule, typeof ConfigurableFormComponent], [typeof ConfigurableFormComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ConfigurableFormModule, never, [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof MaterialModule, typeof ConfigurableFormComponent], [typeof ConfigurableFormComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ConfigurableFormModule>;
 }
 
@@ -738,5 +737,193 @@ declare const PAGINATION_THEME_DARK = "theme-2";
 declare const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills';
 declare const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical';
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CardType1Component, CardType2Component, CardsModule, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, FilterSidebarComponent, FilterSidebarModule, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, SharedUiModule, SummaryCardComponent, SummaryCardModule, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
-export type { AlertVariant, ButtonVariant, CardType1Config, CardType2Config, ConfirmationModalConfig, FieldType, FilterChangeEvent, FilterConfig, FilterOutput, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOption, FilterSidebarOutput, FilterSidebarSection, FilterSidebarTab, FormConfig, FormField, FormOption, FormSection, IconInput, JsonFieldConfig, JsonFormConfig, KeyType, NavItem, NavStyleConfig, OptionConfig, OptionDTO, PaginationLabels, SummaryCardConfig, SummaryCardMeta, UIConfig, UISubType, UIType, UploadedFile, ValidationRules };
+interface TableOption {
+    label: string;
+    value: any;
+}
+interface TableColumn {
+    key: string;
+    label: string;
+    type: 'text' | 'number' | 'date' | 'custom' | 'html' | 'badge';
+    sortable?: boolean;
+    editable?: boolean;
+    dataType?: 'text' | 'number' | 'date' | 'email' | 'select';
+    options?: TableOption[];
+    badgeConfig?: {
+        [key: string]: 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    };
+    width?: string;
+    cellClass?: string;
+    headerClass?: string;
+    sticky?: boolean;
+    labelPath?: string;
+    dateFormat?: string;
+}
+interface TableFilter {
+    key: string;
+    label: string;
+    type: 'select' | 'text' | 'date';
+    options?: TableOption[];
+    apiUrl?: string;
+    labelKey?: string;
+    valueKey?: string;
+    labelPath?: string;
+    valuePath?: string;
+    requestKey?: string;
+    dataPath?: string;
+}
+interface TableAction {
+    label: string;
+    type: 'api' | 'callback' | 'route' | 'edit';
+    icon?: string;
+    btnVariant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'warning' | 'success' | 'danger-outline';
+    apiUrl?: string;
+    apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    route?: string;
+    confirmationNeeded?: boolean;
+    confirmationMessage?: string;
+    callback?: (row: any) => void;
+}
+interface PaginationConfig {
+    enabled: boolean;
+    pageSize: number;
+    pageSizeOptions: number[];
+    totalCountConfig?: {
+        source: 'same' | 'separate';
+        apiUrl?: string;
+        responsePath?: string;
+    };
+}
+interface TableTheme {
+    primaryColor?: string;
+    headerBg?: string;
+    headerColor?: string;
+    rowHoverBg?: string;
+    borderColor?: string;
+}
+interface NestedStringConfig {
+    paramName: string;
+    baseValue?: string;
+    separator: string;
+    assignment: string;
+}
+interface QueryParamsConfig {
+    pageKey?: string;
+    sizeKey?: string;
+    pageIndexOffset?: number;
+    filterHandling?: 'standard' | 'nested_string';
+    nestedStringConfig?: NestedStringConfig;
+}
+interface TableConfig {
+    columns: TableColumn[];
+    apiUrl: string;
+    dataResponsePath?: string;
+    filters?: TableFilter[];
+    filterData?: {
+        [key: string]: any[];
+    };
+    pagination?: PaginationConfig;
+    actions?: TableAction[];
+    topBarButtons?: TableAction[];
+    sortBy?: string;
+    orderBy?: 'ASC' | 'DESC';
+    theme?: TableTheme;
+    requestParams?: Function;
+    selectable?: boolean;
+    queryParamsConfig?: QueryParamsConfig;
+    labels?: TableLabels;
+    searchConfig?: SearchConfig;
+    maxHeight?: string;
+    stickyHeader?: boolean;
+    stickyColumnCount?: number;
+}
+interface SearchConfig {
+    enabled: boolean;
+    searchKey?: string;
+    debounceTime?: number;
+    handling?: 'standard' | 'nested_string';
+}
+interface TableLabels {
+    searchPlaceholder?: string;
+    actionColumnHeader?: string;
+    noDataMessage?: string;
+    itemsPerPageLabel?: string;
+    defaultConfirmationMessage?: string;
+}
+
+declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    private http;
+    private router;
+    private cdr;
+    private ngZone;
+    config: TableConfig;
+    action: EventEmitter<{
+        action: TableAction;
+        row: any;
+    }>;
+    topAction: EventEmitter<TableAction>;
+    filterChange: EventEmitter<{
+        key: string;
+        value: any;
+    }>;
+    rowSelect: EventEmitter<any[]>;
+    data: any[];
+    totalItems: number;
+    currentPage: number;
+    loading: boolean;
+    activeSort: {
+        key: string;
+        direction: 'ASC' | 'DESC';
+    };
+    activeFilters: {
+        [key: string]: any;
+    };
+    searchTerm: string;
+    selectedRows: any[];
+    stickyColumnStyles: {
+        [key: string]: any;
+    };
+    hasStickyColumns: boolean;
+    searchSubject: Subject<string>;
+    stickyHeaders: QueryList<ElementRef>;
+    private resizeObserver;
+    private locale;
+    constructor(http: HttpClient, router: Router, cdr: ChangeDetectorRef, ngZone: NgZone);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private setupResizeObserver;
+    private observeHeaders;
+    loadData(): void;
+    onPageChange(page: number): void;
+    onPageSizeChange(size: number): void;
+    onSort(col: TableColumn): void;
+    onSearch(event: Event): void;
+    onFilterChange(key: string, event: Event): void;
+    onAction(action: TableAction, row: any): void;
+    onTopAction(action: TableAction): void;
+    onSelectAll(event: Event): void;
+    onRowSelect(row: any): void;
+    updateSelectedRows(): void;
+    getCellValue(row: any, col: TableColumn): any;
+    getBadgeClass(row: any, col: TableColumn): string;
+    getSortIcon(key: string): string;
+    private replaceParams;
+    private loadFilterOptions;
+    private getValueByPath;
+    private calculateStickyPositions;
+    private toTitleCase;
+    get columnCount(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; }, never, never, false, never>;
+}
+
+declare class SmartTableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartTableModule, [typeof SmartTableComponent], [typeof i2$1.CommonModule, typeof i3$1.FormsModule, typeof PaginationModule, typeof ButtonModule], [typeof SmartTableComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SmartTableModule>;
+}
+
+export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CardType1Component, CardType2Component, CardsModule, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, FilterSidebarComponent, FilterSidebarModule, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, SharedUiModule, SmartTableComponent, SmartTableModule, SummaryCardComponent, SummaryCardModule, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
+export type { AlertVariant, ButtonVariant, CardType1Config, CardType2Config, ConfirmationModalConfig, FieldType, FilterChangeEvent, FilterConfig, FilterOutput, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOption, FilterSidebarOutput, FilterSidebarSection, FilterSidebarTab, FormConfig, FormField, FormOption, FormSection, IconInput, JsonFieldConfig, JsonFormConfig, KeyType, NavItem, NavStyleConfig, NestedStringConfig, OptionConfig, OptionDTO, PaginationConfig, PaginationLabels, QueryParamsConfig, SearchConfig, SummaryCardConfig, SummaryCardMeta, TableAction, TableColumn, TableConfig, TableFilter, TableLabels, TableOption, TableTheme, UIConfig, UISubType, UIType, UploadedFile, ValidationRules };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",
@@ -13,7 +13,7 @@
     "@angular/platform-browser-dynamic": "20.3.15",
     "@angular/router": "20.3.15",
     "rxjs": "7.8.0",
-    "zone.js": "0.14.10"
+    "zone.js": "~0.14.0 || ~0.15.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/src/lib/modules/smart-table/smart-table.theme.scss

@@ -0,0 +1,214 @@
+@use 'sass:map';
+
+// Default Smart Table Theme
+$smart-table-theme-defaults: (
+  // Font & General
+  font-family: ('Roboto', sans-serif),
+  font-size: 14px,
+  text-color: #333333,
+  border-radius: 8px,
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05),
+
+  // Table Structure
+  table-bg: #ffffff,
+  table-padding: 1rem,
+  cell-padding: 1rem,
+  
+  // Borders
+  table-border: 1px solid #e0e0e0,
+  row-border: 1px solid #f0f0f0,
+  header-border: 1px solid #e0e0e0,
+
+  // Row Colors
+  row-bg: #ffffff,
+  row-hover-bg: #f9f9f9,
+  row-selected-bg: #f3e5f5,
+
+  // Header Styling
+  header-bg: #f5f5f5,
+  header-color: #333333,
+  header-font-weight: 500,
+  header-font-size: 14px,
+  header-transform: none, // uppercase, capitalize, etc.
+
+  // Toolbar
+  toolbar-bg: #ffffff,
+  toolbar-padding: 1rem,
+  toolbar-border-bottom: 1px solid #e0e0e0,
+  toolbar-gap: 1rem,
+  
+  // Search Input
+  search-bg: #ffffff,
+  search-border: 1px solid #e0e0e0,
+  search-radius: 4px,
+  search-padding: 0.5rem 0.5rem 0.5rem 2rem,
+  search-width: 250px,
+  search-icon-color: #999,
+  
+  // Filter Dropdowns
+  filter-bg: #ffffff,
+  filter-border: 1px solid #e0e0e0,
+  filter-radius: 4px,
+  filter-padding: 0.5rem,
+  filter-font-size: 14px,
+  filter-color: #333,
+
+  // Checkbox
+  checkbox-color: #6200EE,
+  checkbox-size: 18px,
+
+  // Badges (Status)
+  badge-radius: 12px,
+  badge-padding: 4px 12px,
+  badge-font-size: 12px,
+  badge-font-weight: 500,
+  
+  // Badge Variants (Backgrounds)
+  badge-success-bg: #e8f5e9,
+  badge-success-color: #2e7d32,
+  badge-warning-bg: #fff3e0,
+  badge-warning-color: #ef6c00,
+  badge-danger-bg: #ffebee,
+  badge-danger-color: #c62828,
+  badge-info-bg: #e3f2fd,
+  badge-info-color: #1565c0,
+  badge-neutral-bg: #f5f5f5,
+  badge-neutral-color: #616161,
+
+  // Pagination Container
+  pagination-padding: 1rem,
+  pagination-border-top: none,
+
+  // Action Menu (Kebab - optional implementation detail)
+  action-menu-bg: #ffffff,
+  action-menu-shadow: 0 4px 6px rgba(0,0,0,0.1),
+
+  // Loader
+  loader-color: #6200EE,
+  // Scrollbar
+  scrollbar-width: 8px,
+  scrollbar-height: 8px,
+  scrollbar-track-bg: #f1f1f1,
+  scrollbar-track-radius: 4px,
+  scrollbar-thumb-bg: #c1c1c1,
+  scrollbar-thumb-radius: 4px,
+  scrollbar-thumb-hover-bg: #a8a8a8,
+
+  // Sticky Columns
+  sticky-shadow: 2px 0 5px -2px rgba(0,0,0,0.1),
+  sticky-border-right: 1px solid rgba(0,0,0,0.05),
+
+  // Spinner
+  spinner-border-color: rgba(0, 0, 0, 0.1),
+  
+  // No Data
+  no-data-color: #888888,
+  
+  // Sort Icon
+  sort-icon-size: 0.8em
+);
+
+@mixin smart-table-theme($theme: ()) {
+  $theme: map.merge($smart-table-theme-defaults, $theme);
+
+  // --- General ---
+  --st-font-family: #{map.get($theme, font-family)};
+  --st-font-size: #{map.get($theme, font-size)};
+  --st-text-color: #{map.get($theme, text-color)};
+  --st-border-radius: #{map.get($theme, border-radius)};
+  --st-box-shadow: #{map.get($theme, box-shadow)};
+
+  // --- Table Layout ---
+  --st-table-bg: #{map.get($theme, table-bg)};
+  --st-table-padding: #{map.get($theme, table-padding)};
+  --st-cell-padding: #{map.get($theme, cell-padding)};
+  
+  // --- Borders ---
+  --st-table-border: #{map.get($theme, table-border)};
+  --st-row-border: #{map.get($theme, row-border)};
+  
+  // --- Rows ---
+  --st-row-bg: #{map.get($theme, row-bg)};
+  --st-row-hover-bg: #{map.get($theme, row-hover-bg)};
+  --st-row-selected-bg: #{map.get($theme, row-selected-bg)};
+
+  // --- Header ---
+  --st-header-bg: #{map.get($theme, header-bg)};
+  --st-header-color: #{map.get($theme, header-color)};
+  --st-header-weight: #{map.get($theme, header-font-weight)};
+  --st-header-size: #{map.get($theme, header-font-size)};
+  --st-header-transform: #{map.get($theme, header-transform)};
+  --st-header-border: #{map.get($theme, header-border)};
+
+  // --- Toolbar ---
+  --st-toolbar-bg: #{map.get($theme, toolbar-bg)};
+  --st-toolbar-padding: #{map.get($theme, toolbar-padding)};
+  --st-toolbar-border-bottom: #{map.get($theme, toolbar-border-bottom)};
+  --st-toolbar-gap: #{map.get($theme, toolbar-gap)};
+
+  // --- Search ---
+  --st-search-bg: #{map.get($theme, search-bg)};
+  --st-search-border: #{map.get($theme, search-border)};
+  --st-search-radius: #{map.get($theme, search-radius)};
+  --st-search-padding: #{map.get($theme, search-padding)};
+  --st-search-width: #{map.get($theme, search-width)};
+  --st-search-icon-color: #{map.get($theme, search-icon-color)};
+
+  // --- Filter ---
+  --st-filter-bg: #{map.get($theme, filter-bg)};
+  --st-filter-border: #{map.get($theme, filter-border)};
+  --st-filter-radius: #{map.get($theme, filter-radius)};
+  --st-filter-padding: #{map.get($theme, filter-padding)};
+  --st-filter-font-size: #{map.get($theme, filter-font-size)};
+  --st-filter-color: #{map.get($theme, filter-color)};
+
+  // --- Checkbox ---
+  --st-checkbox-color: #{map.get($theme, checkbox-color)};
+  --st-checkbox-size: #{map.get($theme, checkbox-size)};
+
+  // --- Badges ---
+  --st-badge-radius: #{map.get($theme, badge-radius)};
+  --st-badge-padding: #{map.get($theme, badge-padding)};
+  --st-badge-font-size: #{map.get($theme, badge-font-size)};
+  --st-badge-font-weight: #{map.get($theme, badge-font-weight)};
+
+  --st-badge-success-bg: #{map.get($theme, badge-success-bg)};
+  --st-badge-success-color: #{map.get($theme, badge-success-color)};
+  --st-badge-warning-bg: #{map.get($theme, badge-warning-bg)};
+  --st-badge-warning-color: #{map.get($theme, badge-warning-color)};
+  --st-badge-danger-bg: #{map.get($theme, badge-danger-bg)};
+  --st-badge-danger-color: #{map.get($theme, badge-danger-color)};
+  --st-badge-info-bg: #{map.get($theme, badge-info-bg)};
+  --st-badge-info-color: #{map.get($theme, badge-info-color)};
+  --st-badge-neutral-bg: #{map.get($theme, badge-neutral-bg)};
+  --st-badge-neutral-color: #{map.get($theme, badge-neutral-color)};
+  
+  // --- Pagination ---
+  --st-pagination-padding: #{map.get($theme, pagination-padding)};
+  --st-pagination-border-top: #{map.get($theme, pagination-border-top)};
+
+  // --- Loader ---
+  --st-loader-color: #{map.get($theme, loader-color)};
+
+  // --- Scrollbar ---
+  --st-scrollbar-width: #{map.get($theme, scrollbar-width)};
+  --st-scrollbar-height: #{map.get($theme, scrollbar-height)};
+  --st-scrollbar-track-bg: #{map.get($theme, scrollbar-track-bg)};
+  --st-scrollbar-track-radius: #{map.get($theme, scrollbar-track-radius)};
+  --st-scrollbar-thumb-bg: #{map.get($theme, scrollbar-thumb-bg)};
+  --st-scrollbar-thumb-radius: #{map.get($theme, scrollbar-thumb-radius)};
+  --st-scrollbar-thumb-hover-bg: #{map.get($theme, scrollbar-thumb-hover-bg)};
+
+  // --- Sticky Columns ---
+  --st-sticky-shadow: #{map.get($theme, sticky-shadow)};
+  --st-sticky-border-right: #{map.get($theme, sticky-border-right)};
+
+  // --- Spinner ---
+  --st-spinner-border-color: #{map.get($theme, spinner-border-color)};
+
+  // --- No Data ---
+  --st-no-data-color: #{map.get($theme, no-data-color)};
+
+  // --- Misc ---
+  --st-sort-icon-size: #{map.get($theme, sort-icon-size)};
+}

package/src/lib/modules/summary-card/summary-card.theme.scss

@@ -173,12 +173,4 @@ $theme-2-summary-card-config: (
     --cc-sc-meta-pill-radius: #{map.get($config, meta-pill-radius)};
     --cc-sc-meta-pill-font-size: #{map.get($config, meta-pill-font-size)};
     --cc-sc-meta-pill-font-weight: #{map.get($config, meta-pill-font-weight)};
-}
-
-.theme-1 .cc-summary-card {
-    @include summary-card-theme();
-}
-
-.theme-2 .cc-summary-card {
-    @include summary-card-theme($theme-2-summary-card-config);
 }

package/src/lib/styles/global.scss

@@ -6,8 +6,6 @@
   --cc-card-padding: 16px;
   --cc-card-shadow: none;
 
-
-
   /* Text Colors */
   --text-color: #333333;
   --text-muted: #666666;