@seniorsistemas/angular-components 17.3.14 → 17.3.16

package/bundles/seniorsistemas-angular-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@seniorsistemas/ng2-currency-mask'), require('primeng/breadcrumb'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@seniorsistemas/senior-platform-data'), require('@ngx-translate/core'), require('@codemirror/tooltip'), require('@codemirror/gutter'), require('ngx-mask'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/slider'), require('primeng/api'), require('primeng/progressbar'), require('@angular/platform-browser'), require('@angular/cdk/clipboard'), require('cropperjs'), require('@angular/cdk/drag-drop'), require('element-resize-detector'), require('primeng/confirmdialog'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar')) :
-    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/router', '@seniorsistemas/ng2-currency-mask', 'primeng/breadcrumb', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@seniorsistemas/senior-platform-data', '@ngx-translate/core', '@codemirror/tooltip', '@codemirror/gutter', 'ngx-mask', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/panel', 'primeng/radiobutton', 'primeng/slider', 'primeng/api', 'primeng/progressbar', '@angular/platform-browser', '@angular/cdk/clipboard', 'cropperjs', '@angular/cdk/drag-drop', 'element-resize-detector', 'primeng/confirmdialog', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar'], factory) :
-    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.router, global.ng2CurrencyMask, global.breadcrumb, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$1, global.seniorPlatformData, global.core$1, global.tooltip$1, global.gutter, global.ngxMask, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$2, global.dialog, global.table, global.moment_, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.panel, global.radiobutton, global.slider, global.api, global.progressbar, global.ng.platformBrowser, global.ng.cdk.clipboard, global.Cropper, global.ng.cdk['drag-drop'], global.elementResizeDetectorMaker_, global.confirmdialog, global.ng.cdk.a11y, global.scrollpanel, global.sidebar));
-}(this, (function (exports, core, animations, rxjs, operators, common, forms, router, ng2CurrencyMask, breadcrumb, tieredmenu, tooltip, dom, calendar, view, state, lint, language, generator, highlight, autocomplete$1, seniorPlatformData, core$1, tooltip$1, gutter, ngxMask, http, angular2Hotkeys, BigNumber, autocomplete$2, dialog, table, moment_, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, panel, radiobutton, slider, api, progressbar, platformBrowser, clipboard, Cropper, dragDrop, elementResizeDetectorMaker_, confirmdialog, a11y, scrollpanel, sidebar) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@seniorsistemas/ng2-currency-mask'), require('primeng/breadcrumb'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@seniorsistemas/senior-platform-data'), require('@ngx-translate/core'), require('@codemirror/tooltip'), require('@codemirror/gutter'), require('ngx-mask'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/slider'), require('primeng/api'), require('@angular/platform-browser'), require('@angular/cdk/clipboard'), require('cropperjs'), require('@angular/cdk/drag-drop'), require('element-resize-detector'), require('primeng/confirmdialog'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar')) :
+    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/router', '@seniorsistemas/ng2-currency-mask', 'primeng/breadcrumb', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@seniorsistemas/senior-platform-data', '@ngx-translate/core', '@codemirror/tooltip', '@codemirror/gutter', 'ngx-mask', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/panel', 'primeng/radiobutton', 'primeng/slider', 'primeng/api', '@angular/platform-browser', '@angular/cdk/clipboard', 'cropperjs', '@angular/cdk/drag-drop', 'element-resize-detector', 'primeng/confirmdialog', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar'], factory) :
+    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.router, global.ng2CurrencyMask, global.breadcrumb, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$1, global.seniorPlatformData, global.core$1, global.tooltip$1, global.gutter, global.ngxMask, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$2, global.dialog, global.table, global.moment_, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.panel, global.radiobutton, global.slider, global.api, global.ng.platformBrowser, global.ng.cdk.clipboard, global.Cropper, global.ng.cdk['drag-drop'], global.elementResizeDetectorMaker_, global.confirmdialog, global.ng.cdk.a11y, global.scrollpanel, global.sidebar));
+}(this, (function (exports, core, animations, rxjs, operators, common, forms, router, ng2CurrencyMask, breadcrumb, tieredmenu, tooltip, dom, calendar, view, state, lint, language, generator, highlight, autocomplete$1, seniorPlatformData, core$1, tooltip$1, gutter, ngxMask, http, angular2Hotkeys, BigNumber, autocomplete$2, dialog, table, moment_, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, panel, radiobutton, slider, api, platformBrowser, clipboard, Cropper, dragDrop, elementResizeDetectorMaker_, confirmdialog, a11y, scrollpanel, sidebar) { 'use strict';
 
     var BigNumber__default = 'default' in BigNumber ? BigNumber['default'] : BigNumber;
     Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper;
@@ -3619,14 +3619,28 @@
 
     var countries = [
         { id: "br", ddi: "+55", mask: ["(00) 0000-00009", "(00) 00000-0000"] },
-        { id: "us", ddi: "+1", mask: "000-0000" },
-        { id: "co", ddi: "+57", mask: "000 0000000" },
-        { id: "ar", ddi: "+54", mask: "000 00-0000-0000" },
-        { id: "cl", ddi: "+56", mask: "(0) 0000-0000" },
-        { id: "py", ddi: "+595", mask: "0000 000000" },
-        { id: "uy", ddi: "+598", mask: "000 000 000" },
+        { id: "ar", ddi: "+54", mask: ["(00) 0000-00009", "(000) 0000-0000"] },
+        { id: "bo", ddi: "+591", mask: "0 000 0000" },
+        { id: "cl", ddi: "+56", mask: "0 0000 0000" },
+        { id: "co", ddi: "+57", mask: ["0 00000009", "000 0000000"] },
+        { id: "cr", ddi: "+506", mask: "0000 0000" },
+        { id: "cu", ddi: "+53", mask: ["000 0009", "00 000000"] },
+        { id: "ec", ddi: "+593", mask: ["000 00009", "000 000 000"] },
+        { id: "sv", ddi: "+503", mask: "0000 0000" },
+        { id: "gt", ddi: "+502", mask: "0000 0000" },
+        { id: "ht", ddi: "+509", mask: "0000 0000" },
+        { id: "hn", ddi: "+504", mask: "0000-0000" },
+        { id: "mx", ddi: "+52", mask: ["00 0000 00009", "0 00 0000 0000"] },
+        { id: "ni", ddi: "+505", mask: "0000 0000" },
+        { id: "pa", ddi: "+507", mask: "0000 0000" },
+        { id: "py", ddi: "+595", mask: ["00 000 0009", "000 000000"] },
+        { id: "pe", ddi: "+51", mask: "000 000 000" },
+        { id: "do", ddi: "+1809", mask: "000 000-0000" },
+        { id: "uy", ddi: "+598", mask: ["0000 00009", "0000 00000"] },
+        { id: "ve", ddi: "+58", mask: "000-0000000" },
+        { id: "us", ddi: "+1", mask: "000-000-0000" },
+        { id: "ca", ddi: "+1", mask: "000-000-0000" },
         { id: "cn", ddi: "+86", mask: "000 0000 0000" },
-        { id: "ca", ddi: "+1", mask: "000-0000" },
         { id: "as", ddi: "+1684", mask: "000-0000" },
         { id: "ai", ddi: "+1264", mask: "000-0000" },
         { id: "ag", ddi: "+1268", mask: "000-0000" },
@@ -3636,7 +3650,6 @@
         { id: "vg", ddi: "+1284", mask: "000-0000" },
         { id: "ky", ddi: "+1345", mask: "000-0000" },
         { id: "dm", ddi: "+1767", mask: "000-0000" },
-        { id: "do", ddi: "+1809", mask: "000-0000" },
         { id: "gd", ddi: "+1473", mask: "000-0000" },
         { id: "gu", ddi: "+1671", mask: "000-0000" },
         { id: "jm", ddi: "+1876", mask: "000-0000" },
@@ -3654,7 +3667,6 @@
         { id: "af", ddi: "+93", mask: "000 000 0000" },
         { id: "al", ddi: "+355", mask: "000 000 0000" },
         { id: "hr", ddi: "+385", mask: "000 000 0000" },
-        { id: "ec", ddi: "+593", mask: "000 000 0000" },
         { id: "et", ddi: "+251", mask: "000 000 0000" },
         { id: "gh", ddi: "+233", mask: "000 000 0000" },
         { id: "gr", ddi: "+30", mask: "000 000 0000" },
@@ -3689,7 +3701,6 @@
         { id: "lu", ddi: "+352", mask: "000 000 000" },
         { id: "mk", ddi: "+389", mask: "000 000 000" },
         { id: "me", ddi: "+382", mask: "000 000 000" },
-        { id: "pe", ddi: "+51", mask: "000 000 000" },
         { id: "pl", ddi: "+48", mask: "000 000 000" },
         { id: "pt", ddi: "+351", mask: "000 000 000" },
         { id: "si", ddi: "+386", mask: "000 000 000" },
@@ -3729,18 +3740,14 @@
         { id: "ch", ddi: "+41", mask: "000 000 00 00" },
         { id: "vn", ddi: "+84", mask: "000 000 00 00" },
         { id: "bh", ddi: "+973", mask: "0000 0000" },
-        { id: "cr", ddi: "+506", mask: "0000 0000" },
-        { id: "sv", ddi: "+503", mask: "0000 0000" },
         { id: "ee", ddi: "+372", mask: "0000 0000" },
         { id: "sz", ddi: "+268", mask: "0000 0000" },
-        { id: "gt", ddi: "+502", mask: "0000 0000" },
         { id: "hk", ddi: "+852", mask: "0000 0000" },
         { id: "ls", ddi: "+266", mask: "0000 0000" },
         { id: "mo", ddi: "+853", mask: "0000 0000" },
         { id: "mt", ddi: "+356", mask: "0000 0000" },
         { id: "mu", ddi: "+230", mask: "0000 0000" },
         { id: "mn", ddi: "+976", mask: "0000 0000" },
-        { id: "ni", ddi: "+505", mask: "0000 0000" },
         { id: "om", ddi: "+968", mask: "0000 0000" },
         { id: "pg", ddi: "+675", mask: "0000 0000" },
         { id: "qa", ddi: "+974", mask: "0000 0000" },
@@ -3770,7 +3777,6 @@
         { id: "ne", ddi: "+227", mask: "00 00 00 00" },
         { id: "sm", ddi: "+378", mask: "00 00 00 00" },
         { id: "tg", ddi: "+228", mask: "00 00 00 00" },
-        { id: "bo", ddi: "+591", mask: "00000000" },
         { id: "gi", ddi: "+350", mask: "00000000" },
         { id: "ki", ddi: "+686", mask: "00000000" },
         { id: "tv", ddi: "+688", mask: "00000000" },
@@ -3787,7 +3793,6 @@
         { id: "mz", ddi: "+258", mask: "00 000 0000" },
         { id: "mm", ddi: "+95", mask: "00 000 0000" },
         { id: "ck", ddi: "+682", mask: "00 000" },
-        { id: "cu", ddi: "+53", mask: "00 000000" },
         { id: "cy", ddi: "+357", mask: "00 000000" },
         { id: "eg", ddi: "+20", mask: "0000 000 0000" },
         { id: "ir", ddi: "+98", mask: "0000 000 0000" },
@@ -3801,9 +3806,6 @@
         { id: "de", ddi: "+49", mask: "00000 0000000" },
         { id: "gl", ddi: "+299", mask: "00 00 00" },
         { id: "wf", ddi: "+681", mask: "00 00 00" },
-        { id: "ht", ddi: "+509", mask: "00 00 0000" },
-        { id: "hn", ddi: "+504", mask: "0000-0000" },
-        { id: "pa", ddi: "+507", mask: "0000-0000" },
         { id: "hu", ddi: "+36", mask: "(00) 000 0000" },
         { id: "in", ddi: "+91", mask: "000000 00000" },
         { id: "id", ddi: "+62", mask: "0000-000-000" },
@@ -3819,7 +3821,6 @@
         { id: "mg", ddi: "+261", mask: "000 00 000 00" },
         { id: "mw", ddi: "+265", mask: "000 00 000 00" },
         { id: "my", ddi: "+60", mask: "000-000 0000" },
-        { id: "mx", ddi: "+52", mask: "000 000 000 0000" },
         { id: "md", ddi: "+373", mask: "0000 00 000" },
         { id: "mc", ddi: "+377", mask: "00 00 00 00 00" },
         { id: "ma", ddi: "+212", mask: "0000-000000" },
@@ -3841,7 +3842,6 @@
         { id: "tr", ddi: "+90", mask: "0000 000 00 00" },
         { id: "tm", ddi: "+993", mask: "0 00 000000" },
         { id: "uz", ddi: "+998", mask: "0 00 000 00 00" },
-        { id: "ve", ddi: "+58", mask: "0000-0000000" },
     ];
 
 
@@ -6226,24 +6226,171 @@
         return EmptyStateModule;
     }());
 
-    var FileUploadService = /** @class */ (function () {
-        function FileUploadService() {
-            this.BASE_URL_FIELD_CUSTOMIZATION = "platform/field_customization";
-            this.TOKEN = new AbortController();
+
+    (function (ProgressBarColors) {
+        ProgressBarColors["Blue"] = "blue";
+        ProgressBarColors["Green"] = "green";
+        ProgressBarColors["Red"] = "red";
+        ProgressBarColors["Yellow"] = "yellow";
+    })(exports.ProgressBarColors || (exports.ProgressBarColors = {}));
+
+    var ProgressBarMode;
+    (function (ProgressBarMode) {
+        ProgressBarMode["Determinate"] = "determinate";
+        ProgressBarMode["Indeterminate"] = "indeterminate";
+    })(ProgressBarMode || (ProgressBarMode = {}));
+
+    var ProgressBarComponent = /** @class */ (function () {
+        function ProgressBarComponent() {
+            this.showValue = true;
+            this.mode = ProgressBarMode.Determinate;
         }
-        FileUploadService.prototype.getMetadataCustomField = function (request) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, CustomHttpClient.POST(this.BASE_URL_FIELD_CUSTOMIZATION + "/queries/getFileMetadata", request, { signal: this.TOKEN.signal })];
-                });
-            });
+        ProgressBarComponent.prototype.ngOnInit = function () {
+            this.validateInputs();
         };
-        FileUploadService = __decorate([
-            core.Injectable()
-        ], FileUploadService);
-        return FileUploadService;
+        ProgressBarComponent.prototype.validateInputs = function () {
+            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([
+            core.Input()
+        ], ProgressBarComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "targetValue", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "targetLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "activeColor", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "showValue", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarComponent.prototype, "mode", void 0);
+        ProgressBarComponent = __decorate([
+            core.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);
+        return ProgressBarComponent;
+    }());
+
+    var ProgressBarDeterminateComponent = /** @class */ (function () {
+        function ProgressBarDeterminateComponent() {
+            this.showValue = true;
+        }
+        ProgressBarDeterminateComponent.prototype.ngOnInit = function () {
+            this.validateValues();
+        };
+        ProgressBarDeterminateComponent.prototype.validateValues = function () {
+            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([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
+        ProgressBarDeterminateComponent = __decorate([
+            core.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);
+        return ProgressBarDeterminateComponent;
     }());
 
+    var ProgressBarIndeterminateComponent = /** @class */ (function () {
+        function ProgressBarIndeterminateComponent() {
+        }
+        __decorate([
+            core.Input()
+        ], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarIndeterminateComponent.prototype, "label", void 0);
+        ProgressBarIndeterminateComponent = __decorate([
+            core.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);
+        return ProgressBarIndeterminateComponent;
+    }());
+
+    var ProgressBarModule = /** @class */ (function () {
+        function ProgressBarModule() {
+        }
+        ProgressBarModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule],
+                declarations: [
+                    ProgressBarComponent,
+                    ProgressBarDeterminateComponent,
+                    ProgressBarIndeterminateComponent,
+                ],
+                exports: [ProgressBarComponent],
+            })
+        ], ProgressBarModule);
+        return ProgressBarModule;
+    }());
+
+
+    (function (ValidateErrors) {
+        ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
+        ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
+        ValidateErrors["UNSUPPORTED_EXTENSION"] = "UNSUPPORTED_EXTENSION";
+    })(exports.ValidateErrors || (exports.ValidateErrors = {}));
+
+    var FileUploadPermissions;
+    (function (FileUploadPermissions) {
+        FileUploadPermissions["Add"] = "add";
+        FileUploadPermissions["Read"] = "read";
+        FileUploadPermissions["Remove"] = "remove";
+    })(FileUploadPermissions || (FileUploadPermissions = {}));
+    var ALL_PERMISSIONS = [
+        FileUploadPermissions.Add,
+        FileUploadPermissions.Read,
+        FileUploadPermissions.Remove,
+    ];
+
+    var StorageUnits = {
+        KB: 1024,
+        MB: Math.pow(1024, 2),
+        GB: Math.pow(1024, 3),
+    };
+
     var Breakpoints = {
         SM_MIN: 0,
         SM_MAX: 767,
@@ -6350,26 +6497,110 @@
         return ExportUtils;
     }());
 
-
-    (function (ValidateErrors) {
-        ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
-        ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
-        ValidateErrors["UNSUPPORTED_EXTENSION"] = "UNSUPPORTED_EXTENSION";
-    })(exports.ValidateErrors || (exports.ValidateErrors = {}));
-
-    var FileUploadPermissions;
-    (function (FileUploadPermissions) {
-        FileUploadPermissions["Add"] = "add";
-        FileUploadPermissions["Read"] = "read";
-        FileUploadPermissions["Remove"] = "remove";
-    })(FileUploadPermissions || (FileUploadPermissions = {}));
-    var ALL_PERMISSIONS = [
-        FileUploadPermissions.Add,
-        FileUploadPermissions.Read,
-        FileUploadPermissions.Remove,
-    ];
+    var FileItemComponent = /** @class */ (function () {
+        function FileItemComponent() {
+            this.canReadFiles = true;
+            this.canRemoveFiles = true;
+            this.cancelUpload = new core.EventEmitter();
+            this.removeFile = new core.EventEmitter();
+        }
+        FileItemComponent.prototype.ngAfterContentInit = function () {
+            this._update();
+        };
+        FileItemComponent.prototype.onResize = function () {
+            this._update();
+        };
+        FileItemComponent.prototype._update = function () {
+            var windowWidth = window.innerWidth;
+            this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
+        };
+        FileItemComponent.prototype.simplifySize = function (size) {
+            var unit;
+            var 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 + " " + unit;
+        };
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "id", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "file", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "canReadFiles", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "canRemoveFiles", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "cancelLabel", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "removeLabel", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "ariaLabelProgress", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "successTooltip", void 0);
+        __decorate([
+            core.Input()
+        ], FileItemComponent.prototype, "ariaLabelSuccess", void 0);
+        __decorate([
+            core.Output()
+        ], FileItemComponent.prototype, "cancelUpload", void 0);
+        __decorate([
+            core.Output()
+        ], FileItemComponent.prototype, "removeFile", void 0);
+        __decorate([
+            core.HostListener("window:resize")
+        ], FileItemComponent.prototype, "onResize", null);
+        FileItemComponent = __decorate([
+            core.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;width:100%;-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);
+        return FileItemComponent;
+    }());
 
     var moment$3 = moment_;
+    var FileUploadService = /** @class */ (function () {
+        function FileUploadService() {
+            this.BASE_URL_FIELD_CUSTOMIZATION = "platform/field_customization";
+            this.TOKEN = new AbortController();
+        }
+        FileUploadService.prototype.getMetadataCustomField = function (request) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, CustomHttpClient.POST(this.BASE_URL_FIELD_CUSTOMIZATION + "/queries/getFileMetadata", request, { signal: this.TOKEN.signal })];
+                });
+            });
+        };
+        FileUploadService = __decorate([
+            core.Injectable()
+        ], FileUploadService);
+        return FileUploadService;
+    }());
+
+    var moment$4 = moment_;
     var FileUploadComponent = /** @class */ (function () {
         function FileUploadComponent(sanitizer, fileUploadService, translate) {
             this.sanitizer = sanitizer;
@@ -6401,10 +6632,10 @@
                 var _this = this;
                 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(function (file) {
-                    if (_this.isImage(file)) {
+                    if (_this._isImage(file)) {
                         file.objectURL = _this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
                     }
                     return file;
@@ -6415,43 +6646,39 @@
         });
         FileUploadComponent.prototype.ngOnInit = function () {
             this.supportedExtensions = this.supportedExtensions
-                .map(function (extension) { return extension.replace(".", "").toLowerCase(); });
+                .map(function (extension) { return extension
+                .replace(".", "")
+                .toLowerCase(); });
         };
         FileUploadComponent.prototype.ngOnDestroy = function () {
             this.ngUsubscribe.next();
             this.ngUsubscribe.complete();
         };
-        FileUploadComponent.prototype.ngAfterContentInit = function () {
-            this.update();
-        };
-        FileUploadComponent.prototype.onResize = function () {
-            this.update();
-        };
         FileUploadComponent.prototype.onFileSelect = function (files) {
             var e_1, _a;
             var newFiles = [];
             if (!this.multiple) {
                 this.files = [];
             }
-            if (this.isFileLimitExceeded(files)) {
+            if (this._isFileLimitExceeded(files)) {
                 this.validateErrors.emit({
                     files: files,
                     validation: exports.ValidateErrors.MAX_FILE_LIMIT,
                 });
-                this.clearFileInput();
+                this._clearFileInput();
                 return;
             }
             try {
                 for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
                     var file = files_1_1.value;
-                    if (this.isUnsupportedFileExtension(file)) {
+                    if (this._isUnsupportedFileExtension(file)) {
                         this.validateErrors.emit({
                             files: [file],
                             validation: exports.ValidateErrors.UNSUPPORTED_EXTENSION,
                         });
                         continue;
                     }
-                    if (this.isFileSizeExceeded(file)) {
+                    if (this._isFileSizeExceeded(file)) {
                         this.validateErrors.emit({
                             files: [file],
                             validation: exports.ValidateErrors.MAX_FILE_SIZE,
@@ -6474,7 +6701,7 @@
                     files: newFiles,
                 });
             }
-            this.clearFileInput();
+            this._clearFileInput();
         };
         FileUploadComponent.prototype.onRemoveFile = function (file) {
             var fileIndex = this.files.indexOf(file);
@@ -6483,12 +6710,13 @@
                 this.removeFile.emit({ file: file });
             }
         };
-        FileUploadComponent.prototype.onCancelUpload = function (index) {
-            var removedFiles = this.files.splice(index, 1);
-            if (removedFiles.length) {
+        FileUploadComponent.prototype.onCancelUpload = function (file) {
+            var index = this.files.indexOf(file);
+            if (index != -1) {
+                this.files.splice(index, 1);
                 this.cancelUpload.emit(index);
             }
-            this.clearFileInput();
+            this._clearFileInput();
         };
         FileUploadComponent.prototype.onDowloadFile = function (index) {
             this.downloadFile.emit({
@@ -6496,51 +6724,57 @@
                 anchor: this.anchor,
             });
         };
-        FileUploadComponent.prototype.update = function () {
-            var windowWidth = window.innerWidth;
-            this.isSmallDevice = windowWidth <= Breakpoints.SM_MAX;
-        };
-        FileUploadComponent.prototype.isImage = function (file) {
+        FileUploadComponent.prototype._isImage = function (file) {
             return /^image\//.test(file.type);
         };
-        FileUploadComponent.prototype.isFileLimitExceeded = function (files) {
+        FileUploadComponent.prototype._isFileLimitExceeded = function (files) {
             if (!this.fileLimit) {
                 return false;
             }
             return this.files.length + files.length > this.fileLimit;
         };
-        FileUploadComponent.prototype.isFileSizeExceeded = function (file) {
+        FileUploadComponent.prototype._isFileSizeExceeded = function (file) {
             if (!this.maxFileSize) {
                 return false;
             }
             return file.size > this.maxFileSize;
         };
-        FileUploadComponent.prototype.isUnsupportedFileExtension = function (file) {
+        FileUploadComponent.prototype._isUnsupportedFileExtension = function (file) {
             var _a;
             if ((_a = this.supportedExtensions) === null || _a === void 0 ? void 0 : _a.length) {
-                var extension = file.name.split(".").pop().toLowerCase();
+                var extension = file.name
+                    .split(".")
+                    .pop()
+                    .toLowerCase();
                 return !this.supportedExtensions.includes(extension);
             }
             return false;
         };
-        FileUploadComponent.prototype.clearFileInput = function () {
+        FileUploadComponent.prototype._clearFileInput = function () {
             this.inputUpload.nativeElement.value = null;
         };
-        FileUploadComponent.prototype.getUploadDate = function (blobFile) {
+        FileUploadComponent.prototype._getUploadDate = function (blobFile) {
             var _this = this;
             if (!blobFile) {
                 return;
             }
-            this.fileUploadService.getMetadataCustomField({ objectId: blobFile[0].objectId })
-                .then(function (metadata) { return _this.setModifiedDate(metadata); });
-        };
-        FileUploadComponent.prototype.setModifiedDate = function (metadata) {
-            var hour = moment$3(metadata.modified).format("HH");
-            var minutes = moment$3(metadata.modified).format("mm");
-            var day = moment$3(metadata.modified).format("DD");
-            var month = moment$3(metadata.modified).format("MM");
-            var fullYear = moment$3(metadata.modified).format("YYYY");
-            this.modifiedDate = this.translate.instant("platform.angular_components.date_modified_custom_blob", { hour: hour, minutes: minutes, day: day, month: month, fullYear: fullYear });
+            this.fileUploadService
+                .getMetadataCustomField({ objectId: blobFile[0].objectId })
+                .then(function (metadata) { return _this._setModifiedDate(metadata); });
+        };
+        FileUploadComponent.prototype._setModifiedDate = function (metadata) {
+            var hour = moment$4(metadata.modified).format("HH");
+            var minutes = moment$4(metadata.modified).format("mm");
+            var day = moment$4(metadata.modified).format("DD");
+            var month = moment$4(metadata.modified).format("MM");
+            var fullYear = moment$4(metadata.modified).format("YYYY");
+            this.modifiedDate = this.translate.instant("platform.angular_components.date_modified_custom_blob", {
+                hour: hour,
+                minutes: minutes,
+                day: day,
+                month: month,
+                fullYear: fullYear,
+            });
         };
         var FileUploadComponent_1;
         FileUploadComponent.nextId = 0;
@@ -6630,14 +6864,11 @@
         __decorate([
             core.Output()
         ], FileUploadComponent.prototype, "validateErrors", void 0);
-        __decorate([
-            core.HostListener("window:resize")
-        ], FileUploadComponent.prototype, "onResize", null);
         FileUploadComponent = FileUploadComponent_1 = __decorate([
             core.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);
         return FileUploadComponent;
@@ -6648,14 +6879,17 @@
         }
         FileUploadModule = __decorate([
             core.NgModule({
-                declarations: [FileUploadComponent],
                 imports: [
                     common.CommonModule,
                     ButtonModule,
-                    tooltip.TooltipModule,
-                    progressbar.ProgressBarModule,
+                    TooltipModule,
+                    ProgressBarModule,
                     core$1.TranslateModule,
                 ],
+                declarations: [
+                    FileUploadComponent,
+                    FileItemComponent,
+                ],
                 providers: [FileUploadService],
                 exports: [FileUploadComponent],
             })
@@ -7765,7 +7999,7 @@
         EnumBadgeColors["GRAY"] = "gray";
     })(exports.EnumBadgeColors || (exports.EnumBadgeColors = {}));
 
-    var moment$4 = moment_;
+    var moment$5 = moment_;
     var TableColumnsComponent = /** @class */ (function () {
         function TableColumnsComponent(viewContainerRef, translate, hostProjectConfigs) {
             this.viewContainerRef = viewContainerRef;
@@ -7872,7 +8106,7 @@
                         return ng2CurrencyMask.applyMask(attributeValue, numberConfigs, _this.isNumber(attributeValue));
                     case exports.EnumColumnFieldType.DATE:
                         var dateFormat = _this.getDateFormat(column, locale);
-                        return moment$4(attributeValue).format(dateFormat);
+                        return moment$5(attributeValue).format(dateFormat);
                     case exports.EnumColumnFieldType.BOOLEAN:
                         var value = attributeValue ? "yes" : "no";
                         return _this.translate.instant(prefix + value);
@@ -9812,7 +10046,7 @@
         CustomFieldType["Any"] = "Any";
         CustomFieldType["Enum"] = "Enum";
     })(CustomFieldType || (CustomFieldType = {}));
-    var moment$5 = moment_; // @HACK Necessary because of https://github.com/rollup/rollup/issues/670
+    var moment$6 = moment_; // @HACK Necessary because of https://github.com/rollup/rollup/issues/670
     var CustomFieldsComponent = /** @class */ (function () {
         function CustomFieldsComponent(customFieldsService, localeService, sanitizer, translateService, controlContainer) {
             this.customFieldsService = customFieldsService;
@@ -10021,16 +10255,16 @@
                     return;
                 switch (type) {
                     case exports.FieldType.Date:
-                        parsedValues[name] = moment$5(value).toDate();
+                        parsedValues[name] = moment$6(value).toDate();
                         break;
                     case exports.FieldType.DateTime:
-                        parsedValues[name] = moment$5(value).toDate();
+                        parsedValues[name] = moment$6(value).toDate();
                         break;
                     case exports.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 exports.FieldType.Time:
-                        parsedValues[name] = moment$5(value, "HH:mm:ss").toDate();
+                        parsedValues[name] = moment$6(value, "HH:mm:ss").toDate();
                         break;
                 }
             });
@@ -10063,16 +10297,16 @@
                                 value = new BigNumber__default(value).toFixed(scale).toString();
                             break;
                         case exports.FieldType.Date:
-                            value = moment$5(value).format("YYYY-MM-DD");
+                            value = moment$6(value).format("YYYY-MM-DD");
                             break;
                         case exports.FieldType.DateTime:
-                            value = moment$5(value).format();
+                            value = moment$6(value).format();
                             break;
                         case exports.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 exports.FieldType.Time:
-                            value = moment$5(value).format("HH:mm:ss");
+                            value = moment$6(value).format("HH:mm:ss");
                             break;
                     }
                 }
@@ -10485,7 +10719,7 @@
         return EditableOverlayModule;
     }());
 
-    var moment$6 = moment_;
+    var moment$7 = moment_;
     var YEAR = "year";
     var MONTH = "month";
     var DAY = "day";
@@ -10497,22 +10731,22 @@
         function DateUtils() {
         }
         DateUtils.parse = function (date) {
-            return moment$6(date).toDate();
+            return moment$7(date).toDate();
         };
         DateUtils.toString = function (date, with_time) {
             if (with_time === void 0) { with_time = false; }
-            var result = with_time ? moment$6(date, "YYYY-MM-DD hh:mm:ss.SSS") : moment$6(date, "YYYY-MM-DD");
+            var result = with_time ? moment$7(date, "YYYY-MM-DD hh:mm:ss.SSS") : moment$7(date, "YYYY-MM-DD");
             return result.toString();
         };
         DateUtils.format = function (date, formatString, lang) {
             if (formatString === void 0) { formatString = "YYYY-MM-DD HH:mm:ss.SSS"; }
             if (lang === void 0) { lang = "en"; }
-            var monthName = moment$6(date)
+            var monthName = moment$7(date)
                 .locale(lang)
                 .startOf("month")
                 .format("MMMM");
             var monthNameCapitalized = monthName.charAt(0).toUpperCase() + monthName.slice(1);
-            var dateToFormat = moment$6(date).locale(lang);
+            var dateToFormat = moment$7(date).locale(lang);
             var format_map = {
                 YYYY: dateToFormat.format("YYYY"),
                 MM: dateToFormat.format("MM"),
@@ -10542,13 +10776,13 @@
             return str;
         };
         DateUtils.diff = function (fistDate, secondDate, scale) {
-            var milliseconds = moment$6(fistDate).diff(secondDate, MILLISECOND);
-            var seconds = moment$6(fistDate).diff(secondDate, SECOND);
-            var minutes = moment$6(fistDate).diff(secondDate, MINUTE);
-            var hours = moment$6(fistDate).diff(secondDate, HOUR);
-            var days = moment$6(fistDate).diff(secondDate, DAY);
-            var months = moment$6(fistDate).diff(secondDate, MONTH);
-            var years = moment$6(fistDate).diff(secondDate, YEAR);
+            var milliseconds = moment$7(fistDate).diff(secondDate, MILLISECOND);
+            var seconds = moment$7(fistDate).diff(secondDate, SECOND);
+            var minutes = moment$7(fistDate).diff(secondDate, MINUTE);
+            var hours = moment$7(fistDate).diff(secondDate, HOUR);
+            var days = moment$7(fistDate).diff(secondDate, DAY);
+            var months = moment$7(fistDate).diff(secondDate, MONTH);
+            var years = moment$7(fistDate).diff(secondDate, YEAR);
             if (!scale.endsWith("s")) {
                 scale += "s";
             }
@@ -10563,14 +10797,14 @@
             }[scale]);
         };
         DateUtils.today = function () {
-            var dateStr = moment$6().format("YYY-MM-DD");
+            var dateStr = moment$7().format("YYY-MM-DD");
             return new Date(dateStr);
         };
         DateUtils.now = function () {
-            return moment$6().toDate();
+            return moment$7().toDate();
         };
         DateUtils.add = function (date, quantity, scale) {
-            return moment$6(date).add(quantity, scale).toDate();
+            return moment$7(date).add(quantity, scale).toDate();
         };
         DateUtils.startOf = function (date, scale) {
             var _a;
@@ -10599,7 +10833,7 @@
             return new Date(vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6]);
         };
         DateUtils.clone = function (date) {
-            return moment$6(date).toDate();
+            return moment$7(date).toDate();
         };
         DateUtils.getDateValues = function (date) {
             return [
@@ -10613,7 +10847,7 @@
             ];
         };
         DateUtils.getDaysInMonth = function (date) {
-            return moment$6(date, "YYYY-MM").daysInMonth();
+            return moment$7(date, "YYYY-MM").daysInMonth();
         };
         return DateUtils;
     }());
@@ -14178,146 +14412,6 @@
         return ProfilePicturePickerModule;
     }());
 
-
-    (function (ProgressBarColors) {
-        ProgressBarColors["Blue"] = "blue";
-        ProgressBarColors["Green"] = "green";
-        ProgressBarColors["Red"] = "red";
-        ProgressBarColors["Yellow"] = "yellow";
-    })(exports.ProgressBarColors || (exports.ProgressBarColors = {}));
-
-    var ProgressBarMode;
-    (function (ProgressBarMode) {
-        ProgressBarMode["Determinate"] = "determinate";
-        ProgressBarMode["Indeterminate"] = "indeterminate";
-    })(ProgressBarMode || (ProgressBarMode = {}));
-
-    var ProgressBarComponent = /** @class */ (function () {
-        function ProgressBarComponent() {
-            this.showValue = true;
-            this.mode = ProgressBarMode.Determinate;
-        }
-        ProgressBarComponent.prototype.ngOnInit = function () {
-            this.validateInputs();
-        };
-        ProgressBarComponent.prototype.validateInputs = function () {
-            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([
-            core.Input()
-        ], ProgressBarComponent.prototype, "value", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "targetValue", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "label", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "targetLabel", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "activeColor", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "showValue", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "mode", void 0);
-        ProgressBarComponent = __decorate([
-            core.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);
-        return ProgressBarComponent;
-    }());
-
-    var ProgressBarDeterminateComponent = /** @class */ (function () {
-        function ProgressBarDeterminateComponent() {
-            this.showValue = true;
-        }
-        ProgressBarDeterminateComponent.prototype.ngOnInit = function () {
-            this.validateValues();
-        };
-        ProgressBarDeterminateComponent.prototype.validateValues = function () {
-            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([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "value", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
-        ProgressBarDeterminateComponent = __decorate([
-            core.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);
-        return ProgressBarDeterminateComponent;
-    }());
-
-    var ProgressBarIndeterminateComponent = /** @class */ (function () {
-        function ProgressBarIndeterminateComponent() {
-        }
-        __decorate([
-            core.Input()
-        ], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarIndeterminateComponent.prototype, "label", void 0);
-        ProgressBarIndeterminateComponent = __decorate([
-            core.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);
-        return ProgressBarIndeterminateComponent;
-    }());
-
-    var ProgressBarModule = /** @class */ (function () {
-        function ProgressBarModule() {
-        }
-        ProgressBarModule = __decorate([
-            core.NgModule({
-                imports: [common.CommonModule],
-                declarations: [
-                    ProgressBarComponent,
-                    ProgressBarDeterminateComponent,
-                    ProgressBarIndeterminateComponent,
-                ],
-                exports: [ProgressBarComponent],
-            })
-        ], ProgressBarModule);
-        return ProgressBarModule;
-    }());
-
     var PanelComponent = /** @class */ (function () {
         function PanelComponent() {
             this.toggleable = true;
@@ -16957,55 +17051,56 @@
     exports.fallback = fallback;
     exports.ɵa = TooltipComponent;
     exports.ɵb = TooltipDirective;
-    exports.ɵba = FileUploadComponent$1;
-    exports.ɵbb = LookupFieldComponent;
-    exports.ɵbc = NumberFieldComponent;
-    exports.ɵbd = PasswordFieldComponent;
-    exports.ɵbe = RadioButtonComponent;
-    exports.ɵbf = RowComponent;
-    exports.ɵbg = SectionComponent;
-    exports.ɵbh = SelectFieldComponent;
-    exports.ɵbi = SliderFieldComponent;
-    exports.ɵbj = TextAreaFieldComponent;
-    exports.ɵbk = TextAreaIAFieldComponent;
-    exports.ɵbl = IAssistService;
-    exports.ɵbm = TextFieldComponent;
-    exports.ɵbo = DecimalField;
-    exports.ɵbp = SideTableComponent;
-    exports.ɵbq = ThumbnailService;
-    exports.ɵbr = InfiniteScrollModule;
-    exports.ɵbs = InfiniteScrollDirective;
-    exports.ɵbt = StructureModule;
-    exports.ɵbu = HeaderComponent;
-    exports.ɵbv = FooterComponent;
-    exports.ɵbw = KanbanEventService;
-    exports.ɵbx = KanbanItemComponent;
-    exports.ɵby = KanbanColumnComponent;
-    exports.ɵbz = KanbanItemDraggingComponent;
+    exports.ɵba = DynamicFieldComponent;
+    exports.ɵbb = DynamicFormDirective;
+    exports.ɵbc = FieldsetComponent;
+    exports.ɵbd = FileUploadComponent$1;
+    exports.ɵbe = LookupFieldComponent;
+    exports.ɵbf = NumberFieldComponent;
+    exports.ɵbg = PasswordFieldComponent;
+    exports.ɵbh = RadioButtonComponent;
+    exports.ɵbi = RowComponent;
+    exports.ɵbj = SectionComponent;
+    exports.ɵbk = SelectFieldComponent;
+    exports.ɵbl = SliderFieldComponent;
+    exports.ɵbm = TextAreaFieldComponent;
+    exports.ɵbn = TextAreaIAFieldComponent;
+    exports.ɵbo = IAssistService;
+    exports.ɵbp = TextFieldComponent;
+    exports.ɵbr = DecimalField;
+    exports.ɵbs = SideTableComponent;
+    exports.ɵbt = ThumbnailService;
+    exports.ɵbu = InfiniteScrollModule;
+    exports.ɵbv = InfiniteScrollDirective;
+    exports.ɵbw = StructureModule;
+    exports.ɵbx = HeaderComponent;
+    exports.ɵby = FooterComponent;
+    exports.ɵbz = KanbanEventService;
     exports.ɵc = CustomTranslationsModule;
-    exports.ɵca = NumberLocaleOptions;
-    exports.ɵcb = BorderButtonModule;
-    exports.ɵcc = BorderButtonComponent;
-    exports.ɵcd = ProgressBarDeterminateComponent;
-    exports.ɵce = ProgressBarIndeterminateComponent;
-    exports.ɵcf = SelectButtonItemComponent;
-    exports.ɵcg = SlidePanelService;
-    exports.ɵch = TieredMenuEventService;
-    exports.ɵci = TieredMenuService;
-    exports.ɵcj = TieredMenuComponent;
-    exports.ɵck = TieredMenuNestedComponent;
-    exports.ɵcl = TieredMenuItemComponent;
-    exports.ɵcm = TieredMenuDividerComponent;
-    exports.ɵcn = TimelineItemModule;
-    exports.ɵco = TimelineIconItemComponent;
-    exports.ɵcp = HorizontalTimelineModule;
-    exports.ɵcq = HorizontalTimelineComponent;
-    exports.ɵcr = VerticalTimelineModule;
-    exports.ɵcs = VerticalTimelineComponent;
-    exports.ɵct = RangeLineComponent;
-    exports.ɵcu = CollapseOptionComponent;
-    exports.ɵcv = CollapsedItemsComponent;
-    exports.ɵcw = VerticalItemsComponent;
+    exports.ɵca = KanbanItemComponent;
+    exports.ɵcb = KanbanColumnComponent;
+    exports.ɵcc = KanbanItemDraggingComponent;
+    exports.ɵcd = NumberLocaleOptions;
+    exports.ɵce = BorderButtonModule;
+    exports.ɵcf = BorderButtonComponent;
+    exports.ɵcg = SelectButtonItemComponent;
+    exports.ɵch = SlidePanelService;
+    exports.ɵci = TieredMenuEventService;
+    exports.ɵcj = TieredMenuService;
+    exports.ɵck = TieredMenuComponent;
+    exports.ɵcl = TieredMenuNestedComponent;
+    exports.ɵcm = TieredMenuItemComponent;
+    exports.ɵcn = TieredMenuDividerComponent;
+    exports.ɵco = TimelineItemModule;
+    exports.ɵcp = TimelineIconItemComponent;
+    exports.ɵcq = HorizontalTimelineModule;
+    exports.ɵcr = HorizontalTimelineComponent;
+    exports.ɵcs = VerticalTimelineModule;
+    exports.ɵct = VerticalTimelineComponent;
+    exports.ɵcu = RangeLineComponent;
+    exports.ɵcv = CollapseOptionComponent;
+    exports.ɵcw = CollapsedItemsComponent;
+    exports.ɵcx = VerticalItemsComponent;
     exports.ɵd = CodeEditorComponent;
     exports.ɵe = CoreFacade;
     exports.ɵf = CodeMirror6Core;
@@ -17014,21 +17109,21 @@
     exports.ɵi = LocalizedBignumberPipe;
     exports.ɵj = LocalizedBignumberImpurePipe;
     exports.ɵk = EmptyStateGoBackComponent;
-    exports.ɵl = FileUploadService;
-    exports.ɵm = InfoSignComponent;
-    exports.ɵn = TableColumnsComponent;
-    exports.ɵo = TablePagingComponent;
-    exports.ɵp = AutocompleteFieldComponent;
-    exports.ɵq = BignumberFieldComponent;
-    exports.ɵr = BooleanFieldComponent;
-    exports.ɵs = BooleanSwitchFieldComponent;
-    exports.ɵt = CalendarFieldComponent;
-    exports.ɵu = ChipsFieldComponent;
-    exports.ɵv = CountryPhonePickerFieldComponent;
-    exports.ɵw = CurrencyFieldComponent;
-    exports.ɵx = DynamicFieldComponent;
-    exports.ɵy = DynamicFormDirective;
-    exports.ɵz = FieldsetComponent;
+    exports.ɵl = ProgressBarDeterminateComponent;
+    exports.ɵm = ProgressBarIndeterminateComponent;
+    exports.ɵn = FileUploadService;
+    exports.ɵo = FileItemComponent;
+    exports.ɵp = InfoSignComponent;
+    exports.ɵq = TableColumnsComponent;
+    exports.ɵr = TablePagingComponent;
+    exports.ɵs = AutocompleteFieldComponent;
+    exports.ɵt = BignumberFieldComponent;
+    exports.ɵu = BooleanFieldComponent;
+    exports.ɵv = BooleanSwitchFieldComponent;
+    exports.ɵw = CalendarFieldComponent;
+    exports.ɵx = ChipsFieldComponent;
+    exports.ɵy = CountryPhonePickerFieldComponent;
+    exports.ɵz = CurrencyFieldComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });