@c10t/nice-component-library 0.0.30 → 0.0.32

package/enums/column-type.enum.d.ts

@@ -8,6 +8,7 @@ export declare enum ColumnTypeEnum {
     BASE64 = "BASE64",
     IMG = "IMG",
     IMG_NO_SECURE = "IMG_NO_SECURE",
+    HTML = "HTML",
     BUTTON = "BUTTON",
     INPUT = "INPUT",
     LINK = "LINK",

package/fesm2022/c10t-nice-component-library.mjs

@@ -3,7 +3,7 @@ import { FormGroup, FormArray, FormControl, Validators, NgControl, NG_VALUE_ACCE
 import * as i1$3 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpResponse, HttpResponseBase } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Self, Optional, Inject, Component, Injectable, Directive, EventEmitter, Output, Input, Host, Pipe, HostListener, forwardRef, ViewChild, ViewChildren, HostBinding, ViewEncapsulation, NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { InjectionToken, Self, Optional, Inject, Component, Injectable, Directive, EventEmitter, Output, Input, Host, Pipe, SecurityContext, HostListener, forwardRef, ViewChild, ViewChildren, HostBinding, ViewEncapsulation, NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1 from '@ngx-translate/core';
@@ -151,7 +151,7 @@ var ColumnTypeEnum;
     ColumnTypeEnum["BASE64"] = "BASE64";
     ColumnTypeEnum["IMG"] = "IMG";
     ColumnTypeEnum["IMG_NO_SECURE"] = "IMG_NO_SECURE";
-    // HTML = 'HTML',
+    ColumnTypeEnum["HTML"] = "HTML";
     // INNER_TEXT = 'INNER_TEXT',
     ColumnTypeEnum["BUTTON"] = "BUTTON";
     ColumnTypeEnum["INPUT"] = "INPUT";
@@ -2422,39 +2422,39 @@ class CvaHeaderExpandButtonComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaHeaderExpandButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaHeaderExpandButtonComponent, isStandalone: false, selector: "cva-header-expand-button", inputs: { expandHeaderButton: "expandHeaderButton", columns: "columns", moduleName: "moduleName" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
-      <button mat-icon-button
-              class="expand-column-header-button"
-              color="{{expandHeaderButton?.color}}"
-              [matMenuTriggerFor]="menu"
-              matTooltip="{{((expandHeaderButton && expandHeaderButton.title) ? expandHeaderButton.title : '') | translate}}"
-      >
-          <mat-icon
-                  *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton)===IconTypes.MATERIAL_ICON">
-              {{ expandHeaderButton?.icon }}
-          </mat-icon>
-          <i *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton) === IconTypes.FONT_AWESOME"
-             class="{{expandHeaderButton?.icon}}"></i>
-      </button>
+    <button mat-icon-button
+            class="expand-column-header-button"
+            color="{{expandHeaderButton?.color}}"
+            [matMenuTriggerFor]="menu"
+            matTooltip="{{((expandHeaderButton && expandHeaderButton.title) ? expandHeaderButton.title : '') | translate}}"
+    >
+      <mat-icon
+          *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton)===IconTypes.MATERIAL_ICON">
+        {{ expandHeaderButton?.icon }}
+      </mat-icon>
+      <i *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton) === IconTypes.FONT_AWESOME"
+         class="{{expandHeaderButton?.icon}}"></i>
+    </button>
 
 
-      <mat-menu class="menu-expand-column" #menu="matMenu">
-          <div class="header-menu-expand" fxLayout fxLayoutAlign="space-between center">
-              <mat-label>{{ 'common.expand.menu.header.label' | translate }}</mat-label>
-              <button mat-flat-button>{{ 'common.label.done' | translate }}</button>
-          </div>
-          <div class="choose-area" (click)="$event.stopPropagation()">
-              <div mat-menu-item *ngFor="let col of columns">
-                  <ng-container *ngIf="col.columnType!==ColumnTypes.CHECKBOX && col.columnType!==ColumnTypes.BUTTON">
-                      <mat-checkbox style="width: 100%"
-                                    [(ngModel)]="expandDisplayCols[col.columnDef]"
-                                    [value]="col.columnDef"
-                                    (change)="this.onChange.emit(this.expandDisplayCols)">
-                          {{ (moduleName + '.table.header.' + col.header) | translate }}
-                      </mat-checkbox>
-                  </ng-container>
-              </div>
-          </div>
-      </mat-menu>
+    <mat-menu class="menu-expand-column" #menu="matMenu">
+      <div class="header-menu-expand" fxLayout fxLayoutAlign="space-between center">
+        <mat-label>{{ 'common.expand.menu.header.label' | translate }}</mat-label>
+        <button mat-flat-button>{{ 'common.label.done' | translate }}</button>
+      </div>
+      <div class="choose-area" (click)="$event.stopPropagation()">
+        <div mat-menu-item *ngFor="let col of columns">
+          <ng-container *ngIf="col.columnType!==ColumnTypes.CHECKBOX && col.columnType!==ColumnTypes.BUTTON">
+            <mat-checkbox style="width: 100%"
+                          [(ngModel)]="expandDisplayCols[col.columnDef]"
+                          [value]="col.columnDef"
+                          (change)="this.onChange.emit(this.expandDisplayCols)">
+              {{ (moduleName + '.table.header.' + col.header) | translate }}
+            </mat-checkbox>
+          </ng-container>
+        </div>
+      </div>
+    </mat-menu>
 
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
@@ -2464,39 +2464,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-header-expand-button',
                     standalone: false,
                     template: `
-      <button mat-icon-button
-              class="expand-column-header-button"
-              color="{{expandHeaderButton?.color}}"
-              [matMenuTriggerFor]="menu"
-              matTooltip="{{((expandHeaderButton && expandHeaderButton.title) ? expandHeaderButton.title : '') | translate}}"
-      >
-          <mat-icon
-                  *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton)===IconTypes.MATERIAL_ICON">
-              {{ expandHeaderButton?.icon }}
-          </mat-icon>
-          <i *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton) === IconTypes.FONT_AWESOME"
-             class="{{expandHeaderButton?.icon}}"></i>
-      </button>
+    <button mat-icon-button
+            class="expand-column-header-button"
+            color="{{expandHeaderButton?.color}}"
+            [matMenuTriggerFor]="menu"
+            matTooltip="{{((expandHeaderButton && expandHeaderButton.title) ? expandHeaderButton.title : '') | translate}}"
+    >
+      <mat-icon
+          *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton)===IconTypes.MATERIAL_ICON">
+        {{ expandHeaderButton?.icon }}
+      </mat-icon>
+      <i *ngIf="expandHeaderButton && TableService.getIconType(expandHeaderButton) === IconTypes.FONT_AWESOME"
+         class="{{expandHeaderButton?.icon}}"></i>
+    </button>
 
 
-      <mat-menu class="menu-expand-column" #menu="matMenu">
-          <div class="header-menu-expand" fxLayout fxLayoutAlign="space-between center">
-              <mat-label>{{ 'common.expand.menu.header.label' | translate }}</mat-label>
-              <button mat-flat-button>{{ 'common.label.done' | translate }}</button>
-          </div>
-          <div class="choose-area" (click)="$event.stopPropagation()">
-              <div mat-menu-item *ngFor="let col of columns">
-                  <ng-container *ngIf="col.columnType!==ColumnTypes.CHECKBOX && col.columnType!==ColumnTypes.BUTTON">
-                      <mat-checkbox style="width: 100%"
-                                    [(ngModel)]="expandDisplayCols[col.columnDef]"
-                                    [value]="col.columnDef"
-                                    (change)="this.onChange.emit(this.expandDisplayCols)">
-                          {{ (moduleName + '.table.header.' + col.header) | translate }}
-                      </mat-checkbox>
-                  </ng-container>
-              </div>
-          </div>
-      </mat-menu>
+    <mat-menu class="menu-expand-column" #menu="matMenu">
+      <div class="header-menu-expand" fxLayout fxLayoutAlign="space-between center">
+        <mat-label>{{ 'common.expand.menu.header.label' | translate }}</mat-label>
+        <button mat-flat-button>{{ 'common.label.done' | translate }}</button>
+      </div>
+      <div class="choose-area" (click)="$event.stopPropagation()">
+        <div mat-menu-item *ngFor="let col of columns">
+          <ng-container *ngIf="col.columnType!==ColumnTypes.CHECKBOX && col.columnType!==ColumnTypes.BUTTON">
+            <mat-checkbox style="width: 100%"
+                          [(ngModel)]="expandDisplayCols[col.columnDef]"
+                          [value]="col.columnDef"
+                          (change)="this.onChange.emit(this.expandDisplayCols)">
+              {{ (moduleName + '.table.header.' + col.header) | translate }}
+            </mat-checkbox>
+          </ng-container>
+        </div>
+      </div>
+    </mat-menu>
 
   `,
                 }]
@@ -2536,6 +2536,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: i2$2.DomSanitizer }] });
 
+class SafeHtmlPipe {
+    sanitizer;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value) {
+        const html = typeof value === 'string' ? value : '';
+        // 1) Strip/neutralize dangerous content (scripts, event handlers, javascript: urls, etc.)
+        const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html) ?? '';
+        // 2) Convert sanitized string into SafeHtml for binding to [innerHTML]
+        return this.sanitizer.bypassSecurityTrustHtml(sanitized);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: SafeHtmlPipe, isStandalone: false, name: "safeHtml" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeHtml',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i2$2.DomSanitizer }] });
+
 class CvaTableComponent {
     config;
     cdRef;
@@ -2705,6 +2728,11 @@ class CvaTableComponent {
                                  fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
                                 {{ column.cell(result) }}
                             </div>
+                            <div title="{{column.title(result)}}" *ngSwitchCase="ColumnTypeEnum.HTML"
+                                 class="{{TableService.getColumnClassName(column, result)}} viewData"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 [innerHTML]="column.cell(result) | safeHtml">
+                            </div>
                             <ng-container *ngSwitchCase="ColumnTypeEnum.BUTTON">
                                 <div *ngIf="!!column.button"
                                      class="{{TableService.getColumnClassName(column, result)}}"
@@ -2880,7 +2908,7 @@ class CvaTableComponent {
                 </div>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaTableHeaderCellComponent, selector: "cva-table-header-cell", inputs: ["moduleName", "column", "selectAllChecked"], outputs: ["changeSelectAll"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaTableHeaderCellComponent, selector: "cva-table-header-cell", inputs: ["moduleName", "column", "selectAllChecked"], outputs: ["changeSelectAll"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTableComponent, decorators: [{
             type: Component,
@@ -2915,6 +2943,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                  fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)">
                                 {{ column.cell(result) }}
                             </div>
+                            <div title="{{column.title(result)}}" *ngSwitchCase="ColumnTypeEnum.HTML"
+                                 class="{{TableService.getColumnClassName(column, result)}} viewData"
+                                 fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
+                                 [innerHTML]="column.cell(result) | safeHtml">
+                            </div>
                             <ng-container *ngSwitchCase="ColumnTypeEnum.BUTTON">
                                 <div *ngIf="!!column.button"
                                      class="{{TableService.getColumnClassName(column, result)}}"
@@ -4530,7 +4563,7 @@ class CvaMultiSelectAutocomplete {
                         <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
                                (keydown.space)="$event.stopPropagation()"
                                (input)="filterItem(searchInput.value)"
-                               placeholder="{{'btnSearch' | translate}}...">
+                               placeholder="{{'btnSearch' | translate}}">
                         <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
                             <button mat-icon-button class="search-button">
                                 <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
@@ -4627,7 +4660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
                                (keydown.space)="$event.stopPropagation()"
                                (input)="filterItem(searchInput.value)"
-                               placeholder="{{'btnSearch' | translate}}...">
+                               placeholder="{{'btnSearch' | translate}}">
                         <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
                             <button mat-icon-button class="search-button">
                                 <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
@@ -9709,6 +9742,7 @@ class NiceComponentLibraryModule {
             CvaRadiobuttonComponent,
             StylePaginatorDirective,
             SecureImgPipe,
+            SafeHtmlPipe,
             CvaFlatTreeComponent,
             CvaFlatTreeNodeLeftComponent,
             CvaFlatTreeNodeRightComponent,
@@ -9741,6 +9775,7 @@ class NiceComponentLibraryModule {
             StylePaginatorDirective,
             CvaFlatTreeComponent,
             SecureImgPipe,
+            SafeHtmlPipe,
             PatternDirective,
             FormatInputDirective,
             CvaFlatTreeNodeLeftComponent,
@@ -9792,6 +9827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         CvaRadiobuttonComponent,
                         StylePaginatorDirective,
                         SecureImgPipe,
+                        SafeHtmlPipe,
                         CvaFlatTreeComponent,
                         CvaFlatTreeNodeLeftComponent,
                         CvaFlatTreeNodeRightComponent,
@@ -9824,6 +9860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         StylePaginatorDirective,
                         CvaFlatTreeComponent,
                         SecureImgPipe,
+                        SafeHtmlPipe,
                         PatternDirective,
                         FormatInputDirective,
                         CvaFlatTreeNodeLeftComponent,
@@ -9849,5 +9886,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionTypeEnum, AlignEnum, ApiService, AuthoritiesResolverService, AuthoritiesService, Authority, BaseAddEditComponent, BaseModel, BaseSearchComponent, BaseStatusEnum, BaseTableComponent, BreadCrumbModel, ButtonClickEvent, ButtonModel, CheckboxModel, ColumnModel, ColumnTypeEnum, CustomDialogDataConfigModel, CvaBreadcrumbComponent, CvaCounterInputComponent, CvaCustomDialogComponent, CvaDatePickerComponent, CvaDialogImportFileComponent, CvaFlatTreeComponent, CvaFlatTreeNodeLeftComponent, CvaFlatTreeNodeRightComponent, CvaInputComponent, CvaLiveSearchingComponent, CvaLoaderComponent, CvaMultiSelectAutocomplete, CvaMultiUploadComponent, CvaMultiUploadImgComponent, CvaQuillEditorComponent, CvaRadiobuttonComponent, CvaRangeDatePickerComponent, CvaSmartTableComponent, CvaTableComponent, CvaTreeComponent, CvaUploadFileComponent, DateUtilService, DialogImportFileConfigModel, DialogTypeEnum, DragDropDirective, FileTypeEnum, FlatTreeConfigModel, FlatTreeModel, FlatTreeNodeModel, FormStateService, FormatInputDirective, IconTypeEnum, InjectTokenNextSolutionsConfig, JsogHttpInterceptor, LoaderInterceptor, LoaderService, MenuModel, MultiTranslateHttpLoader, NavigatorModel, NiceComponentLibraryModule, NumericInputFormat, OAuth2AuthenticationDto, PatternDirective, PermissionModel, Principal, RangeDatePickerModel, RoleModel, SecureImgPipe, SelectModel, SingletonTranslateService, StylePaginatorDirective, TableFooterModel, TablePagingRequestModel, TablePagingResponseModel, TableService, UIState, UploadModel, UtilsService, ValidatorService };
+export { ActionTypeEnum, AlignEnum, ApiService, AuthoritiesResolverService, AuthoritiesService, Authority, BaseAddEditComponent, BaseModel, BaseSearchComponent, BaseStatusEnum, BaseTableComponent, BreadCrumbModel, ButtonClickEvent, ButtonModel, CheckboxModel, ColumnModel, ColumnTypeEnum, CustomDialogDataConfigModel, CvaBreadcrumbComponent, CvaCounterInputComponent, CvaCustomDialogComponent, CvaDatePickerComponent, CvaDialogImportFileComponent, CvaFlatTreeComponent, CvaFlatTreeNodeLeftComponent, CvaFlatTreeNodeRightComponent, CvaInputComponent, CvaLiveSearchingComponent, CvaLoaderComponent, CvaMultiSelectAutocomplete, CvaMultiUploadComponent, CvaMultiUploadImgComponent, CvaQuillEditorComponent, CvaRadiobuttonComponent, CvaRangeDatePickerComponent, CvaSmartTableComponent, CvaTableComponent, CvaTreeComponent, CvaUploadFileComponent, DateUtilService, DialogImportFileConfigModel, DialogTypeEnum, DragDropDirective, FileTypeEnum, FlatTreeConfigModel, FlatTreeModel, FlatTreeNodeModel, FormStateService, FormatInputDirective, IconTypeEnum, InjectTokenNextSolutionsConfig, JsogHttpInterceptor, LoaderInterceptor, LoaderService, MenuModel, MultiTranslateHttpLoader, NavigatorModel, NiceComponentLibraryModule, NumericInputFormat, OAuth2AuthenticationDto, PatternDirective, PermissionModel, Principal, RangeDatePickerModel, RoleModel, SafeHtmlPipe, SecureImgPipe, SelectModel, SingletonTranslateService, StylePaginatorDirective, TableFooterModel, TablePagingRequestModel, TablePagingResponseModel, TableService, UIState, UploadModel, UtilsService, ValidatorService };
 //# sourceMappingURL=c10t-nice-component-library.mjs.map