platformcommons-web-lib 1.0.0

package/src/lib/modules/smart-table/models/table-config.model.ts

@@ -0,0 +1,202 @@
+export interface TableOption {
+    label: string;
+    value: any;
+}
+
+export interface TableColumnSubField {
+    key: string;
+    label?: string;
+    dataType: 'text' | 'number' | 'email' | 'select' | 'date';
+    placeholder?: string;
+    editable?: boolean;
+    options?: TableOption[];
+    editConfig?: {
+        disabled?: boolean;
+        defaultValue?: any;
+    };
+}
+
+export 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[]; // For select dataType
+    badgeConfig?: { [key: string]: 'success' | 'warning' | 'danger' | 'info' | 'neutral' }; // Map values to badge variants
+    width?: string;
+    cellClass?: string;
+    headerClass?: string;
+    sticky?: boolean;
+    labelPath?: string; // Path to fetch nested value (e.g. 'user.address.city')
+    emptyValue?: string; // Shown when the cell value is null, undefined, or empty string
+    dateFormat?: string; // Date format (e.g. 'short', 'medium', 'dd/MM/yyyy')
+    clickAction?: 'route' | 'callback';
+    clickRoute?: string; // Route pattern for redirection (e.g. '/users/:id')
+    subFields?: TableColumnSubField[]; // For columns displaying/editing multiple fields
+    editConfig?: {
+        disabled?: boolean;
+        defaultValue?: any;
+    };
+}
+
+export interface TableFilter {
+    key: string;
+    label: string;
+    type: 'select' | 'text' | 'date'; // Added type for future extension
+    options?: TableOption[];
+    apiUrl?: string;
+    apiMethod?: 'GET' | 'POST';
+    apiPayload?: any;
+    labelKey?: string;
+    valueKey?: string;
+    labelPath?: string;
+    valuePath?: string;
+    requestKey?: string;
+    dataPath?: string;
+    handling?: 'standard' | 'nested_string';
+    nestedStringConfig?: NestedStringConfig;
+}
+
+export interface TableActionItem {
+    label: string;
+    type: 'api' | 'callback' | 'route' | 'delete';
+    icon?: string;
+    apiUrl?: string;
+    apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    route?: string;
+    confirmationNeeded?: boolean;
+    confirmationMessage?: string;
+    callback?: (row: any) => void;
+    /** Config for native 'delete' action type — drives the built-in confirmation modal */
+    deleteConfig?: {
+        apiUrl: string;              // URL with :id placeholder e.g. 'gateway/service/api/v1/items/:id'
+        idField?: string;            // Row field used as id (default: 'id')
+        modalTitle?: string;
+        modalMessage?: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+    };
+}
+
+export interface TableAction {
+    label: string;
+    type: 'api' | 'callback' | 'route' | 'edit' | 'dropdown';
+    icon?: string; // FontAwesome class or similar
+    btnVariant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'warning' | 'success' | 'danger-outline'; // utilizing button variants
+    apiUrl?: string;
+    apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    route?: string;
+    confirmationNeeded?: boolean;
+    confirmationMessage?: string;
+    callback?: (row: any) => void;
+    items?: TableActionItem[]; // For dropdown type
+}
+
+export interface PaginationConfig {
+    enabled: boolean;
+    pageSize: number;
+    pageSizeOptions: number[];
+    totalCountConfig?: {
+        source: 'same' | 'separate';
+        apiUrl?: string;
+        responsePath?: string;
+    };
+}
+
+export interface TableTheme {
+    primaryColor?: string;
+    headerBg?: string;
+    headerColor?: string;
+    rowHoverBg?: string;
+    borderColor?: string;
+}
+
+export interface NestedStringConfig {
+    paramName: string;
+    baseValue?: string;
+    separator: string;
+    assignment: string;
+}
+
+export interface QueryParamsConfig {
+    pageKey?: string;
+    sizeKey?: string;
+    pageIndexOffset?: number; // e.g. -1 for 0-based index from 1-based UI
+    filterHandling?: 'standard' | 'nested_string';
+    nestedStringConfig?: NestedStringConfig;
+}
+
+export interface TableConfig {
+    columns: TableColumn[];
+    apiUrl?: string; // Optional when tableData is provided externally
+    apiMethod?: 'GET' | 'POST';
+    apiPayload?: any;
+    dataResponsePath?: string;
+    filters?: TableFilter[];
+    filterData?: { [key: string]: any[] };
+    pagination?: PaginationConfig;
+    actions?: TableAction[]; // Row level actions
+    topBarButtons?: TableAction[]; // Buttons above the table
+    sortBy?: string;
+    orderBy?: 'ASC' | 'DESC';
+    theme?: TableTheme;
+    requestParams?: Function;
+    selectable?: boolean; // Checkbox selection
+    queryParamsConfig?: QueryParamsConfig;
+    labels?: TableLabels;
+    searchConfig?: SearchConfig;
+    maxHeight?: string;
+    stickyHeader?: boolean;
+
+    stickyColumnCount?: number;
+    token?: string; // Full token string (e.g. "Bearer ...")
+    tokenHeader?: string; // Header key (default: "Authorization")
+    editingRowClass?: string; // Optional CSS class to apply to rows being edited
+    /** Fallback text for any cell whose value is null, undefined, or empty string.
+     *  Overridden per-column via TableColumn.emptyValue. Library default: '-' */
+    emptyValue?: string;
+}
+
+export interface SearchConfig {
+    enabled: boolean;
+    searchKey?: string; // Query param key (default: 'search')
+    debounceTime?: number; // ms (default: 300)
+    handling?: 'standard' | 'nested_string'; // standard: ?search=term, nested_string: ?params=SEARCH_TERM=term
+}
+
+export interface TableLabels {
+    searchPlaceholder?: string;
+    actionColumnHeader?: string;
+    noDataMessage?: string;
+    itemsPerPageLabel?: string;
+    defaultConfirmationMessage?: string;
+    saveLabel?: string;
+    cancelLabel?: string;
+    addLabel?: string;
+    /** Variant for the Add button (new row). Defaults to 'danger'. */
+    addButtonVariant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'warning' | 'success' | 'danger-outline';
+    /** Variant for the Save button (edit row). Defaults to 'primary'. */
+    saveButtonVariant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'warning' | 'success' | 'danger-outline';
+}
+
+/**
+ * Emitted by the SmartTableComponent when operating in external-data mode
+ * (i.e. when [tableData] input is provided by the parent).
+ * The parent is responsible for fetching updated data based on this event
+ * and providing it back via [tableData] and [totalItemsCount].
+ */
+export interface TableDataChangeEvent {
+    page: number;
+    pageSize: number;
+    sortBy?: string;
+    orderBy?: 'ASC' | 'DESC';
+    searchTerm?: string;
+    filters?: { [key: string]: any };
+}
+
+export interface TableRowSaveEvent {
+    row: any;
+    isNew: boolean;
+}

package/src/lib/modules/smart-table/smart-table.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SmartTableComponent } from './components/smart-table/smart-table.component';
+import { PaginationModule } from '../pagination/pagination.module';
+import { ButtonModule } from '../button/button.module';
+import { MaterialModule } from '../material/material.module';
+import { ConfirmationModalModule } from '../confirmation-modal/confirmation-modal.module';
+import { SafeHtmlPipe } from './utils/safe-html.pipe';
+
+
+@NgModule({
+  declarations: [
+    SmartTableComponent,
+    SafeHtmlPipe
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    PaginationModule,
+    ButtonModule,
+    MaterialModule,
+    ConfirmationModalModule
+  ],
+  exports: [
+    SmartTableComponent
+  ]
+})
+export class SmartTableModule { }
+

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

@@ -0,0 +1,335 @@
+@use 'sass:map';
+@use '../confirmation-modal/confirmation-modal.theme' as confirmation-modal;
+
+// 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,
+  cell-hover-bg: #f0f0f0,
+  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: #f5f5f5,
+  search-border: none,
+  search-radius: 8px,
+  search-padding: 0.5rem 0.5rem 0.5rem 2rem,
+  search-wrapper-padding: 0 0.875rem,
+  search-height: 36px,
+  search-min-width: 200px,
+  search-width: auto,
+  search-icon-color: #888,
+  search-placeholder-color: #999,
+
+  // Filter Dropdowns (custom dropdown, not native select)
+  filter-bg: #ffffff,
+  filter-border: 1px solid #e0e0e0,
+  filter-radius: 8px,
+  filter-padding: 0.5rem,
+  filter-trigger-padding: 0 0.75rem,
+  filter-height: 36px,
+  filter-font-size: 14px,
+  filter-color: #555,
+  filter-hover-bg: #fafafa,
+  filter-hover-border-color: #bbb,
+  filter-active-border-color: #999,
+  filter-selected-color: #222,
+  filter-selected-border-color: #333,
+  filter-chevron-color: #999,
+  // Filter panel (dropdown drawer)
+  filter-panel-bg: #ffffff,
+  filter-panel-border: 1px solid #ebebeb,
+  filter-panel-radius: 12px,
+  filter-panel-shadow: (0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06)),
+  filter-panel-min-width: 180px,
+  filter-panel-padding: 6px,
+  filter-option-padding: 8px 12px,
+  filter-option-radius: 7px,
+  filter-option-hover-bg: #f5f5f5,
+  filter-option-selected-bg: #f0f0f0,
+  filter-option-selected-color: #111,
+
+  // Checkbox
+  checkbox-color: #e63e30,
+  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,
+
+  // Frozen columns (checkbox col, first-data col, actions col)
+  frozen-col-bg: #f9f9f9,
+
+  // Actions column shadow (right-side pinned column)
+  actions-col-shadow: -4px 0 8px rgba(0, 0, 0, 0.06),
+
+  // Action circle (three-dot button)
+  action-circle-size: 32px,
+
+  // Row action dropdown menu
+  dropdown-min-width: 150px,
+  dropdown-bg: #ffffff,
+  dropdown-border: 1px solid #e0e0e0,
+  dropdown-radius: 8px,
+  dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
+  dropdown-padding: 4px,
+  dropdown-item-padding: 8px 12px,
+  dropdown-item-radius: 6px,
+  dropdown-item-hover-bg: #f5f5f5,
+
+  // Selection count strip
+  selection-strip-bg: #fafafa,
+  selection-strip-border: 1px solid rgba(0, 0, 0, 0.08),
+  selection-strip-padding: 0.45rem 1rem,
+  selection-count-color: #444,
+  selection-count-font-size: 13px,
+  selection-count-font-weight: 500,
+
+  // 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,
+
+  // Inline inputs theme values
+  cell-input-border: 1px solid #dee2e6,
+  cell-input-focus-outline-color: #00bcd4,
+  cell-input-bg: #fcfcfc,
+  cell-select-bg: #fcfcfc
+);
+
+@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-cell-hover-bg: #{map.get($theme, cell-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-wrapper-padding: #{map.get($theme, search-wrapper-padding)};
+  --st-search-height: #{map.get($theme, search-height)};
+  --st-search-min-width: #{map.get($theme, search-min-width)};
+  --st-search-width: #{map.get($theme, search-width)};
+  --st-search-icon-color: #{map.get($theme, search-icon-color)};
+  --st-search-placeholder-color: #{map.get($theme, search-placeholder-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-trigger-padding: #{map.get($theme, filter-trigger-padding)};
+  --st-filter-height: #{map.get($theme, filter-height)};
+  --st-filter-font-size: #{map.get($theme, filter-font-size)};
+  --st-filter-color: #{map.get($theme, filter-color)};
+  --st-filter-hover-bg: #{map.get($theme, filter-hover-bg)};
+  --st-filter-hover-border-color: #{map.get($theme, filter-hover-border-color)};
+  --st-filter-active-border-color: #{map.get($theme, filter-active-border-color)};
+  --st-filter-selected-color: #{map.get($theme, filter-selected-color)};
+  --st-filter-selected-border-color: #{map.get($theme, filter-selected-border-color)};
+  --st-filter-chevron-color: #{map.get($theme, filter-chevron-color)};
+  --st-filter-panel-bg: #{map.get($theme, filter-panel-bg)};
+  --st-filter-panel-border: #{map.get($theme, filter-panel-border)};
+  --st-filter-panel-radius: #{map.get($theme, filter-panel-radius)};
+  --st-filter-panel-shadow: #{map.get($theme, filter-panel-shadow)};
+  --st-filter-panel-min-width: #{map.get($theme, filter-panel-min-width)};
+  --st-filter-panel-padding: #{map.get($theme, filter-panel-padding)};
+  --st-filter-option-padding: #{map.get($theme, filter-option-padding)};
+  --st-filter-option-radius: #{map.get($theme, filter-option-radius)};
+  --st-filter-option-hover-bg: #{map.get($theme, filter-option-hover-bg)};
+  --st-filter-option-selected-bg: #{map.get($theme, filter-option-selected-bg)};
+  --st-filter-option-selected-color: #{map.get($theme, filter-option-selected-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)};
+
+  // --- Frozen Columns ---
+  --st-frozen-col-bg: #{map.get($theme, frozen-col-bg)};
+  --st-actions-col-shadow: #{map.get($theme, actions-col-shadow)};
+
+  // --- Action Circle ---
+  --st-action-circle-size: #{map.get($theme, action-circle-size)};
+
+  // --- Row Action Dropdown ---
+  --st-dropdown-min-width: #{map.get($theme, dropdown-min-width)};
+  --st-dropdown-bg: #{map.get($theme, dropdown-bg)};
+  --st-dropdown-border: #{map.get($theme, dropdown-border)};
+  --st-dropdown-radius: #{map.get($theme, dropdown-radius)};
+  --st-dropdown-shadow: #{map.get($theme, dropdown-shadow)};
+  --st-dropdown-padding: #{map.get($theme, dropdown-padding)};
+  --st-dropdown-item-padding: #{map.get($theme, dropdown-item-padding)};
+  --st-dropdown-item-radius: #{map.get($theme, dropdown-item-radius)};
+  --st-dropdown-item-hover-bg: #{map.get($theme, dropdown-item-hover-bg)};
+
+  // --- Selection Strip ---
+  --st-selection-strip-bg: #{map.get($theme, selection-strip-bg)};
+  --st-selection-strip-border: #{map.get($theme, selection-strip-border)};
+  --st-selection-strip-padding: #{map.get($theme, selection-strip-padding)};
+  --st-selection-count-color: #{map.get($theme, selection-count-color)};
+  --st-selection-count-font-size: #{map.get($theme, selection-count-font-size)};
+  --st-selection-count-font-weight: #{map.get($theme, selection-count-font-weight)};
+
+  // --- Inline Edit Controls ---
+  --st-cell-input-border: #{map.get($theme, cell-input-border)};
+  --st-cell-input-focus-outline-color: #{map.get($theme, cell-input-focus-outline-color)};
+  --st-cell-input-bg: #{map.get($theme, cell-input-bg)};
+  --st-cell-select-bg: #{map.get($theme, cell-select-bg)};
+
+  // --- Confirmation Modal (bundled so delete modal renders correctly) ---
+  @include confirmation-modal.confirmation-modal-theme();
+}

package/src/lib/modules/smart-table/utils/safe-html.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+/**
+ * Sanitizes and bypasses Angular's DomSanitizer security for HTML content.
+ * Prevents execution of unsafe scripts/attributes while allowing safe rendering of formatting tags in [innerHTML].
+ */
+@Pipe({
+    name: 'safeHtml',
+    standalone: false
+})
+export class SafeHtmlPipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) { }
+
+    transform(value: string): SafeHtml | null {
+        if (!value) {
+            return '';
+        }
+        const cleaned = this.sanitizer.sanitize(SecurityContext.HTML, value);
+        return this.sanitizer.bypassSecurityTrustHtml(cleaned || '');
+    }
+}

package/src/lib/modules/smart-table/utils/smart-table.utils.ts

@@ -0,0 +1,18 @@
+export function appendBaseUrlRecursively(obj: any, baseURL: string): void {
+  if (obj && typeof obj === 'object') {
+    if (obj.apiUrl && typeof obj.apiUrl === 'string' && !obj.apiUrl.startsWith('http://') && !obj.apiUrl.startsWith('https://')) {
+      let finalApiUrl = obj.apiUrl;
+      if (baseURL.endsWith('/') && finalApiUrl.startsWith('/')) {
+        finalApiUrl = finalApiUrl.substring(1);
+      } else if (!baseURL.endsWith('/') && !finalApiUrl.startsWith('/')) {
+        finalApiUrl = '/' + finalApiUrl;
+      }
+      obj.apiUrl = baseURL + finalApiUrl;
+    }
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        appendBaseUrlRecursively(obj[key], baseURL);
+      }
+    }
+  }
+}

package/src/lib/modules/snackbar/components/snackbar.component.html

@@ -0,0 +1,41 @@
+<div class="cc-snackbar-container" [ngClass]="variantClass">
+  <div class="cc-snackbar-icon">
+    <!-- Success Icon -->
+    <svg *ngIf="data.variant === 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+      <polyline points="22 4 12 14.01 9 11.01"></polyline>
+    </svg>
+    
+    <!-- Error Icon -->
+    <svg *ngIf="data.variant === 'error'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"></circle>
+      <line x1="15" y1="9" x2="9" y2="15"></line>
+      <line x1="9" y1="9" x2="15" y2="15"></line>
+    </svg>
+    
+    <!-- Warning Icon -->
+    <svg *ngIf="data.variant === 'warning'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+      <line x1="12" y1="9" x2="12" y2="13"></line>
+      <line x1="12" y1="17" x2="12.01" y2="17"></line>
+    </svg>
+    
+    <!-- Info Icon -->
+    <svg *ngIf="data.variant === 'info' || !data.variant" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"></circle>
+      <line x1="12" y1="16" x2="12" y2="12"></line>
+      <line x1="12" y1="8" x2="12.01" y2="8"></line>
+    </svg>
+  </div>
+  
+  <div class="cc-snackbar-message">
+    {{ data.message }}
+  </div>
+
+  <button *ngIf="data.showCloseButton" class="cc-snackbar-close" (click)="snackBarRef.dismiss()">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18"></line>
+      <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+  </button>
+</div>