commons-shared-web-ui 0.0.50 → 0.0.51

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

@@ -1,207 +0,0 @@
-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;
-    /** Set to false to hide this action item. Default: true */
-    isEnabled?: boolean;
-    /** 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
-    /** Set to false to hide this action. Default: true */
-    isEnabled?: boolean;
-}
-
-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
-    minimumCharacter?: number; // Min chars before the API is called (default: 3). Clearing the input always re-triggers.
-}
-
-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

@@ -1,30 +0,0 @@
-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/utils/safe-html.pipe.ts

@@ -1,28 +0,0 @@
-import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-
-/**
- * Marks rich-text HTML (e.g. from a smart-table "html" column, always sourced from this
- * app's own rich-text editor output, never arbitrary external/user-supplied markup) as
- * trusted so [innerHTML] renders it without Angular's default HTML sanitizer stripping it.
- *
- * Deliberately does NOT run the value through DomSanitizer.sanitize(SecurityContext.HTML, ...)
- * first — that sanitizer strips `style` attributes entirely (they're not in its allowlist),
- * which silently destroyed rich-text formatting like text color and highlight color while
- * leaving semantic-tag formatting (bold/italic/underline) untouched, since only tags — not
- * inline styles — survive that pass.
- */
-@Pipe({
-    name: 'safeHtml',
-    standalone: false
-})
-export class SafeHtmlPipe implements PipeTransform {
-    constructor(private sanitizer: DomSanitizer) { }
-
-    transform(value: string): SafeHtml | null {
-        if (!value) {
-            return '';
-        }
-        return this.sanitizer.bypassSecurityTrustHtml(value);
-    }
-}

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

@@ -1,18 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<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>

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

@@ -1,99 +0,0 @@
-.cc-snackbar-container {
-  display: flex;
-  align-items: center;
-  gap: var(--cc-sb-gap, 12px);
-  padding: var(--cc-sb-padding, 12px 16px);
-  border-radius: var(--cc-sb-radius, 8px);
-  box-shadow: var(--cc-sb-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
-  font-family: var(--cc-sb-font-family, 'Inter', sans-serif);
-  font-size: var(--cc-sb-font-size, 14px);
-  font-weight: var(--cc-sb-font-weight, 500);
-  background: var(--cc-sb-bg, #ffffff);
-  color: var(--cc-sb-color, #1f2937);
-  border: var(--cc-sb-border, 1px solid transparent);
-  min-width: var(--cc-sb-min-width, 300px);
-
-  &.snackbar-success {
-    background: var(--cc-sb-success-bg, #ecfdf5);
-    color: var(--cc-sb-success-color, #065f46);
-    border-color: var(--cc-sb-success-border, #a7f3d0);
-    .cc-snackbar-icon { color: var(--cc-sb-success-icon-color, #10b981); }
-  }
-
-  &.snackbar-error {
-    background: var(--cc-sb-error-bg, #fef2f2);
-    color: var(--cc-sb-error-color, #991b1b);
-    border-color: var(--cc-sb-error-border, #fecaca);
-    .cc-snackbar-icon { color: var(--cc-sb-error-icon-color, #ef4444); }
-  }
-
-  &.snackbar-warning {
-    background: var(--cc-sb-warning-bg, #fffbeb);
-    color: var(--cc-sb-warning-color, #92400e);
-    border-color: var(--cc-sb-warning-border, #fde68a);
-    .cc-snackbar-icon { color: var(--cc-sb-warning-icon-color, #f59e0b); }
-  }
-
-  &.snackbar-info {
-    background: var(--cc-sb-info-bg, #eff6ff);
-    color: var(--cc-sb-info-color, #1e40af);
-    border-color: var(--cc-sb-info-border, #bfdbfe);
-    .cc-snackbar-icon { color: var(--cc-sb-info-icon-color, #3b82f6); }
-  }
-
-  .cc-snackbar-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-
-    svg {
-      width: var(--cc-sb-icon-size, 20px);
-      height: var(--cc-sb-icon-size, 20px);
-    }
-  }
-
-  .cc-snackbar-message {
-    flex-grow: 1;
-    line-height: 1.4;
-  }
-
-  .cc-snackbar-close {
-    background: transparent;
-    border: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: currentcolor;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    svg {
-      width: var(--cc-sb-close-icon-size, 16px);
-      height: var(--cc-sb-close-icon-size, 16px);
-    }
-  }
-}
-
-// Override Angular Material default snackbar surface
-::ng-deep .cc-snackbar-panel {
-  .mdc-snackbar__surface {
-    background: transparent !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    border-radius: 0 !important;
-  }
-
-  &.mat-snack-bar-container {
-    background: transparent !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-  }
-}

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

@@ -1,18 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
-import { SnackbarConfig } from '../models/snackbar.models';
-
-@Component({
-  selector: 'lib-snackbar',
-  templateUrl: './snackbar.component.html',
-  styleUrls: ['./snackbar.component.scss'],
-  standalone: false
-})
-export class SnackbarComponent {
-  public data: SnackbarConfig = inject(MAT_SNACK_BAR_DATA);
-  public snackBarRef: MatSnackBarRef<SnackbarComponent> = inject(MatSnackBarRef);
-
-  get variantClass(): string {
-    return `snackbar-${this.data.variant || 'info'}`;
-  }
-}

package/src/lib/modules/snackbar/models/snackbar.models.ts

@@ -1,10 +0,0 @@
-export type SnackbarVariant = 'success' | 'error' | 'warning' | 'info';
-
-export interface SnackbarConfig {
-  message: string;
-  variant?: SnackbarVariant;
-  duration?: number;
-  horizontalPosition?: 'start' | 'center' | 'end' | 'left' | 'right';
-  verticalPosition?: 'top' | 'bottom';
-  showCloseButton?: boolean;
-}

package/src/lib/modules/snackbar/services/snackbar.service.ts

@@ -1,40 +0,0 @@
-import { Injectable } from '@angular/core';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { SnackbarConfig } from '../models/snackbar.models';
-import { SnackbarComponent } from '../components/snackbar.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SnackbarService {
-
-  constructor(private snackBar: MatSnackBar) {}
-
-  show(config: SnackbarConfig): void {
-    const matConfig: MatSnackBarConfig = {
-      duration: config.duration ?? 5000,
-      horizontalPosition: config.horizontalPosition ?? 'right',
-      verticalPosition: config.verticalPosition ?? 'top',
-      panelClass: ['cc-snackbar-panel', `cc-snackbar-${config.variant || 'info'}`],
-      data: config // Pass the entire config down to the component
-    };
-    
-    this.snackBar.openFromComponent(SnackbarComponent, matConfig);
-  }
-
-  success(message: string, duration?: number): void {
-    this.show({ message, variant: 'success', duration });
-  }
-
-  error(message: string, duration?: number): void {
-    this.show({ message, variant: 'error', duration });
-  }
-
-  warning(message: string, duration?: number): void {
-    this.show({ message, variant: 'warning', duration });
-  }
-
-  info(message: string, duration?: number): void {
-    this.show({ message, variant: 'info', duration });
-  }
-}

package/src/lib/modules/snackbar/snackbar.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { SnackbarComponent } from './components/snackbar.component';
-
-@NgModule({
-  declarations: [SnackbarComponent],
-  imports: [CommonModule, MatSnackBarModule],
-  exports: [SnackbarComponent]
-})
-export class SnackbarModule {}

package/src/lib/modules/summary-card/components/summary-card/summary-card.component.html

@@ -1,47 +0,0 @@
-<div class="cc-summary-card" (click)="onCardClick()">
-    <!-- Icon Section (Left Side) -->
-    <div class="icon-section" *ngIf="config.icon || config.iconImage" [ngClass]="config.iconClass"
-        [ngStyle]="iconStyles">
-        <mat-icon *ngIf="config.icon">{{ config.icon }}</mat-icon>
-        <img *ngIf="!config.icon && config.iconImage" [src]="config.iconImage" [alt]="labels.iconAlt">
-    </div>
-
-    <!-- Right Section (Header + Value/Meta) -->
-    <div class="right-section">
-        <!-- Header (Full Width on Right) -->
-        <div class="header" [ngClass]="config.headerClass" [ngStyle]="headerStyles">
-            {{ config.header }}
-        </div>
-
-        <!-- Value and Meta Row -->
-        <div class="value-meta-row">
-            <!-- Content Section -->
-            <div class="content-section">
-                <!-- Value Row (with optional inline description) -->
-                <div class="value-row" [class.inline-layout]="isDescriptionInline">
-                    <div class="value-container">
-                        <div class="value" [ngClass]="config.valueClass" [ngStyle]="valueStyles">
-                            {{ config.value }}
-                            <span *ngIf="config.valueSubtext" class="value-subtext">{{ config.valueSubtext }}</span>
-                        </div>
-                    </div>
-
-                    <!-- Description (inline or bottom based on config) -->
-                    <div class="description" *ngIf="config.description" [ngClass]="config.descriptionClass"
-                        [ngStyle]="descriptionStyles">
-                        {{ config.description }}
-                    </div>
-                </div>
-            </div>
-
-            <!-- Meta/Status Section (Aligned with Value) -->
-            <div class="meta-section" *ngIf="config.metaData && config.metaData.length > 0">
-                <div *ngFor="let meta of config.metaData" class="meta-item"
-                    [ngClass]="[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']"
-                    [ngStyle]="getMetaStyles(meta)">
-                    {{ meta.text }}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>