platformcommons-web-lib 1.0.0

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

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

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

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

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

@@ -0,0 +1,11 @@
+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/snackbar/snackbar.theme.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+
+// Default configuration for the snackbar theme
+$default-snackbar-config: (
+  // Shared Layout
+  font-family: ('Inter', sans-serif),
+  font-size: 14px,
+  font-weight: 500,
+  min-width: 300px,
+  padding: 12px 16px,
+  gap: 12px,
+  radius: 8px,
+  shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)),
+  icon-size: 20px,
+  close-icon-size: 16px,
+  
+  // Base Colors
+  bg: #ffffff,
+  color: #1f2937,
+  border: 1px solid transparent,
+
+  // Success 
+  success-bg: #ecfdf5,
+  success-color: #065f46,
+  success-border: #a7f3d0,
+  success-icon-color: #10b981,
+
+  // Error
+  error-bg: #fef2f2,
+  error-color: #991b1b,
+  error-border: #fecaca,
+  error-icon-color: #ef4444,
+
+  // Info
+  info-bg: #eff6ff,
+  info-color: #1e40af,
+  info-border: #bfdbfe,
+  info-icon-color: #3b82f6,
+
+  // Warning
+  warning-bg: #fffbeb,
+  warning-color: #92400e,
+  warning-border: #fde68a,
+  warning-icon-color: #f59e0b
+);
+
+// Mixin to generate CSS variables for the snackbar component
+// E.g., @include cc-snackbar-theme()
+@mixin snackbar-theme($user-config: ()) {
+  // Merge user config with defaults
+  $config: map.merge($default-snackbar-config, $user-config);
+
+  // Structural
+  --cc-sb-font-family: #{map.get($config, font-family)};
+  --cc-sb-font-size: #{map.get($config, font-size)};
+  --cc-sb-font-weight: #{map.get($config, font-weight)};
+  --cc-sb-min-width: #{map.get($config, min-width)};
+  --cc-sb-padding: #{map.get($config, padding)};
+  --cc-sb-gap: #{map.get($config, gap)};
+  --cc-sb-radius: #{map.get($config, radius)};
+  --cc-sb-shadow: #{map.get($config, shadow)};
+  --cc-sb-icon-size: #{map.get($config, icon-size)};
+  --cc-sb-close-icon-size: #{map.get($config, close-icon-size)};
+
+  // Base Defaults
+  --cc-sb-bg: #{map.get($config, bg)};
+  --cc-sb-color: #{map.get($config, color)};
+  --cc-sb-border: #{map.get($config, border)};
+
+  // Success
+  --cc-sb-success-bg: #{map.get($config, success-bg)};
+  --cc-sb-success-color: #{map.get($config, success-color)};
+  --cc-sb-success-border: #{map.get($config, success-border)};
+  --cc-sb-success-icon-color: #{map.get($config, success-icon-color)};
+
+  // Error
+  --cc-sb-error-bg: #{map.get($config, error-bg)};
+  --cc-sb-error-color: #{map.get($config, error-color)};
+  --cc-sb-error-border: #{map.get($config, error-border)};
+  --cc-sb-error-icon-color: #{map.get($config, error-icon-color)};
+
+  // Info
+  --cc-sb-info-bg: #{map.get($config, info-bg)};
+  --cc-sb-info-color: #{map.get($config, info-color)};
+  --cc-sb-info-border: #{map.get($config, info-border)};
+  --cc-sb-info-icon-color: #{map.get($config, info-icon-color)};
+
+// Warning
+  --cc-sb-warning-bg: #{map.get($config, warning-bg)};
+  --cc-sb-warning-color: #{map.get($config, warning-color)};
+  --cc-sb-warning-border: #{map.get($config, warning-border)};
+  --cc-sb-warning-icon-color: #{map.get($config, warning-icon-color)};
+}

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

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

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

@@ -0,0 +1,199 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.cc-summary-card {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    box-sizing: border-box;
+    font-family: var(--cc-sc-font-family, 'Inter', sans-serif);
+    background-color: var(--cc-sc-bg-color, #ffffff);
+    border-radius: var(--cc-sc-border-radius, 8px);
+    border: var(--cc-sc-border, 1px solid #e0e0e0);
+    padding: var(--cc-sc-padding, 16px);
+    box-shadow: var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, 0.05));
+    transition: all var(--cc-sc-transition-duration, 0.2s) ease;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    gap: var(--cc-sc-icon-margin, 1rem);
+
+    &.clickable {
+        cursor: pointer;
+
+        &:hover {
+            transform: var(--cc-sc-hover-transform);
+            box-shadow: var(--cc-sc-hover-shadow);
+        }
+    }
+
+    &.disabled {
+        opacity: var(--cc-sc-disabled-opacity);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    // Icon Section (Left Side)
+    .icon-section {
+        width: var(--cc-sc-icon-box-size);
+        height: var(--cc-sc-icon-box-size);
+        min-width: var(--cc-sc-icon-box-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--cc-sc-icon-radius);
+        background-color: var(--cc-sc-icon-bg);
+        color: var(--cc-sc-icon-color);
+        flex-shrink: 0;
+        align-self: center;
+
+        mat-icon {
+            width: var(--cc-sc-icon-size);
+            height: var(--cc-sc-icon-size);
+            font-size: var(--cc-sc-icon-size);
+            line-height: var(--cc-sc-icon-size);
+        }
+
+        img {
+            width: var(--cc-sc-icon-size);
+            height: var(--cc-sc-icon-size);
+            object-fit: contain;
+        }
+    }
+
+    // Right Section (Header + Value/Meta)
+    .right-section {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+        gap: var(--cc-sc-content-gap, 0.5rem);
+
+        .header {
+            font-size: var(--cc-sc-header-size);
+            font-weight: var(--cc-sc-header-weight);
+            text-transform: var(--cc-sc-header-transform);
+            color: var(--cc-sc-header-color);
+            letter-spacing: var(--cc-sc-header-letter-spacing);
+            line-height: var(--cc-sc-header-line-height);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+        }
+
+        // Value and Meta Row
+        .value-meta-row {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 1rem;
+            flex: 1;
+
+            // Content Section
+            .content-section {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                flex: 1;
+                min-width: 0;
+
+                .value-row {
+                    display: flex;
+                    flex-direction: column;
+                    gap: var(--cc-sc-value-desc-gap);
+
+                    &.inline-layout {
+                        flex-direction: row;
+                        align-items: baseline;
+                        flex-wrap: wrap;
+                    }
+
+                    .value {
+                        font-size: var(--cc-sc-value-size);
+                        font-weight: var(--cc-sc-value-weight);
+                        color: var(--cc-sc-value-color);
+                        line-height: var(--cc-sc-value-line-height);
+                        white-space: nowrap;
+
+                        .value-subtext {
+                            font-size: var(--cc-sc-desc-size);
+                            font-weight: var(--cc-sc-desc-weight);
+                            color: var(--cc-sc-desc-color);
+                            margin-left: 4px;
+                        }
+                    }
+
+                    .description {
+                        font-size: var(--cc-sc-desc-size);
+                        font-weight: var(--cc-sc-desc-weight);
+                        color: var(--cc-sc-desc-color);
+                        line-height: var(--cc-sc-desc-line-height);
+                    }
+                }
+            }
+
+            // Meta Section (Aligned with Value)
+            .meta-section {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                justify-content: flex-start;
+                flex-shrink: 0;
+                gap: 6px;
+
+                .meta-item {
+                    font-size: 0.8125rem; // ~13px
+                    line-height: 1.4;
+                    white-space: nowrap;
+                    text-align: right;
+                    flex-shrink: 0;
+
+                    &.meta-text {
+                        color: var(--cc-sc-desc-color, #64748b);
+                        font-weight: 500;
+                    }
+
+                    &.meta-pill {
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        padding: var(--cc-sc-meta-pill-padding, 4px 12px);
+                        border-radius: var(--cc-sc-meta-pill-radius, 20px);
+                        font-size: var(--cc-sc-meta-pill-font-size, 0.75rem);
+                        font-weight: var(--cc-sc-meta-pill-font-weight, 600);
+                        line-height: 1.2;
+                        background-color: var(--cc-sc-meta-pill-bg, #f1f5f9);
+                        color: var(--cc-sc-meta-pill-color, #475569);
+                    }
+                }
+            }
+        }
+    }
+
+    // Responsive Design
+    @media (max-width: 600px) {
+        .icon-section {
+            margin-right: var(--cc-sc-icon-margin-mobile, 0.75rem);
+        }
+
+        .content-section {
+            .header {
+                font-size: var(--cc-sc-header-size-mobile, 0.7rem);
+            }
+
+            .value-row {
+                .value {
+                    font-size: var(--cc-sc-value-size-mobile, 1.25rem);
+                }
+
+                .description {
+                    font-size: var(--cc-sc-desc-size-mobile, 0.7rem);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,126 @@
+import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+
+export interface SummaryCardConfig {
+    header: string;
+    value: string;
+    description?: string;
+
+    // Icon or Image (mutually exclusive)
+    icon?: string; // Material icon name
+    iconImage?: string; // URL for image icon
+
+    // Layout configurations
+    descriptionPosition?: 'bottom' | 'inline'; // 'bottom' (default) or 'inline' (right side of value)
+
+    // Extended Content
+    valueSubtext?: string; // Text displayed next to the value (e.g. "/ 15 Target")
+    metaData?: SummaryCardMeta[]; // Right-aligned meta information
+
+    // Color configurations
+    valueColor?: string; // Color for the value text
+    headerColor?: string; // Color for the header text
+    descriptionColor?: string; // Color for the description text
+    iconColor?: string; // Color for the icon
+    iconBackgroundColor?: string; // Background color for the icon container
+
+    // Additional styling
+    iconClass?: string; // Additional CSS classes for icon
+    valueClass?: string; // Additional CSS classes for value
+    headerClass?: string; // Additional CSS classes for header
+    descriptionClass?: string; // Additional CSS classes for description
+
+    // Interaction
+    isDisabled?: boolean; // Disable click interaction
+    isClickable?: boolean; // Whether card is clickable (default: true)
+}
+
+export interface SummaryCardMeta {
+    text: string;
+    type?: 'text' | 'pill'; // 'text' (default) or 'pill' (badge style)
+    color?: string; // Text color
+    backgroundColor?: string; // Background color for pill
+    cssClass?: string; // Custom CSS class
+}
+
+export interface SummaryCardLabels {
+    iconAlt: string;
+}
+
+@Component({
+    selector: 'lib-summary-card',
+    templateUrl: './summary-card.component.html',
+    styleUrls: ['./summary-card.component.scss'],
+    standalone: false
+})
+export class SummaryCardComponent {
+    @Input() config!: SummaryCardConfig;
+    @Input() theme?: 'theme-1' | 'theme-2';
+    @Input() labels: any;
+    @Output() cardClick = new EventEmitter<void>();
+
+    constructor() { }
+
+    onCardClick(): void {
+        if (this.config?.isDisabled || this.config?.isClickable === false) {
+            return;
+        }
+        this.cardClick.emit();
+    }
+
+    get cardClasses(): { [key: string]: boolean } {
+        return {
+            'disabled': !!this.config?.isDisabled,
+            'clickable': this.config?.isClickable !== false && !this.config?.isDisabled
+        };
+    }
+
+    get iconStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.iconBackgroundColor) {
+            styles['backgroundColor'] = this.config.iconBackgroundColor;
+        }
+        if (this.config.iconColor) {
+            styles['color'] = this.config.iconColor;
+        }
+        return styles;
+    }
+
+    get headerStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.headerColor) {
+            styles['color'] = this.config.headerColor;
+        }
+        return styles;
+    }
+
+    get valueStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.valueColor) {
+            styles['color'] = this.config.valueColor;
+        }
+        return styles;
+    }
+
+    get descriptionStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.descriptionColor) {
+            styles['color'] = this.config.descriptionColor;
+        }
+        return styles;
+    }
+
+    get isDescriptionInline(): boolean {
+        return this.config.descriptionPosition === 'inline';
+    }
+
+    getMetaStyles(meta: SummaryCardMeta): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (meta.color) {
+            styles['color'] = meta.color;
+        }
+        if (meta.backgroundColor && meta.type === 'pill') {
+            styles['backgroundColor'] = meta.backgroundColor;
+        }
+        return styles;
+    }
+}

package/src/lib/modules/summary-card/summary-card.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { SummaryCardComponent } from './components/summary-card/summary-card.component';
+
+@NgModule({
+    declarations: [
+        SummaryCardComponent
+    ],
+    imports: [
+        CommonModule,
+        MatIconModule
+    ],
+    exports: [
+        SummaryCardComponent
+    ]
+})
+export class SummaryCardModule { }