@testgorilla/tgo-ui 1.0.14 → 1.1.1

package/fesm2020/testgorilla-tgo-ui.mjs

@@ -43,7 +43,7 @@ import { __decorate } from 'tslib';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import * as i1$7 from '@ngneat/transloco';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { lastValueFrom, Subscription } from 'rxjs';
+import { lastValueFrom, Subscription, ReplaySubject, debounceTime, map } from 'rxjs';
 import * as i4$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i3$1 from '@angular/material/table';
@@ -284,10 +284,10 @@ class IconComponent {
     }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconComponent, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconComponent, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"] }]
+            args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, template: "<mat-icon [svgIcon]=\"name\" [attr.class]=\"customCssClass\"></mat-icon>\n", styles: ["mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { size: [{
                 type: Input
             }], cssClass: [{
@@ -1822,6 +1822,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 class FileUploadComponent {
     constructor() {
         this.class = 'ui-file-upload';
+        /**
+         * Existing file information
+         *
+         * @type {(File | null)}
+         * @memberof FileUploadComponent
+         */
+        this.file = null;
         this.OnDrop = new EventEmitter();
         /**
          * @ignore
@@ -1831,7 +1838,6 @@ class FileUploadComponent {
          * @ignore
          */
         this.onTouch = () => { };
-        this.file = null;
         this.progress = false;
         this.success = false;
     }
@@ -1870,7 +1876,7 @@ class FileUploadComponent {
         return this.errors ? true : false;
     }
     ngOnChanges(changes) {
-        if (changes['uploadProgress']) {
+        if (changes['uploadProgress'] || changes['file']) {
             this.progress = this.showProgress();
             this.success = this.showSuccess();
             this.browse = this.showBrowse();
@@ -1900,13 +1906,13 @@ class FileUploadComponent {
     }
 }
 FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", errors: "errors", disabled: "disabled" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class" } }, providers: [
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", errors: "errors", disabled: "disabled", file: "file" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => FileUploadComponent),
             multi: true,
         },
-    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"upload-file-container\" uiDragDrop [ngClass]=\"{'upload-errors': !!errors}\" (fileDropped)=\"onFileDropped($event)\">\n  <div *ngIf=\"browse\" [@inOutAnimation] class=\"upload-files\">\n    <div class=\"upload-browse\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <div class=\"errors\" *ngIf=\"!!errors\">\n        <span *ngFor=\"let error of errors\">\n          <ui-icon name=\"Error\"></ui-icon> {{ error }}\n        </span>\n      </div>\n      <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\">\n      <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">browse</label> your files</p>\n      <span class=\"upload-text\">{{ maxFileSizeMB }}MB max file size.</span>\n    </div>\n  </div>\n  <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n    <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n    <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\" [disabled]=\"disabled\">\n    <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">change</label> your files</p>\n    <span  class=\"upload-text\"><strong>{{ file.name }}</strong></span>\n  </div>\n  <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n    <p>{{ file.name }}</p>\n    <ui-progress-bar\n      [progress]=\"uploadProgress\"\n      ></ui-progress-bar>\n    <p class=\"upload-text\">Uploading <span>{{uploadProgress}}</span>%</p>\n  </div>\n</div>\n<div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n  <span>Supported file types:</span>{{ supportedFileTypes }}\n</div>", styles: [".upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["color", "progress", "mode", "buffer"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }], animations: [
+    ], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"upload-file-container\"\n  uiDragDrop\n  [ngClass]=\"{ 'upload-errors': !!errors }\"\n  (fileDropped)=\"onFileDropped($event)\"\n>\n  <div *ngIf=\"browse && !(!!success && !!file && !!progress)\" [@inOutAnimation] class=\"upload-files\">\n    <div class=\"upload-browse\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <div class=\"errors\" *ngIf=\"!!errors\">\n        <span *ngFor=\"let error of errors\"> <ui-icon name=\"Error\"></ui-icon> {{ error }} </span>\n      </div>\n      <input\n        class=\"form-control\"\n        #fileDrop\n        type=\"file\"\n        [accept]=\"supportedFileTypes\"\n        id=\"fileDrop\"\n        (change)=\"onChangeUpload($event)\"\n      />\n      <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">browse</label> your files</p>\n      <span class=\"upload-text\">{{ maxFileSizeMB }}MB max file size.</span>\n    </div>\n  </div>\n  <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n    <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n    <input\n      class=\"form-control\"\n      #fileDrop\n      type=\"file\"\n      id=\"fileDrop\"\n      [accept]=\"supportedFileTypes\"\n      (change)=\"onChangeUpload($event)\"\n      [disabled]=\"disabled\"\n    />\n    <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">change</label> your files</p>\n    <span class=\"upload-text\"\n      ><strong>{{ file.name }}</strong></span\n    >\n  </div>\n  <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n    <p>{{ file.name }}</p>\n    <ui-progress-bar [progress]=\"uploadProgress\"></ui-progress-bar>\n    <p class=\"upload-text\">\n      Uploading <span>{{ uploadProgress }}</span\n      >%\n    </p>\n  </div>\n</div>\n<div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n  <span>Supported file types:</span>{{ supportedFileTypes }}\n</div>\n", styles: [".upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["color", "progress", "mode", "buffer"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }], animations: [
         trigger('inOutAnimation', [
             transition(':enter', [
                 style({ opacity: 0, height: 0 }),
@@ -1977,7 +1983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                                 animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
                             ]),
                         ]),
-                    ], template: "<div class=\"upload-file-container\" uiDragDrop [ngClass]=\"{'upload-errors': !!errors}\" (fileDropped)=\"onFileDropped($event)\">\n  <div *ngIf=\"browse\" [@inOutAnimation] class=\"upload-files\">\n    <div class=\"upload-browse\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <div class=\"errors\" *ngIf=\"!!errors\">\n        <span *ngFor=\"let error of errors\">\n          <ui-icon name=\"Error\"></ui-icon> {{ error }}\n        </span>\n      </div>\n      <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\">\n      <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">browse</label> your files</p>\n      <span class=\"upload-text\">{{ maxFileSizeMB }}MB max file size.</span>\n    </div>\n  </div>\n  <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n    <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n    <input class=\"form-control\" #fileDrop type=\"file\" id=\"fileDrop\" (change)=\"onChangeUpload($event)\" [disabled]=\"disabled\">\n    <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">change</label> your files</p>\n    <span  class=\"upload-text\"><strong>{{ file.name }}</strong></span>\n  </div>\n  <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n    <p>{{ file.name }}</p>\n    <ui-progress-bar\n      [progress]=\"uploadProgress\"\n      ></ui-progress-bar>\n    <p class=\"upload-text\">Uploading <span>{{uploadProgress}}</span>%</p>\n  </div>\n</div>\n<div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n  <span>Supported file types:</span>{{ supportedFileTypes }}\n</div>", styles: [".upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"] }]
+                    ], template: "<div\n  class=\"upload-file-container\"\n  uiDragDrop\n  [ngClass]=\"{ 'upload-errors': !!errors }\"\n  (fileDropped)=\"onFileDropped($event)\"\n>\n  <div *ngIf=\"browse && !(!!success && !!file && !!progress)\" [@inOutAnimation] class=\"upload-files\">\n    <div class=\"upload-browse\">\n      <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      <div class=\"errors\" *ngIf=\"!!errors\">\n        <span *ngFor=\"let error of errors\"> <ui-icon name=\"Error\"></ui-icon> {{ error }} </span>\n      </div>\n      <input\n        class=\"form-control\"\n        #fileDrop\n        type=\"file\"\n        [accept]=\"supportedFileTypes\"\n        id=\"fileDrop\"\n        (change)=\"onChangeUpload($event)\"\n      />\n      <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">browse</label> your files</p>\n      <span class=\"upload-text\">{{ maxFileSizeMB }}MB max file size.</span>\n    </div>\n  </div>\n  <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n    <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n    <input\n      class=\"form-control\"\n      #fileDrop\n      type=\"file\"\n      id=\"fileDrop\"\n      [accept]=\"supportedFileTypes\"\n      (change)=\"onChangeUpload($event)\"\n      [disabled]=\"disabled\"\n    />\n    <p>Drag and drop or <label for=\"fileDrop\" class=\"semibold\">change</label> your files</p>\n    <span class=\"upload-text\"\n      ><strong>{{ file.name }}</strong></span\n    >\n  </div>\n  <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n    <p>{{ file.name }}</p>\n    <ui-progress-bar [progress]=\"uploadProgress\"></ui-progress-bar>\n    <p class=\"upload-text\">\n      Uploading <span>{{ uploadProgress }}</span\n      >%\n    </p>\n  </div>\n</div>\n<div class=\"upload-supported-files\" *ngIf=\"!!supportedFileTypes\">\n  <span>Supported file types:</span>{{ supportedFileTypes }}\n</div>\n", styles: [".upload-file-container{border-radius:8px;border:1px dashed #888888;background:#F6F6F6;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors ui-icon,.upload-file-container .upload-browse .errors ui-icon{margin-right:4px}.upload-file-container .upload-change .errors ui-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors ui-icon mat-icon.size-16 svg{width:16px;height:16px;color:#cb7b7a}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-supported-files{font-size:12px;line-height:16px;margin-top:8px;display:flex}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container{max-width:100%}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { class: [{
                 type: HostBinding
             }], maxFileSizeMB: [{
@@ -1990,6 +1996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], file: [{
+                type: Input
             }], OnDrop: [{
                 type: Output
             }] } });
@@ -3309,40 +3317,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 class TagComponent {
     constructor() {
         /**
-         * Color
+         * Icon
          *
-         * @type {TagColor}
+         * @type {string}
          * @memberof TagComponent
          */
-        this.color = 'teal';
+        this.icon = '';
+        /**
+         * Whether to allow the tag to be closed.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.allowClose = false;
+        /**
+         * Whether the tag is in read-only mode.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.readOnly = false;
+        /**
+         * Whether the tag is selected.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.isSelected = false;
+        /**
+         * Display icon when is selected
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.showIconWhenSelected = false;
+        /**
+         * Specifies whether the element is disabled.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof TagComponent
+         */
+        this.isDisabled = false;
+        /**
+         * Event triggered when the tag should be closed.
+         *
+         * @event
+         * @memberof TagComponent
+         */
+        this.close = new EventEmitter();
+        /**
+         * Event triggered when a press action occurs.
+         *
+         * @event
+         * @memberof TagComponent
+         */
+        this.press = new EventEmitter();
+        /**
+         * Subject that needs to be triggered when Label input changes, to check if it's truncated
+         * @private
+         * @type {void}
+         * @memberof TagComponent
+         */
+        this.checkLabelEllipsis$ = new ReplaySubject(1);
+        /**
+         * Observable that indicates if the Label is truncated
+         * debounceTime is used to wait for view to be initialized after receiving a new Label input
+         * @protected
+         * @type {boolean}
+         * @memberof TagComponent
+         */
+        this.isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(debounceTime(100), map(() => {
+            const el = this.labelElement.nativeElement;
+            return el.offsetWidth < el.scrollWidth;
+        }));
+        this.labelText = '';
+    }
+    /**
+     * Tag's label
+     *
+     * @memberof TagComponent
+     */
+    set label(value) {
+        this.labelText = value;
+        if (this.labelElement) {
+            this.isLabelEllipseActive();
+        }
+    }
+    ngAfterViewInit() {
+        this.isLabelEllipseActive();
+    }
+    onPress() {
+        if (!this.readOnly && !this.allowClose) {
+            this.isSelected = this.showIconWhenSelected ? !this.isSelected : false;
+            this.press.emit(this.isSelected);
+        }
+    }
+    onClose() {
+        this.close.emit();
+    }
+    isLabelEllipseActive() {
+        this.checkLabelEllipsis$.next();
+    }
+    get tabIndex() {
+        return this.isDisabled || this.readOnly ? -1 : 0;
+    }
+    get filled() {
+        return this.readOnly || this.allowClose || this.isSelected;
     }
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagComponent, selector: "ui-tag", inputs: { text: "text", color: "color" }, ngImport: i0, template: "<span [class]=\"color\">{{ text }}</span>\n", styles: [":host span{display:inline-flex;color:#fff;font-size:12px;line-height:16px;padding:3px 8px;border-radius:4px;text-transform:uppercase;margin-right:8px}:host span.teal{background-color:#46a997}:host span.petrol{background-color:#276678}:host span.grey{background-color:#e0e0e0;color:#000}:host span.red{background-color:#cb7b7a}:host span.gold{background-color:#cca45f}\n"] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: [":host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tag', template: "<span [class]=\"color\">{{ text }}</span>\n", styles: [":host span{display:inline-flex;color:#fff;font-size:12px;line-height:16px;padding:3px 8px;border-radius:4px;text-transform:uppercase;margin-right:8px}:host span.teal{background-color:#46a997}:host span.petrol{background-color:#276678}:host span.grey{background-color:#e0e0e0;color:#000}:host span.red{background-color:#cb7b7a}:host span.gold{background-color:#cca45f}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+            args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n  <div\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n    }\"\n    (click)=\"onPress()\"\n  >\n    <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n    <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n  </div>\n</div>\n", styles: [":host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"] }]
+        }], propDecorators: { label: [{
                 type: Input
-            }], color: [{
+            }], icon: [{
+                type: Input
+            }], allowClose: [{
                 type: Input
+            }], readOnly: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], showIconWhenSelected: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], press: [{
+                type: Output
+            }], labelElement: [{
+                type: ViewChild,
+                args: ['labelElement']
             }] } });
 
-class TagComponentModule {
-}
-TagComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TagComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule], exports: [TagComponent] });
-TagComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TagComponent],
-                    imports: [CommonModule],
-                    exports: [TagComponent],
-                    providers: [],
-                }]
-        }] });
-
 var TooltipPositionType;
 (function (TooltipPositionType) {
     TooltipPositionType["TOP"] = "top";
@@ -3411,6 +3526,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class TagComponentModule {
+}
+TagComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TagComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule], exports: [TagComponent] });
+TagComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TagComponent],
+                    imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule],
+                    exports: [TagComponent],
+                    providers: [],
+                }]
+        }] });
+
 class DropdownComponent {
     constructor() {
         this.class = 'ui-dropdown';
@@ -3930,6 +4060,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class ToggleComponent {
+    constructor() {
+        /**
+         * The `selected` property determines the current state of the toggle switch.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof ToggleComponent
+         */
+        this.selected = false;
+        /**
+         * The `disabled` property determines whether the toggle switch is disabled.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof ToggleComponent
+         */
+        this.disabled = false;
+        /**
+         * The `toggle` event is triggered when the state of the toggle switch changes. It returns the new state.
+         *
+         * @type {event}
+         * @memberof ToggleComponent
+         */
+        this.toggle = new EventEmitter();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    onToggle() {
+        if (!this.disabled) {
+            this.selected = !this.selected;
+            this.toggle.emit(this.selected);
+        }
+    }
+    writeValue(state) {
+        if (state) {
+            this.selected = state;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+}
+ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ToggleComponent, selector: "ui-toggle", inputs: { selected: "selected", disabled: "disabled" }, outputs: { toggle: "toggle" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ToggleComponent),
+            multi: true,
+        },
+    ], ngImport: i0, template: "<div\n  [tabIndex]=\"0\"\n  class=\"toggle-container\"\n  [ngClass]=\"{ 'active': selected, 'disabled': disabled }\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"knob\"></div>\n</div>\n", styles: [":host .toggle-container{width:32px;height:16px;border-radius:16px;background:#888888;display:flex;align-items:center;padding:0 2px;cursor:pointer}:host .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle-container .knob{height:12px;width:12px;border-radius:16px;background:#F6F6F6;transition:transform .3s}:host .toggle-container.disabled{background:#E0E0E0;pointer-events:none}:host .toggle-container.disabled:focus{outline:none}:host .toggle-container.active{background:#46A997}:host .toggle-container.active.disabled{opacity:.5}:host .toggle-container.active .knob{transform:translate(16px)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-toggle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  [tabIndex]=\"0\"\n  class=\"toggle-container\"\n  [ngClass]=\"{ 'active': selected, 'disabled': disabled }\"\n  (click)=\"onToggle()\"\n>\n  <div class=\"knob\"></div>\n</div>\n", styles: [":host .toggle-container{width:32px;height:16px;border-radius:16px;background:#888888;display:flex;align-items:center;padding:0 2px;cursor:pointer}:host .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle-container .knob{height:12px;width:12px;border-radius:16px;background:#F6F6F6;transition:transform .3s}:host .toggle-container.disabled{background:#E0E0E0;pointer-events:none}:host .toggle-container.disabled:focus{outline:none}:host .toggle-container.active{background:#46A997}:host .toggle-container.active.disabled{opacity:.5}:host .toggle-container.active .knob{transform:translate(16px)}\n"] }]
+        }], propDecorators: { selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggle: [{
+                type: Output
+            }] } });
+
+class ToggleComponentModule {
+}
+ToggleComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToggleComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, declarations: [ToggleComponent], imports: [CommonModule] });
+ToggleComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToggleComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToggleComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+
+var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["SMALL"] = "small";
+    AvatarSize["MEDIUM"] = "medium";
+    AvatarSize["LARGE"] = "large";
+})(AvatarSize || (AvatarSize = {}));
+const iconSize = {
+    small: '16',
+    medium: '24',
+    large: '80',
+};
+
+class NameInitialsPipe {
+    transform(value) {
+        const initials = value.split(' ').filter(Boolean);
+        if (initials.length > 1) {
+            return initials.map(initial => initial[0].toUpperCase()).join('');
+        }
+        else {
+            const firstLetters = value.substring(0, 2);
+            return `${firstLetters[0]?.toUpperCase() ?? ''}${firstLetters[1]?.toLowerCase() ?? ''}`;
+        }
+    }
+}
+NameInitialsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NameInitialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NameInitialsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NameInitialsPipe, name: "nameInitials" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NameInitialsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'nameInitials',
+                }]
+        }] });
+
+class AvatarComponent {
+    constructor() {
+        /**
+         * Input property for specifying the size of the avatar.
+         * @type {AvatarSize}
+         * @default AvatarSize.SMALL
+         * @memberof AvatarComponent
+         */
+        this.size = AvatarSize.SMALL;
+        /**
+         * Input property for specifying the URL of the image to display in the avatar.
+         * @type {string}
+         * @memberof AvatarComponent
+         */
+        this.imageUrl = '';
+        /**
+         * Input property for specifying the initials to display in the avatar.
+         * @type {string}
+         * @memberof AvatarComponent
+         */
+        this.name = '';
+        /**
+         * Input property for specifying the tooltip text for edit.
+         * @type {string}
+         * @memberof AvatarComponent
+         */
+        this.tooltipText = '';
+        /**
+         * Input property that makes avatar clickable.
+         * @type {boolean}
+         * @memberof AvatarComponent
+         */
+        this.allowClick = false;
+        /**
+         * Event emitted when the avatar is clicked.
+         * @type {void}
+         * @memberof AvatarComponent
+         */
+        this.avatarClick = new EventEmitter();
+        this.iconSize = iconSize;
+        this.avatarSize = AvatarSize;
+    }
+    onAvatarClick() {
+        this.avatarClick.emit();
+    }
+    get clickAllowance() {
+        return this.allowClick ? 'clickable' : 'non-clickable';
+    }
+}
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowClick: "allowClick" }, outputs: { avatarClick: "avatarClick" }, ngImport: i0, template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size, clickAllowance]\"\n  (click)=\"onAvatarClick()\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n</div>\n\n", styles: [":host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%;cursor:pointer;-webkit-backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%);backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%)}:host .avatar-container .edit-avatar:hover{background:#EDEDED}:host .avatar-container .edit-avatar:active{background:#E0E0E0}:host .avatar-container .edit-avatar:focus{outline:1px dashed #888888;outline-offset:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "pipe", type: NameInitialsPipe, name: "nameInitials" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar', template: "<div\n  class=\"avatar-container\"\n  [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n  [ngClass]=\"[size, clickAllowance]\"\n  (click)=\"onAvatarClick()\"\n>\n  <span *ngIf=\"name && !imageUrl\">\n    {{ name | nameInitials }}\n  </span>\n  <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n  <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n</div>\n\n", styles: [":host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#CBD6CB;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#E0E0E0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#F6F6F6;width:32px;height:32px;border-radius:100%;cursor:pointer;-webkit-backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%);backdrop-filter:drop-shadow(0px 8px 24px 4px #000000,8%)}:host .avatar-container .edit-avatar:hover{background:#EDEDED}:host .avatar-container .edit-avatar:active{background:#E0E0E0}:host .avatar-container .edit-avatar:focus{outline:1px dashed #888888;outline-offset:4px}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], allowClick: [{
+                type: Input
+            }], avatarClick: [{
+                type: Output
+            }] } });
+
+class AvatarComponentModule {
+}
+AvatarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AvatarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, declarations: [AvatarComponent, NameInitialsPipe], imports: [CommonModule, IconComponentModule, MatTooltipModule], exports: [AvatarComponent] });
+AvatarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, imports: [CommonModule, IconComponentModule, MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AvatarComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AvatarComponent, NameInitialsPipe],
+                    imports: [CommonModule, IconComponentModule, MatTooltipModule],
+                    exports: [AvatarComponent],
+                }]
+        }] });
+
 /* eslint-disable */
 /* Components */
 // Alert Banner
@@ -3938,5 +4270,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertBannerComponent, AlertBannerComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DialogComponent, DialogComponentModule, DialogService, DropdownComponent, DropdownComponentModule, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, preloadLang };
+export { AlertBannerComponent, AlertBannerComponentModule, AvatarComponent, AvatarComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DialogComponent, DialogComponentModule, DialogService, DropdownComponent, DropdownComponentModule, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, preloadLang };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map