@seniorsistemas/angular-components 17.3.15 → 17.3.17

package/fesm2015/seniorsistemas-angular-components.js

@@ -2,7 +2,7 @@ import { __decorate, __awaiter, __param, __rest } from 'tslib';
 import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, HostBinding, Renderer2, InjectionToken, Inject, Pipe, ViewEncapsulation, TemplateRef, ViewContainerRef, ChangeDetectorRef, Optional, ContentChild } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { Subject, ReplaySubject, of, from, throwError, forkJoin } from 'rxjs';
-import { takeUntil, filter, take, tap, map, switchMap, catchError, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
+import { takeUntil, filter, take, tap, map, switchMap, catchError, delay, debounceTime, repeat, first, finalize } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup, NG_VALIDATORS, FormBuilder, Validators, FormArray, ControlContainer } from '@angular/forms';
 import { RouterModule, NavigationEnd, PRIMARY_OUTLET, ActivatedRoute, Router } from '@angular/router';
@@ -24,7 +24,7 @@ import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { showTooltip } from '@codemirror/tooltip';
 import { lineNumbers } from '@codemirror/gutter';
 import { NgxMaskModule } from 'ngx-mask';
-import { HttpClient, HttpEventType, HttpClientModule } from '@angular/common/http';
+import { HttpClient, HttpClientModule, HttpEventType } from '@angular/common/http';
 import { Hotkey, HotkeysService, HotkeyModule } from 'angular2-hotkeys';
 import BigNumber, { BigNumber as BigNumber$1 } from 'bignumber.js';
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
@@ -47,7 +47,6 @@ import { PanelModule as PanelModule$1 } from 'primeng/panel';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { SliderModule } from 'primeng/slider';
 import { MessageService, ConfirmationService } from 'primeng/api';
-import { ProgressBarModule as ProgressBarModule$1 } from 'primeng/progressbar';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Clipboard } from '@angular/cdk/clipboard';
 import Cropper from 'cropperjs';
@@ -5702,20 +5701,137 @@ EmptyStateModule = __decorate([
     })
 ], EmptyStateModule);
 
-let FileUploadService = class FileUploadService {
+var ProgressBarColors;
+(function (ProgressBarColors) {
+    ProgressBarColors["Blue"] = "blue";
+    ProgressBarColors["Green"] = "green";
+    ProgressBarColors["Red"] = "red";
+    ProgressBarColors["Yellow"] = "yellow";
+})(ProgressBarColors || (ProgressBarColors = {}));
+
+var ProgressBarMode;
+(function (ProgressBarMode) {
+    ProgressBarMode["Determinate"] = "determinate";
+    ProgressBarMode["Indeterminate"] = "indeterminate";
+})(ProgressBarMode || (ProgressBarMode = {}));
+
+let ProgressBarComponent = class ProgressBarComponent {
     constructor() {
-        this.BASE_URL_FIELD_CUSTOMIZATION = "platform/field_customization";
-        this.TOKEN = new AbortController();
+        this.showValue = true;
+        this.mode = ProgressBarMode.Determinate;
     }
-    getMetadataCustomField(request) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return CustomHttpClient.POST(`${this.BASE_URL_FIELD_CUSTOMIZATION}/queries/getFileMetadata`, request, { signal: this.TOKEN.signal });
-        });
+    ngOnInit() {
+        this.validateInputs();
+    }
+    validateInputs() {
+        if (this.value < 0 || this.value > 100) {
+            throw new Error("Invalid value for value");
+        }
+        if (this.targetValue < 0 || this.targetValue > 100) {
+            throw new Error("Invalid value for targetValue");
+        }
+        if (this.mode === ProgressBarMode.Indeterminate && (this.value || this.targetValue || this.targetLabel)) {
+            throw new Error("When the mode is indeterminate, the value, targetValue and targetLabel parameters are not expected.");
+        }
     }
 };
-FileUploadService = __decorate([
-    Injectable()
-], FileUploadService);
+__decorate([
+    Input()
+], ProgressBarComponent.prototype, "value", void 0);
+__decorate([
+    Input()
+], ProgressBarComponent.prototype, "targetValue", void 0);
+__decorate([
+    Input()
+], ProgressBarComponent.prototype, "label", void 0);
+__decorate([
+    Input()
+], ProgressBarComponent.prototype, "targetLabel", void 0);
+__decorate([
+    Input()
+], ProgressBarComponent.prototype, "activeColor", void 0);
+__decorate([
+    Input()
+], ProgressBarComponent.prototype, "showValue", void 0);
+__decorate([
+    Input()
+], ProgressBarComponent.prototype, "mode", void 0);
+ProgressBarComponent = __decorate([
+    Component({
+        selector: "s-progressbar",
+        template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n   <s-progressbar-determinate\n      [value]=\"value\"\n      [targetValue]=\"targetValue\"\n      [targetLabel]=\"targetLabel\"\n      [activeColor]=\"activeColor\"\n      [showValue]=\"showValue\">\n   </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n   <s-progressbar-indeterminate\n      [activeColor]=\"activeColor\"\n      [label]=\"label\">\n   </s-progressbar-indeterminate>\n</ng-template>",
+        styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
+    })
+], ProgressBarComponent);
+
+let ProgressBarDeterminateComponent = class ProgressBarDeterminateComponent {
+    constructor() {
+        this.showValue = true;
+    }
+    ngOnInit() {
+        this.validateValues();
+    }
+    validateValues() {
+        if (this.value < 0 || this.value > 100) {
+            throw new Error("Invalid value for value");
+        }
+        if (this.targetValue < 0 || this.targetValue > 100) {
+            throw new Error("Invalid value for targetValue");
+        }
+    }
+};
+__decorate([
+    Input()
+], ProgressBarDeterminateComponent.prototype, "value", void 0);
+__decorate([
+    Input()
+], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
+__decorate([
+    Input()
+], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
+__decorate([
+    Input()
+], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
+__decorate([
+    Input()
+], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
+ProgressBarDeterminateComponent = __decorate([
+    Component({
+        selector: "s-progressbar-determinate",
+        template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n       <div\n          class=\"progressbar-active\"\n          [ngClass]=\"{\n             'progressbar-active--blue' : activeColor === 'blue',\n             'progressbar-active--green': activeColor === 'green',\n             'progressbar-active--red': activeColor === 'red',\n             'progressbar-active--yellow': activeColor === 'yellow'\n          }\"\n          [ngStyle]=\"{ 'width': value + '%' }\">\n          {{ showValue && value ? value + '%' : '' }}\n       </div>\n    </div>\n    <div\n       *ngIf=\"targetValue\"\n       class=\"target\"\n       [ngStyle]=\"{\n          'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n          'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n          'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n       }\">\n       <span class=\"target-line\"></span>\n       <span class=\"target-label\">\n           {{ targetLabel || value + '%' }}\n       </span>\n    </div>\n </div>\n ",
+        styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
+    })
+], ProgressBarDeterminateComponent);
+
+let ProgressBarIndeterminateComponent = class ProgressBarIndeterminateComponent {
+};
+__decorate([
+    Input()
+], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
+__decorate([
+    Input()
+], ProgressBarIndeterminateComponent.prototype, "label", void 0);
+ProgressBarIndeterminateComponent = __decorate([
+    Component({
+        selector: "s-progressbar-indeterminate",
+        template: "<!-- progressbar-indeterminate.component.html -->\n<div class=\"progressbar-indeterminate\">\n    <div class=\"progressbar-container\">\n        <div class=\"indeterminate-bar\" [ngClass]=\"{\n            'indeterminate-bar--blue': activeColor === 'blue',\n            'indeterminate-bar--green': activeColor === 'green',\n            'indeterminate-bar--red': activeColor === 'red',\n            'indeterminate-bar--yellow': activeColor === 'yellow'\n        }\"></div>\n    </div>\n    \n    <span *ngIf=\"label\" class=\"progressbar-label\">{{ label }}</span>\n</div>\n",
+        styles: [".progressbar-indeterminate{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:5s infinite indeterminate-progress;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translateX(-250%)}100%{transform:translateX(250%)}}"]
+    })
+], ProgressBarIndeterminateComponent);
+
+let ProgressBarModule = class ProgressBarModule {
+};
+ProgressBarModule = __decorate([
+    NgModule({
+        imports: [CommonModule],
+        declarations: [
+            ProgressBarComponent,
+            ProgressBarDeterminateComponent,
+            ProgressBarIndeterminateComponent,
+        ],
+        exports: [ProgressBarComponent],
+    })
+], ProgressBarModule);
 
 const Breakpoints = {
     SM_MIN: 0,
@@ -5820,6 +5936,7 @@ class ExportUtils {
 var ValidateErrors;
 (function (ValidateErrors) {
     ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
+    ValidateErrors["MAX_COMBINED_FILE_SIZE"] = "MAX_COMBINED_FILE_SIZE";
     ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
     ValidateErrors["UNSUPPORTED_EXTENSION"] = "UNSUPPORTED_EXTENSION";
 })(ValidateErrors || (ValidateErrors = {}));
@@ -5836,8 +5953,128 @@ const ALL_PERMISSIONS = [
     FileUploadPermissions.Remove,
 ];
 
-var FileUploadComponent_1;
+const StorageUnits = {
+    KB: 1024,
+    MB: Math.pow(1024, 2),
+    GB: Math.pow(1024, 3),
+};
+
+let FileItemComponent = class FileItemComponent {
+    constructor(localeService) {
+        this.localeService = localeService;
+        this.canReadFiles = true;
+        this.canRemoveFiles = true;
+        this.cancelUpload = new EventEmitter();
+        this.removeFile = new EventEmitter();
+    }
+    ngOnInit() {
+        this._getLocale();
+    }
+    ngAfterContentInit() {
+        this._update();
+    }
+    onResize() {
+        this._update();
+    }
+    _update() {
+        const windowWidth = window.innerWidth;
+        this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
+    }
+    simplifySize(size) {
+        let unit;
+        let convertedSize;
+        if (size < StorageUnits.KB) {
+            convertedSize = size;
+            unit = "bytes";
+        }
+        else if (size < StorageUnits.MB) {
+            convertedSize = size / StorageUnits.KB;
+            unit = "KB";
+        }
+        else if (size < StorageUnits.GB) {
+            convertedSize = size / StorageUnits.MB;
+            unit = "MB";
+        }
+        else {
+            convertedSize = size / StorageUnits.GB;
+            unit = "GB";
+        }
+        return `${convertedSize.toLocaleString(this._locale, { maximumFractionDigits: 2 })} ${unit}`;
+    }
+    _getLocale() {
+        this.localeService
+            .getLocale()
+            .pipe(first())
+            .subscribe((locale) => {
+            this._locale = locale;
+        });
+    }
+};
+FileItemComponent.ctorParameters = () => [
+    { type: LocaleService }
+];
+__decorate([
+    Input()
+], FileItemComponent.prototype, "id", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "file", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "canReadFiles", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "canRemoveFiles", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "cancelLabel", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "removeLabel", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "ariaLabelProgress", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "successTooltip", void 0);
+__decorate([
+    Input()
+], FileItemComponent.prototype, "ariaLabelSuccess", void 0);
+__decorate([
+    Output()
+], FileItemComponent.prototype, "cancelUpload", void 0);
+__decorate([
+    Output()
+], FileItemComponent.prototype, "removeFile", void 0);
+__decorate([
+    HostListener("window:resize")
+], FileItemComponent.prototype, "onResize", null);
+FileItemComponent = __decorate([
+    Component({
+        selector: "s-file-item",
+        template: "<div [id]=\"id\" class=\"file-item-container\">\n    <div class=\"file-info\">\n        <ng-container *ngIf=\"canReadFiles; then fileNameUrl; else fileName\"></ng-container>\n        <ng-template #fileNameUrl>\n            <a\n                class=\"file-name file-name--link\"\n                tabindex=\"0\"\n                [href]=\"file.objectURL\"\n                download>\n                {{ file.name }}\n            </a>\n        </ng-template>\n        <ng-template #fileName>\n            <span\n                *ngIf=\"!canReadFiles\"\n                class=\"file-name\">\n                {{ file.name }}\n            </span>\n        </ng-template>\n        <span class=\"file-size\">\n            {{ simplifySize(file.size) }}\n        </span>\n        <div\n            *ngIf=\"file.isUploading && !isSmallDevice\"\n            class=\"progressbar\"\n            [attr.aria-label]=\"ariaLabelProgress || 'platform.angular_components.loading_file' | translate\">\n            <s-progressbar\n                [value]=\"file.progress\"\n                activeColor=\"blue\"\n                [showValue]=\"true\">\n            </s-progressbar>\n        </div>\n        <span\n            *ngIf=\"file.isUploading && isSmallDevice\"    \n            class=\"fas fa-circle-notch fa-spin\"\n            [attr.aria-label]=\"ariaLabelProgress || 'platform.angular_components.loading_file' | translate\">\n        </span>\n\n        <span\n            *ngIf=\"!file.isUploading && !file.error\"\n            class=\"status-icon status-icon--success fas fa-check\"\n            [attr.aria-label]=\"ariaLabelSuccess || successTooltip || 'platform.angular_components.file_attached_successfully' | translate\"\n            [sTooltip]=\"successTooltip || 'platform.angular_components.file_attached_successfully' | translate\">\n        </span>\n        <span\n            *ngIf=\"!file.isUploading && file.error\"\n            class=\"status-icon status-icon--fail fas fa-times\"\n            [attr.aria-label]=\"file.error?.message\"\n            [sTooltip]=\"file.error?.message\">\n        </span>\n    </div>\n    <button\n        *ngIf=\"file.isUploading\"\n        class=\"file-option file-option--cancel\"\n        (click)=\"cancelUpload.emit(file)\">\n        {{ cancelLabel || \"platform.angular_components.cancel\" | translate }}\n    </button>\n    <button\n        *ngIf=\"canRemoveFiles && !file.isUploading\"\n        class=\"file-option file-option--remove\"\n        (click)=\"removeFile.emit(file)\">\n        {{ removeLabel || \"platform.angular_components.remove\" | translate }}\n    </button>\n</div>\n",
+        styles: [".file-item-container{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:16px;padding:16px}.file-item-container .file-info{color:#212533;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;gap:16px;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.file-item-container .file-info .file-name{-ms-flex-positive:1;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-container .file-info .file-name--link{color:#428bca;text-decoration:none}.file-item-container .file-info .file-size{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-container .progressbar{width:20%}.file-item-container .status-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:12px}.file-item-container .status-icon--success{color:#0c9348}.file-item-container .status-icon--fail{color:#c13018}.file-item-container .file-option{background-color:transparent;border:none;color:#428bca;cursor:pointer;font-family:\"Open Sans\",sans-serif;font-size:14px;overflow:hidden;text-overflow:ellipsis;max-width:100%}@media screen and (max-width:600px){.file-item-container{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}}"]
+    })
+], FileItemComponent);
+
 const moment$3 = moment_;
+let FileUploadService = class FileUploadService {
+    constructor() {
+        this.BASE_URL_FIELD_CUSTOMIZATION = "platform/field_customization";
+        this.TOKEN = new AbortController();
+    }
+    getMetadataCustomField(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return CustomHttpClient.POST(`${this.BASE_URL_FIELD_CUSTOMIZATION}/queries/getFileMetadata`, request, { signal: this.TOKEN.signal });
+        });
+    }
+};
+FileUploadService = __decorate([
+    Injectable()
+], FileUploadService);
+
+var FileUploadComponent_1;
+const moment$4 = moment_;
 let FileUploadComponent = FileUploadComponent_1 = class FileUploadComponent {
     constructor(sanitizer, fileUploadService, translate) {
         this.sanitizer = sanitizer;
@@ -5856,58 +6093,59 @@ let FileUploadComponent = FileUploadComponent_1 = class FileUploadComponent {
         this.cancelUpload = new EventEmitter();
         this.downloadFile = new EventEmitter();
         this.validateErrors = new EventEmitter();
+        this.inputValue = "";
         this._files = [];
         this.ngUsubscribe = new Subject();
-        this.inputValue = "";
     }
     set files(files) {
         var _a;
         if (this.showFileUploadDate && ((_a = files[0]) === null || _a === void 0 ? void 0 : _a.objectId)) {
-            this.getUploadDate(files);
+            this._getUploadDate(files);
         }
-        this._files = files.map(file => {
-            if (this.isImage(file)) {
+        this._files = files.map((file) => {
+            if (this._isImage(file)) {
                 file.objectURL = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
             }
             return file;
         });
     }
     ngOnInit() {
-        this.supportedExtensions = this.supportedExtensions
-            .map(extension => extension.replace(".", "").toLowerCase());
+        this.supportedExtensions = this.supportedExtensions.map((extension) => extension.replace(".", "").toLowerCase());
     }
     ngOnDestroy() {
         this.ngUsubscribe.next();
         this.ngUsubscribe.complete();
     }
-    ngAfterContentInit() {
-        this.update();
-    }
-    onResize() {
-        this.update();
-    }
     onFileSelect(files) {
         const newFiles = [];
         if (!this.multiple) {
             this.files = [];
         }
-        if (this.isFileLimitExceeded(files)) {
+        if (this._isFileLimitExceeded(files)) {
             this.validateErrors.emit({
                 files,
                 validation: ValidateErrors.MAX_FILE_LIMIT,
             });
-            this.clearFileInput();
+            this._clearFileInput();
+            return;
+        }
+        if (this._isFileCombinedSizeExceeded(files)) {
+            this.validateErrors.emit({
+                files,
+                validation: ValidateErrors.MAX_COMBINED_FILE_SIZE,
+            });
+            this._clearFileInput();
             return;
         }
         for (const file of files) {
-            if (this.isUnsupportedFileExtension(file)) {
+            if (this._isUnsupportedFileExtension(file)) {
                 this.validateErrors.emit({
                     files: [file],
                     validation: ValidateErrors.UNSUPPORTED_EXTENSION,
                 });
                 continue;
             }
-            if (this.isFileSizeExceeded(file)) {
+            if (this._isFileSizeExceeded(file)) {
                 this.validateErrors.emit({
                     files: [file],
                     validation: ValidateErrors.MAX_FILE_SIZE,
@@ -5922,7 +6160,7 @@ let FileUploadComponent = FileUploadComponent_1 = class FileUploadComponent {
                 files: newFiles,
             });
         }
-        this.clearFileInput();
+        this._clearFileInput();
     }
     onRemoveFile(file) {
         const fileIndex = this.files.indexOf(file);
@@ -5931,12 +6169,13 @@ let FileUploadComponent = FileUploadComponent_1 = class FileUploadComponent {
             this.removeFile.emit({ file });
         }
     }
-    onCancelUpload(index) {
-        const removedFiles = this.files.splice(index, 1);
-        if (removedFiles.length) {
+    onCancelUpload(file) {
+        const index = this.files.indexOf(file);
+        if (index != -1) {
+            this.files.splice(index, 1);
             this.cancelUpload.emit(index);
         }
-        this.clearFileInput();
+        this._clearFileInput();
     }
     onDowloadFile(index) {
         this.downloadFile.emit({
@@ -5947,50 +6186,64 @@ let FileUploadComponent = FileUploadComponent_1 = class FileUploadComponent {
     get files() {
         return this._files;
     }
-    update() {
-        const windowWidth = window.innerWidth;
-        this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
-    }
-    isImage(file) {
+    _isImage(file) {
         return /^image\//.test(file.type);
     }
-    isFileLimitExceeded(files) {
+    _isFileLimitExceeded(files) {
         if (!this.fileLimit) {
             return false;
         }
         return this.files.length + files.length > this.fileLimit;
     }
-    isFileSizeExceeded(file) {
+    _isFileCombinedSizeExceeded(files) {
+        if (!this.maxCombinedFileSize) {
+            return false;
+        }
+        const filesList = [...files, ...this.files];
+        const combinedSize = filesList.reduce((combinedSize, file) => combinedSize + file.size, 0);
+        return combinedSize > this.maxCombinedFileSize;
+    }
+    _isFileSizeExceeded(file) {
         if (!this.maxFileSize) {
             return false;
         }
         return file.size > this.maxFileSize;
     }
-    isUnsupportedFileExtension(file) {
+    _isUnsupportedFileExtension(file) {
         var _a;
         if ((_a = this.supportedExtensions) === null || _a === void 0 ? void 0 : _a.length) {
-            const extension = file.name.split(".").pop().toLowerCase();
+            const extension = file.name
+                .split(".")
+                .pop()
+                .toLowerCase();
             return !this.supportedExtensions.includes(extension);
         }
         return false;
     }
-    clearFileInput() {
+    _clearFileInput() {
         this.inputUpload.nativeElement.value = null;
     }
-    getUploadDate(blobFile) {
+    _getUploadDate(blobFile) {
         if (!blobFile) {
             return;
         }
-        this.fileUploadService.getMetadataCustomField({ objectId: blobFile[0].objectId })
-            .then(metadata => this.setModifiedDate(metadata));
-    }
-    setModifiedDate(metadata) {
-        const hour = moment$3(metadata.modified).format("HH");
-        const minutes = moment$3(metadata.modified).format("mm");
-        const day = moment$3(metadata.modified).format("DD");
-        const month = moment$3(metadata.modified).format("MM");
-        const fullYear = moment$3(metadata.modified).format("YYYY");
-        this.modifiedDate = this.translate.instant("platform.angular_components.date_modified_custom_blob", { hour, minutes, day, month, fullYear });
+        this.fileUploadService
+            .getMetadataCustomField({ objectId: blobFile[0].objectId })
+            .then((metadata) => this._setModifiedDate(metadata));
+    }
+    _setModifiedDate(metadata) {
+        const hour = moment$4(metadata.modified).format("HH");
+        const minutes = moment$4(metadata.modified).format("mm");
+        const day = moment$4(metadata.modified).format("DD");
+        const month = moment$4(metadata.modified).format("MM");
+        const fullYear = moment$4(metadata.modified).format("YYYY");
+        this.modifiedDate = this.translate.instant("platform.angular_components.date_modified_custom_blob", {
+            hour,
+            minutes,
+            day,
+            month,
+            fullYear,
+        });
     }
 };
 FileUploadComponent.nextId = 0;
@@ -6035,6 +6288,9 @@ __decorate([
 __decorate([
     Input()
 ], FileUploadComponent.prototype, "maxFileSize", void 0);
+__decorate([
+    Input()
+], FileUploadComponent.prototype, "maxCombinedFileSize", void 0);
 __decorate([
     Input()
 ], FileUploadComponent.prototype, "fileLimit", void 0);
@@ -6080,14 +6336,11 @@ __decorate([
 __decorate([
     Output()
 ], FileUploadComponent.prototype, "validateErrors", void 0);
-__decorate([
-    HostListener("window:resize")
-], FileUploadComponent.prototype, "onResize", null);
 FileUploadComponent = FileUploadComponent_1 = __decorate([
     Component({
         selector: "s-file-upload",
-        template: "<div\n    [id]=\"id\"\n    class=\"s-fileupload\">\n    <div class=\"s-fileupload-choose\">\n        <input\n            #inputUpload\n            [id]=\"id+'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer\n                ? $event.dataTransfer.files\n                : $event.target.files)\">        \n        <s-button\n            *ngIf=\"permissions.includes(ADD_PERMISSION)\"\n            [id]=\"id + 'upload-button'\"\n            [label]=\"chooseLabel || 'platform.angular_components.attach_files' | translate\"\n            (onClick)=\"inputUpload.click()\"\n            priority=\"primary\"\n            [disabled]=\"disabled || !!formGroup?.disabled\"\n            [auxiliary]=\"false\">\n        </s-button>\n    </div>\n\n    <section\n        *ngIf=\"files.length\"    \n        [id]=\"id + 'fileupload-list'\"\n        class=\"s-fileupload-list\"\n        role=\"grid\">\n        <ng-container *ngFor=\"let file of files; let i = index\">\n            <div\n                class=\"s-fileupload-list-file\"\n                role=\"row\">\n                <div\n                    [id]=\"id + '-file-' + i + '-name'\"\n                    class=\"s-fileupload-list-file-name\"\n                    role=\"gridcell\">\n                    <ng-container *ngTemplateOutlet=\"permissions.includes(READ_PERMISSION) && file.savedFile || file.progress === 100\n                        ? descriptionUrl\n                        : description; context: {\n                            $implicit: file,\n                            index: i\n                        }\">\n                    </ng-container>\n                    <span *ngIf=\"modifiedDate\" class=\"s-fileupload-list-file-name-date\">{{ modifiedDate }}</span>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-status\"\n                    role=\"gridcell\">\n                    <p-progressBar\n                        *ngIf=\"file.isUploading && !isSmallDevice\"\n                        [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n                        [value]=\"file.progress\"\n                        [showValue]=\"false\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelProgress || 'platform.angular_components.loading_file' | translate\">\n                    </p-progressBar>\n                    <span\n                        *ngIf=\"file.isUploading && isSmallDevice\"    \n                        [id]=\"id + '-file-' + i + '-spin'\"\n                        class=\"fas fa-circle-notch fa-spin\"\n                        [attr.aria-label]=\"ariaLabelProgress || 'platform.angular_components.loading_file' | translate\">\n                    </span>\n                    <span\n                        *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n                        [id]=\"id + '-file-' + i + '-check'\"\n                        class=\"fas fa-check\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelSuccess || successTooltip || 'platform.angular_components.file_attached_successfully' | translate\"\n                        [pTooltip]=\"successTooltip || 'platform.angular_components.file_attached_successfully' | translate\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                    <span\n                        *ngIf=\"file.error?.message\"    \n                        [id]=\"id + '-file-' + i + '-error'\"\n                        class=\"fas fa-times\"\n                        role=\"alert\"\n                        [pTooltip]=\"file.error?.message\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-actions\"\n                    role=\"gridcell\">\n                    <a\n                        *ngIf=\"file.isUploading\"\n                        [id]=\"id + '-file-' + i + '-cancel'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onCancelUpload(i)\">\n                        {{ cancelLabel || 'platform.angular_components.cancel' | translate }}\n                    </a>\n                    <a\n                        *ngIf=\"permissions.includes(REMOVE_PERMISSION) && !file.isUploading && !(disabled || !!formGroup?.disabled)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [id]=\"id + '-file-' + i + '-remove'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onRemoveFile(file)\"\n                        [attr.aria-label]=\"ariaLabelRemove || removeLabel || 'platform.angular_components.remove' | translate\">\n                        {{ removeLabel || 'platform.angular_components.remove' | translate }}\n                    </a>\n                </div>\n            </div>\n        </ng-container>\n    </section>\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i = index>\n    <a\n        [id]=\"id + '-file-' + i + '-name-link'\"\n        tabindex=\"0\"\n        (click)=\"onDowloadFile(i)\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}\n    </a>\n    <a\n        style=\"display: none;\"\n        [href]=\"file.objectURL\"\n        target=\"_blank\"\n        download\n        #anchor>\n    </a>\n</ng-template>\n\n<ng-template\n    #description\n    let-file>\n    <span\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">\n        {{file.name}}\n    </span>\n</ng-template>\n",
-        styles: [".s-fileupload .s-fileupload-choose{position:relative;margin:15px 0;width:-webkit-max-content;width:max-content}.s-fileupload input[type=file]{display:none}.s-fileupload-list{border:1px solid #ccc}.s-fileupload-list-file:not(:first-child){border-top:1px solid #ccc}.s-fileupload-list .s-fileupload-list-file{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:center;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name .s-fileupload-list-file-name-date{font-size:.75rem;color:#999}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name>a{cursor:pointer;text-decoration:none}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.s-fileupload-list .s-fileupload-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-check{color:#0c9348;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-times{color:#c13018;font-size:12px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin-top:15px;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;width:100%}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action{text-decoration:none;color:#428bca}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :focus,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :visited,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action:hover{text-decoration:none}@media (min-width:768px){.s-fileupload-list .s-fileupload-list-file{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{width:auto;-ms-flex-positive:2;flex-grow:2}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{margin:0 15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin:0;width:auto}}"]
+        template: "<div [id]=\"id\" class=\"fileupload\">\n    <div class=\"fileupload-choose\">\n        <input\n            #inputUpload\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer ? $event.dataTransfer.files : $event.target.files)\"\n        />\n        <s-button\n            *ngIf=\"permissions.includes(ADD_PERMISSION)\"\n            [label]=\"chooseLabel || 'platform.angular_components.attach_files' | translate\"\n            (onClick)=\"inputUpload.click()\"\n            priority=\"primary\"\n            [disabled]=\"disabled || !!formGroup?.disabled\"\n            [auxiliary]=\"false\"\n        >\n        </s-button>\n    </div>\n    <ul\n        *ngIf=\"files.length\"\n        class=\"file-list\"\n        role=\"grid\">\n        <li *ngFor=\"let file of files; let i = index\" class=\"file-list-item\">\n            <s-file-item\n                [id]=\"'file-' + i\"\n                [file]=\"file\"\n                [canReadFiles]=\"permissions.includes(READ_PERMISSION) && file.savedFile || file.progress === 100\"\n                [canRemoveFiles]=\"permissions.includes(REMOVE_PERMISSION) && !(disabled || !!formGroup?.disabled)\"\n                [cancelLabel]=\"cancelLabel\"\n                [removeLabel]=\"removeLabel\"\n                [ariaLabelProgress]=\"ariaLabelProgress\"\n                [successTooltip]=\"successTooltip\"\n                [ariaLabelSuccess]=\"ariaLabelSuccess\"\n                (cancelUpload)=\"onCancelUpload($event)\"\n                (removeFile)=\"onRemoveFile($event)\"\n            >\n            </s-file-item>\n        </li>\n    </ul>\n</div>\n",
+        styles: [".fileupload .fileupload-choose{position:relative;margin:15px 0;width:-webkit-max-content;width:max-content}.fileupload input[type=file]{display:none}.fileupload .file-list{border:1px solid #c1c1cc;border-radius:4px;padding:0}.fileupload .file-list .file-list-item{list-style-type:none}.fileupload .file-list .file-list-item:not(:first-child){border-top:1px solid #ccc}"]
     })
 ], FileUploadComponent);
 
@@ -6095,15 +6348,22 @@ let FileUploadModule = class FileUploadModule {
 };
 FileUploadModule = __decorate([
     NgModule({
-        declarations: [FileUploadComponent],
         imports: [
             CommonModule,
+            HttpClientModule,
             ButtonModule,
-            TooltipModule$1,
-            ProgressBarModule$1,
+            TooltipModule,
+            ProgressBarModule,
             TranslateModule,
         ],
-        providers: [FileUploadService],
+        declarations: [
+            FileUploadComponent,
+            FileItemComponent,
+        ],
+        providers: [
+            FileUploadService,
+            LocaleService,
+        ],
         exports: [FileUploadComponent],
     })
 ], FileUploadModule);
@@ -7114,7 +7374,7 @@ var EnumBadgeColors;
     EnumBadgeColors["GRAY"] = "gray";
 })(EnumBadgeColors || (EnumBadgeColors = {}));
 
-const moment$4 = moment_;
+const moment$5 = moment_;
 let TableColumnsComponent = class TableColumnsComponent {
     constructor(viewContainerRef, translate, hostProjectConfigs) {
         this.viewContainerRef = viewContainerRef;
@@ -7219,7 +7479,7 @@ let TableColumnsComponent = class TableColumnsComponent {
                     return applyMask(attributeValue, numberConfigs, this.isNumber(attributeValue));
                 case EnumColumnFieldType.DATE:
                     const dateFormat = this.getDateFormat(column, locale);
-                    return moment$4(attributeValue).format(dateFormat);
+                    return moment$5(attributeValue).format(dateFormat);
                 case EnumColumnFieldType.BOOLEAN:
                     const value = attributeValue ? "yes" : "no";
                     return this.translate.instant(prefix + value);
@@ -9068,7 +9328,7 @@ var CustomFieldType;
     CustomFieldType["Any"] = "Any";
     CustomFieldType["Enum"] = "Enum";
 })(CustomFieldType || (CustomFieldType = {}));
-const moment$5 = moment_; // @HACK Necessary because of https://github.com/rollup/rollup/issues/670
+const moment$6 = moment_; // @HACK Necessary because of https://github.com/rollup/rollup/issues/670
 let CustomFieldsComponent = CustomFieldsComponent_1 = class CustomFieldsComponent {
     constructor(customFieldsService, localeService, sanitizer, translateService, controlContainer) {
         this.customFieldsService = customFieldsService;
@@ -9254,16 +9514,16 @@ let CustomFieldsComponent = CustomFieldsComponent_1 = class CustomFieldsComponen
                 return;
             switch (type) {
                 case FieldType.Date:
-                    parsedValues[name] = moment$5(value).toDate();
+                    parsedValues[name] = moment$6(value).toDate();
                     break;
                 case FieldType.DateTime:
-                    parsedValues[name] = moment$5(value).toDate();
+                    parsedValues[name] = moment$6(value).toDate();
                     break;
                 case FieldType.LocalDateTime:
-                    parsedValues[name] = moment$5(value, "YYYY-MM-DD[T]HH:mm:ss.SSS").toDate();
+                    parsedValues[name] = moment$6(value, "YYYY-MM-DD[T]HH:mm:ss.SSS").toDate();
                     break;
                 case FieldType.Time:
-                    parsedValues[name] = moment$5(value, "HH:mm:ss").toDate();
+                    parsedValues[name] = moment$6(value, "HH:mm:ss").toDate();
                     break;
             }
         });
@@ -9294,16 +9554,16 @@ let CustomFieldsComponent = CustomFieldsComponent_1 = class CustomFieldsComponen
                             value = new BigNumber(value).toFixed(scale).toString();
                         break;
                     case FieldType.Date:
-                        value = moment$5(value).format("YYYY-MM-DD");
+                        value = moment$6(value).format("YYYY-MM-DD");
                         break;
                     case FieldType.DateTime:
-                        value = moment$5(value).format();
+                        value = moment$6(value).format();
                         break;
                     case FieldType.LocalDateTime:
-                        value = moment$5(value).format("YYYY-MM-DD[T]HH:mm:ss.SSS");
+                        value = moment$6(value).format("YYYY-MM-DD[T]HH:mm:ss.SSS");
                         break;
                     case FieldType.Time:
-                        value = moment$5(value).format("HH:mm:ss");
+                        value = moment$6(value).format("HH:mm:ss");
                         break;
                 }
             }
@@ -9696,7 +9956,7 @@ EditableOverlayModule = __decorate([
     })
 ], EditableOverlayModule);
 
-const moment$6 = moment_;
+const moment$7 = moment_;
 const YEAR = "year";
 const MONTH = "month";
 const DAY = "day";
@@ -9706,19 +9966,19 @@ const SECOND = "second";
 const MILLISECOND = "millisecond";
 class DateUtils {
     static parse(date) {
-        return moment$6(date).toDate();
+        return moment$7(date).toDate();
     }
     static toString(date, with_time = false) {
-        let result = with_time ? moment$6(date, "YYYY-MM-DD hh:mm:ss.SSS") : moment$6(date, "YYYY-MM-DD");
+        let result = with_time ? moment$7(date, "YYYY-MM-DD hh:mm:ss.SSS") : moment$7(date, "YYYY-MM-DD");
         return result.toString();
     }
     static format(date, formatString = "YYYY-MM-DD HH:mm:ss.SSS", lang = "en") {
-        const monthName = moment$6(date)
+        const monthName = moment$7(date)
             .locale(lang)
             .startOf("month")
             .format("MMMM");
         const monthNameCapitalized = monthName.charAt(0).toUpperCase() + monthName.slice(1);
-        const dateToFormat = moment$6(date).locale(lang);
+        const dateToFormat = moment$7(date).locale(lang);
         const format_map = {
             YYYY: dateToFormat.format("YYYY"),
             MM: dateToFormat.format("MM"),
@@ -9748,13 +10008,13 @@ class DateUtils {
         return str;
     }
     static diff(fistDate, secondDate, scale) {
-        const milliseconds = moment$6(fistDate).diff(secondDate, MILLISECOND);
-        const seconds = moment$6(fistDate).diff(secondDate, SECOND);
-        const minutes = moment$6(fistDate).diff(secondDate, MINUTE);
-        const hours = moment$6(fistDate).diff(secondDate, HOUR);
-        const days = moment$6(fistDate).diff(secondDate, DAY);
-        const months = moment$6(fistDate).diff(secondDate, MONTH);
-        const years = moment$6(fistDate).diff(secondDate, YEAR);
+        const milliseconds = moment$7(fistDate).diff(secondDate, MILLISECOND);
+        const seconds = moment$7(fistDate).diff(secondDate, SECOND);
+        const minutes = moment$7(fistDate).diff(secondDate, MINUTE);
+        const hours = moment$7(fistDate).diff(secondDate, HOUR);
+        const days = moment$7(fistDate).diff(secondDate, DAY);
+        const months = moment$7(fistDate).diff(secondDate, MONTH);
+        const years = moment$7(fistDate).diff(secondDate, YEAR);
         if (!scale.endsWith("s")) {
             scale += "s";
         }
@@ -9769,14 +10029,14 @@ class DateUtils {
         }[scale]);
     }
     static today() {
-        const dateStr = moment$6().format("YYY-MM-DD");
+        const dateStr = moment$7().format("YYY-MM-DD");
         return new Date(dateStr);
     }
     static now() {
-        return moment$6().toDate();
+        return moment$7().toDate();
     }
     static add(date, quantity, scale) {
-        return moment$6(date).add(quantity, scale).toDate();
+        return moment$7(date).add(quantity, scale).toDate();
     }
     static startOf(date, scale) {
         const scores = {
@@ -9804,7 +10064,7 @@ class DateUtils {
         return new Date(vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6]);
     }
     static clone(date) {
-        return moment$6(date).toDate();
+        return moment$7(date).toDate();
     }
     static getDateValues(date) {
         return [
@@ -9818,7 +10078,7 @@ class DateUtils {
         ];
     }
     static getDaysInMonth(date) {
-        return moment$6(date, "YYYY-MM").daysInMonth();
+        return moment$7(date, "YYYY-MM").daysInMonth();
     }
 }
 
@@ -13150,138 +13410,6 @@ ProfilePicturePickerModule = __decorate([
     })
 ], ProfilePicturePickerModule);
 
-var ProgressBarColors;
-(function (ProgressBarColors) {
-    ProgressBarColors["Blue"] = "blue";
-    ProgressBarColors["Green"] = "green";
-    ProgressBarColors["Red"] = "red";
-    ProgressBarColors["Yellow"] = "yellow";
-})(ProgressBarColors || (ProgressBarColors = {}));
-
-var ProgressBarMode;
-(function (ProgressBarMode) {
-    ProgressBarMode["Determinate"] = "determinate";
-    ProgressBarMode["Indeterminate"] = "indeterminate";
-})(ProgressBarMode || (ProgressBarMode = {}));
-
-let ProgressBarComponent = class ProgressBarComponent {
-    constructor() {
-        this.showValue = true;
-        this.mode = ProgressBarMode.Determinate;
-    }
-    ngOnInit() {
-        this.validateInputs();
-    }
-    validateInputs() {
-        if (this.value < 0 || this.value > 100) {
-            throw new Error("Invalid value for value");
-        }
-        if (this.targetValue < 0 || this.targetValue > 100) {
-            throw new Error("Invalid value for targetValue");
-        }
-        if (this.mode === ProgressBarMode.Indeterminate && (this.value || this.targetValue || this.targetLabel)) {
-            throw new Error("When the mode is indeterminate, the value, targetValue and targetLabel parameters are not expected.");
-        }
-    }
-};
-__decorate([
-    Input()
-], ProgressBarComponent.prototype, "value", void 0);
-__decorate([
-    Input()
-], ProgressBarComponent.prototype, "targetValue", void 0);
-__decorate([
-    Input()
-], ProgressBarComponent.prototype, "label", void 0);
-__decorate([
-    Input()
-], ProgressBarComponent.prototype, "targetLabel", void 0);
-__decorate([
-    Input()
-], ProgressBarComponent.prototype, "activeColor", void 0);
-__decorate([
-    Input()
-], ProgressBarComponent.prototype, "showValue", void 0);
-__decorate([
-    Input()
-], ProgressBarComponent.prototype, "mode", void 0);
-ProgressBarComponent = __decorate([
-    Component({
-        selector: "s-progressbar",
-        template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n   <s-progressbar-determinate\n      [value]=\"value\"\n      [targetValue]=\"targetValue\"\n      [targetLabel]=\"targetLabel\"\n      [activeColor]=\"activeColor\"\n      [showValue]=\"showValue\">\n   </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n   <s-progressbar-indeterminate\n      [activeColor]=\"activeColor\"\n      [label]=\"label\">\n   </s-progressbar-indeterminate>\n</ng-template>",
-        styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
-    })
-], ProgressBarComponent);
-
-let ProgressBarDeterminateComponent = class ProgressBarDeterminateComponent {
-    constructor() {
-        this.showValue = true;
-    }
-    ngOnInit() {
-        this.validateValues();
-    }
-    validateValues() {
-        if (this.value < 0 || this.value > 100) {
-            throw new Error("Invalid value for value");
-        }
-        if (this.targetValue < 0 || this.targetValue > 100) {
-            throw new Error("Invalid value for targetValue");
-        }
-    }
-};
-__decorate([
-    Input()
-], ProgressBarDeterminateComponent.prototype, "value", void 0);
-__decorate([
-    Input()
-], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
-__decorate([
-    Input()
-], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
-__decorate([
-    Input()
-], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
-__decorate([
-    Input()
-], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
-ProgressBarDeterminateComponent = __decorate([
-    Component({
-        selector: "s-progressbar-determinate",
-        template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n       <div\n          class=\"progressbar-active\"\n          [ngClass]=\"{\n             'progressbar-active--blue' : activeColor === 'blue',\n             'progressbar-active--green': activeColor === 'green',\n             'progressbar-active--red': activeColor === 'red',\n             'progressbar-active--yellow': activeColor === 'yellow'\n          }\"\n          [ngStyle]=\"{ 'width': value + '%' }\">\n          {{ showValue && value ? value + '%' : '' }}\n       </div>\n    </div>\n    <div\n       *ngIf=\"targetValue\"\n       class=\"target\"\n       [ngStyle]=\"{\n          'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n          'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n          'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n       }\">\n       <span class=\"target-line\"></span>\n       <span class=\"target-label\">\n           {{ targetLabel || value + '%' }}\n       </span>\n    </div>\n </div>\n ",
-        styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
-    })
-], ProgressBarDeterminateComponent);
-
-let ProgressBarIndeterminateComponent = class ProgressBarIndeterminateComponent {
-};
-__decorate([
-    Input()
-], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
-__decorate([
-    Input()
-], ProgressBarIndeterminateComponent.prototype, "label", void 0);
-ProgressBarIndeterminateComponent = __decorate([
-    Component({
-        selector: "s-progressbar-indeterminate",
-        template: "<!-- progressbar-indeterminate.component.html -->\n<div class=\"progressbar-indeterminate\">\n    <div class=\"progressbar-container\">\n        <div class=\"indeterminate-bar\" [ngClass]=\"{\n            'indeterminate-bar--blue': activeColor === 'blue',\n            'indeterminate-bar--green': activeColor === 'green',\n            'indeterminate-bar--red': activeColor === 'red',\n            'indeterminate-bar--yellow': activeColor === 'yellow'\n        }\"></div>\n    </div>\n    \n    <span *ngIf=\"label\" class=\"progressbar-label\">{{ label }}</span>\n</div>\n",
-        styles: [".progressbar-indeterminate{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:5s infinite indeterminate-progress;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translateX(-250%)}100%{transform:translateX(250%)}}"]
-    })
-], ProgressBarIndeterminateComponent);
-
-let ProgressBarModule = class ProgressBarModule {
-};
-ProgressBarModule = __decorate([
-    NgModule({
-        imports: [CommonModule],
-        declarations: [
-            ProgressBarComponent,
-            ProgressBarDeterminateComponent,
-            ProgressBarIndeterminateComponent,
-        ],
-        exports: [ProgressBarComponent],
-    })
-], ProgressBarModule);
-
 let PanelComponent = class PanelComponent {
     constructor() {
         this.toggleable = true;
@@ -15638,5 +15766,5 @@ const fallback = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TemplateDirective, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, FileUploadComponent$1 as ɵba, LookupFieldComponent as ɵbb, NumberFieldComponent as ɵbc, PasswordFieldComponent as ɵbd, RadioButtonComponent as ɵbe, RowComponent as ɵbf, SectionComponent as ɵbg, SelectFieldComponent as ɵbh, SliderFieldComponent as ɵbi, TextAreaFieldComponent as ɵbj, TextAreaIAFieldComponent as ɵbk, IAssistService as ɵbl, TextFieldComponent as ɵbm, DecimalField as ɵbo, SideTableComponent as ɵbp, ThumbnailService as ɵbq, InfiniteScrollModule as ɵbr, InfiniteScrollDirective as ɵbs, StructureModule as ɵbt, HeaderComponent as ɵbu, FooterComponent as ɵbv, KanbanEventService as ɵbw, KanbanItemComponent as ɵbx, KanbanColumnComponent as ɵby, KanbanItemDraggingComponent as ɵbz, CustomTranslationsModule as ɵc, NumberLocaleOptions as ɵca, BorderButtonModule as ɵcb, BorderButtonComponent as ɵcc, ProgressBarDeterminateComponent as ɵcd, ProgressBarIndeterminateComponent as ɵce, SelectButtonItemComponent as ɵcf, SlidePanelService as ɵcg, TieredMenuEventService as ɵch, TieredMenuService as ɵci, TieredMenuComponent as ɵcj, TieredMenuNestedComponent as ɵck, TieredMenuItemComponent as ɵcl, TieredMenuDividerComponent as ɵcm, TimelineItemModule as ɵcn, TimelineIconItemComponent as ɵco, HorizontalTimelineModule as ɵcp, HorizontalTimelineComponent as ɵcq, VerticalTimelineModule as ɵcr, VerticalTimelineComponent as ɵcs, RangeLineComponent as ɵct, CollapseOptionComponent as ɵcu, CollapsedItemsComponent as ɵcv, VerticalItemsComponent as ɵcw, CodeEditorComponent as ɵd, CoreFacade as ɵe, CodeMirror6Core as ɵf, CountryPhonePickerService as ɵg, LocalizedCurrencyImpurePipe as ɵh, LocalizedBignumberPipe as ɵi, LocalizedBignumberImpurePipe as ɵj, EmptyStateGoBackComponent as ɵk, FileUploadService as ɵl, InfoSignComponent as ɵm, TableColumnsComponent as ɵn, TablePagingComponent as ɵo, AutocompleteFieldComponent as ɵp, BignumberFieldComponent as ɵq, BooleanFieldComponent as ɵr, BooleanSwitchFieldComponent as ɵs, CalendarFieldComponent as ɵt, ChipsFieldComponent as ɵu, CountryPhonePickerFieldComponent as ɵv, CurrencyFieldComponent as ɵw, DynamicFieldComponent as ɵx, DynamicFormDirective as ɵy, FieldsetComponent as ɵz };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TemplateDirective, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, CurrencyFieldComponent as ɵba, DynamicFieldComponent as ɵbb, DynamicFormDirective as ɵbc, FieldsetComponent as ɵbd, FileUploadComponent$1 as ɵbe, LookupFieldComponent as ɵbf, NumberFieldComponent as ɵbg, PasswordFieldComponent as ɵbh, RadioButtonComponent as ɵbi, RowComponent as ɵbj, SectionComponent as ɵbk, SelectFieldComponent as ɵbl, SliderFieldComponent as ɵbm, TextAreaFieldComponent as ɵbn, TextAreaIAFieldComponent as ɵbo, IAssistService as ɵbp, TextFieldComponent as ɵbq, DecimalField as ɵbs, SideTableComponent as ɵbt, ThumbnailService as ɵbu, InfiniteScrollModule as ɵbv, InfiniteScrollDirective as ɵbw, StructureModule as ɵbx, HeaderComponent as ɵby, FooterComponent as ɵbz, CustomTranslationsModule as ɵc, KanbanEventService as ɵca, KanbanItemComponent as ɵcb, KanbanColumnComponent as ɵcc, KanbanItemDraggingComponent as ɵcd, NumberLocaleOptions as ɵce, BorderButtonModule as ɵcf, BorderButtonComponent as ɵcg, SelectButtonItemComponent as ɵch, SlidePanelService as ɵci, TieredMenuEventService as ɵcj, TieredMenuService as ɵck, TieredMenuComponent as ɵcl, TieredMenuNestedComponent as ɵcm, TieredMenuItemComponent as ɵcn, TieredMenuDividerComponent as ɵco, TimelineItemModule as ɵcp, TimelineIconItemComponent as ɵcq, HorizontalTimelineModule as ɵcr, HorizontalTimelineComponent as ɵcs, VerticalTimelineModule as ɵct, VerticalTimelineComponent as ɵcu, RangeLineComponent as ɵcv, CollapseOptionComponent as ɵcw, CollapsedItemsComponent as ɵcx, VerticalItemsComponent as ɵcy, CodeEditorComponent as ɵd, CoreFacade as ɵe, CodeMirror6Core as ɵf, CountryPhonePickerService as ɵg, LocalizedCurrencyImpurePipe as ɵh, LocalizedBignumberPipe as ɵi, LocalizedBignumberImpurePipe as ɵj, EmptyStateGoBackComponent as ɵk, ProgressBarDeterminateComponent as ɵl, ProgressBarIndeterminateComponent as ɵm, FileUploadService as ɵn, FileItemComponent as ɵo, LocaleService as ɵp, InfoSignComponent as ɵq, TableColumnsComponent as ɵr, TablePagingComponent as ɵs, AutocompleteFieldComponent as ɵt, BignumberFieldComponent as ɵu, BooleanFieldComponent as ɵv, BooleanSwitchFieldComponent as ɵw, CalendarFieldComponent as ɵx, ChipsFieldComponent as ɵy, CountryPhonePickerFieldComponent as ɵz };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map