Some updates

src/assets/icons/document.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="document" stroke="none" stroke-width="1">
+        <path
+            d="M90,0 L90,100 L10,100 L10,0 L90,0 Z M80,10 L20,10 L20,90 L80,90 L80,10 Z M50,60 L50,70 L30,70 L30,60 L50,60 Z M70,40 L70,50 L30,50 L30,40 L70,40 Z M70,20 L70,30 L30,30 L30,20 L70,20 Z"
+            fill-rule="nonzero" id="Combined-Shape"></path>
+    </g>
+</svg>

src/assets/styles/_common-variables.scss

@@ -16,6 +16,7 @@
     --iqser-light: white;
     --iqser-separator: rgba(226, 228, 233, 0.9);
     --iqser-quick-filter-border: #d3d5da;
+    --iqser-grey-1: #283241;
     --iqser-grey-2: #f4f5f7;
     --iqser-grey-3: #aaacb3;
     --iqser-grey-4: #e2e4e9;
@@ -26,6 +27,8 @@
     --iqser-green-2: #5ce594;
     --iqser-yellow-1: #ffb83b;
     --iqser-yellow-2: #fdbd00;
+    --iqser-red-1: #dd4d50;
+    --iqser-blue-5: #c5d3eb;
     --iqser-helpmode-primary: green;
 }
 

src/lib/icons/icons.module.ts

@@ -6,7 +6,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 @NgModule({
     imports: [CommonModule, MatIconModule],
     declarations: [],
-    exports: [MatIconModule]
+    exports: [MatIconModule],
 })
 export class IqserIconsModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
@@ -17,6 +17,7 @@ export class IqserIconsModule {
             'check',
             'close',
             'collapse',
+            'document',
             'edit',
             'expand',
             'failure',
@@ -38,7 +39,11 @@ export class IqserIconsModule {
             'upload'
         ]);
         icons.forEach(icon => {
-            _iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`));
+            _iconRegistry.addSvgIconInNamespace(
+                'iqser',
+                icon,
+                _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`),
+            );
         });
     }
 }

src/lib/listing/table/table.component.scss

@@ -78,6 +78,8 @@
             .table-item-title {
                 font-weight: 600;
                 @include mixins.line-clamp(1);
+                width: fit-content;
+                max-width: 100%;
             }
 
             .action-buttons {

src/lib/misc/confirmation-dialog/confirmation-dialog.component.ts

@@ -7,7 +7,7 @@ export type TitleColor = 'default' | 'primary';
 
 export enum TitleColors {
     DEFAULT = 'default',
-    PRIMARY = 'primary'
+    PRIMARY = 'primary',
 }
 
 export class ConfirmationDialogInput {
@@ -37,7 +37,7 @@ export class ConfirmationDialogInput {
 @Component({
     templateUrl: './confirmation-dialog.component.html',
     styleUrls: ['./confirmation-dialog.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConfirmationDialogComponent {
     config: ConfirmationDialogInput;
@@ -47,12 +47,12 @@ export class ConfirmationDialogComponent {
     constructor(
         private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent>,
         private readonly _translateService: TranslateService,
-        @Inject(MAT_DIALOG_DATA) private readonly _confirmationDialogInput: ConfirmationDialogInput
+        @Inject(MAT_DIALOG_DATA) private readonly _confirmationDialogInput: ConfirmationDialogInput,
     ) {
         this.config = _confirmationDialogInput ?? new ConfirmationDialogInput();
         this.translate(this.config);
         this.inputLabel = `${this._translateService.instant('confirmation-dialog.input-label') as string} '${
-            this.config.confirmationText as string
+            this.config.confirmationText
         }'`;
     }
 
@@ -86,13 +86,15 @@ export class ConfirmationDialogComponent {
             'details',
             'confirmationText',
             'alternativeConfirmationText',
-            'denyText'
+            'denyText',
         ];
 
         translateKeys
             .filter(key => !!obj[key])
             .forEach(key => {
-                Object.assign(obj, { [key]: this._translateService.instant(obj[key] as string, this.config.translateParams) as string });
+                Object.assign(obj, {
+                    [key]: this._translateService.instant(obj[key] as string, this.config.translateParams) as string,
+                });
             });
     }
 }