commons-shared-web-ui 0.0.60 → 0.0.62

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

@@ -0,0 +1,247 @@
+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;
+    };
+    /** Set to false to hide this column. Default: true. Driven by the column configurator. */
+    isEnabled?: boolean;
+    /** Backward-compatible visibility alias, kept in sync with isEnabled by the column configurator. */
+    visible?: boolean;
+    /** Configurator-only flag: when true the column can never be hidden (toggle is replaced by a lock). */
+    lockVisibility?: boolean;
+}
+
+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;
+}
+
+/**
+ * A single condition evaluated against a row to decide action visibility.
+ *
+ * `field` is a path into the row (supports nesting + array index, e.g.
+ * 'status.code', 'subStatus.code', 'name[0].text'). When the resolved value is
+ * an object (e.g. `{ code, name, value }`), it is normalized to its `code`
+ * (then `name`, then `value`) so the SAME rule works whether the API returns
+ * `status: { code: 'ACTIVE' }` or `status: 'ACTIVE'`.
+ *
+ * String comparisons are case-insensitive.
+ */
+export interface VisibilityRule {
+    /** Path into the row, e.g. 'status.code' or just 'status'. */
+    field: string;
+    /** Comparison operator. Default: 'eq'. */
+    operator?: 'eq' | 'neq' | 'in' | 'nin' | 'truthy' | 'falsy';
+    /** Comparison value for 'eq' / 'neq'. */
+    value?: any;
+    /** Comparison list for 'in' / 'nin'. */
+    values?: any[];
+}
+
+/**
+ * Row-aware visibility config shared by actions and action items.
+ * - `visibleWhen`: ALL rules must pass (AND) for the action to show.
+ * - `hiddenWhen`: if ANY rule passes (OR), the action is hidden.
+ * `hiddenWhen` takes precedence over `visibleWhen`. Either may be a single
+ * rule or an array of rules.
+ */
+export interface ActionVisibility {
+    visibleWhen?: VisibilityRule | VisibilityRule[];
+    hiddenWhen?: VisibilityRule | VisibilityRule[];
+}
+
+export interface TableActionItem extends ActionVisibility {
+    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 extends ActionVisibility {
+    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

@@ -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/utils/safe-html.pipe.ts

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

@@ -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>

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/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>